/* AFRI7ECH: one shared navy, electric blue and cyan palette on every viewport. */
:root{--ink:#f1f7ff;--blue:#35cfff;--muted:#b6cce5;--line:#296094;--ice:#09284a;--shadow:0 16px 40px #0005;--glass:linear-gradient(135deg,#0c326da8,#041a39a6);--glass-border:#3996ef70;color-scheme:dark;background:#020c20;color:var(--ink)}
body{background:#020c20;color:var(--ink)}
::selection{background:#0875d9;color:#fff}
:focus-visible{outline:2px solid #61e4ff;outline-offset:4px}
.page-environment{background:#020c20}
.page-environment-image{opacity:1}
.page-environment:after{background:linear-gradient(100deg,#020b1a36,#053a701a 70%,#020b1a20)}
.site-header{background:#031128e6;border-bottom:1px solid #2777c44d;box-shadow:0 8px 35px #0002}
.logo{color:#f0f6ff}.logo>span{color:#35cfff}.logo small{color:#99c9ef}
.desktop-nav,.mobile-menu{color:#daeaff}.services-toggle{color:#94c7ef}
.nav-services>div,.mobile-menu{background:#051c38f5;border-color:#2b689c;box-shadow:0 20px 50px #0008;backdrop-filter:blur(20px)}
.nav-services>div>a:hover,.mobile-menu>a:hover{background:#0b3a63;color:#55ddff}
.menu-toggle span{background:#c5eaff}
.button{background:linear-gradient(125deg,#008ccc,#0755dd);border-color:#2ea8ed;box-shadow:0 6px 20px #0077ff33,inset 0 1px 0 #8adeff55;color:#fff}
.button:hover{background:linear-gradient(125deg,#009ad9,#1066ef);box-shadow:0 8px 26px #008cff55}
.button.secondary{color:#a5eaff;background:#07244491;border-color:#3b97d7;box-shadow:none}
.button.secondary:hover{background:#0d416bbc;color:#fff}
.hero{background:linear-gradient(90deg,#020c20a3,#0726533b 63%,transparent)}
.hero:before{background:radial-gradient(ellipse at 78% 40%,#0866d322,transparent 60%)}
.hero-subtitle,.service-hero .hero-subtitle,.about-hero .hero-subtitle{color:#e0edfa}
.hero-note,.scroll-note,.small-points{color:#a9c5e4}
.globe-art{mix-blend-mode:screen;mask-image:radial-gradient(ellipse at center,#000 49%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,#000 49%,transparent 72%)}
.globe-center{text-shadow:0 2px 18px #000,0 2px 5px #000;background:radial-gradient(ellipse,#031126b8,transparent 70%);padding:12px 0}
.orbit-project{background:linear-gradient(135deg,#0b3462eb,#051a35eb);border:1px solid #42a5eeb0;box-shadow:0 12px 35px #0007,0 0 18px #007bff20}
.orbit-project h3{color:#f3f9ff}.orbit-project span{color:#7ad9ff}.orbit-project p{color:#bcd5ec}.orbit-project b{background:#063b66;color:#99eaff;border-color:#2e91d2}
.motion-toggle{background:#041c36d9;border-color:#3875a6;color:#b6dcf7}
.stats-strip,.clients-strip{background:#061c3ba6!important;border-color:#2571b14a;box-shadow:none}
.stats-inner>div{border-color:#24608e}.stats-inner small,.stats-inner>p{color:#aac9e9}
.section-atmosphere,.services-scene{background:transparent;border-color:#247db047}
.section-atmosphere:before,.section-atmosphere.atmosphere-1:before,.section-atmosphere.atmosphere-2:before,.atmosphere-compact:before,.atmosphere-footer:before,.services-scene:before{background:transparent}
.services-scene-glow{background:radial-gradient(ellipse at 15% 60%,#006fff26,transparent 50%),radial-gradient(ellipse at 85% 20%,#00c8ff15,transparent 45%);opacity:1}
.section-atmosphere .service-card,.section-atmosphere .project-card,.section-atmosphere .example-grid figure,.section-atmosphere .belief-grid article,.section-atmosphere .values-grid article,.section-atmosphere .contact-process-grid article,.section-atmosphere .sharing-grid article,.section-atmosphere .industry-grid>a,.section-atmosphere .module-grid>a,.section-atmosphere .enquiry-panel,.section-atmosphere .contact-box,.services-scene .service-card,.section-atmosphere .process-content,.section-atmosphere .service-index>article{background:var(--glass);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 #90cdff16,0 16px 40px #0003;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.services-scene .service-card:hover,.section-atmosphere .service-card:hover{background:linear-gradient(135deg,#124b81bf,#06254ac4);border-color:#52c4f0;box-shadow:0 20px 40px #0005,0 0 25px #006eff1c}
.icon-box,.process-grid .icon-box,.services-scene .service-card .icon-box{background:#0b4a753d;border:1px solid #318ab76e;box-shadow:inset 0 1px 0 #a7edff10;color:#44d4ff}
.service-card>small,.services-scene .service-card>small,.belief-grid small{color:#9abfdf}
.round-arrow,.services-scene .round-arrow{background:#06345dcc;border-color:#348bc6;color:#6ae0ff;box-shadow:none}
.section-heading>p,.services-scene .section-heading>p,.services-scene .service-card p,.section-atmosphere .process-content>p,.section-atmosphere .project-card-body>p,.section-atmosphere .example-grid p,.section-atmosphere .section-heading>p,.roots-inner p:not(.eyebrow),.cta-inner>p{color:var(--muted)}
.section-atmosphere .project-card-body,.section-atmosphere .example-grid figcaption{background:transparent}
.project-card .project-type,.example-grid small{color:#78c9f8}
.process-grid li{border-color:#2b648c}
.roots-section,.team-section,.collaboration-banner,.core-feature,.contact-banner,.contact-hero,.cta-strip{background:transparent}
.roots-section:after,.collaboration-banner:after,.scenic-cta:after{background:#061c3b38}
.roots-values span,.cta-inner>span,.footer nav,.footer>small,.collaboration-inner>p>span,.core-feature ul,.core-feature-art>span,.measure-inner small,.about-facts>span{color:#b2cde7}
.footer{color:#e7f4ff}.atmosphere-footer{background:#020d209c}
.client-logo{background:#f3f8ff;border:1px solid #3b92d17a;border-radius:10px;padding:5px 20px;box-shadow:0 8px 25px #0003}
.clients-inner{padding-block:20px}.client-logo .official-logo{color:#172c49}
.section-atmosphere .portfolio-tools{background:#062447c9;border-color:#3474a2;box-shadow:none}
.filter-button,.section-atmosphere .filter-button{color:#bdd7ed;background:transparent;border-color:#315f8a}
.filter-button.active,.section-atmosphere .filter-button.active{background:#0d4a7c;color:#a5f0ff}
.search-label{border-color:#3b7caa;background:#031a32}.search-label input{background:transparent}
.results-status{color:#a6c7e5}.tags span{background:#0b4269;color:#a2e5ff}
.primary-screen,.secondary-screen,.core-feature-art>.project-preview{border-color:#103c66;box-shadow:0 22px 45px #0008,0 0 30px #0079ff22}
.concept-hero-main,.page-hero-image,.team-art img{mix-blend-mode:normal}
.concept-hero-main{border-radius:16px;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.about-hero .page-hero-image{mask-image:radial-gradient(ellipse,#000 35%,transparent 71%);-webkit-mask-image:radial-gradient(ellipse,#000 35%,transparent 71%)}
.concept-hero>span,.example-image>span,.team-art small{background:#031b37e8;color:#b9e7ff;border-color:#3578a6}
.team-art img{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 85%,transparent)}
.contact-banner-art{filter:brightness(.5) saturate(.85)}
.contact-banner:after{background:linear-gradient(90deg,#031329f0,#042347bc 44%,#07326844)}
.contact-banner-content>p:not(.eyebrow){color:#d6e9f8}
.contact-hero .enquiry-panel,.contact-hero .contact-box{background:var(--glass);border-color:var(--glass-border);box-shadow:inset 0 1px 0 #a8daff1a,0 16px 40px #0003;backdrop-filter:blur(14px)}
input,select,textarea{background:#03172dcf;border-color:#38658e;color:#edf7ff;box-shadow:none}
input::placeholder,textarea::placeholder{color:#8faeca;opacity:1}
input:focus,select:focus,textarea:focus{border-color:#4acaff;box-shadow:0 0 0 3px #16b9ff1f}
label,legend{color:#d6e9f9}.field-hint,.form-note,.contact-location,.consultation-check{color:#abc6e0}
.service-options label>span{background:#072d4d8c;border-color:#326088;color:#c3ddf1}
.service-options input:checked+span{background:#0b4f7bad;border-color:#42d6ff;color:#e6faff;box-shadow:0 0 0 1px #37baff55}
.service-options i{border-color:#5592bc;background:#041d35}
.service-options input:checked+span i{background:#15bfff;border-color:#75e4ff}
.form-status{color:#c6e8ff;background:#073656;border-color:#2789b5}
.section-atmosphere .project-cover{background:#06224591;border-color:#266997}
.page-heading>.official-logo{background:#f4f8ff;padding:12px 20px;border-radius:10px;width:max-content;max-width:100%}
.case-story article{border-color:#367da6}.case-story article:before{color:#66d5ff}
.skip-link{background:#043b6a;color:#fff}
@media(max-width:640px){
 .page-environment:after{background:#03112620}
 .contact-banner:after{background:linear-gradient(#031329e8,#0637649c 60%,#03132970)}
 .services-scene .service-card{background:var(--glass)}
 .orbit-project{box-shadow:0 8px 20px #0006,0 0 10px #087aff22}
 .client-logo{padding:6px 12px}.client-logo .official-logo img{max-width:100%}
 .globe-center{padding:6px 0}.globe-art{mask-image:radial-gradient(ellipse,#000 45%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 45%,transparent 72%)}
}
@supports not (backdrop-filter:blur(1px)){
 .services-scene .service-card,.section-atmosphere .service-card,.section-atmosphere .project-card,.section-atmosphere .enquiry-panel,.section-atmosphere .contact-box,.section-atmosphere .process-content{background:#062449ed}
}
/* Original client identities, transparent PNGs rather than logo tiles. */
.client-logo,.page-heading>.official-logo,.art-logo{background:transparent;border:0;box-shadow:none;border-radius:0}
.client-logo{padding:8px 14px;justify-content:center}
.client-logo .official-logo img{width:200px;height:90px;object-fit:contain;filter:drop-shadow(0 0 7px #62b9ff55)}
.client-logo .official-logo-tetra img{width:195px;height:100px}
.client-logo .official-logo-tredz img{width:185px;height:100px}
.page-heading>.official-logo{padding:0}.official-logo-tredz img{width:155px;height:85px}
.art-logo .official-logo img{filter:drop-shadow(0 0 6px #66bcff88)}
.globe-center{display:none}
@media(min-width:641px) and (max-width:1100px){.orbit-project{width:44%;height:155px}.orbit-project-1{right:5%;top:26%}.orbit-project h3{font-size:16px}.orbit-project p{font-size:11px}.orbit-project span{font-size:7px}.globe-scene{margin-right:-15px}.globe-note{right:18px}}
@media(max-width:640px){.client-logo{padding:4px}.client-logo .official-logo img{width:140px;height:70px}.client-logo .official-logo-tetra img,.client-logo .official-logo-tredz img{width:140px;height:78px}}
/* Supplied metallic identity: black AFRI, blue 7ECH, transparent PNG. */
.logo,.footer .logo{display:block;width:148px;flex:0 0 148px;line-height:0}
.logo img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;filter:drop-shadow(0 0 4px #148fff33)}
.header-inner{height:102px}.footer .logo{width:138px;flex-basis:138px}
.mobile-menu{top:98px}
/* Compact case-study introduction, centred on the client's own identity. */
.page-heading{background:transparent}
.case-hero{text-align:center;padding-block:20px 26px;position:relative}
.case-hero .back-link{display:block;width:max-content;margin:0 0 0;text-align:left;font-size:13px}
.case-hero>.official-logo{margin:2px auto 10px;justify-content:center;width:280px;max-width:80%}
.case-hero>.official-logo img{width:280px;height:125px;object-fit:contain;filter:drop-shadow(0 0 9px #4bafff44)}
.case-hero>.official-logo-tredz img{height:135px}
.case-hero>.eyebrow{font-size:11px;margin:6px auto 10px}
.case-hero h1{font-size:24px;line-height:1.25;letter-spacing:-.025em;margin:0 auto 13px;max-width:900px}
.case-hero h1 em{display:inline-block;font-size:clamp(25px,2.4vw,36px);line-height:1.15;margin-top:5px}
.case-hero>p:not(.eyebrow){font-size:16px;line-height:1.5;max-width:700px;margin:0 auto 12px}
.case-hero .tags{justify-content:center;margin:10px 0}.case-hero .live-site-link{margin-top:6px;min-height:41px;font-size:13px}
.section-atmosphere .project-cover{max-width:860px;padding:12px;background:#08264c73;border-color:#2c79ad66;margin-block:12px 30px}
.project-cover>div{padding:0}.project-cover .homepage-preview{border-radius:6px}
@media(max-width:640px){
 .logo,.footer .logo{width:117px;flex-basis:117px}.header-inner{height:86px}.mobile-menu{top:82px}
 .header-actions{gap:9px}.header-actions>.button{font-size:11px;padding-inline:12px;gap:9px}
 .case-hero{padding-block:17px 22px}.case-hero>.official-logo{margin:8px auto 12px;width:225px}
 .case-hero>.official-logo img{width:225px;height:110px}.case-hero>.official-logo-tredz img{height:120px}
 .case-hero h1{font-size:21px}.case-hero h1 em{font-size:27px}.case-hero>p:not(.eyebrow){font-size:15px}
 .section-atmosphere .project-cover{padding:7px;margin-block:6px 22px}
}
@media(max-width:359px){.logo{width:98px;flex-basis:98px}.header-inner{gap:8px}.header-actions>.button{font-size:10px;padding-inline:10px}}
/* Horizontal brand lockup and page-specific editorial layouts. */
.logo,.footer .logo{width:240px;flex-basis:240px;height:62px;overflow:hidden;display:flex;align-items:center}
.logo img{aspect-ratio:3;width:100%;height:auto;flex-shrink:0}
.header-inner{height:90px}.mobile-menu{top:86px}.footer .logo{width:215px;flex-basis:215px}
.portfolio-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding-block:55px 40px;min-height:330px}
.portfolio-intro h1{font-size:clamp(40px,4vw,60px)}.portfolio-intro p:not(.eyebrow){font-size:18px;max-width:520px}
.portfolio-identities{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;position:relative;padding:20px}
.portfolio-identities:before{content:'';position:absolute;inset:-20px;background:radial-gradient(ellipse,#0964b82e,transparent 68%);z-index:-1}
.portfolio-identities .official-logo img{width:175px;height:100px;filter:drop-shadow(0 0 7px #55afff44)}
.example-pair{grid-template-columns:1fr 1fr;gap:28px}.example-pair .example-image img{aspect-ratio:1.6}.example-pair figcaption{padding:23px}.example-pair h3{font-size:24px}
.case-deliverables{padding:0;list-style:none;display:grid;gap:15px;margin-top:25px;color:#c1ddf1}
.case-deliverables li{display:flex;gap:12px;align-items:center}.case-deliverables svg{width:20px;height:20px;color:#3ed1ff}
.next-project{display:flex;justify-content:space-between;align-items:center;gap:25px}.next-project h2{font-size:30px}.next-project p{margin-bottom:0}
@media(max-width:1100px){.logo,.footer .logo{width:205px;flex-basis:205px}.desktop-nav{gap:26px}.portfolio-intro{gap:25px}.portfolio-identities{gap:12px;padding:5px}.portfolio-identities .official-logo img{width:135px;height:85px}}
@media(max-width:640px){
 .logo,.footer .logo{width:166px;flex-basis:166px;height:50px}.header-inner{height:76px;gap:8px}.mobile-menu{top:72px}.header-actions{gap:5px}.header-actions>.button{padding-inline:9px;font-size:10px;gap:7px}.menu-toggle{min-width:30px;width:30px}
 .portfolio-intro{grid-template-columns:1fr;gap:15px;padding-block:32px 20px;min-height:0;text-align:center}.portfolio-intro h1{font-size:40px}.portfolio-intro p:not(.eyebrow){font-size:17px}.portfolio-identities{flex-wrap:nowrap;gap:13px;padding:0}.portfolio-identities>a{flex:1;min-width:0}.portfolio-identities .official-logo img{width:100%;height:76px}
 .example-pair{grid-template-columns:1fr;gap:25px}.next-project{align-items:flex-start;flex-direction:column;gap:18px}.next-project h2{font-size:28px}
}
@media(max-width:359px){.logo{width:140px;flex-basis:140px}.header-actions>.button{font-size:9px;padding-inline:7px;gap:5px}.header-actions>.button>span{font-size:18px}.header-inner{gap:5px}}
/* Hero art follows each page's subject, with the same blue light and depth. */
.portfolio-intro{grid-template-columns:38% 62%;gap:0;min-height:475px;overflow:hidden}
.portfolio-intro>div:first-child{position:relative;z-index:3;padding-right:22px}
.work-showcase{position:relative;min-height:380px;perspective:1400px}
.work-screen{position:absolute;display:block;overflow:hidden;border:1px solid #397cc2;border-radius:10px;background:#05172d;box-shadow:0 20px 45px #0008,0 0 25px #006eff16;width:57%}
.work-screen-0{top:0;left:3%;rotate:-7deg;z-index:1}.work-screen-1{top:10%;right:0;rotate:6deg;z-index:2}.work-screen-2{bottom:0;left:20%;rotate:-2deg;z-index:3}
.screen-chrome{display:flex;align-items:center;gap:4px;height:23px;background:#08243e;padding:5px 9px}.screen-chrome i{width:4px;height:4px;background:#4487b6;border-radius:50%}.screen-chrome small{font-size:8px;color:#adcee8;margin:auto}.work-screen .homepage-preview{aspect-ratio:1.75}
.service-overview-hero{display:grid;grid-template-columns:42% 58%;align-items:center;min-height:500px;padding-block:30px;overflow:hidden}
.service-overview-copy{position:relative;z-index:2}.service-overview-copy>p:not(.eyebrow){font-size:19px;max-width:400px}
.service-overview-copy h1{font-size:clamp(36px,4vw,58px)}
.service-overview-art{position:relative;margin-right:-30px;margin-left:-25px}.service-overview-art img{width:100%;mask-image:radial-gradient(ellipse,#000 48%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 48%,transparent 73%)}
.contact-banner{min-height:540px}.contact-banner-art{filter:none;object-position:center;top:-12%;height:125%;mask-image:linear-gradient(#000 80%,transparent);-webkit-mask-image:linear-gradient(#000 80%,transparent)}
.contact-banner:after{background:linear-gradient(90deg,#020e23d9,#02122987 41%,#03172a08 72%)}
@media(max-width:960px){.portfolio-intro{grid-template-columns:40% 60%;min-height:420px}.work-showcase{min-height:330px}.work-screen{width:62%}.service-overview-hero{min-height:430px}.service-overview-copy h1{font-size:39px}.service-overview-copy>p:not(.eyebrow){font-size:17px}}
@media(max-width:640px){
 .portfolio-intro{grid-template-columns:1fr;gap:20px;min-height:0}.portfolio-intro>div:first-child{padding-right:0}.work-showcase{width:100%;min-height:0;aspect-ratio:1.18;margin-bottom:20px}.work-screen{width:62%}.work-screen-0{left:1%}.work-screen-1{right:0;top:17%}.work-screen-2{left:17%;bottom:3%}.screen-chrome{height:17px;padding:3px 6px}.screen-chrome small{font-size:6px}
 .service-overview-hero{grid-template-columns:1fr;min-height:0;text-align:center;padding-block:32px 10px}.service-overview-copy h1{font-size:40px}.service-overview-copy>p:not(.eyebrow){margin-inline:auto}.service-overview-art{margin:0 -20px}.service-overview-art img{aspect-ratio:1.5;object-fit:cover}
 .contact-banner{min-height:670px}.contact-banner-content{padding-top:35px;padding-bottom:300px}.contact-banner-content h1{font-size:42px}.contact-banner-art{width:170%;left:-65%;height:65%;top:auto;bottom:-3%;object-position:right bottom;object-fit:cover;mask-image:linear-gradient(transparent,#000 25%,#000 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 85%,transparent)}
 .contact-banner:after{background:linear-gradient(#020e2377,#020e2330 45%,transparent 65%)}
}
/* Same Africa / globe / layered-depth family as Home and About. */
.portfolio-intro{min-height:530px}.work-showcase{min-height:455px}
.work-globe{position:absolute;width:105%;max-width:none;left:-2%;top:0;height:100%;object-fit:contain;mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 40%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse,#000 40%,transparent 73%)}
.work-screen{width:50%}.work-screen-0{top:5%;left:0}.work-screen-1{top:12%;right:0}.work-screen-2{bottom:3%;left:24%}
.service-overview-hero{grid-template-columns:40% 60%;min-height:560px}
.service-universe{position:relative;min-width:0;isolation:isolate;height:510px;margin-left:-10px;perspective:1400px}
.universe-globe{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.75;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 35%,transparent 72%)}
.universe-brand{position:absolute;left:32%;top:29%;width:36%;height:39%;object-fit:contain;z-index:4;filter:drop-shadow(0 0 20px #006cff40)}
.discipline{position:absolute;width:36%;border:1px solid #4ea5e5a8;border-radius:11px;overflow:hidden;background:#062647da;box-shadow:0 18px 35px #0006;z-index:3;transition:box-shadow .2s}
.discipline:hover{box-shadow:0 16px 35px #0008,0 0 25px #1689ff55;border-color:#64dcff}
.discipline-image{height:113px;overflow:hidden}.discipline-image img{width:100%;height:100%;object-fit:cover;object-position:top}
.discipline>span{display:flex;align-items:center;gap:9px;padding:12px;font-size:13px;font-weight:600;color:#deefff}.discipline svg{width:20px;height:20px;color:#49d9ff}.discipline b{margin-left:auto;color:#53d7ff;font-size:19px}
.discipline-0{left:3%;top:3%;rotate:-8deg}.discipline-1{right:2%;top:10%;rotate:7deg}.discipline-2{left:2%;bottom:9%;rotate:5deg}.discipline-3{right:1%;bottom:3%;rotate:-6deg}
.contact-banner{min-height:575px;background:transparent}.contact-banner-content{padding-block:65px;position:relative;z-index:2}.contact-banner-content h1{max-width:540px}.contact-banner-content>p:not(.eyebrow){max-width:450px}
.contact-banner-art{left:24%;width:79%;height:120%;top:-9%;bottom:auto;object-fit:cover;object-position:66% 45%;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 93%,transparent)}
.contact-banner:after{background:linear-gradient(90deg,#031329a8,#03132990 32%,#03132910 66%,transparent)}
@media(max-width:960px){.service-overview-hero{min-height:480px}.service-universe{height:440px}.discipline{width:39%}.discipline-image{height:90px}.discipline>span{padding:9px;font-size:11px;gap:6px}.discipline svg{width:17px}.contact-banner-content h1{max-width:420px}.contact-banner-content>p:not(.eyebrow){max-width:380px}}
@media(max-width:640px){
 .portfolio-intro{min-height:0}.work-showcase{min-height:0;aspect-ratio:1.1}.work-screen{width:57%}.work-screen-1{top:19%}.work-screen-2{left:22%;bottom:5%}
 .service-overview-hero{grid-template-columns:1fr;min-height:0}.service-universe{height:auto;aspect-ratio:1.1;margin:0 -12px;container-type:inline-size}.discipline{width:39%}.discipline-image{height:24cqw}.discipline>span{padding:2cqw;font-size:2.7cqw;gap:1.5cqw}.discipline svg{width:4cqw;height:4cqw}.discipline b{font-size:3.5cqw}.universe-brand{top:29%;height:36%;left:29%;width:43%}
 .contact-banner{min-height:780px;align-items:flex-start}.contact-banner-content{padding:35px 0 425px;text-align:center}.contact-banner-content h1{max-width:none;font-size:42px}.contact-banner-content>p:not(.eyebrow){max-width:380px;margin-inline:auto}.contact-banner-art{width:120%;left:-10%;top:auto;bottom:-5%;height:57%;object-position:69% center;mask-image:linear-gradient(transparent,#000 20%,#000 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 85%,transparent)}.contact-banner:after{background:linear-gradient(#03132955,transparent 55%)}
}
/* A complete ellipse: rear cards pass behind the globe, front cards pass over it. */
.service-overview-hero{grid-template-columns:34% 66%;min-height:625px;overflow:visible}
.service-overview-copy{padding-right:15px}.service-overview-copy h1{font-size:clamp(36px,3.7vw,54px)}
.orbital-universe{height:auto;aspect-ratio:1.28;max-height:660px;margin-left:0;perspective:1200px;isolation:isolate;container-type:inline-size}
.universe-planet{position:absolute;left:20%;top:12%;width:60%;height:76%;z-index:3;pointer-events:none;filter:drop-shadow(0 0 18px #008dff44)}
.universe-planet .universe-globe{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;mix-blend-mode:normal;mask-image:radial-gradient(ellipse closest-side,#000 76%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 76%,transparent 100%)}
.orbital-universe .universe-brand{left:33%;top:33%;width:34%;height:33%;z-index:4;filter:drop-shadow(0 0 12px #005aff44);pointer-events:none}
.orbit-rails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 5px #0099ff99)}
.orbit-rails-back{z-index:1}.orbit-rails-front{z-index:5;opacity:.9}
.orbital-universe .discipline{left:var(--orbit-x,50%);top:var(--orbit-y,50%);right:auto;bottom:auto;rotate:none;width:32%;border:2px solid #6aa3cc;border-radius:12px;padding:5px;background:linear-gradient(145deg,#073259,#02132c);box-shadow:inset 0 0 0 1px #8eddff60,0 0 0 1px #094b7c,0 0 12px #008fff40,0 14px 25px #0008;transform:translate(-50%,-50%) scale(var(--orbit-scale,1)) rotate(var(--orbit-tilt,0deg)) rotateY(var(--orbit-turn,0deg));will-change:transform,left,top;transform-origin:center;transition:box-shadow .2s}
.orbital-universe .discipline>span{padding:6px 5px 10px;font-size:clamp(10px,1.5cqw,15px);gap:7px;white-space:nowrap}
.orbital-universe .discipline svg{width:21px;height:21px}.orbital-universe .discipline b{font-size:20px}
.orbital-universe .discipline-image{height:auto;aspect-ratio:1.85;border-radius:5px;overflow:hidden}
.orbital-universe .discipline-image img{height:100%;width:100%;object-fit:cover;object-position:top}
.orbital-universe .discipline:focus-visible{outline:3px solid #63e4ff;outline-offset:5px}.orbital-universe .discipline:hover{border-color:#9eebff;box-shadow:0 0 22px #17c0ff70,0 15px 30px #0007}
.orbital-universe .motion-toggle{bottom:0;right:8%;z-index:9}
@media(max-width:960px){.service-overview-hero{grid-template-columns:35% 65%;min-height:490px}.service-overview-copy h1{font-size:36px}.orbital-universe{aspect-ratio:1.15}.orbital-universe .discipline{width:33%;border-width:1px;padding:4px}.orbital-universe .discipline>span{font-size:1.75cqw;padding:4px 3px 7px;gap:4px}.orbital-universe .discipline svg{width:3cqw;height:3cqw}.orbital-universe .discipline b{font-size:3cqw}}
@media(max-width:640px){.service-overview-hero{display:flex;flex-direction:column;min-height:0;overflow:hidden}.service-overview-copy{padding:0;width:100%}.service-overview-copy h1{font-size:40px}.orbital-universe{width:calc(100% + 28px);margin:8px -14px 12px;height:auto;aspect-ratio:1.12;max-height:none}.orbital-universe .discipline{width:34%;border-radius:7px;padding:3px}.orbital-universe .discipline>span{font-size:1.95cqw;gap:3px;padding:4px 2px 6px}.orbital-universe .discipline svg{width:3.5cqw;height:3.5cqw}.orbital-universe .universe-brand{left:32%;width:36%}.orbital-universe .motion-toggle{font-size:9px;bottom:0;right:4%}.universe-planet{left:18%;width:64%}}
@media(prefers-reduced-motion:reduce){.orbital-universe .discipline{will-change:auto}}
.motion-paused .orbital-universe .discipline{will-change:auto}
/* The home ribbon is a single high-resolution still; depth is baked into the artwork. */
.home-hero .hero-inner{grid-template-columns:37% 63%;min-height:650px}.home-hero .hero-copy{padding-right:13px}.home-hero h1{font-size:clamp(40px,4.5vw,65px)}
.static-home-art{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;height:620px;margin-left:-5%;margin-right:-3%;animation:none;transform:none}
.static-home-art img{width:100%;height:auto;max-height:100%;object-fit:contain;animation:none;transform:none;transition:none;mask-image:radial-gradient(ellipse,#000 58%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse,#000 58%,transparent 78%)}
.static-home-art:focus-visible{outline:2px solid #55daff;outline-offset:-10px;border-radius:15px}
@media(max-width:1100px){.home-hero .hero-inner{grid-template-columns:39% 61%;min-height:570px}.static-home-art{height:545px}.home-hero h1{font-size:43px}}
@media(max-width:640px){.home-hero .hero-inner{display:flex;min-height:0}.home-hero .hero-copy{padding-right:0}.home-hero h1{font-size:var(--title-xl)}.static-home-art{width:calc(100% + 28px);margin:0 -14px 25px;height:auto;aspect-ratio:1.5}.static-home-art img{width:100%;height:auto}.home-hero>.motion-toggle{bottom:5px;right:18px}}
/* Work: one Earth horizon, three real project displays, no duplicate gallery. */
.work-stage{position:relative;isolation:isolate;overflow:hidden;padding:44px 0 38px;background:#03132b}
.work-stage-bg{position:absolute;z-index:-2;inset:-6% 0 auto;width:100%;height:108%;object-fit:cover;object-position:center top;opacity:.86;pointer-events:none}
.work-stage:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(#02122b18,#02122b20 50%,#02122be0 90%,#02122b)}
.work-stage-content{width:min(1530px,calc(100% - 56px))}
.work-stage-heading{text-align:center;max-width:1100px;margin:0 auto 32px;text-shadow:0 3px 20px #0009}
.work-stage-heading .eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;font-size:15px;letter-spacing:.22em;margin:0 0 14px;color:#20dcff}
.work-stage-heading .eyebrow:before,.work-stage-heading .eyebrow:after{content:"";width:30px;height:2px;background:#2adeff}
.work-stage-heading h1{font-size:clamp(38px,4.6vw,72px);letter-spacing:-.035em;line-height:1.06;margin:0 0 13px}
.work-stage-heading h1 em{color:#0dd2f7;font-style:normal}
.work-stage-heading>p:last-child{font-size:clamp(16px,1.45vw,22px);color:#c0daf1;margin:0;line-height:1.5}
.stage-grid{display:grid;grid-template-columns:1fr 1.43fr 1fr;gap:26px;align-items:end;padding:0 0 22px}
.stage-grid .stage-project{position:relative;min-width:0;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;text-align:center}
.stage-grid .stage-project[hidden]{display:none}
.stage-devices{position:relative;display:block;height:260px;margin:0 12px;z-index:2}
.stage-client-brand{height:66px;display:flex;align-items:center;justify-content:center;padding-bottom:13px}
.stage-client-brand .official-logo{height:50px;width:130px;margin:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 12px #2b95ed45)}
.stage-client-brand .official-logo img{width:100%;height:100%;object-fit:contain}
.stage-client-brand .official-logo-coretrack{width:150px}
.stage-client-brand .official-logo-tredz{width:125px;height:65px}
.stage-computers{height:calc(100% - 66px);display:flex;align-items:flex-end;position:relative;padding:0 6% 0 0;perspective:1600px}
.stage-laptop{position:relative;min-width:0;width:100%;transform:rotateY(5deg);transform-origin:bottom center;filter:drop-shadow(0 9px 10px #000b)}
.stage-screen{padding:6px;border:1px solid #8197a9;background:linear-gradient(145deg,#24344a,#010612 35%,#426985);border-radius:8px 8px 2px 2px;box-shadow:0 0 0 2px #010710,0 0 25px #0275db48;overflow:hidden}
.stage-screen img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;object-position:top;background:#fff}
.laptop-base{display:block;height:8px;margin:0 -5%;background:linear-gradient(#6a88a3,#101e2d 45%,#52647a 65%,#0a1020);border-radius:1px 1px 50% 50%;box-shadow:0 3px 4px #0008;position:relative}
.laptop-base:after{content:"";position:absolute;left:41%;top:0;width:18%;height:3px;background:#07182c;border-radius:0 0 6px 6px}
.stage-phone{position:absolute;right:-1%;bottom:0;width:19%;aspect-ratio:.48;overflow:hidden;border:3px solid #778998;border-radius:10px;padding:2px;background:#050810;box-shadow:0 0 0 2px #03080e,0 4px 16px #000b;transform:rotateY(-5deg)}
.stage-phone:after{content:"";position:absolute;top:3px;left:29%;width:42%;height:4px;border-radius:4px;background:#050810}
.stage-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px}
.paired-computers{gap:28px;padding:0 3%}
.paired-computers .stage-laptop{width:50%;transform:rotateY(7deg)}
.paired-computers .network-laptop{transform:rotateY(-7deg)}
.paired-computers .stage-screen{padding:5px}
.platform-link{position:absolute;left:50%;top:39%;transform:translate(-50%,-50%);width:34px;height:34px;border:1px solid #2de1ff;border-radius:50%;color:#25dbff;background:#002653;box-shadow:0 0 15px #008aff;font-size:25px;display:grid;place-items:center}
.stage-pedestal{position:relative;height:89px;margin-top:-1px;background:linear-gradient(90deg,#00122e,#00419a 3%,#002453 7%,#010f28 28%,#061c3b 70%,#0051b1 97%,#011531);border:1px solid #0365c6;border-top:0;border-radius:0 0 18% 18%;box-shadow:0 15px 22px #0070ff25,inset 0 -10px 15px #0008}
.stage-pedestal:before{content:"";position:absolute;inset:-12px -1px auto;height:27px;border:2px solid #30caff;border-bottom-color:#74f2ff;border-radius:50%;background:radial-gradient(ellipse,#06489e,#051c42 65%,#0068ff);box-shadow:0 0 8px #0696ff,0 3px 16px #036eff,inset 0 -2px 3px #26caff}
.stage-project-info{position:relative;z-index:3;margin-top:-61px;padding:0 8px}
.stage-project-info h2{font-size:clamp(18px,1.65vw,25px);letter-spacing:-.025em;margin:0 0 5px;line-height:1.2;color:#fff}
.stage-project-info>p{font-size:clamp(12px,1.05vw,16px);color:#b9dcf4;margin:0 0 16px;line-height:1.4;min-height:22px}
.stage-project-info .button{padding:8px 23px;min-height:39px;border-color:#00caf5;border-radius:40px;background:#031a33db;color:#3be0ff;font-size:13px;box-shadow:0 3px 16px #0004;justify-content:center;gap:22px}
.stage-project-info .tags{justify-content:center;gap:8px;margin:15px 0 0;flex-wrap:wrap}
.stage-project-info .tags span{padding:5px 9px;background:#063659b5;border:1px solid #168dd160;border-radius:7px;color:#b5dafa;font-size:12px}
.work-stage-facts{border:1px solid #1c75b696;border-radius:13px;background:#031a36b0;backdrop-filter:blur(8px);display:grid;grid-template-columns:repeat(4,1fr) 1.05fr;align-items:center;padding:22px 18px;margin-top:21px}
.work-stage-facts>div{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 12px;border-right:1px solid #238ec469}
.work-stage-facts svg{width:32px;height:32px;flex-shrink:0;color:#00d2f9}
.work-stage-facts strong,.work-stage-facts small{display:block}.work-stage-facts strong{font-size:21px;color:#f5faff}.work-stage-facts small{font-size:13px;color:#b4d8f4;margin-top:3px}.work-stage-facts>p{font-size:11px;line-height:1.65;letter-spacing:.09em;margin:0;padding-left:24px;color:#a9d4f3}
.refine-work{max-width:1100px;margin:8px auto 0;border-top:1px solid #2b648a66;padding-top:12px}.refine-work summary{cursor:pointer;font-size:13px;color:#a1cae5}.refine-work summary .results-status{float:right;font-size:12px}.refine-work .portfolio-tools{margin-top:18px;padding-bottom:12px}.stage-sort{display:block;text-align:right;color:#bad9f1;font-size:12px}.stage-sort select{margin-left:10px;padding:8px;background:#061c36;border:1px solid #256996;border-radius:6px;color:#cce9ff}.stage-swipe-note{display:none}.work-stage>.motion-toggle{right:30px;bottom:5px;font-size:9px}
@media(min-width:1600px){.stage-devices{height:320px}}
@media(max-width:1100px){.stage-grid{gap:16px}.stage-devices{height:230px;margin-inline:5px}.stage-client-brand{height:77px}.stage-computers{height:calc(100% - 77px)}.paired-computers{gap:20px}.platform-link{width:26px;height:26px;font-size:20px;top:25%}.stage-project-info .tags span{font-size:10px;padding:4px 6px}.work-stage-facts{grid-template-columns:repeat(4,1fr)}.work-stage-facts>p{display:none}.work-stage-facts>div:last-of-type{border-right:0}.work-stage-facts strong{font-size:18px}.work-stage-facts small{font-size:11px}.work-stage-facts svg{width:27px;height:27px}.work-stage-facts>div{gap:10px;padding:0 7px}}
@media(max-width:760px){.work-stage{padding-top:32px}.work-stage-content{width:calc(100% - 34px)}.work-stage-heading{margin-bottom:22px}.work-stage-heading h1{font-size:clamp(34px,7vw,49px)}.work-stage-heading .eyebrow{font-size:12px}.work-stage-heading>p:last-child{font-size:16px;max-width:520px;margin:auto}.work-stage-bg{height:780px;width:160%;max-width:none;left:-30%;object-position:center top;mask-image:linear-gradient(#000 70%,transparent)}.stage-swipe-note{display:flex;justify-content:space-between;color:#67d9f6;font-size:9px;letter-spacing:.15em;margin:25px 0 6px}.stage-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,420px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:12px;gap:24px;margin:0 -17px;padding:0 17px 28px;scrollbar-width:thin;scrollbar-color:#1789ce #082346}.stage-project{scroll-snap-align:center}.stage-devices{height:255px;margin:0 12px}.stage-client-brand{height:66px}.stage-computers{height:calc(100% - 66px)}.stage-project-info h2{font-size:23px}.stage-project-info>p{font-size:14px}.stage-project-info .tags span{font-size:11px;padding:5px 8px}.stage-project-info .button{min-height:44px;font-size:14px}.paired-computers{gap:19px;height:calc(100% - 66px);align-items:center;transform:translateY(33px)}.paired-computers .platform-link{top:32%;font-size:18px;width:24px;height:24px}.work-stage-facts{grid-template-columns:1fr 1fr;gap:24px 0;padding:22px 8px}.work-stage-facts>div:nth-child(2){border-right:0}.work-stage-facts>div{justify-content:flex-start;padding-left:14px}.refine-work{margin-top:15px}.refine-work .portfolio-tools{align-items:stretch;flex-direction:column}.refine-work .filter-group{flex-wrap:wrap;overflow:visible;gap:7px}.refine-work .filter-button{font-size:12px;padding:8px 10px}.refine-work .search-label{width:100%}.refine-work .search-label input{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){.stage-grid{scroll-behavior:auto}}
.work-stage-heading h1 em{display:inline-block}
@media(min-width:761px){.stage-devices{height:clamp(260px,23vw,360px)}}
/* Contained service panels: scroll moves the backdrop, never the card contents. */
.section-atmosphere .service-index>article{min-height:442px;padding:22px;gap:40px;overflow:hidden;align-items:center}
.service-index>article>a{min-height:396px;min-width:0;isolation:isolate}
.service-index>article>div{min-width:0;padding:18px 12px 18px 0}
.service-index .real-service-art{inset:11% 8%;transform:none;will-change:auto}
.service-index .concept-hero{inset:5% 2%;transform:none;will-change:auto}
.service-index .concept-hero-main{object-fit:contain;max-height:100%;aspect-ratio:auto}
.service-index .concept-hero>span{bottom:0;max-width:100%;text-align:center;white-space:normal}
.service-index .primary-screen{width:87%}.service-index .secondary-screen{width:52%}
.service-index .button{max-width:100%;white-space:normal;text-align:center}
.services-scene .service-card{min-height:264px}
@media(max-width:960px){.section-atmosphere .service-index>article{gap:24px}.service-index>article>div{padding-right:0}.services-scene .service-card{min-height:248px}}
@media(max-width:640px){.section-atmosphere .service-index>article{min-height:0;padding:20px 16px 27px;gap:16px}.service-index>article>a{min-height:308px}.service-index>article>div{padding:0 4px}.service-index .real-service-art{inset:11% 7%}.service-index .concept-hero{inset:3% 0}.service-index .concept-hero>span{bottom:5%;font-size:8px}.service-index h2{font-size:clamp(28px,7.8vw,33px)}.services-scene .service-card{min-height:270px}.services-scene .service-card p{margin-right:0}.services-scene .service-card h3{overflow-wrap:normal}}
/* About: architectural studio concept, with the existing live copy preserved. */
.about-office-hero{background:#031026;isolation:isolate}
.about-office-background{position:absolute;z-index:-2;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:center center;max-width:none;pointer-events:none}
.about-office-hero:before{z-index:-1;background:linear-gradient(90deg,#010b19d4 0%,#021024ad 32%,#03142b30 61%,transparent 78%);inset:0}
.about-office-hero .hero-inner{display:flex;align-items:center;min-height:680px;position:relative}
.about-office-hero .hero-copy{width:49%;max-width:620px;padding:55px 0;transform:none;will-change:auto}
.about-office-hero h1{font-size:clamp(42px,4.2vw,64px);text-shadow:0 3px 25px #0008}
.about-office-hero .hero-subtitle{max-width:530px;font-size:20px;line-height:1.45;text-shadow:0 2px 12px #000}
.about-office-hero .hero-copy>.eyebrow{max-width:520px;line-height:1.6}
.about-office-hero .about-facts{background:#02172d55;border-radius:10px;padding:17px 12px;backdrop-filter:blur(6px);max-width:510px}
@media(max-width:960px) and (min-width:641px){.about-office-hero .hero-inner{min-height:610px}.about-office-hero .hero-copy{width:58%}.about-office-hero h1{font-size:43px}.about-office-hero .hero-subtitle{font-size:17px}.about-office-background{object-position:62% center}.about-office-hero:before{background:linear-gradient(90deg,#010b19dc,#021024ad 40%,#03142b18 80%)}}
@media(max-width:640px){.about-office-hero .hero-inner{min-height:0;display:block}.about-office-hero .hero-copy{width:100%;max-width:none;padding:35px 0 330px}.about-office-hero h1{font-size:clamp(37px,10vw,48px)}.about-office-hero .hero-subtitle{font-size:17px;line-height:1.5}.about-office-hero .about-facts{padding:16px 8px;margin-bottom:15px}.about-office-background{height:450px;top:auto;bottom:-35px;object-position:78% center;mask-image:linear-gradient(transparent,#000 30%);-webkit-mask-image:linear-gradient(transparent,#000 30%)}.about-office-hero:before{background:linear-gradient(#031026,#031026b0 48%,#03102600 72%)}.about-office-hero>.motion-toggle{bottom:9px}}

/* Keep the desktop content and artwork at smaller screen sizes. */
@media (max-width: 1100px) {
  .work-stage-facts > p {
    display: block;
    grid-column: 1 / -1;
    padding: 18px 12px 0;
    margin-top: 18px;
    border-top: 1px solid #238ec469;
    text-align: center;
    font-size: 12px;
  }
}
@media (max-width: 960px) {
  .stats-inner > p {
    display: block;
    flex: 1 1 100%;
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid #238ec469;
    text-align: center;
    font-size: 12px;
  }
  .scroll-note { display: flex; justify-content: center; }
  .service-overview-hero { display: flex; flex-direction: column; min-height: 0; }
  .service-overview-copy { width: 100%; padding-right: 0; }
  .orbital-universe {
    width: 100%;
    max-width: 680px;
    max-height: none;
    margin: 12px auto;
    aspect-ratio: 1;
  }
  .orbital-universe .discipline { width: 44%; }
  .orbital-universe .discipline > span {
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    gap: 5px;
    min-height: 44px;
    padding: 5px 3px 8px;
  }
  .orbital-universe .discipline svg { width: 14px; height: 14px; }
  .orbital-universe .discipline b { font-size: 14px; }
}
@media (max-width: 760px) {
  .stage-swipe-note { display: none; }
  .stage-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    gap: 46px;
    margin: 0;
    padding: 0 0 28px;
  }
  .stage-grid .stage-project { width: 100%; max-width: 520px; justify-self: center; }
  .work-stage-facts > p { margin: 0; }
}