*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--ink)}
a.cta,.cta{background:var(--brand);color:#001018;padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:700}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.15;margin:.2em 0}
h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:.2em 0}
h3{font-size:clamp(18px,2.2vw,22px);margin:.3em 0}
.small{color:var(--muted)}
.header-gradient{background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0))}
.site-header{position:sticky;top:0;z-index:1000;padding:.7rem 0;backdrop-filter:saturate(1.2) blur(6px)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:40px}
.logo-hero{width:min(340px,60%);display:block;margin-inline:auto}
/* 50% logo on sub-pages */
body:not(.home) .logo-hero{width:min(340px,60%);display:block;margin-inline:auto}
.logo-tag{color:var(--muted);font-weight:700;letter-spacing:.3px}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-toggle{display:none}
@media (max-width:820px){
.nav-toggle{display:inline-flex;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--ink);padding:.4rem .6rem;border-radius:10px}
.nav-links{position:fixed;inset:60px 10px auto 10px;background:var(--panel);border:1px solid rgba(255,255,255,.08);padding:14px;border-radius:14px;flex-direction:column;display:none}
.nav-links.open{display:flex}
}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;padding:40px 0}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.card{background:var(--panel);border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,.07)}
.section{padding-block:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
form .form-row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
input,textarea{background:var(--panel-2);color:var(--ink);border:1px solid rgba(255,255,255,.1);padding:.75rem .85rem;border-radius:12px}
input:focus,textarea:focus{outline:2px solid rgba(95,225,255,.45);border-color:transparent}
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;margin-top:24px}
.bio{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
@media (max-width:900px){.bio{grid-template-columns:1fr}}
.bio img{border-radius:16px;border:1px solid rgba(255,255,255,.08)}
/* subtle background visual */
body{
background:
radial-gradient(1200px 600px at 10% -10%, rgba(0,194,255,0.05), transparent 60%),
radial-gradient(800px 400px at 110% 10%, rgba(0,194,255,0.06), transparent 55%),
var(--bg);
}
.card{ box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 16px 28px -20px rgba(0,0,0,.45); }
/* services icons */
.card h3{display:flex;align-items:center;gap:10px}
.card h3 svg{flex:0 0 auto}
/* callouts row */
.callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.callout{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--brand);border-radius:12px;padding:14px}
.callout h4{margin:0 0 6px 0}
@media (max-width:980px){.callouts{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.callouts{grid-template-columns:1fr}}
/* highlight for Core Capabilities */
.badge{display:inline-block;background:rgba(95,225,255,.15);color:#5FE1FF;padding:.2rem .5rem;border-radius:999px;font-weight:700;font-size:.78rem}
.card.highlight{border-color: rgba(0,194,255,.6); box-shadow: 0 0 0 1px rgba(0,194,255,.15), 0 24px 54px -30px rgba(0,194,255,.35);}
/* Scoped About header sizing (left-aligned, one-line on desktop) */
.about-header-slim .about-text h1{
font-size: clamp(26px, 3.4vw, 38px);
margin: 2px 0 6px 0;
letter-spacing: 0.1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.about-header-slim .about-text p:first-of-type{ /* title line beneath name */
margin: 4px 0 4px 0;
font-weight: 600;
}
.about-header-slim .about-text p em{ /* tagline */
display: inline-block;
margin-top: 4px;
}
/* 4-up services grid */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}}
/* subtle hover for service cards */
.card.svc{transition: transform .18s ease, box-shadow .18s ease}
.card.svc:hover{transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(95,225,255,.2), 0 22px 46px -26px rgba(0,194,255,.35)}
.card.svc h3{display:flex;align-items:center;gap:10px}
.card.svc h3 svg{flex:0 0 auto}
/* Accents & icons */
.accent-bar{height:3px;background:linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.85), rgba(0,194,255,.0));border-radius:999px;margin:8px 0 14px 0}
.h-underline{position:relative;display:inline-block;padding-bottom:6px}
.h-underline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.85), rgba(0,194,255,.0));border-radius:999px;opacity:.9}
.card-accent{border-color:rgba(0,194,255,.35); box-shadow: 0 0 0 1px rgba(0,194,255,.12), 0 20px 40px -26px rgba(0,194,255,.32)}
.icon-circle{width:36px;height:36px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(0,194,255,.55));display:inline-flex;align-items:center;justify-content:center;margin-right:10px;border:1px solid rgba(255,255,255,.18)}
.icon-circle svg{width:22px;height:22px}
.bio-accent{border-left:3px solid rgba(0,194,255,.6);padding-left:14px}
.step{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.step .step-no{width:28px;height:28px;border-radius:999px;background:rgba(0,194,255,.18);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#5FE1FF;border:1px solid rgba(0,194,255,.35)}
/* Outline style for service icons */
.icon-circle svg path{ fill:none !important; stroke:#0CE2FF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.95 }
/* Accent for active nav item */
.nav-links a[aria-current="page"]{ position:relative; font-weight:700 }
.nav-links a[aria-current="page"]::after{
content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
background:linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.9), rgba(0,194,255,.0));
border-radius:999px; opacity:.9
}
/* Reveal animation for methodology steps */
.step{ opacity:.0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease }
.step.reveal{ opacity:1; transform:none }
/* service subtitles */
.subtitle{color:#9fb1c7;font-weight:600;font-size:.95rem;display:block;margin:-2px 0 6px 0}
/* sectors section */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sector{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-start;transition:box-shadow .18s ease, transform .18s ease}
.sector:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(95,225,255,.2), 0 22px 46px -26px rgba(0,194,255,.35)}
.sector .icon-circle{width:38px;height:38px; background:transparent; border:1.6px solid rgba(12,226,255,.55)}
.sector .icon-circle svg path{fill:none; stroke:#0CE2FF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:1080px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sectors{grid-template-columns:1fr}}
/* hero CTAs */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero-cta a{border:1px solid rgba(255,255,255,.12);padding:.6rem .9rem;border-radius:999px;text-decoration:none}
.hero-cta a.primary{background:var(--brand);color:#001018;border-color:transparent;font-weight:700}
.hero-cta a.secondary{color:#E9EFF5}
.deliver-icons .card h3{display:flex; align-items:center; gap:10px}
/* Our Approach (stacked) */
.approach .small{color:rgba(255,255,255,.75)}
.approach-steps{position:relative; display:flex; flex-direction:column; gap:14px; margin-top:10px; padding-left:8px}
.approach-steps:before{
content:""; position:absolute; left:17px; top:0; bottom:0; width:2px;
background: linear-gradient(180deg, rgba(0,194,255,.0), rgba(0,194,255,.8), rgba(0,194,255,.0));
border-radius:999px; opacity:.9
}
.approach-step{display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
.approach-step .icon-circle{width:34px;height:34px;border:1.6px solid rgba(12,226,255,.55); flex:0 0 auto; background:transparent}
.approach-step .icon-circle svg path{fill:none; stroke:#0CE2FF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.approach-step h3{margin:0 0 4px 0}
.approach-cta{margin-top:12px}
.cta.small{padding:.5rem .9rem; font-size:.95rem}
/* fade-in */
.fade-in{opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease}
.fade-in.show{opacity:1; transform:none}
/* smooth anchors */
html{scroll-behavior:smooth}
/* generic CTA styles */
.cta{display:inline-block;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.12);padding:.6rem 1rem}
.cta.small{padding:.45rem .85rem;font-size:.95rem}
.cta.small.secondary{background:transparent;color:#E9EFF5;border-color:rgba(0,194,255,.6)}
.cta.small.secondary:hover{box-shadow:0 0 0 1px rgba(95,225,255,.25), 0 14px 30px -18px rgba(0,194,255,.35)}
.cta.small.primary{background:var(--brand);color:#001018;border-color:transparent;font-weight:700}
/* unified value band */
.value-band{background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0)); border-radius:16px; padding-top:18px; padding-bottom:18px}
.value-band h2{margin-top:0; margin-bottom:10px; position:relative; display:inline-block}
.value-band h2:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:999px;
background:linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.85), rgba(0,194,255,.0))}
.value-band h3{margin-top:16px; margin-bottom:8px}
/* hero cta spacing tune */
.hero-cta{margin-top:12px}
.hero-cta.tight{margin-top:8px}
/* highlight chips for CTAs/subnav */
.chip{display:inline-block;border:1.6px solid rgba(0,194,255,.55);border-radius:999px;padding:.45rem .85rem;text-decoration:none;color:#E9EFF5;transition:box-shadow .18s ease, transform .18s ease}
.chip:hover{box-shadow:0 0 0 1px rgba(95,225,255,.25), 0 14px 30px -18px rgba(0,194,255,.35); transform: translateY(-1px)}
.chip.highlight{background:rgba(0,194,255,.08)}
/* hero inline illustration */
.hero-visual{display:flex;align-items:center;justify-content:center;padding:8px}
.hero-visual svg{max-width:480px;width:100%;height:auto}
.hero-visual svg path, .hero-visual svg rect, .hero-visual svg circle, .hero-visual svg polyline, .hero-visual svg line{
fill:none; stroke:#0CE2FF; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.95
}
@media (max-width:980px){.hero-visual{margin-top:12px}}
/* smaller logos */
.logo-img, .logo-wrap img {max-height:36px !important; height:auto}
footer img.logo-img {max-height:28px !important}
/* v25: preserve logo aspect ratio and cap size */
.logo-img, .logo-wrap img{
width:auto !important;
height:auto !important;
max-height:36px !important;
object-fit:contain;
}
footer .logo-img, footer .logo-wrap img{
max-height:28px !important;
}
.logo-wrap{display:inline-flex;align-items:center}
/* v27: strict logo sizing to prevent distortion */
.logo-wrap{display:inline-flex;align-items:center;gap:8px}
.logo-img, .logo-wrap img{
display:block !important;
width:auto !important;
height:auto !important;
max-height:36px !important; /* header cap */
max-width:none !important;
object-fit:contain !important;
aspect-ratio:auto !important;
}
header .logo-img, header .logo-wrap img{ max-height:36px !important }
footer .logo-img, footer .logo-wrap img{ max-height:28px !important }
/* Neutralize any global img rules that could stretch logos */
img.logo-img[style], .logo-wrap img[style]{ width:auto !important; height:auto !important }
/* v28: header logo size */
header .logo-img, header .logo-wrap img{ max-height:52px !important; width:auto !important; height:auto !important; object-fit:contain !important; display:block !important }
@media (max-width:600px){
header .logo-img, header .logo-wrap img{ max-height:58px !important }
}
/* footer logo cap remains */
footer .logo-img, footer .logo-wrap img{ max-height:28px !important; width:auto !important; height:auto !important; object-fit:contain !important; display:block !important }
/* v29: Larger logos with responsive behavior */
header .logo-img, header .logo-wrap img{
max-height:72px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}
@media (max-width:600px){
header .logo-img, header .logo-wrap img{ max-height:80px !important; }
}
footer .logo-img, footer .logo-wrap img{
max-height:36px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}
/* v31: translucent hero headers */
.page-hero{
background: linear-gradient(180deg, rgba(8,12,20,0.80) 0%, rgba(8,12,20,0.65) 100%);
border-radius: 14px;
padding: 26px 18px;
text-align:center;
margin-bottom: 14px;
}
.page-hero h1, .page-hero h2{ margin: 0 0 6px 0 }
.page-hero p{ margin: 0; opacity:.9 }
/* v32: smaller subsection heading for Our Approach */
.approach h3{font-size:1.25rem; line-height:1.3; margin: 0 0 6px 0; font-weight:700}
/* v33: larger header logo (left corner) */
header .logo-img, header .logo-wrap img{
max-height:88px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
display:block !important;
}
@media (max-width:600px){
header .logo-img, header .logo-wrap img{ max-height:96px !important; }
}