/* ============================================================
   Wakefield - Enhancement Layer
   Load AFTER styles.css on every page.
   Adds: motion system, upgraded nav/drawer, responsive guards,
   focus states, scroll progress. Removes nothing.
   ============================================================ */

:root{
  --wf-navy:#04121f;
  --wf-navy-2:#071827;
  --wf-ink:#081c2c;
  --wf-blue:#1b7cff;
  --wf-cyan:#31bde8;
  --wf-mint:#5cd6f5;
  --wf-paper:#f6f9fc;
  --wf-line:rgba(8,28,44,.10);
  --wf-grad:linear-gradient(135deg,#1b7cff 0%,#31bde8 100%);
  --wf-grad-soft:linear-gradient(135deg,#3f93ff 0%,#5cd6f5 100%);
  --wf-shadow-sm:0 6px 18px rgba(8,40,70,.07);
  --wf-shadow:0 18px 46px rgba(8,40,70,.13);
  --wf-shadow-lg:0 34px 80px rgba(6,32,60,.22);
  --wf-ease:cubic-bezier(.22,.75,.2,1);
  --wf-ease-out:cubic-bezier(.16,1,.3,1);
  /* white tick punched out of a gradient dot; used by check lists */
  --wf-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- global guards ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;overflow-x:clip}
img,svg,video,canvas{max-width:100%}
*{-webkit-tap-highlight-color:transparent}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--wf-cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- scroll progress bar ---------- */
.wf-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:2000;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--wf-grad);
  box-shadow:0 0 14px rgba(49,189,232,.55);
  pointer-events:none;
}

/* ============================================================
   MOTION SYSTEM
   data-anim="up|down|left|right|fade|zoom|clip|blur"
   data-delay="120"            -> ms
   data-stagger="80" on parent -> animates children in sequence
   ============================================================ */
[data-anim]{
  opacity:0;
  will-change:transform,opacity;
  transition:
    opacity .85s var(--wf-ease-out),
    transform .95s var(--wf-ease-out),
    filter .85s var(--wf-ease-out),
    clip-path .95s var(--wf-ease-out);
  transition-delay:var(--wf-d,0ms);
}
[data-anim="up"]{transform:translate3d(0,38px,0)}
[data-anim="down"]{transform:translate3d(0,-32px,0)}
[data-anim="left"]{transform:translate3d(-44px,0,0)}
[data-anim="right"]{transform:translate3d(44px,0,0)}
[data-anim="zoom"]{transform:scale(.93)}
[data-anim="blur"]{filter:blur(14px);transform:translate3d(0,20px,0)}
[data-anim="clip"]{clip-path:inset(0 0 100% 0);transform:translate3d(0,26px,0)}
[data-anim="fade"]{transform:none}

[data-anim].wf-in{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}

/* legacy .reveal on inner pages keeps working */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--wf-ease-out),transform .8s var(--wf-ease-out)}
.reveal.in-view{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim],[data-anim].wf-in{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .wf-progress{display:none}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   NAVIGATION - glass bar + real mobile drawer
   ============================================================ */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:18px clamp(18px,3vw,48px);
  background:linear-gradient(180deg,rgba(4,18,31,.86),rgba(4,18,31,.36));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  will-change:transform;
  transition:background .45s var(--wf-ease),padding .45s var(--wf-ease),
             border-color .45s var(--wf-ease),box-shadow .45s var(--wf-ease),
             transform .45s var(--wf-ease);
}
.site-nav.scrolled,
.is-home .site-nav.scrolled{
  padding:12px clamp(18px,3vw,48px);
  background:rgba(4,16,26,.95);
  border-bottom-color:rgba(49,189,232,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.30);
}
/* hide while scrolling down, return on scroll up */
.site-nav.wf-hide{transform:translateY(-108%)}

.site-nav .brand{display:flex;align-items:center;gap:14px;flex:none;min-width:0}
.site-nav .brand-mark-chip img{transition:transform .5s var(--wf-ease)}
.site-nav .brand:hover .brand-mark-chip img{transform:scale(1.07) rotate(-3deg)}

.nav-links>a:not(.nav-cta),
.nav-dropdown-toggle{position:relative}
.nav-links>a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;
  background:var(--wf-grad);border-radius:2px;
  transition:right .4s var(--wf-ease);
}
.nav-links>a:not(.nav-cta):hover::after,
.nav-links>a.active:not(.nav-cta)::after{right:0}

.nav-dropdown-toggle .chevron{transition:transform .35s var(--wf-ease)}
.nav-dropdown.open .nav-dropdown-toggle .chevron{transform:rotate(180deg)}

/* burger -> X */
.nav-toggle{
  display:none;position:relative;z-index:1400;
  width:46px;height:46px;flex:none;
  border:1px solid rgba(255,255,255,.22);border-radius:12px;
  background:rgba(255,255,255,.06);cursor:pointer;padding:0;
}
.nav-toggle span{
  display:block;width:20px;height:2px;margin:4px auto;border-radius:2px;background:#fff;
  transition:transform .38s var(--wf-ease),opacity .25s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.wf-nav-scrim{
  position:fixed;inset:0;z-index:1150;
  background:rgba(3,12,20,.62);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.wf-nav-scrim.show{opacity:1;visibility:visible}

@media (max-width:1180px){
  .nav-toggle{display:block}

  .nav-links{
    position:fixed;top:0;right:0;bottom:0;z-index:1300;
    width:min(88vw,380px);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;
    padding:96px 22px 48px;
    background:linear-gradient(180deg,#061a2b 0%,#04121f 100%);
    border-left:1px solid rgba(49,189,232,.2);
    box-shadow:-30px 0 70px rgba(0,0,0,.45);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translateX(102%);
    transition:transform .5s var(--wf-ease-out);
  }
  .nav-links.open{transform:translateX(0)}

  .nav-links > *{opacity:0;transform:translateX(26px);transition:opacity .5s ease,transform .5s var(--wf-ease-out)}
  .nav-links.open > *{opacity:1;transform:none}
  .nav-links.open > *:nth-child(1){transition-delay:.10s}
  .nav-links.open > *:nth-child(2){transition-delay:.16s}
  .nav-links.open > *:nth-child(3){transition-delay:.22s}
  .nav-links.open > *:nth-child(4){transition-delay:.28s}
  .nav-links.open > *:nth-child(5){transition-delay:.34s}
  .nav-links.open > *:nth-child(6){transition-delay:.40s}
  .nav-links.open > *:nth-child(7){transition-delay:.46s}

  .nav-links > a:not(.nav-cta),
  .is-home .site-nav .nav-links > a:not(.nav-cta){
    display:flex;align-items:center;
    min-height:56px;padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#eaf4fb!important;font-size:16px;letter-spacing:.04em;
  }
  .nav-links > a:not(.nav-cta)::after{display:none}
  .is-home .site-nav .nav-links > a.active:not(.nav-cta){color:var(--wf-mint)!important}

  /* dropdowns become accordions */
  .nav-dropdown{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-dropdown-toggle,
  .is-home .site-nav .nav-dropdown-toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:56px;padding:0 12px;
    background:none;border:0;cursor:pointer;
    color:#eaf4fb!important;font-size:16px;letter-spacing:.04em;text-align:left;
  }
  .nav-dropdown-menu{
    position:static!important;
    display:block!important;
    width:100%;margin:0;padding:0 0 0 12px;
    opacity:1!important;visibility:visible!important;transform:none!important;
    background:transparent;border:0;box-shadow:none;
    max-height:0;overflow:hidden;
    transition:max-height .5s var(--wf-ease-out),padding .4s ease;
  }
  .nav-dropdown.open .nav-dropdown-menu{max-height:840px;padding-bottom:14px}
  .nav-dropdown-menu a{
    display:flex;align-items:center;gap:12px;
    min-height:50px;padding:8px 10px;
    border-left:1px solid rgba(49,189,232,.28);
    color:rgba(233,244,251,.82)!important;font-size:14px;
  }
  .nav-dropdown-menu a small{display:block;color:#7f9db1;font-size:11px}
  .nav-dropdown-menu .icon{width:18px;height:18px;flex:none;color:var(--wf-cyan)}
  .nav-dropdown-menu a.nav-dropdown-all{
    justify-content:center;border-left:0;
    color:var(--wf-mint)!important;font-weight:700;font-size:13px;
    border-top:1px solid rgba(255,255,255,.12);margin-top:6px;
  }

  .nav-cta,.is-home .site-nav .nav-cta{width:100%;justify-content:center;margin-top:18px}
}

body.wf-lock{overflow:hidden}

/* ============================================================
   FOOTER polish
   ============================================================ */
.footer .footer-social a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  transition:transform .35s var(--wf-ease),background .35s ease,border-color .35s ease;
}
.footer .footer-social a:hover{transform:translateY(-4px);background:var(--wf-grad);border-color:transparent}
.footer .footer-social svg{width:18px;height:18px}
.footer-col a{position:relative;display:inline-block;transition:transform .3s var(--wf-ease),color .3s ease}
.footer-col a:hover{transform:translateX(5px);color:var(--wf-mint)}
.to-top{transition:transform .35s var(--wf-ease)}
.to-top:hover{transform:translateY(-4px)}

/* ============================================================
   Floating WhatsApp action (all pages)
   ============================================================ */
.wf-float{
  position:fixed;right:clamp(14px,3vw,28px);bottom:calc(clamp(14px,3vw,28px) + 70px);z-index:1100;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;
  box-shadow:0 14px 34px rgba(18,140,126,.42);
  transform:translateY(90px) scale(.7);opacity:0;
  transition:transform .55s var(--wf-ease-out),opacity .4s ease,box-shadow .3s ease;
}
.wf-float.show{transform:none;opacity:1}
.wf-float:hover{box-shadow:0 18px 44px rgba(18,140,126,.6)}
.wf-float svg{width:27px;height:27px}
.wf-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:wfPulse 2.6s ease-out infinite;
}
@keyframes wfPulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.65);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wf-float::after{animation:none}}