/* Site nav for the guides, matching the smartdeck.online header (SiteNav.tsx, 23 Oct 2026):
   white bar, 80px, logo left, Home, Services (two-column mega menu), Portfolio, Pricing, Guides, About, Contact,
   Book a call. Colours are the main site's, fixed, so the bar stays white in dark mode like the main site.
   Markup is injected into every page by seo/build_nav.py; behaviour lives in nav.js. */
.snav{
  --sn-primary:#305d7f; --sn-primary-dark:#244a65; --sn-text:#4a4e4b; --sn-ink:#0d1b2a; --sn-teal:#0e6e76;
  --sn-border:#dee2e6; --sn-soft:#f7f8fa;
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--sn-border);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;color:var(--sn-text)
}
html{scroll-padding-top:96px}
.facts{top:104px}
.snav *{box-sizing:border-box}
.snav ul{list-style:none;margin:0;padding:0}
.snav p{margin:0}
.snav a{text-decoration:none}
.snav__in{max-width:1200px;margin:0 auto;height:80px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between}
.snav__logo{display:inline-flex;align-items:center}
.snav__logo img{height:72px;width:auto;display:block}
.snav__links{display:none;align-items:center;gap:1.5rem;font-size:.95rem}
.snav__link{position:relative;padding:4px 0;color:var(--sn-text);font-weight:600;transition:color .2s ease}
a.snav__link:hover,.snav__btn:hover{color:var(--sn-primary)}
.snav__link--section{color:var(--sn-primary)}
.snav__link[aria-current="page"]{color:var(--sn-primary);font-weight:700;cursor:default}
.snav__links .snav__link[aria-current="page"]::after,.snav__links .snav__link--section::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--sn-primary);border-radius:2px}
.snav__btn,.snav__mbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-weight:600;color:var(--sn-text);cursor:pointer}
.snav__mbtn{width:100%;justify-content:space-between;text-align:left}
.snav__caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
[aria-expanded="true"] > .snav__caret{transform:translateY(1px) rotate(-135deg)}
.snav__menu{position:relative}
.snav__panel{position:absolute;top:calc(100% + 18px);left:-1rem;z-index:60;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem;min-width:640px;padding:1rem;background:#fff;border:1px solid var(--sn-border);border-radius:10px;box-shadow:0 12px 32px rgba(10,30,50,.14)}
.snav__panel[hidden],.snav__mobile[hidden],.snav__mlist[hidden]{display:none}
.snav__gtitle{margin:.2rem .8rem .4rem!important;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sn-teal)}
.snav__item{display:block;padding:.6rem .8rem;border-radius:6px;color:var(--sn-text);font-weight:600;white-space:nowrap}
.snav__item:hover,.snav__item:focus-visible{background:var(--sn-soft);color:var(--sn-primary)}
.snav__cta{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;background:var(--sn-primary);color:#fff!important;border:2px solid var(--sn-primary);border-radius:6px;font-weight:600;font-size:.9rem;box-shadow:0 2px 8px rgba(48,93,127,.28);transition:background .2s ease,box-shadow .2s ease}
.snav__cta:hover{background:var(--sn-primary-dark);border-color:var(--sn-primary-dark);box-shadow:0 4px 12px rgba(48,93,127,.42)}
.snav a:focus-visible,.snav button:focus-visible{outline:2px solid var(--sn-primary);outline-offset:3px;border-radius:2px}
.snav__toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.snav__bars{position:relative;display:block;width:22px;height:14px}
.snav__bars span{position:absolute;left:0;display:block;width:100%;height:2px;background:var(--sn-ink);transition:all .3s ease}
.snav__bars span:nth-child(1){top:0}
.snav__bars span:nth-child(2){top:6px}
.snav__bars span:nth-child(3){top:12px}
.snav__toggle[aria-expanded="true"] .snav__bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.snav__toggle[aria-expanded="true"] .snav__bars span:nth-child(2){opacity:0}
.snav__toggle[aria-expanded="true"] .snav__bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
.snav__mobile{border-top:1px solid var(--sn-border);background:#fff}
.snav__mobile-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;max-height:calc(100dvh - 80px);overflow-y:auto;padding:1rem 2rem;font-size:1rem}
.snav__mobile-in > .snav__link,.snav__mobile-in > .snav__mbtn{display:block;padding:.75rem 0;border-bottom:1px solid var(--sn-border)}
.snav__mobile-in > .snav__mbtn{display:flex}
.snav__mlist{padding:.2rem 0 .6rem 1rem;border-bottom:1px solid var(--sn-border)}
.snav__mlist .snav__gtitle{margin:.8rem 0 .2rem!important}
.snav__mlist .snav__link{display:block;padding:.625rem 0}
.snav__mobile-in > .snav__cta{margin-top:1rem}
@media (min-width:1024px){.snav__links{display:flex}.snav__toggle,.snav__mobile{display:none!important}}
@media (min-width:1280px){.snav__links{gap:2rem}}
@media (max-width:560px){.snav__in,.snav__mobile-in{padding-left:16px;padding-right:16px}}
@media (prefers-reduced-motion:reduce){.snav *{transition:none!important}}

/* Upwork badge: two lines beside a green star mark. Used on the hub hero and in every guide and case study. */
.upw{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:#fff;border:1px solid #dee2e6;border-radius:999px;text-decoration:none!important;color:#0d1b2a;line-height:1.25;max-width:100%}
.upw:hover{border-color:#14a800}
.upw-mark{flex:none;width:36px;height:36px;border-radius:50%;background:#14a800;display:grid;place-items:center}
.upw-mark svg{width:20px;height:20px;display:block}
.upw-text{display:flex;flex-direction:column;min-width:0}
.upw-text strong{font-size:15px;font-weight:800;color:#0d1b2a}
.upw-text span{font-size:13px;font-weight:600;color:#4a4e4b}
.upw-wrap{margin:18px 0 0}
.byline .upw-wrap{margin:0 0 0 auto}
footer .upw-wrap{margin:0 0 14px}
@media (max-width:640px){.byline{flex-wrap:wrap}.byline .upw-wrap{margin:6px 0 0}}

/* Hub: one link out to the case studies page */
.hub-more{margin:28px 0 0;font-size:18px;font-weight:800}
.hub-more a{text-decoration:none}
.hub-more a:hover{text-decoration:underline}

/* Guide hero photo (people) */
.hero-photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--navy-line);background:var(--navy-card)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* Case studies page: filter chips */
.cfilter{display:none;margin:0 0 28px}
.js .cfilter{display:block}
.cfilter fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
.cfilter legend{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip:hover{border-color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.chip .n{font-size:13px;font-weight:800;opacity:.75;font-variant-numeric:tabular-nums}
.chip[disabled]{opacity:.45;cursor:default}
.cstatus{font-size:15px;color:var(--muted);font-weight:700;margin:0 0 12px}
.ccard[hidden]{display:none}