/* ECOTECH CLEAN CSS BUNDLE — generated from the final approved cascade */
/* ===== SOURCE: style.css ===== */
:root{
/* Match homepage V9 matte mineral — site-wide */
--navy:#17252B;
--blue:#3E7D82;
--cyan:#8CC5C4;
--purple:#B66F52;
--lavender:#D9A98A;
--bg:#F7F5EF;
--bg-soft:#F2F0E9;
--ink:#17252B;
--muted:#3E524E;
--line:rgba(23,37,43,0.12);
--line-strong:rgba(23,37,43,0.26);
--grad:linear-gradient(135deg,#3E7D82,#426B5A,#B66F52);
--grad-soft:linear-gradient(135deg,rgba(62,125,130,0.16),rgba(66,107,90,0.05),rgba(182,111,82,0.06));
--hero-dark:#0E1715;
--hero-dark-2:#16221F;
--max:1320px;
--ease:cubic-bezier(.22,1,.36,1);
--font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--mono:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px}body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;font-size:17.5px;line-height:1.72;letter-spacing:0.01em;letter-spacing:0.01em;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.container{width:92%;max-width:var(--max);margin:0 auto}.kicker{display:inline-flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blue);background:rgba(62,125,130,0.22);border:1px solid rgba(140,197,196,0.26);padding:6px 14px;border-radius:100px}.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad)}h1{font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.04em;font-weight:800}h2{font-size:clamp(28px,3.5vw,48px);line-height:1.05;letter-spacing:-.03em;font-weight:700}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all .35s var(--ease)}.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(23,37,43,0.26)}.btn-secondary{background:#fff;color:var(--navy);border-color:var(--line-strong)}.btn-secondary:hover{border-color:var(--blue);transform:translateY(-2px)}.topbar{position:sticky;top:0;z-index:60;background:var(--hero-dark);border-bottom:1px solid rgba(255,255,255,0.22)}.topbar-inner{height:104px;display:flex;align-items:center;justify-content:space-between}.logo-wrap{display:flex;align-items:center;line-height:0}.logo-img{height:100px;width:auto;display:block;object-fit:contain;background:transparent}.nav{display:flex;gap:32px;align-items:center}.nav a{font-size:15px;font-weight:500;color:rgba(255,255,255,0.82);position:relative;padding:4px 0}.nav a:hover{color:#fff}.nav a.active{color:var(--cyan)}.nav a:not(.btn)::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--cyan);border-radius:2px;transition:right .3s var(--ease)}.nav a:not(.btn):hover::after{right:0}.nav a.active::after{right:0}.btn-cta{background:var(--grad) !important;color:#fff !important;border:none;border-radius:100px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;padding:13px 28px !important}.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(140,197,196,0.3)}.mobile-toggle{display:none;width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,0.26);background:rgba(255,255,255,0.06);color:#fff;font-size:20px;cursor:pointer}.platform-bar{position:sticky;top:104px;z-index:55;background:var(--navy);border-bottom:1px solid rgba(255,255,255,0.22);overflow-x:auto;scrollbar-width:none}.platform-bar::-webkit-scrollbar{display:none}.platform-inner{display:flex;min-width:max-content}.platform-inner a{padding:13px 18px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,0.58);border-right:1px solid rgba(255,255,255,0.06);transition:all .2s;position:relative}.platform-inner a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s var(--ease)}.platform-inner a:hover{color:#fff;background:rgba(255,255,255,0.04)}.platform-inner a:hover::after{transform:scaleX(1)}.hero-section{background:radial-gradient(120% 90% at 78% 12%,var(--hero-dark-2),var(--hero-dark) 55%);position:relative;overflow:hidden}.hero-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(70% 70% at 68% 35%,#000,transparent);mask-image:radial-gradient(70% 70% at 68% 35%,#000,transparent);pointer-events:none}.hero{padding:88px 0 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;overflow:visible}.hero::before{content:'';position:absolute;top:-30%;right:-15%;width:65%;height:90%;background:radial-gradient(circle,rgba(140,197,196,0.28),transparent 70%);filter:blur(40px);border-radius:50%;pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(140,197,196,0.22);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(140,197,196,0.45)}70%{box-shadow:0 0 0 10px rgba(140,197,196,0)}100%{box-shadow:0 0 0 0 rgba(140,197,196,0)}}.hero h1{margin-top:18px;color:#fff}.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{margin-top:18px;color:rgba(255,255,255,0.62);font-size:18px;max-width:560px;line-height:1.6}.hero-ctas{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}.hero .btn-primary{background:var(--grad);color:#fff}.hero .btn-primary:hover{box-shadow:0 16px 36px rgba(140,197,196,0.35)}.hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,0.22)}.hero .btn-secondary:hover{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(140,197,196,0.22)}.hero-visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:visible;max-width:600px;margin:0 auto;width:100%}.cube-rings{position:absolute;left:50%;bottom:2%;width:102%;height:46%;transform:translateX(-50%);pointer-events:none;z-index:1}.cube-rings .ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(62,125,130,0.4)}.cube-rings .ring:nth-child(1){width:32%;height:32%;border-color:rgba(140,197,196,0.55)}.cube-rings .ring:nth-child(2){width:56%;height:56%;border-color:rgba(62,125,130,0.4)}.cube-rings .ring:nth-child(3){width:80%;height:80%;border-color:rgba(98,92,112,0.25)}.cube-rings .ring:nth-child(4){width:100%;height:100%;border-color:rgba(98,92,112,0.22)}.hero-visual::after{content:'';position:absolute;left:50%;top:48%;width:70%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(62,125,130,0.28),transparent 70%);filter:blur(40px);pointer-events:none;z-index:0}
.cube-card{width:88%;aspect-ratio:1/1;background:none;border:none;border-radius:0;display:grid;place-items:center;padding:0;position:relative;z-index:2;transition:all .6s var(--ease)}.cube-card:hover{transform:rotateY(-6deg) rotateX(4deg) translateY(-6px)}.cube-logo{width:92%;height:auto;object-fit:contain;background:transparent;filter:drop-shadow(0 30px 60px rgba(140,197,196,0.5))}.stats-bar{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{padding:18px 20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.22);border-radius:14px;display:flex;gap:12px;align-items:center}.stat div>div:nth-child(1){color:#fff}.stat .small{color:rgba(255,255,255,0.55)}.stat-num{font-size:26px;font-weight:800;color:#fff}
.trusted-strip{background:var(--hero-dark);padding:36px 0 44px;border-top:1px solid rgba(255,255,255,0.06)}.trusted-label{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,0.35);font-weight:700}.trusted-logos{margin-top:26px;display:flex;justify-content:center;align-items:center;gap:56px;flex-wrap:wrap}.trusted-logos span{font-size:17px;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:-.01em;transition:color .3s}.trusted-logos span:hover{color:rgba(255,255,255,0.85)}.section{padding:80px 0}.section-soft{background:var(--bg-soft)}.section-navy{background:var(--navy);color:#fff;position:relative;overflow:hidden}.section-navy::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 20% 20%,rgba(66,107,90,0.26),transparent),radial-gradient(50% 50% at 80% 30%,rgba(98,92,112,0.26),transparent);pointer-events:none}.section-navy .kicker{background:rgba(255,255,255,0.22);color:var(--cyan);border-color:rgba(255,255,255,0.22)}.section-navy h2{color:#fff}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.pillar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:all .4s var(--ease)}.pillar:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(23,37,43,0.22)}.pillar-num{font-size:28px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.service-item{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:32px 0;border-top:1px solid var(--line)}.service-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--blue)}.service-title{font-size:24px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.service-title::after{content:'↗';font-size:13px;opacity:0;transform:translateX(-6px);transition:all .3s}.service-item:hover .service-title::after{opacity:1;transform:translateX(0)}.service-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}.label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:6px}.small{font-size:14px;color:var(--muted);line-height:1.7}.tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:11px;padding:5px 10px;border-radius:100px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted)}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.22);border-radius:16px;overflow:hidden;margin-top:32px}.how-card{padding:28px;background:rgba(255,255,255,0.02)}.how-card h4{color:var(--cyan);font-size:15px;margin-bottom:8px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid var(--line);padding:24px;border-radius:14px;transition:all .4s var(--ease)}.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(23,37,43,0.22)}.form-wrap{background:#fff;border:1px solid var(--line);padding:28px;border-radius:16px;box-shadow:0 16px 32px rgba(23,37,43,0.04);position:relative}.form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);border-radius:16px 16px 0 0}.input{width:100%;padding:12px 14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;font-size:14px}.input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(140,197,196,0.255)}.textarea{min-height:110px;resize:vertical}.field{margin-bottom:14px}.field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:5px;display:block}.error-msg{font-size:11px;color:#DC2626;display:none;margin-top:4px}.field.invalid .error-msg{display:block}.field.invalid .input{border-color:#DC2626}.form-status{margin-top:12px;padding:12px;border-radius:10px;font-size:13px;display:none}.form-status.success{display:block;background:#E0F2FE;color:#0C4A6E;border:1px solid #BAE6FD}.form-status.error{display:block;background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}.honey{position:absolute;left:-9999px}.footer{padding:48px 0 28px;background:var(--navy);color:rgba(255,255,255,0.65)}.footer .logo-img{height:52px !important;filter:none !important;max-width:160px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}.footer a{color:rgba(255,255,255,0.65);font-size:14px;line-height:2.2}.footer a:hover{color:#fff}.copy{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.22);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11.5px;color:rgba(255,255,255,0.4)}.reveal{opacity:0;transform:translateY(16px);transition:all .7s var(--ease)}.reveal.in{opacity:1;transform:translateY(0)}@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:40px}.hero-visual{order:-1;aspect-ratio:1.6/1}.pillars,.grid-3,.service-cols,.how-grid,.footer-grid{grid-template-columns:1fr}.nav{display:none;position:absolute;top:104px;left:0;right:0;background:var(--hero-dark-2);flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid rgba(255,255,255,0.22)}.nav.open{display:flex}.mobile-toggle{display:flex;align-items:center;justify-content:center}.service-item{grid-template-columns:1fr}.topbar-inner{height:84px}.platform-bar{top:84px}.section{padding:56px 0}.stats-bar{grid-template-columns:1fr}.logo-img{height:74px !important;max-width:220px}}
.hero-visual{perspective:1400px}
.hero-visual::before{content:'';position:absolute;left:50%;top:50%;width:90%;height:90%;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(140,197,196,0.26),transparent 65%);
filter:blur(36px);pointer-events:none;z-index:0}
.cube-card{transform-style:preserve-3d;will-change:transform;background:radial-gradient(circle at var(--lx,35%) var(--ly,30%),rgba(255,255,255,0.238),transparent 42%)}
/* heavy multi-axis rotate + filter glow removed for smoother 60fps */
@keyframes ambientPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
/* Brand cube breathing */
.cube3d{
animation:cubeBreath 6s ease-in-out infinite;
will-change:transform;
}
@keyframes cubeBreath{
0%,100%{transform:translateY(0) scale(1);}
50%{transform:translateY(-8px) scale(1.025);}
}
.photon-field{
position:absolute;inset:-120px;pointer-events:none;
}
.photon{
position:absolute;width:3px;height:3px;border-radius:50%;
background:#8CC5C4;
box-shadow:0 0 10px #00B0E0;
opacity:.75;
}
/* Full-page photon canvas */
#photonCanvas{
position:fixed;
inset:0;
width:100vw;
height:100vh;
pointer-events:none;
z-index:2;
}
.cube3d{position:relative;z-index:3;}
#photonCanvas{mix-blend-mode:screen;opacity:.95}
/* ===== Premium Section Reveals ===== */
.reveal{opacity:0;will-change:transform,opacity,filter}
.reveal.in{opacity:1;transition:900ms cubic-bezier(.22,1,.36,1)}
.fx-fadeup{transform:translateY(60px)}
.fx-fadeup.in{transform:none}
.fx-left{transform:translateX(-80px)}
.fx-left.in{transform:none}
.fx-right{transform:translateX(80px)}
.fx-right.in{transform:none}
.fx-scale{transform:scale(.92)}
.fx-scale.in{transform:scale(1)}
.fx-blur{filter:blur(14px);transform:scale(.98)}
.fx-blur.in{filter:blur(0);transform:none}
.fx-rotate{transform:translateY(40px) rotate(-4deg)}
.fx-rotate.in{transform:none}
.reveal,.reveal.in{
transition-property:opacity,transform,filter;
}
/* Premium micro interactions */
.stat-value.counting{font-variant-numeric:tabular-nums}
.hover-lift{
transition:transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease;
}
.hover-lift:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,0,0,0.26);
}
.image-reveal{
clip-path:inset(0 100% 0 0);
transition:clip-path 1.2s cubic-bezier(.22,1,.36,1);
}
.image-reveal.in{
clip-path:inset(0 0 0 0);
}
.draw-line{
position:relative;
overflow:hidden;
}
.draw-line::after{
content:"";
position:absolute;
left:0;bottom:0;
height:2px;width:100%;
background:currentColor;
transform:scaleX(0);
transform-origin:left;
transition:transform .9s ease;
}
.draw-line.in::after{transform:scaleX(1);}
/* Header spacing refinement */
header nav,
.navbar,
.header-nav{
gap:clamp(20px,2vw,36px);
}
header .container,
.navbar .container{
display:flex;
align-items:center;
justify-content:space-between;
}
header nav a,
.navbar a{
padding:10px 4px;
letter-spacing:.02em;
}
.logo{
margin-right:20px;
}
.header-actions{
margin-left:24px;
display:flex;
align-items:center;
gap:14px;
}
/* Capability groups around hero cube + neural-network connectors */
.capability-group{
position:absolute;
width:30.6%;
min-width:150px;
min-height:46px;
padding:12px 18px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.22);
border-radius:999px;
color:#fff;
font-size:14px;
font-weight:600;
display:flex;
flex-direction:column;
justify-content:center;
transition:all .35s ease;
box-shadow:0 8px 24px rgba(0,0,0,0.26);
z-index:2;
animation:floatGroup 6s ease-in-out infinite;
}
.capability-group small{display:none;color:#D9A98A;font-weight:400;margin-top:8px}
.capability-group:hover{border-color:rgba(98,92,112,0.6);transform:translateY(-4px);border-radius:24px;min-height:120px;animation-play-state:paused;z-index:5}
.capability-group:hover small{display:block;line-height:1.5}
.capability-group.g1{top:1.6%;left:34.7%;animation-delay:0s}
.capability-group.g2{top:17.7%;left:0;animation-delay:.9s}
.capability-group.g3{top:17.7%;right:0;animation-delay:1.8s}
.capability-group.g4{bottom:15.3%;left:0;animation-delay:2.7s}
.capability-group.g5{bottom:15.3%;right:0;animation-delay:3.6s}
.capability-group.g6{bottom:1.6%;left:34.7%;animation-delay:4.5s}
@keyframes floatGroup{0%,100%{translate:0 0}50%{translate:0 -6px}}
.neuro-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.neuro-line{stroke:rgba(62,125,130,0.22);stroke-width:1.5;fill:none}
.neuro-pulse{stroke:var(--cyan);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:6 94;filter:drop-shadow(0 0 4px rgba(140,197,196,0.85));animation:neuroFlow 2.8s linear infinite}
@keyframes neuroFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.capability-group,.neuro-pulse{animation:none !important}}
.capability-group,.neuro-svg{display:none!important;}
.hero-visual{display:flex;align-items:center;justify-content:center;}
.cube-card{will-change:transform;animation:heroFloat 8s ease-in-out infinite;}
.cube-logo{will-change:transform;animation:heroBreath 6s ease-in-out infinite;}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(140,197,196,0.26),transparent 42%);pointer-events:none;}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes heroBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
/* ===== Performance & smoothness polish ===== */
#photonCanvas{
position:fixed;
inset:0;
width:100vw;
height:100vh;
pointer-events:none;
z-index:2;
mix-blend-mode:screen;
opacity:.55; /* lower visual cost */
will-change:contents;
}
/* Prefer compositing layers only where needed */
.cube-card{
will-change:transform;
backface-visibility:hidden;
}
.cube-logo{
will-change:transform;
backface-visibility:hidden;
}
/* Soften expensive continuous filter animations on low-power */
@media (max-width:980px){
.cube-card{animation:heroFloat 10s ease-in-out infinite !important;}
.cube-logo{animation:heroBreath 8s ease-in-out infinite !important;}
.hero-visual::before{animation:none !important;filter:none !important;}
#photonCanvas{opacity:.35;}
}
/* Stronger reduced-motion: kill continuous motion */
@media (prefers-reduced-motion:reduce){
.cube-card,
.cube-logo,
.hero-visual::before,
.dot,
.capability-group,
.neuro-pulse{
animation:none !important;
}
#photonCanvas{display:none !important;}
.reveal{
opacity:1 !important;
transform:none !important;
filter:none !important;
transition:none !important;
}
.hover-lift:hover{transform:none !important;box-shadow:none !important;}
}
/* Reveal transitions — stick to opacity + transform only */
.reveal{
opacity:0;
will-change:transform,opacity;
transition:opacity 700ms cubic-bezier(.22,1,.36,1),
transform 700ms cubic-bezier(.22,1,.36,1);
}
.reveal.in{
opacity:1;
transform:none;
filter:none;
}
.fx-fadeup{transform:translateY(36px)}
.fx-left{transform:translateX(-40px)}
.fx-right{transform:translateX(40px)}
.fx-scale{transform:scale(.96)}
.fx-blur{transform:translateY(20px)} /* drop expensive blur filter */
.fx-rotate{transform:translateY(24px)}
/* Hover lift — GPU friendly */
.hover-lift{
transition:transform .3s cubic-bezier(.22,1,.36,1),
box-shadow .3s ease;
}
.hover-lift:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,0.238);
}
/* Image reveal without layout thrash */
.image-reveal{
clip-path:inset(0 100% 0 0);
transition:clip-path 1s cubic-bezier(.22,1,.36,1);
}
.image-reveal.in{
clip-path:inset(0 0 0 0);
}
/* Logo sizing safety after compression */
.logo-img{height:100px;width:auto;max-width:300px;}
.cube-logo{max-width:100%;height:auto;}
.footer .logo-img{height:44px !important;max-width:140px;}
/* Missing utility styles used in markup */
.section-eyebrow{
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
font-weight:700;
color:var(--blue);
margin-bottom:10px;
}
.section-intro{
max-width:640px;
color:var(--muted);
margin:12px 0 28px;
font-size:17px;
}
.platform-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.platform-grid span{
font-size:13px;
font-weight:600;
padding:10px 16px;
border-radius:100px;
background:var(--bg-soft);
border:1px solid var(--line);
color:var(--ink);
transition:border-color .25s, transform .25s;
}
.platform-grid span:hover{
border-color:var(--blue);
transform:translateY(-2px);
}
.breadcrumb{
font-size:13px;
color:var(--muted);
margin-bottom:12px;
}
.breadcrumb a{color:var(--blue);}
.prose h3{margin:20px 0 8px;font-size:18px;}
.prose p{margin-bottom:12px;color:var(--muted);}
.hairline{height:1px;background:var(--line);}
/* ===== New logo palette polish ===== */
:root{
--glow-cyan: rgba(140,197,196,0.45);
--glow-purple: rgba(98,92,112,0.35);
}
/* Header logo sits better with square mark */
.topbar-inner{height:110px}
.platform-bar{top:110px}
@media(max-width:980px){
.topbar-inner{height:84px}
.platform-bar{top:84px}
.nav{top:84px}
}
/* Cube hero visual — cyan ambient matching logo glow */
.hero-visual::before{
background:radial-gradient(circle,rgba(140,197,196,0.24),transparent 68%) !important;
}
.hero-visual::after{
background:radial-gradient(circle,rgba(98,92,112,0.22),transparent 70%) !important;
}
.cube-logo{
filter:drop-shadow(0 20px 50px rgba(140,197,196,0.55)) drop-shadow(0 0 30px rgba(98,92,112,0.25));
}
/* Gradient text & accents feel cooler */
.hero-badge,.hero h1 .grad,.pillar-num{
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
}
/* Soft section background slightly cooler */
.section-soft{background:linear-gradient(180deg,#F2F0E9 0%,#fff 100%)}
/* Cards pick up subtle blue border on hover */
.card:hover,.pillar:hover{
border-color:rgba(140,197,196,0.25);
}
/* Platform pills */
.platform-grid span:hover{
border-color:var(--cyan);
color:var(--navy);
background:rgba(140,197,196,0.22);
}
/* Form gradient top bar already uses --grad */
/* Favicon-friendly: ensure icon is crisp */
link[rel="icon"]{/* noop */}
/* ===== Premium hero cube (sample-inspired, logo palette) ===== */
html, body { overflow-x: hidden; max-width: 100vw; }
.logo-img {
height: 96px !important;
width: auto !important;
max-width: 300px !important;
object-fit: contain !important;
}
.footer .logo-img {
height: 72px !important;
max-width: 200px !important;
filter: none !important;
}
.topbar-inner { height: 114px !important; }
.platform-bar { top: 114px !important; }
@media (max-width: 980px) {
.logo-img { height: 70px !important; max-width: 210px !important; }
.topbar-inner { height: 88px !important; }
.platform-bar { top: 88px !important; }
.nav { top: 88px !important; }
}
.hero-section {
width: 100% !important;
max-width: 100vw !important;
overflow: hidden !important;
background: radial-gradient(120% 100% at 70% 20%, #16221F 0%, #0E1715 55%, #0A100E 100%) !important;
}
.hero-section::before {
background-image: none !important; /* cleaner, less grid noise */
background: radial-gradient(ellipse 80% 60% at 75% 40%, rgba(140,197,196,0.22), transparent 60%) !important;
}
.hero::before { display: none !important; }
.hero-visual {
position: relative !important;
width: 100% !important;
max-width: 540px !important;
aspect-ratio: 1 / 1.05 !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
perspective: 1400px !important;
}
/* Soft floor glow under cube */
.cube-glow {
position: absolute;
left: 50%;
bottom: 8%;
width: 70%;
height: 28%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(140,197,196,0.35) 0%, rgba(98,92,112,0.22) 45%, transparent 70%);
filter: blur(18px);
z-index: 0;
pointer-events: none;
}
/* Orbital rings (like sample) */
.cube-orbit {
position: absolute;
left: 50%;
bottom: 6%;
width: 92%;
height: 42%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
.orbit {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
border: 1.5px solid rgba(140,197,196,0.22);
transform: translate(-50%, -50%) rotateX(72deg);
box-shadow: 0 0 12px rgba(140,197,196,0.22);
}
.orbit-1 { width: 42%; height: 42%; border-color: rgba(140,197,196,0.4); }
.orbit-2 { width: 68%; height: 68%; border-color: rgba(62,125,130,0.28); }
.orbit-3 { width: 94%; height: 94%; border-color: rgba(98,92,112,0.26); }
.cube-card {
position: relative !important;
z-index: 3 !important;
width: 78% !important;
max-width: 420px !important;
aspect-ratio: 1 / 1 !important;
display: grid !important;
place-items: center !important;
background: none !important;
border: none !important;
padding: 0 !important;
transform-style: preserve-3d !important;
will-change: transform !important;
animation: heroFloat 8s ease-in-out infinite !important;
backface-visibility: hidden !important;
}
.cube-logo {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain !important;
background: transparent !important;
filter:
drop-shadow(0 25px 50px rgba(140,197,196,0.4))
drop-shadow(0 8px 24px rgba(98,92,112,0.25)) !important;
animation: heroBreath 6.5s ease-in-out infinite !important;
will-change: transform !important;
backface-visibility: hidden !important;
image-rendering: auto;
}
/* Tiny floating pixel particles around cube (CSS, light) */
.cube-particles {
position: absolute;
inset: 8% 5%;
z-index: 2;
pointer-events: none;
background-image:
radial-gradient(circle, #8CC5C4 1.2px, transparent 1.2px),
radial-gradient(circle, #625C70 1px, transparent 1px),
radial-gradient(circle, #7adfff 1.4px, transparent 1.4px),
radial-gradient(circle, #3E7D82 1px, transparent 1px);
background-size: 90px 90px, 120px 120px, 70px 70px, 150px 150px;
background-position: 10% 20%, 80% 30%, 25% 70%, 70% 75%;
opacity: 0.55;
animation: particleDrift 14s ease-in-out infinite alternate;
mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%);
}
@keyframes particleDrift {
0% { transform: translateY(0) scale(1); opacity: .45; }
100% { transform: translateY(-10px) scale(1.03); opacity: .7; }
}
@keyframes heroFloat {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -14px, 0); }
}
@keyframes heroBreath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* Photon field stronger + brand cyan */
#photonCanvas {
opacity: 0.8 !important;
mix-blend-mode: screen !important;
z-index: 1 !important;
}
/* Hide legacy rings if any remain */
.cube-rings { display: none !important; }
.hero-visual::before,
.hero-visual::after {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
.cube-card, .cube-logo, .cube-particles { animation: none !important; }
#photonCanvas { display: none !important; }
}
@media (max-width: 980px) {
.hero-visual { max-width: 380px !important; margin-bottom: 12px; }
.cube-card { max-width: 300px !important; }
}
/* ===== Chrome / Chromium visibility + quality fixes ===== */
/* Avoid filter+3D transform on same layer (Chrome GPU bug) */
.cube-card {
transform-style: preserve-3d !important;
/* no filter here */
filter: none !important;
}
.cube-logo {
filter: none !important; /* drop-shadow moved to pseudo glow */
display: block !important;
width: 100% !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
/* force independent layer without filter */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Glow via parent shadow box instead of filter on img */
.cube-card::after {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: 2%;
height: 18%;
background: radial-gradient(ellipse at center, rgba(140,197,196,0.5), rgba(98,92,112,0.255) 50%, transparent 70%);
filter: blur(16px);
z-index: -1;
pointer-events: none;
border-radius: 50%;
}
/* Header logo must stay opaque and unfiltered */
.logo-img {
filter: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
height: 100px !important;
max-width: 320px !important;
width: auto !important;
object-fit: contain !important;
/* prevent Chrome subpixel disappearing */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.topbar .logo-img {
/* ensure contrast on dark bar */
background: transparent !important;
}
.footer .logo-img {
height: 72px !important;
max-width: 200px !important;
filter: none !important;
}
/* Photon: screen blend can hide on some Chrome GPUs — soften */
#photonCanvas {
mix-blend-mode: screen !important;
opacity: 0.7 !important;
pointer-events: none !important;
}
/* Ensure hero visual doesn't clip SVG */
.hero-visual {
overflow: visible !important;
}
.cube-card img,
.cube-logo {
max-width: 100%;
height: auto;
}
/* ===== Chromium fix: header logo + hero cube invisible in Chrome only ===== */
/* Root cause: main.js was applying the scroll-reveal effect (.image-reveal, which
starts at clip-path:inset(0 100% 0 0) — i.e. fully clipped/invisible — and only
un-clips once an IntersectionObserver marks it .in) to EVERY ![]()
on the page,
including the header/footer logo and the hero cube image. Combined with the
cube's GPU-promoted layer (will-change + backface-visibility + preserve-3d),
Chromium was not consistently repainting the clip-path change on that layer, so
the element stayed clipped to zero width forever. Firefox happened to repaint
it correctly, which is why the same markup looked fine there. main.js has been
updated to never apply .image-reveal to these elements; this rule is a hard
safety net so they can never be hidden this way again, in any browser. */
.logo-img,
.cube-logo,
.tech-logo-stage img,
.service-mark-stage img {
clip-path: none !important;
-webkit-clip-path: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* New brand logo sizing + visibility */
.logo-img {
height: 88px !important;
width: auto !important;
max-width: 280px !important;
object-fit: contain !important;
filter: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
background: transparent !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.topbar-inner { height: 108px !important; }
.platform-bar { top: 108px !important; }
.footer .logo-img {
height: 64px !important;
max-width: 200px !important;
filter: none !important;
}
@media (max-width: 980px) {
.logo-img { height: 64px !important; max-width: 200px !important; }
.topbar-inner { height: 84px !important; }
.platform-bar { top: 84px !important; }
}
/* Hero uses real brand cube PNG */
.cube-logo {
filter: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
.cube-card {
filter: none !important;
max-width: 400px !important;
width: 82% !important;
}
/* ===== Achievement stats (hero) ===== */
.stats-bar{
margin-top:36px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.stat-achieve{
position:relative;
display:flex;
gap:14px;
align-items:flex-start;
padding:20px 18px 18px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.22);
border-radius:16px;
overflow:hidden;
cursor:default;
transition:transform .35s cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.stat-achieve::after{
content:'';
position:absolute;
left:18px;
right:18px;
bottom:0;
height:2px;
background:var(--grad);
transform:scaleX(0);
transform-origin:left;
transition:transform .45s cubic-bezier(.22,1,.36,1);
border-radius:2px;
}
.stat-achieve:hover{
transform:translateY(-6px);
border-color:rgba(140,197,196,0.35);
background:rgba(255,255,255,0.06);
box-shadow:0 16px 40px rgba(140,197,196,0.22), 0 0 0 1px rgba(140,197,196,0.22);
}
.stat-achieve:hover::after{
transform:scaleX(1);
}
.stat-icon{
flex-shrink:0;
width:42px;
height:42px;
border-radius:12px;
display:grid;
place-items:center;
color:#7adfff;
background:linear-gradient(135deg,rgba(140,197,196,0.238),rgba(98,92,112,0.22));
border:1px solid rgba(140,197,196,0.22);
box-shadow:0 0 20px rgba(140,197,196,0.255);
transition:transform .35s ease, box-shadow .35s ease;
}
.stat-achieve:hover .stat-icon{
transform:scale(1.06);
box-shadow:0 0 28px rgba(140,197,196,0.28);
}
.stat-body{min-width:0}
.stat-achieve .stat-num{
font-size:28px;
font-weight:800;
line-height:1.1;
letter-spacing:-.02em;
background:var(--grad);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
font-variant-numeric:tabular-nums;
}
.stat-label{
margin-top:4px;
font-weight:700;
font-size:13px;
color:#fff;
letter-spacing:.01em;
}
.stat-achieve .small{
margin-top:2px;
font-size:12px;
color:rgba(255,255,255,0.5);
line-height:1.4;
}
@media(max-width:980px){
.stats-bar{grid-template-columns:1fr;gap:10px}
.stat-achieve{padding:16px}
}
/* ===== Monochrome tech symbols strip ===== */
.trusted-strip{
background:var(--hero-dark);
padding:42px 0 48px;
border-top:1px solid rgba(255,255,255,0.06);
}
.trusted-label{
text-align:center;
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:rgba(255,255,255,0.35);
font-weight:700;
}
.tech-symbols{
margin-top:28px;
display:flex;
justify-content:center;
align-items:stretch;
gap:12px 18px;
flex-wrap:wrap;
}
.tech-item{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
min-width:72px;
padding:12px 10px 10px;
border-radius:14px;
color:rgba(255,255,255,0.42);
transition:color .3s ease, background .3s ease, transform .3s ease;
}
.tech-item:hover{
color:rgba(255,255,255,0.92);
background:rgba(255,255,255,0.04);
transform:translateY(-3px);
}
.tech-mark{
width:40px;
height:32px;
display:grid;
place-items:center;
}
.tech-mark svg{
width:36px;
height:28px;
display:block;
}
.tech-name{
font-size:11px;
font-weight:600;
letter-spacing:.02em;
text-align:center;
white-space:nowrap;
}
/* ===== Trust & credibility ===== */
.ph-note{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(90,107,125,0.75);margin-left:4px}
.footer-contact a{color:rgba(255,255,255,0.65)}
.footer-contact a:hover{color:#fff}
.footer .ph-note{color:rgba(255,255,255,0.35)}
.trust-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.trust-metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 16px}
.trust-metric-value{font-size:28px;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.trust-metric-label{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.45}
.trust-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.trust-logo-slot{display:grid;place-items:center;min-height:72px;border:1px dashed var(--line-strong);border-radius:12px;background:rgba(255,255,255,0.7);font-size:12px;font-weight:600;color:var(--muted)}
.trust-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.trust-chips span{font-size:12px;font-weight:600;padding:6px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.testimonial-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:16px}
.testimonial-card blockquote{margin:0;font-size:15px;line-height:1.65;color:var(--ink)}
.testimonial-card figcaption{display:flex;gap:12px;align-items:center}
.t-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--grad);flex-shrink:0}
.t-name{font-size:14px;font-weight:700}
.t-role{font-size:12px;color:var(--muted);margin-top:2px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.team-photo{height:140px;border-radius:12px;background:var(--bg-soft);border:1px dashed var(--line-strong);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:14px}
.team-card h3{font-size:17px;margin-bottom:4px}
.team-title{font-size:13px;font-weight:600;color:var(--blue);margin-bottom:10px}
.team-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--blue)}
.team-link:hover{text-decoration:underline}
.trust-list{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.8}
.trust-list a{color:var(--blue);font-weight:600}
.legal-page{max-width:800px}
.legal-body{margin-top:28px}
.legal-body h2{font-size:22px;margin:28px 0 10px}
.legal-body p{color:var(--muted);margin-bottom:12px;line-height:1.7}
.legal-body a{color:var(--blue)}
@media(max-width:980px){
.trust-metrics,.trust-logos,.testimonial-grid,.team-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.trust-metrics,.trust-logos,.testimonial-grid,.team-grid{grid-template-columns:1fr}
}
/* ===== Accessibility (WCAG 2.2 AA) ===== */
.skip-link{
position:absolute;
left:12px;
top:12px;
z-index:10000;
padding:12px 18px;
background:#fff;
color:#17252B;
font-weight:700;
font-size:14px;
border-radius:10px;
border:2px solid #8CC5C4;
box-shadow:0 8px 24px rgba(23,37,43,0.26);
transform:translateY(-150%);
transition:transform .2s ease;
}
.skip-link:focus{
transform:translateY(0);
outline:3px solid #625C70;
outline-offset:3px;
}
/* Consistent focus ring — do not remove outlines sitewide */
:focus{outline:none}
:focus-visible{
outline:3px solid #8CC5C4;
outline-offset:3px;
border-radius:4px;
}
.btn:focus-visible,
.btn-cta:focus-visible{
outline:3px solid #D9A98A;
outline-offset:3px;
box-shadow:0 0 0 6px rgba(140,197,196,0.25);
}
.input:focus-visible,
select.input:focus-visible,
textarea.input:focus-visible{
outline:3px solid #8CC5C4;
outline-offset:2px;
border-color:#3E7D82;
}
.nav a:focus-visible{
outline:3px solid #8CC5C4;
outline-offset:6px;
border-radius:4px;
}
.platform-inner a:focus-visible{
outline:2px solid #8CC5C4;
outline-offset:-2px;
}
.card:focus-within,
.pillar:focus-within,
.testimonial-card:focus-within,
.team-card:focus-within{
box-shadow:0 0 0 3px rgba(140,197,196,0.35);
}
/* Error text contrast */
.error-msg{color:#B91C1C}
.form-status.error{color:#7F1D1D;background:#FEE2E2;border-color:#FECACA}
.form-status.success{color:#0C4A6E;background:#E0F2FE;border-color:#BAE6FD}
/* Improve muted text slightly for AA on white where practical */
.small{color:#4A5B6C}
/* Mobile nav open state */
.nav.open{display:flex}
body.nav-open{overflow:hidden}
/* Reduced motion — comprehensive */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
.reveal{opacity:1 !important;transform:none !important;filter:none !important}
.cube-card,.stat-achieve,.hover-lift{transition:none !important}
.dnode,.orbit,.photon{animation:none !important}
}
/* Perf: content-visibility for below-fold sections */
.section:not(.hero-section){
content-visibility:auto;
contain-intrinsic-size:1px 800px;
}
img{max-width:100%;height:auto}
/* =========================================================
Premium UI polish — spacing, type, motion, components
========================================================= */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--radius-sm:10px;
--radius-md:14px;
--radius-lg:18px;
--radius-pill:999px;
--shadow-sm:0 4px 16px rgba(23,37,43,0.06);
--shadow-md:0 12px 32px rgba(23,37,43,0.22);
--shadow-lg:0 20px 48px rgba(23,37,43,0.22);
--shadow-glow:0 16px 40px rgba(140,197,196,0.26);
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-soft:cubic-bezier(.16,1,.3,1);
}
/* Type rhythm */
body{
font-size:16.5px;
line-height:1.7;
letter-spacing:-0.01em;
}
h1{
line-height:1.05;
letter-spacing:-0.035em;
text-wrap:balance;
}
h2, .section-title{
line-height:1.12;
letter-spacing:-0.03em;
text-wrap:balance;
}
h3{
line-height:1.25;
letter-spacing:-0.02em;
text-wrap:balance;
}
p{text-wrap:pretty}
.section-intro{
margin-top:var(--space-4);
max-width:640px;
font-size:17.5px;
line-height:1.7;
color:var(--muted);
}
.kicker{
letter-spacing:.14em;
padding:7px 14px;
}
/* Section vertical rhythm */
.section{padding:var(--space-9) 0}
.section-soft{padding:var(--space-9) 0}
.hero{padding:96px 0 72px;gap:56px}
.hero-lead, .hero p{
font-size:18px;
line-height:1.7;
max-width:540px;
}
.hero-ctas{margin-top:var(--space-6);gap:14px}
.hero .btn-primary{
box-shadow:0 10px 28px rgba(140,197,196,0.28);
}
.hero .btn-primary:hover{
box-shadow:0 16px 40px rgba(140,197,196,0.38);
transform:translateY(-3px);
}
/* Buttons — unified micro-interactions */
.btn{
border-radius:var(--radius-sm);
padding:15px 26px;
transition:
transform .35s var(--ease-out),
box-shadow .35s var(--ease-out),
background .25s ease,
border-color .25s ease,
color .25s ease;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn-cta{
transition:
transform .35s var(--ease-out),
box-shadow .35s var(--ease-out),
filter .25s ease !important;
}
.btn-cta:hover{
filter:brightness(1.05);
box-shadow:0 14px 32px rgba(140,197,196,0.32);
}
/* Cards & surfaces */
.card,
.pillar,
.cap-card,
.testimonial-card,
.team-card,
.proof-card,
.trust-metric,
.form-wrap,
.how-card{
border-radius:var(--radius-lg);
}
.card,
.pillar,
.cap-card,
.testimonial-card,
.team-card,
.proof-card,
.trust-metric{
padding:var(--space-5);
transition:
transform .4s var(--ease-out),
box-shadow .4s var(--ease-out),
border-color .3s ease;
}
.card:hover,
.pillar:hover,
.cap-card:hover,
.proof-card:hover,
.team-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-md);
border-color:rgba(140,197,196,0.22);
}
.cap-icon,
.stat-icon{
width:44px;
height:44px;
border-radius:12px;
}
/* Grids */
.pillars,
.capability-grid,
.grid-3,
.proof-grid,
.testimonial-grid,
.team-grid,
.trust-metrics{
gap:var(--space-4);
margin-top:var(--space-6);
}
/* Hero cube depth */
.hero-visual{
filter:drop-shadow(0 30px 60px rgba(140,197,196,0.255));
}
.cube-card{
animation:heroFloat 9s var(--ease-soft) infinite;
}
.cube-logo{
animation:heroBreath 7s var(--ease-soft) infinite;
filter:drop-shadow(0 24px 48px rgba(140,197,196,0.45));
}
.hero-section::after{
content:'';
position:absolute;
inset:auto 0 0 0;
height:120px;
background:linear-gradient(to bottom,transparent,rgba(6,14,28,0.35));
pointer-events:none;
}
/* Stats */
.stat-achieve{
border-radius:var(--radius-lg);
padding:20px 18px;
}
.stat-achieve:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(140,197,196,0.238);
}
/* Nav polish */
.topbar{
backdrop-filter:blur(12px);
background:rgba(6,14,28,0.92);
transition:box-shadow .3s ease, background .3s ease;
}
.topbar.is-scrolled{
box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.nav a{
transition:color .25s ease;
}
.nav a:not(.btn)::after{
transition:right .35s var(--ease-out);
}
.nav.open{
animation:navIn .35s var(--ease-out);
}
@keyframes navIn{
from{opacity:0;transform:translateY(-8px)}
to{opacity:1;transform:translateY(0)}
}
.mobile-toggle{
transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
.mobile-toggle:hover{
background:rgba(255,255,255,0.22);
border-color:rgba(255,255,255,0.28);
}
.mobile-toggle:active{transform:scale(.96)}
/* Forms */
.input,
select.input,
textarea.input{
border-radius:var(--radius-sm);
padding:13px 14px;
transition:
border-color .25s ease,
box-shadow .25s ease,
background .25s ease;
}
.input:hover{
border-color:rgba(23,37,43,0.26);
}
.input:focus,
.input:focus-visible{
border-color:var(--blue);
box-shadow:0 0 0 4px rgba(140,197,196,0.26);
background:#fff;
}
.form-wrap{
box-shadow:var(--shadow-sm);
padding:var(--space-6);
}
.form-status{
transition:opacity .3s ease, transform .3s ease;
animation:statusIn .35s var(--ease-out);
}
@keyframes statusIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
.field{margin-bottom:var(--space-4)}
.field label{
letter-spacing:.1em;
margin-bottom:6px;
}
/* Footer */
.footer{padding:var(--space-8) 0 var(--space-6)}
.footer-grid{gap:var(--space-6)}
.footer a{
transition:color .25s ease;
}
.copy{
margin-top:var(--space-7);
padding-top:var(--space-5);
font-size:12px;
}
/* Scroll reveals — calmer */
.reveal{
transition:
opacity .8s var(--ease-out),
transform .8s var(--ease-out),
filter .8s var(--ease-out);
}
.fx-fadeup{transform:translateY(28px)}
.fx-left{transform:translateX(-32px)}
.fx-right{transform:translateX(32px)}
.fx-scale{transform:scale(.97)}
/* Service items */
.service-item{
padding:var(--space-6) 0;
transition:background .3s ease;
}
.service-title{
transition:color .25s ease;
}
.service-item:hover .service-title{color:var(--blue)}
/* Platform bar */
.platform-inner a{
transition:color .2s ease, background .2s ease;
}
/* Testimonials / team already structured — refine */
.testimonial-card blockquote{
font-size:15.5px;
line-height:1.7;
}
.team-photo{
transition:border-color .3s ease, background .3s ease;
}
.team-card:hover .team-photo{
border-color:rgba(140,197,196,0.35);
}
/* Trusted strip */
.trusted-strip{padding:48px 0 52px}
.tech-item{
transition:color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
/* Legal pages */
.legal-body h2{margin-top:var(--space-6)}
.legal-body p{line-height:1.75}
/* Mobile refinements */
@media (max-width:980px){
.section,
.section-soft{padding:var(--space-8) 0}
.hero{padding:48px 0 56px;gap:var(--space-6)}
.hero-ctas .btn{width:100%;justify-content:center}
.nav{
top:84px;
padding:var(--space-5);
gap:var(--space-4);
}
.nav a{
padding:12px 4px;
min-height:44px;
display:flex;
align-items:center;
}
.mobile-toggle{
width:44px;
height:44px;
}
.footer-grid{gap:var(--space-5)}
.form-wrap{padding:var(--space-5)}
}
@media (max-width:600px){
body{font-size:16px}
h1{font-size:clamp(34px,10vw,48px)}
.stats-bar{gap:10px}
.trust-metrics,
.testimonial-grid,
.team-grid{gap:12px}
}
/* Touch targets */
@media (pointer:coarse){
.nav a:not(.btn),
.platform-inner a,
.footer a{
min-height:44px;
display:inline-flex;
align-items:center;
}
.btn{min-height:48px}
}
/* Reduced motion already handled globally — keep polish calm */
@media (prefers-reduced-motion:reduce){
.nav.open{animation:none}
.form-status{animation:none}
.hero-section::after{display:none}
}
/* =========================================================
Homepage polish — section rhythm, placeholders, wave, cards
========================================================= */
/* 2. Section background rhythm */
#trust{
padding-top:64px;
padding-bottom:64px;
}
#testimonials{
background:linear-gradient(180deg,#ffffff 0%,var(--bg-soft) 100%);
}
#team{
/* inherits section-soft */
}
/* 3. Designed empty states for logo / photo slots */
.trust-logo-slot,
.team-photo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
text-align:center;
}
.slot-icon{
width:28px;
height:28px;
color:var(--muted);
opacity:.72;
flex-shrink:0;
}
.trust-logo-slot{
min-height:88px;
padding:14px 10px;
}
.team-photo{
height:170px;
margin-bottom:16px;
gap:10px;
}
/* 4. Dark strip → light content wave divider */
.trusted-strip{
position:relative;
padding-bottom:72px; /* room for wave */
overflow:hidden;
}
.trusted-strip .strip-wave{
position:absolute;
left:0;
right:0;
bottom:-1px;
width:100%;
height:48px;
display:block;
pointer-events:none;
z-index:1;
}
/* 5. Testimonial elevation + team card proportion */
.testimonial-card{
box-shadow:0 12px 24px rgba(23,37,43,0.06);
border-color:rgba(23,37,43,0.22);
}
.testimonial-card:hover{
box-shadow:0 16px 36px rgba(23,37,43,0.22);
}
.team-card{
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
.team-card .team-photo{
width:100%;
}
.team-card h3,
.team-card .team-title,
.team-card .small{
text-align:center;
}
.team-card .team-link{
align-self:center;
}
@media (max-width:980px){
#trust{
padding-top:48px;
padding-bottom:48px;
}
.trusted-strip{
padding-bottom:64px;
}
.trusted-strip .strip-wave{
height:36px;
}
.team-photo{
height:150px;
}
}
@media (max-width:600px){
.team-photo{
height:140px;
}
}
/* Contact CTA two-column — responsive */
.contact-cta-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:48px;
align-items:start;
}
@media (max-width:980px){
.contact-cta-grid{
grid-template-columns:1fr;
gap:28px;
}
}
/* =========================================================
Shared page header + About page
========================================================= */
.page-header{
position:relative;
overflow:hidden;
background:radial-gradient(120% 100% at 70% 20%,var(--hero-dark-2) 0%,var(--hero-dark) 55%,#0A100E 100%);
color:#fff;
padding:56px 0 64px;
min-height:220px;
display:flex;
align-items:center;
}
.page-header::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);
background-size:42px 42px;
-webkit-mask-image:radial-gradient(70% 70% at 68% 35%,#000,transparent);
mask-image:radial-gradient(70% 70% at 68% 35%,#000,transparent);
pointer-events:none;
}
.page-header-inner{
position:relative;
z-index:2;
max-width:820px;
}
.page-header .kicker{
background:rgba(255,255,255,0.22);
color:var(--cyan);
border-color:rgba(255,255,255,0.22);
}
.page-header h1{
margin-top:16px;
color:#fff;
font-size:clamp(32px,4.5vw,52px);
line-height:1.08;
letter-spacing:-.035em;
font-weight:800;
text-wrap:balance;
}
.page-header-deco{
position:absolute;
right:4%;
bottom:-12%;
width:180px;
height:auto;
opacity:.15;
pointer-events:none;
z-index:1;
user-select:none;
}
/* About body */
.about-intro{
margin-top:0;
max-width:640px;
font-size:17px;
line-height:1.7;
color:var(--muted);
}
.about-principles{
margin-top:40px;
}
/* Founding timeline */
.about-timeline{
list-style:none;
margin:36px 0 0;
padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
position:relative;
}
.about-timeline::before{
content:'';
position:absolute;
top:28px;
left:calc(16.66% + 8px);
right:calc(16.66% + 8px);
height:2px;
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--purple));
opacity:.45;
z-index:0;
pointer-events:none;
}
.about-timeline-step{
position:relative;
z-index:1;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg,16px);
padding:22px 20px 20px;
margin:0 8px;
text-align:center;
transition:transform .35s var(--ease-out,cubic-bezier(.22,1,.36,1)),
box-shadow .35s ease,
border-color .3s ease;
}
.about-timeline-step:hover{
transform:translateY(-4px);
box-shadow:0 16px 32px rgba(23,37,43,0.22);
border-color:rgba(140,197,196,0.25);
}
.about-timeline-num{
display:inline-grid;
place-items:center;
width:36px;
height:36px;
margin-bottom:12px;
border-radius:50%;
font-size:13px;
font-weight:800;
color:#fff;
background:var(--grad);
box-shadow:0 0 0 4px rgba(140,197,196,0.22);
}
.about-timeline-step h3{
font-size:16px;
margin-bottom:8px;
letter-spacing:-.02em;
}
.about-timeline-step .small{
margin:0;
}
/* Honesty callout */
.about-callout{
margin:40px 0 0;
max-width:720px;
padding:22px 24px 22px 26px;
background:var(--bg-soft);
border:1px solid var(--line);
border-left:4px solid var(--cyan);
border-radius:0 14px 14px 0;
box-shadow:0 8px 24px rgba(23,37,43,0.04);
}
.about-callout p{
margin:0;
font-size:17.5px;
line-height:1.65;
color:var(--ink);
font-weight:500;
letter-spacing:-.01em;
}
@media (max-width:980px){
.page-header{
padding:40px 0 48px;
min-height:180px;
}
.page-header h1{
font-size:clamp(28px,6vw,40px);
}
.page-header-deco{
width:120px;
right:2%;
opacity:.12;
}
.about-timeline{
grid-template-columns:1fr;
gap:14px;
}
.about-timeline::before{
display:none;
}
.about-timeline-step{
margin:0;
text-align:left;
display:grid;
grid-template-columns:36px 1fr;
grid-template-rows:auto auto;
column-gap:14px;
align-items:start;
}
.about-timeline-num{
grid-row:1 / span 2;
margin-bottom:0;
}
.about-timeline-step h3{
grid-column:2;
}
.about-timeline-step .small{
grid-column:2;
}
.about-callout{
padding:18px 18px 18px 20px;
}
.about-callout p{
font-size:16px;
}
}
@media (max-width:600px){
.page-header{
padding:32px 0 40px;
min-height:160px;
}
.page-header-deco{
display:none;
}
}
/* =========================================================
Services page — groups, icons, quick-nav
========================================================= */
.section-services{
padding-top:48px;
}
.services-intro{
max-width:640px;
font-size:17px;
line-height:1.7;
color:var(--muted);
margin:0;
}
.services-intro-sub{
max-width:640px;
font-size:15px;
line-height:1.65;
color:var(--muted);
margin:10px 0 0;
}
/* Category quick-nav pills */
.services-quick-nav{
display:flex;
flex-wrap:nowrap;
gap:8px;
margin:28px 0 8px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:4px;
}
.services-quick-nav::-webkit-scrollbar{display:none}
.services-quick-nav a{
flex:0 0 auto;
font-size:12px;
font-weight:600;
letter-spacing:.02em;
padding:8px 14px;
border-radius:999px;
background:#fff;
border:1px solid var(--line);
color:var(--muted);
transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
white-space:nowrap;
}
.services-quick-nav a:hover{
border-color:var(--cyan);
color:var(--navy);
background:rgba(140,197,196,0.22);
transform:translateY(-1px);
}
.services-quick-nav a:focus-visible{
outline:3px solid #8CC5C4;
outline-offset:2px;
}
/* Group headers */
.service-group{
margin-top:36px;
}
.service-group:first-child{
margin-top:20px;
}
.service-group-label{
display:flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--blue);
margin:0 0 4px;
padding:10px 0 6px 14px;
border-left:3px solid var(--cyan);
scroll-margin-top:140px;
}
.service-item{
scroll-margin-top:140px;
}
/* Icon + number column */
.service-meta{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.service-icon{
display:grid;
place-items:center;
width:40px;
height:40px;
border-radius:12px;
color:var(--blue);
background:linear-gradient(135deg,rgba(140,197,196,0.22),rgba(98,92,112,0.22));
border:1px solid rgba(140,197,196,0.26);
}
.service-icon svg{
width:22px;
height:22px;
display:block;
}
.service-title{
display:flex;
align-items:center;
gap:10px;
}
@media (max-width:980px){
.service-item{
grid-template-columns:1fr;
}
.service-meta{
flex-direction:row;
align-items:center;
gap:12px;
margin-bottom:4px;
}
.service-group-label,
.service-item{
scroll-margin-top:120px;
}
}
@media (max-width:600px){
.services-quick-nav{
margin-top:20px;
}
.service-group{
margin-top:28px;
}
}
/* =========================================================
Solutions — comparison table
========================================================= */
.solutions-intro{
max-width:640px;
font-size:17px;
line-height:1.7;
color:var(--muted);
margin:0 0 32px;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.compare-wrap{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg,18px);
overflow:hidden;
box-shadow:0 12px 32px rgba(23,37,43,0.05);
}
.compare-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
.compare-table thead th{
background:linear-gradient(180deg,var(--bg-soft) 0%,#fff 100%);
padding:22px 18px 18px;
text-align:center;
vertical-align:bottom;
border-bottom:1px solid var(--line-strong);
font-weight:700;
}
.compare-table thead th.compare-corner{
background:var(--bg-soft);
width:18%;
}
.compare-icon{
display:grid;
place-items:center;
width:40px;
height:40px;
margin:0 auto 10px;
border-radius:12px;
color:var(--blue);
background:linear-gradient(135deg,rgba(140,197,196,0.22),rgba(98,92,112,0.22));
border:1px solid rgba(140,197,196,0.26);
}
.compare-icon svg{
width:22px;
height:22px;
display:block;
}
.compare-model{
display:block;
font-size:15px;
letter-spacing:-.02em;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
.compare-table tbody th{
text-align:left;
font-size:13px;
font-weight:700;
color:var(--ink);
padding:16px 18px;
border-bottom:1px solid var(--line);
background:rgba(240,246,252,0.45);
vertical-align:top;
width:18%;
}
.compare-table tbody td{
padding:16px 18px;
font-size:14px;
line-height:1.55;
color:var(--muted);
border-bottom:1px solid var(--line);
vertical-align:top;
text-align:left;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{
border-bottom:none;
}
.compare-table tbody tr:hover td{
background:rgba(140,197,196,0.03);
}
.solutions-helper{
margin-top:36px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:16px 24px;
padding:22px 24px;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:var(--radius-lg,16px);
}
.solutions-helper p{
margin:0;
flex:1 1 280px;
font-size:16.5px;
line-height:1.55;
color:var(--ink);
font-weight:500;
max-width:560px;
}
/* Stacked mobile cards */
@media (max-width:720px){
.compare-wrap{
border:none;
background:transparent;
box-shadow:none;
overflow:visible;
}
.compare-table,
.compare-table thead,
.compare-table tbody,
.compare-table tr,
.compare-table th,
.compare-table td{
display:block;
width:100%;
}
.compare-table thead tr{
display:none;
}
/* One card per model column — we walk rows and show per-model via data-label.
Simpler approach: hide thead, show each body cell as labeled row grouped by...
Actually for true per-model cards we need a different structure on mobile.
Use column-oriented stacking: each td becomes a labeled field; group visually
by repeating model name from data-label as section headers is awkward.
Better: show three synthetic cards via CSS using the first-of-type pattern.
Practical approach used below: each becomes a row block with label + 3 values
still hard. Switch to card-per-column using nth-child visibility.
Final mobile pattern: each body row shows as:
[row label]
Model: value (for each td)
*/
.compare-table tbody tr{
background:#fff;
border:1px solid var(--line);
border-radius:14px;
margin-bottom:12px;
padding:14px 16px 8px;
box-shadow:0 8px 20px rgba(23,37,43,0.04);
}
.compare-table tbody th{
display:block;
width:100%;
background:transparent;
border:none;
padding:0 0 10px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--blue);
}
.compare-table tbody td{
display:block;
border:none;
border-top:1px solid var(--line);
padding:12px 0;
text-align:left;
}
.compare-table tbody td::before{
content:attr(data-label);
display:block;
font-size:12px;
font-weight:700;
color:var(--ink);
margin-bottom:4px;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{
border-bottom:none;
}
.solutions-helper{
flex-direction:column;
align-items:stretch;
text-align:left;
}
.solutions-helper .btn{
width:100%;
justify-content:center;
}
}
/* =========================================================
Industries page
========================================================= */
.industries-intro{
max-width:640px;
font-size:17px;
line-height:1.7;
color:var(--muted);
margin:0 0 8px;
}
.industry-grid{
margin-top:32px;
}
.industry-card{
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
border-top:3px solid transparent;
padding-top:calc(var(--space-5,24px) - 1px);
}
.industry-card.accent-blue{border-top-color:var(--blue)}
.industry-card.accent-cyan{border-top-color:var(--cyan)}
.industry-card.accent-purple{border-top-color:var(--purple)}
.industry-icon{
display:grid;
place-items:center;
width:44px;
height:44px;
margin-bottom:14px;
border-radius:12px;
color:var(--blue);
background:linear-gradient(135deg,rgba(140,197,196,0.22),rgba(98,92,112,0.22));
border:1px solid rgba(140,197,196,0.26);
flex-shrink:0;
}
.industry-card.accent-cyan .industry-icon{color:var(--cyan)}
.industry-card.accent-purple .industry-icon{color:var(--purple)}
.industry-icon svg{
width:24px;
height:24px;
display:block;
}
.industry-card h3{
margin:0 0 8px;
font-size:18px;
letter-spacing:-.02em;
}
.industry-card .small{
flex:1 1 auto;
margin:0;
}
.industry-links{
margin-top:16px;
display:flex;
flex-direction:column;
gap:6px;
}
.industry-links a{
font-size:13px;
font-weight:600;
color:var(--blue);
letter-spacing:.01em;
transition:color .2s ease, transform .2s ease;
display:inline-flex;
align-items:center;
min-height:28px;
}
.industry-links a:hover{
color:var(--navy);
transform:translateX(2px);
}
.industry-links a:focus-visible{
outline:3px solid #8CC5C4;
outline-offset:2px;
border-radius:4px;
}
@media (max-width:600px){
.industry-icon{
width:40px;
height:40px;
}
.industry-icon svg{
width:22px;
height:22px;
}
}
/* =========================================================
Portfolio — cards, accents, detail layout
========================================================= */
.section-portfolio{padding-top:48px}
.portfolio-intro{
max-width:640px;
font-size:17px;
line-height:1.7;
color:var(--muted);
margin:0 0 28px;
}
.portfolio-grid{margin-top:8px}
.portfolio-card{
display:block;
border-top:4px solid var(--blue);
transition:transform .35s var(--ease-out,cubic-bezier(.22,1,.36,1)),
box-shadow .35s ease,
border-color .3s ease;
}
.portfolio-card .tags{margin-top:16px}
.portfolio-card-title{
margin:12px 0;
font-size:18px;
letter-spacing:-.02em;
line-height:1.3;
}
/* Category accent colors */
.portfolio-card.accent-snowflake,
.portfolio-side-card.accent-snowflake{border-top-color:#3E7D82}
.portfolio-card.accent-dba,
.portfolio-side-card.accent-dba{border-top-color:#8CC5C4}
.portfolio-card.accent-databricks,
.portfolio-side-card.accent-databricks{border-top-color:#625C70}
.portfolio-card.accent-integration,
.portfolio-side-card.accent-integration{border-top-color:#426B5A}
.portfolio-card.accent-managed,
.portfolio-side-card.accent-managed{border-top-color:#5A6B7D}
.portfolio-card.accent-engineering,
.portfolio-side-card.accent-engineering{border-top-color:#D9A98A}
.portfolio-card.accent-default,
.portfolio-side-card.accent-default{border-top-color:var(--blue)}
.portfolio-cat-chip{
display:inline-flex;
align-items:center;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
padding:6px 12px;
border-radius:999px;
border:1px solid var(--line);
background:var(--bg-soft);
color:var(--ink);
margin-top:6px;
}
.portfolio-cat-chip.accent-snowflake{border-color:rgba(62,125,130,0.35);color:#426B5A;background:rgba(62,125,130,0.22)}
.portfolio-cat-chip.accent-dba{border-color:rgba(140,197,196,0.35);color:#0A7A96;background:rgba(140,197,196,0.22)}
.portfolio-cat-chip.accent-databricks{border-color:rgba(98,92,112,0.35);color:#5A3AA8;background:rgba(98,92,112,0.22)}
.portfolio-cat-chip.accent-integration{border-color:rgba(66,107,90,0.35);color:#426B5A;background:rgba(66,107,90,0.22)}
.portfolio-cat-chip.accent-managed{border-color:rgba(90,107,125,0.35);color:#3A4A5C;background:rgba(90,107,125,0.22)}
.portfolio-cat-chip.accent-engineering{border-color:rgba(200,184,248,0.55);color:#5A3AA8;background:rgba(200,184,248,0.26)}
/* Detail two-column */
.portfolio-detail-layout{
display:grid;
grid-template-columns:1fr minmax(240px,300px);
gap:40px;
align-items:start;
}
.portfolio-detail-title{
font-size:clamp(28px,4vw,48px);
line-height:1.1;
letter-spacing:-.03em;
margin:8px 0 12px;
}
.portfolio-detail-meta{margin:0 0 8px}
.portfolio-narrative{margin-top:20px}
.portfolio-narrative p{margin-bottom:14px;color:var(--muted);line-height:1.75}
.portfolio-narrative p strong{color:var(--ink);font-weight:600}
.portfolio-side-card{
background:#fff;
border:1px solid var(--line);
border-top:4px solid var(--blue);
border-radius:16px;
padding:22px 20px;
box-shadow:0 12px 28px rgba(23,37,43,0.06);
}
.portfolio-detail-sidebar--desktop{
position:sticky;
top:140px;
}
.portfolio-detail-sidebar--mobile{display:none}
.portfolio-side-card .tags{margin-top:8px}
@media (max-width:900px){
.portfolio-detail-layout{
grid-template-columns:1fr;
gap:0;
}
.portfolio-detail-sidebar--desktop{display:none}
.portfolio-detail-sidebar--mobile{
display:block;
margin:16px 0 8px;
}
.portfolio-detail-sidebar--mobile .portfolio-side-card{
position:static;
}
}
/* =========================================================
Blog page + prose lists
========================================================= */
.prose ul,
.prose ol{
margin:0 0 16px;
padding-left:1.25em;
color:var(--muted);
line-height:1.7;
}
.prose li{
margin-bottom:6px;
}
.prose li::marker{
color:var(--blue);
}
.prose p{margin-bottom:12px;color:var(--muted);line-height:1.75}
.prose h3{margin:24px 0 10px;font-size:18px;color:var(--ink);letter-spacing:-.02em}
.section-blog{padding-top:48px}
.blog-intro{
max-width:560px;
font-size:17px;
line-height:1.7;
color:var(--muted);
margin:0 0 28px;
}
.blog-grid{margin-top:8px}
.blog-card{
display:block;
border-left:3px solid var(--blue);
transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.blog-card-meta{
display:flex;
align-items:center;
gap:8px;
}
.blog-cat-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--blue);
flex-shrink:0;
}
.blog-card-title{
margin:12px 0;
font-size:18px;
letter-spacing:-.02em;
line-height:1.3;
}
.blog-card.blog-accent-snowflake{border-left-color:#3E7D82}
.blog-card.blog-accent-snowflake .blog-cat-dot{background:#3E7D82}
.blog-card.blog-accent-security{border-left-color:#625C70}
.blog-card.blog-accent-security .blog-cat-dot{background:#625C70}
.blog-card.blog-accent-postgres{border-left-color:#8CC5C4}
.blog-card.blog-accent-postgres .blog-cat-dot{background:#8CC5C4}
.blog-card.blog-accent-migration{border-left-color:#426B5A}
.blog-card.blog-accent-migration .blog-cat-dot{background:#426B5A}
.blog-card.blog-accent-databricks{border-left-color:#5A3AA8}
.blog-card.blog-accent-databricks .blog-cat-dot{background:#5A3AA8}
.blog-card.blog-accent-cost{border-left-color:#5A6B7D}
.blog-card.blog-accent-cost .blog-cat-dot{background:#5A6B7D}
.blog-card.blog-accent-staffing{border-left-color:#D9A98A}
.blog-card.blog-accent-staffing .blog-cat-dot{background:#D9A98A}
.blog-card.blog-accent-default{border-left-color:var(--blue)}
.blog-detail-title{
font-size:clamp(28px,4vw,48px);
line-height:1.12;
letter-spacing:-.03em;
margin:8px 0 16px;
}
.blog-byline{
display:flex;
align-items:center;
gap:12px;
margin-bottom:8px;
}
.blog-author-avatar{
width:40px;
height:40px;
font-size:13px;
}
.blog-author-name{
font-size:14px;
font-weight:700;
color:var(--ink);
}
.blog-body{margin-top:28px}
.blog-related{
margin-top:48px;
padding-top:8px;
}
.blog-related-title{
font-size:22px;
margin-bottom:4px;
letter-spacing:-.02em;
}
.blog-related-grid{margin-top:20px}
@media (max-width:600px){
.blog-detail-title{font-size:clamp(26px,8vw,36px)}
.blog-related-grid{grid-template-columns:1fr}
}
/* =========================================================
Contact page
========================================================= */
.section-contact{padding-top:48px}
.contact-layout{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:40px;
align-items:start;
}
.contact-lead{
font-size:17px;
line-height:1.7;
color:var(--muted);
max-width:380px;
margin:0 0 20px;
}
/* Checkmark trust list */
.trust-list--checks{
list-style:none;
margin:0 0 24px;
padding:0;
}
.trust-list--checks li{
position:relative;
padding:8px 0 8px 28px;
font-size:14.5px;
line-height:1.55;
color:var(--ink);
font-weight:500;
}
.trust-list--checks li::before{
content:'';
position:absolute;
left:0;
top:10px;
width:16px;
height:16px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2318C0E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size:16px 16px;
background-repeat:no-repeat;
}
.trust-list--checks a{color:var(--blue);font-weight:600}
.contact-methods{
display:flex;
flex-direction:column;
gap:14px;
margin-top:4px;
}
.contact-method{
display:flex;
gap:12px;
align-items:flex-start;
}
.contact-method-icon{
flex-shrink:0;
width:36px;
height:36px;
border-radius:10px;
display:grid;
place-items:center;
color:var(--blue);
background:linear-gradient(135deg,rgba(140,197,196,0.22),rgba(98,92,112,0.22));
border:1px solid rgba(140,197,196,0.26);
}
.contact-method-icon svg{width:18px;height:18px;display:block}
.contact-method-label{
font-size:10px;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:700;
color:var(--muted);
margin-bottom:2px;
}
.contact-method a{
color:var(--ink);
font-weight:600;
font-size:14px;
}
.contact-method a:hover{color:var(--blue)}
.contact-prefer{margin-top:18px}
.contact-prefer a{color:var(--blue);font-weight:600}
.contact-form-col{
border-left:1px solid var(--line);
padding-left:40px;
}
.contact-faq{
margin-top:56px;
padding-top:36px;
border-top:1px solid var(--line);
}
.contact-faq-title{
font-size:22px;
letter-spacing:-.02em;
margin-bottom:20px;
}
.contact-faq-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.contact-faq-item{
background:#fff;
border:1px solid var(--line);
border-radius:14px;
padding:18px 18px 16px;
}
.contact-faq-item h3{
font-size:15px;
margin:0 0 8px;
letter-spacing:-.01em;
}
.contact-faq-item .small{margin:0}
@media (max-width:980px){
.contact-layout{
grid-template-columns:1fr;
gap:28px;
}
.contact-form-col{
border-left:none;
padding-left:0;
}
.contact-faq-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
Legal pages (privacy / terms) + endpoint pages (404 / thank-you)
========================================================= */
.section-legal{padding-top:48px;padding-bottom:64px}
.legal-layout{
display:grid;
grid-template-columns:1fr;
gap:32px;
align-items:start;
}
.legal-toc{display:none}
.legal-toc-label{
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:700;
color:var(--muted);
margin-bottom:10px;
}
.legal-toc a{
display:block;
font-size:13px;
line-height:1.4;
color:var(--muted);
padding:6px 0;
border-left:2px solid transparent;
padding-left:12px;
transition:color .2s ease, border-color .2s ease;
}
.legal-toc a:hover{
color:var(--blue);
border-left-color:var(--cyan);
}
.legal-page{max-width:760px}
.legal-updated{margin:12px 0 8px}
.legal-updated .tag{
font-size:11px;
font-weight:600;
letter-spacing:.04em;
color:var(--muted);
background:var(--bg-soft);
}
.legal-body h2{
font-size:20px;
margin:32px 0 12px;
letter-spacing:-.02em;
scroll-margin-top:120px;
}
.legal-body p{
color:var(--muted);
margin-bottom:16px;
line-height:1.75;
}
.legal-body a{color:var(--blue);font-weight:600}
@media (min-width:1100px){
.legal-layout{
grid-template-columns:200px minmax(0,1fr);
gap:48px;
}
.legal-toc{
display:block;
position:sticky;
top:120px;
align-self:start;
}
}
/* Endpoint pages: 404 + thank-you */
.section-endpoint{
min-height:calc(100vh - 220px);
display:flex;
align-items:center;
padding:100px 0;
}
.endpoint-inner{
text-align:center;
max-width:520px;
margin:0 auto;
}
.endpoint-deco{
position:relative;
display:inline-grid;
place-items:center;
margin-bottom:20px;
}
.endpoint-deco img{
opacity:.12;
width:120px;
height:auto;
}
.endpoint-code{
position:absolute;
font-size:clamp(64px,12vw,96px);
font-weight:800;
letter-spacing:-.06em;
line-height:1;
color:rgba(23,37,43,0.22);
pointer-events:none;
}
.endpoint-success{
margin-bottom:16px;
display:inline-grid;
place-items:center;
}
.endpoint-lead{
margin:12px 0 28px;
font-size:17px;
line-height:1.65;
color:var(--muted);
}
.endpoint-links{
margin-top:22px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px 18px;
}
.endpoint-links a{
font-size:14px;
font-weight:600;
color:var(--blue);
}
.endpoint-links a:hover{text-decoration:underline}
.endpoint-suggestions{
margin-top:36px;
padding-top:24px;
border-top:1px solid var(--line);
text-align:left;
display:flex;
flex-direction:column;
gap:10px;
}
.endpoint-suggestions-label{
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:700;
color:var(--muted);
margin:0 0 4px;
}
.endpoint-suggestions a{
font-size:14px;
font-weight:600;
color:var(--blue);
line-height:1.4;
}
.endpoint-suggestions a:hover{text-decoration:underline}
@media (max-width:600px){
.section-endpoint{padding:64px 0;min-height:auto}
.endpoint-code{font-size:64px}
}
/* =========================================================
Global polish — selection, scrollbar, focus, scroll progress,
shrink header, footer watermark, back-to-top
========================================================= */
::selection{
background:var(--cyan);
color:var(--navy);
}
::-moz-selection{
background:var(--cyan);
color:var(--navy);
}
/* Progressive enhancement — WebKit scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,#3E7D82,#8CC5C4,#625C70);
border-radius:8px;
border:2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover{filter:brightness(1.08)}
/* Global keyboard focus — don't fight existing button styles */
:focus:not(:focus-visible){outline:none}
:focus-visible{
outline:2px solid var(--cyan);
outline-offset:2px;
}
/* Scroll progress bar */
.scroll-progress{
position:fixed;
top:0;
left:0;
height:2px;
width:0%;
z-index:10001;
background:var(--grad);
pointer-events:none;
transform-origin:left center;
}
/* Shrink-on-scroll header */
.topbar{
transition:height .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .28s ease;
}
.topbar .logo-img{
transition:height .28s cubic-bezier(.22,1,.36,1), max-width .28s ease;
}
.topbar.is-scrolled{
box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.topbar.is-compact .topbar-inner{
height:72px !important;
}
.topbar.is-compact .logo-img{
height:56px !important;
max-width:180px !important;
}
.platform-bar{
transition:top .28s cubic-bezier(.22,1,.36,1);
}
body.has-compact-header .platform-bar{
top:72px !important;
}
@media (max-width:980px){
.topbar.is-compact .topbar-inner{height:64px !important}
.topbar.is-compact .logo-img{height:48px !important;max-width:150px !important}
body.has-compact-header .platform-bar{top:64px !important}
}
/* Page-header watermark subtle motion */
.page-header-deco{
transition:transform .5s cubic-bezier(.22,1,.36,1);
transform-style:preserve-3d;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.page-header:hover .page-header-deco{
transform:rotateY(-6deg) rotateX(4deg) scale(1.03);
}
}
/* Footer watermark + social */
.footer{
position:relative;
overflow:hidden;
}
.footer-watermark{
position:absolute;
right:-40px;
bottom:-50px;
width:min(320px,50vw);
opacity:.05;
pointer-events:none;
user-select:none;
z-index:0;
}
.footer .container{position:relative;z-index:1}
.footer-social{
display:flex;
gap:12px;
margin-top:16px;
align-items:center;
}
.footer-social a{
display:inline-grid;
place-items:center;
width:36px;
height:36px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.22);
color:rgba(255,255,255,0.7);
transition:color .2s, border-color .2s, background .2s;
}
.footer-social a:hover{
color:#fff;
border-color:rgba(140,197,196,0.45);
background:rgba(140,197,196,0.22);
}
.footer-social svg{width:18px;height:18px}
/* Back to top */
.back-to-top{
position:fixed;
right:18px;
bottom:18px;
z-index:90;
width:44px;
height:44px;
border-radius:50%;
border:none;
cursor:pointer;
display:grid;
place-items:center;
background:var(--grad);
color:#fff;
box-shadow:0 10px 28px rgba(140,197,196,0.3);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.back-to-top.is-visible{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.back-to-top:hover{filter:brightness(1.06)}
.back-to-top:focus-visible{
outline:3px solid #D9A98A;
outline-offset:3px;
}
.back-to-top svg{width:20px;height:20px;display:block}
@media (max-width:600px){
.back-to-top{right:14px;bottom:14px;width:42px;height:42px}
}
/* =========================================================
Homepage ambient gradients — light sections + card borders
(fixed specificity, stronger opacity, glow blobs)
========================================================= */
:root{
--grad-border:linear-gradient(135deg,rgba(66,107,90,0.55),rgba(140,197,196,0.5),rgba(98,92,112,0.55));
--grad-border-strong:linear-gradient(135deg,rgba(66,107,90,0.9),rgba(140,197,196,0.85),rgba(98,92,112,0.9));
}
/* Positioning context for ambient layers */
.section:not(.section-navy),
.section-soft{
position:relative;
isolation:isolate;
overflow:hidden;
}
.section:not(.section-navy) > .container,
.section-soft > .container{
position:relative;
z-index:1;
}
/* Plain white sections — criss-cross + single source of truth (no empty override) */
.section:not(.section-navy):not(.section-soft)::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(115deg, rgba(62,125,130,0.238), transparent 48%),
linear-gradient(245deg, rgba(98,92,112,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
.section:not(.section-navy):not(.section-soft)::after{
content:'';
position:absolute;
top:-15%;
right:-8%;
width:50%;
height:75%;
background:radial-gradient(circle, rgba(140,197,196,0.26), transparent 70%);
filter:blur(38px);
pointer-events:none;
z-index:0;
}
/* Soft sections — purple leads + grid + glow blob */
.section-soft::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(130deg, rgba(98,92,112,0.255), transparent 46%),
linear-gradient(260deg, rgba(62,125,130,0.22), transparent 46%),
linear-gradient(rgba(62,125,130,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(140,197,196,0.05) 1px, transparent 1px);
background-size:auto, auto, 42px 42px, 42px 42px;
pointer-events:none;
z-index:0;
}
.section-soft::after{
content:'';
position:absolute;
top:-10%;
left:-5%;
width:45%;
height:70%;
background:radial-gradient(circle, rgba(140,197,196,0.26), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
/* Section-specific rhythm */
#testimonials.section::before{
background:
linear-gradient(100deg, rgba(140,197,196,0.255), transparent 50%),
linear-gradient(280deg, rgba(98,92,112,0.221), transparent 45%);
}
#testimonials.section::after{
top:auto;
bottom:-20%;
left:40%;
right:auto;
width:55%;
height:60%;
background:radial-gradient(circle, rgba(98,92,112,0.238), transparent 70%);
filter:blur(41px);
}
#team.section-soft::before{
background-image:
linear-gradient(145deg, rgba(62,125,130,0.238), transparent 47%),
linear-gradient(300deg, rgba(98,92,112,0.221), transparent 48%),
linear-gradient(rgba(62,125,130,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(140,197,196,0.045) 1px, transparent 1px);
background-size:auto, auto, 42px 42px, 42px 42px;
}
#team.section-soft::after{
top:30%;
left:auto;
right:-10%;
width:40%;
height:65%;
background:radial-gradient(circle, rgba(98,92,112,0.255), transparent 70%);
filter:blur(36px);
}
#trust.section-soft::after{
top:auto;
bottom:-15%;
left:20%;
width:50%;
height:55%;
background:radial-gradient(circle, rgba(62,125,130,0.238), transparent 70%);
filter:blur(40px);
}
#contact-cta.section::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(125deg, rgba(62,125,130,0.221), transparent 50%),
linear-gradient(250deg, rgba(98,92,112,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
#contact-cta.section::after{
content:'';
position:absolute;
top:10%;
left:-12%;
width:42%;
height:80%;
background:radial-gradient(circle, rgba(140,197,196,0.238), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
/* Gradient borders — double-background technique */
.card,
.pillar,
.testimonial-card,
.team-card,
.trust-metric{
border:1px solid transparent;
background-color:#fff;
background-image:
linear-gradient(#fff, #fff),
var(--grad-border);
background-origin:border-box;
background-clip:padding-box, border-box;
-webkit-background-clip:padding-box, border-box;
transition:
transform .4s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;
}
.card:hover,
.pillar:hover,
.testimonial-card:hover,
.team-card:hover,
.trust-metric:hover{
background-image:
linear-gradient(#fff, #fff),
var(--grad-border-strong);
box-shadow:0 20px 40px rgba(62,125,130,0.22);
}
/* Fallback ring for browsers that mishandle multi-bg clip */
@supports not ((background-clip: padding-box) or (-webkit-background-clip: padding-box)){
.card,
.pillar,
.testimonial-card,
.team-card,
.trust-metric{
border:1px solid rgba(140,197,196,0.35);
background-image:none;
background-color:#fff;
}
}
.form-wrap{
background-image:none;
background-color:#fff;
border:1px solid var(--line);
}
/* =========================================================
Site-wide ambient gradients — per-page variants + headers
========================================================= */
/* Page-header atmospheric blob (content pages) */
.page-header{
position:relative;
overflow:hidden;
}
.page-header::after{
content:'';
position:absolute;
top:-20%;
right:-10%;
width:55%;
height:90%;
background:radial-gradient(circle, rgba(140,197,196,0.22), transparent 68%);
filter:blur(36px);
pointer-events:none;
z-index:0;
}
.page-header-inner,
.page-header-deco{
position:relative;
z-index:1;
}
/* Services — cyan-leading */
.section-services::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(100deg, rgba(140,197,196,0.255), transparent 50%),
linear-gradient(280deg, rgba(62,125,130,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
.section-services::after{
content:'';
position:absolute;
top:5%;
left:-8%;
width:48%;
height:70%;
background:radial-gradient(circle, rgba(140,197,196,0.255), transparent 70%);
filter:blur(38px);
pointer-events:none;
z-index:0;
}
/* Portfolio — blue-leading */
.section-portfolio::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(120deg, rgba(62,125,130,0.238), transparent 48%),
linear-gradient(300deg, rgba(98,92,112,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
.section-portfolio::after{
content:'';
position:absolute;
bottom:-15%;
right:-5%;
width:50%;
height:65%;
background:radial-gradient(circle, rgba(62,125,130,0.238), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
/* Blog — purple-leading */
.section-blog::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(135deg, rgba(98,92,112,0.255), transparent 48%),
linear-gradient(315deg, rgba(140,197,196,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
.section-blog::after{
content:'';
position:absolute;
top:-10%;
right:10%;
width:45%;
height:60%;
background:radial-gradient(circle, rgba(98,92,112,0.255), transparent 70%);
filter:blur(40px);
pointer-events:none;
z-index:0;
}
/* Contact — match homepage contact-cta */
.section-contact::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(125deg, rgba(62,125,130,0.221), transparent 50%),
linear-gradient(250deg, rgba(98,92,112,0.22), transparent 48%);
pointer-events:none;
z-index:0;
}
.section-contact::after{
content:'';
position:absolute;
top:10%;
left:-12%;
width:42%;
height:80%;
background:radial-gradient(circle, rgba(140,197,196,0.238), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
/* About / Solutions / Industries */
.section-about::before,
.section-solutions::before,
.section-industries::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
.section-about::before{
background:
linear-gradient(110deg, rgba(62,125,130,0.221), transparent 50%),
linear-gradient(250deg, rgba(98,92,112,0.22), transparent 48%);
}
.section-about::after{
content:'';
position:absolute;
top:-8%;
right:-6%;
width:48%;
height:70%;
background:radial-gradient(circle, rgba(140,197,196,0.238), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
.section-solutions::before{
background:
linear-gradient(125deg, rgba(140,197,196,0.238), transparent 48%),
linear-gradient(290deg, rgba(98,92,112,0.22), transparent 48%);
}
.section-solutions::after{
content:'';
position:absolute;
bottom:-12%;
left:-8%;
width:50%;
height:65%;
background:radial-gradient(circle, rgba(62,125,130,0.221), transparent 70%);
filter:blur(38px);
pointer-events:none;
z-index:0;
}
.section-industries::before{
background:
linear-gradient(105deg, rgba(98,92,112,0.221), transparent 48%),
linear-gradient(265deg, rgba(62,125,130,0.22), transparent 48%);
}
.section-industries::after{
content:'';
position:absolute;
top:20%;
right:-10%;
width:44%;
height:70%;
background:radial-gradient(circle, rgba(98,92,112,0.238), transparent 70%);
filter:blur(37px);
pointer-events:none;
z-index:0;
}
/* Ensure page sections have positioning context */
.section-services,
.section-portfolio,
.section-blog,
.section-contact,
.section-about,
.section-solutions,
.section-industries{
position:relative;
isolation:isolate;
overflow:hidden;
}
.section-services > .container,
.section-portfolio > .container,
.section-blog > .container,
.section-contact > .container,
.section-about > .container,
.section-solutions > .container,
.section-industries > .container{
position:relative;
z-index:1;
}
/* Utility pages — quieter: soft blob only, no criss-cross, no grid */
.section-legal,
.section-endpoint{
position:relative;
isolation:isolate;
overflow:hidden;
}
.section-legal::before,
.section-endpoint::before{
content:none; /* no diagonal wash */
}
.section-legal::after,
.section-endpoint::after{
content:'';
position:absolute;
top:10%;
right:-15%;
width:55%;
height:60%;
background:radial-gradient(circle, rgba(140,197,196,0.12), transparent 70%);
filter:blur(44px);
pointer-events:none;
z-index:0;
-webkit-mask-image:none;
mask-image:none;
}
.section-legal > .container,
.section-endpoint > .container,
.section-legal .legal-layout,
.section-endpoint .endpoint-inner{
position:relative;
z-index:1;
}
/* Portfolio / blog cards pick up shared .card gradient borders already */
.portfolio-card,
.blog-card{
border:1px solid transparent;
background-color:#fff;
background-image:
linear-gradient(#fff, #fff),
var(--grad-border);
background-origin:border-box;
background-clip:padding-box, border-box;
-webkit-background-clip:padding-box, border-box;
}
.portfolio-card:hover,
.blog-card:hover{
background-image:
linear-gradient(#fff, #fff),
var(--grad-border-strong);
}
/* Wave → ambient seam: fade gradients in under strip-wave */
.section-soft::before,
.section-soft::after{
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 48px, #000 140px);
mask-image: linear-gradient(180deg, transparent 0, transparent 48px, #000 140px);
}
/* Page content under page-header also soft-starts */
main.section::before,
main.section::after,
main > .section::before,
main > .section::after{
-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 32px, #000 120px);
mask-image: linear-gradient(180deg, transparent 0, transparent 32px, #000 120px);
}
/* Don't mask navy/hero */
.section-navy::before,
.section-navy::after,
.hero-section::before,
.hero-section::after,
.page-header::before,
.page-header::after{
-webkit-mask-image: none;
mask-image: none;
}
/* =========================================================
Interaction polish — draw-line dark, gradient drift, hero in
========================================================= */
.section-navy .draw-line,
.hero-section .draw-line,
.page-header .draw-line{
color:inherit;
}
.hero-section .draw-line::after{
background:var(--cyan);
height:3px;
}
.section-navy .draw-line::after{
background:var(--cyan);
}
.hero-badge,
.hero h1 .grad{
background-size:200% auto;
animation:gradientDrift 8s ease-in-out infinite;
}
@keyframes gradientDrift{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
.hero-badge,
.hero h1 .grad{animation:none}
}
/* Hero word stagger */
.hero-word{
display:inline-block;
opacity:0;
transform:translateY(18px);
transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.hero-word.is-in{
opacity:1;
transform:translateY(0);
}
.hero-section.is-entered .hero-word{
opacity:1;
transform:none;
}
/* Cube entrance (one-shot) */
.cube-card.hero-cube-enter{
animation:heroCubeIn .85s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes heroCubeIn{
0%{opacity:0;transform:scale(.86) rotateY(18deg) rotateX(-8deg)}
100%{opacity:1;transform:scale(1) rotateY(0) rotateX(0)}
}
@media (prefers-reduced-motion:reduce){
.cube-card.hero-cube-enter{animation:none}
.hero-word{opacity:1;transform:none;transition:none}
}
/* Magnetic buttons — CSS baseline; JS sets transform */
.btn-primary,
.btn-cta{
will-change:transform;
transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease;
}
/* =========================================================
Nav dropdown (Services)
========================================================= */
.nav-item.has-dropdown{
position:relative;
display:flex;
align-items:center;
}
.nav-item .nav-parent{
display:inline-flex;
align-items:center;
gap:6px;
}
.nav-caret{
font-size:10px;
opacity:.7;
}
.nav-dropdown{
position:absolute;
top:calc(100% + 12px);
left:0;
min-width:260px;
padding:10px 0;
background:var(--hero-dark-2);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
box-shadow:0 18px 40px rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
transform:translateY(6px);
transition:opacity .2s ease, transform .2s ease, visibility .2s;
z-index:80;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.nav-dropdown a{
display:block;
padding:10px 18px;
font-size:14px;
color:rgba(255,255,255,.82);
white-space:nowrap;
}
.nav-dropdown a:hover{
color:#fff;
background:rgba(255,255,255,.06);
}
.nav-dropdown-extra{
margin-top:6px;
border-top:1px solid rgba(255,255,255,.1);
padding-top:12px !important;
color:var(--cyan) !important;
font-weight:600;
}
@media (max-width:980px){
.nav-item.has-dropdown{
flex-direction:column;
align-items:stretch;
width:100%;
}
.nav-dropdown{
position:static;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
border:none;
background:transparent;
padding:4px 0 8px 12px;
min-width:0;
}
.nav-dropdown a{
padding:8px 10px;
font-size:14px;
}
.nav-caret{display:none}
}
/* Service areas (consolidated taxonomy) */
.service-area-block{
display:grid;
grid-template-columns:72px 1fr;
gap:20px;
padding:36px 0;
border-top:1px solid var(--line);
}
.service-area-block:first-child{border-top:none;padding-top:12px}
.service-area-num{
font-family:'JetBrains Mono',monospace;
font-size:13px;
font-weight:700;
color:var(--blue);
padding-top:6px;
}
.service-area-title{
font-size:clamp(22px,2.4vw,28px);
margin:0 0 6px;
letter-spacing:-.02em;
}
.service-area-tagline{
font-size:15px;
color:var(--blue);
font-weight:600;
margin:0 0 12px;
}
.service-area-desc{
color:var(--muted);
font-size:15.5px;
line-height:1.65;
max-width:62ch;
margin:0 0 16px;
}
.service-area-focus{
margin:0;
padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:8px 20px;
}
.service-area-focus li{
position:relative;
padding-left:14px;
font-size:14px;
color:var(--ink);
line-height:1.45;
}
.service-area-focus li::before{
content:'';
position:absolute;
left:0;
top:.55em;
width:6px;
height:6px;
border-radius:50%;
background:var(--cyan);
}
@media (max-width:700px){
.service-area-block{grid-template-columns:1fr;gap:8px;padding:28px 0}
.service-area-num{padding-top:0}
}
/* Footer: five columns when Technologies is present */
.footer-grid{
grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
}
@media (max-width:980px){
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.footer-grid{grid-template-columns:1fr}
}
.tech-cat-anchor{
height:0;
overflow:hidden;
scroll-margin-top:140px;
}
.service-area-block{
scroll-margin-top:140px;
}
/* =========================================================
Technologies hub (Tier 2)
========================================================= */
.section-technologies{
position:relative;
}
/* Restrained ambient on dense catalog */
.section-technologies::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(115deg, rgba(62,125,130,.03), transparent 45%),
linear-gradient(245deg, rgba(98,92,112,.025), transparent 45%);
pointer-events:none;
z-index:0;
}
.section-technologies > .container{position:relative;z-index:1}
.tech-hub-intro{
max-width:62ch;
margin-bottom:28px;
}
.tech-toolbar{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:36px;
}
.tech-search-wrap{
position:relative;
max-width:360px;
}
.tech-search-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:var(--muted);
pointer-events:none;
}
.tech-search{
width:100%;
padding:12px 14px 12px 42px;
border:1px solid var(--line);
border-radius:100px;
background:#fff;
font:inherit;
font-size:15px;
color:var(--ink);
outline:none;
transition:border-color .2s, box-shadow .2s;
}
.tech-search:focus{
border-color:var(--cyan);
box-shadow:0 0 0 3px rgba(140,197,196,.18);
}
.tech-filters{
display:flex;
gap:8px;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding-bottom:2px;
}
.tech-filters::-webkit-scrollbar{display:none}
.tech-filter{
flex:0 0 auto;
font-size:12px;
font-weight:600;
padding:8px 14px;
border-radius:100px;
background:#fff;
border:1px solid var(--line);
color:var(--muted);
cursor:pointer;
transition:all .2s ease;
font-family:inherit;
}
.tech-filter:hover{
border-color:var(--blue);
color:var(--ink);
}
.tech-filter.is-active{
background:rgba(62,125,130,.1);
border-color:rgba(140,197,196,.45);
color:var(--blue);
}
.tech-empty{
padding:28px;
text-align:center;
color:var(--muted);
border:1px dashed var(--line);
border-radius:14px;
margin-bottom:24px;
}
.tech-category{
margin-bottom:48px;
scroll-margin-top:140px;
}
.tech-category-head{
margin-bottom:16px;
padding-bottom:10px;
border-bottom:1px solid var(--line);
}
.tech-category-title{
font-size:clamp(20px,2.2vw,26px);
letter-spacing:-.02em;
margin:0;
}
.tech-category-count{
font-weight:500;
color:var(--muted);
font-size:.75em;
}
.tech-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
}
@media (min-width:1200px){
.tech-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:900px){
.tech-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
.tech-grid{grid-template-columns:1fr}
}
.tech-card{
display:flex;
gap:12px;
align-items:flex-start;
padding:16px 16px 14px;
text-decoration:none;
color:inherit;
border-radius:14px;
transition:transform .25s var(--ease), box-shadow .25s;
min-height:0;
}
.tech-card:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(23,37,43,.08);
}
.tech-card.is-highlighted{
outline:2px solid var(--cyan);
outline-offset:2px;
box-shadow:0 0 0 4px rgba(140,197,196,.15);
}
.tech-card-icon{
flex-shrink:0;
width:32px;
height:32px;
color:var(--blue);
}
.tech-card-icon svg{display:block;width:100%;height:100%}
.tech-card-body{min-width:0;flex:1}
.tech-card-top{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 10px;
margin-bottom:6px;
}
.tech-card-name{
font-size:15.5px;
font-weight:700;
letter-spacing:-.01em;
margin:0;
line-height:1.25;
}
.tech-card-cat{
font-size:10px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
background:var(--bg-soft);
border:1px solid var(--line);
padding:2px 8px;
border-radius:100px;
}
.tech-card-summary{
margin:0;
font-size:13px;
line-height:1.5;
color:var(--muted);
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* Technology detail (Tier 3) */
.tech-back{
margin:0 0 16px;
font-size:14px;
font-weight:600;
}
.tech-back a{color:var(--blue)}
.tech-back a:hover{text-decoration:underline}
.tech-detail-layout{margin-top:8px}
.tech-diagram{
margin-top:36px;
min-height:120px;
border:1px dashed var(--line);
border-radius:14px;
background:rgba(240,246,252,.5);
display:grid;
place-items:center;
color:var(--muted);
font-size:13px;
}
.tech-diagram::after{
content:'Diagram — Step 5 (' attr(data-diagram-type) ')';
}
.tech-related{
margin-top:56px;
padding-top:28px;
border-top:1px solid var(--line);
}
.tech-related-title{
font-size:clamp(22px,2.4vw,28px);
margin:0 0 18px;
letter-spacing:-.02em;
}
.tech-related-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (min-width:900px){
.tech-related-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:560px){
.tech-related-grid{grid-template-columns:1fr}
}
.tech-not-found{
max-width:480px;
padding:48px 0 80px;
}
.tech-not-found h1{margin-bottom:12px}
.tech-not-found code{
font-family:'JetBrains Mono',monospace;
font-size:13px;
background:var(--bg-soft);
padding:2px 6px;
border-radius:4px;
}
/* ============ V2: Mega menu, directory cards, detail pages ============ */
.nav-item{position:relative}
.mega{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:640px;max-width:820px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px rgba(23,37,43,0.28);padding:26px;z-index:80}
.nav-item:hover .mega,.nav-item:focus-within .mega{display:block}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mega-col-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega a.mega-link{display:block;color:var(--ink);font-size:14px;padding:6px 4px;border-radius:8px;transition:all .2s}
.mega a.mega-link:hover{background:var(--bg-soft);color:var(--blue);padding-left:8px}
.mega-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mega-foot a{font-size:13px;font-weight:700;color:var(--blue)}
.mega-flat{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 22px}
@media(max-width:980px){.mega{display:none !important;position:static;transform:none;box-shadow:none;border:none;min-width:0;max-width:none;padding:6px 0 6px 14px;margin-top:6px;border-left:2px solid var(--line)}.nav-item:hover .mega,.nav-item:focus-within .mega{display:none}.nav-item.open .mega{display:block !important}.mega-cols{grid-template-columns:1fr;gap:14px}.mega-flat{grid-template-columns:1fr}}
/* Breadcrumb */
.crumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:rgba(255,255,255,0.55);flex-wrap:wrap}
.crumb a{color:rgba(255,255,255,0.72)}
.crumb a:hover{color:#fff}
.crumb span.sep{opacity:.5}
/* Directory grid (technologies.html / services.html) */
.cat-block{margin-top:56px}
.cat-block:first-child{margin-top:0}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.cat-head h2{font-size:clamp(22px,2.6vw,30px)}
.cat-count{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;transition:all .35s var(--ease);text-align:left}
.tile:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 20px 40px rgba(23,37,43,0.18)}
.tile-icon{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;color:var(--blue)}
.tile-icon svg{width:24px;height:24px}
.tile h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.tile .tagline{font-size:13px;color:var(--muted);line-height:1.5;flex-grow:1}
.tile .tile-cta{font-size:12.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.tile .tile-cta::after{content:'→';transition:transform .25s}
.tile:hover .tile-cta::after{transform:translateX(4px)}
@media(max-width:980px){.tile-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tile-grid{grid-template-columns:1fr}}
/* Pill lists (homepage full technology giveaway) */
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill-link{font-size:13px;padding:8px 14px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;transition:all .2s}
.pill-link:hover{border-color:var(--blue);color:var(--blue);background:var(--bg-soft)}
.section-navy .pill-link{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.22);color:rgba(255,255,255,0.85)}
.section-navy .pill-link:hover{background:rgba(255,255,255,0.14);border-color:var(--cyan);color:#fff}
/* Service overview cards on homepage */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:all .3s var(--ease)}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(23,37,43,0.16)}
.svc-card h4{font-size:15px;font-weight:700;margin-bottom:6px}
.svc-card p{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
/* Detail page hero */
.detail-hero{background:radial-gradient(120% 90% at 78% 12%,var(--hero-dark-2),var(--hero-dark) 55%);padding:36px 0 54px;position:relative;overflow:hidden}
.detail-hero-inner{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;margin-top:22px}
.detail-title{color:#fff}
.detail-title h1{font-size:clamp(32px,4.4vw,52px);margin-top:12px}
.detail-tagline{color:var(--cyan);font-size:17px;font-weight:600;margin-top:14px}
.pic-slot{aspect-ratio:1/1;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.22);display:grid;place-items:center;position:relative;overflow:hidden}
.pic-slot::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(140,197,196,0.28),transparent 70%)}
.pic-slot svg{width:44%;height:44%;position:relative;z-index:1;color:var(--cyan)}
.pic-slot .pic-label{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.4);font-weight:700}
@media(max-width:820px){.detail-hero-inner{grid-template-columns:1fr}.pic-slot{max-width:220px;margin:0 auto}}
.breadcrumb-bar{padding:20px 0 0}
/* =========================================================
Capability Showcase — signature “What We Offer” component
========================================================= */
.capability-section{
background:#fff;
padding:110px 0 120px;
position:relative;
}
.capability-section::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.capability-showcase{
display:grid;
grid-template-columns:minmax(240px,0.38fr) minmax(0,0.62fr);
gap:56px 64px;
align-items:start;
}
.capability-intro{
position:sticky;
top:120px;
}
.capability-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:700;
color:var(--blue);
margin-bottom:18px;
}
.capability-eyebrow::before{
content:'';
width:6px;height:6px;
border-radius:50%;
background:var(--grad);
flex-shrink:0;
}
.capability-heading{
font-size:clamp(28px,3.2vw,42px);
line-height:1.08;
letter-spacing:-.03em;
font-weight:700;
color:var(--navy);
margin:0 0 18px;
}
.capability-heading em{
font-style:normal;
background:var(--grad);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.capability-lede{
font-size:15.5px;
line-height:1.65;
color:var(--muted);
margin:0 0 28px;
max-width:34ch;
}
.capability-count{
display:inline-flex;
align-items:baseline;
gap:10px;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:700;
color:var(--muted);
padding-top:4px;
border-top:1px solid var(--line);
width:fit-content;
}
.capability-count-num{
font-size:22px;
font-weight:800;
letter-spacing:-.03em;
color:var(--navy);
font-variant-numeric:tabular-nums;
}
/* Stack + rail */
.capability-stack{
position:relative;
display:flex;
flex-direction:column;
gap:0;
padding-left:28px;
}
.capability-rail{
position:absolute;
left:0;
top:8px;
bottom:8px;
width:2px;
background:var(--grad);
border-radius:2px;
opacity:.55;
}
.capability-item{
position:relative;
display:grid;
grid-template-columns:48px 1fr auto;
align-items:center;
gap:8px 14px;
min-height:64px;
padding:18px 16px 18px 8px;
margin:0 -8px;
border-radius:12px;
border-bottom:1px solid var(--line);
cursor:default;
transition:
background .35s var(--ease),
transform .35s var(--ease),
box-shadow .35s var(--ease);
}
.capability-item:last-child{border-bottom:none}
.capability-item::before{
content:'';
position:absolute;
left:-28px;
top:50%;
width:10px;height:10px;
margin-top:-5px;
border-radius:50%;
background:#fff;
border:2px solid var(--blue);
box-shadow:0 0 0 3px rgba(62,125,130,0.12);
transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
z-index:1;
}
.capability-num{
font-size:12px;
font-weight:700;
letter-spacing:.08em;
color:var(--muted);
font-variant-numeric:tabular-nums;
transition:color .35s var(--ease);
}
.capability-body{min-width:0}
.capability-title{
display:block;
font-size:clamp(17px,1.35vw,21px);
font-weight:650;
letter-spacing:-.015em;
color:var(--navy);
line-height:1.3;
transition:transform .35s var(--ease), color .35s var(--ease);
}
.capability-arrow{
font-size:18px;
color:var(--blue);
opacity:.35;
transform:translateX(0);
transition:opacity .35s var(--ease), transform .35s var(--ease);
justify-self:end;
}
/* Hover */
.capability-item:hover{
background:linear-gradient(90deg,rgba(62,125,130,0.05),rgba(140,197,196,0.03),transparent 70%);
}
.capability-item:hover::before{
border-color:var(--cyan);
background:var(--cyan);
box-shadow:0 0 0 4px rgba(140,197,196,0.18);
}
.capability-item:hover .capability-num{color:var(--blue)}
.capability-item:hover .capability-title{
transform:translateX(5px);
color:var(--navy);
}
.capability-item:hover .capability-arrow{
opacity:1;
transform:translateX(6px);
color:var(--cyan);
}
/* First item slight emphasis when list is long */
.capability-stack[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"])
.capability-item:first-child{
background:linear-gradient(90deg,rgba(62,125,130,0.04),transparent 60%);
}
.capability-stack[data-count]:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"])
.capability-item:first-child .capability-title{font-weight:700}
/* Focus for a11y */
.capability-item:focus-within{
outline:2px solid var(--cyan);
outline-offset:2px;
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.capability-item,
.capability-item::before,
.capability-num,
.capability-title,
.capability-arrow{
transition:none !important;
}
.capability-item:hover .capability-title,
.capability-item:hover .capability-arrow{
transform:none;
}
}
/* Responsive */
@media (max-width:980px){
.capability-showcase{
grid-template-columns:1fr;
gap:40px;
}
.capability-intro{position:static}
.capability-lede{max-width:48ch}
.capability-section{padding:80px 0 88px}
}
@media (max-width:640px){
.capability-section{padding:72px 0 80px}
.capability-stack{padding-left:22px}
.capability-item{
grid-template-columns:40px 1fr auto;
min-height:56px;
padding:16px 8px 16px 4px;
gap:6px 10px;
}
.capability-item::before{
left:-22px;
width:8px;height:8px;
margin-top:-4px;
}
.capability-title{font-size:17px}
.capability-num{font-size:11px}
.capability-heading{font-size:clamp(24px,7vw,32px)}
}
/* Legacy offer classes kept for safety / non-detail pages */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:26px}
.offer-item{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}
.offer-item svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--blue)}
@media(max-width:700px){.offer-grid{grid-template-columns:1fr}}
.related-strip{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
/* Service detail subgroups (kept for any residual use) */
.subgroup{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:16px}
.subgroup h3{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.subgroup h3::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--grad);flex-shrink:0}
.subgroup .offer-item{border-bottom:1px solid var(--line)}
.subgroup .offer-item:last-child{border-bottom:none}
/* Industries strip */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.industry-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:10px}
.industry-chip svg{width:20px;height:20px;color:var(--blue);flex-shrink:0}
@media(max-width:820px){.industry-grid{grid-template-columns:1fr 1fr}}
/* CTA band reused on detail pages */
.cta-band{background:var(--navy);border-radius:20px;padding:44px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#fff;margin-top:64px}
.cta-band h3{font-size:clamp(20px,2.4vw,26px);color:#fff}
.cta-band p{color:rgba(255,255,255,0.6);margin-top:6px;font-size:14.5px}
.pic-slot
.pic-slot
/* =========================================================
Technology logo stage — optical normalization
========================================================= */
.tech-logo-stage{
width:84px;
height:64px;
display:grid;
place-items:center;
flex-shrink:0;
margin-bottom:4px;
overflow:visible;
transition:transform .35s var(--ease);
}
.tech-logo-stage img{
display:block;
width:auto;
height:auto;
object-fit:contain;
opacity:1;
visibility:visible;
clip-path:none;
-webkit-clip-path:none;
}
/* Optical shape classes — perceived visual weight, not forced geometry */
.tech-logo-stage[data-logo-shape="square"] img{
max-width:50px;
max-height:50px;
}
.tech-logo-stage[data-logo-shape="wide"] img{
max-width:68px;
max-height:36px;
}
.tech-logo-stage[data-logo-shape="ultrawide"] img{
max-width:72px;
max-height:28px;
}
.tech-logo-stage[data-logo-shape="tall"] img{
max-width:42px;
max-height:54px;
}
.tile:hover .tech-logo-stage{
transform:translateY(-3px);
}
@media(max-width:640px){
.tech-logo-stage{width:72px;height:56px}
.tech-logo-stage[data-logo-shape="square"] img{max-width:44px;max-height:44px}
.tech-logo-stage[data-logo-shape="wide"] img{max-width:58px;max-height:32px}
.tech-logo-stage[data-logo-shape="ultrawide"] img{max-width:64px;max-height:24px}
.tech-logo-stage[data-logo-shape="tall"] img{max-width:36px;max-height:48px}
}
/* Authentic logo in technology detail hero pic-slot */
.pic-slot .tech-logo-stage{
width:58%;
height:58%;
position:relative;
z-index:1;
display:grid;
place-items:center;
margin-bottom:0;
background:rgba(255,255,255,0.94);
border-radius:14px;
box-shadow:0 8px 24px rgba(0,0,0,0.18);
padding:10px;
box-sizing:border-box;
}
.pic-slot .tech-logo-stage img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
}
.pic-slot .tech-logo-stage[data-logo-shape="ultrawide"] img{
max-width:100%;
max-height:55%;
}
.pic-slot .tech-logo-stage[data-logo-shape="wide"] img{
max-width:100%;
max-height:70%;
}
.pic-slot .tech-logo-stage[data-logo-shape="tall"] img{
max-width:70%;
max-height:100%;
}
/* =========================================================
Ecotech Service Mark System
========================================================= */
.service-mark-stage{
width:84px;
height:72px;
display:grid;
place-items:center;
flex-shrink:0;
margin-bottom:14px;
transition:transform .35s var(--ease);
}
.service-mark-stage img{
display:block;
width:auto;
height:auto;
max-width:56px;
max-height:56px;
object-fit:contain;
opacity:1;
visibility:visible;
clip-path:none;
-webkit-clip-path:none;
}
.tile:hover .service-mark-stage{
transform:translateY(-3px);
}
@media(max-width:640px){
.service-mark-stage{width:72px;height:64px;margin-bottom:12px}
.service-mark-stage img{max-width:48px;max-height:48px}
}
/* Detail page hero service mark */
.pic-slot .service-mark-stage{
width:58%;
height:58%;
margin-bottom:0;
background:rgba(255,255,255,0.94);
border-radius:14px;
box-shadow:0 8px 24px rgba(0,0,0,0.18);
padding:12px;
box-sizing:border-box;
}
.pic-slot .service-mark-stage img{
max-width:100%;
max-height:100%;
}
/* ===== SOURCE: site-unify-v28.css ===== */
/* site-unify-v28.css — every page matches homepage V9 mineral palette */
:root{
--navy:#17252B !important;
--blue:#3E7D82 !important;
--cyan:#8CC5C4 !important;
--purple:#B66F52 !important;
--lavender:#D9A98A !important;
--bg:#F7F5EF !important;
--bg-soft:#F2F0E9 !important;
--ink:#17252B !important;
--muted:#3E524E !important;
--line:rgba(23,37,43,0.12) !important;
--line-strong:rgba(23,37,43,0.26) !important;
--grad:linear-gradient(135deg,#3E7D82,#426B5A,#B66F52) !important;
--grad-soft:linear-gradient(135deg,rgba(62,125,130,0.16),rgba(66,107,90,0.05),rgba(182,111,82,0.06)) !important;
--hero-dark:#0E1715 !important;
--hero-dark-2:#16221F !important;
}
html,body{background:#E9E7DF !important;color:#17252B !important}
.section-soft{background:#F2F0E9 !important}
.section-soft::before,.section-soft::after{opacity:0 !important;content:none !important}
.tile,.card,.svc-card{background:#F7F5EF !important;border-color:rgba(23,37,43,0.10) !important}
.tile h3,.card h3{color:#17252B !important}
.tile p,.card p,.small,.muted{color:#3E524E !important}
h1,h2,h3,h4{color:#17252B}
.kicker{color:#3E7D82 !important}
.offer-item svg,.industry-chip svg{color:#3E7D82 !important}
.pill-link{background:rgba(247,245,239,0.9);border-color:rgba(23,37,43,0.10);color:#17252B}
.pill-link:hover{border-color:#3E7D82;color:#3E7D82}
.btn-primary{background:linear-gradient(135deg,#3E7D82,#426B5A,#B66F52) !important;color:#fff !important}
.btn-secondary{color:#17252B;border-color:rgba(23,37,43,0.16)}
.btn-secondary:hover{border-color:#3E7D82;color:#3E7D82}
.section-navy,.page-header,.hero-section{background:#0E1715 !important;color:#fff}
.section-navy h2,.section-navy h3,.page-header h1,.page-header h2{color:#fff !important}
.section-navy .kicker{color:#8CC5C4 !important}
.section-navy .pill-link{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);color:rgba(255,255,255,0.88)}
.section-navy .pill-link:hover{border-color:#8CC5C4;color:#fff}
.section:not(.section-navy):not(.hero-section)::before,
.section:not(.section-navy):not(.hero-section)::after,
.page-header::before,.page-header::after{filter:saturate(0.35) !important}
.cta-band{background:linear-gradient(125deg,#0E1715 0%,#16221F 50%,#1A2A26 100%) !important;color:#fff !important}
.cta-band h3{color:#fff !important}
.cta-band p{color:rgba(233,231,223,0.75) !important}
input,textarea,select{background:#F7F5EF;border-color:rgba(23,37,43,0.14);color:#17252B}
input:focus,textarea:focus,select:focus{border-color:#3E7D82 !important}
.label{color:#3E7D82 !important}
.platform-bar{background:#F2F0E9 !important;color:#17252B !important}
.home-page-v3{
--n:#17252B !important;--paper:#E9E7DF !important;--paper-2:#F2F0E9 !important;
--mist:#F2F0E9 !important;--sage:#E9E7DF !important;--sand:#F2F0E9 !important;
--muted:#3E524E !important;--blue:#3E7D82 !important;--teal:#3E7D82 !important;
--violet:#625C70 !important;--orange:#B66F52 !important;--ink:#17252B !important;
background:#E9E7DF !important;color:#17252B !important;
}
.v3-hero{background:radial-gradient(circle at 14% 38%,rgba(62,125,130,.10),transparent 25%),radial-gradient(circle at 85% 28%,rgba(182,111,82,.07),transparent 23%),#E9E7DF !important}
.v3-start{background:linear-gradient(180deg,#F7F5EF 0%,#F2F0E9 100%) !important}
.v3-signal{background:linear-gradient(180deg,#F2F0E9,#E9E7DF) !important}
.v3-depth{background:#F2F0E9 !important}
.v3-industries{background:#E9E7DF !important}
.v3-final{background:linear-gradient(125deg,#0E1715 0%,#16221F 50%,#1A2A26 100%) !important;color:#fff !important}
.v3-final h2,.v3-final .v3-kicker{color:#fff !important}
.v3-final p{color:rgba(233,231,223,.78) !important}
.v3-final a{background:#F7F5EF !important;color:#17252B !important}
.v3-btn--dark{background:#17252B !important;color:#fff !important}
.v3-btn--light{background:rgba(247,245,239,.85) !important;color:#3E524E !important;border:1px solid rgba(23,37,43,.12) !important}
.v3-kicker{color:#3E524E !important}
.v3-path-step,.v3-problem,.v3-depth-card{background:#F7F5EF !important}
.v3-path-step--data .v3-path-num,.v3-path-step--data .v3-path-label,
.v3-path-step--insight .v3-path-num,.v3-path-step--insight .v3-path-label{color:#3E7D82 !important}
.v3-path-step--data::before,.v3-path-step--insight::before{background:#3E7D82 !important}
.v3-path-step--intel::before{background:#625C70 !important}
.v3-path-step--people::before{background:#B66F52 !important}
.v3-path-step--outcome::before{background:linear-gradient(90deg,#3E7D82,#426B5A) !important}
/* structural traps */
.hero-section,.page-header{
background:radial-gradient(120% 100% at 70% 20%, var(--hero-dark-2) 0%, var(--hero-dark) 55%, #0A100E 100%) !important;
}
.stat-icon{color:#8CC5C4;background:linear-gradient(135deg,rgba(140,197,196,0.24),rgba(182,111,82,0.2))}
:focus-visible{outline-color:#3E7D82}
.form-status.success{background:#E8F0EA;color:#2F4A3A;border-color:#C7DBC9}
/* ===== SOURCE: sitewide-text-accents-v1.css ===== */
/* =========================================================
ECOTECH SITEWIDE TYPOGRAPHIC ACCENT SYSTEM V1
Matte + punchy text colors. No background recoloring.
========================================================= */
:root{
--accent-teal:#2F8587;
--accent-terracotta:#B7654B;
--accent-ochre:#B08A3E;
--accent-plum:#80607D;
--accent-indigo:#536B8A;
--accent-sage:#4F8175;
--accent-coral:#B96862;
--accent-olive:#788044;
--accent-rust:#9A604A;
}
/* Global accent utility: future content can use these without inventing colors. */
.text-accent-teal{color:var(--accent-teal)!important;}
.text-accent-terracotta{color:var(--accent-terracotta)!important;}
.text-accent-ochre{color:var(--accent-ochre)!important;}
.text-accent-plum{color:var(--accent-plum)!important;}
.text-accent-indigo{color:var(--accent-indigo)!important;}
.text-accent-sage{color:var(--accent-sage)!important;}
.text-accent-coral{color:var(--accent-coral)!important;}
.text-accent-olive{color:var(--accent-olive)!important;}
/* -------- ABOUT: people, trust, delivery -------- */
body.eco-nav-page:not(.home-page-v3) .about-hero h1,
body.eco-nav-page:not(.home-page-v3) .about-intro h1{
color:var(--accent-teal)!important;
}
body.eco-nav-page:not(.home-page-v3) .about-story h2:nth-of-type(odd){
color:var(--accent-terracotta)!important;
}
body.eco-nav-page:not(.home-page-v3) .about-story h2:nth-of-type(even){
color:var(--accent-indigo)!important;
}
/* -------- SERVICES: warm + action-oriented -------- */
body.eco-nav-page .service-page h1,
body.eco-nav-page .services-hero h1{
color:var(--accent-teal)!important;
}
body.eco-nav-page .service-card:nth-child(4n+1) h2,
body.eco-nav-page .service-card:nth-child(4n+1) h3{
color:var(--accent-teal)!important;
}
body.eco-nav-page .service-card:nth-child(4n+2) h2,
body.eco-nav-page .service-card:nth-child(4n+2) h3{
color:var(--accent-terracotta)!important;
}
body.eco-nav-page .service-card:nth-child(4n+3) h2,
body.eco-nav-page .service-card:nth-child(4n+3) h3{
color:var(--accent-indigo)!important;
}
body.eco-nav-page .service-card:nth-child(4n) h2,
body.eco-nav-page .service-card:nth-child(4n) h3{
color:var(--accent-ochre)!important;
}
/* -------- TECHNOLOGIES: cooler/data vocabulary -------- */
body.eco-nav-page .tech-page h1,
body.eco-nav-page .technologies-hero h1{
color:var(--accent-indigo)!important;
}
body.eco-nav-page .tech-card:nth-child(5n+1) h2,
body.eco-nav-page .tech-card:nth-child(5n+1) h3{
color:var(--accent-teal)!important;
}
body.eco-nav-page .tech-card:nth-child(5n+2) h2,
body.eco-nav-page .tech-card:nth-child(5n+2) h3{
color:var(--accent-indigo)!important;
}
body.eco-nav-page .tech-card:nth-child(5n+3) h2,
body.eco-nav-page .tech-card:nth-child(5n+3) h3{
color:var(--accent-plum)!important;
}
body.eco-nav-page .tech-card:nth-child(5n+4) h2,
body.eco-nav-page .tech-card:nth-child(5n+4) h3{
color:var(--accent-ochre)!important;
}
body.eco-nav-page .tech-card:nth-child(5n) h2,
body.eco-nav-page .tech-card:nth-child(5n) h3{
color:var(--accent-sage)!important;
}
/* -------- INDUSTRIES: grounded / sector-led -------- */
body.eco-nav-page .industries-hero h1,
body.eco-nav-page .industry-page h1{
color:var(--accent-terracotta)!important;
}
body.eco-nav-page .industry-card:nth-child(3n+1) h2,
body.eco-nav-page .industry-card:nth-child(3n+1) h3{
color:var(--accent-olive)!important;
}
body.eco-nav-page .industry-card:nth-child(3n+2) h2,
body.eco-nav-page .industry-card:nth-child(3n+2) h3{
color:var(--accent-teal)!important;
}
body.eco-nav-page .industry-card:nth-child(3n) h2,
body.eco-nav-page .industry-card:nth-child(3n) h3{
color:var(--accent-terracotta)!important;
}
/* -------- BLOG / PORTFOLIO: editorial, slightly more sophisticated -------- */
body.eco-nav-page .blog-hero h1,
body.eco-nav-page .insights-hero h1{
color:var(--accent-plum)!important;
}
body.eco-nav-page .blog-card h2,
body.eco-nav-page .blog-card h3{
color:var(--accent-plum)!important;
}
body.eco-nav-page .portfolio-hero h1{
color:var(--accent-indigo)!important;
}
body.eco-nav-page .portfolio-card h2,
body.eco-nav-page .portfolio-card h3{
color:var(--accent-indigo)!important;
}
/* -------- CONTACT: warm, human, high-confidence -------- */
body.eco-nav-page .contact-hero-v2 h1,
body.eco-nav-page .contact-hero h1{
color:var(--accent-teal)!important;
}
body.eco-nav-page .contact-form h2,
body.eco-nav-page .contact-form h3{
color:var(--accent-terracotta)!important;
}
body.eco-nav-page .contact-step:nth-child(3n+1) h3,
body.eco-nav-page .contact-step:nth-child(3n+1) strong{
color:var(--accent-teal)!important;
}
body.eco-nav-page .contact-step:nth-child(3n+2) h3,
body.eco-nav-page .contact-step:nth-child(3n+2) strong{
color:var(--accent-ochre)!important;
}
body.eco-nav-page .contact-step:nth-child(3n) h3,
body.eco-nav-page .contact-step:nth-child(3n) strong{
color:var(--accent-indigo)!important;
}
/* Kicker/eyebrow hierarchy: use one strong accent, not rainbow headings. */
body.eco-nav-page:not(.home-page-v3) .eyebrow,
body.eco-nav-page:not(.home-page-v3) .kicker,
body.eco-nav-page:not(.home-page-v3) .section-kicker{
color:var(--accent-teal)!important;
}
/* Links get chromatic identity without changing their geometry. */
body.eco-nav-page:not(.home-page-v3) .text-link:hover,
body.eco-nav-page:not(.home-page-v3) .learn-more:hover,
body.eco-nav-page:not(.home-page-v3) a:hover{
text-decoration-color:currentColor;
}
/* Keep all accent typography matte: no glow, shadow or gradient text. */
body.eco-nav-page .eyebrow,
body.eco-nav-page .kicker,
body.eco-nav-page h1,
body.eco-nav-page h2,
body.eco-nav-page h3{
text-shadow:none!important;
}
/* =========================================================
V2 — ACTUAL PAGE STRUCTURE ACCENTS
========================================================= */
/* ABOUT — timeline storytelling */
body.eco-nav-page .about-timeline-step:nth-child(3n+1) .about-timeline-num,
body.eco-nav-page .about-timeline-step:nth-child(3n+1) h3{
color:var(--accent-teal)!important;
}
body.eco-nav-page .about-timeline-step:nth-child(3n+2) .about-timeline-num,
body.eco-nav-page .about-timeline-step:nth-child(3n+2) h3{
color:var(--accent-terracotta)!important;
}
body.eco-nav-page .about-timeline-step:nth-child(3n) .about-timeline-num,
body.eco-nav-page .about-timeline-step:nth-child(3n) h3{
color:var(--accent-indigo)!important;
}
body.eco-nav-page .about-principles .card:nth-child(3n+1) h3{color:var(--accent-teal)!important;}
body.eco-nav-page .about-principles .card:nth-child(3n+2) h3{color:var(--accent-ochre)!important;}
body.eco-nav-page .about-principles .card:nth-child(3n) h3{color:var(--accent-plum)!important;}
body.eco-nav-page .about-callout h2{color:var(--accent-terracotta)!important;}
/* SERVICES — capability tiles */
body.eco-nav-page .detail-hero .kicker{color:var(--accent-teal)!important;}
body.eco-nav-page .cat-head h2{color:var(--accent-indigo)!important;}
body.eco-nav-page .cat-count{color:var(--accent-ochre)!important;}
body.eco-nav-page .tile-grid .tile:nth-child(4n+1) h3,
body.eco-nav-page .tile-grid .tile:nth-child(4n+1) .tagline{color:var(--accent-teal)!important;}
body.eco-nav-page .tile-grid .tile:nth-child(4n+2) h3,
body.eco-nav-page .tile-grid .tile:nth-child(4n+2) .tagline{color:var(--accent-terracotta)!important;}
body.eco-nav-page .tile-grid .tile:nth-child(4n+3) h3,
body.eco-nav-page .tile-grid .tile:nth-child(4n+3) .tagline{color:var(--accent-indigo)!important;}
body.eco-nav-page .tile-grid .tile:nth-child(4n) h3,
body.eco-nav-page .tile-grid .tile:nth-child(4n) .tagline{color:var(--accent-ochre)!important;}
body.eco-nav-page .tile .label{color:var(--accent-sage)!important;}
body.eco-nav-page .tile-cta{color:var(--accent-teal)!important;}
/* TECHNOLOGIES — category-led cool spectrum */
body.eco-nav-page .cat-block:nth-of-type(5n+1) .cat-head h2{color:var(--accent-teal)!important;}
body.eco-nav-page .cat-block:nth-of-type(5n+2) .cat-head h2{color:var(--accent-indigo)!important;}
body.eco-nav-page .cat-block:nth-of-type(5n+3) .cat-head h2{color:var(--accent-plum)!important;}
body.eco-nav-page .cat-block:nth-of-type(5n+4) .cat-head h2{color:var(--accent-ochre)!important;}
body.eco-nav-page .cat-block:nth-of-type(5n) .cat-head h2{color:var(--accent-sage)!important;}
body.eco-nav-page .cat-block .cat-count{color:var(--accent-ochre)!important;}
body.eco-nav-page .cat-block .tile:nth-child(5n+1) .tagline{color:var(--accent-teal)!important;}
body.eco-nav-page .cat-block .tile:nth-child(5n+2) .tagline{color:var(--accent-indigo)!important;}
body.eco-nav-page .cat-block .tile:nth-child(5n+3) .tagline{color:var(--accent-plum)!important;}
body.eco-nav-page .cat-block .tile:nth-child(5n+4) .tagline{color:var(--accent-ochre)!important;}
body.eco-nav-page .cat-block .tile:nth-child(5n) .tagline{color:var(--accent-sage)!important;}
/* INDUSTRIES — chips and offer story */
body.eco-nav-page .industry-chip:nth-child(4n+1){color:var(--accent-olive)!important;}
body.eco-nav-page .industry-chip:nth-child(4n+2){color:var(--accent-teal)!important;}
body.eco-nav-page .industry-chip:nth-child(4n+3){color:var(--accent-terracotta)!important;}
body.eco-nav-page .industry-chip:nth-child(4n){color:var(--accent-indigo)!important;}
body.eco-nav-page .offer-item:nth-child(3n+1) strong{color:var(--accent-teal)!important;}
body.eco-nav-page .offer-item:nth-child(3n+2) strong{color:var(--accent-ochre)!important;}
body.eco-nav-page .offer-item:nth-child(3n) strong{color:var(--accent-terracotta)!important;}
/* CONTACT — use the actual V2 contact structure */
body.contact-page .contact-eyebrow-v2,
body.contact-page .section-kicker-v2,
body.contact-page .context-kicker{
color:var(--accent-teal)!important;
}
body.contact-page .contact-route-v2 > *:nth-child(3n+1){color:var(--accent-teal)!important;}
body.contact-page .contact-route-v2 > *:nth-child(3n+2){color:var(--accent-ochre)!important;}
body.contact-page .contact-route-v2 > *:nth-child(3n){color:var(--accent-indigo)!important;}
body.contact-page .contact-main-v2 h2:nth-of-type(1){color:var(--accent-terracotta)!important;}
body.contact-page .contact-main-v2 h2:nth-of-type(2){color:var(--accent-teal)!important;}
body.contact-page .contact-main-v2 h2:nth-of-type(3){color:var(--accent-indigo)!important;}
body.contact-page .contact-context-v2 h2{color:var(--accent-terracotta)!important;}
body.contact-page .context-flow-v2 h3:nth-child(3n+1){color:var(--accent-teal)!important;}
body.contact-page .context-flow-v2 h3:nth-child(3n+2){color:var(--accent-ochre)!important;}
body.contact-page .context-flow-v2 h3:nth-child(3n){color:var(--accent-indigo)!important;}
body.contact-page .field-v2 label{color:var(--accent-indigo)!important;}
body.contact-page .interest-choice label:nth-of-type(3n+1){color:var(--accent-teal)!important;}
body.contact-page .interest-choice label:nth-of-type(3n+2){color:var(--accent-terracotta)!important;}
body.contact-page .interest-choice label:nth-of-type(3n){color:var(--accent-plum)!important;}
/* BLOG / PORTFOLIO — actual card containers */
body.eco-nav-page .blog-grid > *,
body.eco-nav-page .portfolio-grid > *{
transition:color .2s ease,border-color .2s ease;
}
body.eco-nav-page .blog-grid > *:nth-child(3n+1) h2,
body.eco-nav-page .blog-grid > *:nth-child(3n+1) h3{color:var(--accent-plum)!important;}
body.eco-nav-page .blog-grid > *:nth-child(3n+2) h2,
body.eco-nav-page .blog-grid > *:nth-child(3n+2) h3{color:var(--accent-teal)!important;}
body.eco-nav-page .blog-grid > *:nth-child(3n) h2,
body.eco-nav-page .blog-grid > *:nth-child(3n) h3{color:var(--accent-terracotta)!important;}
body.eco-nav-page .portfolio-grid > *:nth-child(3n+1) h2,
body.eco-nav-page .portfolio-grid > *:nth-child(3n+1) h3{color:var(--accent-indigo)!important;}
body.eco-nav-page .portfolio-grid > *:nth-child(3n+2) h2,
body.eco-nav-page .portfolio-grid > *:nth-child(3n+2) h3{color:var(--accent-teal)!important;}
body.eco-nav-page .portfolio-grid > *:nth-child(3n) h2,
body.eco-nav-page .portfolio-grid > *:nth-child(3n) h3{color:var(--accent-ochre)!important;}
/* Common CTA labels get one recognizable signature color. */
body.eco-nav-page .btn-primary,
body.eco-nav-page .tile-cta{
color:var(--accent-teal)!important;
}
/* ===== SOURCE: button-contrast-v1.css ===== */
/* =========================================================
ECOTECH BUTTON CONTRAST V1
Buttons are controls, not typographic accents.
Keep them high-contrast and readable.
========================================================= */
:root{
--button-ink:#30483F;
--button-teal:#2F8587;
--button-terracotta:#9A604A;
--button-light:#F6F5F1;
--button-line:rgba(48,72,63,.22);
}
/* Primary actions: dark, quiet, maximum readability. */
.btn-primary,
.eco-nav-v23__cta,
.contact-page .btn-primary,
.contact-page button[type="submit"],
.contact-page input[type="submit"]{
background:var(--button-ink)!important;
color:var(--button-light)!important;
border-color:var(--button-ink)!important;
text-shadow:none!important;
}
/* Secondary actions can carry the signature teal without sacrificing contrast. */
.btn-secondary{
background:var(--button-teal)!important;
color:#fff!important;
border-color:var(--button-teal)!important;
text-shadow:none!important;
}
/* Tile / text CTAs sit on light surfaces, so use dark teal text. */
.tile-cta,
.v3-path-go{
color:var(--button-ink)!important;
text-shadow:none!important;
}
.tile-cta:hover,
.v3-path-go:hover{
color:var(--button-teal)!important;
}
/* Homepage pill links: outline control, not colored body copy. */
.home-page-v3 .pill-link{
color:var(--button-ink)!important;
border-color:var(--button-line)!important;
background:transparent!important;
}
.home-page-v3 .pill-link:hover{
color:var(--button-teal)!important;
border-color:var(--button-teal)!important;
}
/* Navigation CTA must always remain readable regardless of page accent rules. */
.eco-nav-v23__cta,
.eco-nav-v23__sheet-cta{
background:var(--button-ink)!important;
color:var(--button-light)!important;
border-color:var(--button-ink)!important;
}
/* Interest choices are selectable controls; labels shouldn't inherit
decorative heading colors that reduce contrast. */
.contact-page .interest-choice label{
color:var(--button-ink)!important;
}
/* Dark CTA bands: reverse the hierarchy. */
.cta-band .btn-primary,
.v3-final .btn-primary{
background:var(--button-light)!important;
color:var(--button-ink)!important;
border-color:var(--button-light)!important;
}
/* Focus states remain obvious and accessible. */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
a.btn:focus-visible{
outline:2px solid var(--button-teal)!important;
outline-offset:3px;
}
/* Never let sitewide heading accent rules recolor button text. */
.btn,
.btn *,
.tile-cta,
.tile-cta *,
.eco-nav-v23__cta,
.eco-nav-v23__cta *{
text-shadow:none!important;
}
/* ===== SOURCE: services-text-contrast-v1.css ===== */
/* =========================================================
ECOTECH SERVICES — TEXT CONTRAST V1
Large typography is explicitly assigned to its background.
========================================================= */
/* DARK SERVICE HERO
Large title must remain light; accent color is reserved for the kicker. */
body.eco-nav-page .detail-hero{
color:#F6F5F1!important;
}
body.eco-nav-page .detail-hero h1{
color:#F6F5F1!important;
text-shadow:none!important;
}
body.eco-nav-page .detail-hero h1 em{
color:#B7654B!important;
}
body.eco-nav-page .detail-hero p,
body.eco-nav-page .detail-hero .hero-copy,
body.eco-nav-page .detail-hero .lede{
color:rgba(246,245,241,.82)!important;
}
body.eco-nav-page .detail-hero .kicker{
color:#5F9C9D!important;
}
/* LIGHT CONTENT SURFACES
Stronger dark text is the base; colored accents are limited to short
headings/labels so readability stays high. */
body.eco-nav-page main h2,
body.eco-nav-page .content-section h2,
body.eco-nav-page .section-head h2,
body.eco-nav-page .cat-head h2{
color:#30483F!important;
text-shadow:none!important;
}
body.eco-nav-page main h3,
body.eco-nav-page .tile h3,
body.eco-nav-page .card h3{
color:#30483F!important;
text-shadow:none!important;
}
body.eco-nav-page .tile p,
body.eco-nav-page .tile .tagline,
body.eco-nav-page .card p{
color:#626762!important;
}
/* Bring color back only where it helps hierarchy. */
body.eco-nav-page .cat-head .cat-count{
color:#B08A3E!important;
}
body.eco-nav-page .tile-grid .tile:nth-child(4n+1) h3{
color:#2F8587!important;
}
body.eco-nav-page .tile-grid .tile:nth-child(4n+2) h3{
color:#B7654B!important;
}
body.eco-nav-page .tile-grid .tile:nth-child(4n+3) h3{
color:#536B8A!important;
}
body.eco-nav-page .tile-grid .tile:nth-child(4n) h3{
color:#B08A3E!important;
}
body.eco-nav-page .tile .label{
color:#4F8175!important;
}
body.eco-nav-page .tile .tile-cta{
color:#30483F!important;
}
/* DARK CTA BAND
Never allow colored heading rules to leak into the dark background. */
body.eco-nav-page .cta-band{
color:#F6F5F1!important;
}
body.eco-nav-page .cta-band h2,
body.eco-nav-page .cta-band h3{
color:#F6F5F1!important;
}
body.eco-nav-page .cta-band p{
color:rgba(246,245,241,.78)!important;
}
body.eco-nav-page .cta-band .btn-primary{
background:#F6F5F1!important;
color:#30483F!important;
border-color:#F6F5F1!important;
}
/* SERVICE INDEX CATEGORY TITLES */
body.eco-nav-page .cat-block .cat-head h2{
color:#30483F!important;
}
body.eco-nav-page .cat-block:nth-child(4n+1) .cat-head h2{color:#2F8587!important;}
body.eco-nav-page .cat-block:nth-child(4n+2) .cat-head h2{color:#B7654B!important;}
body.eco-nav-page .cat-block:nth-child(4n+3) .cat-head h2{color:#536B8A!important;}
body.eco-nav-page .cat-block:nth-child(4n) .cat-head h2{color:#80607D!important;}
/* Breadcrumbs/navigation-like text stays quiet. */
body.eco-nav-page .breadcrumb,
body.eco-nav-page .breadcrumbs{
color:#626762!important;
}
/* ===== SOURCE: button-contrast-v2.css ===== */
/* =========================================================
ECOTECH — SITEWIDE BUTTON CONTRAST V2
Final control layer. Decorative text colors never override controls.
========================================================= */
:root{
--ctrl-dark:#30483F;
--ctrl-teal:#2F8587;
--ctrl-light:#F6F5F1;
--ctrl-line:rgba(48,72,63,.24);
}
/* ---------- Universal solid buttons ---------- */
a.btn,
button.btn,
button[type="submit"],
input[type="submit"],
.btn-cta,
.contact-submit-v2{
text-shadow:none!important;
}
/* Primary: highest contrast on light/neutral surfaces. */
.btn-primary,
a.btn-primary,
button.btn-primary,
.contact-submit-v2{
background:var(--ctrl-dark)!important;
color:var(--ctrl-light)!important;
border-color:var(--ctrl-dark)!important;
}
/* Secondary: punchy but still high contrast. */
.btn-secondary,
a.btn-secondary,
button.btn-secondary{
background:var(--ctrl-teal)!important;
color:#fff!important;
border-color:var(--ctrl-teal)!important;
}
/* Pill/rounded CTAs used throughout service/technology pages. */
.btn-cta{
background:var(--ctrl-dark)!important;
color:var(--ctrl-light)!important;
border-color:var(--ctrl-dark)!important;
}
/* ---------- Navigation ---------- */
.eco-nav-v23__cta,
.eco-nav-v23__sheet-cta{
background:var(--ctrl-dark)!important;
color:var(--ctrl-light)!important;
border-color:var(--ctrl-dark)!important;
}
/* ---------- Homepage buttons ---------- */
.home-page-v3 .v3-btn--dark,
.home-page-v3 .v3-btn{
background:var(--ctrl-dark)!important;
color:var(--ctrl-light)!important;
border-color:var(--ctrl-dark)!important;
}
.home-page-v3 .v3-btn--light{
background:var(--ctrl-light)!important;
color:var(--ctrl-dark)!important;
border-color:var(--ctrl-light)!important;
}
/* Outline/pill links are controls even though they look like text. */
.pill-link{
background:var(--ctrl-light)!important;
color:var(--ctrl-dark)!important;
border-color:var(--ctrl-line)!important;
}
.pill-link:hover{
background:#fff!important;
color:var(--ctrl-teal)!important;
border-color:var(--ctrl-teal)!important;
}
/* On intentionally dark sections, reverse the control. */
.section-navy .pill-link,
.detail-hero .pill-link{
background:transparent!important;
color:var(--ctrl-light)!important;
border-color:rgba(246,245,241,.34)!important;
}
.section-navy .pill-link:hover,
.detail-hero .pill-link:hover{
background:rgba(246,245,241,.10)!important;
color:#fff!important;
border-color:rgba(246,245,241,.65)!important;
}
/* Service/technology tile CTAs are text controls on light cards. */
.tile-cta,
.v3-path-go{
background:transparent!important;
color:var(--ctrl-dark)!important;
border-color:transparent!important;
}
.tile-cta:hover,
.v3-path-go:hover{
color:var(--ctrl-teal)!important;
}
/* ---------- Dark CTA bands ---------- */
.cta-band .btn-primary,
.v3-final .btn-primary,
.v3-final .v3-btn--light{
background:var(--ctrl-light)!important;
color:var(--ctrl-dark)!important;
border-color:var(--ctrl-light)!important;
}
.cta-band .btn-secondary,
.v3-final .btn-secondary,
.v3-final .v3-btn--dark{
background:var(--ctrl-teal)!important;
color:#fff!important;
border-color:var(--ctrl-teal)!important;
}
/* ---------- Contact choices are controls, not decorative headings ---------- */
.contact-page .interest-choice label{
color:var(--ctrl-dark)!important;
}
.contact-page .interest-choice label:hover{
color:var(--ctrl-teal)!important;
}
/* ---------- Disabled state ---------- */
button:disabled,
input[type="submit"]:disabled,
.btn[aria-disabled="true"]{
opacity:.55!important;
cursor:not-allowed!important;
filter:none!important;
}
/* ---------- Keyboard focus ---------- */
a.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.btn:focus-visible,
.btn-cta:focus-visible,
.contact-submit-v2:focus-visible{
outline:2px solid var(--ctrl-teal)!important;
outline-offset:3px;
}
/* Prevent text-accent rules from ever recoloring a control's label. */
.btn *,
.btn-cta *,
.eco-nav-v23__cta *,
.contact-submit-v2 *,
.v3-btn *{
text-shadow:none!important;
}
/* ===== SOURCE: services-nav-buttons-v2.css ===== */
/* =========================================================
SERVICE DETAIL — CURRENT NAV + BUTTON FINISH
========================================================= */
/* The detail-page hero uses the same current navigation as the rest of ECOTECH. */
body.eco-nav-page .detail-hero .hero-ctas .btn-primary{
background:#30483F!important;
color:#F6F5F1!important;
border:1px solid #30483F!important;
box-shadow:none!important;
}
body.eco-nav-page .detail-hero .hero-ctas .btn-primary:hover{
background:#2F8587!important;
color:#fff!important;
border-color:#2F8587!important;
}
body.eco-nav-page .detail-hero .hero-ctas .btn-secondary{
background:#F6F5F1!important;
color:#30483F!important;
border:1px solid rgba(246,245,241,.72)!important;
}
body.eco-nav-page .detail-hero .hero-ctas .btn-secondary:hover{
background:#fff!important;
color:#2F8587!important;
border-color:#fff!important;
}
/* Remove the visual effect of old inline gradient declarations. */
body.eco-nav-page .detail-hero .hero-ctas .btn{
text-shadow:none!important;
filter:none!important;
}
/* Current nav must sit above every service hero/decorative layer. */
.eco-nav-v23{
position:relative;
z-index:1000!important;
}
.eco-nav-v23__menu,
.eco-nav-v23__sheet{
z-index:1100!important;
}
/* ===== SOURCE: navigation.css ===== */
/* ECOTECH CONSOLIDATED NAVIGATION V1 */
/* =========================================================
ECOTECH NAV V23
One shared navigation. Old topbar is removed.
========================================================= */
:root{
--eco-nav-bg:#E9E7DF;
--eco-nav-light:#F5F3EC;
--eco-nav-ink:#17252B;
--eco-nav-forest:#426B5A;
--eco-nav-teal:#3E7D82;
--eco-nav-border:rgba(23,37,43,.11);
}
body.eco-nav-page{
padding-top:82px;
}
.eco-nav-v23{
position:fixed;
top:12px;
left:50%;
z-index:9999;
width:min(1240px,calc(100% - 28px));
min-height:66px;
transform:translateX(-50%);
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:34px;
box-sizing:border-box;
padding:8px 12px 8px 18px;
border:1px solid var(--eco-nav-border);
border-radius:18px;
background:rgba(233,231,223,.91);
box-shadow:0 10px 32px rgba(23,37,43,.07);
backdrop-filter:blur(16px) saturate(112%);
-webkit-backdrop-filter:blur(16px) saturate(112%);
transition:min-height .22s ease,padding .22s ease,background-color .22s ease,box-shadow .22s ease;
}
.eco-nav-v23.is-scrolled{
min-height:56px;
padding-top:5px;
padding-bottom:5px;
background:rgba(233,231,223,.97);
box-shadow:0 8px 26px rgba(23,37,43,.10);
}
.eco-nav-v23__brand{
display:flex;
align-items:center;
min-width:0;
color:var(--eco-nav-ink);
text-decoration:none;
}
.eco-nav-v23__logo{
display:block;
width:auto;
height:50px;
max-width:178px;
object-fit:contain;
}
.eco-nav-v23__links{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.eco-nav-v23__link,
.eco-nav-v23__trigger{
position:relative;
display:inline-flex;
align-items:center;
border:0;
border-radius:10px;
padding:11px 14px;
color:rgba(23,37,43,.76);
background:transparent;
font:inherit;
font-size:13px;
font-weight:650;
line-height:1.1;
letter-spacing:.005em;
text-decoration:none;
cursor:pointer;
white-space:nowrap;
}
.eco-nav-v23__link:hover,
.eco-nav-v23__trigger:hover{
color:var(--eco-nav-ink);
background:rgba(255,255,255,.30);
}
.eco-nav-v23__link.is-active{
color:var(--eco-nav-ink);
}
.eco-nav-v23__link.is-active::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:2px;
height:2px;
border-radius:2px;
background:var(--eco-nav-teal);
}
.eco-nav-v23__trigger span{
margin-left:5px;
font-size:9px;
transition:transform .18s ease;
}
.eco-nav-v23__item{
position:relative;
}
.eco-nav-v23__item.is-open .eco-nav-v23__trigger{
color:var(--eco-nav-ink);
background:rgba(255,255,255,.30);
}
.eco-nav-v23__item.is-open .eco-nav-v23__trigger span{
transform:rotate(180deg);
}
.eco-nav-v23__menu{
position:absolute;
top:calc(100% + 10px);
left:50%;
width:min(700px,calc(100vw - 36px));
transform:translate(-50%,-5px);
display:grid;
grid-template-columns:1.05fr 1fr;
gap:10px;
padding:14px;
border:1px solid var(--eco-nav-border);
border-radius:16px;
background:rgba(245,243,236,.98);
box-shadow:0 22px 55px rgba(23,37,43,.14);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.eco-nav-v23__item.is-open .eco-nav-v23__menu{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,0);
}
.eco-nav-v23__intro{
padding:18px;
border-radius:12px;
background:var(--eco-nav-ink);
color:var(--eco-nav-light);
}
.eco-nav-v23__intro small{
display:block;
color:#8CC5C4;
font-size:8px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}
.eco-nav-v23__intro strong{
display:block;
margin-top:8px;
font-size:21px;
line-height:1.08;
letter-spacing:-.03em;
}
.eco-nav-v23__intro p{
margin:8px 0 0;
color:rgba(245,243,236,.65);
font-size:10px;
line-height:1.5;
}
.eco-nav-v23__list{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}
.eco-nav-v23__list a{
display:block;
padding:12px;
border:1px solid rgba(23,37,43,.08);
border-radius:10px;
color:var(--eco-nav-ink);
background:rgba(255,255,255,.36);
font-size:10px;
font-weight:700;
line-height:1.25;
text-decoration:none;
transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.eco-nav-v23__list a:hover{
background:#fff;
border-color:rgba(62,125,130,.30);
transform:translateY(-2px);
}
.eco-nav-v23__list small{
display:block;
margin-top:4px;
color:rgba(23,37,43,.52);
font-size:8.5px;
font-weight:500;
line-height:1.35;
}
.eco-nav-v23__cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 17px;
border-radius:11px;
background:var(--eco-nav-ink);
color:var(--eco-nav-light);
font-size:12px;
font-weight:750;
line-height:1;
text-decoration:none;
white-space:nowrap;
transition:background-color .18s ease,transform .18s ease;
}
.eco-nav-v23__cta:hover{
background:var(--eco-nav-forest);
transform:translateY(-1px);
}
.eco-nav-v23__cta span{
transition:transform .18s ease;
}
.eco-nav-v23__cta:hover span{
transform:translateX(3px);
}
.eco-nav-v23__mobile{
display:none;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:0;
border-radius:10px;
background:transparent;
cursor:pointer;
}
.eco-nav-v23__mobile-lines{
position:relative;
display:block;
width:20px;
height:2px;
border-radius:2px;
background:var(--eco-nav-ink);
}
.eco-nav-v23__mobile-lines::before,
.eco-nav-v23__mobile-lines::after{
content:"";
position:absolute;
left:0;
width:20px;
height:2px;
border-radius:2px;
background:var(--eco-nav-ink);
transition:transform .18s ease,top .18s ease;
}
.eco-nav-v23__mobile-lines::before{top:-6px}
.eco-nav-v23__mobile-lines::after{top:6px}
.eco-nav-v23.mobile-open .eco-nav-v23__mobile-lines{
background:transparent;
}
.eco-nav-v23.mobile-open .eco-nav-v23__mobile-lines::before{
top:0;
transform:rotate(45deg);
}
.eco-nav-v23.mobile-open .eco-nav-v23__mobile-lines::after{
top:0;
transform:rotate(-45deg);
}
.eco-nav-v23__sheet{
display:none;
}
@media(max-width:900px){
body.eco-nav-page{
padding-top:70px;
}
.eco-nav-v23{
top:9px;
width:calc(100% - 20px);
min-height:58px;
grid-template-columns:auto 1fr auto;
gap:10px;
padding:7px 9px 7px 13px;
}
.eco-nav-v23.is-scrolled{
min-height:54px;
}
.eco-nav-v23__logo{
height:42px;
max-width:152px;
}
.eco-nav-v23__links,
.eco-nav-v23__cta{
display:none;
}
.eco-nav-v23__mobile{
display:flex;
justify-self:end;
}
.eco-nav-v23__sheet{
position:fixed;
inset:0;
z-index:-1;
display:flex;
flex-direction:column;
gap:0;
padding:96px 26px 28px;
overflow:auto;
background:var(--eco-nav-bg);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .20s ease,visibility .20s ease;
}
.eco-nav-v23.mobile-open .eco-nav-v23__sheet{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.eco-nav-v23__sheet a{
display:flex;
align-items:flex-start;
gap:16px;
padding:14px 0;
border-bottom:1px solid rgba(23,37,43,.12);
color:var(--eco-nav-ink);
text-decoration:none;
}
.eco-nav-v23__sheet a b{
width:25px;
padding-top:4px;
color:var(--eco-nav-teal);
font-size:9px;
letter-spacing:.08em;
}
.eco-nav-v23__sheet a span{
font-size:27px;
font-weight:720;
line-height:1;
letter-spacing:-.035em;
}
.eco-nav-v23__sheet a small{
display:block;
margin-top:4px;
color:rgba(23,37,43,.54);
font-size:10px;
font-weight:500;
line-height:1.35;
}
.eco-nav-v23__sheet .eco-nav-v23__sheet-cta{
justify-content:center;
margin-top:24px;
padding:15px;
border:0;
border-radius:11px;
background:var(--eco-nav-ink);
color:var(--eco-nav-light);
font-size:12px;
font-weight:750;
}
}
@media(prefers-reduced-motion:reduce){
.eco-nav-v23,
.eco-nav-v23 *,
.eco-nav-v23__mobile-lines::before,
.eco-nav-v23__mobile-lines::after{
transition:none !important;
}
}
/* Technology dropdown additions */
/* V26: technology dropdown only. V24 navigation remains the base. */
.eco-nav-v23__menu--technology{
width:min(880px,calc(100vw - 36px));
grid-template-columns:260px 1fr;
}
.eco-nav-v23__technology-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
}
.eco-nav-v23__technology-grid a{
display:block;
padding:11px 10px;
border:1px solid rgba(23,37,43,.08);
border-radius:9px;
color:#17252B;
background:rgba(255,255,255,.38);
text-decoration:none;
font-size:10px;
font-weight:700;
line-height:1.2;
transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.eco-nav-v23__technology-grid a:hover{
background:#fff;
border-color:rgba(62,125,130,.30);
transform:translateY(-2px);
}
.eco-nav-v23__technology-grid small{
display:block;
margin-top:4px;
color:rgba(23,37,43,.52);
font-size:8px;
font-weight:500;
line-height:1.3;
}
@media(max-width:900px){
.eco-nav-v23__menu--technology{width:auto;grid-template-columns:1fr}
.eco-nav-v23__technology-grid{grid-template-columns:1fr 1fr}
}
/* ===== SOURCE: sitewide-text-contrast-v3.css ===== */
/* =========================================================
ECOTECH — SITEWIDE LARGE-TEXT CONTRAST V3
One final rule: large text must be readable against the
surface it sits on. Accent color is secondary to contrast.
========================================================= */
:root{
--contrast-light:#F6F5F1;
--contrast-soft:rgba(246,245,241,.80);
--contrast-teal:#2F8587;
--contrast-warm:#B7654B;
}
/* DARK / NAVY / INK SURFACES
Covers shared legacy surfaces as well as newer homepage sections. */
.section-navy,
.page-header,
.hero-section,
.cta-band,
.detail-hero,
.hp7-tech-depth,
.v3-final,
.footer{
color:var(--contrast-light);
}
/* Large headings: always readable. */
.section-navy h1,
.section-navy h2,
.section-navy h3,
.page-header h1,
.page-header h2,
.page-header h3,
.hero-section h1,
.hero-section h2,
.hero-section h3,
.cta-band h1,
.cta-band h2,
.cta-band h3,
.detail-hero h1,
.detail-hero h2,
.detail-hero h3,
.hp7-tech-depth h1,
.hp7-tech-depth h2,
.hp7-tech-depth h3,
.v3-final h1,
.v3-final h2,
.v3-final h3,
.footer h1,
.footer h2,
.footer h3{
color:var(--contrast-light)!important;
opacity:1!important;
text-shadow:none!important;
}
/* Supporting copy on dark surfaces. */
.section-navy p,
.page-header p,
.hero-section p,
.cta-band p,
.detail-hero p,
.hp7-tech-depth p,
.v3-final p,
.footer p{
color:var(--contrast-soft)!important;
opacity:1!important;
}
/* Short accent labels can still carry the visual personality. */
.section-navy .kicker,
.page-header .kicker,
.hero-section .kicker,
.cta-band .kicker,
.detail-hero .kicker,
.hp7-kicker,
.v3-final .kicker{
color:var(--contrast-teal)!important;
opacity:1!important;
}
/* Highlighted words are allowed to be colorful, but only with the
high-contrast matte accents. */
.section-navy h1 em,
.page-header h1 em,
.hero-section h1 em,
.detail-hero h1 em,
.v3-final h1 em{
color:var(--contrast-teal)!important;
-webkit-text-fill-color:var(--contrast-teal)!important;
background:none!important;
-webkit-background-clip:initial!important;
background-clip:initial!important;
}
/* Dark CTA / footer links. */
.cta-band a:not(.btn),
.section-navy a:not(.btn),
.detail-hero a:not(.btn),
.v3-final a:not(.btn),
.footer a{
color:rgba(246,245,241,.86);
}
.cta-band a:not(.btn):hover,
.section-navy a:not(.btn):hover,
.detail-hero a:not(.btn):hover,
.v3-final a:not(.btn):hover,
.footer a:hover{
color:#fff;
}
/* LIGHT / GREIGE SURFACES
Prevent muted accent colors from becoming too close to the canvas. */
body:not(.home-page-v3) main:not(.section-navy):not(.detail-hero) h1,
body:not(.home-page-v3) main:not(.section-navy):not(.detail-hero) h2,
body:not(.home-page-v3) main:not(.section-navy):not(.detail-hero) h3{
text-shadow:none!important;
}
/* Preserve the deliberately colorful small labels on light surfaces. */
body:not(.home-page-v3) .eyebrow,
body:not(.home-page-v3) .kicker,
body:not(.home-page-v3) .section-kicker{
opacity:1!important;
}
/* Navigation remains its own high-contrast system. */
.eco-nav-v23,
.eco-nav-v23 *{
text-shadow:none!important;
}
/* Form labels and helper text must remain readable. */
.contact-page label,
.contact-page .field-v2 label{
opacity:1!important;
}
/* Never use opacity as a substitute for hierarchy on large text. */
h1,h2,h3{
-webkit-font-smoothing:antialiased;
}
/* ===== SOURCE: sitewide-neutral-wash-v1.css ===== */
/* =========================================================
ECOTECH — SITEWIDE NEUTRAL WASH CONTROL V1
Eliminate legacy green/teal atmospheric washes that were
leaking through the matte greige system.
========================================================= */
/* Neutralize generic content surfaces across the inner pages. */
body.eco-nav-page main > .section:not(.section-navy):not(.detail-hero):not(.cta-band),
body.eco-nav-page main .content-section:not(.section-navy):not(.detail-hero):not(.cta-band),
body.eco-nav-page main .cat-block,
body.eco-nav-page main .tile-grid{
background-color:#F4F3EF!important;
}
/* Kill inherited decorative pseudo-element washes on ordinary content areas. */
body.eco-nav-page main > .section:not(.section-navy):not(.detail-hero):not(.cta-band)::before,
body.eco-nav-page main > .section:not(.section-navy):not(.detail-hero):not(.cta-band)::after,
body.eco-nav-page main .content-section:not(.section-navy):not(.detail-hero):not(.cta-band)::before,
body.eco-nav-page main .content-section:not(.section-navy):not(.detail-hero):not(.cta-band)::after,
body.eco-nav-page main .cat-block::before,
body.eco-nav-page main .cat-block::after{
background-image:none!important;
background:none!important;
opacity:0!important;
}
/* Cards remain slightly lighter than the canvas, never green-tinted. */
body.eco-nav-page main .tile,
body.eco-nav-page main .card,
body.eco-nav-page main .service-card,
body.eco-nav-page main .industry-card,
body.eco-nav-page main .blog-card,
body.eco-nav-page main .portfolio-card{
background-color:#F8F7F3!important;
}
/* Remove old teal/green border washes where they were being used as
atmospheric decoration rather than semantic accents. */
body.eco-nav-page main .tile,
body.eco-nav-page main .card,
body.eco-nav-page main .service-card,
body.eco-nav-page main .industry-card,
body.eco-nav-page main .blog-card,
body.eco-nav-page main .portfolio-card{
box-shadow:none;
}
/* Do NOT touch the intentionally designed homepage atmosphere. */
.home-page-v3 main > .section,
.home-page-v3 main > .section::before,
.home-page-v3 main > .section::after{
/* inherited homepage-specific rules remain authoritative */
}
/* Explicitly dark surfaces stay dark. */
body.eco-nav-page .detail-hero,
body.eco-nav-page .section-navy,
body.eco-nav-page .cta-band,
body.eco-nav-page footer{
/* no background override */
}
/* Colored typography remains untouched. This file controls washes,
not the matte accent text system. */
/* ===== SOURCE: bold-text-contrast-v1.css ===== */
/* =========================================================
ECOTECH — BOLD TEXT CONTRAST / COLOR POP V1
Uncoloured bold text stays neutral and dark; colored bold
text uses sufficiently different hue/chroma so it reads as
deliberate emphasis rather than a near-black variation.
========================================================= */
:root{
--bold-neutral:#30483F;
--bold-neutral-soft:#4F5752;
/* High-chroma matte accents */
--bold-teal:#238A8D;
--bold-terracotta:#B85F45;
--bold-ochre:#B58A2E;
--bold-plum:#855879;
--bold-indigo:#4E6F98;
--bold-sage:#4A8878;
--bold-olive:#7A853D;
}
/* BASE: bold text remains clearly neutral. */
body.eco-nav-page main strong,
body.eco-nav-page main b{
color:var(--bold-neutral);
text-shadow:none!important;
}
/* Short colored emphasis classes — intentionally stronger than
the neutral body heading color. */
body.eco-nav-page .v17-teal,
body.eco-nav-page .text-accent-teal{
color:var(--bold-teal)!important;
}
body.eco-nav-page .v17-copper,
body.eco-nav-page .text-accent-terracotta{
color:var(--bold-terracotta)!important;
}
body.eco-nav-page .text-accent-ochre{
color:var(--bold-ochre)!important;
}
body.eco-nav-page .v17-violet,
body.eco-nav-page .text-accent-plum{
color:var(--bold-plum)!important;
}
body.eco-nav-page .text-accent-indigo{
color:var(--bold-indigo)!important;
}
body.eco-nav-page .v17-forest,
body.eco-nav-page .text-accent-sage{
color:var(--bold-sage)!important;
}
body.eco-nav-page .text-accent-olive{
color:var(--bold-olive)!important;
}
/* Large neutral headings are deliberately darker than all colored
accents in perceived saturation, creating clean visual separation. */
body.eco-nav-page main h1,
body.eco-nav-page main h2,
body.eco-nav-page main h3{
text-shadow:none!important;
}
/* On light matte surfaces, don't let neutral bold text drift toward
the accent colors. */
body.eco-nav-page main:not(.dark) strong,
body.eco-nav-page main:not(.dark) b{
color:var(--bold-neutral)!important;
}
/* Dark surfaces: neutral bold text must become light, while colored
emphasis stays chromatic. */
body.eco-nav-page .detail-hero strong,
body.eco-nav-page .detail-hero b,
body.eco-nav-page .cta-band strong,
body.eco-nav-page .cta-band b,
body.eco-nav-page .section-navy strong,
body.eco-nav-page .section-navy b,
body.eco-nav-page .v3-final strong,
body.eco-nav-page .v3-final b{
color:#F6F5F1!important;
}
/* Restore chromatic emphasis when nested inside a dark surface. */
body.eco-nav-page .detail-hero .v17-teal,
body.eco-nav-page .detail-hero .text-accent-teal,
body.eco-nav-page .cta-band .text-accent-teal,
body.eco-nav-page .section-navy .text-accent-teal{
color:#45A8AA!important;
}
body.eco-nav-page .detail-hero .v17-copper,
body.eco-nav-page .detail-hero .text-accent-terracotta,
body.eco-nav-page .cta-band .text-accent-terracotta,
body.eco-nav-page .section-navy .text-accent-terracotta{
color:#D27A5F!important;
}
body.eco-nav-page .detail-hero .text-accent-ochre,
body.eco-nav-page .cta-band .text-accent-ochre,
body.eco-nav-page .section-navy .text-accent-ochre{
color:#D3AA4C!important;
}
body.eco-nav-page .detail-hero .text-accent-indigo,
body.eco-nav-page .cta-band .text-accent-indigo,
body.eco-nav-page .section-navy .text-accent-indigo{
color:#7F9DC6!important;
}
body.eco-nav-page .detail-hero .text-accent-plum,
body.eco-nav-page .cta-band .text-accent-plum,
body.eco-nav-page .section-navy .text-accent-plum{
color:#B184A9!important;
}
/* Buttons remain controlled by the button system. */
body.eco-nav-page .btn,
body.eco-nav-page .btn *,
body.eco-nav-page .eco-nav-v23__cta,
body.eco-nav-page .eco-nav-v23__cta *{
text-shadow:none!important;
}
/* FINAL SITEWIDE OVERRIDES
Common semantic emphasis elements are explicitly separated from neutral
bold copy. Controls are excluded. */
body.eco-nav-page main strong.accent,
body.eco-nav-page main b.accent,
body.eco-nav-page main .accent:not(.btn):not(.button),
body.eco-nav-page main .highlight:not(.btn):not(.button){
color:#238A8D!important;
text-shadow:none!important;
}
body.eco-nav-page main .accent-warm:not(.btn):not(.button),
body.eco-nav-page main .highlight-warm:not(.btn):not(.button){
color:#B85F45!important;
}
body.eco-nav-page main .accent-gold:not(.btn):not(.button),
body.eco-nav-page main .highlight-gold:not(.btn):not(.button){
color:#B58A2E!important;
}
body.eco-nav-page main .accent-indigo:not(.btn):not(.button),
body.eco-nav-page main .highlight-indigo:not(.btn):not(.button){
color:#4E6F98!important;
}
body.eco-nav-page main .accent-plum:not(.btn):not(.button),
body.eco-nav-page main .highlight-plum:not(.btn):not(.button){
color:#855879!important;
}
/* Never let generic strong/bold rules recolor navigation, buttons or form
controls. */
body.eco-nav-page .btn strong,
body.eco-nav-page .btn b,
body.eco-nav-page button strong,
body.eco-nav-page button b,
body.eco-nav-page .eco-nav-v23 strong,
body.eco-nav-page .eco-nav-v23 b{
color:inherit!important;
}
/* ===== SOURCE: services-tech-bold-pop-v2.css ===== */
/* =========================================================
SERVICES + TECHNOLOGIES — BOLD TEXT SEPARATION V2
Neutral bold = structure. Accent bold = deliberate signal.
========================================================= */
/* DETAIL HERO: large title is neutral/light; accent belongs to short kicker
and tagline, giving the page a clear 2-level hierarchy. */
body.eco-nav-page .detail-hero h1{
color:#F6F5F1!important;
}
body.eco-nav-page .detail-hero .kicker{
color:#45A8AA!important;
}
body.eco-nav-page .detail-tagline{
color:#D3AA4C!important;
font-weight:700!important;
}
/* CAPABILITY LIST: make the number and title visibly different.
Neutral title remains strong; number/arrow provide the color signal. */
body.eco-nav-page .capability-item .capability-num{
color:#536B8A!important;
font-weight:800!important;
}
body.eco-nav-page .capability-item .capability-title{
color:#30483F!important;
font-weight:700!important;
}
body.eco-nav-page .capability-item .capability-arrow{
color:#2F8587!important;
}
body.eco-nav-page .capability-item:hover .capability-title{
color:#30483F!important;
}
body.eco-nav-page .capability-item:hover .capability-num{
color:#B7654B!important;
}
/* TECHNOLOGY/SERVICE CATEGORY HEADINGS: use a much more obvious hue split
from neutral body bold text. */
body.eco-nav-page .cat-head h2{
color:#238A8D!important;
font-weight:800!important;
}
body.eco-nav-page .cat-head .cat-count{
color:#B58A2E!important;
font-weight:800!important;
}
/* Tile/service names: neutral base with accent only on the short descriptor,
rather than two near-identical dark colors competing. */
body.eco-nav-page .tile h3{
color:#30483F!important;
font-weight:800!important;
}
body.eco-nav-page .tile .tagline{
color:#855879!important;
font-weight:650!important;
}
body.eco-nav-page .tile .label{
color:#2F8587!important;
font-weight:800!important;
}
/* TECHNOLOGY DETAIL IMAGE LABELS remain quiet. */
body.eco-nav-page .pic-slot .pic-label{
color:rgba(246,245,241,.70)!important;
}
/* Dark CTA headings stay neutral/light; small kicker can carry color. */
body.eco-nav-page .cta-band h2,
body.eco-nav-page .cta-band h3{
color:#F6F5F1!important;
}
body.eco-nav-page .cta-band .kicker{
color:#45A8AA!important;
}
/* ===== SOURCE: sitewide-bold-separation-v2.css ===== */
/* =========================================================
ECOTECH — FINAL SITEWIDE BOLD TEXT SEPARATION V2
Neutral bold and accent bold are deliberately far apart in
lightness/chroma. This is the final typography authority.
========================================================= */
:root{
--accent-teal:#16858A;
--accent-terracotta:#B6533B;
--accent-ochre:#A97012;
--accent-plum:#874A76;
--accent-indigo:#426B9C;
--accent-sage:#3E806D;
--accent-olive:#6F7D2C;
--neutral-bold:#30483F;
--neutral-copy:#5E655F;
}
/* Neutral bold copy: unmistakably green-charcoal, never a near-accent. */
body.eco-nav-page main strong:not(.accent):not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main b:not(.accent):not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive){
color:var(--neutral-bold)!important;
}
/* Explicit accent utility text is now more chromatic. */
body.eco-nav-page main .text-accent-teal{color:var(--accent-teal)!important;}
body.eco-nav-page main .text-accent-terracotta{color:var(--accent-terracotta)!important;}
body.eco-nav-page main .text-accent-ochre{color:var(--accent-ochre)!important;}
body.eco-nav-page main .text-accent-plum{color:var(--accent-plum)!important;}
body.eco-nav-page main .text-accent-indigo{color:var(--accent-indigo)!important;}
body.eco-nav-page main .text-accent-sage{color:var(--accent-sage)!important;}
body.eco-nav-page main .text-accent-olive{color:var(--accent-olive)!important;}
/* Generic h1/h2/h3 are neutral unless the page's existing semantic accent
selector deliberately assigns a color. */
body.eco-nav-page main h1,
body.eco-nav-page main h2,
body.eco-nav-page main h3{
text-shadow:none!important;
}
/* Services + Technologies: strongest neutral/accent separation. */
body.eco-nav-page .detail-hero h1{color:#F6F5F1!important;}
body.eco-nav-page .detail-hero .kicker{color:#46AEB0!important;}
body.eco-nav-page .detail-tagline{color:#D6A83D!important;font-weight:700!important;}
body.eco-nav-page .capability-item .capability-num{
color:#527DB0!important;font-weight:800!important;
}
body.eco-nav-page .capability-item .capability-title{
color:var(--neutral-bold)!important;font-weight:700!important;
}
body.eco-nav-page .capability-item .capability-arrow{
color:#16858A!important;
}
body.eco-nav-page .cat-head h2{
color:#16858A!important;
font-weight:800!important;
}
body.eco-nav-page .cat-head .cat-count{
color:#A97012!important;
font-weight:800!important;
}
body.eco-nav-page .tile h3{
color:var(--neutral-bold)!important;
font-weight:800!important;
}
body.eco-nav-page .tile .tagline{
color:#874A76!important;
font-weight:650!important;
}
body.eco-nav-page .tile .label{
color:#3E806D!important;
font-weight:800!important;
}
/* Other major page-card headings: neutral body title + chromatic kicker/label. */
body.eco-nav-page .service-card h2,
body.eco-nav-page .service-card h3,
body.eco-nav-page .tech-card h2,
body.eco-nav-page .tech-card h3,
body.eco-nav-page .industry-card h2,
body.eco-nav-page .industry-card h3,
body.eco-nav-page .blog-card h2,
body.eco-nav-page .blog-card h3,
body.eco-nav-page .portfolio-card h2,
body.eco-nav-page .portfolio-card h3{
color:var(--neutral-bold)!important;
}
/* Preserve deliberate short accent labels on cards. */
body.eco-nav-page .service-card .eyebrow,
body.eco-nav-page .tech-card .eyebrow,
body.eco-nav-page .industry-card .eyebrow,
body.eco-nav-page .blog-card .eyebrow,
body.eco-nav-page .portfolio-card .eyebrow{
color:var(--accent-teal)!important;
}
/* Dark surfaces: neutral becomes light; accent gets lighter/brighter. */
body.eco-nav-page .detail-hero strong,
body.eco-nav-page .detail-hero b,
body.eco-nav-page .section-navy strong,
body.eco-nav-page .section-navy b,
body.eco-nav-page .cta-band strong,
body.eco-nav-page .cta-band b,
body.eco-nav-page .v3-final strong,
body.eco-nav-page .v3-final b{
color:#F6F5F1!important;
}
body.eco-nav-page .detail-hero .text-accent-teal,
body.eco-nav-page .section-navy .text-accent-teal,
body.eco-nav-page .cta-band .text-accent-teal{
color:#58C0C0!important;
}
body.eco-nav-page .detail-hero .text-accent-terracotta,
body.eco-nav-page .section-navy .text-accent-terracotta,
body.eco-nav-page .cta-band .text-accent-terracotta{
color:#E1846A!important;
}
body.eco-nav-page .detail-hero .text-accent-ochre,
body.eco-nav-page .section-navy .text-accent-ochre,
body.eco-nav-page .cta-band .text-accent-ochre{
color:#E0B958!important;
}
body.eco-nav-page .detail-hero .text-accent-indigo,
body.eco-nav-page .section-navy .text-accent-indigo,
body.eco-nav-page .cta-band .text-accent-indigo{
color:#8AA9D0!important;
}
body.eco-nav-page .detail-hero .text-accent-plum,
body.eco-nav-page .section-navy .text-accent-plum,
body.eco-nav-page .cta-band .text-accent-plum{
color:#C18BAF!important;
}
/* Controls are excluded from the typography system. */
body.eco-nav-page .btn,
body.eco-nav-page .btn *,
body.eco-nav-page button,
body.eco-nav-page button *,
body.eco-nav-page .eco-nav-v23,
body.eco-nav-page .eco-nav-v23 *{
text-shadow:none!important;
}
/* =========================================================
ECOTECH — SITEWIDE CONTRAST + MATTE COLOR SYSTEM V1
Final layer. Applies the About-page contrast philosophy
consistently without altering layout or navigation.
========================================================= */
body.eco-nav-page{
--site-ink:#17252B;
--site-muted:#46535A;
--site-teal:#075E63;
--site-coral:#9A432F;
--site-ochre:#7B5A08;
--site-plum:#623C59;
--site-indigo:#345477;
--site-sage:#35634F;
--site-light:#F6F5F1;
}
/* ---------- LIGHT / MATTE SURFACES ---------- */
body.eco-nav-page main > *:not(.section-navy):not(.detail-hero):not(.cta-band):not(.hero-section):not(.v3-final),
body.eco-nav-page main .section-soft,
body.eco-nav-page main .content-section{
--bold-teal:#075E63;
--bold-terracotta:#9A432F;
--bold-ochre:#7B5A08;
--bold-plum:#623C59;
--bold-indigo:#345477;
--bold-sage:#35634F;
}
/* Neutral bold text: one strong dark tone, clearly separated from the
chromatic accent colors. */
body.eco-nav-page main strong:not(.accent):not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main b:not(.accent):not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive){
color:var(--site-ink)!important;
-webkit-text-fill-color:var(--site-ink)!important;
opacity:1!important;
}
/* Sitewide colored emphasis — intentionally saturated matte shades. */
body.eco-nav-page main .text-accent-teal,
body.eco-nav-page main .v17-teal,
body.eco-nav-page main .accent-teal{
color:var(--site-teal)!important;
-webkit-text-fill-color:var(--site-teal)!important;
opacity:1!important;
background:none!important;
}
body.eco-nav-page main .text-accent-terracotta,
body.eco-nav-page main .v17-copper,
body.eco-nav-page main .accent-terracotta{
color:var(--site-coral)!important;
-webkit-text-fill-color:var(--site-coral)!important;
opacity:1!important;
background:none!important;
}
body.eco-nav-page main .text-accent-ochre,
body.eco-nav-page main .accent-ochre{
color:var(--site-ochre)!important;
-webkit-text-fill-color:var(--site-ochre)!important;
opacity:1!important;
background:none!important;
}
body.eco-nav-page main .text-accent-plum,
body.eco-nav-page main .accent-plum{
color:var(--site-plum)!important;
-webkit-text-fill-color:var(--site-plum)!important;
opacity:1!important;
background:none!important;
}
body.eco-nav-page main .text-accent-indigo,
body.eco-nav-page main .accent-indigo{
color:var(--site-indigo)!important;
-webkit-text-fill-color:var(--site-indigo)!important;
opacity:1!important;
background:none!important;
}
body.eco-nav-page main .text-accent-sage,
body.eco-nav-page main .accent-sage,
body.eco-nav-page main .text-accent-olive,
body.eco-nav-page main .accent-olive{
color:var(--site-sage)!important;
-webkit-text-fill-color:var(--site-sage)!important;
opacity:1!important;
background:none!important;
}
/* Prevent colored text from being mistaken for ordinary bold text. */
body.eco-nav-page main .text-accent-teal,
body.eco-nav-page main .text-accent-terracotta,
body.eco-nav-page main .text-accent-ochre,
body.eco-nav-page main .text-accent-plum,
body.eco-nav-page main .text-accent-indigo,
body.eco-nav-page main .text-accent-sage,
body.eco-nav-page main .text-accent-olive{
font-weight:inherit;
}
/* ---------- DARK / NAVY / INK SURFACES ---------- */
body.eco-nav-page main .section-navy,
body.eco-nav-page main .detail-hero,
body.eco-nav-page main .cta-band,
body.eco-nav-page main .hero-section,
body.eco-nav-page main .v3-final,
body.eco-nav-page main .hp7-tech-depth,
body.eco-nav-page footer{
--bold-teal:#8FD4D0;
--bold-terracotta:#F0A58C;
--bold-ochre:#E2C16B;
--bold-plum:#D0AFC8;
--bold-indigo:#AFC7E4;
--bold-sage:#9CC9B0;
}
/* Neutral bold text on dark surfaces. */
body.eco-nav-page main .section-navy strong:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .section-navy b:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .detail-hero strong:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .detail-hero b:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .cta-band strong:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .cta-band b:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .v3-final strong:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive),
body.eco-nav-page main .v3-final b:not(.text-accent-teal):not(.text-accent-terracotta):not(.text-accent-ochre):not(.text-accent-plum):not(.text-accent-indigo):not(.text-accent-sage):not(.text-accent-olive){
color:var(--site-light)!important;
-webkit-text-fill-color:var(--site-light)!important;
opacity:1!important;
}
/* Colored emphasis on dark surfaces: high-lightness companions. */
body.eco-nav-page main .section-navy .text-accent-teal,
body.eco-nav-page main .detail-hero .text-accent-teal,
body.eco-nav-page main .cta-band .text-accent-teal,
body.eco-nav-page main .v3-final .text-accent-teal{color:#8FD4D0!important;-webkit-text-fill-color:#8FD4D0!important}
body.eco-nav-page main .section-navy .text-accent-terracotta,
body.eco-nav-page main .detail-hero .text-accent-terracotta,
body.eco-nav-page main .cta-band .text-accent-terracotta,
body.eco-nav-page main .v3-final .text-accent-terracotta{color:#F0A58C!important;-webkit-text-fill-color:#F0A58C!important}
body.eco-nav-page main .section-navy .text-accent-ochre,
body.eco-nav-page main .detail-hero .text-accent-ochre,
body.eco-nav-page main .cta-band .text-accent-ochre,
body.eco-nav-page main .v3-final .text-accent-ochre{color:#E2C16B!important;-webkit-text-fill-color:#E2C16B!important}
body.eco-nav-page main .section-navy .text-accent-plum,
body.eco-nav-page main .detail-hero .text-accent-plum,
body.eco-nav-page main .cta-band .text-accent-plum,
body.eco-nav-page main .v3-final .text-accent-plum{color:#D0AFC8!important;-webkit-text-fill-color:#D0AFC8!important}
body.eco-nav-page main .section-navy .text-accent-indigo,
body.eco-nav-page main .detail-hero .text-accent-indigo,
body.eco-nav-page main .cta-band .text-accent-indigo,
body.eco-nav-page main .v3-final .text-accent-indigo{color:#AFC7E4!important;-webkit-text-fill-color:#AFC7E4!important}
body.eco-nav-page main .section-navy .text-accent-sage,
body.eco-nav-page main .detail-hero .text-accent-sage,
body.eco-nav-page main .cta-band .text-accent-sage,
body.eco-nav-page main .v3-final .text-accent-sage{color:#9CC9B0!important;-webkit-text-fill-color:#9CC9B0!important}
/* Disable gradient/transparent fill on bold colored text sitewide. */
body.eco-nav-page main strong,
body.eco-nav-page main b,
body.eco-nav-page main em{
text-shadow:none!important;
}
/* New ECOTECH cube wordmark logo */
.eco-nav-v23__logo,
img.eco-nav-v23__logo,
.hp7-logo{
height:auto !important;
width:auto !important;
max-height:68px;
max-width:min(240px,48vw);
object-fit:contain;
object-position:left center;
display:block;
}
footer .logo-img,
.footer .logo-img,
.site-footer .logo-img,
.eco-footer .logo-img,
footer img[src*="logo-ecotech"]{
display:none !important;
}
.hp7-logo{max-height:72px;max-width:260px}
@media(max-width:640px){
.eco-nav-v23__logo,img.eco-nav-v23__logo{max-height:56px;max-width:180px}
}
/* Footer logo removed site-wide — hide if any remain */
footer .logo-img,
.footer .logo-img,
.site-footer .logo-img,
.eco-footer .logo-img,
footer img[src*="logo-ecotech"]{
display:none !important;
}
.hp7-logo{max-height:72px;max-width:260px}
@media(max-width:640px){
.eco-nav-v23__logo,img.eco-nav-v23__logo{max-height:56px;max-width:180px}
}
/* Readable body text (non-bold) */
body, p, li, td, .muted, .small, .detail-tagline, .eco-visual__copy p, .tile p, .card p{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
p, li{
font-weight:400;
color:var(--ink, #14241F);
line-height:1.72;
}
p{
font-size:1.02em;
max-width:70ch;
}
.muted, .small, small{
color:#3E524E !important;
font-weight:450;
line-height:1.65;
}
.small, small{font-size:0.92em}
/* Keep bold text distinct */
b, strong, h1, h2, h3, h4, .kicker{font-weight:700}
/* ========== DENSITY PASS: more content visible per screen ========== */
.section,
.section-soft{
padding:52px 0 !important;
}
.hero{
padding:56px 0 48px !important;
}
.detail-hero{
padding-top:72px !important;
padding-bottom:48px !important;
}
.eco-visual,
.eco-visual.eco-visual--alt,
.eco-visual.eco-visual--detail{
padding:48px 0 !important;
}
.capability-section{
padding:56px 0 64px !important;
}
.about-v2-hero,
.about-v2-capabilities,
.about-v2-philosophy,
.about-v2-process,
.about-v2-tech,
.about-v2-outcomes,
.about-v2-why,
.about-v2-fit,
.about-v2-cta{
padding:56px 0 !important;
}
.about-v2-hero{
padding:64px 0 48px !important;
}
.ind-v3-hero,
.ind-v3-reality,
.ind-v3-lens,
.ind-v3-sectors,
.ind-v3-adapt,
.ind-v3-capabilities,
.ind-v3-questions,
.ind-v3-approach,
.ind-v3-cta{
padding:52px 0 !important;
}
.ind-v3-hero{
padding:64px 0 48px !important;
}
.topbar-inner{
height:72px !important;
}
.platform-bar{
top:72px !important;
}
.eco-nav-page{
padding-top:76px !important;
}
@media (max-width:980px){
.section,
.section-soft{ padding:40px 0 !important; }
.hero{ padding:48px 0 36px !important; }
.detail-hero{ padding-top:56px !important; padding-bottom:36px !important; }
.eco-visual{ padding:36px 0 !important; }
.about-v2-hero,
.about-v2-capabilities,
.about-v2-process,
.about-v2-why,
.about-v2-cta,
.ind-v3-hero,
.ind-v3-sectors,
.ind-v3-capabilities,
.ind-v3-cta{ padding:40px 0 !important; }
.topbar-inner{ height:64px !important; }
.platform-bar{ top:64px !important; }
.eco-nav-page{ padding-top:68px !important; }
}
/* SINGLE SCROLL ROOT — body must not scroll independently of html */
html{ overflow-y: scroll !important; overflow-x: clip !important; }
body{ overflow-y: visible !important; overflow-x: clip !important; height: auto !important; }