:root{--orange:#ff7800;--orange2:#ff9d34;--navy:#031a2a;--navy2:#06263d;--blue:#087dca;--cyan:#1db9ff;--ink:#10161d;--paper:#f5f8fb;--white:#fff;--muted:#68747d;--line:#dce5eb;--shadow:0 18px 55px rgba(4,24,38,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Be Vietnam Pro',Arial,sans-serif;background:#fff;color:var(--ink);overflow-x:hidden}.container{width:min(1320px,calc(100% - 56px));margin:auto}.page-loader{position:fixed;inset:0;z-index:9999;background:#03131f;display:grid;place-items:center;transition:.65s ease}.page-loader.hide{opacity:0;visibility:hidden}.loader-mark{display:flex;align-items:center;gap:15px;color:#fff;font:900 28px Montserrat}.loader-mark img{width:74px;height:74px;object-fit:contain;background:#fff;border-radius:14px;animation:loaderPulse 1.2s infinite alternate}@keyframes loaderPulse{to{transform:scale(1.06);filter:drop-shadow(0 0 25px rgba(255,120,0,.55))}}.site-header{position:absolute;z-index:50;left:0;right:0;top:0;color:#fff;transition:.35s}.site-header.scrolled{position:fixed;background:rgba(3,20,32,.9);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.18)}.nav-wrap{height:92px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:178px}.brand img{width:50px;height:50px;object-fit:contain;background:#fff;border-radius:8px}.brand span{font-size:10px;line-height:1.1}.brand b{display:block;font-size:13px}.brand small{font-size:7px;color:#d6e3ea}.main-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.main-nav a{position:relative;color:#fff;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.02em}.main-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:-12px;height:2px;background:var(--orange);transition:.3s}.main-nav a:hover:after,.main-nav a.active:after{left:0;right:0}.btn{border:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 22px;font:800 10px 'Be Vietnam Pro';text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:.3s}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(255,120,0,.22)}.btn-primary:hover{background:#ff8e1d;transform:translateY(-2px)}.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.15)}.btn-ghost:hover{border-color:var(--orange);background:rgba(255,120,0,.08)}.nav-cta{margin-left:10px}.menu-toggle{display:none;border:0;background:transparent;width:42px;height:42px;padding:8px}.menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0}.hero{height:min(900px,100vh);min-height:760px;position:relative;color:#fff;overflow:hidden;background:#061a29}.hero-bg,.hero-bg>*{position:absolute;inset:0}.hero-poster{background:url('../images/hero-stage.jpg') center/cover no-repeat;transform:scale(1.03);animation:heroZoom 14s ease-in-out infinite alternate}@keyframes heroZoom{to{transform:scale(1.09)}}.hero video{width:100%;height:100%;object-fit:cover;z-index:1}.hero-poster{z-index:0}.hero-overlay{z-index:2;background:linear-gradient(90deg,rgba(2,10,17,.96) 0%,rgba(3,18,29,.82) 31%,rgba(2,13,21,.35) 58%,rgba(2,12,18,.46) 100%),linear-gradient(0deg,rgba(0,0,0,.58),transparent 45%)}.hero-scan{z-index:3;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.05) 6px)}.hero-beam{z-index:3;pointer-events:none;width:420px;height:1200px;left:auto;right:8%;top:-470px;background:linear-gradient(90deg,transparent,rgba(29,185,255,.13),transparent);transform:rotate(24deg);filter:blur(5px);animation:beam 7s ease-in-out infinite alternate}.beam-b{right:33%;background:linear-gradient(90deg,transparent,rgba(255,120,0,.09),transparent);animation-delay:-3s}@keyframes beam{to{transform:rotate(18deg) translateX(110px)}}.hero-content{position:relative;z-index:6;padding-top:210px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em}.eyebrow.orange{color:var(--orange)}.hero h1{font-family:Montserrat,sans-serif;font-size:clamp(60px,6.2vw,104px);line-height:.88;letter-spacing:-.055em;margin:22px 0 25px;max-width:850px}.hero h1 span{color:var(--orange)}.hero p{font-size:15px;font-weight:600}.hero-actions{display:flex;gap:12px;margin-top:30px}.play{width:24px;height:24px;background:#fff;color:var(--orange);border-radius:50%;display:grid;place-items:center;font-size:8px}.hero-index{position:absolute;z-index:7;right:4.3%;top:43%;display:grid;gap:20px;font:800 12px Montserrat}.hero-index b{color:#fff}.hero-index b:after{content:"";display:inline-block;width:24px;height:2px;background:var(--orange);margin:0 0 3px 10px}.hero-index span{color:#9daab4}.scroll-cue{position:absolute;z-index:7;right:4.2%;bottom:44px;font-size:8px;letter-spacing:.12em;color:#c2ced4;display:flex;gap:8px;align-items:center}.mouse{width:18px;height:28px;border:1px solid #9caeb9;border-radius:10px;position:relative}.mouse:after{content:"";position:absolute;top:5px;left:7px;width:2px;height:5px;background:var(--orange);animation:scrollDot 1.4s infinite}@keyframes scrollDot{to{transform:translateY(8px);opacity:0}}.stats-wrap{position:relative;z-index:10;margin-top:-42px}.stats-card{background:#fff;border-radius:8px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0}.stat{display:grid;place-items:center;position:relative}.stat:not(:last-child):after{content:"";position:absolute;right:0;height:55px;border-right:1px solid var(--line)}.stat div{display:flex;align-items:flex-start}.stat strong,.stat em{font:900 32px Montserrat;font-style:normal}.stat em{color:var(--orange);font-size:22px;margin:2px 0 0 2px}.stat span{text-transform:uppercase;font-size:8px;margin-top:5px;color:#4c5963}.section-pad{padding:94px 0}.compact{padding:70px 0}.section-light{background:linear-gradient(180deg,#f7fafc,#fff)}.section-navy{background:#031b2a;color:#fff}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px}.section-heading h2,.team-clients h2,.process h2{font:800 clamp(26px,2.3vw,38px) Montserrat;margin:10px 0 0;letter-spacing:-.035em}.round-arrows{display:flex;gap:8px}.round-arrows button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--orange);font-size:17px}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.service-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 12px 40px rgba(5,30,47,.08);transition:.4s;transition-delay:var(--delay)}.service-card:hover{transform:translateY(-10px);box-shadow:0 22px 55px rgba(5,30,47,.16)}.service-thumb{height:175px;overflow:hidden;position:relative}.service-thumb img{width:100%;height:100%;object-fit:cover;transition:.55s}.service-thumb span{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,14,22,.18),transparent 60%)}.service-card:hover img{transform:scale(1.08)}.service-body{padding:20px 18px 22px;position:relative;min-height:145px}.service-body b{color:var(--orange);font-size:11px}.service-body h3{font:800 12px Montserrat;margin:10px 0 8px}.service-body p{font-size:9px;line-height:1.55;color:#596670;margin:0;max-width:90%}.service-body i{position:absolute;right:15px;top:17px;color:var(--orange);font-style:normal;opacity:0;transform:translate(-6px,6px);transition:.3s}.service-card:hover .service-body i{opacity:1;transform:none}.projects{background:radial-gradient(circle at 50% 15%,#063452 0,#031b2a 34%,#02141f 100%)}.inverse h2{color:#fff}.filters{display:flex;gap:7px;flex-wrap:wrap}.filters button{height:30px;border:1px solid rgba(255,255,255,.19);background:transparent;border-radius:20px;color:#fff;padding:0 15px;font-size:8px;font-weight:800}.filters .active{background:var(--orange);border-color:var(--orange)}.project-grid{display:grid;grid-template-columns:1fr 1.35fr .92fr;grid-template-rows:250px 250px;gap:16px}.project-card{position:relative;overflow:hidden;border-radius:7px;border:1px solid rgba(255,255,255,.12);min-height:0}.project-card.tall,.project-card.wide{grid-row:span 2}.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.1,1)}.project-card:hover img{transform:scale(1.065)}.project-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,7,11,.9),transparent 52%)}.project-info{position:absolute;left:0;right:0;bottom:0;padding:24px 22px}.project-info h3{font:800 18px/1.08 Montserrat;margin:0 0 8px}.project-info span{font-size:8px;color:#d7e0e5}.project-info i{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;font-style:normal;color:var(--orange);transition:.3s}.project-card:hover .project-info i{background:var(--orange);color:#fff;border-color:var(--orange)}.project-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:0;border-radius:50%;background:#fff;color:var(--orange);z-index:3;box-shadow:0 0 0 12px rgba(255,255,255,.1)}.showreel{position:relative;min-height:350px;color:#fff;overflow:hidden;background:#051722}.showreel-bg{position:absolute;inset:0;background:url('../images/showreel.jpg') center/cover no-repeat;animation:showreelPan 12s ease-in-out infinite alternate}@keyframes showreelPan{to{transform:scale(1.05) translateX(-1.5%)}}.showreel-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,13,20,.97) 0%,rgba(3,17,27,.82) 30%,rgba(3,17,27,.22) 65%,rgba(3,17,27,.72))}.showreel-inner{position:relative;z-index:2;min-height:350px;display:flex;align-items:center;justify-content:space-between}.showreel h2{font:900 46px/.9 Montserrat;margin:10px 0 18px}.link-play{border:0;background:none;color:#fff;font-weight:800;font-size:10px;padding:0;cursor:pointer}.link-play span{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--orange);border-radius:50%;margin-right:9px}.link-play b{color:var(--orange);margin-left:7px}.play-orbit{width:138px;height:138px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;position:relative;cursor:pointer;margin-right:10%}.play-orbit span{width:64px;height:64px;background:rgba(3,20,32,.82);border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;color:var(--orange);backdrop-filter:blur(6px)}.play-orbit i{position:absolute;inset:-13px;border-radius:50%;border:1px dashed rgba(255,120,0,.45);animation:spin 14s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.process{position:relative;overflow:hidden;background:linear-gradient(125deg,#041926,#061d2d 62%,#09263a);color:#fff}.process-light{position:absolute;right:-8%;bottom:-15%;width:600px;height:260px;background:linear-gradient(110deg,transparent 15%,rgba(29,185,255,.46) 45%,rgba(255,120,0,.55) 73%,transparent);filter:blur(20px);transform:rotate(-13deg)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:46px}.process-item{text-align:center;position:relative}.process-item:not(:last-child):after{content:"";position:absolute;top:44px;left:68%;width:65%;border-top:1px dashed rgba(255,120,0,.55)}.process-icon{width:86px;height:86px;border:1px solid rgba(255,120,0,.7);border-radius:50%;display:grid;place-items:center;margin:auto;font-size:26px;background:rgba(255,255,255,.02)}.process-item b{display:block;color:var(--orange);font-size:10px;margin-top:10px}.process-item h3{font-size:11px;margin:8px 0}.process-item p{font-size:9px;line-height:1.6;color:#aebfc9}.team-clients .split{display:grid;grid-template-columns:1.45fr .82fr;gap:50px}.team-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:25px}.person-card{height:245px;position:relative;overflow:hidden;border-radius:6px;background:#091824}.person-card img{width:100%;height:100%;object-fit:cover;transition:.55s}.person-card div{position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,8,12,.92),transparent 55%)}.person-card strong{position:absolute;left:12px;right:8px;bottom:12px;color:#fff;font:800 9px Montserrat}.person-card:hover img{transform:scale(1.06)}.clients-block{border-left:1px solid var(--line);padding-left:40px}.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 25px;margin-top:36px}.logos span{height:30px;display:grid;place-items:center;font:800 11px Montserrat;color:#6c747a;filter:grayscale(1);letter-spacing:.03em}.client-note{font-size:10px;color:#76838c;line-height:1.7;margin-top:34px}.cta{position:relative;overflow:hidden;color:#fff;min-height:330px;background:#075f97}.cta-bg{position:absolute;inset:0;background:url('../images/cta-wave.jpg') center/cover no-repeat;filter:saturate(1.1)}.cta-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,46,79,.92),rgba(4,70,112,.5) 45%,rgba(255,120,0,.12))}.cta-inner{position:relative;z-index:2;min-height:330px;display:flex;align-items:center;justify-content:space-between}.cta h2{font:800 36px/1.1 Montserrat;margin:12px 0 24px}.cta-logo{width:230px;height:230px;background:rgba(255,255,255,.9);border-radius:26px;display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.2)}.cta-logo img{width:86%;height:86%;object-fit:contain}.footer{background:#03131f;color:#c4d0d8;padding-top:52px}.footer-grid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:40px}.footer-brand{display:flex;align-items:center;gap:11px;color:#fff}.footer-brand img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:8px}.footer h4{font-size:10px;color:#fff;margin:0 0 15px}.footer a,.footer p{display:block;color:#90a3ae;text-decoration:none;font-size:9px;line-height:1.85;margin:0}.socials{display:flex;gap:7px;margin-top:15px}.socials a{width:30px;height:30px;border:1px solid #2e4656;border-radius:50%;display:grid;place-items:center}.copyright{border-top:1px solid #173143;margin-top:40px;padding:18px 0 25px;font-size:9px;display:flex;justify-content:space-between;align-items:center}.copyright a{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;text-decoration:none}.video-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,8,13,.94);display:none;place-items:center;padding:30px}.video-modal.open{display:grid}.modal-close{position:absolute;right:34px;top:20px;background:transparent;border:0;color:#fff;font-size:46px;cursor:pointer}.modal-box{width:min(1100px,94vw);aspect-ratio:16/9;background:#061824;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.5)}.modal-box video{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}.video-fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;background:url('../images/showreel.jpg') center/cover;color:#fff}.video-fallback:before{content:"";position:absolute;inset:0;background:rgba(2,13,21,.65)}.video-fallback span,.video-fallback small{position:relative}.video-fallback span{font:900 48px Montserrat}.video-fallback small{margin-top:10px}.cursor-glow{position:fixed;z-index:999;pointer-events:none;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(29,185,255,.07),transparent 65%);transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1)}.reveal.in{opacity:1;transform:none}@media(max-width:1100px){.main-nav{gap:18px}.nav-cta{display:none}.service-grid{grid-template-columns:repeat(3,1fr)}.service-card:nth-child(4),.service-card:nth-child(5){grid-column:span 1}.project-grid{grid-template-columns:1fr 1fr;grid-template-rows:320px 320px}.project-card.tall,.project-card.wide{grid-row:auto}.project-card:nth-child(3),.project-card:nth-child(4){height:320px}.team-clients .split{grid-template-columns:1fr}.clients-block{border-left:0;padding-left:0}.logos{grid-template-columns:repeat(4,1fr)}}@media(max-width:820px){.container{width:min(100% - 30px,1320px)}.nav-wrap{height:76px}.brand span{display:none}.main-nav{display:none;position:absolute;top:76px;left:15px;right:15px;padding:20px;background:rgba(3,19,31,.97);border:1px solid rgba(255,255,255,.08);border-radius:12px;flex-direction:column;align-items:flex-start}.main-nav.open{display:flex}.main-nav a{padding:7px 0}.menu-toggle{display:block;margin-left:auto}.hero{min-height:700px;height:85vh}.hero-content{padding-top:170px}.hero h1{font-size:clamp(48px,12vw,75px)}.hero-index{display:none}.scroll-cue{right:18px}.stats-card{grid-template-columns:repeat(2,1fr);gap:20px;padding:22px}.stat:nth-child(2):after{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.section-heading{display:block}.round-arrows,.filters{margin-top:18px}.project-grid{display:grid;grid-template-columns:1fr}.project-card,.project-card:nth-child(3),.project-card:nth-child(4){height:360px}.showreel-inner{min-height:300px}.play-orbit{display:none}.process-grid{grid-template-columns:1fr 1fr}.process-item:not(:last-child):after{display:none}.team-row{grid-template-columns:repeat(2,1fr)}.team-row .person-card:last-child{grid-column:span 2}.cta-logo{width:150px;height:150px}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.container{width:min(100% - 24px,1320px)}.hero{min-height:680px}.hero-content{padding-top:145px}.hero h1{font-size:46px}.hero p{font-size:11px}.hero-actions{flex-wrap:wrap}.stats-wrap{margin-top:-28px}.stats-card{gap:15px}.stat strong{font-size:24px}.section-pad{padding:65px 0}.service-grid{grid-template-columns:1fr}.service-thumb{height:210px}.project-card,.project-card:nth-child(3),.project-card:nth-child(4){height:330px}.process-grid{grid-template-columns:1fr}.team-row{grid-template-columns:1fr 1fr}.person-card{height:220px}.logos{grid-template-columns:repeat(2,1fr)}.cta-inner{padding:48px 0}.cta h2{font-size:28px}.cta-logo{display:none}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:span 2}.cursor-glow{display:none}}

/* ==============================
   V2.1 refinement – 2026-08-25
   ============================== */
/* Hero: use only the clean stage area from the concept image, avoiding embedded mockup copy. */
.hero-poster{left:31%;right:-2%;width:auto;background-position:62% center;background-size:cover;transform:scale(1.035);border-radius:0 0 0 34px;filter:saturate(1.08) contrast(1.02)}
.hero-overlay{background:linear-gradient(90deg,#02121e 0%,rgba(2,18,30,.98) 28%,rgba(3,23,38,.80) 45%,rgba(2,13,21,.28) 68%,rgba(2,12,18,.38) 100%),linear-gradient(0deg,rgba(0,0,0,.56),transparent 48%)}
.hero-content{max-width:760px}
.hero-content:after{content:"";position:absolute;width:470px;height:470px;left:-210px;top:145px;border-radius:50%;background:radial-gradient(circle,rgba(22,167,235,.12),transparent 67%);z-index:-1}

/* Service cards: tighter hierarchy and clean clipping. */
.service-card,.service-thumb,.service-body{isolation:isolate}
.service-thumb{background:#052238}
.service-thumb img{display:block}
.service-body{background:#fff;overflow:hidden}
.service-body h3,.service-body p{position:relative;z-index:2}

/* Project source images are crops of the visual concept and include typography.
   Zoom/reposition them so only photography is visible; website copy stays live HTML. */
.project-card img{transform:scale(1.23);object-position:center 50%}
.project-card.tall img{transform:scale(1.32);object-position:center 52%}
.project-card.wide img{transform:scale(1.18);object-position:center 48%}
.project-card:nth-child(3) img{transform:scale(1.27);object-position:center 55%}
.project-card:nth-child(4) img{transform:scale(1.25);object-position:center 52%}
.project-card:hover img{transform:scale(1.29)}
.project-card.tall:hover img{transform:scale(1.38)}
.project-card.wide:hover img{transform:scale(1.24)}
.project-card:nth-child(3):hover img{transform:scale(1.33)}
.project-card:nth-child(4):hover img{transform:scale(1.31)}
.project-shade{background:linear-gradient(0deg,rgba(1,7,11,.96) 0%,rgba(1,7,11,.62) 23%,transparent 58%)}
.project-info{z-index:4;padding:25px 22px 22px;background:linear-gradient(0deg,rgba(0,10,16,.70),transparent)}
.project-info h3{font-size:17px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.project-play{z-index:5}

/* Team source crops also contained section labels. Keep only portrait area. */
.person-card{background:#071925}
.person-card img{transform:scale(1.58);object-position:center 72%}
.person-card:nth-child(2) img{object-position:center 73%}
.person-card:nth-child(3) img{object-position:center 71%}
.person-card:nth-child(4) img{object-position:center 72%}
.person-card:nth-child(5) img{object-position:center 72%}
.person-card:hover img{transform:scale(1.66)}
.person-card div{z-index:2;background:linear-gradient(0deg,rgba(1,8,12,.96) 0%,rgba(1,8,12,.30) 43%,transparent 70%)}
.person-card strong{z-index:3;font-size:9.5px;letter-spacing:.01em;text-shadow:0 2px 9px rgba(0,0,0,.6)}

/* Trusted by: make it visually intentional rather than loose text. */
.logos{gap:14px 14px;margin-top:28px}
.logos span{height:56px;border:1px solid #e4ebef;border-radius:8px;background:#fff;box-shadow:0 8px 22px rgba(7,31,46,.05);font-size:10px;transition:.3s}
.logos span:hover{border-color:#ffc18e;color:#1d2930;transform:translateY(-3px)}
.client-note{margin-top:22px;padding-left:14px;border-left:2px solid var(--orange)}

/* CTA: more premium and more clearly branded. */
.cta{min-height:350px}
.cta-bg{filter:saturate(1.18) contrast(1.03)}
.cta-bg:after{background:linear-gradient(90deg,rgba(1,40,70,.96) 0%,rgba(4,75,120,.72) 44%,rgba(255,120,0,.18) 100%)}
.cta-inner{min-height:350px}
.cta-logo{width:205px;height:205px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.8);box-shadow:0 25px 70px rgba(0,18,31,.28),0 0 0 12px rgba(255,255,255,.08)}
.cta-logo img{width:82%;height:82%}

/* Better rhythm between light/dark sections. */
.services{position:relative;z-index:2}
.projects{position:relative;z-index:1}
.team-clients{border-top:1px solid #eef3f6}

@media(max-width:820px){
  .hero-poster{left:18%;right:-18%;background-position:58% center}
  .project-card img,.project-card.tall img,.project-card.wide img,.project-card:nth-child(3) img,.project-card:nth-child(4) img{transform:scale(1.22);object-position:center 52%}
  .project-card:hover img,.project-card.tall:hover img,.project-card.wide:hover img,.project-card:nth-child(3):hover img,.project-card:nth-child(4):hover img{transform:scale(1.27)}
  .person-card img{transform:scale(1.48);object-position:center 72%}
  .person-card:hover img{transform:scale(1.54)}
}
@media(max-width:520px){
  .hero-poster{left:0;right:-42%;opacity:.78;background-position:64% center}
  .hero-overlay{background:linear-gradient(90deg,rgba(2,15,25,.98),rgba(2,18,30,.86) 56%,rgba(2,13,21,.48)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%)}
}


/* ==============================
   V2.2 final static lock – 2026-08-25
   Clean source assets + CTA signature graphic
   ============================== */
/* Service thumbnails are now clean image-only crops. Prevent any source-edge leakage. */
.service-thumb{height:175px;clip-path:inset(0 round 0);background:#071e31}
.service-thumb img{object-fit:cover;object-position:center 52%;transform:none!important}
.service-card:hover .service-thumb img{transform:scale(1.055)!important}
.service-grid{position:relative;z-index:2}
.services .section-heading{position:relative;z-index:3;background:transparent}

/* Team source images are physically cleaned in V2.2, so render them naturally. */
.person-card img,.person-card:nth-child(2) img,.person-card:nth-child(3) img,.person-card:nth-child(4) img,.person-card:nth-child(5) img{
  transform:none;object-position:center center;
}
.person-card:hover img{transform:scale(1.055)}
.person-card{border:1px solid #dce7ed;box-shadow:0 12px 28px rgba(4,27,42,.08)}

/* Trusted-by wordmarks: cleaner premium grid with small brand monograms. */
.logos span{position:relative;grid-template-columns:34px 1fr;justify-content:start;padding:0 14px;gap:9px;color:#5d6870;font-size:9px;letter-spacing:.04em;filter:none}
.logos span:before{content:attr(data-mark);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #dfe7ec;background:linear-gradient(145deg,#fff,#f4f7f9);font:800 8px Montserrat;color:#89949b}
.logos span:hover:before{border-color:#ffbd86;color:var(--orange)}

/* CTA signature: pure water/light field, no embedded copy or logo. */
.cta{background:#064d7a;isolation:isolate}
.cta-bg{filter:saturate(1.12) contrast(1.06);background-position:center 56%;transform:scale(1.035)}
.cta-bg:before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(circle at 78% 50%,rgba(255,135,26,.76) 0 4%,rgba(255,120,0,.22) 17%,transparent 36%),
  radial-gradient(circle at 58% 30%,rgba(79,201,255,.22),transparent 31%),
  linear-gradient(112deg,transparent 45%,rgba(255,255,255,.17) 50%,transparent 54%);
  mix-blend-mode:screen;animation:ctaEnergy 8s ease-in-out infinite alternate;z-index:1}
.cta-bg:after{z-index:2;background:linear-gradient(90deg,rgba(1,37,65,.97) 0%,rgba(2,72,115,.80) 38%,rgba(4,95,146,.34) 63%,rgba(255,120,0,.12) 100%)}
@keyframes ctaEnergy{to{transform:translate3d(3%,1%,0) scale(1.05);filter:blur(1px)}}
.cta-inner{z-index:3}
.cta-logo{width:168px;height:168px;border-radius:30px;background:rgba(255,255,255,.92);box-shadow:0 28px 70px rgba(0,17,31,.32),0 0 0 1px rgba(255,255,255,.75),0 0 0 10px rgba(255,255,255,.06);transform:rotate(-2deg)}
.cta-logo:before{content:"";position:absolute;width:210px;height:210px;border:1px solid rgba(255,149,56,.25);border-radius:50%;animation:ctaOrbit 12s linear infinite}
.cta-logo{position:relative}
@keyframes ctaOrbit{to{transform:rotate(360deg)}}
.cta-logo img{width:76%;height:76%;filter:drop-shadow(0 9px 18px rgba(72,32,0,.08))}

@media(max-width:820px){
  .person-card img,.person-card:nth-child(2) img,.person-card:nth-child(3) img,.person-card:nth-child(4) img,.person-card:nth-child(5) img{transform:none;object-position:center center}
  .person-card:hover img{transform:scale(1.04)}
  .cta-logo{width:138px;height:138px}
  .cta-logo:before{width:170px;height:170px}
}

/* ==============================
   V2.3 Motion & Interactive – 2026-08-25
   Keeps V2.2 layout locked; adds premium motion only.
   ============================== */
html{scroll-padding-top:86px}
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:10050;pointer-events:none;background:rgba(255,255,255,.03)}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--orange));box-shadow:0 0 16px rgba(255,120,0,.45)}
.site-header{transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease,transform .35s ease}
.site-header.scrolled{backdrop-filter:blur(16px) saturate(1.15)}
.hero{overflow:hidden;isolation:isolate}
.hero-bg{will-change:transform}
.hero-poster{will-change:transform,filter;transition:filter .45s ease}
.hero-scan{animation:heroScan 8s linear infinite;opacity:.24}
@keyframes heroScan{0%{transform:translateY(-115%)}100%{transform:translateY(115%)}}
.hero-beam{animation:beamFloat 6.5s ease-in-out infinite alternate;transform-origin:top center;mix-blend-mode:screen}
.beam-b{animation-delay:-2.7s}
@keyframes beamFloat{from{transform:translate3d(-2%,0,0) rotate(-2deg);opacity:.25}to{transform:translate3d(3%,2%,0) rotate(2deg);opacity:.6}}
.hero-content.hero-motion{opacity:1!important;transform:none!important}
.hero-kicker,.hero-sub,.hero-actions{opacity:0;transform:translateY(20px)}
.hero-title{display:flex;flex-direction:column;gap:0}
.hero-line{display:block;overflow:hidden;line-height:.92;padding:.03em 0}
.hero-line i{display:block;font-style:normal;transform:translateY(112%);opacity:0;will-change:transform,opacity}
.hero-line.orange-line i{color:var(--orange)}
.hero.hero-ready .hero-line i{animation:titleRise .95s cubic-bezier(.16,1,.3,1) forwards}
.hero.hero-ready .hero-line:nth-child(2) i{animation-delay:.10s}.hero.hero-ready .hero-line:nth-child(3) i{animation-delay:.20s}
.hero.hero-ready .hero-kicker{animation:softRise .7s .18s ease forwards}.hero.hero-ready .hero-sub{animation:softRise .7s .36s ease forwards}.hero.hero-ready .hero-actions{animation:softRise .7s .50s ease forwards}
@keyframes titleRise{to{transform:translateY(0);opacity:1}}@keyframes softRise{to{opacity:1;transform:translateY(0)}}
.hero-actions .btn,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.hero-actions .btn:before,.nav-cta:before{content:"";position:absolute;inset:-120% auto -120% -35%;width:35%;transform:rotate(17deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:transform .7s ease;z-index:-1}
.hero-actions .btn:hover:before,.nav-cta:hover:before{transform:translateX(520%) rotate(17deg)}
.reveal{transition:opacity .75s ease,transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:var(--delay,0ms)}
.service-card,.project-card,.person-card,.logos span{will-change:transform}
.service-card{transform-style:preserve-3d;transition:transform .28s ease,box-shadow .35s ease,border-color .35s ease}
.service-card:hover{box-shadow:0 24px 60px rgba(5,37,57,.16);border-color:rgba(255,120,0,.27)}
.service-card:after,.project-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 42%);opacity:0;transition:opacity .3s ease;z-index:5}
.service-card:hover:after,.project-card:hover:after{opacity:1}
.project-card{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.project-card.is-filtered{opacity:0;transform:scale(.96);filter:blur(3px);pointer-events:none}
.project-card.is-hidden{display:none}
.project-info i{transition:transform .3s ease,background .3s ease}.project-card:hover .project-info i{transform:translateX(4px);background:var(--orange)}
.showreel{overflow:hidden}.showreel-bg{will-change:transform;transform:scale(1.06)}
.showreel:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 15%,rgba(0,177,255,.08) 45%,transparent 65%);transform:translateX(-110%);animation:showSweep 7.5s ease-in-out infinite}
@keyframes showSweep{0%,20%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
.play-orbit{cursor:pointer;transition:transform .35s ease}.play-orbit:hover{transform:scale(1.08)}.play-orbit i{animation:orbitPulse 2.4s ease-out infinite}
@keyframes orbitPulse{0%{transform:scale(.75);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.process-grid{position:relative;isolation:isolate}.process-progress{position:absolute;top:45px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,var(--orange),var(--cyan));transform:scaleX(var(--process,0));transform-origin:left;transition:transform .15s linear;z-index:0;box-shadow:0 0 16px rgba(24,180,255,.25)}
.process-item{position:relative;z-index:1}.process-icon{transition:transform .45s cubic-bezier(.2,.9,.2,1),box-shadow .45s ease,background .45s ease}.process-item.in .process-icon{animation:processPop .7s cubic-bezier(.16,1,.3,1) both}@keyframes processPop{0%{transform:scale(.7);opacity:.2}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.process-item:hover .process-icon{transform:translateY(-5px) rotate(8deg);box-shadow:0 0 0 8px rgba(255,120,0,.08),0 0 35px rgba(255,120,0,.18)}
.person-card{transition:transform .35s ease,box-shadow .35s ease}.person-card:hover{transform:translateY(-7px);box-shadow:0 24px 46px rgba(4,27,42,.14)}
.person-card strong{transition:letter-spacing .3s ease,color .3s ease}.person-card:hover strong{color:#ff9b45;letter-spacing:.035em}
.logos span:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--orange));transform:scaleX(0);transition:transform .35s ease}.logos span:hover:after{transform:scaleX(1)}
.cta{overflow:hidden}.cta-bg{will-change:transform}.cta-logo{will-change:transform;transition:transform .35s ease}.cta:hover .cta-logo{transform:translateY(-6px) rotate(1.5deg)}
.cursor-glow{transition:opacity .2s ease;mix-blend-mode:screen}
.magnetic{transition:transform .18s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.hero-scan,.hero-beam,.cta-bg:before,.cta-logo:before,.showreel:after,.play-orbit i{animation:none!important}.hero-line i,.hero-kicker,.hero-sub,.hero-actions{animation:none!important;transform:none!important;opacity:1!important}.reveal{transition:none!important}.service-card,.project-card,.person-card,.magnetic{transform:none!important;transition:none!important}
}
@media(max-width:820px){.process-progress{display:none}.service-card:after,.project-card:after{display:none}.hero-scan{opacity:.12}}


/* ==============================
   V2.4 Visual Impact + Typography – 2026-08-25
   Stronger visual hierarchy, section-specific type scale, cinematic entry effects.
   ============================== */
:root{--display-xl:clamp(64px,6.5vw,112px);--display-lg:clamp(38px,3.4vw,56px);--display-md:clamp(30px,2.55vw,42px);--display-sm:clamp(25px,2vw,34px)}

/* A clearer hierarchy: each section now has its own visual weight instead of one shared h2 size. */
.hero h1{font-size:var(--display-xl);max-width:900px;line-height:.86;letter-spacing:-.06em}
.services .section-heading h2{font-size:clamp(32px,2.8vw,46px);line-height:.98;max-width:760px}
.projects .section-heading h2{font-size:clamp(34px,3vw,50px);line-height:.96;max-width:820px}
.showreel h2{font-size:clamp(48px,4.2vw,70px);line-height:.84;letter-spacing:-.055em}
.process h2{font-size:clamp(32px,2.75vw,46px);line-height:1}
.team-block h2{font-size:clamp(30px,2.5vw,42px);line-height:.96;max-width:520px}
.clients-block h2{font-size:clamp(28px,2.35vw,40px);line-height:1}
.cta h2{font-size:clamp(38px,3.6vw,60px);line-height:.94;letter-spacing:-.045em}
.eyebrow{font-size:11px;letter-spacing:.12em}
.section-heading{margin-bottom:42px}
.section-heading h2,.team-clients h2,.process h2{font-weight:900}

/* Service content is now easier to scan at desktop size. */
.service-body{padding:22px 20px 25px;min-height:156px}
.service-body b{font-size:12px}
.service-body h3{font-size:14px;line-height:1.2;margin:10px 0 9px}
.service-body p{font-size:10.5px;line-height:1.6;max-width:95%}
.service-thumb{height:190px}

/* Projects: stronger editorial typography and deeper cinema treatment. */
.project-info{padding:28px 25px}
.project-info h3{font-size:clamp(18px,1.5vw,24px);line-height:1.03;max-width:85%}
.project-info span{font-size:9px;letter-spacing:.08em}
.project-shade{background:linear-gradient(0deg,rgba(1,7,11,.96) 0%,rgba(2,11,18,.56) 37%,transparent 70%)}
.project-card:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border:1px solid transparent;background:linear-gradient(120deg,rgba(29,185,255,.0),rgba(29,185,255,.22),rgba(255,120,0,.28),transparent) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .35s ease}
.project-card:hover:before{opacity:1}

/* More cinematic section transitions without changing layout. */
.section-light,.section-navy,.showreel,.cta{position:relative;isolation:isolate}
.services:before,.projects:before,.process:before,.team-clients:before{content:"";position:absolute;pointer-events:none;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.12;transform:scale(.8);transition:opacity .8s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.services:before{right:-140px;top:10%;background:var(--cyan)}
.projects:before{left:-160px;top:17%;background:var(--orange)}
.process:before{right:-170px;top:15%;background:var(--cyan)}
.team-clients:before{left:-170px;bottom:0;background:var(--orange)}
.services.section-live:before,.projects.section-live:before,.process.section-live:before,.team-clients.section-live:before{opacity:.24;transform:scale(1.1)}

/* Heading accent animates in as a graphic device rather than adding more copy. */
.section-heading h2,.process h2,.team-block h2,.clients-block h2{position:relative;width:max-content;max-width:100%}
.section-heading h2:after,.process h2:after,.team-block h2:after,.clients-block h2:after{content:"";display:block;width:74px;height:3px;margin-top:15px;background:linear-gradient(90deg,var(--orange),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.section-live .section-heading h2:after,.section-live.process h2:after,.section-live .team-block h2:after,.section-live .clients-block h2:after{transform:scaleX(1)}

/* Cards enter with mask-like motion, giving stronger first impression than hover alone. */
.service-card,.project-card,.person-card{opacity:.001;transform:translateY(34px) scale(.985);filter:saturate(.72)}
.service-card.in,.project-card.in,.person-card.in{opacity:1;transform:none;filter:saturate(1);transition:opacity .75s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .9s ease,box-shadow .35s ease}
.service-card:nth-child(2).in,.person-card:nth-child(2).in{transition-delay:.07s}
.service-card:nth-child(3).in,.person-card:nth-child(3).in{transition-delay:.14s}
.service-card:nth-child(4).in,.person-card:nth-child(4).in{transition-delay:.21s}
.service-card:nth-child(5).in,.person-card:nth-child(5).in{transition-delay:.28s}
.project-card:nth-child(2).in{transition-delay:.08s}.project-card:nth-child(3).in{transition-delay:.16s}.project-card:nth-child(4).in{transition-delay:.23s}

/* Intensify premium hover: subtle image displacement + color energy, not just scale. */
.service-card:hover{transform:translateY(-12px) scale(1.012)!important}
.service-card:hover .service-thumb img{transform:scale(1.09) translateY(-2px)!important;filter:saturate(1.16) contrast(1.04)}
.project-card:hover{transform:translateY(-5px) scale(1.006)}
.project-card:hover img{transform:scale(1.09);filter:saturate(1.16) contrast(1.07)}
.person-card:hover{transform:translateY(-9px) scale(1.018)}

/* Showreel is now a true visual break. */
.showreel{min-height:430px}
.showreel-inner{min-height:430px}
.showreel-vignette{background:linear-gradient(90deg,rgba(1,10,17,.98) 0%,rgba(2,16,27,.9) 32%,rgba(2,15,25,.18) 70%,rgba(2,13,22,.68))}
.play-orbit{width:122px;height:122px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 55px rgba(0,172,255,.14)}
.play-orbit:before{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px dashed rgba(255,120,0,.5);animation:orbitSpin 10s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.showreel.section-live .showreel-bg{filter:saturate(1.13) contrast(1.05)}

/* Process: larger icons and legible labels. */
.process-grid{margin-top:44px}
.process-icon{width:76px;height:76px;font-size:22px}
.process-item b{font-size:12px}
.process-item h3{font-size:12px;line-height:1.3;margin:10px 0 7px}
.process-item p{font-size:10px;line-height:1.55}

/* Team / client balance. */
.person-card strong{font-size:10px;padding:0 10px 12px}
.clients-block .client-note{font-size:10px;line-height:1.65}
.logos span{min-height:64px;font-size:10px}

/* CTA becomes the strongest closing scene. */
.cta{min-height:390px}
.cta-inner{min-height:390px}
.cta-logo{width:182px;height:182px}
.cta.section-live .cta-bg:before{opacity:1;filter:saturate(1.18)}
.cta .btn-primary{height:54px;padding-inline:26px;font-size:11px}

/* Mouse spotlight is more visible over dark areas and quieter over white sections. */
.cursor-glow{width:320px;height:320px;background:radial-gradient(circle,rgba(18,176,255,.12),rgba(255,120,0,.06) 34%,transparent 68%);filter:blur(8px)}
body:has(.section-light:hover) .cursor-glow{opacity:.32!important}

@media(max-width:1100px){
  .hero h1{font-size:clamp(58px,7vw,86px)}
  .service-body h3{font-size:13px}.service-body p{font-size:10px}
  .showreel h2{font-size:clamp(44px,5vw,60px)}
}
@media(max-width:820px){
  .hero h1{font-size:clamp(46px,13vw,72px);line-height:.9}
  .services .section-heading h2,.projects .section-heading h2,.process h2,.team-block h2,.clients-block h2{font-size:clamp(27px,8vw,36px)}
  .showreel h2{font-size:clamp(42px,11vw,58px)}
  .cta h2{font-size:clamp(34px,9.5vw,48px)}
  .service-thumb{height:180px}.service-body h3{font-size:14px}.service-body p{font-size:11px}
  .showreel,.showreel-inner{min-height:390px}.play-orbit{width:96px;height:96px}
  .section-heading h2:after,.process h2:after,.team-block h2:after,.clients-block h2:after{margin-top:12px;width:58px}
}
@media (prefers-reduced-motion:reduce){
  .service-card,.project-card,.person-card{opacity:1;transform:none;filter:none}
  .play-orbit:before{animation:none}
}


/* ==============================
   V2.4.1 Typography Balance – 2026-08-25
   Rebalances display headings and supporting copy without changing layout/motion.
   ============================== */

/* Global readability: keep the visual feel premium but stop supporting copy from feeling miniature. */
body{font-size:16px}
.main-nav a{font-size:13px;letter-spacing:.015em}
.btn{font-size:12px;height:50px}
.brand b{font-size:14px}.brand span{font-size:11px}.brand small{font-size:8px}

/* Hero remains the lead scene, but no longer overwhelms the page. */
.hero h1{font-size:clamp(58px,5.25vw,86px);line-height:.91;letter-spacing:-.052em;max-width:820px}
.hero p{font-size:17px;line-height:1.55;max-width:660px}
.hero .eyebrow{font-size:12px}

/* Section titles: editorial scale rather than poster scale. */
.services .section-heading h2{font-size:clamp(30px,2.25vw,38px);line-height:1.08;max-width:720px}
.projects .section-heading h2{font-size:clamp(31px,2.35vw,40px);line-height:1.06;max-width:760px}
.process h2{font-size:clamp(30px,2.25vw,38px);line-height:1.08}
.team-block h2{font-size:clamp(29px,2.15vw,37px);line-height:1.07;max-width:500px}
.clients-block h2{font-size:clamp(27px,2vw,34px);line-height:1.1}
.showreel h2{font-size:clamp(40px,3.25vw,52px);line-height:.94;letter-spacing:-.045em}
.cta h2{font-size:clamp(34px,2.8vw,44px);line-height:1;letter-spacing:-.035em}
.eyebrow{font-size:12px;letter-spacing:.1em}
.section-heading{margin-bottom:34px}

/* Statistics are now easier to read at normal browser zoom. */
.stat strong{font-size:36px}.stat em{font-size:24px}.stat span{font-size:11px;letter-spacing:.025em}

/* Services: description is intentionally brought much closer to title size. */
.service-body{padding:22px 20px 24px;min-height:166px}
.service-body b{font-size:13px}
.service-body h3{font-size:18px;line-height:1.25;margin:10px 0 10px}
.service-body p{font-size:15px;line-height:1.58;max-width:100%;color:#52616c}
.service-body i{font-size:18px}

/* Projects: metadata remains secondary, but it should not disappear visually. */
.project-info h3{font-size:clamp(20px,1.45vw,24px);line-height:1.12;max-width:88%}
.project-info span{font-size:12px;line-height:1.45;letter-spacing:.045em}
.filters button{font-size:11px;height:34px;padding:0 17px}

/* Showreel supporting copy and action. */
.showreel .eyebrow{font-size:12px}
.link-play{font-size:13px}
.link-play span{width:38px;height:38px}

/* Process: restore comfortable reading size without inflating the section headline. */
.process-grid{margin-top:38px}
.process-item b{font-size:13px}
.process-item h3{font-size:17px;line-height:1.35;margin:12px 0 8px}
.process-item p{font-size:14px;line-height:1.6;color:#61707a}

/* Team & clients. */
.person-card strong{font-size:14px;line-height:1.35;padding:0 12px 14px}
.clients-block .client-note{font-size:14px;line-height:1.65}
.logos span{min-height:68px;font-size:13px;line-height:1.3}

/* CTA and footer need to remain readable after the visual climax. */
.cta .btn-primary{font-size:12px}
.cta p{font-size:16px;line-height:1.55}
.site-footer{font-size:14px}
.site-footer p,.site-footer a,.site-footer li{font-size:14px;line-height:1.65}

/* Desktop spacing: slightly tighter around headings so image/video keeps priority. */
.section-pad{padding:86px 0}.compact{padding:66px 0}
.section-heading h2:after,.process h2:after,.team-block h2:after,.clients-block h2:after{margin-top:12px;height:2px;width:64px}

@media(max-width:1100px){
  .hero h1{font-size:clamp(54px,6.3vw,76px)}
  .service-body h3{font-size:17px}.service-body p{font-size:14px}
  .showreel h2{font-size:clamp(38px,4.4vw,48px)}
}
@media(max-width:820px){
  .main-nav a{font-size:14px}
  .hero h1{font-size:clamp(44px,11vw,62px);line-height:.94}
  .hero p{font-size:15px}
  .services .section-heading h2,.projects .section-heading h2,.process h2,.team-block h2,.clients-block h2{font-size:clamp(27px,7vw,34px);line-height:1.08}
  .showreel h2{font-size:clamp(36px,9vw,46px)}
  .cta h2{font-size:clamp(32px,8vw,40px)}
  .service-body h3{font-size:18px}.service-body p{font-size:15px}
  .process-item h3{font-size:16px}.process-item p{font-size:14px}
  .person-card strong{font-size:14px}
  .section-pad{padding:72px 0}.compact{padding:58px 0}
}

/* V2.4.2 — Footer typography balance only. Layout/colors remain unchanged. */
.footer{font-size:15px}
.footer .footer-brand b{font-size:16px;line-height:1.35}
.footer h4{font-size:16px;line-height:1.35;font-weight:800;letter-spacing:.01em;margin-bottom:17px}
.footer a,.footer p{font-size:15px;line-height:1.75}
.footer .socials a{font-size:14px;line-height:1;width:32px;height:32px}
.footer .copyright{font-size:14px;line-height:1.55}
.footer .copyright a{font-size:15px;line-height:1}
@media(max-width:820px){
  .footer h4{font-size:16px}
  .footer a,.footer p{font-size:15px;line-height:1.7}
  .footer .copyright{font-size:13px}
}
/* V2.7 dynamic client logos */
.logos a.client-logo-link{display:contents;text-decoration:none}.logos .client-logo-img{max-width:88%;max-height:48px;object-fit:contain;display:block;margin:auto}.logos span:has(.client-logo-img){font-size:0}
/* V2.9 online showreel embed */
.showreel-embed{width:100%;aspect-ratio:16/9;border:0;background:#000;display:block}

/* =========================================================
   V2.9.2 — Homepage Production Polish
   Visual polish only: no layout/database/admin changes.
   ========================================================= */
/* Hero: restore the approved white/orange hierarchy. */
.hero-title .hero-line,.hero-title .hero-line i{color:#fff}
.hero-title .hero-line.orange-line,.hero-title .hero-line.orange-line i{color:var(--orange)}
.hero-title .hero-line i{font-style:normal}
.hero-overlay{background:linear-gradient(90deg,rgba(2,10,17,.94) 0%,rgba(3,18,29,.80) 31%,rgba(2,13,21,.31) 60%,rgba(2,12,18,.43) 100%),linear-gradient(0deg,rgba(0,0,0,.52),transparent 46%)}

/* Real assets: stable crops without aggressive zoom. */
.service-thumb img,.project-card img,.person-card img{object-fit:cover;object-position:center}
.person-card img{transform:scale(1.02);object-position:center center}
.person-card:hover img{transform:scale(1.075)}
.person-card div{background:linear-gradient(0deg,rgba(1,8,12,.94) 0%,rgba(1,8,12,.42) 38%,rgba(1,8,12,.04) 72%)}

/* Process supporting copy: production-level contrast on navy. */
.process-item p{color:#b9c8d1;font-weight:500}

/* Showreel poster is supplied inline from Admin; improve rendering. */
.showreel-bg{background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}

/* Trusted By: real uploaded logos take visual priority; fallback mark remains available. */
.logos span:has(.client-logo-img){display:flex;align-items:center;justify-content:center;padding:10px 18px;filter:none}
.logos span:has(.client-logo-img):before{display:none}
.logos .client-logo-img{width:auto;max-width:88%;height:auto;max-height:46px;object-fit:contain;filter:grayscale(1);opacity:.82;transition:.3s ease}
.logos span:hover .client-logo-img{filter:grayscale(0);opacity:1;transform:scale(1.035)}

@media(max-width:820px){
  .person-card img{transform:scale(1.01)}
  .person-card:hover img{transform:scale(1.045)}
  .process-item p{color:#c2d0d8}
}

/* =========================================================
   V3.0 — About / Giới thiệu
   ========================================================= */
.about-page{overflow:hidden}.about-hero{min-height:88vh;position:relative;display:flex;align-items:flex-end;background:#061826}.about-hero-media{position:absolute;inset:0;overflow:hidden;z-index:0}.about-hero-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:scale(1.001)}.about-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,11,18,.93),rgba(3,17,28,.6) 50%,rgba(2,10,16,.18)),linear-gradient(0deg,rgba(1,8,13,.82),transparent 55%)}.about-hero-content{position:relative;z-index:2;padding-top:190px;padding-bottom:105px}.about-hero h1{font-family:Montserrat,sans-serif;color:#fff;font-size:clamp(58px,7.2vw,112px);line-height:.88;letter-spacing:-.065em;max-width:1050px;margin:18px 0 28px}.about-hero p{max-width:660px;color:#d7e1e7;font-size:17px;line-height:1.7}.about-scroll{display:inline-flex;gap:18px;align-items:center;color:#fff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.14em;margin-top:38px}.about-scroll b{color:var(--orange);font-size:20px}.about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center}.about-copy h2,.about-value-head h2,.about-journey h2{font-family:Montserrat,sans-serif;font-size:clamp(38px,4vw,62px);line-height:.98;letter-spacing:-.045em;margin:15px 0 25px}.about-copy>p{font-size:16px;line-height:1.85;color:#52616c}.about-sign{font-family:Montserrat,sans-serif;font-weight:900;font-size:13px;margin-top:30px;letter-spacing:.08em}.about-sign span{display:block;color:var(--orange);font-size:10px;margin-top:5px}.about-image{height:620px;position:relative;margin:0;overflow:hidden}.about-image img{width:100%;height:100%;object-fit:cover;transition:.8s ease}.about-image:hover img{transform:scale(1.035)}.about-image i{position:absolute;bottom:0;left:0;background:var(--orange);color:#fff;padding:13px 18px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em}.about-numbers{padding:42px 0}.about-number-grid{display:grid;grid-template-columns:repeat(4,1fr)}.about-number{padding:22px 34px;border-right:1px solid rgba(255,255,255,.13)}.about-number:last-child{border:0}.about-number strong{display:block;color:#fff;font-family:Montserrat,sans-serif;font-size:42px}.about-number em{color:var(--orange);font-style:normal}.about-number span{color:#9eb0bc;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.about-values{background:#f5f7f8}.about-value-head{max-width:790px}.about-value-head>p{color:#5d6d77;font-size:16px;line-height:1.7;max-width:650px}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;border-top:1px solid #cbd4d9}.value-grid article{padding:35px 35px 25px 0;border-right:1px solid #cbd4d9;margin-right:35px}.value-grid article:last-child{border:0}.value-grid b{color:var(--orange);font-family:Montserrat,sans-serif}.value-grid h3{font-family:Montserrat,sans-serif;font-size:19px;margin:38px 0 12px}.value-grid p{color:#65747d;line-height:1.7;font-size:14px}.about-journey h2{color:#fff;max-width:720px}.journey-line{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid rgba(255,255,255,.22)}.journey-item{position:relative;padding:34px 20px 10px 0}.journey-item:before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--orange)}.journey-item b{color:var(--orange);font-size:11px}.journey-item strong{display:block;color:#fff;font-family:Montserrat,sans-serif;font-size:20px;margin:16px 0 6px}.journey-item span{color:#9aadb9;font-size:13px}.about-bts{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:#061826}.about-bts-media{position:absolute;inset:0;z-index:0}.about-bts-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.about-bts-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,11,18,.92),rgba(2,11,18,.38),rgba(2,11,18,.12))}.about-bts .container{position:relative;z-index:2}.about-bts h2{font-family:Montserrat,sans-serif;color:#fff;font-size:clamp(54px,6vw,92px);line-height:.88;letter-spacing:-.055em;margin:18px 0 35px}.about-team .people-grid{grid-template-columns:repeat(5,1fr)}.about-cta{background:#0a64a0;padding:100px 0;position:relative}.about-cta:after{content:"";position:absolute;right:-8%;top:-25%;width:48%;height:150%;border-radius:50%;border:70px solid rgba(255,255,255,.055)}.about-cta .container{position:relative;z-index:2}.about-cta h2{font-family:Montserrat,sans-serif;color:#fff;font-size:clamp(42px,5vw,74px);line-height:.95;letter-spacing:-.05em;max-width:950px;margin:16px 0 22px}.about-cta p{color:#dbeaf3;font-size:16px;margin-bottom:30px}.about-cta .eyebrow{color:#fff}
@media(max-width:820px){.about-hero{min-height:78vh}.about-hero-content{padding:145px 0 70px}.about-hero h1{font-size:clamp(44px,12vw,66px)}.about-split{grid-template-columns:1fr;gap:45px}.about-image{height:460px}.about-number-grid{grid-template-columns:1fr 1fr}.about-number{border-bottom:1px solid rgba(255,255,255,.13)}.value-grid{grid-template-columns:1fr}.value-grid article{border-right:0;border-bottom:1px solid #cbd4d9;margin:0}.journey-line{grid-template-columns:1fr 1fr}.about-bts{min-height:520px}.about-team .people-grid{grid-template-columns:1fr 1fr}.about-cta{padding:75px 0}}
/* V3.0.3 About Full Content Manager frontend additions */
.about-section-intro{margin:14px 0 0;max-width:720px;color:#667782;font-size:14px;line-height:1.75}.about-clients{border-top:1px solid #e8eef2}.about-client-logos{margin-top:12px}.about-hero-media video{display:block;width:100%;height:100%}