/* SITE NAV + FOOTER v1 — the homepage mock-up's frosted pill + mega-menu + phone menu (and, below, its footer), shared by every page
   (Adam 2 Oct 2026: "I really do like the navbar menu on the mock-up… should carry through to the rest
   of the live website"). SOURCE: work/home-mockup/index.html .nav rules, copied as-is.
   The header also carries .heronav so tpa-site.js keeps reporting nav clicks as location "nav";
   Every rule is scoped under #nav so it beats the old .heronav rules AND the retired .nav pill still
   defined in trade-b7.css / seo-pages-b5.css. */
/* The nav's own face: the same variable DM Sans file the pages already load, under a private name so the
   nav gets true 600 everywhere without changing any page text (most pages declare only 400/500/700). */
@font-face{font-family:"DM Sans Nav";src:url(/fonts/dm-sans-v17-latin.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
#nav.nav{position:fixed;top:0;left:0;right:0;z-index:9990;display:flex;justify-content:center;align-items:normal;gap:0;padding:24px 12px 0;pointer-events:none;
  margin:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:"DM Sans Nav","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
#nav.nav *,#nav.nav *::before,#nav.nav *::after{box-sizing:border-box}
#nav .nav__pill{position:relative;pointer-events:auto;display:flex;align-items:center;gap:0 5px;padding:10px 10px 10px 19px;border-radius:19px;
  background:rgba(18,20,23,.62);-webkit-backdrop-filter:blur(15px) saturate(1.1);backdrop-filter:blur(15px) saturate(1.1);
  border:1px solid rgba(242,239,231,.14);box-shadow:0 18px 40px -26px rgba(11,12,14,.6);color:#F5F0E8}
#nav .nav__logo{width:110px;margin-right:14px;flex:none;display:block;line-height:0}
#nav .nav__logo img{width:110px;height:auto;display:block}
#nav .nav__links{display:flex;align-items:center;gap:0;margin:0;padding:0;background:none}
#nav .nav__links a{display:block;padding:11px 14px;border-radius:10px;font:600 17px/22px "DM Sans Nav","DM Sans",system-ui,sans-serif;text-decoration:none;color:#F5F0E8;letter-spacing:normal;text-shadow:none}
#nav .nav__links a:hover,#nav .nav__trig:hover{background:rgba(255,255,255,.08)}
#nav .nav__trig{display:flex;align-items:center;gap:6px;margin:0;padding:11px 14px;border-radius:10px;border:0;background:none;cursor:pointer;font:600 17px/22px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:#F5F0E8;letter-spacing:normal;text-transform:none}
#nav .nav__trig svg{width:12px;height:12px;transition:transform .2s ease}
#nav .nav__trig[aria-expanded="true"] svg{transform:rotate(180deg)}
#nav .nav__sub{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);border-radius:19px;padding:18px;display:none;background-color:rgba(18,20,23,.96)!important;
  background:rgba(18,20,23,.86);-webkit-backdrop-filter:blur(15px) saturate(1.1);backdrop-filter:blur(15px) saturate(1.1);border:1px solid rgba(242,239,231,.14)}
#nav .nav__sub.is-open{display:block}
#nav .nav__sub p{margin:0 0 12px;font:800 12px/1 "DM Sans Nav","DM Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,231,.6)}
#nav .nav__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#nav .nav__card{display:block;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);text-decoration:none;color:#F5F0E8}
#nav .nav__card:hover{background:rgba(255,255,255,.1)}
#nav .nav__card b{display:block;font:700 15px/20px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:#F5F0E8}
#nav .nav__card span{display:block;margin-top:3px;font:400 13px/18px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:rgba(242,239,231,.7)}
#nav .nav__cta{margin-left:6px;background:#FFD200;color:#16181B;border-radius:12px;padding:12px 22px;font:700 16px/21px "DM Sans Nav","DM Sans",system-ui,sans-serif;text-decoration:none;white-space:nowrap}
#nav .nav__cta:hover{color:#16181B}
#nav .nav__burger{display:none;width:auto;height:auto;margin:0 0 0 auto;background:none;border:0;border-radius:0;padding:8px;cursor:pointer;box-shadow:none}
#nav .nav__burger span{display:block;width:24px;height:2px;background:#F5F0E8;margin:5px 0;border-radius:2px}
#nav .nav__menu{display:none}
#nav.nav a:focus-visible,#nav.nav button:focus-visible{outline:3px solid #FFD200;outline-offset:3px}

@media (max-width:1240px){
  #nav .nav__links a,#nav .nav__trig{padding:11px 9px;font-size:16px}
  #nav .nav__logo{margin-right:6px}
}
@media (max-width:992px){
  #nav.nav{padding:12px 12px 0}
  #nav .nav__pill{width:100%;padding:8px 8px 8px 16px}
  #nav .nav__links,#nav .nav__cta,#nav .nav__sub{display:none}
  #nav .nav__burger{display:block}
  #nav.nav.is-open .nav__menu{display:flex;flex-direction:column;gap:4px;position:absolute;top:calc(100% + 8px);left:12px;right:12px;pointer-events:auto;padding:14px;border-radius:19px;
    background:rgba(18,20,23,.86);-webkit-backdrop-filter:blur(15px) saturate(1.1);backdrop-filter:blur(15px) saturate(1.1);border:1px solid rgba(242,239,231,.14)}
  #nav .nav__menu a{padding:12px 10px;border-radius:10px;font:600 18px/22px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:#F5F0E8;text-decoration:none}
  #nav .nav__menu .nav__cta{display:block;text-align:center;margin:8px 0 0;color:#16181B}
  /* accordions: The app / For your trade open their sub-pages underneath (same entries as the desktop mega-menu) */
  #nav.nav.is-open .nav__menu{max-height:calc(100svh - 100px);overflow-y:auto;overscroll-behavior:contain}
  #nav .nav__acc{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:12px 10px;border:0;border-radius:10px;background:none;cursor:pointer;
    font:600 18px/22px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:#F5F0E8;text-align:left;letter-spacing:normal;text-transform:none}
  #nav .nav__acc svg{width:14px;height:14px;flex:none;transition:transform .2s ease}
  #nav .nav__acc[aria-expanded="true"] svg{transform:rotate(180deg)}
  #nav .nav__acc[aria-expanded="true"]{background:rgba(255,255,255,.06)}
  #nav .nav__accp{display:flex;flex-direction:column;margin:2px 0 6px;padding-left:12px;border-left:1px solid rgba(242,239,231,.14);margin-left:10px}
  #nav .nav__accp[hidden]{display:none}
  #nav .nav__accp a{padding:10px 10px;font:500 16px/20px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:rgba(242,239,231,.85)}
}

/* SITE FOOTER v1 — the homepage mock-up's footer (Adam 2 Oct 2026: "I like the footer that you made"),
   carrying everything the old .sfoot had (links, legal line, company number, socials, sitemap) plus the
   free-trial button. One footer on every page (Adam's footer rule). Scoped under #sitefoot so older page
   CSS can't reach it. */
#sitefoot{display:block;margin:0;background:#0B0D0C;color:#F2EFE7;padding:70px 0 34px;border:0;font-size:16px;line-height:24px;letter-spacing:normal;
  font-family:"DM Sans Nav","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
#sitefoot *,#sitefoot *::before,#sitefoot *::after{box-sizing:border-box}
#sitefoot .foot__in{max-width:1232px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px}
#sitefoot .foot__home{display:block;width:max-content;line-height:0;font-size:0;color:inherit;text-decoration:none}
#sitefoot .foot__home img{width:130px;height:auto;margin:0 0 22px;display:block}
#sitefoot .foot__brand p{margin:0;font:400 14px/22px "DM Sans Nav","DM Sans",system-ui,sans-serif;max-width:300px;color:#F2EFE7;opacity:.8}
#sitefoot .foot__cta{display:inline-block;margin-top:24px;background:#FFD200;color:#16181B;border-radius:12px;padding:12px 22px;
  font:700 16px/21px "DM Sans Nav","DM Sans",system-ui,sans-serif;text-decoration:none;white-space:nowrap}
#sitefoot .foot__cta:hover{color:#16181B;background:#FFDB33}
#sitefoot .foot__panel{border:1px solid rgba(242,239,231,.18);border-radius:14px;padding:28px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
#sitefoot .foot__h{margin:0 0 12px;font:800 13px/1 "DM Sans Nav","DM Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#F2EFE7}
#sitefoot .foot__panel a{display:block;font:400 14px/27px "DM Sans Nav","DM Sans",system-ui,sans-serif;text-decoration:none;color:#F2EFE7;opacity:.8}
#sitefoot .foot__panel a:hover,#sitefoot .foot__legal a:hover{opacity:1;text-decoration:underline;text-underline-offset:2px}
#sitefoot .foot__legal{max-width:1232px;margin:46px auto 0;padding:18px 24px 0;border-top:1px solid rgba(242,239,231,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  font:400 12px/18px "DM Sans Nav","DM Sans",system-ui,sans-serif;color:#F2EFE7;opacity:.6}
#sitefoot .foot__legal a{color:inherit;text-decoration:none}
#sitefoot a:focus-visible{outline:3px solid #FFD200;outline-offset:3px;opacity:1}
@media (max-width:992px){ #sitefoot .foot__in{grid-template-columns:1fr} }
@media (max-width:600px){
  #sitefoot .foot__panel{grid-template-columns:1fr 1fr;padding:24px 22px}
  #sitefoot .foot__legal{flex-direction:column}
}