/* =========================================
   SITE HEADER AND FOOTER, AND SITE TYPE (at the end)
   Shared by every page. Each page links this after its own <style>,
   and every class is namespaced (.sh-* header, .sf-* footer) so no page
   rule can reach it. It carries its own colours rather than borrowing
   page tokens, because the pages do not all define the same ones.

   The desktop link group keeps the spacing Matthew approved on 7 Sep:
   one tight group at the right, 24px gaps, 30px before the buttons and
   12px between them, stepping to 16/20/10 below 1320px.
   ========================================= */
.sh, .sf {
  --sh-dark: #1B3A4B;
  --sh-ink-2: #5A6B78;
  --sh-teal-safe: #0B8177;
  --sh-border: #E5E7EB;
  --sh-focus: #5A46C8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* anchors land below the fixed header instead of under it */
section[id], h2[id], #contact-form-inner { scroll-margin-top: 88px; }

/* ---- header ---- */
/* 300: above any page element that picked up z-index 100 from the old bare `nav`
   rule, such as the FAQ's section rail, which as a grid item honours z-index even
   without positioning */
.sh {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s;
}
.sh.sh-scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.06); }

.sh-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.sh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sh-logo img { display: block; width: 36px; height: 36px; margin: 0; }   /* margin: some pages set a bare img margin */
.sh-logo span { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; color: var(--sh-dark); }

.sh-links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sh-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--sh-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.sh-links a:hover { color: var(--sh-teal-safe); }
.sh-links a[aria-current="page"] { color: var(--sh-dark); font-weight: 600; }

.sh-links .sh-btn-first { margin-left: 6px; }
.sh-links .sh-btn-next { margin-left: -12px; }
.sh-links .sh-contact,
.sh-links .sh-cta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
}
.sh-links .sh-contact { color: var(--sh-dark); border: 1.5px solid var(--sh-border); }
.sh-links .sh-contact:hover { color: var(--sh-teal-safe); border-color: var(--sh-teal-safe); }
/* #0B8177, not the brand #0D9488: white on the brand teal is only 3.74:1 */
.sh-links .sh-cta { color: #FFFFFF; background: var(--sh-teal-safe); border: 1.5px solid var(--sh-teal-safe); }
.sh-links .sh-cta:hover { color: #FFFFFF; background: #096B62; border-color: #096B62; }

/* ---- dropdowns ----
   A link in the bar can open a short list of pages: a button with aria-expanded,
   opened by site.js with a click. Without JavaScript it opens on keyboard focus.
   To add another, copy an .sh-drop item in the header and give its list a new id. */
.sh-drop { position: relative; }
.sh-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--sh-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.sh-drop-btn:hover { color: var(--sh-teal-safe); }
.sh-drop-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.sh-drop.sh-drop-open .sh-drop-btn svg { transform: rotate(180deg); }
.sh-drop-btn.sh-drop-current { color: var(--sh-dark); font-weight: 600; }
.sh-drop-btn:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 3px; border-radius: 4px; }
.sh-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.sh-drop.sh-drop-open .sh-drop-menu,
.sh:not(.sh-js) .sh-drop:focus-within .sh-drop-menu { display: block; }
.sh-links .sh-drop-menu a { display: block; padding: 10px 14px; border-radius: 6px; }
.sh-links .sh-drop-menu a:hover { background: #F1F7F6; }

.sh-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  margin-right: -10px;
}
.sh-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: var(--sh-dark);
  transition: transform 0.25s, opacity 0.25s;
}
/* Book a Demo beside the menu button, for the widths where the link group is folded away */
.sh-cta-bar {
  display: none;
  margin-left: auto;
  margin-right: 14px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--sh-teal-safe);
}
.sh-cta-bar:hover { background: #096B62; }
.sh-cta-bar:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 3px; }
/* shown wherever the link group is folded away, so booking a demo is one tap at every width */
@media (max-width: 1180px) {
  .sh-cta-bar { display: inline-block; }
}
@media (max-width: 768px) {
  .sh-cta-bar { padding: 8px 14px; font-size: 0.82rem; margin-right: 8px; }
}
@media (max-width: 349px) {
  .sh-cta-bar { display: none; }
}

.sh.sh-open .sh-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sh.sh-open .sh-toggle span:nth-child(2) { opacity: 0; }
.sh.sh-open .sh-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sh a:focus-visible, .sh-toggle:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 1181px) {
  .sh-inner { max-width: none; padding: 0 24px; }
}
@media (min-width: 1500px) {
  .sh-inner { padding: 0 40px; }
}
@media (max-width: 1320px) {
  .sh-links { gap: 16px; }
  .sh-links .sh-btn-first { margin-left: 4px; }
  .sh-links .sh-btn-next { margin-left: -6px; }
}

/* the menu button takes over, and every option is a full-width row on one axis */
@media (max-width: 1180px) {
  .sh-toggle { display: block; }
  .sh-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    background: #FFFFFF;
    border-top: 1px solid var(--sh-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .sh.sh-open .sh-nav { display: block; }
  .sh-links { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 24px 22px; }
  .sh-links li, .sh-links .sh-btn-first, .sh-links .sh-btn-next { width: 100%; margin: 0; }
  .sh-links a { display: block; text-align: center; padding: 10px 0; font-size: 0.95rem; }
  .sh-links .sh-contact, .sh-links .sh-cta { display: block; padding: 12px 22px; font-size: 0.92rem; }
  .sh-links .sh-btn-first { margin-top: 8px; }
  /* in the folded menu a dropdown opens in place, under its button */
  .sh-drop-btn { display: flex; justify-content: center; width: 100%; padding: 10px 0; font-size: 0.95rem; }
  .sh-drop-menu { position: static; transform: none; min-width: 0; margin-top: 2px; border: 0; box-shadow: none; background: #F8FAFB; }
  .sh-links .sh-drop-menu a { padding: 10px 0; }
}

@media (max-width: 768px) {
  .sh-inner { height: 60px; padding: 0 16px; }
  .sh-logo img { width: 30px; height: 30px; }
  .sh-logo span { font-size: 1.05rem; }
  .sh-nav { max-height: calc(100vh - 60px); }
  .sh-links { padding: 12px 16px 20px; }
}

/* ---- footer ---- */
.sf {
  margin: 0;
  padding: 56px 0 40px;
  border: 0;
  background: #0F2A36;
  color: rgba(255,255,255,0.62);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: left;
}
.sf-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: start; }
.sf-brand img { display: block; width: 28px; height: 28px; margin: 0; }
.sf-brand span { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; color: #FFFFFF; }
.sf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sf-h {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.sf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf a { color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.2s; }
.sf a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.sf a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 2px; }
.sf-ext { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: baseline; }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; }
.sf-copy { margin: 0; max-width: 72ch; font-size: 0.78rem; color: rgba(255,255,255,0.62); }
.sf-cert { flex: none; display: block; width: 140px; height: 140px; border: 0; }

@media (max-width: 900px) {
  .sf-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .sf { padding: 44px 0 32px; }
  .sf-inner { padding: 0 16px; }
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sh, .sh-toggle span, .sh-links a, .sf a { transition: none; }
}

/* text for screen readers only, such as "(opens in a new tab)" */
.sh-sr, .sf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Skip to main content": hidden until a keyboard user tabs to it, then it drops in above the header */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 400;
  padding: 10px 16px; border-radius: 8px;
  background: var(--sh-dark, #1B3A4B); color: #fff;
  font: 600 15px/1.2 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
/* main takes focus from the skip link, and needs no ring of its own */
main[tabindex="-1"]:focus { outline: none; }

/* =========================================
   SITE TYPE
   Headings are General Sans at Regular and text is Neco, which each page
   sets on its body. Both are free Fontshare fonts under the ITF Free Font
   License, self-hosted from /fonts for this site only: the licence forbids
   passing the files on, and editing, subsetting or converting them.

   The header, the footer and every button stay in Inter, which each page
   still loads from Google Fonts, as Matthew asked on 30 Sep 2026.
   ========================================= */
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
/* Neco's middle dot (U+00B7) has almost no width, so "certified · Data"
   printed as "certified ·Data". unicode-range leaves that one character to
   Georgia without touching the font file, which the licence forbids.
   Neco's lowercase is also short (x-height 0.48em against Inter's 0.546em),
   so at the pages' sizes the text read a size smaller than it did in Inter.
   size-adjust draws Neco 10% larger and leaves every other font alone. */
@font-face {
  font-family: 'Neco';
  src: url('/fonts/Neco-Variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00B6, U+00B8-10FFFF;
  size-adjust: 110%;
}
@font-face {
  font-family: 'Neco';
  src: url('/fonts/Neco-VariableItalic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00B6, U+00B8-10FFFF;
  size-adjust: 110%;
}

/* Neco's default numerals are old-style and sit at uneven heights, so
   "ZC139807" and "30-minute" looked ragged */
body { font-variant-numeric: lining-nums; }

/* the :not() lifts this above page rules such as `.card h3`, so every heading
   is Regular, and keeps the footer's own headings in Inter */
:is(h1, h2, h3, h4, h5, h6):not(.sh *, .sf *) {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
}

/* .l-textbtn is a link inside a sentence on the careers page, not a button */
.btn, button:not(.l-textbtn) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}