/* ============================================================
   KMT Engineering — shared site chrome
   Header, mega menu, mobile off-canvas navigation.
   Uses its own class names (.site-header, .nav-wrap, .dnav …)
   so it never collides with the per-page responsive layer that
   targets `header .wrap` and `.nav`.
   Accent colour is inherited from the page's --o (KMT blue #1268C4).
   ============================================================ */

/* the off-canvas panel parks off-screen to the right; clip the horizontal
   overflow it creates so it never adds a scrollbar or widens the viewport.
   clip (not hidden) keeps the sticky header working. */
html{overflow-x:clip}

.site-header{position:sticky;top:0;z-index:100;background:#0F1216;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{width:1440px;max-width:100%;margin:0 auto;padding:0 100px;display:flex;align-items:center;justify-content:space-between;gap:28px;height:84px}

/* brand / logo */
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto;display:block}

/* desktop nav */
.dnav{display:flex;align-items:center;gap:26px;height:100%}
.dnav>a,.dnav .mega-trigger{display:inline-flex;align-items:center;gap:7px;height:100%;color:#98A1AB;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:none;border:0;font-family:inherit}
.dnav>a:hover,.dnav .mega-trigger:hover,.dnav a.on{color:#fff}
.dnav .caret{width:9px;height:9px;transition:transform .25s ease;opacity:.8}

.dcta{flex:none}
.dcta.btn{height:46px;padding:0 22px;font-size:11px}

/* burger — hidden on desktop */
.burger{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:#fff}
.burger span{position:relative;display:block;width:24px;height:2px;background:#fff;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;transition:.3s}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* ---- MEGA MENU (desktop) ------------------------------------ */
.has-mega{position:static;display:flex;align-items:center;height:100%}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #E4E7EA;box-shadow:0 24px 48px -20px rgba(15,18,22,.35);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;z-index:120}
.has-mega:hover>.mega,.mega:hover,.has-mega.open>.mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}
.has-mega:hover .caret{transform:rotate(180deg)}
.mega-inner{width:1440px;max-width:100%;margin:0 auto;padding:40px 100px 44px;display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:40px}
.mega-col h4{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--o);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid #EAEDF0}
.mega-col a{display:block;color:#2C333B;font-size:14px;font-weight:500;letter-spacing:-.005em;padding:7px 0;transition:color .15s,transform .15s}
.mega-col a:hover{color:var(--o);transform:translateX(3px)}
.mega-feat{background:#0F1216;padding:28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mega-feat::after{content:"";position:absolute;right:-30px;top:0;bottom:0;width:150px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--o) 22%,transparent) 0 10px,transparent 10px 24px)}
.mega-feat .eyebrow{position:relative;color:var(--o);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mega-feat h5{position:relative;margin:12px 0 0;color:#fff;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.mega-feat .mfcta{position:relative;margin-top:20px;display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ---- OFF-CANVAS (mobile) ------------------------------------ */
.oc-backdrop{position:fixed;inset:0;background:rgba(8,10,12,.55);opacity:0;visibility:hidden;transition:.3s;z-index:998}
.oc-backdrop.show{opacity:1;visibility:visible}
.offcanvas{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:#0F1216;z-index:999;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.15,1);display:flex;flex-direction:column;overflow-y:auto}
.offcanvas.open{transform:translateX(0)}
.oc-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.09)}
.oc-head img{height:38px}
.oc-close{width:40px;height:40px;background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.oc-nav{padding:10px 22px 24px;display:flex;flex-direction:column}
.oc-nav>a,.oc-acc>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;color:#E8EBEE;font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:none;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);font-family:inherit;cursor:pointer;text-align:left}
.oc-nav>a:hover,.oc-acc>button:hover{color:#fff}
.oc-nav>a.on{color:var(--o)}
.oc-acc>button .caret{width:11px;height:11px;transition:transform .25s}
.oc-acc.open>button .caret{transform:rotate(180deg)}
.oc-sub{max-height:0;overflow:hidden;transition:max-height .3s ease}
.oc-acc.open .oc-sub{max-height:520px}
.oc-sub a{display:block;padding:11px 0 11px 14px;color:#98A1AB;font-size:14px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.05)}
.oc-sub a:hover{color:#fff}
.oc-foot{margin-top:auto;padding:22px}
.oc-foot .btn{width:100%}
.oc-foot p{margin:16px 0 0;color:#7A828B;font-size:12.5px;line-height:1.7}

body.oc-lock{overflow:hidden}

/* ---- responsive switch -------------------------------------- */
@media (max-width:1100px){ .nav-wrap{padding:0 48px} .mega-inner{padding:36px 48px} }
@media (max-width:960px){
  .dnav,.dcta{display:none !important}
  .burger{display:inline-flex !important}
  .nav-wrap{height:72px;padding:0 24px}
  .brand img{height:40px}
}
@media (min-width:961px){ .offcanvas,.oc-backdrop{display:none !important} }

/* ---- CLIENT LOGO WALL --------------------------------------- */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:#DDE1E5;border:1px solid #DDE1E5}
.logo-cell{background:#fff;height:106px;display:flex;align-items:center;justify-content:center;padding:20px}
.logo-cell img{max-height:44px;max-width:128px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.58;transition:filter .3s ease,opacity .3s ease}
.logo-cell:hover img{filter:none;opacity:1}
.logo-cell .wordmark{color:#8A929B;font-size:13px;font-weight:800;letter-spacing:.06em;text-align:center;line-height:1.25;transition:color .3s ease}
.logo-cell:hover .wordmark{color:#3A424B}
@media (max-width:1199px){ .logo-wall{grid-template-columns:repeat(4,1fr)} }
@media (max-width:767px){ .logo-wall{grid-template-columns:repeat(2,1fr)} .logo-cell{height:88px;padding:16px} }