/* ==========================================================================
   WebKeyIndia — header & footer redesign  (2026-08-27)

   Scoped entirely under .wkhf so it cannot leak into page content. Only the
   header (top bar + nav) and the footer are restyled; every menu link and the
   dynamic service lists are unchanged, just re-presented.

   Brand system
     ink      #0E0F12  near-black surface
     panel    #17181D  raised dark
     orange   #FF7A1A  (the "KEY" in the logo)
     crimson  #E11D2A  (the hero headline)
     accent   orange -> crimson gradient, used for one clear action per view
   ========================================================================== */
.wkhf {
  --wk-ink:      #0E0F12;
  --wk-ink-2:    #17181D;
  --wk-ink-3:    #1F2128;
  --wk-line:     rgba(255,255,255,.10);
  --wk-text:     #F4F5F7;
  --wk-muted:    #A7ABB4;
  --wk-orange:   #FF7A1A;
  --wk-crimson:  #E11D2A;
  --wk-grad:     linear-gradient(90deg, #FF7A1A 0%, #F0471E 55%, #E11D2A 100%);
  --wk-grad-soft:linear-gradient(90deg, rgba(255,122,26,.14), rgba(225,29,42,.14));
  --wk-radius:   12px;
  --wk-shadow:   0 10px 30px rgba(0,0,0,.28);
  --wk-font:     "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
.wkhf *,
.wkhf *::before,
.wkhf *::after { box-sizing: border-box; }
.wkhf a { text-decoration: none; }
.wkhf ul { list-style: none; margin: 0; padding: 0; }
.wkhf img { max-width: 100%; display: block; }

/* ==========================================================================
   TOP UTILITY BAR
   ========================================================================== */
.wk-top {
  background: var(--wk-ink);
  border-bottom: 1px solid var(--wk-line);
  font-family: var(--wk-font);
  font-size: 13px;
  color: var(--wk-muted);
  position: relative;
}
.wk-top::before {              /* thin brand line along the very top */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--wk-grad);
}
.wk-top__in {
  max-width: 1280px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wk-top__l, .wk-top__r { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wk-top__item { display: inline-flex; align-items: center; gap: 8px; color: var(--wk-muted); white-space: nowrap; }
.wk-top__item i { color: var(--wk-orange); font-size: 13px; }
.wk-top__item a { color: var(--wk-muted); transition: color .2s; }
.wk-top__item a:hover { color: #fff; }
.wk-top__links { display: flex; align-items: center; gap: 16px; }
.wk-top__links a { color: var(--wk-muted); font-weight: 500; transition: color .2s; }
.wk-top__links a:hover, .wk-top__links a.is-current { color: var(--wk-orange); }
.wk-social { display: flex; align-items: center; gap: 8px; }
.wk-social a {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 7px; color: var(--wk-muted);
  background: rgba(255,255,255,.06); border: 1px solid var(--wk-line);
  transition: all .2s;
}
.wk-social a:hover { color: #fff; background: var(--wk-grad); border-color: transparent; transform: translateY(-2px); }

/* ==========================================================================
   MAIN NAV BAR  (sticky)
   ========================================================================== */
/* Positioning is handled by the existing parent <nav class="navbar-fixed-top">;
   this element only carries the new look, so it must not add its own sticky
   (that fought the fixed parent and left the bar offset by the top strip). */
.wk-nav {
  position: relative; z-index: 1000;
  background: #0E0F12;
  border-bottom: 1px solid var(--wk-line);
  font-family: var(--wk-font);
  transition: box-shadow .25s, background .25s, padding .25s;
}
.wk-nav.is-stuck { box-shadow: 0 8px 28px rgba(0,0,0,.35); background: rgba(12,13,16,.98); }
.wk-nav__in {
  max-width: 1360px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  transition: padding .25s;
}
.wk-nav.is-stuck .wk-nav__in { padding-top: 8px; padding-bottom: 8px; }
.wk-nav__logo { flex: none; display: inline-flex; align-items: center; }
.wk-nav__logo img { height: 42px; width: auto; transition: height .25s; }
.wk-nav.is-stuck .wk-nav__logo img { height: 36px; }

/* menu */
.wk-menu { display: flex; align-items: center; gap: 0; margin-left: 6px; flex: 1; }
.wk-menu > li { position: relative; }
.wk-menu > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: 9px;
  color: var(--wk-text); font-size: 14.5px; font-weight: 500; white-space: nowrap;
  transition: color .2s, background .2s;
}
/* The Google Partner badge only appears when there is genuinely room for it,
   so the menu + CTA never get squeezed on common laptop widths (1366/1440). */
/* The badge has a real (image) width that varies with the viewer's display
   scaling; only show it when there is provably room so the CTA never clips. */
@media (max-width: 1639px) {
  .wk-partner { display: none; }
}
@media (max-width: 1439px) {
  .wk-menu > li > a { padding: 9px 9px; font-size: 13.5px; }
  .wk-menu { margin-left: 2px; }
}
.wk-menu > li > a .wk-caret { font-size: 11px; color: var(--wk-muted); transition: transform .25s, color .2s; }
.wk-menu > li > a:hover { color: #fff; background: rgba(255,255,255,.07); }
.wk-menu > li > a:hover .wk-caret { color: var(--wk-orange); }
.wk-menu > li.is-open > a,
.wk-menu > li:hover > a { color: #fff; }
.wk-menu > li:hover > a::after,
.wk-menu > li.is-open > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--wk-grad); border-radius: 2px;
}
.wk-menu > li:hover > a .wk-caret { transform: rotate(180deg); }

/* mega dropdown — a clean light card */
.wk-drop {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 620px; padding: 18px;
  background: #fff; color: #1b1c22;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.32);
  border: 1px solid rgba(0,0,0,.06);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.wk-drop::before {           /* little pointer */
  content: ""; position: absolute; top: -7px; left: 26px;
  width: 14px; height: 14px; background: #fff; transform: rotate(45deg);
  border-left: 1px solid rgba(0,0,0,.06); border-top: 1px solid rgba(0,0,0,.06);
}
.wk-menu > li:hover > .wk-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.wk-drop--wide { min-width: 720px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.wk-drop__link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 9px;
  color: #3a3c46; font-size: 13.6px; font-weight: 500; line-height: 1.25;
  transition: background .18s, color .18s, transform .18s;
}
.wk-drop__link i {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 10px; color: var(--wk-crimson);
  background: var(--wk-grad-soft); border-radius: 6px; transition: all .18s;
}
.wk-drop__link:hover { background: #FFF4EC; color: var(--wk-crimson); transform: translateX(3px); }
.wk-drop__link:hover i { background: var(--wk-grad); color: #fff; }

/* right side actions */
.wk-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.wk-partner { flex: none; }
.wk-partner img { height: 46px; width: auto; border-radius: 6px; }
.wk-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-family: var(--wk-font); font-size: 14px; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--wk-grad); border: 0; cursor: pointer;
  box-shadow: 0 8px 20px rgba(225,29,42,.30); transition: transform .18s, box-shadow .18s, filter .18s;
}
.wk-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(225,29,42,.42); filter: brightness(1.05); }
.wk-cta i { font-size: 13px; }
.wk-callbtn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--wk-line);
}
.wk-callbtn:hover { color: #fff; background: var(--wk-grad); border-color: transparent; }

/* hamburger */
.wk-burger {
  display: none; width: 46px; height: 44px; border-radius: 10px; flex: none;
  background: rgba(255,255,255,.06); border: 1px solid var(--wk-line);
  cursor: pointer; position: relative;
}
.wk-burger span, .wk-burger span::before, .wk-burger span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: #fff; border-radius: 2px; transform: translate(-50%,-50%); transition: .28s;
}
.wk-burger span::before { transform: translate(-50%,-7px); }
.wk-burger span::after  { transform: translate(-50%,5px); }
body.wk-navopen .wk-burger span { background: transparent; }
body.wk-navopen .wk-burger span::before { transform: translate(-50%,-50%) rotate(45deg); }
body.wk-navopen .wk-burger span::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* ==========================================================================
   MOBILE PANEL
   ========================================================================== */
.wk-scrim {
  /* Must sit BELOW the header's stacking context (.wk-nav z-index:1000) so the
     mobile menu — which lives inside that header — paints ABOVE the scrim and
     stays tappable. It still dims the page, since the whole fixed header/navbar
     renders above page content regardless of this value. */
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
  opacity: 0; visibility: hidden; transition: .25s;
}
body.wk-navopen .wk-scrim { opacity: 1; visibility: visible; }
@media (max-width: 1319px) {
  .wk-menu, .wk-partner { display: none; }
  .wk-burger { display: block; }
  .wk-nav__actions { margin-left: auto; }

  .wk-menu {
    display: block; position: fixed; top: 0; right: 0; z-index: 1100;
    width: min(86vw, 360px); height: 100dvh; margin: 0; padding: 74px 0 24px;
    background: var(--wk-ink); border-left: 1px solid var(--wk-line);
    overflow-y: auto; transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -20px 0 50px rgba(0,0,0,.5);
  }
  body.wk-navopen .wk-menu { transform: translateX(0); }
  .wk-menu > li { border-bottom: 1px solid var(--wk-line); }
  /* full-width flex row so the WHOLE category bar is tappable (not just the
     text), and the caret is pushed to the far right */
  .wk-menu > li > a { display: flex; width: 100%; padding: 15px 22px; border-radius: 0; justify-content: space-between; font-size: 15px; }
  .wk-menu > li > a::after { display: none !important; }
  .wk-menu > li > a .wk-caret { transition: transform .25s; }
  .wk-menu > li.is-open > a { background: var(--wk-grad-soft); color: #fff; }
  .wk-menu > li.is-open > a .wk-caret { transform: rotate(180deg); color: var(--wk-orange); }

  .wk-drop {
    position: static; min-width: 0; width: auto; opacity: 1; visibility: visible;
    transform: none; display: none; grid-template-columns: 1fr;
    background: var(--wk-ink-2); color: var(--wk-text); border: 0; border-radius: 0;
    box-shadow: none; padding: 6px 12px 12px;
  }
  .wk-drop--wide { grid-template-columns: 1fr; }
  .wk-drop::before { display: none; }
  .wk-menu > li.is-open > .wk-drop { display: grid; }
  .wk-drop__link { color: var(--wk-muted); padding: 11px 12px; }
  .wk-drop__link:hover { background: rgba(255,255,255,.05); color: #fff; transform: none; }
  .wk-drop__link i { background: rgba(255,255,255,.08); color: var(--wk-orange); }

  .wk-mobextra { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
  .wk-mobextra .wk-cta { justify-content: center; }
  .wk-mobextra .wk-social { justify-content: center; margin-top: 4px; }
}
@media (min-width: 1320px) { .wk-scrim, .wk-mobextra { display: none; } }

/* small screens: hide the utility bar entirely and keep only the main nav */
@media (max-width: 767px) {
  .wk-top { display: none; }               /* phone/email/hours bar hidden on phones */
  .wk-callbtn { display: inline-flex; }
  .wk-nav__in { padding: 10px 14px; gap: 8px; }
  .wk-cta { padding: 10px 14px; font-size: 13px; }
  .wk-cta .wk-cta__long { display: none; }
  /* compact Google Partner badge so it sits neatly beside the menu button */
  .wk-partner { padding: 4px 8px; border-radius: 8px; }
  .wk-partner img { height: 26px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.wk-foot { font-family: var(--wk-font); background: var(--wk-ink); color: var(--wk-muted); }

/* CTA strip */
.wk-fcta { position: relative; overflow: hidden; background: var(--wk-ink-2); border-top: 1px solid var(--wk-line); }
.wk-fcta::before { content:""; position:absolute; inset:0; background: var(--wk-grad); opacity:.10; }
.wk-fcta__in {
  position: relative; max-width: 1280px; margin: 0 auto; padding: 30px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.wk-fcta__t h3 { margin: 0; color: #fff; font-size: 22px; font-weight: 700; }
.wk-fcta__t p { margin: 6px 0 0; color: var(--wk-muted); font-size: 14px; }
.wk-fcta__b { display: flex; gap: 12px; flex-wrap: wrap; }
.wk-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid var(--wk-line); transition: all .2s;
}
.wk-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* main footer */
.wk-foot__main { max-width: 1280px; margin: 0 auto; padding: 44px 20px 24px; }
.wk-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 30px; }
.wk-foot__brand .wk-foot__logo img { height: 42px; margin-bottom: 14px; }
.wk-foot__brand p { font-size: 13.5px; line-height: 1.7; margin: 0 0 16px; }
.wk-foot h4 {
  color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 16px; padding-bottom: 12px;
  position: relative; letter-spacing: .2px;
}
.wk-foot h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--wk-grad); border-radius: 2px; }
.wk-foot__col ul li { margin-bottom: 11px; }
.wk-foot__col ul li a { color: var(--wk-muted); font-size: 13.5px; transition: color .2s, padding .2s; display: inline-flex; align-items: center; gap: 8px; }
.wk-foot__col ul li a i { font-size: 10px; color: var(--wk-crimson); }
.wk-foot__col ul li a:hover { color: var(--wk-orange); padding-left: 4px; }
.wk-contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; }
.wk-contact li i {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  color: #fff; background: var(--wk-grad); border-radius: 9px; font-size: 13px;
}
.wk-contact li a { color: var(--wk-muted); }
.wk-contact li a:hover { color: var(--wk-orange); }
.wk-foot__social { display: flex; gap: 10px; margin-top: 4px; }
.wk-foot__social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  color: var(--wk-muted); background: rgba(255,255,255,.06); border: 1px solid var(--wk-line); transition: all .2s;
}
.wk-foot__social a:hover { color: #fff; background: var(--wk-grad); border-color: transparent; transform: translateY(-3px); }

/* the big SEO service list, re-presented as tidy columns */
.wk-services { border-top: 1px solid var(--wk-line); background: var(--wk-ink); }
.wk-services__in { max-width: 1280px; margin: 0 auto; padding: 34px 20px 10px; }
.wk-services__in > h3 { color: #fff; font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 22px; }
.wk-services__grid { columns: 4; column-gap: 28px; }
.wk-sgroup { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }
.wk-sgroup > a.wk-sgroup__h {
  display: block; color: #fff; font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
  padding-left: 12px; position: relative;
}
.wk-sgroup > a.wk-sgroup__h::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; background: var(--wk-grad); border-radius:2px; }
.wk-sgroup > a.wk-sgroup__h:hover { color: var(--wk-orange); }
.wk-sgroup__links { display: flex; flex-wrap: wrap; gap: 4px 0; }
.wk-sgroup__links a { color: var(--wk-muted); font-size: 12.3px; line-height: 1.5; transition: color .18s; padding-left: 12px; }
.wk-sgroup__links a:hover { color: var(--wk-orange); }

/* quick links strip */
.wk-quick { background: var(--wk-ink-2); border-top: 1px solid var(--wk-line); }
.wk-quick__in {
  max-width: 1280px; margin: 0 auto; padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px;
}
.wk-quick__in a { color: var(--wk-muted); font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 20px; transition: all .2s; }
.wk-quick__in a:hover { color: #fff; background: var(--wk-grad); }

/* copyright */
.wk-copy { background: #08090B; border-top: 1px solid var(--wk-line); }
.wk-copy__in {
  max-width: 1280px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--wk-muted); font-size: 13px;
}
.wk-copy__in a { color: var(--wk-orange); }
.wk-toplink {
  display: inline-flex; align-items: center; gap: 7px; color: var(--wk-muted);
  font-size: 12.5px; padding: 8px 14px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--wk-line); transition: all .2s;
}
.wk-toplink:hover { color: #fff; background: var(--wk-grad); border-color: transparent; }

@media (max-width: 1319px) {
  .wk-foot__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .wk-services__grid { columns: 2; }
}
@media (max-width: 575px) {
  .wk-foot__grid { grid-template-columns: 1fr; }
  .wk-services__grid { columns: 1; }
  .wk-fcta__in { flex-direction: column; text-align: center; align-items: stretch; }
  .wk-fcta__b { justify-content: center; }
  .wk-copy__in { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Floating WhatsApp button (kept from the old footer, restyled)
   ========================================================================== */
.wp-styd { position: fixed; z-index: 998; bottom: 22px; left: 22px; display: block; }
.wp-styd img { display: block; width: 54px; height: 54px; border-radius: 50%;
  box-shadow: 0 8px 22px rgba(37,211,102,.45); transition: transform .2s; }
.wp-styd a:hover img { transform: scale(1.08); }
@media (max-width: 767px){ .wp-styd { bottom: 16px; left: 16px; } .wp-styd img { width: 48px; height: 48px; } }

/* ==========================================================================
   Fixes for elements whose positioning lived in the old footer <style>
   ========================================================================== */
/* the footer id rule in custom.css was overriding the new dark background */
.wk-foot#footer, .wkhf .wk-foot { background: var(--wk-ink) !important; }

/* chat button (chatsty.php) — restore its fixed bottom-right bubble */
.wp-styd1 {
  position: fixed; z-index: 998; right: 22px; bottom: 22px;
  width: auto; display: block;
}
.wp-styd1 #myBtn2 {
  width: 54px; height: 54px; margin: 0; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(197,45,47,.45);
}
.wp-styd1 #myBtn2 i { font-size: 26px !important; }
@media (max-width: 767px){ .wp-styd1 { right: 16px; bottom: 78px; } }

/* ==========================================================================
   Mobile header sizing — keep logo, CTA and hamburger on one row
   ========================================================================== */
@media (max-width: 1319px) {
  .wk-nav__logo img { height: 34px; max-width: 168px; object-fit: contain; }
  .wk-callbtn { display: none; }        /* burger panel + top bar already offer call */
  .wk-nav__in { gap: 8px; }
  .wk-nav__actions { gap: 8px; }
}
@media (max-width: 380px) {
  .wk-nav__logo img { max-width: 132px; }
}

/* The off-canvas mobile menu sits just past the right edge when closed; clip
   horizontal overflow at the root so it never creates a sideways scrollbar.
   overflow-x:hidden here keeps the sticky header working (vertical scroll
   stays on the root). */
body { overflow-x: hidden; }

/* Any dropdown that would overflow the right edge is flipped to open
   right-aligned instead. `.wk-drop-right` is the no-JS fallback for the last
   item ("More"); `.wk-drop--flip` is added at runtime by the nav script to any
   item whose menu would clip the viewport (SEO, Lead Generation on laptops).
   Desktop only — on mobile the panel is a full-width accordion. */
@media (min-width: 1320px) {
  .wk-drop-right > .wk-drop,
  .wk-drop--flip > .wk-drop { left: auto; right: 0; }
  .wk-drop-right > .wk-drop::before,
  .wk-drop--flip > .wk-drop::before { left: auto; right: 26px; }
}

/* ==========================================================================
   v2 POLISH — premium typography, depth, and micro-animation (2026-08-27)
   Later rules; same specificity, so these refine the base look above.
   ========================================================================== */
.wkhf, .wk-top, .wk-nav, .wk-menu, .wk-drop, .wk-cta, .wk-foot {
  font-family: "Poppins","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- top bar: subtle depth + animated brand line --- */
.wk-top { background: linear-gradient(180deg, #0b0c10 0%, #101117 100%); }
.wk-top::before {
  background: linear-gradient(90deg, #FF7A1A, #E11D2A, #FF7A1A);
  background-size: 200% 100%; animation: wk-line 7s linear infinite;
}
@keyframes wk-line { to { background-position: 200% 0; } }
.wk-social a, .wk-top__links a { position: relative; }

/* --- main nav: layered gradient + soft brand glow --- */
.wk-nav {
  background:
    radial-gradient(680px 150px at 14% -40%, rgba(255,122,26,.12), transparent 72%),
    radial-gradient(520px 140px at 88% -40%, rgba(225,29,42,.10), transparent 72%),
    linear-gradient(180deg, #14151b 0%, #0c0d11 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.wk-nav.is-stuck {
  background: rgba(11,12,16,.82);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  border-bottom-color: rgba(255,122,26,.20);
}

/* logo micro-interaction */
.wk-nav__logo { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wk-nav__logo:hover { transform: translateY(-1px) scale(1.02); }
.wk-nav__logo img { filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }

/* nav links: tighter tracking, smoother underline that grows from centre */
.wk-menu > li > a { letter-spacing: .2px; font-weight: 500; }
.wk-menu > li > a::after {
  content: ""; position: absolute; left: 50%; right: auto; bottom: 4px;
  width: 0; height: 2px; background: var(--wk-grad); border-radius: 2px;
  transform: translateX(-50%); transition: width .28s cubic-bezier(.2,.8,.2,1);
  opacity: 1;
}
.wk-menu > li:hover > a::after, .wk-menu > li.is-open > a::after { width: calc(100% - 24px); }
.wk-menu > li > a:hover { background: rgba(255,255,255,.06); }
.wk-menu > li > a .wk-caret { transition: transform .3s cubic-bezier(.2,.8,.2,1), color .2s; }

/* --- CTA: gradient sheen sweep + arrow nudge --- */
.wk-cta {
  position: relative; overflow: hidden; letter-spacing: .3px; font-weight: 600;
  background: linear-gradient(120deg, #FF7A1A 0%, #F04B1E 50%, #E11D2A 100%);
  box-shadow: 0 8px 22px rgba(225,29,42,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.wk-cta::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.wk-cta:hover::after { animation: wk-sheen .85s ease; }
@keyframes wk-sheen { from { left: -130%; } to { left: 150%; } }
.wk-cta i { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.wk-cta:hover i { transform: translateX(3px); }

/* partner badge lift */
.wk-partner img { transition: transform .25s, box-shadow .25s; }
.wk-partner:hover img { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); }

/* --- dropdown: staggered entrance + expert CTA footer --- */
.wk-menu > li:hover > .wk-drop .wk-drop__link { animation: wk-fadeup .34s both cubic-bezier(.2,.8,.2,1); }
.wk-drop__link:nth-child(1){animation-delay:.02s} .wk-drop__link:nth-child(2){animation-delay:.05s}
.wk-drop__link:nth-child(3){animation-delay:.08s} .wk-drop__link:nth-child(4){animation-delay:.11s}
.wk-drop__link:nth-child(5){animation-delay:.14s} .wk-drop__link:nth-child(6){animation-delay:.17s}
.wk-drop__link:nth-child(7){animation-delay:.20s} .wk-drop__link:nth-child(8){animation-delay:.23s}
@keyframes wk-fadeup { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.wk-drop__link:hover i { transform: translateX(2px); }

.wk-drop__cta {
  grid-column: 1 / -1; margin-top: 10px; padding: 12px 6px 2px;
  border-top: 1px solid #eef0f4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.wk-drop__cta span { color: #6a6e7b; font-size: 12.6px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.wk-drop__cta span i { color: var(--wk-crimson); }
.wk-drop__cta a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; background: var(--wk-grad); padding: 8px 15px; border-radius: 9px;
  font-size: 12.6px; font-weight: 600; box-shadow: 0 6px 16px rgba(225,29,42,.26);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.wk-drop__cta a:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(225,29,42,.36); }
.wk-drop__cta a i { transition: transform .2s; }
.wk-drop__cta a:hover i { transform: translateX(3px); }

/* --- mobile drawer: gradient surface + accent header --- */
@media (max-width: 1319px) {
  .wk-menu {
    background: linear-gradient(180deg, #131419 0%, #0b0c10 100%);
  }
  .wk-menu > li.is-open > a {
    background: linear-gradient(90deg, rgba(255,122,26,.16), rgba(225,29,42,.10));
    box-shadow: inset 3px 0 0 var(--wk-orange);
  }
  .wk-drop__cta { display: none; }         /* keep the mobile accordion compact */
  .wk-social a:hover { transform: translateY(-2px); }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wk-top::before, .wk-cta::after, .wk-drop__link { animation: none !important; }
  .wkhf * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   FOOTER v2 — modern, layered, less "wall of text"  (2026-08-27)
   Later rules → these win. Every link/URL in the markup is unchanged; this is
   purely presentation (ambient depth, a stat strip, and card-ified groups).
   ========================================================================== */
.wk-foot {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(255,122,26,.10), transparent 60%),
    radial-gradient(760px 340px at 92% 6%, rgba(225,29,42,.10), transparent 62%),
    linear-gradient(180deg, #0d0e12 0%, #0a0b0e 100%) !important;
}
.wk-foot::before {                 /* faint dotted texture for depth */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wk-foot > * { position: relative; z-index: 1; }

/* --- CTA strip: premium gradient band + eyebrow --- */
.wk-fcta {
  background: linear-gradient(120deg, #1b1130 0%, #241020 55%, #2a0f16 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}
.wk-fcta::before {
  background:
    radial-gradient(620px 220px at 14% 50%, rgba(255,122,26,.30), transparent 70%),
    radial-gradient(620px 240px at 86% 50%, rgba(225,29,42,.26), transparent 70%);
  opacity: 1;
}
.wk-fcta__in { padding: 38px 20px; }
.wk-fcta__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: #ffd7c2;
}
.wk-fcta__eyebrow i { color: var(--wk-orange); }
.wk-fcta__t h3 { font-size: 26px; letter-spacing: .2px; }

/* --- credibility stat strip --- */
.wk-stats { border-top: 1px solid rgba(255,255,255,.07); }
.wk-stats__in {
  max-width: 1280px; margin: 0 auto; padding: 26px 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.wk-stat {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; transition: transform .2s, border-color .2s, background .2s;
}
.wk-stat:hover { transform: translateY(-3px); border-color: rgba(255,122,26,.35); background: rgba(255,255,255,.05); }
.wk-stat > i {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 13px; font-size: 20px; color: #fff; background: var(--wk-grad);
  box-shadow: 0 8px 18px rgba(225,29,42,.30);
}
.wk-stat b { display: block; color: #fff; font-size: 23px; font-weight: 800; line-height: 1.05; }
.wk-stat span { display: block; color: var(--wk-muted); font-size: 12.5px; margin-top: 2px; }

/* --- service directory: group cards + subtle tag chips (kills the flat wall) --- */
.wk-services { background: transparent !important; }
.wk-services__in > h3 {
  position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
  padding-bottom: 14px; font-size: 20px;
}
.wk-services__in > h3::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 3px; background: var(--wk-grad); border-radius: 2px;
}
.wk-sgroup {
  background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 15px 15px 13px; margin-bottom: 20px;
  transition: transform .2s, border-color .2s, background .2s;
}
.wk-sgroup:hover { transform: translateY(-3px); border-color: rgba(255,122,26,.30); background: rgba(255,255,255,.05); }
.wk-sgroup > a.wk-sgroup__h { margin-bottom: 12px; font-size: 14px; }
.wk-sgroup__links { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-sgroup__links a {
  padding: 4px 10px; border-radius: 8px; padding-left: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  color: var(--wk-muted); font-size: 11.6px; line-height: 1.3; white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s;
}
.wk-sgroup__links a:hover { color: #fff; background: var(--wk-grad); border-color: transparent; }

@media (max-width: 575px) {
  .wk-stats__in { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wk-stat { padding: 13px 14px; gap: 11px; }
  .wk-stat > i { width: 42px; height: 42px; font-size: 18px; }
  .wk-stat b { font-size: 20px; }
}
@media (max-width: 380px) {
  .wk-stats__in { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER v2.1 — directory as an even, aligned grid (2026-08-27 fix)
   The masonry `columns` flow let long chips overflow their card and left the
   boxes ragged/unequal. Switch to a flex grid: every box is the SAME width,
   boxes in a row share the SAME height, and long labels wrap INSIDE the box.
   ========================================================================== */
.wk-services__grid {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch;
  columns: auto;               /* cancel the old multi-column flow */
}
.wk-sgroup {
  flex: 0 1 calc(25% - 17px); max-width: calc(25% - 17px);
  width: auto; margin: 0; display: flex; flex-direction: column;
  overflow: hidden;            /* nothing escapes the card */
}
.wk-sgroup__links { align-content: flex-start; }
.wk-sgroup__links a { white-space: normal; }   /* long labels wrap, no overflow */
@media (max-width: 1319px) {
  .wk-sgroup { flex-basis: calc(50% - 11px); max-width: calc(50% - 11px); }
}
@media (max-width: 575px) {
  .wk-sgroup { flex-basis: 100%; max-width: 100%; }
}

/* ==========================================================================
   FOOTER v2.2 — capped directory "+more", tidy bottom strip (2026-08-27)
   ========================================================================== */
/* keep the badge image bounded so it can't blow out the nav row */
.wk-partner img { max-height: 46px; width: auto; }

/* boxes are capped now, so stretch them to equal height per row for a clean,
   uniform grid (every box the same width AND height). */
.wk-services__grid { align-items: stretch; }
.wk-sgroup { justify-content: flex-start; }

/* copyright bar: copyright · inline legal links · back-to-top */
.wk-copy__in { flex-wrap: wrap; gap: 10px 18px; }
.wk-copy__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.wk-copy__links a { position: relative; color: var(--wk-muted); font-size: 12.6px; font-weight: 500; transition: color .18s; }
.wk-copy__links a:hover { color: var(--wk-orange); }
.wk-copy__links a:not(:last-child)::after {
  content: ""; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.28);
}
@media (max-width: 767px) {
  .wk-copy__in { justify-content: center; text-align: center; }
  .wk-copy__links { justify-content: center; }
}

/* the "+N more" chip → routes to the category page for the full list */
.wk-sgroup__more {
  background: transparent !important; color: var(--wk-orange) !important;
  border: 1px dashed rgba(255,122,26,.55) !important; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.wk-sgroup__more i { font-size: 10px; }
.wk-sgroup__more:hover { background: var(--wk-grad) !important; color: #fff !important; border-color: transparent !important; }

/* bottom quick-links strip — read as intentional chips, not plain text */
.wk-quick { background: rgba(255,255,255,.02); }
.wk-quick__in a {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.wk-quick__in a:hover { border-color: transparent; }

/* copyright bar — a touch more finished */
.wk-copy { background: #08090B; }
.wk-copy__in { font-size: 13px; }

/* ==========================================================================
   FOOTER v2.3 — professional CTA band (2026-08-27)
   Replaces the muddy purple/maroon with a clean graphite gradient + a single
   restrained warm glow behind the buttons and a thin brand accent line.
   ========================================================================== */
.wk-fcta {
  position: relative;
  background: linear-gradient(120deg, #12141a 0%, #191c24 55%, #0f1116 100%) !important;
  border-top: 1px solid rgba(255,255,255,.07);
}
.wk-fcta::before {
  background: radial-gradient(560px 220px at 88% 50%, rgba(255,122,26,.16), transparent 72%) !important;
  opacity: 1;
}
.wk-fcta::after {                 /* thin brand accent line along the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--wk-grad); opacity: .8;
}
.wk-fcta__eyebrow { color: #ffb488; }

/* ==========================================================================
   HEADER v3 — quote button removed; Google Partner badge is the right-side
   element, framed as a clean white pill (2026-08-27)
   ========================================================================== */
.wk-partner {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 10px; padding: 5px 11px;
  box-shadow: 0 6px 16px rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
}
.wk-partner img { height: 34px; width: auto; max-height: none; border-radius: 0; }
.wk-partner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.42); }
.wk-nav.is-stuck .wk-partner img { height: 30px; }

/* the badge fits without the CTA now, so show it at every width — desktop,
   tablet and mobile (it is compacted on phones via the max-width:767px rule). */
@media (min-width: 1320px) { .wk-partner { display: inline-flex !important; } }
@media (max-width: 1319px) { .wk-partner { display: inline-flex !important; } }