:root {
  --ink: #100a18;
  --ink-2: #171020;
  --paper: #f4f1f6;
  --paper-2: #e7e1ea;
  --purple: #4a1f59;
  --purple-2: #713987;
  --teal: #0f6675;
  --cyan: #32c6d7;
  --white: #fff;
  --muted: #9c93a3;
  --line: rgba(255,255,255,.14);
  --ease: cubic-bezier(.22,1,.36,1);
  --shell: min(1320px, calc(100vw - 80px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
  cursor: none;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--purple); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { cursor: none; }
img { max-width: 100%; display: block; }
.shell { width: var(--shell); margin: 0 auto; position: relative; }
.section-pad { padding: 150px 0; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.loader { position: fixed; inset: 0; z-index: 10000; background: var(--ink); display: grid; place-items: center; transition: transform 1s var(--ease) .1s; }
.loader.done { transform: translateY(-100%); }
.loader-mark { display: flex; gap: 7px; color: #fff; font: 800 clamp(30px,6vw,70px)/1 Manrope; letter-spacing: -.08em; }
.loader-mark span { opacity: 0; transform: translateY(30px); animation: loaderLetter .7s var(--ease) forwards; }
.loader-mark span:nth-child(2) { animation-delay: .12s; color: #a866b6; }
.loader-mark span:nth-child(3) { animation-delay: .24s; color: var(--cyan); }
.loader-line { position: absolute; width: 180px; height: 1px; background: #2c2532; transform: translateY(70px); overflow: hidden; }
.loader-line i { display:block; height:100%; width:100%; background: linear-gradient(90deg,var(--purple-2),var(--cyan)); transform: translateX(-100%); animation: loadLine 1.2s var(--ease) forwards .1s; }
@keyframes loaderLetter { to { opacity: 1; transform: none; } }
@keyframes loadLine { to { transform: none; } }

.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 6px; height: 6px; background: var(--cyan); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(50,198,215,.55); transition: width .25s, height .25s, background .25s; }
.cursor-ring.hover { width: 54px; height: 54px; background: rgba(50,198,215,.09); }

.site-header { position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 96px; padding: 0 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); transition: background .4s, height .4s, backdrop-filter .4s; color: white; }
.site-header.scrolled { height: 76px; background: rgba(16,10,24,.78); backdrop-filter: blur(20px); }
.brand { width: 132px; filter: brightness(0) invert(1); }
.desktop-nav { display:flex; gap:34px; font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:#d8d0dc; }
.desktop-nav a { position:relative; padding:12px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; bottom:5px; height:1px; width:100%; background:var(--cyan); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.desktop-nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.header-cta { justify-self:end; display:flex; align-items:center; gap:14px; border:1px solid rgba(255,255,255,.28); padding:13px 17px 13px 20px; border-radius:999px; text-transform:uppercase; font-size:11px; letter-spacing:.12em; transition:background .3s,border-color .3s; }
.header-cta b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; color:var(--ink); font-size:15px; }
.header-cta:hover { background:#fff; color:var(--ink); border-color:#fff; }
.header-cta:hover b { background:var(--ink); color:#fff; }
.menu-toggle { display:none; justify-self:end; width:46px; height:46px; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:transparent; position:relative; z-index:3; }
.menu-toggle span { position:absolute; width:18px; height:1px; background:#fff; left:13px; transition:.35s var(--ease); }
.menu-toggle span:first-child { top:19px; }
.menu-toggle span:last-child { top:26px; }
.menu-open .menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position:fixed; z-index:190; inset:0; background:var(--ink); color:#fff; transform:translateY(-100%); transition:transform .8s var(--ease); }
.menu-open .mobile-menu { transform:none; }
.mobile-menu-inner { height:100%; display:flex; flex-direction:column; justify-content:center; padding:100px 9vw 40px; gap:22px; }
.mobile-menu a { font:700 clamp(36px,9vw,80px)/1 Manrope; letter-spacing:-.055em; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:18px; }

.hero { min-height: 100svh; position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 70% 35%,#2b1738 0,#160d21 35%,#0c0812 70%); }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.75; }
.hero-grid { position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px); background-size:90px 90px; mask-image:radial-gradient(circle at 58% 48%,#000 0,transparent 65%); transform:perspective(900px) rotateX(64deg) scale(1.65) translateY(13%); transform-origin:center bottom; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(25px); opacity:.65; }
.hero-orb-a { width:43vw; height:43vw; right:-12vw; top:-16vw; background:radial-gradient(circle,#155968 0,transparent 68%); animation:floatOrb 10s ease-in-out infinite; }
.hero-orb-b { width:37vw; height:37vw; left:-18vw; bottom:-18vw; background:radial-gradient(circle,#522a66 0,transparent 68%); animation:floatOrb 12s ease-in-out infinite reverse; }
@keyframes floatOrb { 50%{ transform:translate(30px,25px) scale(1.07); } }
.hero-content { z-index:2; padding-top:165px; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { display:flex; align-items:center; gap:12px; color:#b9afc1; text-transform:uppercase; letter-spacing:.22em; font-size:10px; margin-bottom:28px; }
.eyebrow span { width:34px; height:1px; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.hero-title { margin:0; font:800 clamp(58px,8.8vw,154px)/.88 Manrope; letter-spacing:-.075em; max-width:1150px; }
.hero-title .line { display:block; overflow:hidden; padding-bottom:.08em; }
.hero-title .line > span { display:block; transform:translateY(115%); animation:heroLine 1.25s var(--ease) forwards 1.1s; }
.hero-title .line:nth-child(2)>span { animation-delay:1.22s; }
.hero-title .accent-line { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.72); }
.hero-title .accent-line span { background:linear-gradient(90deg,#fff 0,#c98bd5 47%,#69dbe7 92%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-stroke:0; }
@keyframes heroLine { to { transform:none; } }
.hero-lower { margin-top:42px; display:flex; align-items:flex-end; gap:54px; }
.hero-lower p { width:min(500px,54vw); color:#bfb7c5; font-size:15px; line-height:1.75; margin:0; }
.round-link { width:88px; height:88px; border:1px solid rgba(255,255,255,.35); border-radius:50%; display:grid; place-items:center; font-size:10px; text-transform:uppercase; letter-spacing:.12em; position:relative; overflow:hidden; }
.round-link::before { content:""; position:absolute; inset:0; border-radius:50%; background:var(--cyan); transform:scale(0); transition:transform .45s var(--ease); }
.round-link span,.round-link b { position:relative; z-index:1; }
.round-link b { position:absolute; bottom:14px; font-size:16px; }
.round-link:hover::before { transform:scale(1); }
.round-link:hover { color:var(--ink); border-color:var(--cyan); }
.hero-console { position:absolute; right:5vw; bottom:8vh; width:330px; min-height:190px; background:rgba(11,7,16,.54); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.16); border-radius:4px; z-index:2; box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; }
.console-top { height:35px; display:flex; align-items:center; padding:0 14px; gap:6px; border-bottom:1px solid rgba(255,255,255,.1); color:#83798b; font-size:8px; letter-spacing:.17em; }
.console-top span { margin-right:auto; }
.console-top i { width:5px; height:5px; border-radius:50%; background:#4b4451; }
.console-top i:last-child { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.console-body { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; padding:22px; }
.console-ring { width:110px; height:110px; border:1px solid rgba(50,198,215,.55); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.console-ring::before,.console-ring::after { content:""; position:absolute; border-radius:50%; inset:8px; border:1px dashed rgba(255,255,255,.18); animation:spin 12s linear infinite; }
.console-ring::after { inset:-6px; border-style:solid; border-color:transparent transparent var(--purple-2) transparent; animation-duration:7s; animation-direction:reverse; }
.console-ring b { font:700 25px Manrope; }
.console-ring small { font-size:7px; color:#8f8496; text-transform:uppercase; margin-top:4px; }
.console-data { display:flex; flex-direction:column; gap:15px; font-size:7px; letter-spacing:.12em; color:#9a909f; }
.console-data span { border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:8px; }
.console-data i { font-style:normal; color:var(--cyan); margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
.scroll-note { position:absolute; z-index:2; left:42px; bottom:30px; display:flex; align-items:center; gap:13px; color:#7f7587; font-size:8px; text-transform:uppercase; letter-spacing:.22em; writing-mode:vertical-rl; }
.scroll-note i { width:1px; height:50px; background:linear-gradient(#706777,transparent); position:relative; overflow:hidden; }
.scroll-note i::after { content:""; position:absolute; left:0; top:-100%; width:1px; height:60%; background:var(--cyan); animation:scrollLine 2s infinite; }
@keyframes scrollLine { to { top:130%; } }

.section-label { display:flex; align-items:center; gap:13px; text-transform:uppercase; letter-spacing:.18em; font-size:9px; color:#716777; }
.section-label span { color:var(--purple-2); font-weight:700; }
.section-label.light { color:#9d92a3; }
.section-label.light span { color:var(--cyan); }
.statement { background:var(--paper); }
.statement-grid { display:grid; grid-template-columns:250px 1fr; gap:40px; }
.mega-copy { margin:0; font:600 clamp(40px,5.6vw,85px)/1.06 Manrope; letter-spacing:-.058em; max-width:1050px; }
.statement-meta { display:grid; grid-template-columns:minmax(280px,540px) 1fr; gap:60px; margin-top:58px; align-items:end; }
.statement-meta p { margin:0; font-size:16px; line-height:1.75; color:#655d69; }
.meta-chip { justify-self:end; display:flex; align-items:center; gap:10px; border:1px solid #d3cad7; border-radius:999px; padding:13px 18px; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.meta-chip span { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px rgba(15,102,117,.7); }

.metrics { background:var(--ink); color:#fff; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.metric { padding:65px 36px; border-right:1px solid rgba(255,255,255,.1); min-height:210px; }
.metric:first-child { border-left:1px solid rgba(255,255,255,.1); }
.metric strong { font:700 clamp(50px,6vw,86px)/1 Manrope; letter-spacing:-.07em; }
.metric sup { color:var(--cyan); font-size:16px; margin-left:5px; }
.metric span { display:block; margin-top:18px; color:#8f8594; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }

.capabilities { position:relative; overflow:hidden; }
.section-head { display:grid; grid-template-columns:250px 1fr 310px; gap:40px; align-items:end; margin-bottom:85px; }
.section-head h2,.process h2,.contact h2 { margin:0; font:700 clamp(42px,5.2vw,76px)/1.05 Manrope; letter-spacing:-.055em; }
.section-head h2 em,.process h2 em,.contact h2 em { color:var(--purple-2); font-style:normal; }
.section-head > p { color:#776f7c; margin:0; line-height:1.7; font-size:14px; }
.service-list { border-top:1px solid #cfc7d2; position:relative; z-index:2; }
.service-row { display:grid; grid-template-columns:90px minmax(260px,1.25fr) 1.25fr 50px; align-items:center; gap:26px; padding:34px 12px; border-bottom:1px solid #cfc7d2; transition:padding .45s var(--ease),background .45s,color .45s; }
.service-row:hover,.service-row.active { background:var(--ink); color:#fff; padding-left:28px; padding-right:24px; }
.service-index { font:600 11px Manrope; color:#846e8b; }
.service-title h3 { font:600 clamp(22px,2.4vw,36px)/1.1 Manrope; letter-spacing:-.035em; margin:0 0 5px; }
.service-title span { font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:#8c828f; }
.service-row p { margin:0; font-size:13px; line-height:1.65; color:#776f7b; transition:color .3s; }
.service-row:hover p,.service-row.active p { color:#a79eab; }
.service-arrow { width:38px; height:38px; border:1px solid #bdb3c2; border-radius:50%; display:grid; place-items:center; transition:.3s; }
.service-row:hover .service-arrow,.service-row.active .service-arrow { background:var(--cyan); border-color:var(--cyan); color:var(--ink); transform:rotate(45deg); }
.service-glow { position:absolute; width:420px; height:420px; right:-220px; top:40%; background:radial-gradient(circle,rgba(89,35,105,.16),transparent 68%); pointer-events:none; }

.project-stage { background:#0b0711; color:#fff; overflow:hidden; padding-bottom:120px; }
.project-intro { display:grid; grid-template-columns:250px 1fr; gap:40px; margin-bottom:80px; }
.project-intro h2 { margin:0; font:700 clamp(44px,6.5vw,92px)/.98 Manrope; letter-spacing:-.065em; }
.project-scroll-wrap { overflow-x:auto; scrollbar-width:none; padding:0 max(40px,calc((100vw - 1320px)/2)); }
.project-scroll-wrap::-webkit-scrollbar { display:none; }
.project-track { width:max-content; display:flex; gap:26px; padding-right:70px; }
.project-card { width:min(78vw,580px); flex:none; border:1px solid rgba(255,255,255,.13); background:#120c1a; overflow:hidden; transition:transform .5s var(--ease),border-color .4s; }
.project-card:hover { transform:translateY(-10px); border-color:rgba(50,198,215,.5); }
.project-visual { height:440px; position:relative; overflow:hidden; background:linear-gradient(145deg,#1d1228,#0c0812); }
.project-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(7,4,10,.68)); }
.visual-tag { position:absolute; z-index:3; left:22px; top:22px; font-size:8px; letter-spacing:.18em; color:#afa5b5; border:1px solid rgba(255,255,255,.18); padding:9px 11px; }
.project-copy { padding:34px 34px 38px; }
.project-copy > span { color:var(--cyan); text-transform:uppercase; letter-spacing:.17em; font-size:9px; }
.project-copy h3 { margin:14px 0 18px; font:600 clamp(25px,2.7vw,40px)/1.1 Manrope; letter-spacing:-.04em; }
.project-copy p { color:#988e9f; line-height:1.7; font-size:13px; margin:0; max-width:460px; }
.plant-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:42px 42px; transform:perspective(500px) rotateX(61deg) scale(1.4) translateY(30%); }
.plant-tank { position:absolute; bottom:80px; width:105px; height:160px; border:1px solid rgba(105,219,231,.68); border-radius:52px 52px 8px 8px; background:linear-gradient(90deg,rgba(50,198,215,.05),rgba(50,198,215,.24),rgba(50,198,215,.04)); box-shadow:0 0 60px rgba(50,198,215,.08); }
.plant-tank::before { content:""; position:absolute; left:12px; right:12px; top:22px; height:1px; background:rgba(255,255,255,.25); box-shadow:0 35px rgba(255,255,255,.12),0 70px rgba(255,255,255,.12); }
.tank-a { left:110px; transform:scale(.82); }
.tank-b { left:235px; height:220px; }
.tank-c { left:375px; transform:scale(.68); bottom:65px; }
.plant-pipe { position:absolute; border:3px solid #744a82; border-left:0; border-bottom:0; }
.pipe-a { width:170px; height:90px; left:180px; bottom:115px; }
.pipe-b { width:90px; height:130px; left:340px; bottom:110px; border-color:var(--teal); }
.mep-core { position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.3); left:205px; top:135px; transform:rotate(45deg); background:linear-gradient(135deg,rgba(79,34,92,.7),rgba(12,103,118,.35)); box-shadow:0 0 90px rgba(72,33,84,.45); }
.mep-core::before { content:"GXE"; position:absolute; transform:rotate(-45deg); color:#fff; font:800 38px Manrope; left:43px; top:58px; }
.mep-line { position:absolute; height:2px; background:linear-gradient(90deg,transparent,var(--cyan)); transform-origin:left; }
.mep-line::after { content:""; position:absolute; right:0; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }
.l1 { width:260px; left:20px; top:140px; transform:rotate(10deg); }
.l2 { width:270px; left:310px; top:280px; transform:rotate(-18deg); }
.l3 { width:220px; left:50px; top:345px; transform:rotate(-22deg); }
.mep-node { position:absolute; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.n1{width:70px;height:70px;left:35px;top:240px}.n2{width:34px;height:34px;right:50px;top:105px}.n3{width:55px;height:55px;right:100px;bottom:45px}
.digital-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(50,198,215,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(50,198,215,.08) 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(to bottom,#000,transparent); }
.digital-hud { position:absolute; border:1px solid rgba(50,198,215,.35); background:rgba(7,22,27,.55); backdrop-filter:blur(8px); }
.hud-a { width:210px; height:125px; left:70px; top:95px; padding:22px; }
.hud-a i { display:block; width:34px; height:34px; border:5px solid var(--cyan); border-left-color:transparent; border-radius:50%; animation:spin 3s linear infinite; }
.hud-a b { position:absolute; right:18px; top:25px; font:700 28px Manrope; }
.hud-a small { position:absolute; right:18px; top:62px; color:#8fa7aa; text-transform:uppercase; letter-spacing:.1em; font-size:7px; }
.hud-b { width:260px; height:95px; right:45px; bottom:70px; display:flex; align-items:flex-end; gap:13px; padding:17px; }
.hud-b span { width:30px; background:linear-gradient(var(--cyan),var(--purple-2)); animation:bars 2.6s ease-in-out infinite; }
.hud-b span:nth-child(1){height:35%}.hud-b span:nth-child(2){height:68%;animation-delay:.2s}.hud-b span:nth-child(3){height:47%;animation-delay:.4s}.hud-b span:nth-child(4){height:82%;animation-delay:.6s}
@keyframes bars { 50%{ transform:scaleY(.55); opacity:.55; } }
.digital-orbit { position:absolute; width:260px; height:260px; border:1px dashed rgba(169,100,184,.55); border-radius:50%; left:180px; top:60px; animation:spin 20s linear infinite; }
.digital-orbit::before,.digital-orbit::after { content:""; position:absolute; border-radius:50%; background:#aa69b9; box-shadow:0 0 18px #aa69b9; }
.digital-orbit::before{width:8px;height:8px;left:25px;top:35px}.digital-orbit::after{width:5px;height:5px;right:5px;bottom:90px;background:var(--cyan)}
.steel-floor { position:absolute; width:520px; height:220px; left:20px; bottom:-80px; border:1px solid rgba(255,255,255,.18); transform:perspective(520px) rotateX(65deg); background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:45px 45px; }
.steel-frame { position:absolute; width:135px; height:245px; bottom:70px; border:8px solid #55305f; border-bottom:0; transform:skewY(-5deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.steel-frame::before,.steel-frame::after { content:""; position:absolute; width:8px; height:265px; background:#0f6775; left:57px; top:-18px; transform:rotate(28deg); }
.steel-frame::after { transform:rotate(-28deg); }
.sf1{left:75px}.sf2{left:220px;transform:scale(.86) skewY(-5deg);bottom:55px}.sf3{left:365px;transform:scale(.72) skewY(-5deg);bottom:40px}

.process { background:var(--paper); }
.process-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:100px; align-items:start; }
.process-sticky { position:sticky; top:130px; }
.process h2 { margin-top:30px; }
.process-sticky > p { color:#726979; line-height:1.75; max-width:480px; }
.process-orbit { width:260px; height:260px; margin-top:55px; border:1px solid #c6bccb; border-radius:50%; display:grid; place-items:center; position:relative; }
.process-orbit::before { content:""; position:absolute; inset:28px; border:1px dashed #b6aaba; border-radius:50%; animation:spin 15s linear infinite; }
.process-orbit span { font:800 45px Manrope; color:var(--purple); letter-spacing:-.08em; }
.process-orbit i { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--purple-2); box-shadow:0 0 18px rgba(113,57,135,.5); }
.process-orbit i:nth-child(2){top:23px;left:74px}.process-orbit i:nth-child(3){right:-5px;top:126px;background:var(--cyan)}.process-orbit i:nth-child(4){bottom:20px;left:54px;background:var(--teal)}
.process-steps { border-top:1px solid #cfc7d2; }
.process-step { display:grid; grid-template-columns:80px 1fr; gap:24px; padding:45px 10px; border-bottom:1px solid #cfc7d2; }
.step-no { font:600 11px Manrope; color:var(--purple-2); padding-top:9px; }
.process-step h3 { margin:0 0 12px; font:600 31px Manrope; letter-spacing:-.035em; }
.process-step p { margin:0; color:#716979; line-height:1.7; font-size:14px; max-width:510px; }

.manifesto { min-height:760px; display:flex; align-items:center; position:relative; overflow:hidden; background:#100a18; color:#fff; }
.manifesto-bg { position:absolute; inset:-20%; background:radial-gradient(circle at 20% 50%,rgba(93,43,107,.45),transparent 35%),radial-gradient(circle at 78% 35%,rgba(14,108,123,.32),transparent 38%); animation:manifestMove 9s ease-in-out infinite alternate; }
@keyframes manifestMove { to{transform:translate(4%,3%) scale(1.08)} }
.manifesto-inner { z-index:2; }
.manifesto-kicker { color:#8e8494; letter-spacing:.24em; font-size:9px; margin-bottom:28px; }
.manifesto h2 { margin:0; font:700 clamp(48px,7.5vw,112px)/.98 Manrope; letter-spacing:-.068em; }
.manifesto h2.outline { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.48); }
.marquee { position:absolute; bottom:0; left:0; right:0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); display:flex; overflow:hidden; padding:18px 0; color:#6e6474; font:600 10px Manrope; letter-spacing:.28em; white-space:nowrap; }
.marquee div { animation:marquee 24s linear infinite; }
@keyframes marquee { to { transform:translateX(-100%); } }

.contact { background:#0b0711; color:#fff; position:relative; overflow:hidden; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:110px; }
.contact h2 { margin-top:30px; }
.contact h2 em { color:var(--cyan); }
.contact-grid > div > p { color:#968c9d; line-height:1.75; max-width:530px; margin-top:28px; }
.contact-form { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.18); }
.contact-form label { padding:23px 0 18px; border-bottom:1px solid rgba(255,255,255,.18); display:grid; grid-template-columns:125px 1fr; gap:20px; }
.contact-form label span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:#746a7b; padding-top:7px; }
.contact-form input,.contact-form textarea { width:100%; background:transparent; border:0; outline:0; resize:none; color:#fff; font-size:17px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#5f5664; }
.submit-btn { margin-top:25px; border:0; background:linear-gradient(100deg,var(--purple-2),var(--teal)); color:#fff; min-height:68px; padding:0 18px 0 26px; display:flex; align-items:center; justify-content:space-between; text-transform:uppercase; letter-spacing:.13em; font-size:10px; }
.submit-btn b { width:38px; height:38px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:17px; transition:transform .35s var(--ease); }
.submit-btn:hover b { transform:rotate(45deg); }
.contact-form small { color:#574e5d; line-height:1.5; margin-top:13px; font-size:9px; }
.contact-rings { position:absolute; left:-170px; bottom:-280px; width:620px; height:620px; border:1px solid rgba(255,255,255,.06); border-radius:50%; }
.contact-rings i { position:absolute; inset:90px; border:1px solid rgba(255,255,255,.05); border-radius:50%; }
.contact-rings i:nth-child(2){inset:180px}.contact-rings i:nth-child(3){inset:260px;background:rgba(77,33,89,.25)}

footer { background:#08050c; color:#fff; border-top:1px solid rgba(255,255,255,.1); }
.footer-top { min-height:180px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.footer-brand { width:135px; filter:brightness(0) invert(1); }
.footer-tagline { text-align:center; color:#766d7c; font:600 13px Manrope; letter-spacing:.08em; }
.footer-up { justify-self:end; display:flex; align-items:center; gap:14px; font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:#92889a; }
.footer-up b { width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:grid; place-items:center; color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:22px 0 30px; border-top:1px solid rgba(255,255,255,.08); color:#4f4754; text-transform:uppercase; letter-spacing:.12em; font-size:8px; }

.reveal,.reveal-up { opacity:0; }
.reveal-up { transform:translateY(38px); }
.reveal.is-visible { opacity:1; transition:opacity .9s var(--ease); }
.reveal-up.is-visible { opacity:1; transform:none; transition:opacity .9s var(--ease),transform .9s var(--ease); }
.delay-1 { transition-delay:.12s !important; }
.delay-2 { transition-delay:.22s !important; }
.delay-3 { transition-delay:.32s !important; }
.split-text .word { display:inline-block; overflow:hidden; vertical-align:top; margin-right:.22em; }
.split-text .word i { display:inline-block; font-style:normal; transform:translateY(110%); transition:transform 1s var(--ease); }
.split-text.is-visible .word i { transform:none; }

@media (max-width: 1100px) {
  :root { --shell:min(100% - 48px,1050px); }
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto auto; gap:14px; padding:0 24px; }
  .menu-toggle { display:block; }
  .hero-console { display:none; }
  .hero-lower p { width:min(620px,70vw); }
  .statement-grid,.project-intro { grid-template-columns:180px 1fr; }
  .section-head { grid-template-columns:180px 1fr; }
  .section-head > p { grid-column:2; max-width:530px; }
  .service-row { grid-template-columns:65px minmax(240px,1fr) 1fr 42px; }
  .process-grid { gap:55px; }
  .contact-grid { gap:60px; }
}

@media (max-width: 760px) {
  body,button,a { cursor:auto; }
  .cursor-dot,.cursor-ring { display:none; }
  :root { --shell:calc(100% - 32px); }
  .section-pad { padding:95px 0; }
  .site-header { height:76px; padding:0 16px; }
  .brand { width:105px; }
  .header-cta { display:none; }
  .hero-content { padding-top:110px; justify-content:center; }
  .hero-title { font-size:clamp(49px,15vw,78px); }
  .hero-title .line { padding-bottom:.13em; }
  .hero-lower { margin-top:30px; align-items:center; gap:22px; }
  .hero-lower p { width:auto; font-size:13px; }
  .round-link { flex:none; width:70px; height:70px; }
  .scroll-note { display:none; }
  .eyebrow { font-size:8px; }
  .statement-grid,.project-intro,.section-head,.process-grid,.contact-grid { grid-template-columns:1fr; gap:34px; }
  .mega-copy { font-size:clamp(35px,11vw,56px); }
  .statement-meta { grid-template-columns:1fr; gap:25px; margin-top:38px; }
  .meta-chip { justify-self:start; }
  .metrics-grid { grid-template-columns:1fr 1fr; }
  .metric { min-height:160px; padding:38px 22px; }
  .metric:nth-child(3) { border-left:1px solid rgba(255,255,255,.1); }
  .section-head { margin-bottom:55px; }
  .section-head h2,.process h2,.contact h2 { font-size:clamp(39px,12vw,62px); }
  .section-head > p { grid-column:auto; }
  .service-row { grid-template-columns:45px 1fr 40px; gap:12px; padding:25px 6px; }
  .service-row p { grid-column:2/4; padding-right:10px; }
  .service-row:hover,.service-row.active { padding-left:14px; padding-right:10px; }
  .project-intro h2 { font-size:clamp(42px,13vw,69px); }
  .project-card { width:88vw; }
  .project-visual { height:330px; }
  .project-copy { padding:26px 24px 30px; }
  .plant-tank { transform:scale(.72); transform-origin:bottom; }
  .tank-a { left:55px; }.tank-b{left:155px}.tank-c{left:275px}
  .mep-core { left:95px; top:95px; transform:rotate(45deg) scale(.82); }
  .project-scroll-wrap { padding-left:16px; }
  .process-sticky { position:relative; top:auto; }
  .process-orbit { width:200px; height:200px; }
  .process-steps { margin-top:30px; }
  .process-step { grid-template-columns:48px 1fr; padding:34px 4px; }
  .manifesto { min-height:620px; }
  .contact-form label { grid-template-columns:1fr; gap:8px; }
  .footer-top { grid-template-columns:1fr auto; min-height:145px; }
  .footer-tagline { display:none; }
  .footer-bottom { flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* =========================================================
   GXE ACTUAL LOGO LOADER
   ========================================================= */

.loader-logo {
  position: relative;
  width: min(440px, 72vw);
  aspect-ratio: 1038 / 281;
}

.loader-logo-piece {
  position: absolute;
  inset: 0;
  background: url("assets/gxe-logo.png") center / contain no-repeat;
  opacity: 0;
  filter: blur(10px);
  animation: gxeLogoEnter .85s var(--ease) forwards;
}

.loader-g {
  clip-path: inset(0 65% 0 0);
  transform: translateX(-70px);
  animation-delay: .12s;
}

.loader-x {
  clip-path: inset(0 32% 0 31%);
  transform: translateY(-55px) scale(.92);
  animation-delay: .35s;
}

.loader-e {
  clip-path: inset(0 0 0 66%);
  transform: translateX(70px);
  animation-delay: .58s;
}

@keyframes gxeLogoEnter {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(0) scale(1);
  }
}

.loader-line {
  transform: translateY(95px);
}


.brand,
.footer-brand {
  filter: none;
}


/* =========================================================
   GXE PREMIUM ADDITIONAL SECTIONS
   ========================================================= */

.gxe-feature-band,
.gxe-projects,
.gxe-careers,
.gxe-location,
.gxe-footer {
  background: #0b0711;
  color: #fff;
}

/* FEATURE CARDS */

.gxe-feature-band {
  padding-top: 90px;
  padding-bottom: 90px;
}

.gxe-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.gxe-feature-card {
  min-height: 330px;
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: center;
  gap: 28px;
  padding: 38px;
  border: 1px solid rgba(173, 117, 196, .32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 50%, rgba(78, 38, 107, .20), transparent 42%),
    linear-gradient(145deg, rgba(22, 15, 32, .96), rgba(9, 12, 24, .96));
  overflow: hidden;
  transition:
    transform .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease);
}

.gxe-feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(50, 198, 215, .48);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .3);
}

.gxe-logo-orbit {
  width: min(220px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  margin: auto;
}

.gxe-logo-orbit::before,
.gxe-logo-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.gxe-logo-orbit::before {
  inset: 7%;
  border: 1px solid rgba(255, 255, 255, .24);
}

.gxe-logo-orbit::after {
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, .14);
}

.orbit-blue {
  border: 1px solid rgba(50, 198, 215, .62);
  box-shadow:
    inset 0 0 35px rgba(50, 198, 215, .1),
    0 0 45px rgba(50, 198, 215, .12);
}

.orbit-purple {
  border: 1px solid rgba(171, 79, 218, .75);
  box-shadow:
    inset 0 0 38px rgba(154, 62, 204, .16),
    0 0 55px rgba(142, 53, 190, .17);
}

.gxe-logo-orbit img {
  position: relative;
  z-index: 3;
  width: 64%;
}

.orbit-line {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  animation: spin 11s linear infinite;
}

.orbit-line-one {
  inset: -5%;
  border-top-color: var(--cyan);
  border-right-color: rgba(50, 198, 215, .18);
}

.orbit-line-two {
  inset: 10%;
  border-bottom-color: var(--purple-2);
  animation-direction: reverse;
  animation-duration: 8s;
}

.gxe-feature-copy h2 {
  margin: 0;
  max-width: 420px;
  font: 600 clamp(27px, 3vw, 44px) / 1.05 Manrope;
  letter-spacing: -.045em;
}

.gxe-feature-copy p {
  max-width: 390px;
  margin: 22px 0;
  color: #aaa1b0;
  font-size: 14px;
  line-height: 1.7;
}

.gxe-feature-copy a,
.gxe-text-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #c8a2d4;
  border-bottom: 1px solid rgba(200, 162, 212, .4);
  padding-bottom: 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.gxe-feature-copy a span,
.gxe-text-link span {
  color: var(--cyan);
}

/* PROJECT SUMMARY */

.gxe-projects {
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gxe-projects-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 52px;
  align-items: end;
}

.gxe-projects-intro h2 {
  margin: 28px 0 22px;
  font: 600 clamp(35px, 4vw, 58px) / 1.02 Manrope;
  letter-spacing: -.05em;
}

.gxe-projects-intro p {
  color: #978d9d;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.gxe-project-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.gxe-project-images figure {
  margin: 0;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  overflow: hidden;
  background: #171020;
}

.gxe-project-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82);
  transition:
    transform .7s var(--ease),
    filter .5s;
}

.gxe-project-images figure:hover img {
  transform: scale(1.07);
  filter: saturate(1.05);
}

.gxe-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.gxe-stat {
  display: flex;
  gap: 17px;
  align-items: center;
  min-height: 125px;
  padding: 22px 28px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.gxe-stat:first-child {
  border-left: 1px solid rgba(255, 255, 255, .1);
}

.gxe-stat-mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(169, 100, 184, .7);
  border-radius: 50%;
  color: #c48dd0;
  font-size: 8px;
}

.gxe-stat strong {
  font: 600 38px / 1 Manrope;
  letter-spacing: -.055em;
}

.gxe-stat sup {
  color: var(--cyan);
  font-size: 12px;
}

.gxe-stat p {
  margin: 9px 0 0;
  color: #817789;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* CAREERS */

.gxe-careers {
  padding-top: 100px;
  padding-bottom: 100px;
}

.gxe-careers-card {
  min-height: 430px;
  display: grid;
  grid-template-columns: .9fr 1.35fr .85fr;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: #120c1a;
  overflow: hidden;
}

.gxe-careers-copy {
  padding: 55px 42px;
}

.gxe-careers-copy h2 {
  margin: 30px 0 24px;
  font: 600 clamp(40px, 5vw, 68px) / 1 Manrope;
  letter-spacing: -.055em;
}

.gxe-careers-copy p {
  max-width: 400px;
  color: #a097a5;
  font-size: 14px;
  line-height: 1.7;
}

.gxe-careers-photo {
  min-height: 430px;
  background:
    linear-gradient(90deg, #120c1a 0%, transparent 28%, transparent 72%, #120c1a 100%),
    linear-gradient(0deg, rgba(21, 8, 28, .5), transparent),
    url("assets/careers-team.jpg") center / cover no-repeat;
}

.gxe-careers-action {
  align-self: center;
  margin: 28px;
  padding: 36px 30px;
  border: 1px solid rgba(197, 126, 218, .35);
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 20%, rgba(50, 198, 215, .14), transparent 40%),
    linear-gradient(135deg, rgba(75, 32, 92, .72), rgba(25, 17, 43, .92));
}

.career-icon {
  color: #c782db;
  font-size: 48px;
}

.gxe-careers-action p {
  color: #c0b8c6;
  line-height: 1.65;
  font-size: 13px;
  margin: 20px 0 28px;
}

.gxe-gradient-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 22px;
  border-radius: 5px;
  background: linear-gradient(100deg, var(--purple-2), var(--teal));
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* LOCATION */

.gxe-location {
  padding: 0 0 75px;
}

.gxe-location-card {
  display: grid;
  grid-template-columns: 34% 66%;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: #120c1a;
}

.gxe-location-copy {
  padding: 44px;
}

.gxe-location-copy h2 {
  margin: 28px 0 22px;
  font: 600 clamp(34px, 4vw, 55px) / 1 Manrope;
  letter-spacing: -.045em;
}

.gxe-location-copy h3 {
  margin: 0 0 14px;
  font: 500 21px Manrope;
}

.gxe-location-copy p {
  color: #9c93a3;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 25px;
}

.gxe-map {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background: #241336;
}

.gxe-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter:
    grayscale(1)
    invert(.92)
    hue-rotate(220deg)
    saturate(2.1)
    contrast(1.05);
}

.gxe-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #120c1a 0%, rgba(18, 12, 26, .15) 25%, transparent),
    rgba(69, 27, 93, .24);
  mix-blend-mode: color;
}

.gxe-map-pin {
  position: absolute;
  left: 54%;
  top: 40%;
  z-index: 2;
  display: grid;
  grid-template-columns: 24px auto;
  column-gap: 12px;
  color: #fff;
}

.gxe-map-pin span {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  border: 6px solid #c883e0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 24px rgba(200, 131, 224, .75);
}

.gxe-map-pin strong {
  font: 600 14px Manrope;
}

.gxe-map-pin small {
  color: #bbb1c2;
  font-size: 10px;
}

/* EXPANDED FOOTER */

.gxe-footer {
  padding-top: 65px;
  background: #08050c;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.gxe-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 46px;
  padding-bottom: 55px;
}

.gxe-footer-logo {
  display: block;
  width: 175px;
  margin-bottom: 24px;
}

.gxe-footer-about p {
  max-width: 310px;
  color: #716877;
  font-size: 11px;
  line-height: 1.7;
}

.gxe-socials {
  display: flex;
  gap: 9px;
  margin-top: 25px;
}

.gxe-socials a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  color: #c3bac8;
  font-size: 10px;
}

.gxe-footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.gxe-footer-column h3 {
  margin: 4px 0 11px;
  color: #fff;
  font: 600 12px Manrope;
}

.gxe-footer-column a,
.gxe-footer-column p {
  margin: 0;
  color: #756c7b;
  font-size: 10px;
  line-height: 1.55;
  transition: color .25s;
}

.gxe-footer-column a:hover {
  color: var(--cyan);
}

.gxe-footer-bottom {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #4f4754;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.gxe-footer-bottom div {
  display: flex;
  gap: 28px;
}

/* MANIFESTO TEXT COLLISION FIX */

.manifesto {
  min-height: auto;
  padding: 145px 0 175px;
}

.manifesto-inner {
  padding-left: 4px;
  padding-right: 4px;
}

.manifesto h2 {
  max-width: 1180px;
  font-size: clamp(46px, 6.7vw, 104px);
  line-height: 1.08;
  letter-spacing: -.05em;
  overflow-wrap: normal;
  text-wrap: balance;
}

.manifesto h2.outline {
  margin-top: 15px;
  -webkit-text-stroke: .8px rgba(255, 255, 255, .48);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .gxe-projects-layout {
    grid-template-columns: 200px 1fr;
  }

  .gxe-project-images {
    grid-template-columns: repeat(2, 1fr);
  }

  .gxe-careers-card {
    grid-template-columns: 1fr 1.2fr;
  }

  .gxe-careers-action {
    grid-column: 1 / 3;
    margin-top: 0;
  }

  .gxe-footer-grid {
    grid-template-columns: 1.6fr repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .gxe-feature-grid,
  .gxe-projects-layout,
  .gxe-location-card {
    grid-template-columns: 1fr;
  }

  .gxe-feature-card {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }

  .gxe-logo-orbit {
    width: 185px;
  }

  .gxe-project-images {
    grid-template-columns: repeat(2, 1fr);
  }

  .gxe-project-images figure {
    height: 155px;
  }

  .gxe-stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .gxe-stat {
    padding: 18px 15px;
  }

  .gxe-stat:nth-child(3) {
    border-left: 1px solid rgba(255, 255, 255, .1);
  }

  .gxe-careers-card {
    grid-template-columns: 1fr;
  }

  .gxe-careers-copy {
    padding: 42px 26px;
  }

  .gxe-careers-photo {
    min-height: 310px;
  }

  .gxe-careers-action {
    grid-column: auto;
    margin: 20px;
  }

  .gxe-location-card {
    display: flex;
    flex-direction: column;
  }

  .gxe-location-copy {
    padding: 38px 26px;
  }

  .gxe-map {
    min-height: 300px;
  }

  .gxe-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gxe-footer-about {
    grid-column: 1 / 3;
  }

  .gxe-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 25px 0;
  }

  .manifesto {
    padding: 100px 0 130px;
  }

  .manifesto h2 {
    font-size: clamp(42px, 12vw, 68px);
    line-height: 1.1;
  }
}

/* =========================================================
   JULY 2026 FINAL CORRECTIONS
   ========================================================= */

/* Bright white logos on dark header/footer; brand colours remain in feature cards and loader. */
.brand { filter: brightness(0) invert(1) !important; }
.gxe-footer-logo img { filter: brightness(0) invert(1); }

/* The contact emphasis was requested in white rather than cyan. */
.contact h2 em { color: #fff; }

/* Restore the GXE method section to the premium night treatment. */
.process {
  color: #fff;
  background:
    radial-gradient(circle at 15% 30%, rgba(86, 39, 104, .28), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(15, 102, 117, .18), transparent 38%),
    #0b0711;
}
.process .section-label { color: #9d92a3; }
.process .section-label span { color: var(--cyan); }
.process h2 em { color: #a866b6; }
.process-sticky > p,
.process-step p { color: #a69cab; }
.process-steps,
.process-step { border-color: rgba(255,255,255,.14); }
.step-no { color: var(--cyan); }
.process-orbit {
  border-color: rgba(196, 141, 208, .48);
  background: rgba(15, 10, 24, .58);
  box-shadow: inset 0 0 60px rgba(83, 37, 101, .22), 0 25px 80px rgba(0,0,0,.25);
}
.process-orbit::before { border-color: rgba(255,255,255,.2); }
.process-orbit img {
  width: 58%;
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
}

/* Prevent the features from looking oversized on standard laptop screens. */
.gxe-feature-card { min-height: 300px; padding: 32px; }
.gxe-feature-copy h2 { font-size: clamp(27px, 2.6vw, 42px); }

/* Careers form with real CV upload support through apply.php. */
.gxe-careers-card { grid-template-columns: .85fr 1.15fr 1fr; }
.gxe-careers-copy a { color: var(--cyan); }
.career-application {
  align-self: stretch;
  margin: 20px;
  padding: 26px;
  border: 1px solid rgba(197,126,218,.35);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(67,29,82,.72), rgba(16,12,27,.96));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.career-application h3 { margin: 5px 0 15px; font: 600 25px Manrope; }
.career-application label { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.career-application label > span { color: #a89eaf; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.career-application input { min-width: 0; width: 100%; color: #fff; background: transparent; border: 0; outline: 0; font-size: 13px; }
.career-application input::placeholder { color: #6e6474; }
.career-file { grid-template-columns: 90px 1fr !important; }
.career-file input { font-size: 10px; color: #bdb4c3; }
.career-file small { grid-column: 2; color: #7d7284; font-size: 8px; line-height: 1.4; }
.career-honeypot { position: absolute !important; left: -9999px !important; }
.career-application .gxe-gradient-button { width: 100%; border: 0; margin-top: 18px; }
.career-application .gxe-gradient-button b { font-size: 18px; }
.career-form-note { margin: 10px 0 0; color: #766c7c; font-size: 8px; line-height: 1.45; }

/* Reliable map presentation with a visible clickable fallback. */
.gxe-location { padding-top: 80px; }
.gxe-location-phone { display: block; margin-top: 18px; color: #fff; font: 600 13px Manrope; }
.gxe-map iframe { filter: grayscale(.75) invert(.88) hue-rotate(215deg) saturate(1.8) contrast(1.05); }
.gxe-map-overlay { pointer-events: none; opacity: .55; }
.gxe-map-pin { text-decoration: none; }
.gxe-map-pin:hover strong { color: var(--cyan); }

/* Slightly cleaner footer logo scale. */
.gxe-footer-logo { width: 165px; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 21px; font-size: 10px; }
  .gxe-careers-card { grid-template-columns: 1fr 1.15fr; }
  .career-application { grid-column: 1 / 3; margin-top: 0; }
}

@media (max-width: 760px) {
  .brand { filter: brightness(0) invert(1) !important; }
  .gxe-careers-card { grid-template-columns: 1fr; }
  .career-application { grid-column: auto; margin: 18px; }
  .career-application label { grid-template-columns: 1fr; gap: 6px; }
  .career-file { grid-template-columns: 1fr !important; }
  .career-file small { grid-column: auto; }
  .gxe-map-pin { left: 40%; }
}

/* =========================================================
   JULY 2026 — WHITE LOGO + STATIC MAP REFINEMENTS
   ========================================================= */

/* Use the same white logo treatment as the fixed header. */
.white-gxe-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1) !important;
}

/* Feature-orbit logos now match the white header logo. */
.gxe-logo-orbit img {
  filter: brightness(0) invert(1) !important;
  width: 64%;
}

/* Replace the typed GXE inside the MEP graphic with the actual logo. */
.mep-core::before { content: none !important; }
.mep-core {
  display: grid;
  place-items: center;
}
.mep-core .white-gxe-logo {
  width: 70%;
  position: relative;
  z-index: 3;
  transform: rotate(-45deg);
}

/* Actual-logo headings in Careers. */
.logo-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .22em;
}
.logo-heading span { display: inline-block; }
.logo-heading-large .white-gxe-logo {
  width: clamp(145px, 13vw, 215px);
  flex: 0 0 auto;
}
.logo-heading-small .white-gxe-logo {
  width: clamp(95px, 8vw, 132px);
  flex: 0 0 auto;
}
.gxe-careers-copy h2.logo-heading {
  line-height: 1;
}
.career-application h3.logo-heading {
  margin: 5px 0 15px;
  line-height: 1.1;
}

/* Replace “GXE.” in the contact heading with the real white logo. */
.contact-logo-heading em {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .22em;
  font-style: normal;
}
.contact-logo-heading em .white-gxe-logo {
  width: clamp(145px, 15vw, 230px);
  display: inline-block;
  transform: translateY(.04em);
}
.contact-logo-heading .logo-period {
  margin-left: -.12em;
}

/* Static map: users cannot drag/pan it. Only the custom + / − controls work. */
.gxe-map iframe {
  pointer-events: none;
  user-select: none;
}
.gxe-map-overlay {
  pointer-events: none;
}
.gxe-map-zoom {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 7px;
}
.gxe-map-zoom button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  color: #fff;
  background: rgba(12,8,18,.82);
  backdrop-filter: blur(12px);
  font: 500 24px/1 Manrope, sans-serif;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: background .25s, border-color .25s, transform .25s;
}
.gxe-map-zoom button:hover {
  background: rgba(113,57,135,.92);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}
.gxe-map-zoom button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .logo-heading-large .white-gxe-logo { width: 150px; }
  .logo-heading-small .white-gxe-logo { width: 105px; }
  .contact-logo-heading em .white-gxe-logo { width: 145px; }
  .gxe-map-zoom { right: 12px; bottom: 12px; }
  .gxe-map-zoom button { width: 39px; height: 39px; }
}

/* =========================================================
   OUTER-ONLY MANIFESTO OUTLINE
   The SVG filter first merges the complete text silhouette,
   then draws only the outside edge. This removes the internal
   stroke lines where neighbouring letters overlap.
   ========================================================= */

.manifesto-outline-wrap {
  width: min(100%, 1200px);
  margin-top: 18px;
  overflow: visible;
}

.manifesto-outline {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.manifesto-outline-mobile {
  display: none;
}

/* The old per-letter text stroke is no longer used. */
.manifesto h2.outline {
  display: none;
}

@media (max-width: 760px) {
  .manifesto-outline-desktop {
    display: none;
  }

  .manifesto-outline-mobile {
    display: block;
  }

  .manifesto-outline-wrap {
    width: 100%;
    margin-top: 16px;
  }
}

/* =========================================================
   JULY 2026 — TEXT SAFE-AREA + ORBIT MOTION REFINEMENT
   ========================================================= */

/*
   Large display type needs a little extra room outside the
   normal line box. These safe areas prevent the tops, bottoms
   and side overhangs of letters from being clipped during and
   after the reveal animation.
*/
.hero-title {
  max-width: min(1180px, 100%);
  font-size: clamp(56px, min(8.35vw, 14.5vh), 146px);
  line-height: .94;
  letter-spacing: -.068em;
}

.hero-title .line {
  overflow: hidden;
  padding: .14em .07em .18em;
  margin: -.14em -.07em -.18em;
}

/* Give each animated word a safe glyph area. */
.split-text .word {
  padding: .13em .075em .16em;
  margin: -.13em calc(.22em - .075em) -.16em -.075em;
  overflow: hidden;
}

/* Once the entrance animation has finished, never clip glyph overhangs. */
.split-text.split-complete .word {
  overflow: visible;
}

/* Keep the philosophy statement comfortably inside the viewport. */
.mega-copy {
  max-width: 100%;
  line-height: 1.12;
  letter-spacing: -.05em;
}

/* Short laptop screens: scale the hero by height as well as width. */
@media (min-width: 761px) and (max-height: 720px) {
  .hero-content {
    padding-top: 112px;
    padding-bottom: 58px;
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(54px, min(7.7vw, 13.2vh), 112px);
    line-height: .96;
  }

  .hero-lower {
    margin-top: 26px;
  }

  .hero-lower p {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (max-width: 760px) {
  .hero-title {
    font-size: clamp(46px, 14vw, 74px);
    line-height: .98;
    letter-spacing: -.058em;
  }

  .hero-title .line {
    padding: .16em .06em .20em;
    margin: -.16em -.06em -.20em;
  }

  .mega-copy {
    line-height: 1.14;
    letter-spacing: -.042em;
  }
}

/*
   GXE method orbit: the three coloured nodes now travel smoothly
   around the outer ring. The small halo gives motion without making
   the section distracting.
*/
.process-orbit {
  overflow: visible;
}

.process-orbit i,
.process-orbit i:nth-child(2),
.process-orbit i:nth-child(3),
.process-orbit i:nth-child(4) {
  --orbit-radius: 130px;
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 10px;
  height: 10px;
  margin: 0;
  border-radius: 50%;
  transform-origin: 0 0;
  animation: processNodeOrbit 13s linear infinite;
  will-change: transform;
  z-index: 4;
}

.process-orbit i:nth-child(2) {
  --start-angle: 205deg;
  background: #713987;
  box-shadow: 0 0 18px rgba(113,57,135,.8);
}

.process-orbit i:nth-child(3) {
  --start-angle: 0deg;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(50,198,215,.82);
}

.process-orbit i:nth-child(4) {
  --start-angle: 118deg;
  background: var(--teal);
  box-shadow: 0 0 18px rgba(15,102,117,.82);
}

.process-orbit i::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: processNodePulse 2.4s ease-out infinite;
}

.process-orbit i:nth-child(3)::after { animation-delay: .8s; }
.process-orbit i:nth-child(4)::after { animation-delay: 1.6s; }

@keyframes processNodeOrbit {
  from {
    transform: translate(-50%, -50%) rotate(var(--start-angle)) translateX(var(--orbit-radius));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--start-angle) + 360deg)) translateX(var(--orbit-radius));
  }
}

@keyframes processNodePulse {
  0% { opacity: .5; transform: scale(.45); }
  75%, 100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 760px) {
  .process-orbit i,
  .process-orbit i:nth-child(2),
  .process-orbit i:nth-child(3),
  .process-orbit i:nth-child(4) {
    --orbit-radius: 100px;
    animation-duration: 11s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-orbit i,
  .process-orbit i::after {
    animation-play-state: paused !important;
  }
}

/* =========================================================
   JULY 2026 — FINAL HERO DESCENDER CROP FIX
   ========================================================= */

/*
   Keep the entrance mask while the headline animates, but give letters
   with descenders (g, y, j, p, q) a larger bottom safe area. After the
   entrance finishes, the mask is removed completely so no glyph can be
   clipped on any screen or browser.
*/
.hero-title {
  line-height: 1 !important;
}

.hero-title .line {
  padding-top: .10em !important;
  padding-right: .07em !important;
  padding-bottom: .32em !important;
  padding-left: .07em !important;
  margin-top: -.10em !important;
  margin-right: -.07em !important;
  margin-bottom: -.18em !important;
  margin-left: -.07em !important;
}

.hero-title .line > span {
  padding-bottom: .06em;
}

body.hero-animation-finished .hero-title .line {
  overflow: visible !important;
}

@media (max-width: 760px) {
  .hero-title {
    line-height: 1.03 !important;
  }

  .hero-title .line {
    padding-bottom: .36em !important;
    margin-bottom: -.20em !important;
  }
}


/* =========================================================
   V6 — HERO BREATHING SPACE + FINAL DESCENDER SAFETY
   ========================================================= */

/*
   The headline can wrap on shorter or narrower screens. Give the hero
   enough real height and reserve visible space below “imagine.” so the
   final line never touches or disappears behind the section boundary.
*/
.hero-content {
  min-height: 100svh;
  padding-bottom: clamp(105px, 12vh, 170px) !important;
}

.hero-title {
  padding-bottom: .08em;
}

.hero-title .line:last-child {
  padding-bottom: .46em !important;
  margin-bottom: 0 !important;
}

.hero-lower {
  margin-top: clamp(38px, 4.5vh, 62px);
}

@media (min-width: 761px) and (max-height: 720px) {
  .hero-content {
    padding-bottom: 88px !important;
  }

  .hero-title .line:last-child {
    padding-bottom: .40em !important;
  }
}

@media (max-width: 760px) {
  .hero-content {
    padding-bottom: 92px !important;
  }

  .hero-title .line:last-child {
    padding-bottom: .42em !important;
  }
}

/* =========================================================
   V6.1 — PROJECT VISUAL MOTION + FULL-WIDTH MARQUEE FIX
   ========================================================= */

/* Subtle motion for the MEP / infrastructure project card */
.project-mep .mep-core {
  animation: mepCoreFloat 6.5s ease-in-out infinite;
}

.project-mep .mep-line {
  animation: mepLineGlow 4.8s ease-in-out infinite;
}
.project-mep .l2 { animation-delay: .7s; }
.project-mep .l3 { animation-delay: 1.4s; }

.project-mep .mep-node {
  animation: mepNodePulse 3.8s ease-in-out infinite;
}
.project-mep .n2 { animation-delay: .9s; }
.project-mep .n3 { animation-delay: 1.8s; }

@keyframes mepCoreFloat {
  0%, 100% {
    transform: rotate(45deg) translateY(0);
    box-shadow: 0 0 90px rgba(72,33,84,.45);
  }
  50% {
    transform: rotate(45deg) translateY(-8px);
    box-shadow: 0 0 110px rgba(72,33,84,.62);
  }
}

@keyframes mepLineGlow {
  0%, 100% {
    opacity: .55;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.35);
  }
}

@keyframes mepNodePulse {
  0%, 100% {
    opacity: .4;
    transform: scale(1);
  }
  50% {
    opacity: .92;
    transform: scale(1.12);
  }
}

/* Subtle motion for the industrial / specialized works card */
.sf1 {
  animation: frameLift1 5.6s ease-in-out infinite;
}
.sf2 {
  animation: frameLift2 5.9s ease-in-out infinite;
}
.sf3 {
  animation: frameLift3 6.2s ease-in-out infinite;
}

.steel-frame::before,
.steel-frame::after {
  animation: braceGlow 3.8s ease-in-out infinite;
}
.steel-frame::after {
  animation-delay: .9s;
}

.steel-floor {
  animation: floorDrift 8s ease-in-out infinite;
}

@keyframes frameLift1 {
  0%, 100% { bottom: 70px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 rgba(0,0,0,0); }
  50% { bottom: 78px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 26px rgba(113,57,135,.22); }
}
@keyframes frameLift2 {
  0%, 100% { bottom: 55px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 rgba(0,0,0,0); }
  50% { bottom: 62px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(113,57,135,.20); }
}
@keyframes frameLift3 {
  0%, 100% { bottom: 40px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 rgba(0,0,0,0); }
  50% { bottom: 46px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 22px rgba(113,57,135,.18); }
}

@keyframes braceGlow {
  0%, 100% {
    filter: brightness(1);
    opacity: .92;
  }
  50% {
    filter: brightness(1.28);
    opacity: 1;
  }
}

@keyframes floorDrift {
  0%, 100% {
    transform: perspective(520px) rotateX(65deg) translateY(0);
    opacity: .82;
  }
  50% {
    transform: perspective(520px) rotateX(65deg) translateY(5px);
    opacity: 1;
  }
}

/* Keep the mobile transform scale while still animating the MEP core */
@media (max-width: 760px) {
  @keyframes mepCoreFloat {
    0%, 100% {
      transform: rotate(45deg) scale(.82) translateY(0);
      box-shadow: 0 0 78px rgba(72,33,84,.42);
    }
    50% {
      transform: rotate(45deg) scale(.82) translateY(-8px);
      box-shadow: 0 0 98px rgba(72,33,84,.58);
    }
  }
}

/* Full-width, seamless manifesto ticker */
.marquee {
  display: block !important;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  min-width: 200%;
  white-space: nowrap;
  will-change: transform;
  animation: marqueeTrack 28s linear infinite;
}

.marquee-track span {
  flex: none;
  white-space: nowrap;
}

@keyframes marqueeTrack {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 1rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .project-mep .mep-core,
  .project-mep .mep-line,
  .project-mep .mep-node,
  .sf1,
  .sf2,
  .sf3,
  .steel-frame::before,
  .steel-frame::after,
  .steel-floor,
  .marquee-track {
    animation-play-state: paused !important;
  }
}