/* AXIO — the one header every marketing page shares: the beam, the skip link, the announcement and the
   nav with its "What we do" menu and the phone menu. The markup is the <!-- HEADER --> block, the same on
   index.html and every feature page (scripts/check-site.mjs fails the build if a copy differs); the
   behaviour is in site/landing.js. Tokens come from each page's own token blocks. */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--accent-ink);color:var(--on-accent);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* The one piece of purely decorative colour every screen allows: a 3px beam pinned to the top edge. */
.beam{position:fixed;top:0;left:0;right:0;height:3px;background:var(--beam);z-index:80;pointer-events:none}
/* ---------- announcement ---------- */
.annc{min-height:34px;display:flex;align-items:center;justify-content:center;padding:8px 20px;background:var(--paper);border-bottom:1px solid rgba(66,133,244,.22);font-size:12px;line-height:1.45;text-align:center;letter-spacing:.015em}
.annc a{color:var(--accent-ink);text-decoration:none;font-weight:500}
.annc a:hover{text-decoration:underline}
.annc b{font-weight:600}
.annc-short{display:none}
@media(max-width:600px){.annc-long{display:none}.annc-short{display:inline}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-ground);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px clamp(20px,4vw,56px);max-width:1380px;margin:0 auto}
/* The primary wordmark: italic AXIO offset in blue, with a tracked INTEL kicker. Text-only by design. */
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);line-height:1}
.brand:hover{text-decoration:none}
.brand-mark{font-family:var(--wordmark);font-weight:900;font-style:italic;font-size:24px;line-height:1;letter-spacing:-.05em;color:var(--wordmark-ink);text-shadow:1.5px 1.5px 0 var(--axio-blue)}
.brand-sub{font-family:var(--wordmark);font-weight:800;font-size:18px;line-height:1;letter-spacing:.02em;color:var(--axio-blue);padding-top:2px}
.nav-links{display:flex;gap:22px;font-size:15px;flex-wrap:wrap;justify-content:center}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-tools{display:flex;align-items:center;gap:10px}
.nav-tools .btn{padding:9px 18px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper);cursor:pointer;place-items:center;padding:0;flex:none}
.burger span{display:grid;gap:5px}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}
.mobile-menu{border-top:1px solid var(--line);padding:8px clamp(20px,4vw,56px) 20px;display:grid;animation:fadeSwap .2s ease both}
.mobile-menu a{padding:14px 2px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu a.btn{margin-top:16px;padding:13px 18px;font-size:15px;border-bottom:0}
.nav-cta{white-space:nowrap}
/* "What we do": opens on hover, click and keyboard focus. Until the script marks it .js, CSS alone
   opens it on hover and focus, so the menu still works on a page whose script never ran. */
/* Static, so the open panel is placed against the whole sticky nav rather than the button: it
   spans the page under the header with the services side by side (three labelled columns, .cols). */
.nav-dd{position:static}
.nav-dd-btn,.mm-dd-btn{font:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.nav-dd-btn{color:var(--muted);transition:color .18s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{color:var(--ink)}
.chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
[aria-expanded="true"]>.chev{transform:translateY(1px) rotate(-135deg)}
.nav-dd-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0 auto;width:min(1180px,calc(100vw - 32px));grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding:10px;gap:6px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-float);z-index:60;animation:fadeSwap .18s ease both}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px}
.nav-dd.open .nav-dd-panel,.nav-dd:not(.js):hover .nav-dd-panel,.nav-dd:not(.js):focus-within .nav-dd-panel{display:grid}
.nav-links .nav-dd-panel a{display:grid;align-content:start;gap:6px;height:100%;padding:14px 16px;border-radius:calc(var(--card-radius) - 8px);line-height:1.5}
.nav-links .nav-dd-panel a:hover,.nav-links .nav-dd-panel a:focus-visible{background:var(--fill-2)}
.nav-dd-panel b,.mm-dd b{color:var(--ink);font-size:15px;font-weight:700}
.nav-dd-panel span,.mm-dd span{color:var(--muted);font-size:13.5px}
/* Three labelled columns, one per group of the landing page's "What we do" section (Your reviews,
   Your listing, Your competitors), so the menu, the section and the footer read as one list. */
.nav-dd-panel.cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px}
.nav-dd-col{display:grid;align-content:start;gap:2px;min-width:0;padding:0 4px}
.nav-dd-col+.nav-dd-col{border-left:1px solid var(--line);padding-left:10px}
.nav-links .nav-dd-panel.cols a{height:auto;padding:11px 14px}
.nav-dd-k,.mm-dd-k{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--accent-ink)}
.nav-dd-k{padding:8px 14px 6px}
.mm-dd-k{padding:14px 2px 2px}
.mm-dd-k:first-child{padding-top:8px}
.mm-dd-btn{justify-content:space-between;width:100%;padding:14px 2px;font-size:17px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);text-align:left}
.mm-dd{display:grid;padding:4px 0 4px 14px;border-bottom:1px solid var(--line)}
.mobile-menu .mm-dd a{display:grid;gap:2px;padding:10px 2px;font-weight:400;line-height:1.5;border-bottom:0}
.mobile-menu .mm-dd b{font-size:16px;font-weight:600}
.nav-cta .cta-short{display:none}
@media(max-width:900px){.nav-links,.nav-login{display:none}.burger{display:grid}}
/* on a phone the nav keeps the wordmark, the theme switch, the button and the menu: the button's label shortens rather than wrap */
@media(max-width:600px){.nav-tools{gap:8px}.nav-tools .nav-cta{padding:9px 13px;font-size:13.5px}.nav-cta .cta-long{display:none}.nav-cta .cta-short{display:inline}}

/* Where you are: the current page's own entry in the menus (landing.js marks it aria-current). */
.nav-dd-btn.here{color:var(--ink)}
.nav-dd-btn.here::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-ink);margin-left:-2px}
.nav-links .nav-dd-panel a[aria-current="page"]{background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue-line)}
.nav-dd-panel a[aria-current="page"] b,.mm-dd a[aria-current="page"] b{color:var(--accent-ink)}
.nav-links>a[aria-current="page"]{color:var(--ink)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mobile-menu,.nav-dd-panel{animation:none}}