/* =====================================================================
   Sampath Kumar Associates Pvt. Ltd. — MEP Engineering Consultancy
   Multipage design system. Palette: deep navy ink + refined cobalt on
   cool grey / white. Type: Libre Baskerville (display) + Lato (body).
   White header + top bar; Zuberia-inspired card & hover language.
   ===================================================================== */

:root{
  --color-bg:#F4F5F7; --color-surface:#FFFFFF; --color-ink:#0B1220;
  --color-text:#16191F; --color-brand:#1B2AD6; --color-brand-2:#2E42F0;
  --color-deep:#101A5C; --color-muted:#5F6672; --color-muted-d:#9AA3B2;
  --color-border:rgba(16,20,30,.11); --color-border-d:rgba(255,255,255,.14);
  --color-completed:#0f7a4d; --color-ongoing:#a15c00;
  --font-heading:"Libre Baskerville",Georgia,serif;
  --font-body:"Lato",system-ui,-apple-system,sans-serif;
  --fs-xs:.78rem; --fs-sm:.9rem; --fs-base:1.0625rem;
  --fs-lg:clamp(1.02rem,1.3vw,1.15rem);
  --fs-h3:clamp(1.2rem,1.7vw,1.5rem);
  --fs-h2:clamp(1.7rem,3.2vw,2.55rem);
  --fs-h1:clamp(2.1rem,5vw,3.9rem);
  --container:1220px; --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(64px,9vw,150px);
  --radius-sm:4px; --radius-md:10px; --radius-lg:18px;
  --shadow-1:0 1px 2px rgba(11,18,32,.06),0 10px 30px rgba(11,18,32,.07);
  --shadow-2:0 24px 60px rgba(11,18,32,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:104px; --topbar-h:44px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:1.65;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0;}
p{margin:0 0 1.1em;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:2px solid var(--color-brand-2);outline-offset:3px;border-radius:2px;}
.ic{display:inline-block;vertical-align:middle;flex:none;}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
.skip-link{position:fixed;top:10px;left:10px;z-index:2000;background:var(--color-ink);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);transform:translateY(-160%);transition:transform .25s var(--ease);}
.skip-link:focus{transform:none;}

/* ---------- shared type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:900;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-brand);margin:0 0 22px;}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block;}
.eyebrow .idx{color:var(--color-muted);}
.eyebrow--light{color:#fff;}
.section-title{font-size:var(--fs-h2);max-width:20ch;overflow-wrap:break-word;}
/* grid/flex text children must be allowed to shrink below content size */
.about__grid > *,.infra__grid > *,.svc-detail__grid > *,.project-detail__grid > *,.contact__grid > *,.leader > *,.footer__cta-row > *,.section-head--row > *{min-width:0;}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,72px);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head--center .eyebrow,.section-head--center .section-title,.section-head--center .lead{margin-inline:auto;}
.section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,60px);}
.section-head--stack{max-width:none;margin-bottom:clamp(32px,3.5vw,52px);}
.section-head--stack > div{margin-bottom:26px;}
.lead{font-size:var(--fs-lg);color:#2c313b;max-width:64ch;}
.lead--center{margin-inline:auto;text-align:center;}

/* ---------- buttons ---------- */
.btn{--bg:var(--color-brand);--fg:#fff;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;padding:14px 26px;border-radius:100px;background:var(--bg);color:var(--fg);position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .4s var(--ease),color .35s var(--ease);}
.btn .ic{transition:transform .4s var(--ease);}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-ink);transform:translateY(101%);transition:transform .45s var(--ease);}
.btn:hover::before{transform:translateY(0);}
.btn:hover .ic{transform:translate(3px,-3px);}
.btn--primary:hover{box-shadow:0 12px 30px rgba(27,42,214,.28);}
.btn--lg{padding:17px 32px;font-size:var(--fs-base);}
.btn--full{width:100%;justify-content:center;}
.btn--dark{--bg:var(--color-ink);}
.btn--dark::before{background:var(--color-brand);}
.btn--light{--bg:#fff;--fg:var(--color-ink);}
.btn--light::before{background:var(--color-brand);} .btn--light:hover{color:#fff;}
.btn--ghost-light{--bg:transparent;--fg:#fff;border:1px solid rgba(255,255,255,.5);}
.btn--ghost-light::before{background:#fff;} .btn--ghost-light:hover{color:var(--color-ink);}
.btn--outline{--bg:transparent;--fg:var(--color-ink);border:1px solid var(--color-border);}
.btn--outline::before{background:var(--color-ink);} .btn--outline:hover{color:#fff;border-color:var(--color-ink);}
.btn--head{padding:12px 22px;}
.btn--r-arrow .ic{transform:none;}

/* =====================================================================
   Preloader
   ===================================================================== */
.preloader{position:fixed;inset:0;z-index:3000;background:var(--color-ink);color:#fff;display:grid;place-items:center;}
.preloader__inner{display:flex;flex-direction:column;align-items:center;gap:22px;}
.preloader__logo{width:96px;height:auto;background:#fff;border-radius:50%;padding:8px;}
.preloader__bar{width:min(260px,60vw);height:2px;background:rgba(255,255,255,.18);overflow:hidden;}
.preloader__bar span{display:block;height:100%;width:0;background:#fff;}
.preloader__pct{font-family:var(--font-heading);font-size:var(--fs-sm);letter-spacing:.1em;color:var(--color-muted-d);}

/* =====================================================================
   Top bar + Header (white)
   ===================================================================== */
.topbar{background:var(--color-ink);color:rgba(255,255,255,.72);font-size:var(--fs-xs);position:relative;z-index:1001;}
.topbar__row{display:flex;align-items:center;justify-content:space-between;min-height:var(--topbar-h);gap:20px;}
.topbar__left{display:flex;gap:26px;} .topbar__left a,.topbar__right a{display:inline-flex;align-items:center;gap:7px;transition:color .3s var(--ease);}
.topbar__left a:hover,.topbar__phone:hover{color:#fff;}
.topbar__left .ic,.topbar__right .ic{color:#fff;}
.topbar__right{display:flex;align-items:center;gap:26px;} .topbar__phone{color:#fff;font-weight:700;}

.site-header{position:sticky;top:0;z-index:1000;background:var(--color-surface);box-shadow:0 1px 0 var(--color-border);transition:box-shadow .4s var(--ease),transform .5s var(--ease);}
.site-header.is-scrolled{box-shadow:var(--shadow-1);}
.site-header.is-hidden{transform:translateY(-101%);}
.header__row{display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);min-height:var(--header-h);}
.brand{display:flex;align-items:center;margin-right:auto;}
.brand__mark{width:104px;height:auto;}
.nav{display:flex;align-items:center;gap:clamp(18px,2vw,32px);}
.nav > a,.nav__drop > a{position:relative;color:#2b303a;font-size:.98rem;font-weight:700;padding-block:8px;display:inline-flex;align-items:center;gap:5px;transition:color .3s var(--ease);}
.nav > a::after,.nav__drop > a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:var(--color-brand);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav > a:hover,.nav__drop:hover > a,.nav > a.is-active,.nav__drop > a.is-active{color:var(--color-brand);}
.nav > a:hover::after,.nav__drop:hover > a::after,.nav > a.is-active::after,.nav__drop > a.is-active::after{transform:scaleX(1);}
.nav__drop{position:relative;}
.nav__drop > a::before{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;} /* hover bridge */
.nav__menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-2);padding:8px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:20;}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav__menu a{display:block;padding:11px 14px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:700;color:#2b303a;transition:background .25s var(--ease),color .25s var(--ease);}
.nav__menu a:hover{background:var(--color-bg);color:var(--color-brand);}
.menu-toggle{display:none;color:var(--color-text);padding:6px;}

/* ---------- Mobile nav ---------- */
.mobile-nav{position:fixed;inset:0;z-index:1500;background:var(--color-ink);color:#fff;padding:clamp(24px,8vw,64px);display:flex;flex-direction:column;justify-content:center;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .6s var(--ease);}
.mobile-nav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto;}
.mobile-nav__close{position:absolute;top:24px;right:24px;color:#fff;padding:6px;}
.mobile-nav__list{display:flex;flex-direction:column;gap:4px;}
.mobile-nav__list a{font-family:var(--font-heading);font-size:clamp(1.7rem,7vw,2.6rem);line-height:1.35;opacity:0;transform:translateY(18px);}
.mobile-nav.is-open .mobile-nav__list a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.mobile-nav.is-open .mobile-nav__list a:nth-child(1){transition-delay:.1s}.mobile-nav.is-open .mobile-nav__list a:nth-child(2){transition-delay:.15s}.mobile-nav.is-open .mobile-nav__list a:nth-child(3){transition-delay:.2s}.mobile-nav.is-open .mobile-nav__list a:nth-child(4){transition-delay:.25s}.mobile-nav.is-open .mobile-nav__list a:nth-child(5){transition-delay:.3s}.mobile-nav.is-open .mobile-nav__list a:nth-child(6){transition-delay:.35s}
.mobile-nav__foot{margin-top:clamp(28px,6vw,64px);display:flex;flex-direction:column;gap:6px;color:var(--color-muted-d);font-size:var(--fs-sm);}
.mobile-nav__foot a:hover{color:#fff;}

/* =====================================================================
   Home hero
   ===================================================================== */
.hero{position:relative;min-height:calc(100svh - var(--header-h) - var(--topbar-h));display:flex;flex-direction:column;justify-content:flex-end;padding-top:70px;padding-bottom:34px;overflow:hidden;background:var(--color-ink);}
.hero__media{position:absolute;inset:-8% 0;z-index:0;will-change:transform;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,18,.72),rgba(5,8,18,.5) 38%,rgba(5,8,18,.72) 78%,rgba(5,8,18,.92)),linear-gradient(90deg,rgba(5,8,18,.85),rgba(5,8,18,.35) 55%,rgba(5,8,18,.1));}
.hero__content{position:relative;z-index:2;color:#fff;padding-bottom:clamp(24px,4vw,52px);}
.hero .eyebrow{color:#fff;}
.hero__title{font-size:var(--fs-h1);letter-spacing:-.02em;max-width:16ch;margin-bottom:22px;}
.hero__title .line{display:block;overflow:hidden;} .hero__title .line>span{display:block;}
.hero__title .ital{font-style:italic;color:#cdd6ff;}
.hero__lead{max-width:54ch;color:rgba(255,255,255,.84);font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.6;margin-bottom:34px;}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero__meta{position:relative;z-index:2;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);color:#fff;}
.hero__scroll{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.hero__scroll .ic{animation:bob 1.8s var(--ease) infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__facts{display:flex;gap:clamp(20px,4vw,52px);}
.hero__facts li{font-size:var(--fs-sm);color:rgba(255,255,255,.7);}
.hero__facts strong{display:block;font-family:var(--font-heading);font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;}

/* =====================================================================
   Page hero (interior)
   ===================================================================== */
.phero{position:relative;background:var(--color-ink);color:#fff;overflow:hidden;padding-block:clamp(70px,10vw,120px);}
.phero__media{position:absolute;inset:0;z-index:0;} .phero__media img{width:100%;height:100%;object-fit:cover;}
.phero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,18,.7),rgba(5,8,18,.82)),linear-gradient(90deg,rgba(5,8,18,.8),rgba(5,8,18,.3));}
.phero__inner{position:relative;z-index:2;}
.crumbs{font-size:var(--fs-sm);color:rgba(255,255,255,.66);margin-bottom:18px;letter-spacing:.02em;}
.crumbs a:hover{color:#fff;} .crumbs span{margin:0 8px;color:rgba(255,255,255,.4);}
.phero__title{font-size:clamp(2rem,4vw,3rem);max-width:18ch;}
.phero__sub{margin-top:16px;max-width:56ch;color:rgba(255,255,255,.82);font-size:var(--fs-lg);}
.phero--project .p-tag{margin-bottom:16px;}

/* =====================================================================
   About
   ===================================================================== */
.about__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,90px);align-items:center;}
.about-mini .about__grid,.about-full .about__grid{grid-template-columns:.95fr 1.05fr;}
.about__text .lead{margin-bottom:1.2em;} .about__text p{color:#3a404b;}
.about__badges{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0;}
.badge-card{display:flex;align-items:center;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);padding:14px 18px;border-radius:var(--radius-md);font-weight:700;font-size:var(--fs-sm);box-shadow:var(--shadow-1);}
.badge-card .ic{color:var(--color-brand);}
.about__media{position:relative;}
.about__media .img-reveal{border-radius:var(--radius-lg);aspect-ratio:4/5;}
.about__stamp{position:absolute;right:-14px;bottom:-22px;background:var(--color-brand);color:#fff;width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-2);}
.about__stamp em{font-style:normal;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;}
.about__stamp strong{font-family:var(--font-heading);font-size:2.1rem;line-height:1;}
.img-reveal{position:relative;overflow:hidden;} .img-reveal img{width:100%;height:100%;object-fit:cover;}

/* =====================================================================
   Stats
   ===================================================================== */
.stats{background:var(--color-ink);color:#fff;}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,40px);}
.stat{position:relative;padding-right:20px;}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:var(--color-border-d);}
.stat__num{font-family:var(--font-heading);font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;color:#fff;display:block;}
.stat__label{display:block;margin-top:10px;color:var(--color-muted-d);font-size:var(--fs-sm);letter-spacing:.04em;}

/* =====================================================================
   Service cards (Zuberia-style: icon + title + rule + text)
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.svc-grid--lg{grid-template-columns:repeat(2,1fr);gap:26px;}
.svc-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent;}
.svc-card__media{position:relative;overflow:hidden;aspect-ratio:16/11;}
.svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.svc-card:hover .svc-card__media img{transform:scale(1.07);}
.svc-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 45%,rgba(11,18,32,.35));opacity:0;transition:opacity .5s var(--ease);}
.svc-card:hover .svc-card__media::after{opacity:1;}
.svc-card__body{position:relative;padding:46px clamp(22px,2vw,28px) clamp(24px,2vw,30px);display:flex;flex-direction:column;flex:1;}
.svc-card__ico{position:absolute;top:-27px;left:clamp(22px,2vw,28px);z-index:2;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--color-brand);color:#fff;box-shadow:0 10px 22px rgba(27,42,214,.32);transition:transform .5s var(--ease),background .4s var(--ease);}
.svc-card__ico .ic{width:26px;height:26px;}
.svc-card:hover .svc-card__ico{transform:translateY(-5px) rotate(-6deg);background:var(--color-ink);}
.svc-card h3{font-size:var(--fs-h3);margin-bottom:12px;}
.svc-card p{color:#3a404b;font-size:var(--fs-sm);line-height:1.55;margin-bottom:18px;flex:1;}
.svc-card__more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-sm);color:var(--color-brand);}
.svc-card__more .ic{transition:transform .4s var(--ease);}
.svc-card:hover .svc-card__more .ic{transform:translateX(4px);}

/* =====================================================================
   Infrastructure
   ===================================================================== */
.infra__cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch;}
.infra__media{border-radius:var(--radius-lg);overflow:hidden;min-height:100%;}
.infra__media img{width:100%;height:100%;object-fit:cover;}
.infra__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;transition:box-shadow .4s var(--ease),transform .4s var(--ease);}
.infra__card:hover{box-shadow:var(--shadow-1);transform:translateY(-3px);}
.infra__h{display:flex;align-items:center;gap:12px;font-size:1.25rem;margin-bottom:14px;}
.infra__ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(27,42,214,.08);color:var(--color-brand);}
.infra__ul li{padding:12px 0;border-top:1px solid var(--color-border);color:#3a404b;font-size:var(--fs-sm);}
.infra__ul li:first-child{border-top:none;padding-top:2px;}

/* =====================================================================
   Feature grid (about why)
   ===================================================================== */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);}
.feat{display:flex;gap:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,34px);transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-1);}
.feat__ico{width:54px;height:54px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(27,42,214,.08);color:var(--color-brand);}
.feat h3{font-size:1.25rem;margin-bottom:8px;} .feat p{color:#3a404b;font-size:var(--fs-sm);margin:0;}

/* =====================================================================
   Project cards
   ===================================================================== */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.p-grid--static{grid-template-columns:repeat(3,1fr);}
.p-card.is-hidden{display:none;}
.p-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease);}
.p-card::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--color-brand);z-index:3;transition:width .5s var(--ease);}
.p-card:hover{box-shadow:var(--shadow-2);transform:translateY(-5px);border-color:transparent;}
.p-card:hover::before{width:100%;}
.p-card__media{position:relative;overflow:hidden;aspect-ratio:16/11;display:block;}
.p-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.p-card:hover .p-card__media img{transform:scale(1.07);}
.p-card__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0) 40%,rgba(11,18,32,.72));display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;opacity:0;transition:opacity .4s var(--ease);}
.p-card:hover .p-card__overlay{opacity:1;}
.p-card__view{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:var(--fs-sm);transform:translateY(8px);transition:transform .4s var(--ease);}
.p-card:hover .p-card__view{transform:translateY(0);}
.p-card__body{padding:18px 20px 20px;}
.p-card__body h3{font-size:1.12rem;line-height:1.25;margin-bottom:8px;}
.p-card__body h3 a:hover{color:var(--color-brand);}
.p-card__meta{display:block;font-size:var(--fs-xs);color:var(--color-muted);}
.p-tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:100px;margin-bottom:12px;}
.p-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.p-tag.completed{color:var(--color-completed);background:rgba(15,122,77,.1);}
.p-tag.ongoing{color:var(--color-ongoing);background:rgba(161,92,0,.12);}
.p-tag.all{color:var(--color-muted);background:rgba(95,102,114,.1);}
.phero .p-tag{background:rgba(255,255,255,.14);color:#fff;}

.projects__filters{display:flex;gap:8px;flex-wrap:wrap;}
.filter{padding:10px 20px;border-radius:100px;border:1px solid var(--color-border);font-weight:700;font-size:var(--fs-sm);color:var(--color-muted);transition:background .3s,color .3s,border-color .3s;}
.filter:hover{color:var(--color-text);border-color:var(--color-text);}
.filter.is-active{background:var(--color-ink);color:#fff;border-color:var(--color-ink);}

/* =====================================================================
   Service detail
   ===================================================================== */
.svc-detail__grid{display:grid;grid-template-columns:1.6fr .8fr;gap:clamp(32px,4vw,60px);align-items:start;}
.svc-detail__hero{border-radius:var(--radius-lg);aspect-ratio:16/9;margin-bottom:36px;}
.scope-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:28px 0 40px;}
.scope-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);color:#2c313b;padding:14px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.scope-list .ic{color:var(--color-brand);margin-top:2px;flex:none;}
.svc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.svc-gallery__item{position:relative;overflow:hidden;border-radius:var(--radius-md);aspect-ratio:4/3;display:block;}
.svc-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.svc-gallery__item:hover img{transform:scale(1.06);}
.svc-gallery__zoom{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,18,32,.35);color:#fff;opacity:0;transition:opacity .4s var(--ease);}
.svc-gallery__item:hover .svc-gallery__zoom{opacity:1;}
.svc-detail__side{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:24px;}
.svc-side-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:26px;}
.svc-side-card h3{font-size:1.2rem;margin-bottom:16px;}
.svc-mini-list{display:flex;flex-direction:column;gap:6px;}
.svc-mini{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);font-weight:700;font-size:var(--fs-sm);color:#2b303a;transition:background .3s,color .3s;}
.svc-mini__ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(27,42,214,.08);color:var(--color-brand);flex:none;transition:background .3s,color .3s;}
.svc-mini__arr{margin-left:auto;color:var(--color-muted);transition:transform .3s;}
.svc-mini:hover{background:var(--color-bg);color:var(--color-brand);} .svc-mini:hover .svc-mini__arr{transform:translateX(3px);}
.svc-mini--active{background:var(--color-brand);color:#fff;} .svc-mini--active .svc-mini__ico{background:rgba(255,255,255,.2);color:#fff;}
.svc-side-cta{background:var(--color-deep);color:#fff;border-radius:var(--radius-lg);padding:30px;position:relative;overflow:hidden;}
.svc-side-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 100% 0,rgba(46,66,240,.5),transparent 60%);}
.svc-side-cta > *{position:relative;}
.svc-side-cta h3{font-size:1.3rem;margin-bottom:10px;} .svc-side-cta p{color:rgba(255,255,255,.8);font-size:var(--fs-sm);margin-bottom:20px;}
.svc-side-cta__phone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;color:#fff;}
.svc-side-cta__phone .ic{color:#fff;}

/* =====================================================================
   Project detail
   ===================================================================== */
.project-detail__grid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(32px,4vw,56px);align-items:start;}
.project-detail__img{border-radius:var(--radius-lg);aspect-ratio:16/10;margin-bottom:34px;}
.project-detail__side{position:sticky;top:calc(var(--header-h) + 20px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:30px;}
.pfacts{margin:0 0 24px;} .pfact{padding:14px 0;border-top:1px solid var(--color-border);} .pfact:first-child{border-top:none;padding-top:0;}
.pfact dt{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin-bottom:4px;}
.pfact dd{margin:0;font-weight:700;color:var(--color-text);overflow-wrap:anywhere;}
.project-nav__link{min-width:0;} .project-nav__link strong{overflow-wrap:anywhere;}
.project-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,72px);padding-top:32px;border-top:1px solid var(--color-border);}
.project-nav__link{display:flex;align-items:center;gap:14px;color:var(--color-muted);font-size:var(--fs-sm);max-width:38%;}
.project-nav__link strong{color:var(--color-text);font-family:var(--font-heading);font-size:1rem;font-weight:700;}
.project-nav__link:hover strong{color:var(--color-brand);}
.project-nav__link--next{text-align:right;}
.project-nav__all{font-weight:700;color:var(--color-brand);}

/* =====================================================================
   Clients
   ===================================================================== */
.clients__marquee{position:relative;overflow:hidden;padding-block:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.clients__track{display:flex;align-items:center;gap:20px;width:max-content;animation:marquee 60s linear infinite;}
.clients__track:hover{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%)}}
.client-logo{flex:none;width:170px;height:100px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);display:grid;place-items:center;padding:18px;}
.client-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .4s,opacity .4s;}
.client-logo:hover img{filter:none;opacity:1;}
.client-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:20px;}
.client-card{min-width:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);aspect-ratio:16/10;display:grid;place-items:center;padding:26px;transition:box-shadow .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);}
.client-card:hover{box-shadow:var(--shadow-1);transform:translateY(-3px);border-color:transparent;}
.client-card img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .4s var(--ease),opacity .4s var(--ease);}
.client-card:hover img{filter:none;opacity:1;}
@media (max-width:560px){.client-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}}

/* =====================================================================
   Team
   ===================================================================== */
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,28px);}
.member__media{overflow:hidden;border-radius:var(--radius-md);aspect-ratio:1/1;margin-bottom:14px;background:#e7e9ee;}
.member__media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease),filter .6s var(--ease);filter:grayscale(.35);}
.member:hover .member__media img{transform:scale(1.05);filter:none;}
.member h4{font-size:1.15rem;margin-bottom:4px;} .member__role{font-size:var(--fs-sm);color:var(--color-brand);font-weight:700;margin-bottom:2px;} .member__meta{font-size:var(--fs-xs);color:var(--color-muted);margin:0;}

.leader{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center;}
.leader__media{border-radius:var(--radius-lg);aspect-ratio:1/1;max-width:440px;}
.leader__role{color:var(--color-brand);font-weight:700;font-size:var(--fs-sm);margin-bottom:10px;}
.leader__body h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:18px;} .leader__body p:not(.leader__role){color:#3a404b;}
.team-group{margin-top:clamp(48px,6vw,80px);} .team-group:first-child{margin-top:0;}
.team-group__title{font-size:var(--fs-h3);margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--color-border);}
.tmember-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px);}
.tmember{display:grid;grid-template-columns:150px 1fr;gap:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px;transition:box-shadow .4s var(--ease),transform .4s var(--ease);}
.tmember:hover{box-shadow:var(--shadow-1);transform:translateY(-3px);}
.tmember__media{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1/1;background:#e7e9ee;}
.tmember__media img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.3);transition:filter .5s;}
.tmember:hover .tmember__media img{filter:none;}
.tmember__role{font-size:var(--fs-xs);color:var(--color-brand);font-weight:900;letter-spacing:.03em;text-transform:uppercase;}
.tmember__body h3{font-size:1.2rem;margin:6px 0 4px;}
.tmember__meta{font-size:var(--fs-xs);color:var(--color-muted);margin-bottom:10px;}
.tmember__bio{font-size:.86rem;color:#3a404b;margin:0;line-height:1.6;}

/* =====================================================================
   Contact
   ===================================================================== */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start;}
.contact-list{margin-top:36px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden;}
.contact-row{display:flex;gap:18px;align-items:flex-start;padding:20px clamp(18px,2vw,26px);border-top:1px solid var(--color-border);min-width:0;}
.contact-row:first-child{border-top:none;}
.contact-row__ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(27,42,214,.08);color:var(--color-brand);}
.contact-row__body{min-width:0;}
.contact-row__body h3{font-size:.95rem;margin-bottom:3px;}
.contact-row__body p{margin:0;font-size:var(--fs-sm);color:#3a404b;overflow-wrap:anywhere;line-height:1.55;}
.contact-row__body a:hover{color:var(--color-brand);}
.contact-row__phones a{display:block;}
.contact-card a:hover{color:var(--color-brand);} .contact-card__phones a{display:block;}
.contact__form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(26px,3vw,42px);box-shadow:var(--shadow-1);}
.contact__form h3{font-size:var(--fs-h3);margin-bottom:22px;}
.field{margin-bottom:18px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:7px;}
.field input,.field textarea{width:100%;font-family:inherit;font-size:var(--fs-base);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:13px 16px;transition:border-color .3s,box-shadow .3s;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(27,42,214,.12);}
.field textarea{resize:vertical;}
.field input:user-invalid,.field textarea:user-invalid{border-color:#c23b3b;}
.form-note{margin:16px 0 0;font-size:var(--fs-sm);font-weight:700;min-height:1.4em;}
.form-note.ok{color:var(--color-completed);} .form-note.err{color:#c23b3b;}

/* =====================================================================
   Footer
   ===================================================================== */
.footer{background:var(--color-ink);color:#fff;}
.footer__cta{background:var(--color-deep);position:relative;overflow:hidden;}
.footer__cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 90% 0,rgba(46,66,240,.5),transparent 60%),radial-gradient(60% 120% at 0 100%,rgba(27,42,214,.35),transparent 55%);}
.footer__cta-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:clamp(40px,5vw,64px);flex-wrap:wrap;}
.footer__cta-title{font-size:clamp(1.5rem,3vw,2.4rem);max-width:22ch;color:#fff;margin:0;}
.footer__grid{display:grid;grid-template-columns:1.5fr .8fr 1fr 1.2fr 1fr;gap:clamp(24px,3vw,48px);padding-block:clamp(48px,6vw,88px);}
.footer__mark{width:80px;height:auto;background:#fff;border-radius:12px;padding:6px;margin-bottom:18px;}
.footer__name{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:8px;}
.footer__tag{color:var(--color-muted-d);font-size:var(--fs-sm);margin:0;line-height:1.6;}
.footer__col h3{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted-d);margin-bottom:20px;font-weight:900;}
.footer__col > a{display:block;color:rgba(255,255,255,.8);padding:7px 0;font-size:var(--fs-sm);transition:color .3s,padding .3s;}
.footer__col > a:hover{color:#fff;padding-left:5px;}
.footer__contact{display:flex;gap:12px;margin-bottom:16px;color:rgba(255,255,255,.86);font-size:var(--fs-sm);line-height:1.5;}
.footer__contact .ic{color:var(--color-brand-2);margin-top:2px;} .footer__contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.foot-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.foot-thumb{border-radius:8px;overflow:hidden;aspect-ratio:1/1;} .foot-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),opacity .4s;opacity:.8;}
.foot-thumb:hover img{transform:scale(1.08);opacity:1;}
.footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:26px;border-top:1px solid var(--color-border-d);color:var(--color-muted-d);font-size:var(--fs-xs);}
.footer__bar p{margin:0;}

/* =====================================================================
   Hover polish — icon / border movement
   ===================================================================== */
.badge-card{transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);}
.badge-card:hover{border-color:var(--color-brand);box-shadow:var(--shadow-1);transform:translateY(-2px);}
.badge-card .ic{transition:transform .35s var(--ease);}
.badge-card:hover .ic{transform:translateX(3px) scale(1.08);}
.feat__ico{transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease);}
.feat:hover .feat__ico{transform:rotate(-6deg) scale(1.06);background:var(--color-brand);color:#fff;}
.infra__card .infra__ico{transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease);}
.infra__card:hover .infra__ico{transform:translateY(-3px);background:var(--color-brand);color:#fff;}
.contact-row{transition:background .3s var(--ease);}
.contact-row:hover{background:rgba(27,42,214,.03);}
.contact-row__ico{transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);}
.contact-row:hover .contact-row__ico{background:var(--color-brand);color:#fff;transform:scale(1.06);}
.nav__menu a{position:relative;transition:background .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease);}
.nav__menu a:hover{padding-left:20px;}
.crumbs a{transition:color .25s var(--ease);}
.p-card__body h3 a{transition:color .3s var(--ease);}
.project-nav__link .ic{transition:transform .35s var(--ease);}
.project-nav__link:hover .ic{transform:translateX(-4px);}
.project-nav__link--next:hover .ic{transform:translateX(4px);}
.svc-mini__ico{transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);}
.svc-mini:hover .svc-mini__ico{transform:scale(1.08);}

/* =====================================================================
   Reveal states (JS toggles .is-in; base CSS keeps content visible if no JS)
   ===================================================================== */
[data-reveal]{opacity:1;}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js [data-reveal].is-in{opacity:1;transform:none;}
.js .img-reveal img{transform:scale(1.12);}
.js .img-reveal.is-in img{transform:scale(1);transition:transform 1.1s var(--ease);}
.js .img-reveal::after{content:"";position:absolute;inset:0;background:var(--color-ink);transform-origin:right;transition:transform .9s var(--ease);}
.js .img-reveal.is-in::after{transform:scaleX(0);}
.pswp__custom-caption{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-size:.9rem;}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1100px){
  .nav{display:none;} .menu-toggle{display:inline-flex;} .btn--head{display:none;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;} .footer__projects{grid-column:span 1;}
}
@media (max-width:900px){
  .topbar__left a:nth-child(1) span,.topbar__right span{display:none;}
  .svc-detail__grid,.project-detail__grid{grid-template-columns:1fr;}
  .svc-detail__side,.project-detail__side{position:static;}
  .team__grid{grid-template-columns:repeat(3,1fr);}
  .tmember-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .brand__mark{width:76px;}
  .about__grid,.about-mini .about__grid,.about-full .about__grid,.contact__grid,.leader{grid-template-columns:1fr;}
  .infra__cards{grid-template-columns:1fr 1fr;} .infra__media{grid-column:1 / -1;aspect-ratio:16/7;min-height:0;}
  .about-mini .about__media,.about-full .about__media{order:-1;max-width:460px;}
  .about__media{max-width:480px;} .about__stamp{width:104px;height:104px;right:8px;} .about__stamp strong{font-size:1.6rem;}
  .stats__grid,.scope-list,.feat-grid,.contact__cards{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2)::after{display:none;}
  .svc-grid,.svc-grid--lg{grid-template-columns:1fr;}
  .infra__cards{grid-template-columns:1fr;}
  .p-grid,.p-grid--static{grid-template-columns:1fr 1fr;}
  .team__grid{grid-template-columns:repeat(2,1fr);}
  .svc-gallery{grid-template-columns:1fr 1fr;}
  .hero__meta{flex-direction:column;align-items:flex-start;gap:18px;} .hero__facts{width:100%;justify-content:space-between;}
  .footer__grid{grid-template-columns:1fr 1fr;} .footer__brand{grid-column:1 / -1;}
  .project-nav{flex-wrap:wrap;} .project-nav__all{order:3;width:100%;text-align:center;}
  .field-row{grid-template-columns:1fr;}
  .footer__contact{overflow-wrap:anywhere;} .footer__col > a,.footer__contact a{overflow-wrap:anywhere;}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;}
  .footer__cta-row{flex-direction:column;align-items:flex-start;}
}
@media (max-width:480px){
  .stats__grid,.scope-list,.feat-grid,.contact__cards,.p-grid,.p-grid--static{grid-template-columns:1fr;}
  .team__grid{grid-template-columns:1fr 1fr;gap:16px;}
  .tmember{grid-template-columns:1fr;} .tmember__media{max-width:160px;}
  .hero__facts strong{font-size:1.3rem;} .client-logo{width:140px;height:86px;}
  .topbar__left a:first-child{display:none;}
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .clients__track{animation:none;}
  .js [data-reveal]{opacity:1;transform:none;} .js .img-reveal img{transform:none;} .js .img-reveal::after{display:none;}
  .hero__scroll .ic{animation:none;}
}