/* TECH MEDIA CORPORATION — Corporate Motion V3.0 | 29 October 2026 */
:root{--blue:#0c28db;--deep:#0b238c;--ink:#0a1a4b;--muted:#596780;--paper:#ffffff;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:94px}
body{background:#fff;letter-spacing:0;}
/* One continuous fixed video, with no blur anywhere in the video pipeline. */
.video-stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#fff;pointer-events:none}
.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:none;filter:none!important;opacity:.92;will-change:auto}
.video-whitewash{inset:0;background:linear-gradient(104deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.26) 48%,rgba(255,255,255,.35) 100%);pointer-events:none}
main,.footer{position:relative;z-index:1}
.site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(6,43,207,.11)}
.header-inner{min-height:85px;gap:28px}
.brand{width:217px}
.brand img{width:100%;height:66px;object-fit:contain;object-position:left center}
.nav-links a{font-size:12px;letter-spacing:.01em}
.nav-cta{font-size:11px;letter-spacing:.035em;padding:15px 20px;gap:0;border-radius:3px}
.nav-right{gap:20px}
.office{font-size:9px;letter-spacing:1.6px}
.section-shell{max-width:1480px}
.hero{min-height:clamp(720px,calc(100svh - 86px),950px);padding-top:30px;padding-bottom:24px}
.hero-topline{letter-spacing:1.8px;font-size:10px}
.hero-grid{grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:14px;overflow:visible;min-width:0}
.hero-copy{padding:70px 0 62px;min-width:0}
.hero-title{font-family:'Roboto Condensed','Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(72px,7.4vw,124px);font-weight:900;line-height:1.01;letter-spacing:.005em;max-width:100%;margin:0}
.hero-title .line{display:block;width:100%;white-space:nowrap;line-height:1.01;min-height:1em;overflow:visible;transform-origin:left center}
.hero-title .hero-main{font-size:1em}
.hero-title .hero-secondary{font-size:.66em;line-height:1.07;min-height:1.07em}
.hero-title em{color:#071fae;font-style:normal}
.hero-title .hero-secondary em{color:#0c28db}
.hero-rule{margin:19px 0 17px;width:94px;height:3px;background:#0c28db;transform-origin:left;animation:rule-stretch 2.8s var(--ease) both}
@keyframes rule-stretch{0%{transform:scaleX(.12);opacity:.2}100%{transform:scaleX(1);opacity:1}}
.eyebrow{letter-spacing:2.2px;font-size:11px;margin-bottom:23px}
.hero-desc{font-size:15px;line-height:1.8;margin-top:29px;margin-bottom:29px;color:#485777}
.hero-actions{gap:23px}
.button{gap:24px;padding:16px 23px;letter-spacing:.07em;line-height:1.35;border-radius:2px}
.button>span:empty{display:none}
.button-text{padding-left:0;gap:0}
.button-text:hover{gap:0}
.button-primary:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(8,34,161,.14)}
.hero-art{position:relative;min-width:0;height:100%;min-height:510px;overflow:visible;transform:translateY(var(--art-parallax,0px))}
.hero-art-halo{width:78%;top:11%;left:9%;border-color:rgba(15,52,221,.12);box-shadow:0 0 0 50px rgba(17,62,241,.02)}
.hero-globe{position:absolute;width:108%;height:auto;max-height:68%;object-fit:contain;right:-4%;top:20%;filter:drop-shadow(0 20px 26px rgba(14,60,196,.1));transform-origin:50% 50%}
.hero-orbit{width:26%;height:auto;right:1%;bottom:22%;opacity:.38;filter:drop-shadow(0 8px 20px #0c28da15)}
.hero-art-caption{position:absolute;width:79%;left:12%;bottom:10px;z-index:2;border-top:1px solid rgba(15,50,196,.3);font-size:9px;letter-spacing:2.3px;padding-top:14px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent)}
.hero-bottom{position:relative;z-index:2;padding-top:17px}
.hero-bottom-right{letter-spacing:1.6px}
.marquee{background:#0b2ad8;padding:15px 0}
.marquee span{font-family:'Roboto Condensed','Barlow Condensed',sans-serif;font-size:25px;font-weight:800;letter-spacing:2px}
.marquee-track{animation-duration:38s}
/* Clear, cinematic editorial titles. No negative letter spacing or overlap. */
.display-heading,.capability h3,.step h3,.division-foot h3,.manifesto-text{font-family:'Roboto Condensed','Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.005em;font-weight:900}
.display-heading{font-size:clamp(62px,7.25vw,122px);line-height:.99;overflow-wrap:normal;max-width:100%;}
.display-heading span{color:#10255c}
.display-heading,.hero-title,.manifesto-text{font-kerning:normal;text-rendering:optimizeLegibility}
.reveal{transform:translate3d(0,24px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-text{filter:none!important;opacity:0;transform:translate3d(0,36px,0);transition:transform 1.05s var(--ease),opacity 1.05s var(--ease),letter-spacing 1.05s var(--ease)}
.reveal-text.visible{opacity:1;transform:translate3d(0,0,0);filter:none!important}
.delay-1{transition-delay:.09s}.delay-2{transition-delay:.19s}.delay-3{transition-delay:.29s}
.kinetic-heading{position:relative}
/* discreet moving cobalt highlight only on the main blue tone */
.kinetic-heading:not(.manifesto-text) span:not(.line){transition:color 1.2s var(--ease)}
.eyebrow::before{content:"";display:inline-block;height:6px;width:6px;background:currentColor;border-radius:50%;margin-right:10px;vertical-align:2px;animation:signal 3.3s ease-in-out infinite}
@keyframes signal{0%,100%{opacity:1;transform:scale(.88)}50%{opacity:.4;transform:scale(1.35)}}
.section-meta{gap:30px}
.section-meta span:first-child{font-size:10px;letter-spacing:1.8px}
.section-meta span:last-child{font-size:9px;letter-spacing:1.7px}
/* More air between content and graphics */
.about,.expertise,.approach,.divisions,.network{padding-top:114px;padding-bottom:122px}
.about-layout{grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:55px}
.about-right{padding-top:38px}
.about-art{max-width:480px;width:64%;margin-top:30px;opacity:.96}
.expertise-intro{gap:40px}
.expertise-intro .body-copy{width:30%;min-width:230px}
.capability{min-height:460px;border-radius:3px;background:rgba(255,255,255,.77);border-color:rgba(25,50,153,.16);padding:25px 22px 25px}
.cap-top{display:none}
.capability img{height:180px;object-fit:contain;margin:4px auto 27px}
.capability h3{font-size:39px;line-height:1.06;margin-bottom:14px}
.capability p{font-size:12px;line-height:1.7}
.cap-tag{font-size:9px}
.approach-header .body-copy{width:30%;min-width:240px}
.approach-body{gap:48px;grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
.approach-visual{height:555px}
.steps{padding-left:20px}
.step{grid-template-columns:minmax(0,1fr);padding:26px 0;border-color:rgba(15,45,140,.15)}
.step h3{font-size:35px;line-height:1.06}
.step p{font-size:13px;line-height:1.7}
.manifesto{background:rgba(9,43,207,.91);backdrop-filter:saturate(1.2);overflow:hidden}
.manifesto-inner{padding-top:105px;padding-bottom:65px}
.manifesto-text{font-size:clamp(80px,10.6vw,166px);line-height:1.035;letter-spacing:.001em;margin:64px 0 95px;max-width:100%}
.manifesto-text span{white-space:nowrap;max-width:100%;min-height:1.04em;line-height:1.035;margin:0 0 2px}
.manifesto-text .outline-letter{-webkit-text-stroke:1.4px rgba(255,255,255,.98);color:transparent}
.manifesto .eyebrow::before{background:#fff}
.divisions>.display-heading{padding:70px 0 55px}
.division{border-radius:3px;height:620px;padding:32px 37px}
.division-header{font-size:11px;letter-spacing:1.8px}
.division-header span:empty{display:none}
.division img{width:62%;max-height:52%;top:14%;left:19%;object-fit:contain}
.division-foot h3{font-size:clamp(42px,4.2vw,64px);line-height:1.03}
.network-grid{gap:46px}
.network-visual{min-height:510px}
.network-visual img{width:88%}
.contact-inner{border-radius:3px;background:rgba(255,255,255,.79);padding:44px 55px 59px}
.contact .display-heading{font-size:clamp(84px,10vw,151px);line-height:1.02;padding:74px 0 57px}
.contact-actions{flex-direction:row;flex-wrap:wrap}
.footer{background:rgba(255,255,255,.25)}
.footer-left img{width:196px}
/* Disable geometric bloat if screen is narrower than layout target. */
@media(max-width:1280px){
 .section-shell,.header-inner{width:min(100% - 72px,1480px)}
 .hero-title{font-size:clamp(74px,7.55vw,118px)}
 .hero-art{min-height:460px}
 .hero-globe{width:108%;right:-3%}
 .display-heading{font-size:clamp(68px,7.2vw,110px)}
 .manifesto-text{font-size:10.6vw}
 .division-foot h3{font-size:clamp(40px,4vw,60px)}
}
@media(max-width:940px){
 .section-shell,.header-inner{width:min(100% - 48px,1480px)}
 .header-inner{min-height:74px}.brand{width:185px}.brand img{height:58px}
 .hero{min-height:760px}
 .hero-grid{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
 .hero-title{font-size:clamp(65px,9vw,100px)}
 .hero-copy{padding-top:60px}
 .hero-art{min-height:440px}
 .hero-globe{width:135%;right:-24%;top:23%;max-height:58%}
 .display-heading{font-size:clamp(63px,8.4vw,91px)}
 .about-layout{gap:20px;grid-template-columns:1fr 1fr}
 .capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
 .capability{min-height:420px}
 .approach-body{grid-template-columns:1fr 1fr;gap:22px}
 .approach-visual{height:430px}
 .manifesto-text{font-size:10vw}
 .division{height:555px}
 .division-foot h3{font-size:44px}
 .contact .display-heading{font-size:10vw}
}
@media(max-width:700px){
 html{scroll-padding-top:69px}
 .section-shell,.header-inner{width:min(100% - 36px,1480px)}
 .site-header{background:rgba(255,255,255,.94)}
 .header-inner{min-height:70px}.brand{width:165px}.brand img{height:52px}
 .video-stage video{object-position:center center;filter:none!important;opacity:.94}
 .video-whitewash{background:rgba(255,255,255,.32)}
 .hero{min-height:765px;min-height:calc(100svh - 70px);padding-top:23px;padding-bottom:19px}
 .hero-topline{font-size:8px;letter-spacing:1px}
 .hero-grid{display:block;min-height:620px}
 .hero-copy{position:relative;z-index:2;padding:36px 0 60px}
 .hero-title{font-size:clamp(62px,15.4vw,106px);line-height:1.01;max-width:100%}
 .hero-title .hero-secondary{font-size:.66em}
 .hero-title .line{min-height:1.03em}
 .hero-art{height:38%;min-height:0;position:absolute;width:64%;right:-5%;top:11%;opacity:.26;z-index:0;pointer-events:none}
 .hero-globe{width:110%;right:-4%;top:10%;max-height:none}
 .hero-orbit,.hero-art-caption{display:none!important}
 .hero-desc{position:relative;z-index:2;font-size:13px;max-width:330px;line-height:1.77;margin:25px 0 22px}
 .hero-actions{position:relative;z-index:2;align-items:flex-start;gap:12px}
 .button{font-size:10px;padding:14px 17px}
 .hero-bottom{padding-top:12px}
 .scroll-notice{font-size:9px}
 .marquee{padding:12px 0}.marquee span{font-size:21px}
 .section-meta{font-size:9px;gap:14px;flex-wrap:wrap}
 .section-meta span:first-child,.section-meta span:last-child{font-size:9px;letter-spacing:1.1px}
 .about,.expertise,.approach,.divisions,.network{padding-top:78px;padding-bottom:82px}
 .display-heading{font-size:clamp(57px,12.8vw,88px);line-height:1.02}
 .about-layout{grid-template-columns:1fr;gap:10px;padding-top:43px}
 .about-art{margin:15px auto 0;max-width:320px;width:73%}
 .about-right{padding:14px 0 0}
 .statement{font-size:28px;line-height:1.34}
 .body-copy{font-size:13px;line-height:1.79}
 .expertise-intro{display:block;padding-top:51px;margin-bottom:32px}
 .expertise-intro .body-copy{min-width:0;width:100%;margin-top:28px}
 .capabilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .capability{min-height:360px;padding:16px 13px 18px}
 .capability img{height:120px;margin:1px auto 15px}
 .capability h3{font-size:clamp(24px,6.2vw,38px);line-height:1.06;margin-bottom:13px}
 .capability p{font-size:11px}
 .cap-tag{font-size:8px}
 .approach-header{display:block;padding-top:51px}
 .approach-header .body-copy{min-width:0;width:100%;margin-top:22px}
 .approach-body{display:block;margin-top:12px}
 .approach-visual{height:340px}
 .steps{padding:0}
 .step{padding:20px 0}
 .step h3{font-size:31px}
 .manifesto-inner{padding-top:73px;padding-bottom:42px}
 .manifesto-text{font-size:clamp(40px,10vw,68px);line-height:1.06;margin:52px 0 75px}
 .manifesto-text span{min-height:1.06em;line-height:1.06;margin-bottom:6px}
 .manifesto-bottom{font-size:9px}
 .divisions>.display-heading{padding:52px 0 36px}
 .divisions-grid{grid-template-columns:1fr}
 .division{height:480px;padding:25px}
 .division img{width:58%;top:11%;height:49%}
 .division-foot h3{font-size:clamp(40px,10.8vw,58px)}
 .network-grid{display:block;padding-top:55px}
 .network-visual{min-height:360px}
 .network-visual img{width:80%}
 .contact{padding:70px 0}
 .contact-inner{padding:25px 21px 33px}
 .contact .display-heading{font-size:clamp(51px,11.3vw,82px);line-height:1.04;padding:56px 0 42px}
 .footer-left img{width:150px}
}
@media(max-width:395px){
 .hero-title{font-size:15vw}
 .hero-copy{padding-top:33px}
 .hero-desc{max-width:315px}
 .hero-actions{flex-direction:column;gap:6px}
 .capability{min-height:355px}
 .capability h3{font-size:25px}
 .capability p{font-size:10px}
 .manifesto-text{font-size:9.8vw}
 .contact .display-heading{font-size:11vw}
}
@media(prefers-reduced-motion:reduce){
 .video-stage video{display:none!important}
 .reveal,.reveal-text{opacity:1!important;transform:none!important;filter:none!important}
 .hero-art{transform:none!important}
 .eyebrow::before,.marquee-track{animation:none!important}
}
/* Final containment pass after responsive visual audit */
.hero-art{overflow:hidden}
.hero-art-caption{left:11%;width:78%}
.network-grid{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
@media(max-width:700px){.network-grid{display:block;grid-template-columns:none}.hero-art{overflow:hidden}}
/* Gentle movement of the ink fill; text stays solid cobalt throughout. */
@supports (-webkit-background-clip:text) {
 .hero-title em {background-image:linear-gradient(115deg,#061c94 0%,#103be7 36%,#061c94 66%,#123de6 100%);background-size:210% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ink-drift 13s ease-in-out infinite alternate}
}
@keyframes ink-drift{from{background-position:0% center}to{background-position:100% center}}
@media(prefers-reduced-motion:reduce){.hero-title em{animation:none!important}}