/* site-header.css : public site header (includes/header.php)
   Bar, 90%-width mega panels (Services, Industries), full-screen mobile menu, sticky mobile bar.
   Uses the tokens defined in header.php :root (--b, --ink, --mu, --br, --bp, --g). */

/* ── Bar ─────────────────────────────────────────────────────────────── */
.nav .container{display:flex;align-items:center;gap:18px;}
.hn-links{display:flex;align-items:center;gap:2px;margin:0 auto;list-style:none;padding:0;}
.hn-link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;border:0;background:none;cursor:pointer;
  font:600 14px/1 'Poppins',sans-serif;color:rgba(255,255,255,.9);white-space:nowrap;transition:background .2s,color .2s;}
.hn-link:hover,.hn-link[aria-expanded="true"]{background:rgba(255,255,255,.14);color:#fff;}
.hn-link.act{color:#fff;box-shadow:inset 0 -2px 0 rgba(255,255,255,.8);border-radius:10px 10px 4px 4px;}
.hn-chev{font-size:9px;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.hn-link[aria-expanded="true"] .hn-chev{transform:rotate(180deg);}
.nav.sc .hn-link,.nav.wt .hn-link,.nav.mega-on .hn-link{color:var(--ink2);}
.nav.sc .hn-link:hover,.nav.wt .hn-link:hover,.nav.mega-on .hn-link:hover,
.nav.sc .hn-link[aria-expanded="true"],.nav.wt .hn-link[aria-expanded="true"],.nav.mega-on .hn-link[aria-expanded="true"]{background:var(--bp);color:var(--b);}
.nav.sc .hn-link.act,.nav.wt .hn-link.act,.nav.mega-on .hn-link.act{color:var(--b);box-shadow:inset 0 -2px 0 var(--b);}

.hn-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.hn-contact{font:600 14px/1 'Poppins',sans-serif;color:rgba(255,255,255,.9);padding:9px 6px;}
.hn-contact:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.hn-icon{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  color:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);transition:background .2s,color .2s,border-color .2s;}
.hn-icon:hover{background:rgba(255,255,255,.18);}
.hn-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--g);color:#fff;
  font:700 13.5px/1 'Poppins',sans-serif;box-shadow:0 6px 20px rgba(26,110,255,.32);white-space:nowrap;transition:transform .2s,box-shadow .2s;}
.hn-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(26,110,255,.42);}
.hn-cta:active{transform:scale(.98);}
.nav.sc .hn-contact,.nav.wt .hn-contact,.nav.mega-on .hn-contact{color:var(--ink2);}
.nav.sc .hn-icon,.nav.wt .hn-icon,.nav.mega-on .hn-icon{color:var(--ink2);border-color:var(--br);background:#fff;}
.nav.sc .hn-icon:hover,.nav.wt .hn-icon:hover,.nav.mega-on .hn-icon:hover{color:var(--b);border-color:var(--b);background:var(--bp);}
.nav.mega-on{background:#fff;box-shadow:0 1px 0 var(--br);}
.nav.mega-on .brand-name{color:var(--ink);}
.nav.mega-on .brand-unit small{color:var(--mu);}
.nav.mega-on .brand-unit img{background:none;padding:0;height:13px;}
.nav.mega-on .ham span{background:var(--ink);}
.hn-link:focus-visible,.hn-cta:focus-visible,.hn-icon:focus-visible,.hn-contact:focus-visible,.mg a:focus-visible{outline:3px solid rgba(26,110,255,.45);outline-offset:2px;}


/* ── Log in / account (bar) ─────────────────────────────────────────── */
.hn-login{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line,#E3EAF5);background:rgba(255,255,255,.6);
  font:600 14px/1 var(--f,'Fira Sans',sans-serif);color:var(--ink,#0A1A3D);white-space:nowrap;transition:border-color .2s ease,color .2s ease,background-color .2s ease;}
.hn-login i{font-size:17px;color:var(--blue,#0866FF);}
.hn-login:hover{border-color:var(--blue,#0866FF);color:var(--blue,#0866FF);background:#fff;}
.hn-user{position:relative;}
.hn-user-btn{display:inline-flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;color:var(--ink,#0A1A3D);transition:background-color .2s ease,border-color .2s ease;}
.hn-user-btn:hover,.hn-user-btn[aria-expanded="true"]{background:rgba(8,102,255,.07);border-color:rgba(8,102,255,.18);}
.hn-user-btn[aria-expanded="true"] .hn-chev{transform:rotate(180deg);}
.hn-user-btn:focus-visible{outline:3px solid rgba(26,110,255,.45);outline-offset:2px;}
.hn-user-menu{position:absolute;right:0;top:calc(100% + 12px);width:290px;padding:10px;border-radius:18px;background:#fff;z-index:1200;
  box-shadow:0 30px 70px -24px rgba(6,17,39,.4),0 0 0 1px rgba(10,26,61,.06);transform-origin:top right;animation:hnUserIn .28s cubic-bezier(.16,1,.3,1) both;}
.hn-user-menu[hidden]{display:none;}
@keyframes hnUserIn{from{opacity:0;transform:translateY(-6px) scale(.97);}}
.hn-user-head{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--line,#E3EAF5);margin-bottom:6px;}
.hn-user-head b{display:block;font:700 15px/1.25 var(--f,'Fira Sans',sans-serif);color:var(--ink,#0A1A3D);}
.hn-user-head span{display:block;font-size:12.5px;color:var(--muted,#5B6780);word-break:break-all;}
.hn-user-nav{display:grid;gap:2px;}
.hn-user-nav a,.hn-user-out{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font:500 14.5px/1.2 var(--f,'Fira Sans',sans-serif);color:var(--ink,#0A1A3D);transition:background-color .15s ease,color .15s ease;}
.hn-user-nav a i,.hn-user-out i{width:18px;text-align:center;color:var(--blue,#0866FF);}
.hn-user-nav a:hover{background:#F2F6FD;color:var(--blue,#0866FF);}
.hn-user-out{margin-top:6px;border-top:1px solid var(--line,#E3EAF5);border-radius:0 0 10px 10px;color:#C2410C;}
.hn-user-out i{color:#C2410C;}
.hn-user-out:hover{background:#FFF4ED;}
.mf-acct{display:flex!important;align-items:center;justify-content:center;gap:8px;}
@media(max-width:1099px){
  .hn-login{padding:9px;border-radius:50%;}
  .hn-login span{display:none;}
  .hn-user-btn .hn-chev{display:none;}
  .hn-user-btn{padding:2px;}
  .hn-user-menu{position:fixed;right:12px;top:calc(var(--hn-h,64px) + 6px);width:min(300px,calc(100vw - 24px));}
}

/* ── Mega panels: 90% of the screen, photo cards, opening reveal ─────── */
.mg-scrim{position:fixed;left:0;right:0;bottom:0;top:var(--hn-h,72px);background:rgba(6,17,39,.38);backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility 0s .25s;z-index:998;}
.mg-scrim.on{opacity:1;visibility:visible;transition:opacity .25s ease;}
.mg{position:fixed;top:calc(var(--hn-h,72px) + 10px);left:5vw;width:90vw;height:calc(90vh - var(--hn-h,72px));max-height:880px;overflow:auto;overscroll-behavior:contain;
  background:#fff;border-radius:22px;box-shadow:0 40px 100px -20px rgba(6,17,39,.35),0 0 0 1px rgba(10,26,61,.06);z-index:999;scrollbar-width:thin;
  opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0 round 22px);transition:clip-path .3s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility 0s .3s;}
.mg.on{opacity:1;visibility:visible;clip-path:inset(0 0 0 0 round 22px);transition:clip-path .55s cubic-bezier(.16,1,.3,1),opacity .2s ease;}
.mg-in{height:100%;padding:28px 30px;}
.mg-x{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;}
.mg-eyebrow{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--blue-50);color:var(--blue-600);font:700 11.5px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;}
.mg-all{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f);color:var(--blue);white-space:nowrap;}
.mg-all i{transition:transform .25s var(--ease);}
.mg-all:hover i{transform:translateX(3px);}

/* services */
.mg-main{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;min-height:0;}
.mg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.mg-head h3{margin:10px 0 0;font:800 clamp(20px,1.9vw,27px)/1.15 var(--f);letter-spacing:-.015em;color:var(--ink);max-width:24ch;}
.mg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;min-height:0;}
.mg-card{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:16px;overflow:hidden;background:#F6F9FE;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;}
.mg-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(10,26,61,.45);border-color:#C9D9F5;}
.mg-card-img{flex:1 1 auto;min-height:72px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#E3EDFF,#F4F8FE);color:var(--blue);font-size:28px;}
.mg-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease);}
.mg-card-img:has(> i){background:radial-gradient(120% 120% at 100% 0%,#0866FF 0%,#0B2558 70%);color:#fff;font-size:38px;}
.mg-card-img > i{transition:transform .6s var(--ease);}
.mg-card:hover .mg-card-img > i{transform:scale(1.12) rotate(-4deg);}
.mg-card:hover .mg-card-img img{transform:scale(1.06);}
.mg-card-body{flex:none;display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px;background:#fff;}
.mg-card-body small{font:600 11px/1.2 var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.mg-card-body b{font:700 15px/1.25 var(--f);color:var(--ink);transition:color .2s ease;}
.mg-card:hover .mg-card-body b{color:var(--blue);}
.mg-card-body > span{font-size:12.5px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mg.on .mg-card,.mg.on .mg-tile{animation:mgIn .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 35ms + 80ms);}
@keyframes mgIn{from{opacity:0;transform:translateY(14px) scale(.985);}}

/* side column: featured project + call to action */
.mg-side{display:flex;flex-direction:column;gap:14px;min-height:0;}
.mg-proj{position:relative;flex:1 1 auto;min-height:170px;display:block;border-radius:16px;overflow:hidden;background:var(--navy-900);}
.mg-proj-img{position:absolute;inset:0;}
.mg-proj-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1.2s var(--ease);}
.mg-proj:hover .mg-proj-img img{transform:scale(1.05);}
.mg-proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,17,39,0) 30%,rgba(6,17,39,.92) 100%);}
.mg-proj-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:3px;color:#fff;}
.mg-proj-cap small{font:600 11px/1.2 var(--f);letter-spacing:.05em;text-transform:uppercase;color:#7FB0FF;}
.mg-proj-cap b{font:800 19px/1.2 var(--f);}
.mg-proj-cap > span{font-size:12.5px;color:rgba(255,255,255,.75);}
.mg-proj-cap em{margin-top:6px;font:600 13px/1 var(--f);font-style:normal;display:inline-flex;align-items:center;gap:7px;}
.mg-cta{flex:none;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,#14336F 0%,var(--navy-900) 60%);}
.mg-cta h4{margin:0;font:800 18px/1.25 var(--f);}
.mg-cta p{margin:0 0 4px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.74);}
.mg-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:var(--r-btn);font:600 14px/1 var(--f);transition:background-color .2s ease,transform .2s var(--ease);}
.mg-btn--pri{background:var(--blue);color:#fff;}
.mg-btn--pri:hover{background:var(--blue-600);color:#fff;transform:translateY(-1px);}
.mg-btn--wa{border:1px solid rgba(255,255,255,.25);color:#fff;}
.mg-btn--wa:hover{background:rgba(255,255,255,.1);color:#fff;}
.mg-btn--wa i{color:var(--wa);}
.mg-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:2px;}
.mg-check:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* industries */
.mg-x--ind{grid-template-columns:300px minmax(0,1fr);}
.mg-intro{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.mg-intro h3{margin:0;font:800 clamp(22px,2.1vw,30px)/1.12 var(--f);letter-spacing:-.015em;color:var(--ink);}
.mg-intro > p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2);}
.mg-cta--sm{margin-top:auto;width:100%;}
.mg-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;min-height:0;}
.mg-tile{position:relative;display:block;min-height:150px;border-radius:16px;overflow:hidden;background:#13213F;color:#fff;transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.mg-tile:hover{transform:translateY(-4px);box-shadow:0 24px 44px -22px rgba(6,17,39,.6);}
.mg-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 1s var(--ease);}
.mg-tile > i{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:rgba(255,255,255,.4);}
.mg-tile:hover img{transform:scale(1.07);}
.mg-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,17,39,0) 38%,rgba(6,17,39,.9) 100%);}
.mg-tile-cap{position:absolute;left:14px;right:14px;bottom:13px;z-index:1;display:flex;flex-direction:column;gap:3px;transition:transform .4s var(--ease);}
.mg-tile:hover .mg-tile-cap{transform:translateY(-3px);}
.mg-tile-cap b{font:700 16px/1.2 var(--f);}
.mg-tile-cap span{font-size:12px;line-height:1.4;color:rgba(255,255,255,.78);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

@media(max-width:1280px){
  .mg-x{grid-template-columns:minmax(0,1fr) 280px;}
  .mg-x--ind{grid-template-columns:250px minmax(0,1fr);}
  .mg-card-body > span{display:none;}
}
@media(max-height:760px){ .mg-card-body > span,.mg-tile-cap span{display:none;} .mg-in{padding:22px 24px;} }

/* ── Mobile menu (below 1100px) ──────────────────────────────────────── */
.mobnav{position:fixed;inset:0;background:#fff;z-index:1001;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);overflow:hidden;}
.mobnav.op{transform:translateX(0);}
.mob-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--br);flex-shrink:0;}
.mob-hdr .brand-mark img{width:36px;height:36px;border-radius:9px;}
.mob-hdr .brand-name{font-size:17px;}
.mob-close{width:40px;height:40px;background:var(--bp);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--b);font-size:16px;}
.mob-body{flex:1;overflow-y:auto;padding:10px 18px 20px;-webkit-overflow-scrolling:touch;}
.mob-acc{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border:0;border-bottom:1px solid var(--br);
  background:none;font:700 17px/1.2 'Poppins',sans-serif;color:var(--ink);cursor:pointer;}
.mob-acc i{font-size:13px;color:var(--mu);transition:transform .25s cubic-bezier(.16,1,.3,1);}
.mob-acc[aria-expanded="true"] i{transform:rotate(180deg);color:var(--b);}
.mob-pane{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1);}
.mob-pane.op{grid-template-rows:1fr;}
.mob-pane>div{overflow:hidden;}
.mob-grp{font-size:12px;font-weight:700;color:var(--mu);margin:16px 2px 8px;}
.mob-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mob-tile{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--br);border-radius:12px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;min-height:56px;}
.mob-tile:active{background:var(--bp);}
.mob-tile .mg-ic{width:32px;height:32px;border-radius:9px;font-size:13px;flex-shrink:0;}
.mob-tile img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--bp);}
.mob-all{display:inline-flex;align-items:center;gap:8px;margin:14px 2px 16px;font-weight:700;font-size:14px;color:var(--b);}
.mob-link{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid var(--br);font-size:17px;font-weight:700;color:var(--ink);}
.mob-link i{font-size:12px;color:var(--mu);}
.mob-link.act{color:var(--b);}
.mob-footer{flex-shrink:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--br);display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;}
.mob-footer a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;font-weight:700;font-size:14px;}
.mob-footer .mf-wa{border:1.5px solid #25D366;color:#128C7E;}
.mob-footer .mf-cta{background:var(--g);color:#fff;}
.mob-footer .mf-login{grid-column:1/-1;min-height:auto;font-size:13px;font-weight:600;color:var(--mu);}

/* ── Sticky mobile bar (every page, below 1100px) ────────────────────── */
.mbar{display:none;}
@media(max-width:1099px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:950;background:#fff;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(13,27,62,.1);transform:translateY(110%);
    transition:transform .3s cubic-bezier(.16,1,.3,1);}
  .mbar.on{transform:none;}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:999px;font-weight:700;font-size:14px;}
  .mbar .mb-wa{border:1.5px solid #25D366;color:#128C7E;}
  .mbar .mb-cta{background:var(--g);color:#fff;}
  body.has-mbar{padding-bottom:72px;}
  body.has-mbar .wa-fl{display:none;}
  body.has-mbar .chat-fl{bottom:84px;}
}

/* ── Bar layout by width ─────────────────────────────────────────────── */
@media(max-width:1240px){ .hn-link{padding:9px 10px;font-size:13.5px;} .hn-contact{display:none;} }
@media(max-width:1099px){
  .hn-links,.hn-contact,.hn-icon,.hn-cta,.mg,.mg-scrim{display:none!important;}
  .ham{display:flex;margin-left:auto;}
}
@media (prefers-reduced-motion: reduce){
  .mg,.mg-scrim,.mobnav,.mob-pane,.mbar,.hn-chev,.mob-acc i,.hn-ind{transition:none!important;}
  .mg.on .mg-card,.mg.on .mg-tile{animation:none!important;}
}