/* HydroMX cinematic spruce-up: applications + about pages */
.page-top:has(.fxhero){position:relative;overflow:hidden;min-height:clamp(440px,62vh,660px);display:flex;align-items:center}
.page-top:has(.fxhero) .wrap{position:relative;z-index:3}
.page-top:has(.fxhero) .page-h1{max-width:18ch}
.fxhero{position:absolute;top:50%;right:-40px;transform:translateY(-50%);width:min(46vw,560px);height:min(46vw,560px);z-index:1;pointer-events:none}
.fxglow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(27,164,224,.38),rgba(246,133,13,.10) 46%,transparent 70%);filter:blur(8px);animation:fxbreath2 7s ease-in-out infinite}
.fxring{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(15,119,180,.35)}
.fxring.r1{width:38%;height:38%;border-color:rgba(27,164,224,.6);animation:fxspin 18s linear infinite}
.fxring.r2{width:64%;height:64%;border-style:dashed;border-color:rgba(15,119,180,.32);animation:fxspin 30s linear infinite reverse}
.fxring.r3{width:92%;height:92%;border-color:rgba(246,133,13,.24);animation:fxspin 46s linear infinite}
.fxcore{position:absolute;top:50%;left:50%;width:15%;height:15%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#7fe3ff,#1BA4E0 55%,#0A4E77);box-shadow:0 0 46px 10px rgba(27,164,224,.55);animation:fxpulse 4.5s ease-in-out infinite}
.fxp{position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#1BA4E0;box-shadow:0 0 12px 3px rgba(27,164,224,.85)}
.fxp.p1{animation:fxorb1 9s linear infinite}
.fxp.p2{background:#F6850D;box-shadow:0 0 12px 3px rgba(246,133,13,.85);animation:fxorb2 13s linear infinite}
.fxp.p3{animation:fxorb3 16s linear infinite}
.fxp.p4{background:#7fe3ff;animation:fxorb1 11s linear infinite reverse}
.fxp.p5{background:#F6850D;animation:fxorb2 20s linear infinite reverse}
@keyframes fxspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fxpulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 40px 8px rgba(27,164,224,.5)}50%{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 60px 16px rgba(27,164,224,.7)}}
@keyframes fxbreath2{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes fxorb1{from{transform:rotate(0) translateX(115px) rotate(0)}to{transform:rotate(360deg) translateX(115px) rotate(-360deg)}}
@keyframes fxorb2{from{transform:rotate(90deg) translateX(165px) rotate(-90deg)}to{transform:rotate(450deg) translateX(165px) rotate(-450deg)}}
@keyframes fxorb3{from{transform:rotate(200deg) translateX(210px) rotate(-200deg)}to{transform:rotate(560deg) translateX(210px) rotate(-560deg)}}
@media(max-width:900px){.fxhero{opacity:.28;right:-30%;width:82vw;height:82vw}}
@media(prefers-reduced-motion:reduce){.fxring,.fxcore,.fxglow,.fxp{animation:none}}
.app-grid .app-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f6fbfe)}
.app-grid .app-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#1BA4E0,#0F77B4,#F6850D);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.app-grid .app-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(27,164,224,.16),transparent 70%);opacity:0;transition:opacity .5s ease}
.app-grid .app-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px -26px rgba(12,34,51,.4);border-color:rgba(27,164,224,.5)}
.app-grid .app-card:hover::before{transform:scaleX(1)}
.app-grid .app-card:hover::after{opacity:1}
.app-grid .app-card b{position:relative;display:inline-block;margin-bottom:10px;font-size:1.06rem;color:#0A4E77}
.app-grid .app-card b::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:#F6850D;box-shadow:0 0 0 4px rgba(246,133,13,.16);vertical-align:middle}

.page-top:has(.fxhero) .wrap{max-width:min(58%,760px);margin-right:auto;margin-left:max(32px,calc((100vw - 1240px)/2 + 32px))}
.page-top:has(.fxhero) .page-h1{max-width:14ch}
.page-top:has(.fxhero){overflow:visible}
.fxhero{width:min(40vw,470px);height:min(40vw,470px);right:max(6px,calc((100vw - 1240px)/2 - 24px));opacity:.9}
.page-top:has(.fxhero) .wrap{max-width:min(52%,660px)}
.fxhero{left:calc(100% + 60px);right:auto}
@media(max-width:1100px){.fxhero{left:auto;right:-60px;opacity:.5}}


/* ===== THREE DISTINCT PER-PAGE HERO VISUALS ===== */

/* APPLICATIONS: angular radar / server-scan reticle */
.fxh-apps .fxglow{background:conic-gradient(from 0deg,rgba(27,164,224,.55),transparent 22%,transparent 100%);border-radius:50%;filter:blur(2px);inset:14%;animation:fxsweep 4.2s linear infinite}
.fxh-apps .fxring{border-radius:14px}
.fxh-apps .fxring.r1{border-color:rgba(27,164,224,.7);animation:fxspin 22s linear infinite}
.fxh-apps .fxring.r2{border-style:solid;border-color:rgba(15,119,180,.4);border-radius:22px;animation:fxspin 34s linear infinite reverse}
.fxh-apps .fxring.r3{border-color:rgba(246,133,13,.3);border-radius:30px;animation:fxspin 50s linear infinite}
.fxh-apps .fxcore{width:12%;height:12%;border-radius:5px;background:linear-gradient(135deg,#7fe3ff,#1BA4E0 60%,#0A4E77);box-shadow:0 0 34px 6px rgba(27,164,224,.7)}
.fxh-apps .fxp{width:7px;height:7px;border-radius:2px}
@keyframes fxsweep{to{transform:rotate(360deg)}}

/* ABOUT: molecular nano-lattice constellation (no spin) */
.fxh-about .fxring{border:none;background:none}
.fxh-about .fxring.r1{width:60%;height:60%;border:1px solid rgba(27,164,224,.28);border-radius:50%;animation:fxbreath2 9s ease-in-out infinite}
.fxh-about .fxring.r2{width:88%;height:88%;border:1px solid rgba(15,119,180,.18);border-radius:50%;animation:fxbreath2 11s ease-in-out infinite reverse}
.fxh-about .fxring.r3{display:none}
.fxh-about .fxglow{inset:20%;background:radial-gradient(circle,rgba(27,164,224,.4),transparent 65%);animation:fxbreath2 8s ease-in-out infinite}
.fxh-about .fxcore{width:11%;height:11%;background:radial-gradient(circle at 40% 35%,#7fe3ff,#1BA4E0 60%,#0A4E77);box-shadow:0 0 30px 6px rgba(27,164,224,.6)}
.fxh-about .fxp{width:12px;height:12px;box-shadow:0 0 10px 2px rgba(27,164,224,.6)}
.fxh-about .fxp.p1{animation:fxdrift1 14s ease-in-out infinite}
.fxh-about .fxp.p2{animation:fxdrift2 17s ease-in-out infinite}
.fxh-about .fxp.p3{animation:fxdrift1 20s ease-in-out infinite reverse}
.fxh-about .fxp.p4{animation:fxdrift2 12s ease-in-out infinite reverse}
.fxh-about .fxp.p5{animation:fxdrift1 24s ease-in-out infinite}
@keyframes fxdrift1{0%,100%{transform:translate(-90px,-70px)}50%{transform:translate(-60px,-110px)}}
@keyframes fxdrift2{0%,100%{transform:translate(100px,60px)}50%{transform:translate(70px,110px)}}

/* PROOF/CASE STUDIES: rising data equalizer bars */
.fxh-proof .fxglow,.fxh-proof .fxring{display:none}
.fxh-proof .fxcore{display:none}
.fxh-proof{display:flex;align-items:flex-end;justify-content:center;gap:5%}
.fxh-proof .fxp{position:static;transform:none;width:11%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#1BA4E0,#0A4E77);box-shadow:0 0 18px rgba(27,164,224,.4);transform-origin:bottom}
.fxh-proof .fxp.p1{height:38%;animation:fxbar 2.6s ease-in-out infinite}
.fxh-proof .fxp.p2{height:64%;background:linear-gradient(180deg,#F6850D,#C93415);animation:fxbar 3.1s ease-in-out infinite}
.fxh-proof .fxp.p3{height:52%;animation:fxbar 2.2s ease-in-out infinite}
.fxh-proof .fxp.p4{height:80%;animation:fxbar 3.6s ease-in-out infinite}
.fxh-proof .fxp.p5{height:46%;background:linear-gradient(180deg,#F6850D,#C93415);animation:fxbar 2.9s ease-in-out infinite}
@keyframes fxbar{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.fxh-apps .fxglow,.fxh-about .fxp,.fxh-proof .fxp{animation:none}}

/* PROOF page: place equalizer visual in the case-studies hero */
.cs-head{position:relative}
.cs-head .fxhero{position:absolute;top:50%;transform:translateY(-50%);right:0;left:auto;width:min(34vw,380px);height:min(26vw,240px);z-index:0;pointer-events:none;opacity:.92}
.cs-head .cs-eyebrow,.cs-head .cs-h1,.cs-head .cs-lead{position:relative;z-index:2}
.cs-head .cs-h1,.cs-head .cs-lead{max-width:30ch}
@media(max-width:1000px){.cs-head .fxhero{opacity:.35;width:60vw}}
/* ============================================================
   v2 — TECHNOLOGY-ACCURATE HERO VISUALS + FONT NORMALIZATION
   (appended: overrides all earlier .fxh-* rules)
   =========================================================

/* ---- shared reset of the visual primitives ---- */
.fxhero .fxglow,.fxhero .fxring,.fxhero .fxcore,.fxhero .fxp{animation:none;background:none;border:none;box-shadow:none;filter:none;border-radius:0;opacity:1}
.fxhero .fxring,.fxhero .fxcore,.fxhero .fxglow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* ============ APPLICATIONS: pipe cross-section, radial heat conduction ============ */
.fxh-apps .fxglow{width:78%;height:78%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#F6850D 0%,#E4321A 14%,rgba(246,133,13,.55) 30%,rgba(27,164,224,.28) 55%,rgba(15,119,180,.10) 74%,transparent 82%);filter:blur(3px);animation:conduct 5.5s cubic-bezier(.4,0,.2,1) infinite}
.fxh-apps .fxcore{width:12%;height:12%;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff,#F6850D 55%,#E4321A);box-shadow:0 0 26px 8px rgba(246,133,13,.75)}
.fxh-apps .fxring{border-radius:50%;border:1.5px solid rgba(15,119,180,.28)}
.fxh-apps .fxring.r1{width:46%;height:46%;border-color:rgba(246,133,13,.5);animation:pipepulse 5.5s ease-out infinite}
.fxh-apps .fxring.r2{width:70%;height:70%;border-color:rgba(27,164,224,.4);animation:pipepulse 5.5s ease-out .5s infinite}
.fxh-apps .fxring.r3{width:94%;height:94%;border:10px solid rgba(12,34,51,.10);box-shadow:inset 0 0 30px rgba(12,34,51,.10)}
.fxh-apps .fxp{width:5px;height:5px;border-radius:50%;background:#fff;top:50%;left:50%;box-shadow:0 -70px 0 #7fe3ff,52px -52px 0 #F6850D,70px 0 0 #7fe3ff,52px 52px 0 #F6850D,0 70px 0 #7fe3ff,-52px 52px 0 #F6850D,-70px 0 0 #7fe3ff,-52px -52px 0 #F6850D;animation:convect 6s ease-in-out infinite}
.fxh-apps .fxp.p2,.fxh-apps .fxp.p3,.fxh-apps .fxp.p4,.fxh-apps .fxp.p5{display:none}
@keyframes conduct{0%,100%{transform:translate(-50%,-50%) scale(.86);opacity:.8}50%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes pipepulse{0%{transform:translate(-50%,-50%) scale(.86);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.02);opacity:.15}}
@keyframes convect{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(.9)}50%{transform:translate(-50%,-50%) rotate(22deg) scale(1)}}

/* ============ ABOUT: suspended nanoparticles in fluid (Brownian) ============ */
.fxh-about{border-radius:22px;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,rgba(27,164,224,.10),rgba(10,78,119,.04) 60%,transparent);box-shadow:inset 0 0 60px rgba(15,119,180,.12)}
.fxh-about .fxglow{width:120%;height:120%;background:radial-gradient(circle at 50% 60%,rgba(27,164,224,.22),transparent 60%);filter:blur(10px);animation:fluidbreathe 9s ease-in-out infinite}
.fxh-about .fxcore{width:0;height:0}
.fxh-about .fxring{border-radius:0}
.fxh-about .fxring.r1{width:0;height:0}
.fxh-about .fxring.r2{width:0;height:0}
.fxh-about .fxring.r3{width:0;height:0}
.fxh-about .fxp{width:6px;height:6px;border-radius:50%;background:#1BA4E0;box-shadow:0 0 8px 1px rgba(27,164,224,.7)}
.fxh-about .fxp.p1{box-shadow:0 0 8px 1px rgba(27,164,224,.7),40px -60px 0 -1px #7fe3ff,-70px 30px 0 -2px #1BA4E0,90px 40px 0 -1px #F6850D,-40px -90px 0 -2px #1BA4E0,120px -20px 0 -2px #7fe3ff,-110px -50px 0 -1px #1BA4E0;animation:brown1 12s ease-in-out infinite}
.fxh-about .fxp.p2{background:#7fe3ff;box-shadow:0 0 8px 1px rgba(127,227,255,.7),-90px 70px 0 -1px #1BA4E0,60px 90px 0 -2px #7fe3ff,-130px -20px 0 -2px #F6850D,110px -70px 0 -1px #1BA4E0,20px 120px 0 -2px #7fe3ff;animation:brown2 15s ease-in-out infinite}
.fxh-about .fxp.p3{background:#F6850D;box-shadow:0 0 8px 1px rgba(246,133,13,.6),-60px -80px 0 -2px #1BA4E0,130px 60px 0 -2px #7fe3ff,-120px 90px 0 -1px #1BA4E0;animation:brown1 18s ease-in-out infinite reverse}
.fxh-about .fxp.p4,.fxh-about .fxp.p5{display:none}
@keyframes fluidbreathe{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes brown1{0%,100%{transform:translate(-40%,-55%)}25%{transform:translate(-30%,-45%)}50%{transform:translate(-52%,-48%)}75%{transform:translate(-44%,-62%)}}
@keyframes brown2{0%,100%{transform:translate(-60%,-45%)}33%{transform:translate(-50%,-58%)}66%{transform:translate(-68%,-40%)}}

/* ============ PROOF: performance chart, water vs HydroMX to setpoint ============ */
.fxh-proof{display:block;border-radius:16px;background:linear-gradient(180deg,rgba(244,247,250,.7),rgba(255,255,255,.4));border:1px solid rgba(12,34,51,.10);overflow:hidden;padding:0}
.fxh-proof .fxglow{position:absolute;inset:0;width:100%;height:100%;transform:none;top:0;left:0;background:repeating-linear-gradient(0deg,transparent 0 19%,rgba(12,34,51,.06) 19% calc(19% + 1px)),repeating-linear-gradient(90deg,transparent 0 12.5%,rgba(12,34,51,.045) 12.5% calc(12.5% + 1px));animation:none}
.fxh-proof .fxcore,.fxh-proof .fxp.p4,.fxh-proof .fxp.p5{width:0;height:0;display:none}
.fxh-proof .fxring{position:absolute;transform:none;top:auto;left:0;border-radius:0}
.fxh-proof .fxring.r1{width:100%;height:64%;bottom:0;border:none;background:linear-gradient(90deg,transparent,rgba(15,119,180,0)),conic-gradient(from 0deg,transparent 0);clip-path:polygon(0 100%,10% 86%,26% 74%,46% 58%,68% 40%,88% 22%,100% 12%,100% 100%);background:linear-gradient(180deg,rgba(27,164,224,.30),rgba(27,164,224,0));animation:tracegrow 4s ease-out infinite}
.fxh-proof .fxring.r2{width:100%;height:64%;bottom:0;border:none;background:linear-gradient(180deg,rgba(201,52,21,.22),rgba(201,52,21,0));clip-path:polygon(0 100%,14% 92%,34% 84%,56% 74%,78% 62%,100% 48%,100% 100%);animation:tracegrow 4s ease-out .3s infinite}
.fxh-proof .fxring.r3{display:none}
.fxh-proof .fxp{position:absolute;width:9px;height:9px;border-radius:50%;background:#1BA4E0;box-shadow:0 0 10px 2px rgba(27,164,224,.6);top:12%;left:100%;transform:translate(-50%,-50%);animation:dotride 4s ease-out infinite}
.fxh-proof .fxp.p2{background:#C93415;box-shadow:0 0 10px 2px rgba(201,52,21,.55);top:48%;animation:dotride 4s ease-out .3s infinite}
.fxh-proof .fxp.p3{display:none}
@keyframes tracegrow{0%{opacity:0}100%{opacity:1}}
@keyframes dotride{0%{opacity:0}20%{opacity:1}100%{opacity:1}}

/* ---- proof visual needs a taller box; keep it anchored right in cs-head ---- */
.cs-head .fxhero.fxh-proof{width:min(38vw,420px);height:min(24vw,220px)}

/* ============ SITE-WIDE BODY FONT NORMALIZATION ============ */
body{font-size:16px;line-height:1.7}
p,.sec-lead,.app-card,.app-card p,.cs-lead,.hero-sub{font-size:1rem;line-height:1.7}
.eyebrow,.eb-line+*,.cs-eyebrow{font-size:.72rem}


/* ---- PROOF visual v2 fix: robust performance chart (no clip-path conflict) ---- */
.fxh-proof{display:block;position:relative;border-radius:14px;background:linear-gradient(180deg,#fff,#F4F7FA);border:1px solid rgba(12,34,51,.12);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 20px 40px -28px rgba(12,34,51,.35)}
.fxh-proof .fxglow{position:absolute;inset:0;width:100%;height:100%;top:0;left:0;transform:none;opacity:1;filter:none;background-image:repeating-linear-gradient(0deg,transparent 0 24px,rgba(12,34,51,.055) 24px 25px),repeating-linear-gradient(90deg,transparent 0 40px,rgba(12,34,51,.04) 40px 41px);animation:none}
.fxh-proof .fxcore{display:none;width:0;height:0}
.fxh-proof .fxring{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:78%;transform:none;border:none;border-radius:0;transform-origin:left center;animation:tracein 3.2s cubic-bezier(.4,0,.2,1) forwards}
.fxh-proof .fxring.r1{clip-path:polygon(0% 100%,8% 78%,22% 60%,40% 42%,62% 26%,82% 15%,100% 9%,100% 100%);background:linear-gradient(180deg,rgba(27,164,224,.42),rgba(27,164,224,.04));border-top:0}
.fxh-proof .fxring.r2{clip-path:polygon(0% 100%,10% 90%,26% 82%,46% 72%,68% 60%,88% 50%,100% 44%,100% 100%);background:linear-gradient(180deg,rgba(201,52,21,.28),rgba(201,52,21,.03));animation-delay:.25s}
.fxh-proof .fxring.r3{display:none}
.fxh-proof .fxp{position:absolute;width:10px;height:10px;border-radius:50%;background:#1BA4E0;box-shadow:0 0 0 3px rgba(27,164,224,.2),0 0 12px 2px rgba(27,164,224,.55);top:9%;right:6%;left:auto;transform:none;animation:dotpop 3.2s ease-out forwards;opacity:0}
.fxh-proof .fxp.p2{background:#C93415;box-shadow:0 0 0 3px rgba(201,52,21,.18),0 0 12px 2px rgba(201,52,21,.5);top:44%;animation-delay:.25s}
.fxh-proof .fxp.p3,.fxh-proof .fxp.p4,.fxh-proof .fxp.p5{display:none}
@keyframes tracein{0%{clip-path:inset(0 100% 0 0)}}
@keyframes dotpop{0%,60%{opacity:0}100%{opacity:1}}
/* proof: undo v1 display:none so grid and curves show */
.fxh-proof .fxglow,.fxh-proof .fxring.r1,.fxh-proof .fxring.r2{display:block}
/* proof: hide stretched dots, strengthen water curve */
.fxh-proof .fxp,.fxh-proof .fxp.p1,.fxh-proof .fxp.p2{display:none}
.fxh-proof .fxring.r2{background:linear-gradient(180deg,rgba(228,50,26,.5),rgba(228,50,26,.06))!important}
.fxh-proof .fxring.r1{background:linear-gradient(180deg,rgba(27,164,224,.5),rgba(27,164,224,.06))!important}

/* ============ CASE STUDIES: deployment radar, sites lighting up ============ */
.fxh-cases .fxglow{inset:12%;background:radial-gradient(circle at 50% 50%,rgba(27,164,224,.30),rgba(15,119,180,.06) 55%,transparent 72%);filter:blur(6px);animation:fxbreath2 8s ease-in-out infinite}
.fxh-cases .fxring{border:1px solid rgba(15,119,180,.22);border-radius:50%}
.fxh-cases .fxring.r1{width:34%;height:34%;border-color:rgba(27,164,224,.45)}
.fxh-cases .fxring.r2{width:62%;height:62%;border-style:solid;border-color:rgba(15,119,180,.20)}
.fxh-cases .fxring.r3{width:90%;height:90%;display:block;border-color:rgba(15,119,180,.14);background:conic-gradient(from 0deg,rgba(27,164,224,.28),transparent 20%,transparent 100%);animation:fxspin 6s linear infinite}
.fxh-cases .fxcore{width:6%;height:6%;background:radial-gradient(circle,#7fe3ff,#1BA4E0 60%,#0A4E77);box-shadow:0 0 22px 4px rgba(27,164,224,.6)}
.fxh-cases .fxp{position:absolute;top:auto;left:auto;transform:none;margin:0;width:12px;height:12px;border-radius:50%;background:#1BA4E0;box-shadow:0 0 0 0 rgba(27,164,224,.55);opacity:0;animation:fxping 4.8s ease-out infinite}
.fxh-cases .fxp.p1{top:24%;left:30%;animation-delay:0s}
.fxh-cases .fxp.p2{top:38%;left:70%;background:#F6850D;box-shadow:0 0 0 0 rgba(246,133,13,.55);animation-delay:.9s}
.fxh-cases .fxp.p3{top:64%;left:42%;animation-delay:1.8s}
.fxh-cases .fxp.p4{top:58%;left:78%;background:#7fe3ff;animation-delay:2.7s}
.fxh-cases .fxp.p5{top:76%;left:22%;background:#F6850D;box-shadow:0 0 0 0 rgba(246,133,13,.55);animation-delay:3.6s}
@keyframes fxping{0%{opacity:0;transform:scale(.4);box-shadow:0 0 0 0 rgba(27,164,224,.5)}12%{opacity:1;transform:scale(1)}40%{opacity:1;box-shadow:0 0 0 16px rgba(27,164,224,0)}70%{opacity:1}100%{opacity:.15;transform:scale(1)}}

/* ============ CASE STUDIES v3: HydroMX closed-loop circulation ============ */
.fxh-cases .fxglow{inset:18%;background:radial-gradient(circle at 50% 50%,rgba(27,164,224,.30),rgba(15,119,180,.08) 55%,transparent 72%);filter:blur(10px);animation:fxbreath2 8s ease-in-out infinite}
.fxh-cases .fxring{border-style:solid;border-radius:50%}
.fxh-cases .fxring.r1{width:30%;height:30%;border:1px solid rgba(15,119,180,.16);background:none;animation:none;display:block}
.fxh-cases .fxring.r2{width:64%;height:64%;border:11px solid rgba(15,119,180,.85);background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 34px rgba(27,164,224,.25);animation:none;display:block}
.fxh-cases .fxring.r3{width:64%;height:64%;border:11px solid transparent;border-top-color:rgba(27,164,224,.6);border-right-color:rgba(27,164,224,.6);background:none;box-shadow:none;animation:fxspin 5s linear infinite;display:block}
.fxh-cases .fxcore{width:20%;height:20%;background:radial-gradient(circle at 42% 36%,#eaf9ff,#1BA4E0 52%,#0A4E77);box-shadow:0 0 38px 8px rgba(27,164,224,.5);animation:fxpulse 4.5s ease-in-out infinite;display:block}
.fxh-cases .fxp{position:absolute;top:50%;left:50%;margin:-8px;width:16px;height:16px;border-radius:50%;background:#F6850D;box-shadow:0 0 15px 4px rgba(246,133,13,.9);opacity:1}
.fxh-cases .fxp.p1{top:50%;left:50%;background:#F6850D;animation:fxflow 6s linear infinite;animation-delay:0s}
.fxh-cases .fxp.p2{top:50%;left:50%;background:#1BA4E0;box-shadow:0 0 15px 4px rgba(27,164,224,.9);animation:fxflow 6s linear infinite;animation-delay:-1.2s}
.fxh-cases .fxp.p3{top:50%;left:50%;background:#F6850D;animation:fxflow 6s linear infinite;animation-delay:-2.4s}
.fxh-cases .fxp.p4{top:50%;left:50%;background:#1BA4E0;box-shadow:0 0 15px 4px rgba(27,164,224,.9);animation:fxflow 6s linear infinite;animation-delay:-3.6s}
.fxh-cases .fxp.p5{top:50%;left:50%;background:#F6850D;animation:fxflow 6s linear infinite;animation-delay:-4.8s}
@keyframes fxflow{from{transform:rotate(0) translateX(182px) rotate(0)}to{transform:rotate(360deg) translateX(182px) rotate(-360deg)}}
/* ============ VISUAL-LESS HERO SPACING: widen text where no side visual ============ */
#apps-hero .page-h1{max-width:20ch}
#apps-hero .sec-lead{max-width:64ch}
.cs-head .cs-h1{max-width:22ch}
.cs-head .cs-lead{max-width:58ch} /* FEATURED CASE STUDIES + TRUST STRIP (staging) */ #featured .sec-lead{max-width:60ch;margin-top:14px} .fcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px} @media(max-width:900px){.fcase-grid{grid-template-columns:1fr}} .fcase{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s} .fcase:hover{transform:translateY(-6px);box-shadow:0 24px 60px -28px rgba(10,46,72,.45);border-color:var(--blue-br)} .fcase-img{display:block;height:190px;background-size:cover;background-position:center;position:relative;filter:saturate(.65)} .fcase-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,119,180,.28),rgba(10,46,72,.72));mix-blend-mode:multiply} .fcase-body{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px} .fcase-tag{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .fcase-h{font-family:"Archivo Expanded","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink)} .fcase-metric{color:var(--ink-soft);font-size:.98rem;line-height:1.5} .fcase-go{margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--red);letter-spacing:.02em} .trust-sec .trust-band{height:120px;border-radius:12px;margin:34px 0 30px;background-size:cover;background-position:center;position:relative;filter:saturate(.5)} .trust-sec .trust-band::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg,rgba(10,46,72,.82),rgba(15,119,180,.42) 55%,rgba(27,164,224,.3));mix-blend-mode:multiply} .logo-strip{display:flex;flex-wrap:wrap;gap:12px} .logo-chip{font-family:"JetBrains Mono",monospace;font-size:.82rem;letter-spacing:.02em;color:var(--ink);background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:border-color .4s,color .4s} .logo-chip:hover{border-color:var(--blue-br);color:var(--blue-deep)}


/* === NEW PAGES: global-presence, resources, news (staging) === */
.gp-herowrap{position:absolute;right:0;top:0;bottom:0;width:min(42vw,560px);overflow:hidden;border-bottom-left-radius:16px;pointer-events:none}
.gp-heroimg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.55)}
.gp-heroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--paper) 0%,rgba(255,255,255,.2) 22%,rgba(15,119,180,.34) 60%,rgba(10,46,72,.68));mix-blend-mode:multiply}
@media(max-width:820px){.gp-herowrap{position:relative;width:auto;height:180px;margin-top:24px}}
.gp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
@media(max-width:760px){.gp-grid{grid-template-columns:1fr}}
.gp-card{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--blue-br);border-radius:12px;padding:24px}
.gp-card .gp-num{display:block;font-family:"Archivo Expanded","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.gp-card p{color:var(--ink-soft);font-size:.98rem;line-height:1.55;margin:0}
.gp-band{height:150px;border-radius:12px;margin:30px 0;background-size:cover;background-position:center;position:relative;filter:saturate(.55)}
.gp-band::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg,rgba(10,46,72,.8),rgba(15,119,180,.4) 55%,rgba(27,164,224,.28));mix-blend-mode:multiply}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.res-grid{grid-template-columns:1fr}}
.res-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.res-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px -26px rgba(10,46,72,.4)}
.res-card .res-kind{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.res-card .res-h{display:block;font-family:"Archivo Expanded","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.05rem;line-height:1.06;color:var(--ink);margin:8px 0 8px}
.res-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.5;margin:0}
.news-list{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.news-item{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .4s}
.news-item:hover{border-color:var(--blue-br)}
@media(max-width:640px){.news-item{grid-template-columns:1fr}}
.news-img{background-size:cover;background-position:center;min-height:120px;position:relative;filter:saturate(.6)}
.news-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,119,180,.25),rgba(10,46,72,.6));mix-blend-mode:multiply}
.news-body{padding:22px 24px}
.news-body .news-tag{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.news-body .news-h{font-family:"Archivo Expanded","Arial Narrow",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.1rem;line-height:1.05;color:var(--ink);margin:6px 0 8px}
.news-body p{color:var(--ink-soft);font-size:.96rem;line-height:1.5;margin:0}
#gp-hero,#res-hero,#news-hero{position:relative;overflow:hidden}
#gp-hero .page-h1,#res-hero .page-h1,#news-hero .page-h1{max-width:20ch}
#gp-hero .sec-lead,#res-hero .sec-lead,#news-hero .sec-lead{max-width:52ch}

/* ==========================================================================
   MOBILE REFINEMENTS — phones + small tablets
   Everything below is scoped to <=900px, so the desktop layout is untouched.
   ========================================================================== */

/* 1 — Decorative vertical scroll rails are desktop-only ------------------- */
@media (max-width:900px){
.loop-rail,
.scrollcue,
#problem .p01rail,
#circuit{display:none !important}
}

/* 2 — Diagram canvases must contain their own absolute children ----------- */
@media (max-width:900px){
.mechcanvas{position:relative}
#fluid-sec .mechcanvas{position:relative !important;overflow:hidden}
}

/* 3 — Release desktop ch-measure caps so copy fills the phone column ------ */
@media (max-width:900px){
.page-top:has(.fxhero) .wrap{max-width:100%;margin-left:auto;margin-right:auto}
.page-top:has(.fxhero) .page-h1,
.hero-h,.problem-h,.mech h2,.loop-h,.proof-copy h2,.money-h,.return-h,
.sec-h,.page-h1,.pf-h2,.cs-head .cs-h1,
#apps-hero .page-h1,#gp-hero .page-h1,#res-hero .page-h1,#news-hero .page-h1{max-width:none}
.hero-sub,.sec-lead,.mech p,.loop-lead,.return-sub,.pf-lead,.cs-head .cs-lead,
#apps-hero .sec-lead,#gp-hero .sec-lead,#res-hero .sec-lead,#news-hero .sec-lead,
#featured .sec-lead,.foot-grid p,#fluid-sec .mech h2,#fluid-sec .mech p{max-width:none}
#problem .stat-row .stat .l{max-width:none !important}
}

/* 4 — Navigation: compact two-row bar, every link reachable --------------- */
@media (max-width:820px){
nav{flex-wrap:wrap;align-items:center;justify-content:space-between;padding:9px 16px 8px;row-gap:5px}
nav .brand-logo{height:30px;width:auto}
.navlinks{order:3;width:100%;display:flex;flex-wrap:wrap;gap:4px 13px;align-items:center}
.navlinks a:not(.navcta){display:inline-block;font-size:11px;letter-spacing:.08em;line-height:1.5;padding:0}
.navlinks .navcta{position:absolute;top:9px;right:16px;font-size:11px;padding:8px 13px;line-height:1.2}
}

/* 5 — First block always clears the fixed bar ----------------------------- */
@media (max-width:820px){
body > section:first-of-type,
body > main > section:first-of-type,
body > .page-top,
.page-top{padding-top:118px !important}
.page-top:empty{padding:104px 0 0 !important}
}

/* 6 — Vertical rhythm (desktop uses clamp(90px,14vh,180px)) --------------- */
@media (max-width:760px){
section{padding:64px 20px}
#hero{padding-bottom:76px}
.page-top{padding-bottom:52px}
footer{padding:56px 20px 40px}
.loopstage{padding:22px 20px}
.cs-wrap{padding-top:24px}
.pf-wrap .pf-section{padding:44px 0}
}
@media (max-width:380px){
section{padding:54px 16px}
}

/* 7 — Type scale ---------------------------------------------------------- */
@media (max-width:760px){
#hero .display,.hero-h{font-size:clamp(2.35rem,10vw,3.1rem);line-height:1.06}
h2.display{font-size:clamp(1.9rem,7.4vw,2.4rem);line-height:1.05}
.page-h1{font-size:clamp(2rem,8.4vw,2.7rem);line-height:1.06}
.sec-h{font-size:clamp(1.7rem,6.8vw,2.2rem);line-height:1.1}
.pf-h2{font-size:clamp(1.6rem,6.4vw,2rem)}
.hero-sub{font-size:1.06rem !important;line-height:1.62 !important;margin-top:22px}
.sec-lead{font-size:1rem;line-height:1.62;margin-bottom:26px}
.wrap p,section p{font-size:1rem;line-height:1.68}
.eyebrow{font-size:.68rem;letter-spacing:.18em;margin-bottom:18px;gap:9px}
.eyebrow::before{width:18px}
}

/* ============================================================
   RECOGNITION LOGOS — #awards
   Decorative marks above the existing text labels.
   ============================================================ */
#awards .stat-row .stat > .l::before{
content:"";display:block;background-repeat:no-repeat;background-position:0 0;margin:0 0 16px}
#awards .stat-row .stat:nth-child(1) > .l::before{
width:187px;height:46px;background-image:url("urbantech-forward-logo.jpg");background-size:187px auto}
#awards .stat-row .stat:nth-child(2) > .l::before{
width:105px;height:86px;background-image:url("nyc-accelerator-badge.jpg");background-size:113px auto}
#awards .stat-row .stat:nth-child(3) > .l::before{
width:129px;height:62px;background-image:url("ukgbc-logo.jpg");background-size:129px auto}
@media (max-width:760px){
#awards .stat-row .stat > .l::before{margin:0 0 12px}
#awards .stat-row .stat:nth-child(1) > .l::before{width:170px;height:42px;background-size:170px auto}
#awards .stat-row .stat:nth-child(2) > .l::before{width:94px;height:77px;background-size:101px auto}
#awards .stat-row .stat:nth-child(3) > .l::before{width:116px;height:56px;background-size:116px auto}
}
/* bottom-align the three marks so the labels below them line up (3-up desktop) */
@media (min-width:761px){
#awards .stat-row .stat:nth-child(1) > .l::before{margin-top:42px}
#awards .stat-row .stat:nth-child(2) > .l::before{margin-top:2px}
#awards .stat-row .stat:nth-child(3) > .l::before{margin-top:26px}
}
/* ============================================================
   MOBILE NAV - logo + CONTACT + hamburger (<=820px)
   The panel and the button are created by mobile-nav.js from the
   links that already exist in nav .navlinks.
   ============================================================ */
.navburger{display:none}
.navpanel{display:none}
@media (max-width:820px){
nav{flex-wrap:nowrap;align-items:center;padding:11px 14px;row-gap:0}
nav .brand,nav a.brand{margin-right:auto}
nav .brand-logo{height:30px}
.navlinks{order:0;width:auto;flex-wrap:nowrap;gap:0;margin:0;display:flex;align-items:center}
.navlinks a:not(.navcta){display:none}
.navlinks .navcta{position:static;top:auto;right:auto;font-size:11px;letter-spacing:.1em;padding:9px 13px;margin:0 8px 0 0;white-space:nowrap}
.navburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 8px;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.navburger span{display:block;height:2px;width:100%;background:#0c2233;border-radius:2px;transition:transform .22s ease,opacity .18s ease}
html.nav-open .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.nav-open .navburger span:nth-child(2){opacity:0}
html.nav-open .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navpanel{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid rgba(12,34,51,.1);border-bottom:1px solid rgba(12,34,51,.12);box-shadow:0 20px 40px rgba(2,12,20,.13);padding:4px 18px 12px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .22s ease,visibility .22s}
html.nav-open .navpanel{opacity:1;visibility:visible;transform:none}
.navpanel a{display:block;padding:14px 2px;font-size:14px;line-height:1.2;letter-spacing:.06em;color:#3a5a72;text-decoration:none;border-bottom:1px solid rgba(12,34,51,.09)}
.navpanel a:last-child{border-bottom:0}
body > section:first-of-type,body > main > section:first-of-type,body > .page-top,.page-top{padding-top:92px !important}
.page-top:empty{padding:78px 0 0 !important}
}

/* ============================================================
   MOBILE HERO - the nanofluid backdrop has to read as moving.
   The source image is a soft gradient, so a slow zoom plus a
   drifting light layer is what actually registers on a phone.
   ============================================================ */
@media (max-width:900px){
#fluidwrap{animation:heroDriftM 18s ease-in-out infinite alternate}
#fluidwrap::after{content:"";position:absolute;inset:-30%;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0) 70%) 22% 24%/58% 40% no-repeat,
radial-gradient(closest-side,rgba(27,164,224,.55),rgba(27,164,224,0) 70%) 76% 62%/52% 36% no-repeat,
radial-gradient(closest-side,rgba(246,133,13,.30),rgba(246,133,13,0) 70%) 48% 90%/46% 30% no-repeat;
animation:heroCaustic 12s ease-in-out infinite alternate}
}
@keyframes heroDriftM{
0%{transform:scale(1.16) translate3d(-2%,-1.5%,0)}
100%{transform:scale(1.36) translate3d(2%,1.5%,0)}
}
@keyframes heroCaustic{
0%{transform:translate3d(-8%,-6%,0) scale(1);opacity:.55}
50%{transform:translate3d(4%,5%,0) scale(1.2);opacity:1}
100%{transform:translate3d(9%,-4%,0) scale(1.05);opacity:.6}
}
@media (prefers-reduced-motion:reduce){
#fluidwrap,#fluidwrap::after{animation:none !important}
.navpanel,.navburger span{transition:none}
}