@font-face{font-family:"Perfex Sans";src:url("assets/fonts/perfex-sans-regular.woff") format("woff");font-style:normal;font-weight:100 500;font-display:swap}
@font-face{font-family:"Perfex Sans";src:url("assets/fonts/perfex-sans-bold.woff") format("woff");font-style:normal;font-weight:600 900;font-display:swap}
/* Distinct motion layers: scroll on media/body, hover inside, filters on article. */
.hero-center{animation:none}.motion-start .hero-center>*{visibility:hidden}
.motion-curtain{position:fixed;inset:0;z-index:100;background:#04121b;display:grid;place-items:center;pointer-events:none;animation:curtain-away 1.35s cubic-bezier(.76,0,.24,1) both}.motion-curtain img{width:130px;height:120px;object-fit:contain;animation:curtain-logo .65s ease both}
@keyframes curtain-away{0%,35%{clip-path:inset(0)}100%{clip-path:inset(0 0 100%)}}@keyframes curtain-logo{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.hero h1{background-size:220% 100%;animation:wordmark-light 12s ease-in-out infinite alternate}@keyframes wordmark-light{from{background-position:0% 50%}to{background-position:100% 50%}}
.motion-word{display:inline-block;white-space:nowrap}.motion-letter{display:inline-block}.section-head h2{overflow:visible;line-height:1.25;letter-spacing:-.015em;padding-block:.12em}.intro .motion-word{vertical-align:baseline}
.client-row.marquee{display:block;overflow:hidden;max-width:790px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.logo-track{display:flex;width:max-content;animation:logo-travel 28s linear infinite}.logo-group{display:flex;flex-shrink:0;gap:15px;padding-right:15px}.client-row .logo-group img{width:146px;height:61px;flex-shrink:0;object-fit:contain}.marquee:hover .logo-track,.marquee:focus-within .logo-track{animation-play-state:paused}@keyframes logo-travel{to{transform:translateX(-50%)}}
.case-visual{transform:scale(var(--project-scale,1));transform-origin:center;transition:border-color .5s,box-shadow .5s;isolation:isolate}.project-media{position:absolute;inset:0;overflow:hidden;transform-origin:center}.project-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.case-caption{z-index:2;opacity:var(--caption-progress,1);transition:opacity .55s}
.project-hover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px;text-align:center;background:linear-gradient(150deg,#03121cca,#082d3bea);opacity:0;transition:opacity .6s ease;pointer-events:none}.project-hover strong{font-size:clamp(25px,3.2vw,46px);line-height:1.2;clip-path:inset(0 0 100%);transform:translateY(22px);transition:clip-path .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.project-hover span{font-size:14px;padding:9px 22px;border:1px solid #71d5e7;border-radius:30px;color:#b9f0fc;opacity:0;transform:translateY(12px);transition:opacity .5s .13s,transform .6s .13s}
.case-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#9befff20,transparent 55%);opacity:0;transition:opacity .5s;z-index:4}
.case-visual:focus-visible .project-hover{opacity:1}.case-visual:focus-visible .project-hover strong{clip-path:inset(0);transform:none}.case-visual:focus-visible .project-hover span{opacity:1;transform:none}.case-visual:focus-visible .case-caption{opacity:0}
.card-motion-body{flex:1;display:flex;flex-direction:column;min-width:0}.service-grid article{isolation:isolate;overflow:hidden;transition:border-color .5s,box-shadow .5s}.service-grid article:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,30%),#6ce4fa2e,transparent 65%);opacity:0;transition:opacity .5s}.service-icon,.value-icon{transform:rotate(var(--icon-entry,0deg));transition:color .45s}.service-icon svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.service-grid article:focus-within{border-color:#78ddeb;box-shadow:inset 0 0 75px #45c8e51a}.service-grid article:focus-within .service-icon svg{transform:translateY(-5px) rotate(-6deg)}
.button,nav a,.footer-links a,.read-link{transition:background .35s,color .35s,transform .35s,box-shadow .35s}.button:is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 8px 28px #51c1dc35}nav a,.footer-links a{position:relative}nav a:after,.footer-links a:after{content:'';position:absolute;left:0;bottom:-5px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}nav a:is(:hover,:focus-visible):after,.footer-links a:is(:hover,:focus-visible):after{transform:scaleX(1)}.read-link:is(:hover,:focus-visible){color:#fff;transform:translateY(-2px);border-color:#a1eafa}.filters button{transition:background .3s,color .3s,border-color .3s}.filters button:hover{border-color:#66d6e8;color:#effaff}.filters button.active:hover{color:#042431}
.contact-art{overflow:hidden;min-width:0;transition:box-shadow .6s}.contact-art>p{transition:opacity .5s,transform .7s cubic-bezier(.16,1,.3,1)}.contact-art>span{transition:opacity .45s}.contact-message{position:absolute;top:58%;left:25px;right:25px;display:flex;flex-direction:column;align-items:center;gap:15px;opacity:0;transform:translateY(38px);transition:opacity .55s .12s,transform .8s cubic-bezier(.16,1,.3,1);color:#e9fbff}.contact-message strong{font-size:clamp(22px,2.4vw,34px);line-height:1.25}.contact-message small{font-size:15px}.contact-art:focus-visible{box-shadow:inset 0 0 100px #68ddff35}.contact-art:focus-visible>p{opacity:0;transform:translateY(-25px)}.contact-art:focus-visible>span{opacity:0}.contact-art:focus-visible .contact-message{opacity:1;transform:none}
.footer-wordmark{position:relative}.footer-wordmark:after{content:'PERFEX';position:absolute;inset:0;padding-right:.07em;color:#b6e9f6;-webkit-text-stroke:0;clip-path:inset(0 calc(100% - var(--footer-reveal,100%)) 0 0);pointer-events:none}
input,textarea{transition:border-color .3s,box-shadow .3s}input:focus,textarea:focus{border-color:#76deed;box-shadow:0 2px 0 #76deed}
@media(hover:hover) and (pointer:fine){.case-visual:hover{border-color:#a8efff;box-shadow:0 18px 55px #31b9d522}.case-visual:hover .project-media img{transform:scale(1.045)}.case-visual:hover .project-hover{opacity:1}.case-visual:hover .project-hover strong{clip-path:inset(0);transform:none}.case-visual:hover .project-hover span{opacity:1;transform:none}.case-visual:hover .case-caption{opacity:0}.case-visual:hover:after,.service-grid article:hover:after{opacity:1}.service-grid article:hover{border-color:#78ddeb;box-shadow:inset 0 0 75px #45c8e51a}.service-grid article:hover .service-icon svg{transform:translateY(-5px) rotate(-6deg)}.contact-art:hover{box-shadow:inset 0 0 100px #68ddff35}.contact-art:hover>p{opacity:0;transform:translateY(-25px)}.contact-art:hover>span{opacity:0}.contact-art:hover .contact-message{opacity:1;transform:none}}
@media(hover:none){.project-hover{display:none}.contact-message{position:static;opacity:1;transform:none;margin-top:20px}.contact-art>span{display:none}}
@media(max-width:700px){.client-row .logo-group img{width:122px;height:54px}.logo-group{gap:12px;padding-right:12px}.motion-word{letter-spacing:inherit}.contact-message strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.motion-curtain{display:none}.hero h1{animation:none}.logo-track{animation:none;transform:none;width:auto}.logo-group{flex-wrap:wrap;justify-content:center;padding:0;flex-shrink:1}.logo-group[aria-hidden=true]{display:none}.client-row.marquee{mask-image:none}.project-media,.card-motion-body,.project-hover strong{clip-path:none!important}.case-visual,.project-media,.project-media img,.motion-letter,.card-motion-body,.service-icon,.value-icon,.service-icon svg,.contact-art>p{transform:none!important}.project-hover strong,.project-hover span,.contact-message{transform:none!important}.motion-letter,.intro .motion-word{opacity:1!important}}
.case-visual.education .project-media img{object-fit:contain;background:#e3ecf6;padding:15px 15px 65px}.case-visual.consumer .project-media img{object-fit:contain;background:#fff4dc;padding:15px 15px 65px}.case-visual.auto .project-media img{object-position:center}

/* Unpainted grid slots preserve dimensions while the complete card moves. */
.motion-card-frame{display:flex;min-width:0;position:relative}
.motion-card-frame>.platform-logo,.motion-card-frame>article{width:100%;min-width:0;flex:1;transform-origin:center;backface-visibility:hidden}
.value-grid{border:0;overflow:clip}
.value-grid .motion-card-frame>article{border:1px solid #384752;background:#03080d}
.value-grid .motion-card-frame:nth-child(1)>article,.value-grid .motion-card-frame:nth-child(4)>article{background:linear-gradient(130deg,#102f42,#06101b 80%)}
@media(max-width:700px){
.platform-grid .motion-card-frame>.platform-logo{grid-column:auto;width:100%;justify-self:stretch}
.platform-grid>.motion-card-frame:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
}
@media(prefers-reduced-motion:reduce){.motion-card-frame>article,.motion-card-frame>.platform-logo{opacity:1!important;transform:none!important}}

/* Vietnamese text: keep accents in bounds and avoid compressed split letters. */
.perfex-awsa{font-family:Arial,Helvetica,sans-serif}.perfex-awsa button,.perfex-awsa input,.perfex-awsa textarea{font-family:inherit}.section-head .motion-word{letter-spacing:inherit}.section-head .motion-letter{vertical-align:baseline}.service-grid h3,.value-grid h3,.platforms h2{line-height:1.4;letter-spacing:0}.clients>p{font-size:14px;line-height:1.6;letter-spacing:.4px}

/* One hosted font covers Latin and Vietnamese; split letters inherit it. */
body.perfex-awsa{font-family:"Perfex Sans",Arial,sans-serif}
.perfex-awsa .section-head h2,.perfex-awsa .section-head h2 span{font-family:"Perfex Sans",Arial,sans-serif;font-weight:700;font-style:normal;font-synthesis:none}