/* assets/nav.css — the shared header, and only the header.
 *
 * Kept out of page.css on purpose. Seven pages (about, terms, privacy, refund,
 * the demo form, the calculator and the Review Service page) carry their own
 * complete stylesheets, and pulling all of page.css into them to get a nav
 * would have restyled the page underneath it. This file styles the header and
 * touches nothing else, apart from the body padding the fixed header needs.
 *
 * Loaded by partials/site_nav.php itself, once per page.
 */
/* ── nav: ONE header for every page ──────────────────────────────────────
   Four different headers existed before this, and seven pages had none at all,
   so a visitor who landed on the refund policy could not get back to anything.
   Markup lives in partials/site_nav.php; these are its only styles. */
/* Six pages bring their own reset, or none. State ours so the header is the
   same height wherever it is dropped. */
.topbar,.topbar *,.nav,.nav *,.drawer,.drawer *{box-sizing:border-box}
.nav ul{list-style:none;margin:0;padding:0}
.nav img,.nav svg{display:block}
.topbar{background:linear-gradient(90deg,#0b6b4f,#0b9a76);color:#fff;font-size:13px;line-height:1.4;font-family:'Inter',system-ui,sans-serif}
.topbar a{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:9px 20px;color:#fff}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#9ff5cf;display:inline-block}
.topbar .u{text-decoration:underline;font-weight:600}
@media(max-width:560px){.topbar{font-size:12px}.topbar a{gap:8px;padding:8px 12px}}

.nav{background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  border-bottom:1px solid #e5e9f0;position:sticky;top:0;z-index:102}
.nav-in{max-width:1240px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;line-height:1.4;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:18px;color:#0d1220;text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,#f2a93b,#1a8f74);display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.brand-mark svg{width:22px;height:22px}
.nav-links{display:flex;gap:2px;align-items:center;list-style:none}
.nav-links>li{position:relative}
.topbar a,.nav a,.drawer a{text-decoration:none}
.nav-links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;
  color:#434c5f;padding:8px 12px;border-radius:8px;transition:.15s;text-decoration:none;
  font-family:'Inter',system-ui,sans-serif;letter-spacing:0}
.nav-links a:hover,.nav-links a.on{color:#0d1220;background:#eef1f7}
.nav-links a.nav-free{color:#0a7d55;font-weight:600}
.nav-links a.nav-free:before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:#0a7d55}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,sans-serif;font-size:13.5px;font-weight:700;padding:9px 16px;
  border-radius:9px;text-decoration:none;white-space:nowrap;border:1px solid transparent;
  cursor:pointer;line-height:1.2}
.nav .nav-cta .btn-ghost{background:#fff;color:#0d1220;border:1px solid #e5e9f0}
.nav .nav-cta .btn-ghost:hover{background:#eef1f7}
.nav .nav-cta .btn-primary{background:#dc4f16;color:#fff;border-color:#dc4f16}
.nav .nav-cta .btn-primary:hover{background:#ff6a2b;border-color:#ff6a2b}

/* dropdowns */
.nav-links li.has-menu .caret{transition:transform .18s}
.nav-links li.has-menu:hover>a,.nav-links li.has-menu:focus-within>a{color:#0d1220;background:#eef1f7}
.nav-links li.has-menu:hover .caret,.nav-links li.has-menu:focus-within .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid #e5e9f0;
  border-radius:16px;box-shadow:0 30px 70px rgba(16,24,40,.13);padding:20px;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:60}
/* bridges the gap so the pointer never leaves the menu on the way down */
.submenu:before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-links li.has-menu:hover .submenu,
.nav-links li.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sm-grid{display:grid;gap:6px 22px}
.sm-services{grid-template-columns:repeat(3,minmax(210px,1fr))}
.sm-tools{grid-template-columns:repeat(3,minmax(200px,1fr))}
.sm-h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#8992a5;padding:0 10px 8px}
.submenu a{display:block;padding:9px 10px;border-radius:9px;transition:background .14s}
.submenu a:hover{background:#f7f8fb}
.submenu a b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;
  font-weight:600;color:#0d1220;margin-bottom:2px}
.submenu a span{display:block;font-size:12px;color:#8992a5;line-height:1.4}
.sm-all{display:block;margin-top:14px;padding-top:14px;border-top:1px solid #eef1f6;
  font-size:13px;font-weight:600;color:var(--orange)}
.sm-all:hover{text-decoration:underline}
@media(max-width:1080px){.submenu{display:none}}

/* burger + drawer */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:#0d1220;border-radius:2px}
.drawer-back{position:fixed;inset:0;background:rgba(8,11,20,.5);opacity:0;visibility:hidden;
  transition:.25s;z-index:110}
.drawer-back.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);background:#fff;
  z-index:111;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding:22px 20px 34px;overflow-y:auto}
.drawer.open{transform:none}
.drawer-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;
  color:#5a6478;padding:6px}
.drawer nav{clear:both;display:flex;flex-direction:column;gap:2px}
.drawer nav a{font-size:15.5px;color:#434c5f;padding:12px 6px;border-bottom:1px solid #eef1f6}
.drawer nav a:hover{color:#0d1220}
.drawer nav a.dfree{color:#0a7d55;font-weight:700}
.drawer nav a.db{margin-top:16px;background:var(--orange);color:#fff;text-align:center;
  border-radius:10px;font-weight:700;border:none;padding:14px}
.drawer nav .dgrp{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#8992a5;padding:18px 6px 7px}
@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:560px){.nav-cta .btn-ghost,.nav-cta .btn-primary{display:none}}

/* No body padding: the header is in normal flow now, so it reserves its own
   space and cannot cover anything. */