/* === wc-nav v4 === */
:root{
  --wc-nav-h: 86px;
  --wc-nav-h-sm: 68px;
  --wc-max: 1280px;
  --wc-pad: 20px;
  --wc-gap: 36px;
  --wc-ink: #0f172a;
  --wc-line:#e5e7eb;
  --wc-accent:#0ea5e9;
  --wc-hover:#f7fafc;
}

body.has-fixed-nav{ padding-top: var(--wc-nav-h); }
@media (max-width:1024px){ body.has-fixed-nav{ padding-top: var(--wc-nav-h-sm);} }

.wc-nav{position:fixed; inset:0 0 auto 0; height:var(--wc-nav-h); background:#fff; border-bottom:1px solid var(--wc-line); z-index:1000; transition:box-shadow .2s;}
@media (max-width:1024px){ .wc-nav{ height:var(--wc-nav-h-sm);} }
.wc-nav--scrolled{ box-shadow:0 10px 28px rgba(0,0,0,.06); }

.wc-nav *{ box-sizing:border-box; }
.wc-nav a{ text-decoration:none !important; color:var(--wc-ink); }
.wc-nav .wc-nav__list, .wc-nav .wc-drawer__list{ list-style:none !important; margin:0 !important; padding:0 !important; }

.wc-nav__wrap{
  max-width:var(--wc-max); height:100%;
  margin:0 auto; padding:0 var(--wc-pad);
  display:grid; align-items:center; gap:12px;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand primary call";
}

/* brand */
.wc-nav__brand{ grid-area: brand; display:inline-flex; align-items:center; justify-self:start; }
.wc-logo{ display:block; height:5.2rem; width:auto; }
@media (max-width:1024px){ .wc-logo{ height:4.5rem; } }

/* desktop menu */
.wc-nav__primary{ grid-area: primary; justify-self:center; }
.wc-nav__list{ position:relative; display:flex; gap:var(--wc-gap); }
.wc-nav__link{ position:relative; padding:14px 0; font:600 16px/1 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; }
.wc-nav__link:hover, .wc-nav__link.is-active{ color:var(--wc-accent); }

/* magic underline */
.wc-nav__magic{ position:absolute; bottom:-16px; left:0; width:22px; height:2px; background:var(--wc-accent); border-radius:2px; transition:left .22s,width .22s; }

/* call */
.wc-call{
  grid-area: call;
  justify-self:end;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px; color:#0a0f1a;
  background:#f2f6fb; border:1px solid #e6edf5; box-shadow:0 2px 6px rgba(2,6,23,.06);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.wc-call:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(2,6,23,.12); background:#eef5fc; }
.wc-call__pulse{ position:absolute; inset:0; border-radius:999px; border:2px solid rgba(14,165,233,.45); transform:scale(.9); opacity:0; animation:wc-pulse 2s infinite; pointer-events:none; }
@keyframes wc-pulse{ 0%{transform:scale(.9);opacity:0} 40%{transform:scale(1.2);opacity:.45} 100%{transform:scale(1.5);opacity:0} }

/* burger (SVG with 3 lines) */
.wc-nav__toggle{
  grid-area: toggle;
  justify-self:end;
  display:none; width:46px; height:46px; border-radius:999px; background:#f8fafc; border:1px solid #e6edf5;
  align-items:center; justify-content:center; cursor:pointer; transition: transform .12s, box-shadow .12s, background .12s;
}
.wc-nav__toggle:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(2,6,23,.12); background:#f1f5f9; }
.wc-burger line{ stroke:#0f172a; stroke-width:2; stroke-linecap:round; transition: transform .22s, opacity .22s; transform-origin: 12px 12px; }
.wc-nav__toggle.is-open .l1{ transform: translateY(5px) rotate(45deg); }
.wc-nav__toggle.is-open .l2{ opacity:0; }
.wc-nav__toggle.is-open .l3{ transform: translateY(-5px) rotate(-45deg); }

/* mobile grid: [call | brand | toggle] */
@media (max-width:1024px){
  .wc-nav__wrap{
    grid-template-columns: 46px 1fr 46px;
    grid-template-areas: "call brand toggle";
  }
  .wc-nav__primary{ display:none; }
  .wc-nav__brand{ justify-self:center; }
  .wc-nav__toggle{ display:inline-flex; }
  .wc-call{ justify-self:start; }
}

/* overlay with blur */
.wc-nav__overlay{ position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter:saturate(150%) blur(2px); opacity:0; visibility:hidden; transition:opacity .18s,visibility .18s step-end; z-index:999; }
.wc-nav__overlay.is-open{ opacity:1; visibility:visible; transition:opacity .18s; }

/* drawer */
.wc-nav__drawer{ position:fixed; top:0; bottom:0; right:-100%; width:min(88vw,360px); background:#fff; box-shadow:-16px 0 32px rgba(0,0,0,.12); transition:right .22s; z-index:1000; display:flex; flex-direction:column; }
.wc-nav__drawer.is-open{ right:0; }
.wc-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--wc-line); }
.wc-drawer__logo{ height:36px; width:auto; display:block; }   /* prevent stretch */
.wc-drawer__close{ font-size:22px; background:transparent; border:0; cursor:pointer; color:#0f172a; }

.wc-drawer__list li{ border-bottom:1px solid #f3f4f6; }
.wc-drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px; font-weight:600; color:var(--wc-ink);
}
.wc-drawer__link:hover{ background:var(--wc-hover); }
.wc-drawer__link.is-active{ color:var(--wc-accent); }
.wc-drawer__link--call{ color:var(--wc-accent); font-weight:700; }

.wc-rowchev{ opacity:.6; }

/* focus */
.wc-nav :is(.wc-nav__link,.wc-drawer__link,.wc-drawer__close,.wc-call,.wc-nav__toggle):focus-visible{
  outline:2px solid var(--wc-accent); outline-offset:3px; border-radius:8px;
}