/* AKACONS – giao diện website. Chuyển từ bản thiết kế Main.dc.html */
/* Keep the static site anchored to the available viewport.  This file is
   also rendered inside the CMS preview iframe, so the root must not shrink
   to an intrinsic/content width on wide desktop canvases. */
html,body{width:100%;min-width:0;max-width:100%;overflow-x:clip}
body{margin:0;background:#0D1D37}
#root,.page{width:100%;min-width:0;max-width:100%}
a{color:#3FB8B5}a:hover{color:#7FD3D0}
/* Desktop sections should use the available screen width.  A fixed 1360px
   cap centered the layout and produced oversized empty gutters on wide
   monitors. */
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 48px;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{margin:0 0 24px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#3FB8B5;font-weight:400}
.sec-h{margin:0;font-size:56px;line-height:64px;font-weight:200;color:#FFFFFF}
.lead{margin:0;font-size:17px;line-height:30px;color:#B7C2D4}

/* ---------- Trang chờ tải ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#0D1D37;display:flex;align-items:center;justify-content:center;animation:ldrOut .65s cubic-bezier(.7,0,.3,1) .85s forwards}
@keyframes ldrOut{0%{transform:translateY(0)}99%{transform:translateY(-100%);visibility:visible}100%{transform:translateY(-100%);visibility:hidden}}
.ldr-inner{display:flex;flex-direction:column;align-items:center;gap:36px;animation:ldrInnerOut .4s ease .6s forwards}
@keyframes ldrInnerOut{to{opacity:0;transform:translateY(-24px)}}
.ldr-glow{position:relative;width:240px}
.ldr-logo{width:240px;height:auto;display:block;animation:ldrLogo .9s cubic-bezier(.2,.7,.2,1) .1s both,ldrLit .8s ease .55s both}
@keyframes ldrLogo{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(.94)}60%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes ldrLit{0%{filter:brightness(.68)}55%{filter:brightness(.8)}100%{filter:brightness(1) drop-shadow(0 0 14px rgba(220,228,240,.35))}}
.ldr-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:url(../assets/img/logo.png);mask-image:url(../assets/img/logo.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-image:linear-gradient(105deg,rgba(255,255,255,0) 28%,rgba(150,162,180,.5) 38%,rgba(232,236,242,.9) 45%,#FFFFFF 50%,rgba(200,208,220,.85) 54%,rgba(120,132,152,.5) 62%,rgba(255,255,255,0) 72%);background-size:300% 100%;background-repeat:no-repeat;animation:ldrSweep .65s cubic-bezier(.45,0,.25,1) .4s both}
@keyframes ldrSweep{from{background-position:100% 0}to{background-position:0% 0}}
.ldr-bar{width:180px;height:1px;background:rgba(255,255,255,.15);position:relative;overflow:hidden}
.ldr-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:#3FB8B5;transform-origin:left;animation:ldrBar .95s cubic-bezier(.6,0,.2,1) .15s both}
@keyframes ldrBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ldr-tag{font-size:12px;white-space:nowrap;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,246,249,.7);animation:ldrTag .6s ease .25s both}
@keyframes ldrTag{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.32em}}

/* ---------- Hiệu ứng chuyển trang ---------- */
.pg-curtain{position:fixed;inset:0;z-index:90;background:#0D1D37;display:flex;align-items:center;justify-content:center;transform:translateY(100%);pointer-events:none}
.pg-curtain::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#3FB8B5}
.pg-curtain.cover{transform:translateY(0);transition:transform .65s cubic-bezier(.7,0,.3,1);pointer-events:auto}
.pg-curtain.reveal{transform:translateY(-100%);transition:transform .75s cubic-bezier(.7,0,.3,1)}
.pc-logo{width:150px;height:auto;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
.pg-curtain.cover .pc-logo{opacity:1;transform:none;transition:opacity .35s ease .3s,transform .35s ease .3s}
.page{animation:pgIn 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}

/* ---------- Đầu trang ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:20}
.nl{position:relative;color:#F4F6F9;text-decoration:none;padding:6px 0;cursor:pointer}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#3FB8B5;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nl:hover{color:#FFFFFF}.nl:hover::after,.nl.on::after{transform:scaleX(1)}
.nl.on{color:#FFFFFF}
.nav-links{display:flex;gap:26px}
.burger{display:none;width:48px;height:48px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#FFFFFF;align-items:center;justify-content:center;cursor:pointer;border-radius:2px}
.mmenu{position:fixed;inset:0;z-index:30;background:rgba(10,24,48,.98);display:flex;flex-direction:column;justify-content:center;padding:0 32px;animation:pgIn .4s ease both}
.mm-link{display:block;padding:14px 0;font-size:34px;font-weight:200;color:#F4F6F9;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}

/* ---------- Màn hình đầu: slide ---------- */
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(13,29,55,.90) 0%,rgba(13,29,55,.70) 26%,rgba(13,29,55,.15) 44%,rgba(13,29,55,0) 60%),linear-gradient(180deg,rgba(13,29,55,.55) 0%,rgba(13,29,55,0) 20%,rgba(13,29,55,0) 72%,rgba(13,29,55,.92) 100%)}
.hs{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;transition:opacity 1.4s ease,transform 8s ease-out;will-change:opacity,transform}
.hs-1{background-image:url(../assets/img/4456a1c3a5062d813eba30ca95fa0bbd.jpg);background-position:65% 30%}
.hs-2{background-image:url(../assets/img/1ee1090cd51a3b4db895c12b44d9ab87.jpg);background-position:75% 40%}
.hs-3{background-image:url(../assets/img/e9c38272895e47fb3b3a94c9fd039ba0.jpg);background-position:center 45%}
.hs-4{background-image:url(../assets/img/3f04be9747335d9cae9512b49ef14fad.jpg);background-position:70% 60%}
.hs-5{background-image:url(../assets/img/d2afd8c129e2ae55bb579aec6acb097d.jpg);background-position:80% center}
.hs-6{background-image:url(../assets/img/e5d49199a0b0e3e148f2d0eb5808f798.jpg);background-position:right bottom}
.stack{display:grid}
.stack>.st{grid-area:1/1;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hs-tab{display:block;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid rgba(255,255,255,0.22);padding:22px 20px 30px 0;cursor:pointer;font-family:Kanit,system-ui,sans-serif;position:relative;min-height:44px}
.hs-tab:hover .hs-label{color:#FFFFFF}
.hs-label{display:block;transition:color .3s}
.hs-prog{position:absolute;left:0;top:-1px;height:2px;background:#3FB8B5;animation:hsProg 7s linear both}
@keyframes hsProg{from{width:0}to{width:100%}}
.g-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.hs-arrow{width:48px;height:48px;border:1px solid rgba(255,255,255,0.4);background:rgba(13,29,55,0.35);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:2px;transition:border-color .3s,color .3s,background .3s}
.hs-arrow:hover{border-color:#3FB8B5;color:#3FB8B5;background:rgba(13,29,55,0.6)}
.hero-text{width:34%;min-width:440px}
.ht{white-space:nowrap}
@media (max-width:640px){.ht{white-space:normal}}

/* ---------- Đầu trang con ---------- */
.ph{position:relative;min-height:66vh;box-sizing:border-box;display:flex;align-items:flex-end;padding:180px 0 96px;background-size:cover;background-position:center;overflow:hidden}
.ph-about{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.2) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/1584ed0b3740ea657e81023a7663ad99.jpg)}
.ph-services{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/e9c38272895e47fb3b3a94c9fd039ba0.jpg)}
.ph-projects{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/8c1bfb9963794c47ef1091b83bbecb9e.jpg)}
.ph-process{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/d2afd8c129e2ae55bb579aec6acb097d.jpg)}
.ph-contact{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/8b2c5df2c7adde2cda2f741b6c6be695.jpg)}
.ph-knowledge{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/1f72f9e9b93905513c961bebfcaab815.jpg)}
.ph-data{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/636f28faa09a4491dd37d575029ba680.jpg)}
.ph-careers{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.15) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/fddaf70a1a2a7f9673805c9164e63112.jpg)}
.ph-studio{background-image:linear-gradient(90deg,rgba(13,29,55,.92) 0%,rgba(13,29,55,.6) 45%,rgba(13,29,55,.1) 100%),linear-gradient(180deg,rgba(13,29,55,.5) 0%,rgba(13,29,55,0) 30%,rgba(13,29,55,.85) 100%),url(../assets/img/4456a1c3a5062d813eba30ca95fa0bbd.jpg)}
.ph h1{margin:0;font-size:76px;line-height:84px;font-weight:200;color:#FFFFFF;letter-spacing:-.01em}
.crumb{margin:0 0 28px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,246,249,.75)}
.crumb a{color:rgba(244,246,249,.75);text-decoration:none}
.crumb a:hover{color:#3FB8B5}

/* ---------- Xuất hiện khi tải ---------- */
.ld{animation:ldUp 1.1s cubic-bezier(.2,.7,.2,1) both}
.ld-1{animation-delay:.25s}.ld-2{animation-delay:.4s}.ld-3{animation-delay:.55s}.ld-4{animation-delay:.7s}.ld-5{animation-delay:.85s}
.first .ld-1{animation-delay:2.75s}.first .ld-2{animation-delay:2.95s}.first .ld-3{animation-delay:3.15s}.first .ld-4{animation-delay:3.35s}.first .ld-5{animation-delay:3.55s}
@keyframes ldUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.ld-down{animation:ldDown 1s cubic-bezier(.2,.7,.2,1) both}
.first .ld-down{animation-delay:2.6s}
@keyframes ldDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}

/* ---------- Rê chuột ---------- */
.zoom{overflow:hidden}
.zoom img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.06)}
.card{transition:border-color .5s,background .5s}
.card:hover{border-color:rgba(63,184,181,.55) !important;background:rgba(255,255,255,.02)}
.card .card-no{transition:color .5s}
.card:hover .card-no{color:#3FB8B5 !important}
.btn-solid svg,.btn-line svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn-solid:hover svg,.btn-line:hover svg{transform:translateX(5px)}
.lnk-row{transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.lnk-row:hover{padding-left:10px !important}
.more{display:inline-flex;align-items:center;gap:12px;color:#F4F6F9;text-decoration:none;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(63,184,181,.6);cursor:pointer}
.more:hover{color:#FFFFFF;border-bottom-color:#3FB8B5}
.more svg{transition:transform .35s}
.more:hover svg{transform:translateX(5px)}

/* ---------- Xuất hiện khi cuộn ---------- */
@supports (animation-timeline: view()){
.rv,.rv-l,.rv-r,.rv-fade,.rv-clip,.rv-line,.rv-num{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-timeline:view();animation-range:entry 0% cover 30%}
.rv{animation-name:rvUp}
.rv-l{animation-name:rvL}
.rv-r{animation-name:rvR}
.rv-fade{animation-name:rvFade}
.rv-clip{animation-name:rvClip;animation-range:entry 0% cover 45%}
.rv-line{animation-name:rvLine;transform-origin:left}
.rv-num{animation-name:rvNum;animation-range:entry 10% cover 40%}
.d1{animation-range:entry 4% cover 33%}.d2{animation-range:entry 8% cover 36%}.d3{animation-range:entry 12% cover 39%}
.par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes par{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
.site-head{position:fixed;animation:headBg linear both;animation-timeline:scroll(root);animation-range:0 260px}
@keyframes headBg{from{background:rgba(10,24,48,0)}to{background:rgba(10,24,48,.94);box-shadow:0 1px 0 rgba(255,255,255,.08)}}
}
@keyframes rvUp{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes rvL{from{opacity:0;transform:translateX(-72px)}to{opacity:1;transform:none}}
@keyframes rvR{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:none}}
@keyframes rvFade{from{opacity:0}to{opacity:1}}
@keyframes rvClip{from{clip-path:inset(22% 8% 22% 8%);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes rvLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rvNum{from{opacity:0;transform:translateY(40px) scale(.86);letter-spacing:.08em}to{opacity:1;transform:none;letter-spacing:-.02em}}

/* ---------- Nền ảnh ---------- */
.sec-bg{background-size:cover;background-position:center}
/* Blur only the backdrop of editable section backgrounds; page content stays sharp. */
.page .sec-bg{isolation:isolate}
.page .sec-bg::before{content:"";position:absolute;z-index:0;inset:0;background:rgba(13,29,55,var(--section-background-opacity,0));backdrop-filter:blur(var(--section-background-blur,0px));-webkit-backdrop-filter:blur(var(--section-background-blur,0px));pointer-events:none}
.page .sec-bg>*{position:relative;z-index:1}
.bg-about{background-image:linear-gradient(180deg,rgba(10,24,48,.94) 0%,rgba(10,24,48,.84) 50%,rgba(10,24,48,.94) 100%),url(../assets/img/c3297477c7f619c76d0ecd6d37e95746.jpg)}
.bg-services{background-image:linear-gradient(180deg,rgba(13,29,55,.94) 0%,rgba(13,29,55,.82) 50%,rgba(13,29,55,.94) 100%),url(../assets/img/bf628f494ca4f0093e77fc70edf72a57.jpg)}
.bg-projects{background-image:linear-gradient(180deg,rgba(10,24,48,.95) 0%,rgba(10,24,48,.86) 50%,rgba(10,24,48,.95) 100%),url(../assets/img/e3c9d59a77e099e7aeb935adea16d376.jpg)}
.bg-process{background-image:linear-gradient(90deg,rgba(13,29,55,.95) 0%,rgba(13,29,55,.86) 45%,rgba(13,29,55,.78) 100%),url(../assets/img/0586fb338f5c4be814d1038f6745f3e7.jpg)}
.bg-letter{background-image:linear-gradient(180deg,rgba(10,24,48,.93) 0%,rgba(10,24,48,.82) 50%,rgba(10,24,48,.93) 100%),url(../assets/img/7301eef61fbc1da0e597b0fe8aa2006f.jpg)}
.bg-footer{background-image:linear-gradient(180deg,rgba(7,18,37,.95),rgba(7,18,37,.97)),url(../assets/img/2bbeba63726f832308c17e887899f130.jpg)}
.site-footer{position:relative;padding:60px 0 0;background-position:right center;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,15,29,.98) 0%,rgba(4,15,29,.95) 54%,rgba(4,15,29,.78) 100%);pointer-events:none}.site-footer .wrap{position:relative}
.footer-main{display:grid;grid-template-columns:1.42fr .82fr .98fr 1.3fr;gap:clamp(36px,4vw,78px);padding-bottom:28px}.footer-brand,.footer-nav,.footer-services,.footer-contact{min-width:0}.footer-logo{width:220px;height:auto;display:block}.footer-brand>p{max-width:410px;margin:25px 0 0;font-size:15px;line-height:1.65;color:#B7C2D4}.footer-brand .footer-tax{margin-top:20px;color:#D5DCE6}.footer-social{margin-top:30px}.footer-social .soc{width:52px;height:52px;border-color:rgba(255,255,255,.22)}
.site-footer h2{position:relative;margin:8px 0 28px;font-size:16px;line-height:1.25;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#F4F6F9}.site-footer h2::after{content:"";position:absolute;left:0;bottom:-14px;width:55px;height:2px;background:#3FB8B5}.footer-nav #nav-footer{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.footer-nav .nl,.footer-services>a{font-size:15px;line-height:1.4;color:#B7C2D4;text-decoration:none}.footer-nav .nl:hover,.footer-services>a:hover{color:#FFFFFF}.footer-nav .nl::after{display:none}.footer-nav .nl::before{content:"→";display:inline-block;width:0;overflow:hidden;color:#3FB8B5;transition:width .25s ease}.footer-nav .nl:hover::before{width:18px}
.footer-services{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.footer-services>a{display:flex;width:100%;justify-content:space-between;gap:12px}.footer-services>a span,.footer-project i{color:#7FD3D0;font-style:normal}.footer-project{position:relative;display:grid!important;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;margin-top:16px;padding:14px!important;background:rgba(26,58,91,.45);border-radius:8px;overflow:hidden;transition:transform .25s ease,background .25s ease}.footer-project:hover{transform:translateY(-3px);background:rgba(39,83,122,.5)}.footer-project img{width:46px;height:46px;object-fit:cover;border-radius:4px}.footer-project span{display:flex;flex-direction:column;gap:3px}.footer-project b{font-size:14px;font-weight:400;color:#F4F6F9}.footer-project small{font-size:11px;line-height:1.35;color:#B7C2D4}
.footer-contact{font-style:normal}.footer-contact>div{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:19px}.footer-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(20,52,85,.55);color:#D5DCE6;font-size:20px}.footer-contact p{display:flex;flex-direction:column;gap:3px;margin:0;font-size:13px;color:#8EA1B8}.footer-contact p a,.footer-contact p strong{font-size:15px;line-height:1.45;font-weight:400;color:#F4F6F9;text-decoration:none}.contact-action{white-space:nowrap;padding:9px 13px;border:1px solid rgba(86,159,211,.28);border-radius:999px;color:#D5DCE6!important;text-decoration:none;font-size:12px;transition:background .25s ease,border-color .25s ease}.contact-action:hover{border-color:#3FB8B5;background:rgba(63,184,181,.12)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0 28px;border-top:1px solid rgba(255,255,255,.13);color:#9AABBE;font-size:13px}.footer-legal{display:flex;align-items:center;gap:0}.footer-legal span{padding:0 20px;border-right:1px solid rgba(255,255,255,.16);white-space:nowrap}.footer-legal span:last-child{border:0}.footer-top{border:0;background:transparent;color:#B7C2D4;font-family:inherit;font-size:13px;cursor:pointer;padding:10px 0}.footer-top:hover{color:#3FB8B5}.site-footer a:focus-visible,.footer-top:focus-visible{outline:2px solid #3FB8B5;outline-offset:4px}
@media(max-width:1100px){.footer-main{grid-template-columns:1.2fr 1fr;gap:52px}.footer-contact{grid-column:2}.footer-brand{grid-row:span 2}}
@media(max-width:680px){.site-footer{padding-top:52px}.footer-main{grid-template-columns:1fr;gap:42px;padding-bottom:46px}.footer-brand{grid-row:auto}.footer-contact{grid-column:auto}.footer-logo{width:190px}.footer-brand>p{font-size:14px}.footer-nav #nav-footer{gap:13px}.footer-contact>div{grid-template-columns:42px minmax(0,1fr)}.footer-contact .contact-action{grid-column:2;justify-self:start;margin-top:-6px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px;padding:20px 0 24px}.footer-legal{flex-wrap:wrap;row-gap:10px}.footer-legal span{padding:0 12px 0 0;margin-right:12px}.footer-social .soc{width:48px;height:48px}}
.stats-bg{background-image:linear-gradient(180deg,rgba(13,29,55,.72) 0%,rgba(13,29,55,.88) 70%,#0D1D37 100%),url(../assets/img/8c1bfb9963794c47ef1091b83bbecb9e.jpg);background-size:cover;background-position:center 60%}
.mission-bg{background-image:linear-gradient(90deg,rgba(13,29,55,.96) 0%,rgba(13,29,55,.80) 45%,rgba(13,29,55,.25) 100%),url(../assets/img/1584ed0b3740ea657e81023a7663ad99.jpg);background-size:cover;background-position:center 35%}
.cta-bg{background-image:linear-gradient(90deg,rgba(13,29,55,.95) 0%,rgba(13,29,55,.82) 50%,rgba(13,29,55,.55) 100%),url(../assets/img/8b2c5df2c7adde2cda2f741b6c6be695.jpg);background-size:cover;background-position:center}
@media (min-width:1001px){.sec-bg,.stats-bg,.mission-bg,.cta-bg{background-attachment:fixed}}

/* ---------- Dải dự án trượt ngang ---------- */
.pj-marquee{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.pj-track{display:flex;width:max-content;animation:pjMove 80s linear infinite}
@keyframes pjMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pj-card{position:relative;flex:none;width:440px;height:580px;margin-right:24px;overflow:hidden;background:#071225}
.pj-img{position:absolute;inset:0}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pj-card:hover .pj-img img{transform:scale(1.07)}
.pj-shade{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(7,18,37,0) 0%,rgba(7,18,37,.94) 100%)}
.pj-info{position:absolute;left:32px;right:32px;bottom:30px}
.pj-meta{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}

/* ---------- Thẻ dự án (trang Dự án) ---------- */
.pg-card{border:1px solid rgba(255,255,255,.14);background:rgba(7,18,37,.55);display:flex;flex-direction:column}
.pg-card .zoom{height:400px;position:relative}
.pg-card .zoom img{width:100%;height:100%;object-fit:cover;display:block}
.pg-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px}

/* ---------- Mạng xã hội ---------- */
.soc-row{display:flex;gap:12px;flex-wrap:wrap}
.soc{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#F4F6F9;text-decoration:none;transition:border-color .3s,color .3s,background .3s,transform .3s;font-family:Kanit,system-ui,sans-serif}
.soc:hover{border-color:#3FB8B5;color:#FFFFFF;background:rgba(63,184,181,.14);transform:translateY(-3px)}
.soc-zalo{font-size:12px;font-weight:500;letter-spacing:.02em}

/* ---------- Lưới, nút, biểu mẫu ---------- */
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.g-steps{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:stretch}
.g-contact{display:grid;grid-template-columns:5fr 7fr;gap:80px}
.step-btn{display:flex;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14);padding:20px 0;cursor:pointer;font-family:Kanit,system-ui,sans-serif;gap:24px;align-items:baseline;min-height:44px;transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.step-btn:hover{padding-left:10px}
.proj-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity 1s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.fx-row{display:flex;align-items:baseline;gap:28px;padding:26px 0;border-top:1px solid rgba(255,255,255,.14);transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.fx-row:hover{padding-left:12px}
.fx-row:hover .fx-name{color:#FFFFFF}
.fx-name{transition:color .3s}
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#F4F6F9;font-family:Kanit,system-ui,sans-serif;font-weight:300;font-size:17px;padding:10px 0;outline:none;border-radius:0;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:#3FB8B5}
.field select option{background:#0D1D37}
.field label{font-size:13px;color:#B7C2D4;letter-spacing:.08em;text-transform:uppercase}
.btn-solid{display:inline-flex;align-items:center;gap:12px;background:#006F6E;color:#FFFFFF;text-decoration:none;padding:16px 28px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;border-radius:2px;border:0;cursor:pointer;font-family:Kanit,system-ui,sans-serif;min-height:48px;box-sizing:border-box;transition:background .3s}
.btn-solid:hover{background:#008D8C;color:#FFFFFF}
.btn-line{display:inline-flex;align-items:center;gap:12px;color:#F4F6F9;text-decoration:none;padding:15px 28px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:300;border:1px solid rgba(255,255,255,.4);border-radius:2px;min-height:48px;box-sizing:border-box;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.btn-line:hover{border-color:#3FB8B5;color:#FFFFFF;background:rgba(63,184,181,.08)}
/* ---------- Kiến thức ---------- */
.chip{background:transparent;border:1px solid rgba(255,255,255,.28);color:#F4F6F9;font-family:Kanit,system-ui,sans-serif;font-size:14px;padding:10px 18px;border-radius:40px;cursor:pointer;min-height:44px;transition:border-color .3s,background .3s,color .3s}
.chip:hover{border-color:#3FB8B5}
.chip.on{background:#006F6E;border-color:#006F6E;color:#FFFFFF}
.art{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);background:rgba(7,18,37,.55);text-decoration:none;color:inherit;animation:pgIn .6s ease both}
.art .zoom{height:260px}
.art .zoom img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- Dữ liệu ---------- */
.doc-row{display:grid;grid-template-columns:56px 1fr 120px 170px;gap:24px;align-items:center;padding:28px 0;border-top:1px solid rgba(255,255,255,.14);transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.doc-row:hover{padding-left:10px}
.doc-ico{width:56px;height:56px;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#3FB8B5}
.doc-pend{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#B7C2D4;text-align:right}
.tabbar{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:64px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:#B7C2D4;font-family:Kanit,system-ui,sans-serif;font-size:17px;font-weight:300;padding:16px 28px 18px 0;margin-right:28px;cursor:pointer;min-height:44px;transition:color .3s,border-color .3s}
.tab:hover{color:#FFFFFF}
.tab.on{color:#FFFFFF;border-bottom-color:#3FB8B5}
.lock-box{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:640px;margin:0 auto;padding:56px 40px;border:1px solid rgba(255,255,255,.14);background:rgba(7,18,37,.7)}
.idoc{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s}
.idoc:hover{padding-left:8px;background:rgba(255,255,255,.02)}
.fmt{flex:none;width:48px;text-align:center;font-size:11px;letter-spacing:.06em;padding:4px 0;border:1px solid rgba(63,184,181,.55);color:#3FB8B5}
.idl{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:#D5DCE6;border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:color .3s,border-color .3s,background .3s}
.idl:hover{color:#FFFFFF;border-color:#3FB8B5;background:rgba(63,184,181,.12)}
/* ---------- Màn hình đầu trên điện thoại ---------- */
@media (max-width:820px) and (orientation:portrait){
.hs-1{background-image:url(../assets/img/ff65fe60da5a9d6ebee75d09ad3cb734.jpg);background-position:center top}
.hs-2{background-image:url(../assets/img/ae521c51d9e5575f973c0045ff9dca60.jpg);background-position:center top}
.hs-3{background-image:url(../assets/img/a32ff2e8ce9fef0517e6856d483a9930.jpg);background-position:center top}
.hs-4{background-image:url(../assets/img/b5d4a63dc4fc572495e87f4c2374b00e.jpg);background-position:center 20%}
.hs-5{background-image:url(../assets/img/1d2a0e680f8a38659b35bc529dfd8d52.jpg);background-position:center top}
.hs-6{background-image:url(../assets/img/85b2aa67d2347b92a01b2a4095c95107.jpg);background-position:center top}
.hero-bg{background-image:linear-gradient(180deg,rgba(13,29,55,.6) 0%,rgba(13,29,55,0) 16%,rgba(13,29,55,0) 34%,rgba(13,29,55,.78) 56%,rgba(13,29,55,.96) 76%,#0D1D37 100%)}
.hero-mid{justify-content:flex-end !important;min-height:58vh !important}
.hero-text{padding-bottom:28px !important}
.hero-text .big-h{font-size:40px !important;line-height:48px !important}
.hero-text .st p:last-child{font-size:15px !important;line-height:24px !important;margin-top:18px !important}
.hs-tab{padding:16px 8px 20px 0}
}
/* ---------- Tìm kiếm ---------- */
.sbtn{width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.sbtn:hover{border-color:#3FB8B5;color:#3FB8B5;background:rgba(63,184,181,.08)}
.srch{position:fixed;inset:0;z-index:40;background:rgba(9,20,40,.97);overflow-y:auto;animation:srIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes srIn{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.srch-input{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#FFFFFF;font-family:Kanit,system-ui,sans-serif;font-weight:200;font-size:44px;line-height:60px;padding:12px 0 16px;outline:none;transition:border-color .3s}
.srch-input:focus{border-bottom-color:#3FB8B5}
.srch-input::placeholder{color:rgba(244,246,249,.35)}
.sr-item{display:flex;align-items:baseline;gap:24px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;color:inherit;cursor:pointer;transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s;animation:pgIn .4s ease both}
.sr-item:hover{padding-left:12px;background:rgba(255,255,255,.02)}
.sr-item:hover .sr-t{color:#FFFFFF}
.sr-type{flex:none;width:120px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#3FB8B5}
.sr-t{font-size:21px;line-height:28px;font-weight:300;color:#F4F6F9;transition:color .3s}
@media (max-width:640px){.srch-input{font-size:30px;line-height:42px}.sr-item{flex-direction:column;gap:6px}.sr-type{width:auto}}
/* ---------- Surface Studio ---------- */
.g-studio{display:grid;grid-template-columns:4fr 8fr;gap:40px;align-items:start}
.sd-panel{border:1px solid rgba(255,255,255,.14);background:rgba(7,18,37,.7);padding:32px}
.sd-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed rgba(255,255,255,.35);padding:28px 16px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.sd-drop:hover{border-color:#3FB8B5;background:rgba(63,184,181,.06)}
.sd-fx{display:flex;flex-wrap:wrap;gap:8px}
.sd-sw{width:44px;height:44px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .3s,border-color .3s}
.sd-sw:hover{transform:scale(1.08)}
.sd-stage{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:#071225;border:1px solid rgba(255,255,255,.14)}
.sd-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sd-after{position:absolute;inset:0;transition:clip-path .15s linear}
.sd-tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.62}
.sd-tex{position:absolute;inset:0;background-image:url(../assets/img/4456a1c3a5062d813eba30ca95fa0bbd.jpg);filter:grayscale(1) contrast(1.4);mix-blend-mode:soft-light;opacity:.55}
.sd-handle{position:absolute;top:0;bottom:0;width:2px;background:#FFFFFF;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.sd-handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.sd-tag{position:absolute;top:16px;padding:6px 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:rgba(13,29,55,.8);color:#FFFFFF}
.sd-scan{position:absolute;inset:0;background:rgba(13,29,55,.55);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.sd-scan::before{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#3FB8B5,transparent);animation:sdScan 1.4s ease-in-out infinite}
@keyframes sdScan{0%{top:0}50%{top:100%}100%{top:0}}
.sd-range{width:100%;accent-color:#3FB8B5;margin-top:18px;min-height:32px}
@media (max-width:1240px){.nav-links{display:none !important}.burger{display:flex}}
/* Tablet uses the compact hero navigation too: the six desktop labels otherwise
   collide with the primary CTAs once the header has switched to a hamburger. */
@media (max-width:1240px){
  .page[data-page="home"]>section:first-child>.wrap:first-of-type{height:100%}
  .page[data-page="home"] .hero-mid{padding:104px 0 84px}
  .page[data-page="home"] .hero-text{transform:translateY(-42px)}
  .page[data-page="home"] .g-6{display:none}
}
@media (max-width:1000px){.g-studio{grid-template-columns:1fr}.doc-row{grid-template-columns:48px 1fr;}.doc-row>*:nth-child(3){display:none}.doc-row>*:nth-child(4){grid-column:2}}
@media (max-width:1000px){
.g-steps,.g-contact{grid-template-columns:1fr;gap:40px}
.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:1fr}
.nav-links,.head-cta{display:none !important}
.burger{display:flex}
}
@media (max-width:820px){.hs-label{display:none}.g-6{gap:12px}.hs-ctrl{display:none !important}}
@media (max-width:640px){
.wrap{padding:0 20px}
.hero-text .eyebrow{font-size:11px !important;letter-spacing:.08em !important}
.ldr-tag{font-size:10px;letter-spacing:.18em !important}
.hero-text{width:100%;min-width:0}
.g-4,.g-2{grid-template-columns:1fr}
.big-h{font-size:44px !important;line-height:52px !important}
.sec-h{font-size:38px;line-height:46px}
.ph h1{font-size:48px;line-height:56px}
.stat-n{font-size:72px !important;line-height:80px !important}
.pj-card{width:300px;height:440px;margin-right:16px}.pj-info{left:22px;right:22px;bottom:22px}.pj-track{animation-duration:60s}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.loader{display:none !important}
}

/* ---------- Bổ sung cho bản HTML tĩnh ---------- */
/* Hero viewport layout: stable across desktop, tablet and dynamic mobile browser bars. */
.page[data-page="home"]>section:first-child{height:100vh;height:100svh;height:100dvh;min-height:0 !important;padding:0 !important}
.page[data-page="home"]>section:first-child>.wrap:first-of-type{height:calc(100% - 112px);min-height:0}
.page[data-page="home"] .hero-mid{min-height:0 !important;height:100%;justify-content:center !important;padding:110px 0 142px}
/* Reserve a dedicated lower band for the slide timeline. This prevents it
   from sharing vertical space with the two hero CTAs on short desktops. */
.page[data-page="home"] .hero-text{padding-bottom:0 !important;transform:translateY(clamp(-165px,-17vh,-100px))}
.page[data-page="home"] .hero-text .st>p:first-child{margin-top:0}
.page[data-page="home"] .hs-ctrl{bottom:28px !important}
.page[data-page="home"]>section:first-child>.wrap:last-child{position:absolute !important;z-index:2;left:0;right:0;bottom:0}
@media (max-width:820px){.page[data-page="home"]>section:first-child>.wrap:first-of-type{height:calc(100% - 76px)}.page[data-page="home"] .hero-mid{justify-content:flex-start !important;padding:clamp(104px,16svh,138px) 0 0}.page[data-page="home"] .hero-text{transform:translateY(clamp(-180px,-16svh,-90px))}.page[data-page="home"] .hero-text .big-h{font-size:clamp(38px,10vw,52px) !important;line-height:1.15 !important}.page[data-page="home"] .hero-text .st p:last-child{max-width:36rem;margin-top:18px !important}.page[data-page="home"] .g-6{display:none}}
@media (max-width:480px){.page[data-page="home"] .hero-mid{padding-top:max(96px,14svh)}.page[data-page="home"] .hero-text .st p:last-child{font-size:14px !important;line-height:1.6 !important}}
@media (max-width:820px){
  .page[data-page="home"] .hero-text>div:last-child{margin-top:24px !important;gap:8px !important;flex-wrap:nowrap !important}
  .page[data-page="home"] .hero-text>div:last-child .btn-solid,.page[data-page="home"] .hero-text>div:last-child .btn-line{min-height:44px;padding:11px 13px;font-size:12px;letter-spacing:.055em;white-space:nowrap}
}
@media (max-width:370px){.page[data-page="home"] .hero-text>div:last-child .btn-solid,.page[data-page="home"] .hero-text>div:last-child .btn-line{padding-inline:10px;font-size:11px}}
@media (max-height:700px) and (max-width:820px){
  .page[data-page="home"] .hero-mid{padding-top:88px}
  .page[data-page="home"] .hero-text .st p:last-child{display:none}
  .page[data-page="home"] .hero-text>div:last-child{margin-top:20px !important}
}

/* Cinematic scrolltelling tokens: motion is purposeful, scroll remains native. */
.story-progress{position:fixed;z-index:80;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.12);pointer-events:none}
.story-progress span{display:block;width:100%;height:100%;background:#3FB8B5;transform:scaleX(0);transform-origin:left;will-change:transform}
.loader{animation-duration:.55s;animation-delay:.65s}.ldr-inner{animation-delay:.5s}.ldr-logo{animation-delay:.04s,.34s}.ldr-shine{animation-delay:.34s}.ldr-bar::after{animation-duration:.55s;animation-delay:.06s}.ldr-tag{animation-delay:.28s}
.story-chapter{position:relative;overflow:clip}.story-chapter .story-visual{overflow:hidden}.story-chapter .story-visual img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.story-chapter .story-visual:hover img{transform:scale(1.035)}
@media (min-width:1001px){.story-chapter{min-height:112vh}.story-chapter .g-2{align-items:start !important}.story-chapter .story-visual{position:sticky;top:112px}.story-chapter .story-visual img{min-height:510px;object-fit:cover}.story-process.home-process{min-height:0;padding:112px 0 96px !important}}
.story-proof::before,.story-projects::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 82% 22%,rgba(63,184,181,.075),transparent 42%)}
.story-services .card{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease}.story-services .card:hover{transform:translateY(-8px);border-color:rgba(63,184,181,.65) !important;box-shadow:0 24px 48px rgba(0,0,0,.22)}
.story-process .g-3>div{transition:transform .45s cubic-bezier(.2,.7,.2,1)}.story-process .g-3>div:hover{transform:translateY(-6px)}
@supports (animation-timeline:view()){
  .story-chapter .story-visual{animation:storyImageReveal linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .story-chapter .story-visual+div .rv{animation-range:entry 8% cover 34%}
}
@keyframes storyImageReveal{from{clip-path:inset(10% 7%);opacity:.45;transform:scale(.96)}to{clip-path:inset(0);opacity:1;transform:scale(1)}}
.pj-marquee{overflow:hidden}.pj-track{width:max-content;padding-right:0;animation:pjMoveRight 80s linear infinite}.pj-card{scroll-snap-align:none}@keyframes pjMoveRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:1000px){.story-chapter{min-height:0}.story-chapter .story-visual{position:relative;top:auto}.story-progress{height:1px}.story-services .card:hover,.story-process .g-3>div:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.story-progress{display:none}.story-chapter .story-visual{animation:none !important}.story-services .card,.story-process .g-3>div{transition:none}.pj-track{animation:none !important}}

/* About chapter: fit one viewport and align the copy with the photo. */
@media (min-width:1001px){
  .story-about{
    box-sizing:border-box;
    height:100vh;
    height:100svh;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:20px 0 18px !important;
  }
  .story-about .g-2{
    position:relative;
    align-items:start !important;
  }
  .story-about .story-visual{
    position:relative !important;
    top:auto !important;
    margin-top:46px;
    height:min(520px,calc(100svh - 190px));
  }
  .story-about .story-visual img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    object-fit:cover;
  }
  .story-about .g-2>div:nth-child(2){padding-top:46px}
  .story-about .g-2>div:nth-child(2)>.eyebrow{
    position:absolute;
    top:0;
    left:0;
    margin:0;
  }
}
@media (max-width:1000px){
  .story-about .g-2>div:nth-child(2)>.eyebrow{position:static}
}

/* About metrics live with the company story, not as a separate chapter. */
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.about-stat{min-width:0;padding:0 16px;text-align:left}
.about-stat:first-child{padding-left:0}.about-stat+.about-stat{border-left:1px solid rgba(255,255,255,.18)}
.about-stat strong{display:block;color:#FFFFFF;font-size:clamp(34px,3.1vw,52px);font-weight:200;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.about-stat strong span{color:#FFFFFF}.about-stat strong small{font-size:.42em;font-weight:300;letter-spacing:0}
.about-stat i{display:block;width:32px;height:1px;margin:10px 0;background:#3FB8B5}
.about-stat p{margin:0;color:#D5DCE6;font-size:12px;line-height:1.45}
@media (min-width:1001px){
  .story-about .eyebrow{font-size:22px;line-height:1.2;font-weight:500;letter-spacing:.18em}
  .story-about .lead[style]{margin-top:18px !important}
  .story-about .lead + .rv[style]{margin-top:24px !important}
}
@media (max-width:1000px){.about-stats{margin-top:30px}.about-stat{padding:0 12px}.about-stat strong{font-size:34px}.about-stat p{font-size:11px}}
@media (max-width:640px){.about-stats{grid-template-columns:1fr;gap:0}.about-stat,.about-stat:first-child{padding:18px 0}.about-stat+.about-stat{border-left:0;border-top:1px solid rgba(255,255,255,.18)}}

[hidden]{display:none !important}
html{scroll-behavior:auto}
/* Reference-footer alignment: compact vertical rhythm and balanced columns. */
@media(min-width:1101px){.footer-main{grid-template-columns:minmax(330px,1.1fr) minmax(175px,.7fr) minmax(260px,1fr) minmax(310px,1.2fr);gap:clamp(24px,2vw,42px);align-items:start}.footer-main>*{align-self:start}}
.footer-nav #nav-footer{display:grid!important;grid-auto-rows:min-content;align-content:start;justify-items:start;gap:12px!important;height:auto!important}.footer-nav #nav-footer .nl{display:block;line-height:1.35;padding:0!important}.footer-directions{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:13px 19px;border:1px solid rgba(62,151,221,.42);border-radius:999px;color:#D5DCE6;text-decoration:none;font-size:14px;transition:color .25s ease,background .25s ease,border-color .25s ease}.footer-directions:first-letter{color:#3FB8B5;font-size:19px}.footer-directions b{font-size:23px;font-weight:300;color:#7FD3D0;line-height:.6}.footer-directions:hover{color:#FFFFFF;background:rgba(26,67,104,.5);border-color:#3FB8B5}.footer-social .soc{display:inline-flex}
.site-footer::before{z-index:0}.site-footer .wrap{z-index:1}
.hs-tab[aria-pressed="true"] .hs-label{color:#FFFFFF}
@media (min-width:821px) and (max-width:1240px){
  .page[data-page="home"]>section:first-child>.wrap:first-of-type{height:100%}
  .page[data-page="home"] .hero-mid{padding:104px 0 84px}
  .page[data-page="home"] .hero-text{transform:translateY(-42px)}
  .page[data-page="home"] .g-6{display:none}
}
/* Mobile experience pass: preserve hierarchy, increase touch targets and remove desktop-scale spacing. */
@media (max-width:640px){
  html,body{overflow-x:hidden}
  img{max-width:100%}
  .wrap{padding-inline:20px}
  .site-head .wrap{height:72px!important;gap:12px!important}
  .site-head img{height:28px!important}
  .site-head> .wrap>div{gap:10px!important}
  .sbtn{width:42px;height:42px}
  .burger{width:44px;height:44px}
  .mmenu{padding-inline:24px}.mm-link{font-size:28px;padding-block:12px}
  .head-cta{display:none!important}
  .page[data-page="home"] .hero-mid{padding:88px 0 58px!important}
  .page[data-page="home"] .hero-text{transform:translateY(-52px)!important}
  .page[data-page="home"] .hero-text .big-h{font-size:clamp(36px,10.2vw,46px)!important;line-height:1.13!important;letter-spacing:-.025em}
  .page[data-page="home"] .hero-text .st p:last-child{font-size:14px!important;line-height:1.6!important;margin-top:16px!important}
  .page[data-page="home"] .hero-text>div:last-child{margin-top:22px!important;width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}
  .page[data-page="home"] .hero-text>div:last-child a{justify-content:center;padding-inline:10px!important;letter-spacing:.03em!important}
  .ph{min-height:54svh;padding:132px 0 52px}.ph h1{font-size:42px;line-height:1.1}.crumb{margin-bottom:18px;font-size:11px;letter-spacing:.14em}
  .sec-h{font-size:34px;line-height:1.22}.lead{font-size:16px;line-height:1.7}.eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:16px}
  .page section[style*="padding: 150px"],.page section[style*="padding: 160px"],.page section[style*="padding: 140px"]{padding-top:72px!important;padding-bottom:72px!important}
  #cta{padding:72px 0!important}#cta .wrap{gap:28px!important}#cta .btn-solid,#cta .btn-line{justify-content:center;flex:1;padding-inline:14px;font-size:12px}
  .story-services .zoom[style]{height:260px!important}.story-services .card>div:last-child{padding:24px!important}.story-services .card h3{font-size:32px!important;line-height:1.1!important}
  .pj-marquee{padding:0 0 8px;-webkit-mask-image:none;mask-image:none}.pj-card{width:82vw!important;height:460px!important;margin-right:12px!important}.pj-info{left:18px!important;right:18px!important;bottom:18px!important}
  .g-steps .rv-clip[style]{min-height:400px!important}.g-steps{gap:28px!important}.step-btn{padding-block:16px;gap:14px}.step-btn .sb-name{font-size:16px!important}
  .g-contact{gap:28px!important}.g-contact .field input,.g-contact .field textarea{font-size:16px}
  .tabbar{margin-bottom:32px;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity}.tab{flex:none;scroll-snap-align:start;margin-right:18px;padding:13px 0 15px;font-size:15px}
  .doc-row{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:20px 0}.doc-ico{width:44px;height:44px}.doc-row h3{font-size:16px!important}.doc-row p{font-size:13px!important}
  .lock-box{padding:36px 20px}.sd-panel{padding:20px}.sd-stage{aspect-ratio:1/1}.sd-handle::after{width:44px;height:44px;margin:-22px 0 0 -22px}
  .site-footer{padding-top:48px}.footer-main{gap:34px!important;padding-bottom:34px}.footer-logo{width:175px}.footer-social{margin-top:24px}.footer-directions{margin-top:24px}.site-footer h2{margin-bottom:24px}.footer-contact>div{margin-top:16px}.footer-legal{font-size:12px}.footer-bottom{font-size:12px}
  .srch .wrap{padding-top:24px!important;padding-bottom:48px!important}.srch .wrap>div:nth-child(2){margin-top:42px!important}.srch-input{font-size:28px;line-height:1.35}
}
@media (max-width:370px){.page[data-page="home"] .hero-text>div:last-child{grid-template-columns:1fr!important}.page[data-page="home"] .hero-text>div:last-child a{width:100%}.site-head .sbtn{display:none}.footer-legal span{margin-right:8px;padding-right:8px}}
@media (max-width:640px){
  .page[data-page="home"] #hero-texts .st{opacity:0!important;pointer-events:none!important}
  .page[data-page="home"] #hero-texts .st[aria-hidden="false"]{opacity:1!important;pointer-events:auto!important}
  .page[data-page="home"] #hero-bgs .hs{opacity:0!important}
  .page[data-page="home"] #hero-bgs .hs.is-active{opacity:1!important}
}
/* Mobile bottom navigation: one shared navigation for every hash-routed public page. */
.mobile-bottom-nav{display:none}
@media (max-width:820px){
  :root{--mobile-nav-height:76px}
  #root{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .page[data-page="home"]>section:first-child{height:calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom))!important}
  .mobile-bottom-nav{position:fixed;z-index:70;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));height:var(--mobile-nav-height);padding:0 6px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;background:rgba(248,251,252,.97);border:1px solid rgba(13,29,55,.12);border-radius:18px;box-shadow:0 10px 32px rgba(3,14,31,.26);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .mbn-link,.mbn-call{min-width:0;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#627288;text-decoration:none;font-family:Kanit,system-ui,sans-serif;font-size:10px;font-weight:400;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .2s ease,transform .2s ease}
  .mbn-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mbn-link.on{color:#007C7B;font-weight:500}.mbn-link:active{transform:translateY(1px)}
  .mbn-call{position:relative;justify-content:flex-end;padding-bottom:9px;color:#0D1D37;font-weight:500}.mbn-call-icon{position:absolute;bottom:27px;width:54px;height:54px;border:4px solid #F8FBFC;border-radius:50%;display:grid;place-items:center;background:#007C7B;color:#FFFFFF;box-shadow:0 8px 18px rgba(0,111,110,.34);transition:transform .2s ease,background .2s ease}.mbn-call-icon svg{width:24px;height:24px;fill:currentColor;stroke:none}.mbn-call:active .mbn-call-icon{transform:scale(.94);background:#005D5C}
  .mbn-link:focus-visible,.mbn-call:focus-visible{outline:2px solid #007C7B;outline-offset:-3px;border-radius:12px}
}
@media (max-width:370px){.mobile-bottom-nav{left:6px;right:6px}.mbn-link,.mbn-call{font-size:9px}.mbn-call-icon{width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){.mbn-link,.mbn-call,.mbn-call-icon{transition:none}}