/* ═════════ Site header & footer ═════════ */

/* Top bar */
#header .topbar { background:#070b18; height:36px; font-size:12.5px; color:rgba(255,255,255,.65); border:0; }
#header .topbar a { color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s; }
#header .topbar a:hover { color:#fff; }
#header .topbar .contact-info a i { margin-right:6px; font-style:normal; color:rgba(255,255,255,.45); }
#header .topbar .social-links { gap:12px; margin-left:22px; padding-left:18px; border-left:1px solid rgba(255,255,255,.12); }
#header .topbar .social-links a { font-size:14px; padding:0; }
.hx-status { gap:20px; align-items:center; }
.hx-office { display:inline-flex; align-items:center; gap:7px; }
.hx-office i { width:7px; height:7px; border-radius:50%; background:#64748b; }
.hx-office.open i { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.hx-office b { color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }

/* Main bar */
#header .branding { background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(15,23,42,.07); min-height:68px; padding:0; }
.scrolled #header, .scrolled .header { box-shadow:0 8px 30px -12px rgba(15,23,42,.18); }
#header .logo { gap:10px; text-decoration:none; }
#header .logo .sitename { font-size:22px !important; font-weight:800; letter-spacing:-.02em; color:#0b1020; }
.hx-mark { flex:0 0 auto; }

/* CTA button */
#header .btn-nav-cta { display:inline-flex; align-items:center; gap:8px; background:#0b1020; color:#fff !important; border-radius:10px; padding:10px 16px; font-size:14px; font-weight:700; text-decoration:none; margin-left:14px; border:0; transition:transform .2s, box-shadow .2s, background .2s; }
#header .btn-nav-cta:hover { background:#1e293b; transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(11,16,32,.6); }
#header .btn-nav-cta i { transition:transform .2s; }
#header .btn-nav-cta:hover i { transform:translateX(3px); }

/* Desktop navigation */
@media (min-width:1200px) {
  #header .navmenu > ul > li { padding:0; }
  #header .navmenu > ul > li > a { padding:8px 12px; margin:0 1px; border-radius:8px; font-size:14.5px; font-weight:600; color:#334155; transition:background .2s, color .2s; }
  #header .navmenu > ul > li > a:hover, #header .navmenu > ul > li:hover > a { background:#f1f5f9; color:#0b1020; }
  #header .navmenu > ul > li > a.active { color:#0b1020; background:transparent; position:relative; }
  #header .navmenu > ul > li > a.active::after { content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px; background:linear-gradient(90deg,#22d3ee,#3b82f6,#8b5cf6); }
  #header .navmenu .toggle-dropdown { font-size:11px; margin-left:4px; }
  #header .hx-home { display:none; }

  /* Services mega menu */
  #header .hx-mega > ul { display:grid !important; grid-template-columns:1fr 1fr; gap:2px; width:600px; min-width:0; left:-180px; padding:12px; border-radius:16px; background:#fff; border:1px solid #e6e9f2; box-shadow:0 30px 70px -20px rgba(15,23,42,.3); transform:translateY(8px); }
  #header .hx-mega:hover > ul { transform:translateY(0); }
  #header .hx-mega > ul > li > a { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; color:#0b1020; white-space:normal; }
  #header .hx-mega > ul > li > a:hover { background:#f6f8fc; }
  #header .hx-mega > ul > li > a > i { flex:0 0 36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:17px; color:#2563eb; background:#eff6ff; margin:0; transition:background .2s, color .2s; }
  #header .hx-mega > ul > li > a:hover > i { background:#2563eb; color:#fff; }
  #header .hx-mega a span { display:flex; flex-direction:column; line-height:1.3; }
  #header .hx-mega a b { font-size:14px; font-weight:700; }
  #header .hx-mega a small { font-size:12.5px; color:#64748b; font-weight:500; margin-top:2px; }
  #header .hx-tools-label { grid-column:1 / -1; margin:8px 4px 2px; padding-top:10px; border-top:1px solid #eef1f6; }
  #header .hx-tools-label span { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
  #header .hx-tool > a { align-items:center !important; padding:7px 12px !important; }
  #header .hx-tool > a > i { flex-basis:28px !important; height:28px !important; font-size:14px !important; color:#16a34a !important; background:#f0fdf4 !important; }
  #header .hx-tool > a:hover > i { background:#16a34a !important; color:#fff !important; }
  #header .hx-tool a b { font-size:13.5px; font-weight:600; }
}

/* Mobile navigation */
@media (max-width:1199px) {
  #header .branding { min-height:62px; }
  #header .mobile-nav-toggle { color:#0b1020; margin-right:0; }
  .mobile-nav-active .navmenu { background:rgba(7,11,24,.6) !important; backdrop-filter:blur(6px); }
  .mobile-nav-active #header .mobile-nav-toggle { color:#fff; }
  #header .navmenu ul { border-radius:18px !important; padding:10px !important; }
  #header .navmenu > ul > li > a { font-size:16px; font-weight:600; padding:12px 14px; border-radius:10px; }
  #header .hx-mega a small { display:none; }
  #header .hx-mega a > i { margin-right:10px; color:#2563eb; font-size:16px; }
  #header .hx-mega a span { display:inline; }
  #header .hx-mega a b { font-weight:600; }
  #header .hx-tools-label { padding:10px 14px 4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
}

/* ═════════ Footer ═════════ */
.fx { background:#070b18 !important; color:rgba(255,255,255,.62); padding:72px 0 0 !important; font-size:14.5px; position:relative; overflow:hidden; }
.fx::before { content:''; position:absolute; left:50%; top:-300px; width:900px; height:500px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(59,130,246,.18),transparent 65%); pointer-events:none; }
.fx .container { position:relative; }
.fx a { color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; }
.fx a:hover { color:#fff; }

.fx-cta { display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:center; padding:clamp(28px,4vw,44px); border-radius:24px; background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.14)); border:1px solid rgba(255,255,255,.1); margin-bottom:64px; }
.fx-cta h2 { color:#fff !important; font-size:clamp(1.6rem,3.2vw,2.3rem) !important; font-weight:900; letter-spacing:-.02em; margin:0 !important; line-height:1.15 !important; text-align:left !important; }
.fx-cta p { margin:12px 0 0; color:rgba(255,255,255,.7); line-height:1.65; text-align:left !important; }
.fx-cta-btns { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.fx-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:12px; font-weight:800; font-size:15px; transition:transform .2s; }
.fx-btn:hover { transform:translateY(-2px); }
.fx .fx-btn.light { background:#fff; color:#0b1020; } .fx .fx-btn.light:hover { color:#0b1020; }
.fx .fx-btn.ghost { border:1px solid rgba(255,255,255,.22); color:#fff; } .fx .fx-btn.ghost:hover { background:rgba(255,255,255,.06); }

.fx-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.35fr; gap:36px; padding-bottom:48px; text-align:left; }
.fx-logo { display:inline-flex; align-items:center; gap:10px; }
.fx-logo span { color:#fff; font-size:21px; font-weight:800; letter-spacing:-.02em; }
.fx-brand p { margin:16px 0 0; line-height:1.7; max-width:330px; text-align:left; }
.fx-clocks { display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; }
.fx-clock { border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 12px; background:rgba(255,255,255,.03); }
.fx-clock span { display:block; font-size:11px; color:rgba(255,255,255,.45); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.fx-clock b { color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; }
.fx-social { display:flex; gap:8px; margin-top:20px; }
.fx-social a { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); font-size:16px; }
.fx-social a:hover { background:rgba(255,255,255,.08); }

.fx-col h4 { color:#fff !important; font-size:13px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:6px 0 16px !important; padding:0 !important; text-align:left !important; }
.fx-col h4::after { display:none !important; }
.fx-col ul { list-style:none; padding:0; margin:0; }
.fx-col li { padding:6px 0; text-align:left; }
.fx-col li a { font-size:14.5px; }
.fx-contact li { display:flex; flex-direction:column; gap:1px; padding:7px 0; line-height:1.45; }
.fx-contact li span { font-size:11px; font-weight:700; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.06em; }

.fx-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 0 28px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; color:rgba(255,255,255,.45); }
.fx-bottom nav { display:flex; gap:18px; flex-wrap:wrap; }
.fx-bottom nav a { color:rgba(255,255,255,.55); font-size:13px; }

@media (max-width:1199px) { .fx-grid { grid-template-columns:1fr 1fr 1fr; } .fx-brand { grid-column:1 / -1; } }
@media (max-width:767px) {
  .fx-cta { grid-template-columns:1fr; }
  .fx-cta-btns { justify-content:flex-start; }
  .fx-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .fx-contact { grid-column:1 / -1; }
  .fx-bottom { flex-direction:column; align-items:flex-start; padding-bottom:90px; }
}

/* responsive-fixes.css forces containers to 100% width and centred content; restore a proper layout */
#header .topbar .container, #header .branding .container, .fx > .container { max-width:1240px !important; width:100%; margin-left:auto; margin-right:auto; padding-left:24px !important; padding-right:24px !important; }
#header .branding .container { justify-content:space-between !important; }
@media (min-width:768px) { #header .topbar .container { justify-content:space-between !important; } }
@media (max-width:767px) { #header .topbar .container, #header .branding .container, .fx > .container { padding-left:16px !important; padding-right:16px !important; } }
/* the same file sets overflow-x:hidden on containers, which clips the dropdown menu */
#header .container { overflow:visible !important; }
@media (min-width:1200px) {
  #header .hx-mega > ul > li { min-width:0; }
  #header .hx-mega > ul > li > a { justify-content:flex-start !important; text-align:left !important; width:100%; }
  #header .hx-mega a span { flex:1 1 auto; min-width:0; align-items:flex-start; text-align:left !important; }
  #header .hx-mega a small { white-space:normal; }
}
/* backdrop-filter makes the bar a containing block for position:fixed, which traps the full-screen mobile menu */
@media (max-width:1199px) { #header .branding { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:#fff !important; } }
@media (max-width:1199px) {
  #header .hx-mega > ul > li > a { justify-content:flex-start !important; gap:12px; text-align:left; }
  #header .hx-mega > ul > li > a > i { flex:0 0 32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#eff6ff; margin:0 !important; font-size:15px; }
  #header .hx-tool > a > i { color:#16a34a !important; background:#f0fdf4 !important; }
}

/* responsive-fixes.css makes every .container 100% wide; on large screens restore a readable column */
@media (min-width:1200px) {
  .container { max-width:1240px !important; margin-left:auto !important; margin-right:auto !important; }
}
.container { overflow-x:clip !important; }
#header .container { overflow:visible !important; }

/* Pages that end with their own call-to-action don't need the footer's generic one too */
body:has(.pr-cta, .ts-cta-box, .cn-cta, .cr-cta, .ab-cta, .sc-limits, .ca-open) .fx-cta { display:none; }
body:has(.pr-cta, .ts-cta-box, .cn-cta, .cr-cta, .ab-cta, .sc-limits, .ca-open) .fx { padding-top:56px !important; }
#sticky-lead-bar.at-footer { transform:translateY(110%) !important; opacity:0 !important; pointer-events:none; }
