:root {
  /* ==========================================================================
     COLOR TOKENS — taken verbatim from the tansi.app design system.
     Every text/background pair is verified against WCAG 2.1 SC 1.4.3 and
     1.4.11 in BOTH themes. Do not substitute values without re-checking.
     ========================================================================== */
  --bg:#FFFFFF;
  --bg-alt:#F5F9FB;
  --surface:#FFFFFF;
  --text:#0C1E27;          /* 17.06:1 on bg */
  --text-2:#16323F;        /* 13.44:1 on bg */
  --text-soft:#4A5F6B;     /*  6.69:1 on bg */
  --text-muted:#5F7480;    /*  4.89:1 on bg */
  --accent-text:#00627D;   /*  6.90:1 on bg */
  --accent-lg:#00738F;     /*  5.46:1 on bg */
  --accent-ui:#0089B3;     /*  4.02:1 on bg */
  --accent-mark:#00A8D8;   /* brand cyan, decorative */
  --line:#D5DFE4;
  --line-strong:#B7C6CD;
  --border-ui:#7C929C;
  --btn-bg:#00A8D8;
  --btn-fg:#06222C;        /*  5.96:1 on --btn-bg */

  /* aliases used by this site's components */
  --brand: var(--accent-mark);
  --deep:  var(--text-2);
  --mid:   var(--accent-text);
  --ink:   var(--text);
  --grey:  var(--text-soft);
  --rule:  var(--line);
  --band:  var(--bg-alt);
  --band-2:var(--bg-alt);
  --page:  var(--bg);
  --focus: #00627D;
  --focus-halo:#FFFFFF;
  --ok:#1B6B4A;
  --warn-bg:#FFF6E5;
  --warn-fg:#6B4A05;
  --art-bg:#EAF6FA; --art-pane:#FFFFFF; --art-line:#C7DEE6; --art-deep:#084C61;
  --art-mid:#06718D; --art-brand:#05A9D1; --art-soft:#BFE6F2; --art-ink:#10262E; --art-wht:#FFFFFF;
  --shadow:0 18px 48px -22px rgba(12,30,39,.30);
  --maxw:1120px;
  --measure:68ch;
  --radius:10px;
}

[data-theme="dark"] {
  --art-bg:#12262E; --art-pane:#10242B; --art-line:#26414B; --art-deep:#BFE6F2;
  --art-mid:#7FD6EE; --art-brand:#3FC6E8; --art-soft:#1D4657; --art-ink:#E4EDF0; --art-wht:#0C1B21;
  --shadow:0 18px 48px -22px rgba(0,0,0,.65);

  --bg:#0B1B23;
  --bg-alt:#0F242E;
  --surface:#132A35;
  --text:#E8F1F5;
  --text-2:#D3E3EA;
  --text-soft:#B4CCD6;
  --text-muted:#9BB5C1;
  --accent-text:#5FD3F0;
  --accent-lg:#5FD3F0;
  --accent-ui:#38BEE4;
  --accent-mark:#38BEE4;
  --line:#24404E;
  --line-strong:#3A5866;
  --border-ui:#5E8090;
  --btn-bg:#38BEE4;
  --btn-fg:#002834;
  --focus:#7FDEF5;
  --focus-halo:#0B1B23;
  --ok:#6FD6A6;
  --warn-bg:#2A2312;
  --warn-fg:#F2D89A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --art-bg:#12262E; --art-pane:#10242B; --art-line:#26414B; --art-deep:#BFE6F2;
  --art-mid:#7FD6EE; --art-brand:#3FC6E8; --art-soft:#1D4657; --art-ink:#E4EDF0; --art-wht:#0C1B21;
  --shadow:0 18px 48px -22px rgba(0,0,0,.65);

    --bg:#0B1B23; --bg-alt:#0F242E; --surface:#132A35;
    --text:#E8F1F5; --text-2:#D3E3EA; --text-soft:#B4CCD6; --text-muted:#9BB5C1;
    --accent-text:#5FD3F0; --accent-lg:#5FD3F0; --accent-ui:#38BEE4; --accent-mark:#38BEE4;
    --line:#24404E; --line-strong:#3A5866; --border-ui:#5E8090;
    --btn-bg:#38BEE4; --btn-fg:#002834;
    --focus:#7FDEF5; --focus-halo:#0B1B23; --ok:#6FD6A6;
    --warn-bg:#2A2312; --warn-fg:#F2D89A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- skip link: visible on focus, WCAG 2.4.1 ---------------------------- */
.skip {
  position: absolute; left: 8px; top: -60px;
  z-index: 100;
  background: var(--surface); color: var(--mid);
  border: 2px solid var(--focus); border-radius: var(--radius);
  padding: 12px 18px; font-weight: 700; text-decoration: none;
  transition: top .12s ease-out;
}
.skip:focus { top: 8px; }

/* --- focus appearance, WCAG 2.4.11 -------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Never remove focus without replacing it. */
:focus:not(:focus-visible) { outline: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: var(--measure); }

/* --- header ------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; height: 34px; width: auto; }
.brand-tag {
  font-size: 11px; white-space: nowrap; letter-spacing: .09em; text-transform: uppercase;
  color: var(--grey); font-weight: 700; border-left: 1px solid var(--rule);
  padding-left: 10px;
}
.site-nav { margin-left: auto; flex: 0 1 auto; min-width: 0; }
.site-nav ul { display: flex; flex-wrap: nowrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 8px 9px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--band); color: var(--mid); }
.site-nav a[aria-current="page"] {
  background: var(--band); color: var(--mid);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--band); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 40px;
}
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

/* --- breadcrumb --------------------------------------------------------- */
.crumb { padding: 14px 0 0; font-size: 14px; color: var(--grey); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumb li::after { content: "›"; margin-left: 6px; color: var(--rule); }
.crumb li:last-child::after { content: ""; }
.crumb a { color: var(--mid); }

/* --- typography --------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--deep); line-height: 1.22; margin: 0 0 12px; }
h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.015em; }
h2 { font-size: clamp(23px, 3vw, 31px); margin-top: 44px; }
h3 { font-size: clamp(18px, 2.2vw, 21px); margin-top: 28px; }
p { margin: 0 0 16px; max-width: var(--measure); }
a { color: var(--mid); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { max-width: var(--measure); }
li { margin-bottom: 8px; }
strong { font-weight: 700; }
.lede { font-size: clamp(18px, 2.3vw, 21px); color: var(--grey); max-width: var(--measure); }
.eyebrow {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mid); font-weight: 700; margin: 0 0 10px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- sections ----------------------------------------------------------- */
main { display: block; }
.section { padding: 52px 0; }
.section.tint { background: var(--band-2); border-block: 1px solid var(--rule); }
.hero { padding: 60px 0 44px; }
.hero h1 { max-width: 20ch; }

/* --- cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: 20px; margin: 26px 0 0; padding: 0; list-style: none;
        max-width: none; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.four  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin-bottom: 0; }

/* A whole card is a link target: the heading holds the anchor and the
   pseudo-element covers the card, so the accessible name stays the heading. */
.card.linked { position: relative; }
.card.linked h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card.linked:hover { border-color: var(--brand); }
.card.linked:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule);
         border-radius: var(--radius); overflow: hidden; margin: 30px 0 0; }
.stat { background: var(--band); padding: 20px 16px; text-align: center; }
.stat b { display: block; font-size: 28px; color: var(--deep); line-height: 1.1; }
.stat span { display: block; font-size: 14px; color: var(--grey); margin-top: 5px; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                 /* WCAG 2.2 target size */
  padding: 11px 20px; border-radius: 8px;
  font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { filter: brightness(.93); }
.btn-secondary { background: transparent; color: var(--mid); border-color: var(--mid); }
.btn-secondary:hover { background: var(--band); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- buyer paths -------------------------------------------------------- */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
         gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; max-width: none; }
.path {
  position: relative;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 18px 18px 16px;
}
.path h3 { margin: 0 0 4px; font-size: 17px; }
.path p { font-size: 15px; color: var(--grey); margin: 0; }
.path h3 a { text-decoration: none; }
.path h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.path:hover { border-color: var(--brand); background: var(--band); }
.path:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- callout / notes ---------------------------------------------------- */
.note {
  background: var(--band); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 22px; margin: 26px 0;
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note-title { font-weight: 700; color: var(--deep); margin-bottom: 8px; }
.caution { background: var(--warn-bg); color: var(--warn-fg); border-color: currentColor; }
.caution .note-title { color: inherit; }

/* --- tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 26px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
caption { text-align: left; color: var(--grey); font-size: 14px; padding-bottom: 8px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { background: var(--text-2); color: var(--bg); font-size: 14px; }

tbody tr:nth-child(even) { background: var(--band-2); }

/* --- definition list ---------------------------------------------------- */
.facts { margin: 22px 0; }
.facts div { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 4px 18px;
             padding: 11px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; color: var(--deep); margin: 0; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; } }

/* --- badges ------------------------------------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch;
          margin: 26px 0 0; padding: 0; list-style: none; max-width: none; }
.badge {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 12px 16px; min-height: 78px;
}
.badge img { display: block; height: 68px; width: auto; flex: none; }
.badge .badge-text { font-size: 14px; font-weight: 600; color: var(--ink); }
.badge .badge-sub { display: block; font-size: 13px; font-weight: 400; color: var(--grey); }
/* Placeholder shown until the real badge image is dropped in. Developers:
   replace the <img> src and delete the .badge-placeholder class. */
.badge-placeholder {
  display: grid; place-items: center;
  width: 84px; height: 68px; flex: none;
  border: 1px dashed var(--grey); border-radius: 6px;
  font-size: 11px; color: var(--grey); text-align: center; line-height: 1.15;
}

/* --- forms -------------------------------------------------------------- */
.field { margin-bottom: 18px; max-width: 520px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--deep); }
.field .hint { display: block; font-weight: 400; font-size: 14px; color: var(--grey); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-ui); border-radius: 8px; padding: 11px 12px; min-height: 44px;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.req { color: var(--ink); }

/* --- footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--band-2); margin-top: 60px; padding: 42px 0 34px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.footer-grid h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .09em;
                  color: var(--grey); margin: 0 0 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-grid li { margin-bottom: 7px; }
.footer-grid a { font-size: 15px; }
.legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule);
         font-size: 14px; color: var(--grey); }
.legal p { max-width: none; }

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --- reflow to 320px, WCAG 1.4.10 --------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-inner { min-height: 0; padding: 12px 0; }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav ul { gap: 2px; flex-wrap: wrap; }
  .section { padding: 38px 0; }
  .stat b { font-size: 24px; }
}

/* --- print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .theme-toggle, .skip { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ==========================================================================
   Interactive layer — stat panels, rail, accordions, artwork, reveal
   ========================================================================== */

/* --- artwork ------------------------------------------------------------ */
.art { margin: 30px 0 0; }
.art img, .art > svg { display: block; width: 100%; height: auto; max-width: 720px;
           border: 1px solid var(--rule); border-radius: var(--radius); background: var(--band); }
.art figcaption { font-size: 14px; color: var(--grey); margin-top: 10px; max-width: var(--measure); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 34px; align-items: center; }
.split .art { margin-top: 0; }

/* --- clickable stat tiles ----------------------------------------------- */
button.stat {
  border: 0; font: inherit; cursor: pointer; text-align: center; width: 100%;
  display: block; position: relative;
}
button.stat:hover { background: var(--surface); }
button.stat:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.stat-go { display: block; font-size: 12.5px; font-weight: 700; color: var(--mid); margin-top: 8px; }

/* --- slide-in drawer ---------------------------------------------------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(9, 26, 33, .55);
  opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 60;
}
.drawer-scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(560px, 100%); background: var(--surface);
  border-left: 1px solid var(--rule);
  transform: translateX(100%); visibility: hidden;
  transition: transform .24s ease, visibility .24s;
  z-index: 61; display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(9, 26, 33, .18);
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  padding: 22px 26px 16px; border-bottom: 1px solid var(--rule); flex: none;
}
.drawer-head h2 { margin: 0; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.2; }
.drawer-close {
  flex: none; background: var(--band); border: 1px solid var(--rule); border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer; font: inherit; font-size: 18px; line-height: 1;
  color: var(--ink); display: grid; place-items: center;
}
.drawer-close:hover { border-color: var(--brand); color: var(--mid); }
.drawer-body { overflow-y: auto; padding: 20px 26px 40px; -webkit-overflow-scrolling: touch; }
.drawer-body > :first-child { margin-top: 0; }
.drawer-body p, .drawer-body ul, .drawer-body ol { max-width: none; }
.drawer-body .art img, .art > svg { max-width: 100%; }
.drawer-nav {
  border-top: 1px solid var(--rule); padding: 13px 26px; display: flex; gap: 10px; flex: none;
}
.drawer-nav button {
  font: inherit; font-size: 15px; font-weight: 600; min-height: 44px; padding: 8px 16px;
  border-radius: 8px; border: 1px solid var(--rule); background: var(--band);
  color: var(--mid); cursor: pointer;
}
.drawer-nav button:hover { border-color: var(--brand); }
body.locked { overflow: hidden; }

/* --- sticky section rail ------------------------------------------------ */
.rail { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 30; }
.rail ul { list-style: none; margin: 0; padding: 0; max-width: none;
           display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.rail li { margin: 0; }
.rail a {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--grey); font-size: 12.5px; font-weight: 600;
  padding: 3px 2px; border-radius: 6px;
}
.rail a::after { content: ""; width: 22px; height: 3px; border-radius: 2px;
                 background: var(--rule); flex: none; transition: width .15s, background .15s; }
.rail a span { opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s;
               white-space: nowrap; }
.rail:hover a span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a[aria-current="true"] { color: var(--mid); }
.rail a[aria-current="true"]::after { width: 34px; background: var(--brand); }
.rail a[aria-current="true"] span { opacity: 1; transform: none; }
@media (max-width: 1300px) { .rail { display: none; } }

/* --- accordions (native details/summary) -------------------------------- */
.acc { border: 1px solid var(--rule); border-radius: var(--radius);
       background: var(--surface); margin-bottom: 12px; }
.acc summary {
  cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--deep);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 44px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2.5px solid var(--mid); border-bottom: 2.5px solid var(--mid);
  transform: rotate(45deg); transition: transform .15s ease; margin-top: -4px;
}
.acc[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.acc summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.acc .acc-body { padding: 0 20px 18px; }
.acc .acc-body > :last-child { margin-bottom: 0; }

/* --- reveal on scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- icons -------------------------------------------------------------- */
.icon-card { display: flex; gap: 14px; align-items: flex-start; }
.icon-badge {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--band); display: grid; place-items: center; color: var(--mid);
}
.icon-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
                  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- header CTA --------------------------------------------------------- */
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.header-cta { flex: none; }
@media (max-width: 900px) { .header-cta { display: none; } }

/* --- hero with artwork -------------------------------------------------- */
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: 28px; } }
.hero-split .art { margin: 0; }
.hero-split .art img, .art > svg { max-width: 100%; }
.hero h1 { max-width: 16ch; }

/* --- use-case tiles ----------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
         gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; max-width: none; }
.tile {
  position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer; width: 100%;
  display: flex; gap: 14px; align-items: flex-start; min-height: 44px;
}
.tile:hover { border-color: var(--brand); background: var(--band); }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile h3 { margin: 0 0 6px; font-size: 17px; }
.tile p { margin: 0; font-size: 15px; color: var(--grey); max-width: none; }
.tile-go { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--mid); }

/* --- trust strip -------------------------------------------------------- */
.trust-strip { background: var(--band); border-block: 1px solid var(--rule); padding: 34px 0; }
.trust-strip .badges { margin-top: 18px; }

/* --- case study cards --------------------------------------------------- */
.cs-card { position: relative; display: flex; flex-direction: column; gap: 10px;
           background: var(--surface); border: 1px solid var(--rule);
           border-radius: var(--radius); padding: 24px; text-align: left; }
.cs-card .cs-scale { font-size: 27px; font-weight: 700; color: var(--deep); line-height: 1; }
.cs-card h3 { margin: 0; font-size: 18px; }
.cs-card p { margin: 0; font-size: 15px; color: var(--grey); max-width: none; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cs-actions .btn { font-size: 14.5px; min-height: 42px; padding: 9px 16px; }
a.tile { text-decoration: none; color: var(--ink); }
a.tile:hover .h3-like b { text-decoration: underline; text-underline-offset: 2px; }
.h3-like b { display: block; font-size: 17px; color: var(--deep); margin-bottom: 6px; line-height: 1.3; }

/* --- faded United States flag behind the hero ---------------------------
   Decorative only: aria-hidden SVG used as a background image, never as
   content. Opacity is kept very low so every contrast ratio on top of it
   still meets WCAG AA in both themes. If you raise it, re-run the audit. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("flag.svg") no-repeat right -60px top -40px;
  background-size: 620px auto;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
[data-theme="dark"] .hero::before { opacity: .10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero::before { opacity: .10; }
}
@media (max-width: 700px) { .hero::before { background-size: 420px auto; opacity: .05; } }

/* --- expandable procurement tiles --------------------------------------- */
.vehicle { border: 1px solid var(--rule); border-radius: var(--radius);
           background: var(--surface); margin-bottom: 16px; overflow: hidden; }
.vehicle > summary {
  cursor: pointer; list-style: none; padding: 20px 22px; min-height: 44px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.vehicle > summary::-webkit-details-marker { display: none; }
.vehicle summary img { height: 82px; width: auto; flex: none; }
.vehicle .v-text { flex: 1 1 240px; }
.vehicle .v-title { display: block; font-weight: 700; font-size: 17px; color: var(--deep); }
.vehicle .v-sub { display: block; font-size: 14.5px; color: var(--grey); margin-top: 3px; }
.vehicle .v-more { flex: none; font-size: 14px; font-weight: 700; color: var(--mid);
                   display: flex; align-items: center; gap: 7px; }
.vehicle .v-more::after {
  content: ""; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.vehicle[open] .v-more::after { transform: rotate(-135deg); margin-top: 3px; }
.vehicle[open] > summary { border-bottom: 1px solid var(--rule); }
.vehicle summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.vehicle .v-body { padding: 20px 22px 24px; }
.vehicle .v-body > :last-child { margin-bottom: 0; }
.vehicle:hover { border-color: var(--brand); }

/* --- expandable capability tiles (same pattern as the buying page) ------- */
.expando { border: 1px solid var(--rule); border-radius: var(--radius);
           background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.expando > summary {
  cursor: pointer; list-style: none; padding: 20px 22px; min-height: 44px;
  display: flex; align-items: flex-start; gap: 16px;
}
.expando > summary::-webkit-details-marker { display: none; }
.expando .x-text { flex: 1 1 auto; }
.expando .x-title { display: block; font-weight: 700; font-size: 17.5px; color: var(--deep); }
.expando .x-sub { display: block; font-size: 15px; color: var(--grey); margin-top: 4px; }
.expando .x-more { flex: none; font-size: 14px; font-weight: 700; color: var(--mid);
                   display: flex; align-items: center; gap: 7px; padding-top: 2px; }
.expando .x-more::after {
  content: ""; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.expando[open] .x-more::after { transform: rotate(-135deg); margin-top: 3px; }
.expando[open] > summary { border-bottom: 1px solid var(--rule); }
.expando summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.expando:hover { border-color: var(--brand); }
.expando .x-body { padding: 20px 22px 24px; }
.expando .x-body > :last-child { margin-bottom: 0; }
.expando .x-body .art { margin-top: 18px; }

/* --- mega menu ----------------------------------------------------------
   Progressive enhancement: the panel is in the markup and visible without
   JavaScript. On load the script collapses it into a dropdown and wires the
   button. Escape closes it, click-outside closes it, focus is managed. */
.has-mega { position: relative; }
.mega-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 9px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; min-height: 40px;
}
.mega-toggle:hover { background: var(--band); color: var(--mid); }
.mega-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.mega-toggle[aria-expanded="true"] { background: var(--band); color: var(--mid); }
.mega-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(9, 26, 33, .13);
}
.mega[hidden] { display: none; }
.mega-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 30px 20px 34px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px;
}
.mega h2 {
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--grey); margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}
.mega ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.mega li { margin: 0 0 2px; }
.mega a {
  display: block; padding: 8px 10px; border-radius: 7px;
  text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600;
}
.mega a:hover { background: var(--band); color: var(--mid); }
.mega a span { display: block; font-weight: 400; font-size: 13.5px; color: var(--grey);
               margin-top: 2px; }
.mega-foot {
  border-top: 1px solid var(--rule); background: var(--band-2);
}
.mega-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
                   padding-top: 15px; padding-bottom: 15px; }
.mega-foot p { margin: 0; font-size: 14.5px; color: var(--grey); }
@media (max-width: 900px) {
  .mega { position: static; box-shadow: none; }
  .mega-inner { padding: 20px 0 8px; gap: 20px; }
}

/* --- compact module cards ----------------------------------------------- */
.modules .card { padding: 18px; }
.modules .icon-badge { width: 36px; height: 36px; border-radius: 10px; }
.modules .icon-badge svg { width: 18px; height: 18px; }
.modules h3 { font-size: 16px; line-height: 1.3; }
.modules p { font-size: 14px; margin-bottom: 10px; }
.modules .card { min-height: 0; }
.modules h3 a { text-decoration: none; }
.modules h3 a:hover { text-decoration: underline; text-underline-offset: 2px; }
.modules p { margin-bottom: 0; }
.modules .icon-card { gap: 11px; }

/* --- mega menu items with icons ----------------------------------------- */
.mega a { display: flex; align-items: flex-start; gap: 11px; }
.mega .icon-badge { width: 32px; height: 32px; border-radius: 9px; flex: none; margin-top: 1px; }
.mega .icon-badge svg { width: 17px; height: 17px; }
.mega .m-text { display: block; }
.mega a:hover .icon-badge { background: var(--surface); }


/* ============================================================================
   TANSI DESIGN SYSTEM — transplanted from the About page.
   This block is authoritative: it restyles the site's existing components to
   the About page's visual language. Contrast ratios are inherited from the
   token set at the top of this stylesheet and were re-verified after this
   overlay was applied (axe-core, all routes, both themes: 0 violations).
   ============================================================================ */

/* ---------- 1. type scale ---------------------------------------------- */
body{ font-size:17px; line-height:1.65; }
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.02em; font-weight:700; color:var(--text); }
h1{ font-size:clamp(2.4rem,5.4vw,4rem); letter-spacing:-.035em; margin:0 0 8px; }
h2{ font-size:clamp(1.9rem,3.6vw,2.75rem); letter-spacing:-.03em; margin:0 0 20px; }
h3{ font-size:1.32rem; letter-spacing:-.015em; margin:0 0 12px; }
.card h3, .tile h3{ font-size:1.02rem; letter-spacing:.01em; }

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent-ui); display:block; flex:none; }
.lede{ font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.55; color:var(--text-2); font-weight:400; }

.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* programmatic route focus lands on the h1 — do not paint a ring for it */
#main > *:first-child h1[tabindex="-1"]:focus,
#main h1[tabindex="-1"]:focus{ outline:none; }

/* ---------- 2. hero ----------------------------------------------------- */
.crumb{ padding:16px 0 0; }

.hero, #main > .hero{
  background:linear-gradient(168deg,#0C1E27 0%,#123746 58%,#0E4A5E 100%);
  position:relative; overflow:hidden;
  padding:88px 0 0; margin-bottom:0;
}
.hero::before{
  content:""; position:absolute; right:-160px; top:-90px; width:760px; height:760px;
  background:radial-gradient(circle at 35% 35%,rgba(0,168,216,.18),rgba(0,168,216,0) 62%);
  opacity:1; background-size:auto; z-index:0; pointer-events:none;
}
[data-theme="dark"] .hero::before{ opacity:1; }
:root:not([data-theme="light"]) .hero::before{ opacity:1; }
.hero::after{
  content:""; position:absolute; left:-5%; right:-5%; bottom:-2px; height:110px;
  background:var(--bg); clip-path:polygon(0 100%,100% 26%,100% 100%); z-index:1;
}
.hero > .wrap{ position:relative; z-index:2; padding-bottom:132px; }
.hero h1{ color:#fff; max-width:17ch; }
.hero .lede{ color:#C4DAE3; max-width:60ch; margin-top:24px; }
.hero .eyebrow{ color:#9BE6F8; }
.hero .eyebrow::before{ background:#9BE6F8; }
.hero p, .hero li{ color:#C4DAE3; }
.hero a:not(.btn){ color:#9BE6F8; }
.hero .btn-secondary{ color:#fff; border-color:#6E8D9B; background:transparent; }
.hero .btn-secondary:hover{ color:#9BE6F8; border-color:#9BE6F8; background:transparent; }
.hero figcaption{ color:#A8C5D1; }
/* diagrams inside the hero always sit on dark, in either theme */
.hero .art svg{
  --art-bg:#12262E; --art-pane:#10242B; --art-line:#26414B; --art-deep:#BFE6F2;
  --art-mid:#7FD6EE; --art-brand:#3FC6E8; --art-soft:#1D4657; --art-ink:#E4EDF0; --art-wht:#0C1B21;
}
.hero .art svg{ border-color:#24404E; }
.hero-split{ gap:52px; align-items:center; }
@media(max-width:940px){ .hero-split{ grid-template-columns:1fr; } }

/* ---------- 3. sections ------------------------------------------------- */
.section{ padding:88px 0; }
.section.tint{ background:var(--bg-alt); border-block:1px solid var(--line); }
.section > .wrap > h2{ max-width:760px; }

/* the site's own stat strip picks up the About treatment too */
.stats{ border:1px solid var(--line); border-radius:14px; background:var(--line);
  box-shadow:var(--shadow); margin-top:40px; }
.stats .stat{ background:var(--surface); padding:26px 22px; text-align:left; }
.stats .stat b{ font-size:1.7rem; font-weight:750; color:var(--accent-lg); letter-spacing:-.03em; }
.stats .stat span{ font-size:.82rem; color:var(--text-soft); margin-top:7px; }
.stats button.stat:hover{ background:var(--bg-alt); }
.stats .stat-go{ color:var(--accent-text); font-size:.76rem; letter-spacing:.06em; }
.section > .wrap > h2 + .lede{ max-width:760px; margin-bottom:8px; }
.sec-head{ max-width:760px; margin-bottom:52px; }
.sec-head h2{ margin-bottom:20px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media(max-width:900px){ .two-col{ grid-template-columns:1fr; gap:36px; } }
.narrow{ max-width:820px; }

/* ---------- 4. cards / grids / tiles ------------------------------------ */
.grid{ gap:20px; margin-top:40px; }
.tiles{ gap:20px; margin-top:40px; }
.card{ border:1px solid var(--line); border-radius:12px; padding:26px 24px; background:var(--surface); }
.card p, .card li{ color:var(--text-soft); font-size:.96rem; }
.card.linked:hover{ border-color:var(--accent-ui); }
.modules .card{ padding:22px; }

/* ---------- 5. buttons -------------------------------------------------- */
.btn{ min-height:48px; padding:14px 28px; border-radius:8px; font-weight:650; font-size:1rem; }
.btn-sm{ min-height:42px; padding:10px 18px; font-size:.92rem; }
.btn-row{ margin-top:30px; gap:14px; }
.btn-secondary{ border-color:var(--border-ui); color:var(--accent-text); }
.btn-secondary:hover{ background:transparent; border-color:var(--accent-ui); }

/* ---------- 6. About-page stat strip ------------------------------------ */
.stats:has(.stats-inner){
  display:block; background:none; border:0; border-radius:0; overflow:visible;
  margin-top:-64px; position:relative; z-index:5;
}
.stats-inner{
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  box-shadow:var(--shadow,0 18px 48px -22px rgba(12,30,39,.30)); overflow:hidden; margin:0;
}
.stats-inner .stat{ padding:26px 20px; border-right:1px solid var(--line);
  background:var(--surface); text-align:left; }
.stats-inner .stat:last-child{ border-right:0; }
.stats-inner .stat .n{ font-size:1.7rem; font-weight:750; color:var(--accent-lg);
  letter-spacing:-.03em; line-height:1.1; margin:0; }
.stats-inner .stat .l{ font-size:.82rem; color:var(--text-soft); line-height:1.4; margin:7px 0 0; }
@media(max-width:900px){ .stats-inner{ grid-template-columns:repeat(3,1fr); }
  .stats-inner .stat{ border-bottom:1px solid var(--line); }
  .stats-inner .stat:nth-child(3n){ border-right:0; } }
@media(max-width:540px){ .stats-inner{ grid-template-columns:repeat(2,1fr); }
  .stats-inner .stat:nth-child(3n){ border-right:1px solid var(--line); }
  .stats-inner .stat:nth-child(2n){ border-right:0; } }

/* ---------- 7. About-page components ------------------------------------ */
blockquote.pull{
  border-left:4px solid var(--accent-ui); padding:6px 0 6px 28px; margin:46px 0;
  font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.42; font-weight:600;
  letter-spacing:-.02em; color:var(--text); max-width:30ch;
}
blockquote.pull p{ margin:0; }

.proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:44px 0 8px; }
.proof .card .big{ font-size:1.95rem; font-weight:750; color:var(--accent-lg);
  letter-spacing:-.03em; line-height:1; margin:0 0 12px; }
.proof .card .who{ font-size:.82rem; color:var(--text-muted); margin:0 0 10px; }
@media(max-width:860px){ .proof{ grid-template-columns:1fr; } }

.blocks{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:8px; }
.block{ background:var(--surface); padding:38px 34px; }
.block .num{ font-size:.78rem; font-weight:750; letter-spacing:.14em;
  color:var(--accent-text); display:block; margin-bottom:14px; }
.block h3{ margin-bottom:14px; }
.block p{ font-size:.98rem; color:var(--text-soft); margin-bottom:.9em; }
.block p:last-child{ margin-bottom:0; }
@media(max-width:860px){ .blocks{ grid-template-columns:1fr; } }

ul.ticks{ list-style:none; padding:0; margin:0 0 1.1em; max-width:none; }
ul.ticks li{ position:relative; padding-left:26px; margin-bottom:11px;
  font-size:.98rem; color:var(--text-soft); line-height:1.55; }
ul.ticks li::before{ content:""; position:absolute; left:0; top:.6em; width:9px; height:9px;
  border-radius:2px; background:var(--accent-ui); }

.on-dark{ --od-bg1:#0C1E27; --od-bg2:#123746;
  --od-text:#FFFFFF; --od-body:#C4DAE3; --od-label:#7FDEF5; }
.panel{ background:linear-gradient(160deg,var(--od-bg1),var(--od-bg2));
  border:1px solid #1D3D4B; border-radius:16px; padding:52px 48px; position:relative; overflow:hidden; }
.panel h3{ color:var(--od-text); }
.panel p{ color:var(--od-body); }
.panel .eyebrow{ color:var(--od-label); }
.panel .eyebrow::before{ background:var(--od-label); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:11px 22px; margin:26px 0 0; font-size:.95rem; }
.kv dt{ color:var(--od-label); font-weight:650; white-space:nowrap; }
.kv dd{ margin:0; color:var(--od-body); }
@media(max-width:640px){ .panel{ padding:38px 26px; }
  .kv{ grid-template-columns:1fr; gap:2px 0; } .kv dd{ margin-bottom:12px; } }

.spec{ border-top:1px solid var(--line); padding-top:12px; margin:38px 0 0; }
.spec-row{ display:grid; grid-template-columns:190px 1fr; gap:24px; padding:18px 0;
  border-bottom:1px solid var(--line); }
.spec-row dt{ font-weight:650; font-size:.92rem; color:var(--text-2); }
.spec-row dd{ margin:0; font-size:.95rem; color:var(--text-soft); }
@media(max-width:640px){ .spec-row{ grid-template-columns:1fr; gap:5px; } }
.mod{ display:grid; grid-template-columns:122px 1fr; gap:16px; margin-bottom:10px; align-items:baseline; }
.mod:last-child{ margin-bottom:0; }
.mod .g{ font-size:.76rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-text); }
@media(max-width:640px){ .mod{ grid-template-columns:1fr; gap:2px; margin-bottom:15px; } }

ul.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px;
  list-style:none; padding:0; max-width:none; }
ul.trust li{ border:1px solid var(--line); border-radius:11px; padding:20px 22px;
  background:var(--surface); margin:0; }
.trust .h{ font-weight:700; font-size:1rem; margin-bottom:6px; color:var(--text); }
.trust .badge{
  display:inline-block; width:auto; min-height:0; height:auto;
  align-items:initial; gap:0; line-height:1.55; white-space:nowrap;
  font-size:.7rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 10px; border-radius:100px; margin:0 0 10px;
  border:1px solid var(--line-strong); color:var(--text-2); background:transparent;
}
.trust .badge.yes{ border-color:var(--accent-ui); color:var(--accent-text); }
.trust .s{ font-size:.88rem; color:var(--text-soft); line-height:1.5; margin:0; }
@media(max-width:860px){ ul.trust{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ ul.trust{ grid-template-columns:1fr; } }

ul.aud{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding:0;
  list-style:none; max-width:none; }
ul.aud li{ border:1px solid var(--line-strong); background:var(--surface); border-radius:100px;
  padding:9px 18px; font-size:.92rem; font-weight:550; color:var(--text-2); margin:0; }

/* ---------- 8. closing CTA band ----------------------------------------- */
#main > section.cta,
#main > section[aria-labelledby="next-h"]{
  background:#0A1920; border-block:0; padding:90px 0; text-align:center;
}
#main > section.cta .wrap > *,
#main > section[aria-labelledby="next-h"] .wrap > *{ margin-left:auto; margin-right:auto; }
#main > section.cta h2,
#main > section[aria-labelledby="next-h"] h2{ color:#fff; max-width:18ch; margin:0 auto 20px; }
#main > section.cta p,
#main > section[aria-labelledby="next-h"] p,
#main > section[aria-labelledby="next-h"] .lede{ color:#C4DAE3; max-width:58ch; margin:0 auto 34px; font-size:1.08rem; }
#main > section.cta .btn-row,
#main > section[aria-labelledby="next-h"] .btn-row{ justify-content:center; }
#main > section.cta .btn-primary,
#main > section[aria-labelledby="next-h"] .btn-primary{ background:#38BEE4; color:#002834; border-color:#38BEE4; }
#main > section.cta .btn-secondary,
#main > section[aria-labelledby="next-h"] .btn-secondary{ color:#fff; border-color:#6E8D9B; background:transparent; }
#main > section.cta .btn-secondary:hover,
#main > section[aria-labelledby="next-h"] .btn-secondary:hover{ color:#9BE6F8; border-color:#9BE6F8; }
#main > section.cta :focus-visible,
#main > section[aria-labelledby="next-h"] :focus-visible{ outline-color:#7FDEF5; }


/* About page's own button classes, mapped onto the site's button system */
.btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-p,.btn-s{ display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:14px 30px; border-radius:8px; text-decoration:none; font-weight:650; font-size:1rem;
  border:1px solid transparent; }
.btn-p{ background:#38BEE4; color:#002834; border-color:#38BEE4; }   /* 7.13:1 */
.btn-p:hover{ background:#69D3F0; }
.btn-s{ border-color:#6E8D9B; color:#fff; background:transparent; }  /* 17.9:1 on #0A1920 */
.btn-s:hover{ border-color:#9BE6F8; color:#9BE6F8; }

/* ---------- 9. footer --------------------------------------------------- */
.site-footer{ background:#071319; border-top:0; margin-top:0; padding:56px 0 40px; color:#A6C0CB; }
.site-footer a{ color:#A6C0CB; }
.site-footer a:hover{ color:#9BE6F8; }
.site-footer .footer-grid h2{ color:#7FDEF5; font-size:.74rem; letter-spacing:.14em; }
.site-footer p, .site-footer small, .site-footer li{ color:#A6C0CB; }
.site-footer :focus-visible{ outline-color:#7FDEF5; }

/* ---------- 10. header -------------------------------------------------- */
.site-header{ background:var(--bg); border-bottom:1px solid var(--line); }
.site-header .wrap{ min-height:76px; }

/* ---- mega menus: the few things the existing .mega system was missing ---- */
.site-nav li.has-mega{ position:static; }          /* panel spans the header */
.site-nav > ul > li{ flex:none; }
.mega-toggle{ white-space:nowrap; }
.site-nav .mega ul{ display:block; flex-wrap:initial; gap:0; }
.site-nav .mega-inner a{ white-space:normal; padding:9px 10px; }
.mega .m-text{ display:block; font-weight:650; font-size:.94rem; color:var(--text); }
.mega .m-text span{ display:block; font-weight:400; font-size:.82rem;
  color:var(--text-soft); margin-top:3px; }
.mega-foot .mega-all span{ display:inline; }
.mega-foot .wrap{ gap:10px; }
.mega-foot-label{ font-size:.7rem; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-right:4px; }
.mega-foot .mega-chip{ display:inline-block; padding:8px 15px; border-radius:100px;
  white-space:nowrap; border:1px solid var(--line-strong); background:var(--surface);
  font-size:.85rem; font-weight:600; color:var(--text-2); text-decoration:none; }
.mega-foot .mega-chip:hover{ border-color:var(--accent-ui); color:var(--accent-text); }
.mega-foot .mega-all{ margin-left:auto; font-size:.9rem; font-weight:700;
  color:var(--accent-text); text-decoration:none; white-space:nowrap; }
.mega-foot .mega-all:hover{ text-decoration:underline; }
@media (max-width:940px){
  .mega-foot .mega-all{ margin-left:0; }
  /* the stylesheet's own rule makes the panel static below 940px, which blows out
     the nowrap flex nav. Keep it an overlay and let it scroll instead. */
  .site-nav .mega{ position:absolute; left:0; right:0; top:100%;
    box-shadow:0 18px 40px rgba(9,26,33,.20); border-bottom:1px solid var(--line);
    max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain; }
  .site-nav .mega-inner{ grid-template-columns:1fr; gap:22px; padding:22px 20px 10px; }
  .site-nav .mega-foot .wrap{ padding-left:20px; padding-right:20px; }
}

/* ---- capability tabs: tabbed on desktop, stacked everywhere else.
   Progressive enhancement — the markup is plain sections and the tab roles are
   added by script only when there is room. Below 760px, and in print, every
   panel is shown so nothing disappears from a PDF. ------------------------- */
.dd-tabs{ display:flex; flex-wrap:nowrap; gap:2px; margin:0 0 30px; padding:0;
  border-bottom:1px solid var(--line); list-style:none;
  max-width:none;                 /* the global ul rule caps this at --measure */
  overflow-x:auto; scrollbar-width:thin; }
.dd-tabs li{ margin:0; }
.dd-tab{ appearance:none; background:transparent; border:0; border-bottom:3px solid transparent;
  margin-bottom:-1px; padding:12px 13px; min-height:48px; font:inherit; font-size:.93rem;
  font-weight:650; color:var(--text-soft); cursor:pointer; white-space:nowrap; }
.dd-tab:hover{ color:var(--accent-text); }
.dd-tab[aria-selected="true"]{ color:var(--accent-text); border-bottom-color:var(--accent-ui); }
.dd-panel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:34px; align-items:center; }
.dd-panel > div > h3{ margin-top:0; }
.dd-panel .art{ margin:0; }
.dd-panel[hidden]{ display:none; }
.dd-stacked .dd-panel{ margin-bottom:44px; }
.dd-stacked .dd-panel:last-child{ margin-bottom:0; }
@media (max-width:760px){ .dd-panel{ grid-template-columns:1fr; gap:22px; } }
@media print{
  .dd-tabs{ display:none; }
  .dd-panel{ display:block !important; margin-bottom:28px; page-break-inside:avoid; }
}

.card h4{ font-size:1.02rem; letter-spacing:.01em; margin:0 0 12px; color:var(--text); }
.svc-grid{ grid-template-columns:1fr; max-width:820px; }
.oplayer{ margin-top:26px; }
.oplayer.ccc h4{ font-size:1.12rem; }
.oplayer h4{ font-size:1.02rem; letter-spacing:.005em; margin:0 0 10px; color:var(--text); }
.oplayer p{ font-size:.94rem; color:var(--text-soft); margin:0; }
.erp-def{ margin-top:8px; }
.erp-def p{ max-width:760px; }
.erp-split{ margin-top:32px; }
.erp-split .card h4 .tag{ display:block; font-size:.7rem; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.erp-split .card.is-tansi{ border-color:var(--accent-ui); }
.erp-split .card.is-tansi h4 .tag{ color:var(--accent-text); }
.erp-split ul{ list-style:none; margin:0; padding:0; max-width:none; }
.erp-split li{ position:relative; padding-left:22px; margin-bottom:9px;
  font-size:.94rem; color:var(--text-soft); line-height:1.5; }
.erp-split li::before{ content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:2px; background:var(--line-strong); }
.erp-split .is-tansi li::before{ background:var(--accent-ui); }

/* ============================================================
   Tansi case study — all styles scoped under .tansi-cs so this
   can be dropped into an existing site without collisions.
   ============================================================ */
.tansi-cs{
  --brand:#05A9D1;
  --deep:#084C61;
  --mid:#06718D;
  --ink:#10262E;
  --grey:#5A6B72;
  --rule:#C7DEE6;
  --band:#EAF6FA;
  --band2:#F5FAFC;
  --page:#FFFFFF;
  --thbg:#084C61;
  --focus:#06718D;
  --maxw:820px;

  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:var(--page);
  padding:0 20px 80px;
}
.tansi-cs *,.tansi-cs *::before,.tansi-cs *::after{box-sizing:border-box}
.tansi-cs .wrap{max-width:var(--maxw);margin:0 auto}

/* ---------- header ---------- */
.tansi-cs .logo{display:block;width:180px;height:auto;margin:48px 0 28px}
.tansi-cs .eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mid);margin:0 0 10px
}
.tansi-cs .subhead{
  font-size:clamp(19px,2.6vw,23px);font-weight:700;color:var(--mid);margin:0 0 14px
}
.tansi-cs h1{
  font-size:clamp(27px,4.4vw,38px);line-height:1.12;font-weight:700;
  color:var(--deep);margin:0 0 14px;letter-spacing:-.015em
}
.tansi-cs .standfirst{
  font-size:clamp(17px,2.4vw,21px);line-height:1.45;color:var(--grey);
  margin:0 0 22px;padding-bottom:22px;border-bottom:3px solid var(--brand)
}
.tansi-cs .meta{font-size:14px;color:var(--grey);margin:0 0 36px}
.tansi-cs .meta b{color:var(--ink);font-weight:600}
.tansi-cs .meta span{display:inline-block;margin-right:6px}

/* ---------- stats ---------- */
.tansi-cs .stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--rule);border:1px solid var(--rule);margin:0 0 48px
}
.tansi-cs .stat{background:var(--band);padding:22px 14px;text-align:center}
.tansi-cs .stat b{display:block;font-size:clamp(24px,4vw,30px);font-weight:700;color:var(--deep);line-height:1.15}
.tansi-cs .stat span{display:block;font-size:13px;color:var(--grey);margin-top:6px;line-height:1.35}

/* ---------- anchor targets ----------
   If your site has a sticky header, raise this value to its height
   so a jumped-to heading is not hidden underneath it. */
.tansi-cs :where(h1,h2,h3,h4)[id]{scroll-margin-top:24px}




/* ---------- key findings ---------- */
.tansi-cs .findings{
  border-top:3px solid var(--brand);border-bottom:1px solid var(--rule);
  padding:26px 0 22px;margin:44px 0 8px
}
.tansi-cs .findings h2{
  font-size:13px !important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid) !important;margin:0 0 16px !important
}
.tansi-cs .findings ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tansi-cs .findings li{margin:0;padding:0}
.tansi-cs .findings a{
  display:block;padding:11px 34px 11px 26px;position:relative;
  font-size:clamp(16px,2.1vw,18.5px);line-height:1.45;
  color:var(--ink);text-decoration:none;border-radius:3px
}
.tansi-cs .findings a::before{
  content:"";position:absolute;left:6px;top:1.05em;
  width:9px;height:9px;border-radius:50%;background:var(--brand)
}
.tansi-cs .findings a::after{
  content:"\2192";position:absolute;right:10px;top:11px;
  color:var(--mid);opacity:0;transition:opacity .15s ease,transform .15s ease
}
.tansi-cs .findings a:hover,.tansi-cs .findings a:focus-visible{background:var(--band)}
.tansi-cs .findings a:hover::after,.tansi-cs .findings a:focus-visible::after{opacity:1;transform:translateX(3px)}

/* ---------- sticky section rail ---------- */
.tansi-rail{
  position:fixed;top:50%;right:22px;transform:translateY(-50%);
  z-index:60;padding:0;background:none;
  opacity:0;transition:opacity .3s ease;pointer-events:none
}
.tansi-rail.show{opacity:1;pointer-events:auto}
.tansi-rail ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tansi-rail li{margin:0}
.tansi-rail a{
  display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:4px;
  font-size:12.5px;line-height:1.3;color:var(--grey);text-decoration:none;
  max-width:34px;overflow:hidden;white-space:nowrap;
  transition:max-width .22s ease,color .15s ease,background .15s ease
}
.tansi-rail a::before{
  content:"";flex:none;width:18px;height:2px;border-radius:2px;
  background:var(--rule);transition:background .15s ease,width .15s ease
}
.tansi-rail:hover a,.tansi-rail:focus-within a{max-width:230px;background:var(--page)}
.tansi-rail a:hover,.tansi-rail a:focus-visible{color:var(--deep)}
.tansi-rail a[aria-current="true"]{color:var(--deep);font-weight:700}
.tansi-rail a[aria-current="true"]::before{background:var(--brand);width:24px}
@media (max-width:1180px){ .tansi-rail{display:none} }
@media (prefers-reduced-motion:reduce){ .tansi-rail,.tansi-rail a{transition:none} }
@media print{ .tansi-rail{display:none} .tansi-cs .findings a::after{display:none} }

/* ---------- clickable stat tiles ---------- */
.tansi-cs button.stat{
  display:block;width:100%;font:inherit;cursor:pointer;text-align:center;
  border:0;border-top:3px solid transparent;transition:background .15s ease,border-color .15s ease
}
.tansi-cs button.stat:hover{background:var(--band2);border-top-color:var(--brand)}
.tansi-cs button.stat .statgo{
  display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--mid);
  opacity:0;transition:opacity .15s ease
}
.tansi-cs button.stat:hover .statgo,
.tansi-cs button.stat:focus-visible .statgo{opacity:1}
@media (hover:none){ .tansi-cs button.stat .statgo{opacity:1} }

/* ---------- slide-in drawer ---------- */
.tansi-drawer.tansi-cs{padding:0;font-size:16px}
.tansi-drawer-scrim{
  position:fixed;inset:0;background:rgba(8,32,42,.55);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:998
}
.tansi-drawer-scrim.open{opacity:1;pointer-events:auto}
.tansi-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(680px,100%);
  box-shadow:-16px 0 48px rgba(8,32,42,.22);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  z-index:999;display:flex;flex-direction:column;visibility:hidden
}
.tansi-drawer.open{transform:translateX(0);visibility:visible}
.tansi-drawer .dhead{
  display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
  padding:22px 26px 16px;border-bottom:1px solid var(--rule);flex:none
}
.tansi-drawer .dhead h2{margin:0;font-size:clamp(19px,2.6vw,25px);line-height:1.2;color:var(--deep)}
.tansi-drawer .dclose{
  flex:none;background:var(--band);border:1px solid var(--rule);border-radius:999px;
  width:38px;height:38px;cursor:pointer;font:inherit;font-size:18px;line-height:1;
  color:var(--ink);display:grid;place-items:center
}
.tansi-drawer .dclose:hover{border-color:var(--brand);color:var(--deep)}
.tansi-drawer .dbody{overflow-y:auto;padding:20px 26px 44px;-webkit-overflow-scrolling:touch}
.tansi-drawer .dbody > :first-child{margin-top:0}
.tansi-drawer .dbody h3{font-size:18px;margin:24px 0 8px}
.tansi-drawer .dbody h4{margin:20px 0 6px}
.tansi-drawer .dbody table{min-width:0;font-size:13.5px}
.tansi-drawer .dbody td:first-child{white-space:normal}
.tansi-drawer .dnav{
  border-top:1px solid var(--rule);padding:13px 26px;display:flex;gap:10px;
  justify-content:space-between;flex:none;background:var(--band)
}
.tansi-drawer .dnav button{
  background:none;border:1px solid var(--rule);border-radius:999px;padding:7px 14px;
  font:inherit;font-size:14px;color:var(--mid);cursor:pointer
}
.tansi-drawer .dnav button:hover{border-color:var(--brand);color:var(--deep)}
body.tansi-locked{overflow:hidden}
@media (max-width:680px){
  .tansi-drawer{width:100%}
  .tansi-drawer .dbody{padding:18px 18px 40px}
  .tansi-drawer .dhead{padding:18px 18px 14px}
}
@media (prefers-reduced-motion:reduce){
  .tansi-drawer,.tansi-drawer-scrim,.tansi-cs button.stat,.tansi-cs button.stat .statgo{transition:none}
}
@media print{ .tansi-drawer,.tansi-drawer-scrim{display:none} }

/* ---------- typography ---------- */
.tansi-cs h2{
  font-size:clamp(23px,3.4vw,29px);line-height:1.22;font-weight:700;color:var(--deep);
  margin:56px 0 16px;letter-spacing:-.01em
}
.tansi-cs h3{font-size:20px;font-weight:700;color:var(--ink);margin:34px 0 10px}
.tansi-cs h4{font-size:17px;font-weight:700;color:var(--mid);margin:28px 0 8px}
.tansi-cs p{margin:0 0 16px}
.tansi-cs ul{margin:0 0 18px;padding-left:22px}
.tansi-cs li{margin:0 0 9px;padding-left:4px}
.tansi-cs li::marker{color:var(--brand)}
.tansi-cs strong{font-weight:650}

/* ---------- callout ---------- */
.tansi-cs .box{
  background:var(--band);border:1px solid var(--rule);border-left:5px solid var(--rule);
  padding:22px 24px;margin:26px 0
}
.tansi-cs .box.accent{border-left-color:var(--brand)}
.tansi-cs .box h4{margin:0 0 12px;color:var(--deep);font-size:17px}
.tansi-cs .box p:last-child,.tansi-cs .box ol:last-child,.tansi-cs .box ul:last-child{margin-bottom:0}
.tansi-cs .box ol{margin:0;padding-left:22px}
.tansi-cs .box ol li{margin-bottom:7px}
.tansi-cs .box .after{margin-top:12px}

/* ---------- pull quote ---------- */
.tansi-cs blockquote{
  margin:34px 0;padding:6px 0 6px 26px;border-left:5px solid var(--brand)
}
.tansi-cs blockquote p{
  font-size:clamp(18px,2.6vw,21px);line-height:1.5;font-style:italic;
  color:var(--deep);margin:0 0 12px
}
.tansi-cs blockquote cite{
  display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--grey)
}

/* ---------- comparison ---------- */
.tansi-cs .compare{margin:26px 0;border:1px solid var(--rule)}
.tansi-cs .compare .head{display:grid;grid-template-columns:1fr 1fr;background:var(--thbg)}
.tansi-cs .compare .head div{padding:11px 16px;color:#fff;font-weight:700;font-size:14px}
.tansi-cs .compare .row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.tansi-cs .compare .row:nth-child(even){background:var(--band2)}
.tansi-cs .compare .row div{padding:13px 16px;font-size:15px;line-height:1.5}
.tansi-cs .compare .row div:first-child{border-right:1px solid var(--rule)}
.tansi-cs .compare .lbl{display:none;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid);margin-bottom:4px}

/* ---------- results table ---------- */
.tansi-cs .scroll{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch}
.tansi-cs table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
.tansi-cs th{
  background:var(--thbg);color:#fff;text-align:left;padding:11px 14px;font-weight:700;
  font-size:14px;border:1px solid var(--thbg)
}
.tansi-cs td{padding:11px 14px;border:1px solid var(--rule);vertical-align:top;line-height:1.45}
.tansi-cs tbody tr:nth-child(even){background:var(--band2)}
.tansi-cs td:first-child{font-weight:650;white-space:nowrap}

/* ---------- about / cta ---------- */
.tansi-cs .about{border-top:3px solid var(--brand);margin-top:64px;padding-top:8px}
.tansi-cs .cta{
  background:var(--band);border:1px solid var(--rule);border-left:5px solid var(--brand);
  padding:26px 28px;margin:36px 0 0
}
.tansi-cs .cta h4{margin:0 0 12px;color:var(--deep);font-size:18px}
.tansi-cs .cta .contact{margin:16px 0 0;font-size:15px;line-height:1.9}
.tansi-cs .cta .contact b{display:block;font-size:17px;color:var(--ink)}
.tansi-cs .cta a{color:var(--mid);text-decoration:none;border-bottom:1px solid var(--rule)}
.tansi-cs .cta a:hover,.tansi-cs .cta a:focus{color:var(--deep);border-bottom-color:var(--brand)}

/* ---------- responsive ---------- */
@media (max-width:680px){
  .tansi-cs{font-size:16px}
  .tansi-cs .stats{grid-template-columns:repeat(2,1fr)}
  .tansi-cs .compare .head{display:none}
  .tansi-cs .compare .row{grid-template-columns:1fr}
  .tansi-cs .compare .row div:first-child{border-right:0;border-bottom:1px solid var(--rule)}
  .tansi-cs .compare .lbl{display:block}
}
@media (max-width:420px){
  .tansi-cs .stats{grid-template-columns:1fr}
}

/* ---------- print ---------- */
@media print{
  .tansi-cs{font-size:10.5pt;padding:0}
  .tansi-cs h2{page-break-after:avoid}
  .tansi-cs blockquote,.tansi-cs .box,.tansi-cs .compare,.tansi-cs table{page-break-inside:avoid}
  .tansi-cs .stat{background:#fff !important;border:1px solid #ccc}
}

/* ---------- focus visibility (WCAG 2.4.7 / 1.4.11) ---------- */
.tansi-cs a:focus-visible,
.tansi-cs [tabindex]:focus-visible,
.tansi-cs button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:2px
}

/* ---------- theme toggle ---------- */
.tansi-cs .themebar{display:flex;justify-content:flex-end;padding-top:20px}
.tansi-cs .toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--band);color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:14px;cursor:pointer
}
.tansi-cs .toggle:hover{border-color:var(--brand)}
.tansi-cs .toggle svg{width:16px;height:16px;flex:none;fill:currentColor}
.tansi-cs .toggle .sun{display:none}
[data-theme="dark"] .tansi-cs .toggle .sun{display:inline}
[data-theme="dark"] .tansi-cs .toggle .moon{display:none}

/* ---------- scrollable table regions ---------- */
.tansi-cs .scroll{
  overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch;
  border:1px solid var(--rule)
}
.tansi-cs .scroll table{border:0}
.tansi-cs .scrollnote{
  font-size:13px;color:var(--grey);margin:-16px 0 26px
}

/* ---------- dark theme ---------- */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .tansi-cs{
    --brand:#05A9D1;
    --deep:#63C8E4;
    --mid:#5FC2E0;
    --ink:#E4EDF0;
    --grey:#A3B7BF;
    --rule:#456F7E;
    --band:#13272F;
    --band2:#102128;
    --page:#0C1B21;
    --thbg:#0F3B4A;
    --focus:#7FD4EC;
    background:var(--page);color:var(--ink)
  }
}
[data-theme="dark"] .tansi-cs{
  --brand:#05A9D1;
  --deep:#63C8E4;
  --mid:#5FC2E0;
  --ink:#E4EDF0;
  --grey:#A3B7BF;
  --rule:#456F7E;
  --band:#13272F;
  --band2:#102128;
  --page:#0C1B21;
  --thbg:#0F3B4A;
  --focus:#7FD4EC;
  background:var(--page);color:var(--ink)
}

/* ---------- visually hidden (screen-reader only) ---------- */
.tansi-cs .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* ---------- callout title (styled, not a heading) ---------- */
.tansi-cs .box-title{
  font-weight:700;color:var(--deep);font-size:17px;margin:0 0 12px
}

/* ---------- comparison table ---------- */
.tansi-cs table.cmp{min-width:560px}
.tansi-cs table.cmp td{width:50%}

/* ---------- CTA heading ---------- */
.tansi-cs .cta h3{margin:0 0 12px;color:var(--deep);font-size:18px}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tansi-cs *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* summary articles are demoted a level so they nest correctly under the page
   (and under the drawer title); keep the original type scale */
.tansi-cs h3.cs-title{ font-size:clamp(27px,4.4vw,38px); line-height:1.12; font-weight:700;
  color:var(--deep); margin:0 0 14px; letter-spacing:-.015em; }
.tansi-cs h4.cs-sub{ font-size:clamp(21px,3vw,26px); line-height:1.24; font-weight:700;
  color:var(--deep); margin:44px 0 14px; letter-spacing:-.01em; }
.tansi-cs{ padding-bottom:0; background:transparent; }
.cs-summary{ margin-top:18px; }
.cs-more{ margin:26px 0 64px; }
.drawer{ width:min(760px,100%); }
.drawer .tansi-cs .wrap{ max-width:none; }
.drawer .cs-more{ margin:26px 0 8px; }

/* ---- sector strip -------------------------------------------------------- */
.sectors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px;
  margin:38px 0 0; padding:0; list-style:none; max-width:none; }
.sectors li{ margin:0; }
.sectors a{ display:flex; align-items:center; gap:14px; min-height:64px;
  padding:12px 18px 12px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); text-decoration:none; color:var(--text);
  font-size:.96rem; font-weight:650; line-height:1.3; }
.sectors a:hover{ border-color:var(--accent-ui); color:var(--accent-text); }
.sectors .icon-badge{ width:38px; height:38px; border-radius:10px; flex:none; }
.sectors .icon-badge svg{ width:19px; height:19px; }
.sectors a:hover .icon-badge{ background:var(--surface); }
.sectors .go{ margin-left:auto; flex:none; color:var(--text-muted); font-weight:700; }
.sectors a:hover .go{ color:var(--accent-text); }

/* ---- journey: centre-spine timeline, alternating sides ------------------- */
.jr-sec{ margin-top:72px; }
.jr-sec:first-of-type{ margin-top:8px; }
.jr-sec > h2{ display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:clamp(1.3rem,2.1vw,1.6rem); letter-spacing:-.02em; text-align:center;
  max-width:none; margin:0 auto 8px; padding:14px 22px; border:1px solid var(--line);
  border-radius:100px; background:var(--surface); width:max-content; position:relative; z-index:2; }
.jr-sec > h2 .icon-badge{ width:36px; height:36px; border-radius:10px; flex:none; }
.jr-sec > h2 .icon-badge svg{ width:19px; height:19px; }

.jr-list{ list-style:none; margin:0; padding:0; max-width:none; position:relative; }
.jr-list::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  margin-left:-1px; background:var(--line); }

.jr-item{ display:grid; grid-template-columns:1fr 104px 1fr; align-items:start;
  margin:0; padding:26px 0; position:relative; }
.jr-item > .jr-media{ grid-column:1; grid-row:1; }
.jr-item > .jr-body{ grid-column:3; grid-row:1; }
.jr-item.jr-flip > .jr-media{ grid-column:3; grid-row:1; }
.jr-item.jr-flip > .jr-body{ grid-column:1; grid-row:1; }

.jr-dot{ grid-column:2; grid-row:1; justify-self:center; align-self:center; z-index:1;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent-ui); color:var(--accent-text);
  font-size:.92rem; font-weight:750; letter-spacing:.02em; }

.jr-media{ display:block; border:1px solid var(--line); border-radius:14px;
  background:var(--bg-alt); overflow:hidden; }
.jr-media svg{ display:block; width:100%; height:auto; }
.jr-body{ border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:24px 26px; }
.jr-num{ font-size:.72rem; font-weight:750; letter-spacing:.16em; color:var(--accent-text);
  display:block; margin-bottom:8px; }
.jr-body h3{ font-size:1.08rem; letter-spacing:.005em; margin:0 0 10px; }
.jr-body > p{ font-size:.94rem; color:var(--text-soft); margin:0 0 14px; }
.jr-body ul{ list-style:none; margin:0; padding:0; max-width:none; }
.jr-body li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:.9rem;
  color:var(--text-soft); line-height:1.5; }
.jr-body li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px;
  border-radius:2px; background:var(--accent-ui); }

@media (max-width:880px){
  .jr-sec > h2{ width:auto; justify-content:flex-start; border-radius:14px; }
  .jr-list::before{ left:29px; }
  .jr-item{ grid-template-columns:58px 1fr; gap:0 20px; padding:20px 0; align-items:start; }
  .jr-item > .jr-media, .jr-item.jr-flip > .jr-media{ grid-column:2; grid-row:2;
    margin-bottom:16px; }
  .jr-item > .jr-body, .jr-item.jr-flip > .jr-body{ grid-column:2; grid-row:3; }
  .jr-dot{ grid-column:1; grid-row:2; width:58px; height:58px; }
}
@media print{
  .jr-list::before{ display:none; }
  .jr-item{ grid-template-columns:1fr; page-break-inside:avoid; }
  .jr-item > .jr-media, .jr-item > .jr-body,
  .jr-item.jr-flip > .jr-media, .jr-item.jr-flip > .jr-body{ grid-column:1; }
}

.sectors{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px;
  grid-auto-rows:1fr; }
.sectors li{ display:flex; }
.sectors a{ min-height:92px; height:100%; padding:18px 20px 18px 16px; gap:16px;
  align-items:flex-start; font-weight:400; }
/* card grids: every row the same height, whatever the copy length */
ul.grid{ grid-auto-rows:1fr; }
ul.grid > li{ height:100%; }
.sectors .icon-badge{ width:46px; height:46px; border-radius:12px; margin-top:1px; }
.sectors .icon-badge svg{ width:23px; height:23px; }
.sectors .s-text{ display:block; font-size:1.02rem; font-weight:650; line-height:1.3;
  color:var(--text); }
.sectors a:hover .s-text{ color:var(--accent-text); }
.sectors .s-text span{ display:block; font-size:.85rem; font-weight:400; line-height:1.45;
  color:var(--text-soft); margin-top:4px; }
.sectors .go{ font-size:1.05rem; margin-top:2px; }

/* the About page's sections carry no class, so they missed the section rhythm */
#main > section:not([class]){ padding:88px 0; }
#main > section:not([class]) + section:not([class]){ padding-top:0; }
.sec-head{ padding-top:8px; }
.sec-head .eyebrow, .hero .eyebrow{ font-size:.85rem; letter-spacing:.17em; }
.eyebrow::before{ width:30px; }

/* "Who we build for" becomes linked tiles */
ul.aud{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:16px;
  margin-top:34px; padding:0; list-style:none; max-width:none; }
ul.aud li{ border:0; background:none; border-radius:0; padding:0; margin:0; }

/* ---- smart search ---------------------------------------------------------
   A fixed pill that rides the bottom of the viewport and lifts above the footer
   when the footer scrolls into view. ARIA combobox: the input owns the listbox,
   options are addressed with aria-activedescendant, arrows move, Enter opens. */
.tsearch{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:55;
  width:min(560px, calc(100vw - 32px)); }
.tsearch-box{ display:flex; align-items:center; gap:10px; padding:0 8px 0 16px;
  min-height:56px; border:1px solid var(--border-ui); border-radius:100px;
  background:var(--surface); box-shadow:0 16px 40px -18px rgba(12,30,39,.45); }
[data-theme="dark"] .tsearch-box{ box-shadow:0 16px 40px -18px rgba(0,0,0,.8); }
:root:not([data-theme="light"]) .tsearch-box{ box-shadow:0 16px 40px -18px rgba(0,0,0,.8); }
.tsearch-box:focus-within{ border-color:var(--accent-ui); }
.tsearch-box > svg{ width:19px; height:19px; flex:none; fill:none; stroke:var(--text-muted);
  stroke-width:2; stroke-linecap:round; }
.tsearch input{ flex:1; min-width:0; border:0; background:transparent; font:inherit;
  font-size:1rem; color:var(--text); padding:14px 0; }
.tsearch input::placeholder{ color:var(--text-muted); }
.tsearch input:focus{ outline:none; }
.tsearch-clear{ appearance:none; border:0; background:transparent; cursor:pointer;
  min-width:44px; min-height:44px; border-radius:50%; color:var(--text-muted);
  font:inherit; font-size:1.1rem; line-height:1; }
.tsearch-clear:hover{ color:var(--accent-text); }
.tsearch-results{ list-style:none; margin:0 0 10px; padding:6px; max-width:none;
  max-height:min(50vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  box-shadow:0 20px 44px -20px rgba(12,30,39,.5); }
[data-theme="dark"] .tsearch-results{ box-shadow:0 20px 44px -20px rgba(0,0,0,.85); }
:root:not([data-theme="light"]) .tsearch-results{ box-shadow:0 20px 44px -20px rgba(0,0,0,.85); }
.tsearch-results[hidden]{ display:none; }
.tsearch-results li{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px;
  border-radius:11px; cursor:pointer; margin:0; }
.tsearch-results li[aria-selected="true"]{ background:var(--bg-alt); }
.tsearch-results .icon-badge{ width:34px; height:34px; border-radius:9px; flex:none; }
.tsearch-results .icon-badge svg{ width:18px; height:18px; }
.tsearch-t{ display:block; font-size:.94rem; font-weight:650; color:var(--text); line-height:1.3; }
.tsearch-d{ display:block; font-size:.82rem; color:var(--text-soft); line-height:1.4;
  margin-top:2px; }
.tsearch-none{ padding:16px 14px; font-size:.92rem; color:var(--text-soft); }
@media print{ .tsearch{ display:none; } }

/* ---- closing statement above the CTA ------------------------------------- */
.cta-lead{ font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.1; letter-spacing:-.035em;
  font-weight:750; margin:0 0 18px; color:var(--text); }
.cta-lead .brand-word{ color:var(--accent-text); }
#main > section.cta .cta-lead,
#main > section[aria-labelledby="next-h"] .cta-lead{ color:#fff; }
#main > section.cta .cta-lead .brand-word,
#main > section[aria-labelledby="next-h"] .cta-lead .brand-word{ color:#38BEE4; }
#main > section.cta p.cta-lead,
#main > section[aria-labelledby="next-h"] p.cta-lead{
  font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.1; letter-spacing:-.035em;
  font-weight:750; max-width:20ch; margin:0 auto 18px; }

/* ---- footer base --------------------------------------------------------- */
.footer-base{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px; margin-top:34px; padding-top:26px;
  border-top:1px solid rgba(166,192,203,.22); }
.footer-logo{ display:block; width:132px; height:38px; background-repeat:no-repeat;
  background-position:left center; background-size:contain; }
.footer-social{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0;
  max-width:none; }
.footer-social li{ margin:0; }
.footer-social a{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(166,192,203,.34); color:#A6C0CB; }
.footer-social a:hover{ color:#9BE6F8; border-color:#9BE6F8; }
.footer-social svg{ width:19px; height:19px; fill:currentColor; }

/* ---- capability tiles + slide-out ---------------------------------------- */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px;
  margin:34px 0 0; padding:0; list-style:none; max-width:none; }
/* every row the same height, and every tile filling its cell */
.cap-grid{ grid-auto-rows:1fr; }
.cap-grid li{ margin:0; display:flex; }
.cap-tile{ display:flex; align-items:flex-start; gap:14px; width:100%; height:100%;
  text-align:left;
  appearance:none; cursor:pointer; padding:20px 18px; min-height:112px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); font:inherit; }
/* the text column stretches so "More detail" sits on the same line in every tile */
.cap-tile > span:last-child{ display:flex; flex-direction:column; align-self:stretch; }
.cap-tile .cgo{ margin-top:auto; padding-top:9px; }
.cap-tile:hover{ border-color:var(--accent-ui); }
.cap-tile .icon-badge{ width:44px; height:44px; border-radius:12px; flex:none; }
.cap-tile .icon-badge svg{ width:22px; height:22px; }
.cap-tile .ct{ display:block; font-size:1rem; font-weight:650; color:var(--text); line-height:1.3; }
.cap-tile:hover .ct{ color:var(--accent-text); }
.cap-tile .cd{ display:block; font-size:.86rem; font-weight:400; color:var(--text-soft);
  line-height:1.45; margin-top:5px; }
.cap-tile .cgo{ display:block; font-size:.78rem; font-weight:700; color:var(--accent-text);
  margin-top:9px; }
#cap-store{ display:none; }
.drawer .cap-art{ margin:0 0 20px; }
.drawer .cap-art svg{ display:block; width:100%; height:auto; border:1px solid var(--line);
  border-radius:12px; }
.drawer .cap-cta{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:12px; flex-wrap:wrap; }

#main > section.cta p.cta-lead,
#main > section[aria-labelledby="next-h"] p.cta-lead{ max-width:none; white-space:nowrap;
  font-size:clamp(1.5rem,3.6vw,3.2rem); }
@media (max-width:560px){
  #main > section.cta p.cta-lead,
  #main > section[aria-labelledby="next-h"] p.cta-lead{ white-space:normal; }
}

.hero h1 .brand-word{ color:#5FD3F0; }
h1 .brand-word{ color:var(--accent-text); }

/* ---- role suffix in the "reach a person directly" list ------------------- */
.facts dt .role{ color:var(--muted); font-weight:600; }
.facts dt .role::before{ content:"\00a0|\00a0"; color:var(--line); }

/* ---- FAQ button in the capability drawer --------------------------------- */
.btn-quiet{ background:transparent; color:var(--accent-text);
  border:1px solid var(--line); display:inline-flex; align-items:center; gap:8px; }
.btn-quiet:hover{ border-color:var(--accent-text); background:var(--tint); }
.faq-ico{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---- the answers panel, in from the left --------------------------------- */
.ldrawer{ position:fixed; top:0; left:0; height:100%; width:min(500px,100%);
  background:var(--surface); border-right:1px solid var(--line);
  box-shadow:22px 0 60px rgba(9,26,33,.22);
  transform:translateX(-100%); visibility:hidden;
  /* visibility flips instantly on open, and waits for the slide on close */
  transition:transform .26s ease, visibility 0s linear .26s;
  z-index:90; display:flex; flex-direction:column; }
.ldrawer.open{ transform:translateX(0); visibility:visible;
  transition:transform .26s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion:reduce){ .ldrawer{ transition:none; } }
.ldrawer-head{ padding:22px 24px 16px; border-bottom:1px solid var(--line);
  position:relative; flex:none; }
.ldrawer-kicker{ margin:0 0 4px; font-size:.72rem; font-weight:750; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent-text); }
.ldrawer-head h2{ margin:0; font-size:1.22rem; line-height:1.25; letter-spacing:-.01em;
  padding-right:48px; }
.ldrawer-close{ position:absolute; top:18px; right:18px; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text);
  font-size:1rem; cursor:pointer; }
.ldrawer-close:hover{ border-color:var(--accent-text); color:var(--accent-text); }
.ldrawer-body{ padding:6px 24px 24px; overflow-y:auto; flex:1 1 auto; }
.ldrawer-nav{ flex:none; padding:14px 24px; border-top:1px solid var(--line);
  background:var(--bg); }
.ldrawer-nav button{ font:inherit; font-weight:650; cursor:pointer; padding:10px 18px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); }
.ldrawer-nav button:hover{ border-color:var(--accent-text); color:var(--accent-text); }
.faq-item{ padding:20px 0; border-bottom:1px solid var(--line); }
.faq-item:last-of-type{ border-bottom:0; }
.faq-item h3{ margin:0 0 8px; font-size:1.01rem; line-height:1.35; letter-spacing:-.005em; }
.faq-item p{ margin:0; font-size:.94rem; color:var(--text-soft); }
.faq-tail{ margin:4px 0 0; padding:16px 18px; border-radius:12px; background:var(--tint);
  font-size:.92rem; }

/* ---- the FAQ page --------------------------------------------------------- */
.faqp-filter{ margin:26px 0 8px; padding:20px 22px; border:1px solid var(--line);
  border-radius:16px; background:var(--tint); }
.faqp-label{ margin:0 0 12px; font-size:.74rem; font-weight:750; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-muted); }
.faqp-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
  max-width:none; }
.faqp-chips li{ margin:0; }
.faqp-chip{ font:inherit; font-size:.88rem; font-weight:650; cursor:pointer;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-soft); }
.faqp-chip:hover{ border-color:var(--accent-text); color:var(--accent-text); }
/* the selected chip inverts against the page, so it holds in both themes */
.faqp-chip.is-on{ background:var(--accent-text); border-color:var(--accent-text);
  color:var(--bg); }
.faqp-count{ margin:14px 0 0; font-size:.88rem; color:var(--text-muted); }
.faqp-groups{ margin-top:34px; }
.faqp-group{ margin-top:40px; }
.faqp-group:first-child{ margin-top:0; }
.faqp-group h3{ display:flex; align-items:center; gap:12px; margin:0 0 6px;
  font-size:1.16rem; letter-spacing:-.01em; }
.faqp-group h3 .icon-badge{ width:38px; height:38px; border-radius:11px; flex:none; }
.faqp-group h3 .icon-badge svg{ width:20px; height:20px; }
.faqp-item{ border-bottom:1px solid var(--line); }
.faqp-item summary{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; cursor:pointer; padding:16px 2px; font-weight:650; font-size:1rem;
  line-height:1.4; list-style:none; }
.faqp-item summary::-webkit-details-marker{ display:none; }
.faqp-item summary:hover{ color:var(--accent-text); }
.faqp-mark{ position:relative; flex:none; width:18px; height:18px; margin-top:3px; }
.faqp-mark::before, .faqp-mark::after{ content:""; position:absolute; left:1px; top:8px;
  width:16px; height:2px; border-radius:2px; background:var(--accent-text);
  transition:transform .18s ease; }
.faqp-mark::after{ transform:rotate(90deg); }
.faqp-item[open] .faqp-mark::after{ transform:rotate(0deg); }
.faqp-a{ padding:0 34px 20px 2px; }
.faqp-a p{ margin:0; color:var(--text-soft); font-size:.96rem; }
.faqp-more{ margin:18px 0 0; font-size:.92rem; font-weight:650; }
@media (max-width:640px){
  .faqp-a{ padding-right:2px; }
  .faqp-item summary{ font-size:.96rem; }
}
@media print{
  .faqp-filter{ display:none; }
  .faqp-item .faqp-a{ display:block !important; }
  .faqp-mark{ display:none; }
}

/* ---- About: "Why that matters to a public agency" ------------------------ */
.why-agency{ display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:start;
  margin-top:52px; }
.why-agency > div > h3{ margin-top:0; }
.why-agency p{ max-width:none; }
.why-agency .pull{ margin:6px 0 0; }
@media (max-width:900px){
  .why-agency{ grid-template-columns:1fr; gap:26px; }
  .why-agency .pull{ margin-top:0; }
}

/* ---- implementation process bar ------------------------------------------ */
.gpath{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:38px 0 0; padding:0;
  list-style:none; max-width:none; }
.gstep{ position:relative; margin:0; padding:0 16px; text-align:center;
  display:flex; flex-direction:column; }
.gstep::before{ content:""; position:absolute; top:23px; left:0; right:0; height:2px;
  background:var(--line); }
.gstep:first-child::before{ left:50%; }
.gstep:last-child::before{ right:50%; }
.gnum{ position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px;
  margin:0 auto 16px; border-radius:50%; border:2px solid var(--accent-ui);
  background:var(--surface); font-size:.86rem; font-weight:750; letter-spacing:.06em;
  color:var(--accent-text); }
.gstep h3{ margin:0 0 6px; font-size:1.1rem; letter-spacing:-.01em; }
.gdur{ margin:0 0 12px; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); }
.gbody{ margin:0 0 14px; font-size:.9rem; line-height:1.5; color:var(--text-soft); }
/* the "your part" line sits on one baseline across all five steps */
.gpart{ margin:auto 0 0; padding-top:6px; font-size:.82rem; color:var(--text); }
.gpart span{ display:block; font-size:.68rem; font-weight:750; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:3px; }
.gnote{ margin:34px auto 0; text-align:center; font-size:1rem; font-weight:600; }
@media (max-width:940px){
  .gpath{ grid-template-columns:1fr; gap:0; }
  .gstep{ display:grid; grid-template-columns:48px 1fr; gap:0 18px; text-align:left;
    padding:0 0 26px; }
  .gpart{ margin-top:0; }
  .gstep::before{ top:48px; bottom:0; left:23px; right:auto; width:2px; height:auto; }
  .gstep:first-child::before, .gstep:last-child::before{ left:23px; }
  .gstep:last-child::before{ display:none; }
  .gnum{ grid-row:1; margin:0; }
  .gstep h3{ grid-column:2; grid-row:1; align-self:center; }
  .gdur, .gbody, .gpart{ grid-column:2; }
  .gnote{ text-align:left; }
}
@media print{
  .gpath{ grid-template-columns:repeat(5,1fr); }
  .gstep::before{ display:none; }
}

/* ---- pick the areas you need --------------------------------------------- */
.pick{ border:0; margin:30px 0 0; padding:0; min-width:0; }
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:12px;
  grid-auto-rows:1fr; margin:0; padding:0; list-style:none; max-width:none; }
.pick-grid li{ margin:0; display:flex; }
.pick-item{ display:flex; align-items:center; gap:13px; width:100%; padding:14px 16px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface); cursor:pointer; }
.pick-item:hover{ border-color:var(--accent-ui); }
.pick-item input{ flex:none; width:20px; height:20px; accent-color:var(--accent-text);
  cursor:pointer; }
.pick-item:has(input:checked){ border-color:var(--accent-text); background:var(--tint); }
.pick-item:has(input:focus-visible){ outline:3px solid var(--accent-text); outline-offset:2px; }
.pick-badge{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  flex:none; background:var(--tint); border:1px solid var(--line); }
.pick-item:has(input:checked) .pick-badge{ background:var(--surface); }
.pick-badge .icon-badge{ width:auto; height:auto; border:0; background:none; }
.pick-badge svg{ width:19px; height:19px; }
.pick-name{ display:block; font-size:.94rem; font-weight:650; line-height:1.3; }
.pick-n{ display:block; margin-top:2px; font-size:.78rem; color:var(--text-muted); }
.pick-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pick-count{ margin:14px 0 0; font-size:.92rem; color:var(--text-muted); }
.jr-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 0;
  padding:14px 18px; border:1px solid var(--accent-ui); border-radius:13px;
  background:var(--tint); }
/* display:flex would otherwise beat the [hidden] attribute */
.jr-filter[hidden]{ display:none; }
.jr-filter-t{ font-weight:650; }
@media print{ .pick, .pick-tools, .jr-filter{ display:none; } }

/* ---- the five-step implementation path ----------------------------------- */
/* ---- the journey as an expandable feature timeline ------------------------ */
.jr-tools{ margin:22px 0 0; }
.jr-groups{ margin-top:26px; position:relative; }
.jr-groups::before{ content:""; position:absolute; left:31px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent); }
.jr-group{ position:relative; margin:0 0 12px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); }
.jr-group:last-child{ margin-bottom:0; }
.jr-group > summary{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:18px; padding:18px 20px; cursor:pointer; list-style:none; }
.jr-group > summary::-webkit-details-marker{ display:none; }
.jr-group > summary:hover .jrg-name{ color:var(--accent-text); }
.jrg-badge{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  flex:none; background:var(--tint); border:1px solid var(--line); }
.jrg-badge .icon-badge{ width:auto; height:auto; border:0; background:none; }
.jrg-badge svg{ width:22px; height:22px; }
.jrg-name{ display:block; font-size:1.06rem; font-weight:700; letter-spacing:-.01em;
  line-height:1.3; }
.jrg-desc{ display:block; margin-top:4px; font-size:.9rem; color:var(--text-soft);
  line-height:1.45; }
.jrg-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.jrg-stages{ font-size:.72rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); white-space:nowrap; }
.jrg-count{ font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
.jrg-mark{ position:relative; width:20px; height:20px; flex:none; }
.jrg-mark::before, .jrg-mark::after{ content:""; position:absolute; left:1px; top:9px;
  width:18px; height:2px; border-radius:2px; background:var(--accent-text);
  transition:transform .18s ease; }
.jrg-mark::after{ transform:rotate(90deg); }
.jr-group[open] .jrg-mark::after{ transform:rotate(0deg); }
.jr-group[open]{ border-color:var(--accent-ui); }
.jrg-body{ padding:4px 20px 22px; border-top:1px solid var(--line); }
.jrg-body .jr-list{ margin-top:6px; }
.jrg-body .jr-list::before{ top:20px; bottom:20px; }
@media (max-width:820px){
  .jr-groups::before{ display:none; }
  .jr-group > summary{ grid-template-columns:auto 1fr auto; gap:14px; }
  .jrg-meta{ grid-column:2; grid-row:2; flex-direction:row; align-items:center; gap:10px;
    justify-content:flex-start; text-align:left; }
  .jrg-mark{ grid-column:3; grid-row:1; }
}
@media print{
  .jr-tools{ display:none; }
  .jr-group > summary .jrg-mark{ display:none; }
  .jrg-body{ display:block !important; }
}
#stages-h{ margin-top:0; }

/* "How Tansi works" is 60px wider than "Journey" was, which pushed the last
   nav item under the demo button. The header bar runs wider than the body
   measure so the row fits again; the content columns are untouched. */
@media (min-width:1200px){
  .site-header .header-inner{ max-width:1320px; }
}
/* the global `ul { max-width: var(--measure) }` was capping the nav row at
   643px, so the last item overflowed under the demo button */
.site-nav > ul{ max-width:none; }
@media (min-width:1024px){
  .site-nav > ul{ gap:3px; }
  .site-nav > ul > li > a,
  .site-nav > ul > li > .mega-toggle{ padding-left:7px; padding-right:7px; }
}

/* ---- Who we serve mega: government first --------------------------------- */
.nav-mega{ display:grid; gap:0; align-items:start; }
.nav-mega.cols-3{ grid-template-columns:1.14fr 1fr 1fr; }
.nav-mega.cols-4{ grid-template-columns:repeat(4,1fr); }
.nav-mega.cols-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1340px){ .nav-mega.cols-5{ grid-template-columns:repeat(3,1fr); } }
.nav-mega .who-col + .who-head{ margin-top:26px; }
.who-col{ padding:4px 30px; border-left:1px solid var(--line); }
.who-col:first-child{ border-left:0; padding-left:4px; }
.who-head{ display:flex; align-items:flex-start; gap:14px; padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--line); }
.who-hicon{ display:grid; place-items:center; width:42px; height:42px; flex:none;
  color:var(--accent-text); }
/* these icons sit outside .icon-badge, so they need their own stroke rules */
.who-hicon svg, .wf-i svg{ fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.who-hicon svg{ width:30px; height:30px; }
.who-hname{ display:block; font-size:1.08rem; font-weight:750; letter-spacing:-.01em;
  color:var(--accent-text); line-height:1.25; }
.who-hsub{ display:block; margin-top:3px; font-size:.85rem; color:var(--text-soft); }
.nav-mega ul{ margin:0; padding:0; list-style:none; max-width:none; }
.nav-mega li{ margin:0; border-bottom:1px solid var(--line); }
.nav-mega li:last-child{ border-bottom:0; }
.nav-mega li > a{ display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:14px;
  padding:13px 4px; border-radius:10px; }
.nav-mega li > a:hover{ background:var(--tint); }
.nav-mega .icon-badge{ width:38px; height:38px; border-radius:11px; flex:none; }
.nav-mega .icon-badge svg{ width:20px; height:20px; }
.nav-mega .m-text{ font-size:.95rem; font-weight:650; line-height:1.3; }
.nav-mega .m-text span{ display:block; margin-top:4px; font-size:.84rem; font-weight:400;
  line-height:1.45; color:var(--text-soft); }
.m-go{ align-self:center; font-size:1.25rem; line-height:1; color:var(--text-muted); }
.nav-mega li > a:hover .m-go{ color:var(--accent-text); }
.who-art{ display:block; width:100%; height:auto; margin-top:18px; color:var(--line); }

/* the band underneath */
.who-foot .wrap{ display:grid; grid-template-columns:1.9fr repeat(4,1fr); gap:16px;
  align-items:center; }
/* without this the long link labels blow past their fr track and crush the lead */
.who-foot .wrap > *{ min-width:0; }

/* ---- the panels become floating cards with the band pinned inside -------- */
.mega{ left:16px; right:16px; top:calc(100% + 8px);
  border:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:18px;
  box-shadow:0 26px 60px rgba(9,26,33,.22);
  /* the header grows a row on narrower screens, so leave it headroom */
  max-height:calc(100vh - 140px); overflow:hidden;
  display:flex; flex-direction:column; }
.mega[hidden]{ display:none !important; }
.mega-inner{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.mega-foot{ flex:none; border-radius:0 0 17px 17px; }
@media (max-width:1023px){
  .mega{ left:0; right:0; top:100%; border-radius:0; border-left:0; border-right:0;
    max-height:none; display:block; overflow:visible; }
  .mega-inner{ overflow:visible; }
}

/* ---- tighter rows, so seven segments and the band fit one screen --------- */
/* the base .mega-inner caps itself at the body measure; the panel is a card
   now and should use its full width */
.nav-mega{ max-width:none; padding:22px 26px 18px; }
.who-foot .wrap{ max-width:none; }
/* the floating search pill must not sit over an open panel */
body:has(.mega:not([hidden])) .tsearch{ display:none; }
.who-col{ padding:2px 24px; }
.who-head{ padding-bottom:11px; margin-bottom:2px; gap:12px; }
.who-hicon{ width:34px; height:34px; }
.who-hicon svg{ width:26px; height:26px; }
.who-hname{ font-size:1rem; }
.who-hsub{ font-size:.8rem; margin-top:2px; }
.nav-mega li > a{ gap:12px; padding:10px 6px; }
.nav-mega .icon-badge{ width:34px; height:34px; border-radius:10px; }
.nav-mega .icon-badge svg{ width:18px; height:18px; }
.nav-mega .m-text{ font-size:.91rem; }
.nav-mega .m-text span{ margin-top:2px; font-size:.8rem; line-height:1.4; }
.who-art{ margin-top:14px; }
.who-foot .wrap{ padding-top:14px; padding-bottom:14px; }

/* Any `display:` rule outranks the UA's [hidden] { display:none }, which was
   leaving the differentiator tab strip on screen below 761px even though the
   script had hidden it. One reset covers every element the scripts hide. */
[hidden]{ display:none !important; }
.wf-lead{ display:flex; align-items:flex-start; gap:12px; padding-right:22px;
  border-right:1px solid var(--line); }
.wf-link{ display:flex; align-items:flex-start; gap:11px; border-radius:10px; padding:6px; }
.wf-link:hover{ background:var(--surface); }
.wf-i{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); color:var(--accent-text); }
.wf-i svg{ width:18px; height:18px; }
.wf-t{ min-width:0; font-size:.88rem; font-weight:700; line-height:1.3; }
.wf-t span{ display:block; margin-top:3px; font-size:.8rem; font-weight:400;
  color:var(--text-soft); }
@media (max-width:1180px){
  .nav-mega.cols-3, .nav-mega.cols-4, .nav-mega.cols-5{ grid-template-columns:1fr 1fr; }
  .who-col:nth-child(3){ border-left:0; padding-left:4px; }
  .who-art{ display:none; }
  .who-foot .wrap{ grid-template-columns:1fr 1fr; }
  .wf-lead{ grid-column:1 / -1; border-right:0; padding-right:0; }
}
@media (max-width:760px){
  .nav-mega.cols-3, .nav-mega.cols-4, .nav-mega.cols-5{ grid-template-columns:1fr; }
  .who-col{ border-left:0; padding:4px; }
  .who-foot .wrap{ grid-template-columns:1fr; }
}

/* ---- About us panel ------------------------------------------------------ */
.about-mega .who-head{ border-bottom:1px solid var(--line); }
.about-mega .who-hname{ font-size:.78rem; font-weight:750; letter-spacing:.16em;
  text-transform:uppercase; }
.ab-cta{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  margin-top:14px; padding:13px 14px; border:1px solid var(--accent-ui); border-radius:12px;
  background:var(--tint); }
.ab-cta:hover{ border-color:var(--accent-text); }
.ab-cta .icon-badge{ width:34px; height:34px; border-radius:10px; }
.ab-cta .icon-badge svg{ width:18px; height:18px; }
.ab-cta .m-text{ font-size:.91rem; font-weight:700; color:var(--accent-text); }
.ab-cta .m-text span{ display:block; margin-top:2px; font-size:.8rem; font-weight:400;
  color:var(--text-soft); }
.ab-quote{ margin:18px 0 0; padding:20px 22px; border-radius:14px; background:var(--tint); }
.ab-quote blockquote{ margin:0; border:0; padding:0; }
.ab-quote p{ margin:0; font-size:1rem; line-height:1.45; font-weight:600; }
.ab-quote p::before{ content:"\201C"; display:block; font-size:2.2rem; line-height:.6;
  color:var(--accent-text); margin-bottom:10px; }
.ab-quote figcaption{ margin-top:12px; font-size:.85rem; font-weight:650;
  color:var(--accent-text); }
.ab-hero{ display:grid; align-items:end; min-height:180px; margin-bottom:18px; padding:22px;
  border-radius:14px; color:#fff;
  background:linear-gradient(150deg,#0C2733 0%,#123B4C 52%,#0E5C74 100%); }
.ab-hero p{ margin:0; font-size:1.02rem; font-weight:700; line-height:1.4; max-width:none; }
.ab-foot .wrap{ display:grid; grid-template-columns:auto repeat(5,1fr); gap:18px;
  align-items:center; }
.ab-foot .wrap > *{ min-width:0; }
.ab-glance{ font-size:.72rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); }
.ab-stat{ display:flex; align-items:center; gap:11px; }
.ab-si{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px;
  background:var(--surface); border:1px solid var(--line); color:var(--accent-text); }
.ab-si svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.ab-st b{ display:block; font-size:1rem; line-height:1.2; }
.ab-st span{ display:block; margin-top:2px; font-size:.78rem; color:var(--text-soft); }
@media (max-width:1180px){
  .ab-foot .wrap{ grid-template-columns:1fr 1fr; }
  .ab-glance{ grid-column:1 / -1; }
  .ab-hero{ min-height:130px; }
}
@media (max-width:760px){ .ab-foot .wrap{ grid-template-columns:1fr; } }

/* ---- What we do: problems, areas, chain ---------------------------------- */
/* problems read as one row of columns divided by hairlines, not as cards */
.solve-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:30px 0 0;
  padding:0; list-style:none; max-width:none; }
.solve-item{ margin:0; padding:0 24px; border-left:1px solid var(--line); }
.solve-item:first-child{ border-left:0; padding-left:0; }
.solve-item .si{ display:block; width:34px; height:34px; margin-bottom:14px;
  color:var(--accent-text); }
.solve-item .si svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.solve-item h3{ margin:0 0 10px; font-size:1rem; line-height:1.35; letter-spacing:-.005em; }
.solve-item p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--text-soft); }
.areas-sub{ margin:8px 0 0; font-size:1rem; color:var(--text-soft); }
@media (max-width:1100px){
  .solve-grid{ grid-template-columns:repeat(2,1fr); row-gap:28px; }
  .solve-item{ padding:0 20px; }
  .solve-item:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (max-width:620px){
  .solve-grid{ grid-template-columns:1fr; }
  .solve-item{ border-left:0; padding:0; }
}
.old-solve-grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.wa-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  grid-auto-rows:1fr; margin:34px 0 0; padding:0; list-style:none; max-width:none; }
@media (max-width:1200px){ .wa-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .wa-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wa-grid{ grid-template-columns:1fr; } }
.wa-grid li{ margin:0; display:flex; }
.wa-grid a{ display:flex; flex-direction:column; width:100%; padding:22px 18px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  text-decoration:none; color:var(--text); }
.wa-grid a:hover, .wa-grid a:focus-visible{ text-decoration:none; }
.wa-grid a:hover{ border-color:var(--accent-ui); }
.wa-i{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:12px; background:var(--tint); border:1px solid var(--line);
  color:var(--accent-text); }
.wa-i svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.wa-n{ display:block; font-size:1.08rem; font-weight:700; letter-spacing:-.01em;
  line-height:1.3; }
.wa-grid a:hover .wa-n{ color:var(--accent-text); }
.wa-d{ display:block; margin-top:8px; font-size:.9rem; line-height:1.5; color:var(--text-soft); }
.wa-f{ display:block; margin:auto 0 0; padding-top:14px; margin-top:16px;
  border-top:1px solid var(--line); }
.wa-c{ display:block; font-size:.8rem; color:var(--text-muted); }
.wa-v{ display:block; margin-top:6px; font-size:.85rem; font-weight:700;
  color:var(--accent-text); }
.wc-grid{ display:grid; grid-template-columns:.78fr 2.6fr; gap:46px;
  align-items:center; }
.wc-lead p{ margin:14px 0 0; font-size:.94rem; line-height:1.6; color:var(--text-soft);
  max-width:none; }
.wc-btn{ margin-top:20px; }
.wc-chain{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin:0; padding:0;
  list-style:none; max-width:none; }
@media (max-width:1100px){ .wc-grid{ grid-template-columns:1fr; gap:30px; } }
.wc-step{ position:relative; margin:0; padding:0 12px; text-align:center; }
.wc-step::before{ content:""; position:absolute; top:29px; left:0; right:0; height:2px;
  background:var(--line); }
.wc-step:first-child::before{ left:50%; }
.wc-step:last-child::before{ right:50%; }
.wc-i{ position:relative; z-index:1; display:grid; place-items:center; width:58px; height:58px;
  margin:0 auto 14px; border-radius:50%; border:2px solid var(--accent-ui);
  background:var(--surface); color:var(--accent-text); }
.wc-i svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.wc-n{ display:block; font-size:1rem; font-weight:700; }
.wc-d{ display:block; margin-top:5px; font-size:.85rem; line-height:1.45; color:var(--text-soft); }
.wc-note{ margin:32px auto 0; text-align:center; font-size:1rem; font-weight:650; }
@media (max-width:1000px){ .wc-chain{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
  .wc-step:nth-child(3)::before{ right:50%; } .wc-step:nth-child(4)::before{ left:50%; } }
@media (max-width:620px){
  .wc-chain{ grid-template-columns:1fr; }
  .wc-step{ display:grid; grid-template-columns:58px 1fr; gap:0 16px; text-align:left;
    padding:0 0 22px; }
  .wc-step::before{ top:58px; bottom:0; left:28px; right:auto; width:2px; height:auto; }
  .wc-step:last-child::before{ display:none; }
  .wc-i{ grid-row:1 / span 2; margin:0; }
  .wc-note{ text-align:left; }
}
@media print{ .wc-step::before{ display:none; } }

/* ---- What we do hero ------------------------------------------------------ */
.wwd-hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center; }
.wwd-hero-grid h1{ font-size:clamp(2rem,3.1vw,2.85rem); }
.wwd-hero-grid .lede{ max-width:none; font-size:1.02rem; }
.wwd-art-wrap{ min-width:0; }
.wwd-art{ display:block; width:100%; height:auto; border-radius:14px; }
.wwd-cap{ margin:14px 0 0; padding:11px 16px; border-radius:999px; text-align:center;
  font-size:.9rem; font-weight:650; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); color:#fff; }
@media (max-width:980px){
  .wwd-hero-grid{ grid-template-columns:1fr; gap:30px; }
}

/* ---- proven in the field -------------------------------------------------- */
.wp-grid{ display:grid; grid-template-columns:repeat(4,1fr) 1.15fr; gap:18px;
  margin-top:32px; align-items:stretch; }
.wp-grid > *{ min-width:0; }
.wp-stat{ display:flex; align-items:flex-start; gap:13px; padding:4px 22px 4px 0; }
.wp-i{ display:block; width:30px; height:30px; flex:none; color:var(--accent-text); }
.wp-i svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.wp-t b{ display:block; font-size:1.32rem; letter-spacing:-.02em; line-height:1.15; }
.wp-t span{ display:block; margin-top:6px; font-size:.85rem; line-height:1.45;
  color:var(--text-soft); }
.wp-cta{ display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:20px 20px; border-radius:14px; background:var(--tint);
  border:1px solid var(--accent-ui); text-decoration:none; }
.wp-cta b{ font-size:.98rem; line-height:1.4; color:var(--text); }
.wp-cta > span{ font-size:.9rem; font-weight:700; color:var(--accent-text); }
@media (max-width:1160px){ .wp-grid{ grid-template-columns:repeat(2,1fr); } }
/* ---- the closing band ----------------------------------------------------- */
.wwd-cta{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px;
  padding:30px 32px; border-radius:18px; background:var(--tint);
  border:1px solid var(--line); text-align:left; }
.wwd-cta h2, .wwd-cta p{ color:var(--text); text-align:left; margin-left:0; margin-right:0;
  max-width:none; }
.wwd-cta h2{ font-size:1.34rem; letter-spacing:-.015em; line-height:1.3; }
.wwd-cta p{ margin:8px 0 0; font-size:.94rem; line-height:1.55; color:var(--text-soft);
  max-width:56ch; }
.wwd-cta .btn-row{ margin:0; flex-wrap:nowrap; }
.wc-ico{ display:grid; place-items:center; width:60px; height:60px; flex:none;
  border-radius:16px; background:var(--surface); border:1px solid var(--line);
  color:var(--accent-text); }
.wc-ico svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1000px){
  .wwd-cta{ grid-template-columns:auto 1fr; gap:20px; padding:26px 22px; }
  .wwd-cta .btn-row{ grid-column:1 / -1; flex-wrap:wrap; }
}
@media (max-width:620px){
  .wwd-cta{ grid-template-columns:1fr; }
  .wwd-cta .btn-row{ grid-column:auto; }
}
@media (max-width:620px){ .wp-grid{ grid-template-columns:1fr; } }

/* ---- Trust center: government authorizations ----------------------------- */
.gov-grid{ display:grid; grid-template-columns:1.35fr .95fr; gap:22px; margin-top:32px;
  align-items:start; }
.gov-card{ padding:26px 26px 24px; border:1px solid var(--accent-ui); border-radius:16px;
  background:var(--surface); }
/* the artwork carries dark text on transparency, so it keeps its white plate
   in both themes rather than vanishing into a dark page */
.gov-badge{ display:block; width:100%; max-width:440px; height:auto; margin:0 0 22px;
  border-radius:12px; border:1px solid var(--line); background:#fff; }
.gov-facts{ margin:0; display:grid; gap:0; }
.gov-facts > div{ display:grid; grid-template-columns:150px 1fr; gap:18px; padding:12px 0;
  border-top:1px solid var(--line); }
.gov-facts > div:first-child{ border-top:0; padding-top:0; }
.gov-facts dt{ font-size:.82rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-text); margin:0; }
.gov-facts dd{ margin:0; font-size:.94rem; line-height:1.55; }
.gov-note{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--text-soft); }
.gov-side{ display:grid; gap:16px; }
.gov-side .note{ margin:0; }
.trust-btn{ margin-top:8px; }
.trust-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:900px){
  .gov-grid{ grid-template-columns:1fr; }
  .gov-facts > div{ grid-template-columns:1fr; gap:4px; }
}

/* ---- Home: the credential bar under the hero ----------------------------- */
.cred-bar{ padding:30px 0; background:var(--tint); border-bottom:1px solid var(--line); }
.cred-row{ display:grid; grid-template-columns:auto repeat(3,1fr) auto; gap:26px;
  align-items:center; margin:0; padding:0; list-style:none; max-width:none; }
.cred-row > li{ margin:0; min-width:0; }
.cred-row > li + li{ padding-left:26px; border-left:1px solid var(--line); }
.cred-row .cred-go{ border-left:0; padding-left:0; }
.cred-badge{ display:block; width:190px; height:auto; border-radius:10px;
  border:1px solid var(--line); background:#fff; }
.cred-row b{ display:block; font-size:.95rem; line-height:1.3; }
.cred-row span{ display:block; margin-top:5px; font-size:.84rem; line-height:1.5;
  color:var(--text-soft); }
@media (max-width:1100px){
  .cred-row{ grid-template-columns:auto 1fr 1fr; row-gap:22px; }
  .cred-row > li:nth-child(4){ grid-column:2 / -1; }
  .cred-row .cred-go{ grid-column:1 / -1; padding-left:0; border-left:0; }
}
@media (max-width:700px){
  .cred-row{ grid-template-columns:1fr; }
  .cred-row > li + li{ padding-left:0; border-left:0; padding-top:16px;
    border-top:1px solid var(--line); }
  .cred-row > li:nth-child(4){ grid-column:auto; }
  .cred-badge{ width:230px; }
}

/* ================= How Tansi works (authored page) ================= */
.tint-sec{ background:var(--tint); border-block:1px solid var(--line); }
/* ---- picker ---- */
.pick-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  margin:30px 0 0;padding:0;list-style:none;max-width:none}
.pick{position:relative;margin:0}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{display:flex;flex-direction:column;height:100%;min-height:168px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:22px 24px 24px;transition:border-color .12s,background .12s,box-shadow .12s}
.pick label:hover{border-color:var(--border-ui);box-shadow:0 10px 26px -20px rgba(12,30,39,.5)}
.pick input:focus-visible + label{outline:3px solid var(--focus);outline-offset:2px}
.pick input:checked + label{border-color:var(--accent-ui);background:var(--bg-alt);
  box-shadow:inset 0 0 0 1.5px var(--accent-ui)}
.pick-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:16px}
.pick-ico{flex:none;width:52px;height:52px;border-radius:13px;background:var(--bg-alt);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--accent-text)}
.pick input:checked + label .pick-ico{background:var(--surface);border-color:var(--accent-ui)}
.pick-ico svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tick{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid var(--border-ui);
  background:var(--surface);display:grid;place-items:center;margin-top:2px}
.pick input:checked + label .tick{background:var(--accent-ui);border-color:var(--accent-ui)}
.tick svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pick input:checked + label .tick svg{opacity:1}
.pick-name{display:block;font-weight:700;font-size:19.5px;line-height:1.3;color:var(--text);
  letter-spacing:-.005em}
.pick-desc{display:block;margin-top:8px;font-size:16px;line-height:1.5;color:var(--text-soft)}

/* ---- "not sure?" card: sits in the picker grid, filling the last row's gap ---- */
.pick-ask{grid-column:span 2;margin:0;list-style:none}
.pick-grid.kanban .pick-ask{grid-column:auto}
.ask{height:100%;padding:20px 22px;background:var(--surface);border:1.5px dashed var(--line-strong);
  border-radius:16px;display:flex;flex-direction:column;justify-content:center}
.ask-label{display:block;font-weight:750;font-size:17.5px;line-height:1.3;color:var(--text);
  letter-spacing:-.005em}
.ask-hint{margin:6px 0 14px;font-size:15px;line-height:1.5;color:var(--text-soft)}
.ask-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.ask-box{width:100%;font:inherit;font-size:15px;line-height:1.5;color:var(--text);
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
  resize:vertical;min-height:72px}
.ask-box::placeholder{color:var(--text-muted)}
.ask-box:focus{outline:none;border-color:var(--accent-ui);background:var(--surface)}
.ask-tools{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.ask-tools .btn{white-space:nowrap}
.pick-ask.narrow .ask-row{grid-template-columns:1fr}
.pick-ask.narrow .ask-tools{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.pick-ask.narrow .ask-label{font-size:16px}
.pick-ask.narrow .ask-hint{font-size:14px;margin-bottom:11px}
.pick-ask.narrow .ask-box{min-height:64px;font-size:14.5px}
@media (max-width:760px){
  .pick-ask{grid-column:span 1}
  .ask-row{grid-template-columns:1fr}
  .ask-tools{flex-direction:row;flex-wrap:wrap;align-items:center}
}
.btn-quiet{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:650;color:var(--text-muted);padding:4px 2px;text-decoration:underline;
  text-underline-offset:3px}
.btn-quiet:hover{color:var(--accent-text)}
.ask-out{margin:18px 0 0;padding:14px 16px;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:12px}
.ask-out[hidden]{display:none}
.ask-out p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--text);max-width:none}
.ask-out p:last-child{margin-bottom:0}
.ask-hits{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.ask-hits li{margin:0;font-size:12.5px;font-weight:700;color:var(--accent-text);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 11px}
.ask-hits li em{font-style:normal;font-weight:500;color:var(--text-muted)}


/* ---- included / add-on legend ---- */
.legend{list-style:none;margin:0 0 4px;padding:14px 18px;max-width:none;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  display:grid;gap:9px}
.legend li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;
  color:var(--text-soft);margin:0}
.legend b{color:var(--text);font-weight:750}
.lg-mark{flex:none;width:13px;height:13px;border-radius:3px;margin-top:5px}
.lg-mark.inc{background:var(--accent-ui)}
.lg-mark.add{background:transparent;box-shadow:inset 0 0 0 2px var(--border-ui)}
.rd-note{font-size:13px;line-height:1.5;color:var(--text-muted);margin:-4px 0 12px}

/* ---- printable selection summary ---- */
#printOut{display:none}
.po-head{border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:18px}
.po-head h1{font-size:22pt;margin:0 0 4px}
.po-meta{font-size:10pt;color:#333;margin:0}
.po-sec{margin:0 0 20px}
.po-sec.tight{page-break-inside:avoid}
.po-tail{page-break-inside:avoid}
.po-sec h2{font-size:13pt;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #999}
.po-areas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.po-areas li{font-size:10pt;font-weight:700;border:1px solid #666;border-radius:3px;padding:3px 9px}
.po-tbl{width:100%;border-collapse:collapse;font-size:10pt}
.po-tbl thead{display:table-header-group}
.po-tbl tr{page-break-inside:avoid}
.po-tbl th{text-align:left;border-bottom:1.5px solid #000;padding:6px 8px 5px;font-size:9pt;
  text-transform:uppercase;letter-spacing:.06em}
.po-tbl td{border-bottom:1px solid #ccc;padding:6px 8px;vertical-align:top}
.po-tbl td.st{white-space:nowrap;font-weight:700}
.po-grp{font-weight:800;background:#eee}
.po-steps{list-style:none;margin:0;padding:0;font-size:10pt}
.po-steps li{margin-bottom:7px;padding-left:0}
.po-steps b{display:inline-block;min-width:96px}
.po-foot{margin-top:16px;padding-top:9px;border-top:1px solid #999;font-size:9pt;color:#333}
@media print{
  body:has(#printOut:not(:empty)) > *{display:none !important}
  body:has(#printOut:not(:empty)) > main{display:block !important}
  body:has(#printOut:not(:empty)) main > *{display:none !important}
  body:has(#printOut:not(:empty)) main > #printOut{display:block !important}
  @page{margin:14mm}
  #printOut{color:#000;background:#fff;font-size:11pt}
}

/* ---- view switchers ---- */
.vswitch{display:inline-flex;gap:0;border:1.5px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--surface);margin:0}
.vswitch button{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  font-weight:650;font-size:14.5px;color:var(--text-soft);padding:9px 16px;min-height:42px;
  border-right:1px solid var(--line)}
.vswitch button:last-child{border-right:0}
.vswitch button:hover{color:var(--accent-text);background:var(--bg-alt)}
/* the site's validated button pair — white on --accent-ui is only 4.01:1 */
.vswitch button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.vrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:20px 0 0}
.vlabel{font-size:13px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted)}

/* ---- picker: kanban arrangement ---- */
.pick-grid.kanban{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  align-items:start}
.kcol{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:10px}
.kcol-h{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);padding:2px 4px 8px;border-bottom:1px solid var(--line);margin:0}
.pick-grid.kanban .pick label{min-height:0;padding:14px 15px;border-radius:12px}
.pick-grid.kanban .pick-top{margin-bottom:11px}
.pick-grid.kanban .pick-ico{width:42px;height:42px;border-radius:11px}
.pick-grid.kanban .pick-ico svg{width:22px;height:22px}
.pick-grid.kanban .pick-name{font-size:16px}
.pick-grid.kanban .pick-desc{font-size:14px;margin-top:6px}
@media (max-width:640px){
  .pick-grid{grid-template-columns:1fr;gap:12px}
  .pick label{min-height:0;padding:18px 20px}
  .pick-top{margin-bottom:13px}
  .pick-ico{width:46px;height:46px}
}
.pick-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 0}
.pick-tools.endrow{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.btn svg.up{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.count{margin:18px 0 0;font-size:15.5px;font-weight:650;color:var(--text-soft)}
.count b{color:var(--accent-text)}

/* ---- implementation process bar (original) ---- */
.gpath{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:38px 0 0;padding:0;
  list-style:none;max-width:none}
.gstep{position:relative;margin:0;padding:0 16px;text-align:center;display:flex;flex-direction:column}
.gstep::before{content:"";position:absolute;top:23px;left:0;right:0;height:2px;background:var(--line)}
.gstep:first-child::before{left:50%}
.gstep:last-child::before{right:50%}
.gnum{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;
  margin:0 auto 16px;border-radius:50%;border:2px solid var(--accent-ui);background:var(--surface);
  font-size:.86rem;font-weight:750;letter-spacing:.06em;color:var(--accent-text)}
.gstep h3{margin:0 0 6px;font-size:1.1rem;letter-spacing:-.01em}
.gdur{margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted)}
.gbody{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:var(--text-soft)}
.gpart{margin:auto 0 0;padding-top:6px;font-size:.82rem;color:var(--text)}
.gpart span{display:block;font-size:.68rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:3px}
.gnote{margin:34px auto 0;text-align:center;font-size:1rem;font-weight:600;max-width:var(--measure)}
@media (max-width:940px){
  .gpath{grid-template-columns:1fr;gap:0}
  .gstep{display:grid;grid-template-columns:48px 1fr;gap:0 18px;text-align:left;padding:0 0 26px}
  .gpart{margin-top:0}
  .gstep::before{top:48px;bottom:0;left:23px;right:auto;width:2px;height:auto}
  .gstep:first-child::before,.gstep:last-child::before{left:23px}
  .gstep:last-child::before{display:none}
  .gnum{grid-row:1;margin:0}
  .gstep h3{grid-column:2;grid-row:1;align-self:center}
  .gdur,.gbody,.gpart{grid-column:2}
  .gnote{text-align:left}
}
@media print{
  .gpath{grid-template-columns:repeat(5,1fr)}
  .gstep::before{display:none}
}

/* ---- results: tiles view ---- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  margin:0;padding:0;list-style:none;max-width:none}
.tiles li{margin:0}
.tcard{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px}
.tcard .jr-num{margin-bottom:7px}
.tcard h3{font-size:1.04rem;margin:0 0 8px;letter-spacing:-.005em}
.tcard p{font-size:.92rem;color:var(--text-soft);margin:0 0 12px}
.tcard ul{list-style:none;margin:0;padding:0;max-width:none}
.tcard li{position:relative;padding-left:20px;margin-bottom:6px;font-size:.87rem;
  color:var(--text-soft);line-height:1.5}
.tcard li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:2px;background:var(--accent-ui)}

/* ---- results: kanban view ---- */
.kan{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start;margin:0;padding:0;list-style:none;max-width:none}
.kanc{background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:10px}
[data-theme="dark"] .kanc{background:var(--bg)}
.kanc-h{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;
  border-bottom:1px solid var(--line);margin:0}
.kanc-h .icon-badge{width:34px;height:34px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line)}
.kanc-h .icon-badge svg{width:18px;height:18px}
.kanc-t{font-size:13.5px;font-weight:800;line-height:1.3;margin:0;flex:1}
.kanc-n{font-size:11.5px;font-weight:750;color:var(--text-muted);white-space:nowrap}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.kcard h4{margin:0 0 5px;font-size:14.5px;line-height:1.35;letter-spacing:-.005em}
.kcard .jr-num{margin-bottom:5px}
.kcard p{margin:0;font-size:13px;color:var(--text-soft);line-height:1.5}

/* ---- journey groups (original) ---- */
.jr-tools{margin:22px 0 0}
.jr-groups{margin-top:26px;position:relative}
.jr-groups::before{content:"";position:absolute;left:31px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent)}
.jr-group{position:relative;margin:0 0 12px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface)}
.jr-group:last-child{margin-bottom:0}
.jr-group > summary{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:18px;padding:18px 20px;cursor:pointer;list-style:none}
.jr-group > summary::-webkit-details-marker{display:none}
.jr-group > summary:hover .jrg-name{color:var(--accent-text)}
.jrg-badge{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  flex:none;background:var(--tint);border:1px solid var(--line);color:var(--accent-text)}
.jrg-badge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.jrg-name{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.jrg-desc{display:block;margin-top:4px;font-size:.9rem;color:var(--text-soft);line-height:1.45}
.jrg-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.jrg-stages{font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);white-space:nowrap}
.jrg-count{font-size:.78rem;color:var(--text-muted);white-space:nowrap}
.jrg-mark{position:relative;width:20px;height:20px;flex:none}
.jrg-mark::before,.jrg-mark::after{content:"";position:absolute;left:1px;top:9px;
  width:18px;height:2px;border-radius:2px;background:var(--accent-text);transition:transform .18s ease}
.jrg-mark::after{transform:rotate(90deg)}
.jr-group[open] .jrg-mark::after{transform:rotate(0deg)}
.jr-group[open]{border-color:var(--accent-ui)}
.jrg-body{padding:4px 20px 22px;border-top:1px solid var(--line)}
.jrg-body .jr-list{margin-top:6px}
.jrg-body .jr-list::before{top:20px;bottom:20px}

/* ---- timeline items (original) ---- */
.jr-list{list-style:none;margin:0;padding:0;max-width:none;position:relative}
.jr-list::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  margin-left:-1px;background:var(--line)}
.jr-item{display:grid;grid-template-columns:1fr 104px 1fr;align-items:start;
  margin:0;padding:26px 0;position:relative}
.jr-item > .jr-media{grid-column:1;grid-row:1}
.jr-item > .jr-body{grid-column:3;grid-row:1}
.jr-item.jr-flip > .jr-media{grid-column:3;grid-row:1}
.jr-item.jr-flip > .jr-body{grid-column:1;grid-row:1}
.jr-dot{grid-column:2;grid-row:1;justify-self:center;align-self:center;z-index:1;
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent-ui);color:var(--accent-text)}
.jr-dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.jr-media{display:block;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-alt);overflow:hidden}
.jr-media svg{display:block;width:100%;height:auto}
.jr-body{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:24px 26px}
.jr-num{font-size:.72rem;font-weight:750;letter-spacing:.16em;color:var(--accent-text);
  display:block;margin-bottom:8px}
.jr-body h3{font-size:1.08rem;letter-spacing:.005em;margin:0 0 10px}
.jr-body > p{font-size:.94rem;color:var(--text-soft);margin:0 0 14px}
.jr-body ul{list-style:none;margin:0;padding:0;max-width:none}
.jr-body li{position:relative;padding-left:22px;margin-bottom:8px;font-size:.9rem;
  color:var(--text-soft);line-height:1.5}
.jr-body li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:2px;background:var(--accent-ui)}
.jr-mod{display:inline-block;font-size:.68rem;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-left:8px}
.addon-chip{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn-fg);background:var(--warn-bg);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:2px}
.empty{background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:14px;
  padding:38px 24px;text-align:center;color:var(--text-muted);font-size:16px}
/* ---- selection tray ---- */
.tray{position:fixed;right:20px;bottom:20px;z-index:70;width:min(410px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(12,30,39,.55);display:flex;flex-direction:column;
  max-height:min(72vh,660px);
  transform:translateY(24px);opacity:0;visibility:hidden;
  transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s}
[data-theme="dark"] .tray{box-shadow:0 26px 60px -24px rgba(0,0,0,.85)}
.tray.open{transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .22s ease,opacity .22s ease,visibility 0s linear 0s}
@media (prefers-reduced-motion:reduce){.tray{transition:none}}
.tray-head{display:flex;align-items:center;gap:10px;padding:16px 18px 12px;
  border-bottom:1px solid var(--line);flex:none}
.tray-title{font-weight:750;font-size:15.5px;margin:0;flex:1;line-height:1.3}
.tray-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);font-size:12.5px;font-weight:800}
.tray-min{appearance:none;border:1px solid var(--line);background:var(--bg-alt);cursor:pointer;
  width:34px;height:34px;border-radius:8px;color:var(--text-soft);font:inherit;font-size:15px;
  line-height:1;display:grid;place-items:center;flex:none}
.tray-min:hover{color:var(--accent-text);border-color:var(--accent-text)}
.tray-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 4px;flex:1 1 auto}
.tray-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
  animation:trayIn .22s ease both}
.tray-item:last-child{border-bottom:0}
@keyframes trayIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tray-item{animation:none}}
.tray-ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bg-alt);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--accent-text)}
.tray-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tray-txt{flex:1;min-width:0}
.tray-name{display:block;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--text)}
.tray-cat{display:block;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-text);margin-top:4px;line-height:1.4}
.tray-desc{display:block;font-size:13.5px;line-height:1.5;color:var(--text-soft);margin-top:5px}
.tray-x{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--text-muted);
  font:inherit;font-size:17px;line-height:1;padding:0;width:28px;height:28px;border-radius:6px;
  flex:none;align-self:flex-start}
.tray-x:hover{color:var(--accent-text);background:var(--bg-alt)}
.tray-foot{flex:none;padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--bg-alt);
  border-radius:0 0 17px 17px}
.tray-foot .btn{width:100%}
.tray-foot #trayClear{margin-top:8px}
.tray.min{max-height:none}
.tray.min .tray-body,.tray.min .tray-foot{display:none}
.tray.min .tray-head{border-bottom:0}
@media (max-width:640px){
  .tray{right:12px;left:12px;bottom:12px;width:auto;max-height:62vh;border-radius:16px}
  .tray-foot{border-radius:0 0 15px 15px}
}
@media print{.tray{display:none}}

/* ---- detail drawer (mirrors the site's .ldrawer, from the right) ---- */
.dscrim{position:fixed;inset:0;background:rgba(9,26,33,.42);z-index:88;opacity:0;visibility:hidden;
  transition:opacity .24s ease,visibility 0s linear .24s}
.dscrim.open{opacity:1;visibility:visible;transition:opacity .24s ease,visibility 0s linear 0s}
.rdrawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-22px 0 60px rgba(9,26,33,.22);
  transform:translateX(100%);visibility:hidden;
  transition:transform .26s ease,visibility 0s linear .26s;
  z-index:90;display:flex;flex-direction:column}
[data-theme="dark"] .rdrawer{box-shadow:-22px 0 60px rgba(0,0,0,.7)}
.rdrawer.open{transform:translateX(0);visibility:visible;
  transition:transform .26s ease,visibility 0s linear 0s}
@media (prefers-reduced-motion:reduce){.rdrawer,.dscrim{transition:none}}
.rd-head{padding:22px 24px 16px;border-bottom:1px solid var(--line);position:relative;flex:none}
.rd-kicker{margin:0 0 5px;font-size:.72rem;font-weight:750;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-text)}
.rd-head h2{margin:0;font-size:1.32rem;line-height:1.25;letter-spacing:-.012em;padding-right:52px}
.rd-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg-alt);color:var(--text);font-size:1.05rem;
  cursor:pointer;line-height:1;display:grid;place-items:center}
.rd-close:hover{border-color:var(--accent-text);color:var(--accent-text)}
.rd-body{padding:0 24px 26px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.rd-art{margin:20px 0 18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--art-bg)}
.rd-art svg{display:block;width:100%;height:auto}
.rd-lede{font-size:1rem;line-height:1.6;color:var(--text-soft);margin:0 0 18px}
.rd-mods{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px;padding:0;list-style:none}
.rd-mods li{margin:0;font-size:11.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);background:var(--bg-alt);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px}
.rd-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.rd-stat div{background:var(--bg-alt);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.rd-stat b{display:block;font-size:22px;font-weight:800;color:var(--accent-text);line-height:1.2}
.rd-stat span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted)}
.rd-h3{font-size:.95rem;font-weight:800;letter-spacing:.02em;margin:22px 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.rd-list{list-style:none;margin:0;padding:0}
.rd-list li{position:relative;padding-left:24px;margin-bottom:11px;font-size:.93rem;
  line-height:1.5;color:var(--text-soft)}
.rd-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:2px;background:var(--accent-ui)}
.rd-list.addon li::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-ui)}
.rd-list b{color:var(--text);font-weight:700;display:block}
.rd-mod{display:block;font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-muted);margin-top:3px}
.rd-foot{flex:none;padding:14px 24px 18px;border-top:1px solid var(--line);background:var(--bg-alt);
  display:flex;gap:10px;flex-wrap:wrap}
.tray-item{cursor:pointer}
.tray-item:hover{background:var(--bg-alt)}
.tray-more{display:block;appearance:none;border:0;background:transparent;padding:6px 0 0;
  font:inherit;font-size:12px;font-weight:750;color:var(--accent-text);cursor:pointer;
  text-align:left}
.tray-more:hover{text-decoration:underline}
@media (max-width:640px){
  .rdrawer{width:100%}
  .rd-stat{grid-template-columns:1fr}
}
@media print{.rdrawer,.dscrim{display:none}}

.themebtn{position:fixed;right:16px;top:16px;bottom:auto;z-index:40;background:var(--surface);
  box-shadow:var(--shadow);opacity:.92}
@media (max-width:880px){
  .jr-sec > h2{width:auto;justify-content:flex-start;border-radius:14px}
  .jr-list::before{left:29px}
  .jr-item{grid-template-columns:58px 1fr;gap:0 20px;padding:20px 0;align-items:start}
  .jr-item > .jr-media,.jr-item.jr-flip > .jr-media{grid-column:2;grid-row:2;margin-bottom:16px}
  .jr-item > .jr-body,.jr-item.jr-flip > .jr-body{grid-column:2;grid-row:3}
  .jr-dot{grid-column:1;grid-row:2;width:58px;height:58px}
}
@media (max-width:820px){
  .jr-groups::before{display:none}
  .jr-group > summary{grid-template-columns:auto 1fr auto;gap:14px}
  .jrg-meta{grid-column:2;grid-row:2;flex-direction:row;align-items:center;gap:10px;
    justify-content:flex-start;text-align:left}
  .jrg-mark{grid-column:3;grid-row:1}
}
@media (max-width:640px){.themebtn{right:10px;top:10px;min-height:34px;padding:5px 11px;font-size:12.5px}}
@media print{
  .jr-tools,.pick-tools,.themebtn{display:none}
  .jr-group > summary .jrg-mark{display:none}
  .jrg-body{display:block !important}
  .jr-list::before{display:none}
  .jr-item{grid-template-columns:1fr;page-break-inside:avoid}
  .jr-item > .jr-media,.jr-item > .jr-body,
  .jr-item.jr-flip > .jr-media,.jr-item.jr-flip > .jr-body{grid-column:1}
}

/* the page has its own selection tray in that corner */
body:has(#tray) .tsearch{ display:none; }

/* --tint was never defined on the site, so every component that used it was
   falling back to transparent. It is the same value the icon badges use. */
:root{ --tint:var(--bg-alt); }

/* ---- add-ons need to be visible, not a white outline ---------------------- */
/* #A05F00 clears 4.5:1 on the chip's cream ground; the chip text is small */
:root{ --addon:#A05F00; --addon-line:#D79B3A; }
[data-theme="dark"]{ --addon:#F0B458; --addon-line:#8A6520; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --addon:#F0B458; --addon-line:#8A6520; }
}
.lg-mark.add{ background:var(--warn-bg); box-shadow:inset 0 0 0 2px var(--addon); }
.addon-chip{ color:var(--addon); background:var(--warn-bg);
  border:1px solid var(--addon-line); }
/* an add-on card is marked along its edge so it reads at a glance */
.jr-item:has(.addon-chip) > .jr-body,
.tcard:has(.addon-chip), .kcard:has(.addon-chip){
  border-left:3px solid var(--addon); }
.jr-item.jr-flip:has(.addon-chip) > .jr-body{ border-left:3px solid var(--addon); }
.jr-item:has(.addon-chip) > .jr-body .jr-num{ color:var(--addon); }
.rd-list.addon li::before{ background:var(--warn-bg);
  box-shadow:inset 0 0 0 2px var(--addon); }

/* ---- About panel: certification in the glance band ----------------------- */
.ab-brandcell{ display:grid; justify-items:start; gap:8px; max-width:190px; }
.ab-txramp{ display:block; width:150px; height:auto; border-radius:8px;
  border:1px solid var(--line); background:#fff; }
@media (max-width:1180px){
  .ab-brandcell{ grid-column:1 / -1; grid-template-columns:auto auto; align-items:center;
    justify-items:start; max-width:none; column-gap:14px; }
  .ab-brandcell .ab-glance{ grid-column:1 / -1; }
}

/* ---- What to expect ------------------------------------------------------ */
.wtx-note{ margin-top:26px; }
.wtx-note p{ max-width:none; }

/* the About page's own tab bar is sticky at z-index 50 and spans the full
   width, which swallowed clicks on the rail before it stuck */
.rail{ z-index:60; }

/* ---- kanban columns ------------------------------------------------------ */
.kcol-list{ margin:0; padding:0; list-style:none; max-width:none;
  display:flex; flex-direction:column; gap:10px; }
/* auto-fit dropped to three columns at the body measure, which orphaned the
   fourth column onto its own row */
@media (min-width:1040px){ .pick-grid.kanban{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1240px){ .pick-grid.kanban{ grid-template-columns:repeat(5,1fr); } }
/* fitAsk sizes the card for the tile grid; in kanban it reads as a footer,
   and the inline span it writes has to be overridden */
.pick-grid.kanban .pick-ask{ grid-column:1 / -1 !important; }
.pick-grid.kanban .ask-row{ max-width:640px; }

/* ---- About panel: full-height card --------------------------------------- */
@media (min-width:1024px){
  #mega-about{ height:calc(100vh - 140px); }
  #mega-about .about-mega{ align-items:stretch; }
  .about-mega .who-col{ display:flex; flex-direction:column; }
  .about-mega .who-col > ul{ margin-bottom:8px; }
  .site-nav .about-mega li > a{ padding:16px 8px; }
  .about-mega .ab-cta, .about-mega .ab-quote{ margin-top:auto; }
  .about-mega .ab-hero{ flex:1 1 auto; min-height:200px; }
}

/* ================= About us (authored page) ================= */

.abt{
  --t-cy-100:var(--cy-100); --t-cy-200:var(--cy-200); --t-cy-300:var(--cy-300);
  --t-cy-400:var(--cy-400); --t-cy-500:var(--cy-500); --t-cy-600:var(--cy-600);
  --t-cy-700:var(--cy-700); --t-cy-800:var(--cy-800); --t-cy-900:var(--cy-900);
  --t-sl-0:var(--sl-0); --t-sl-400:var(--sl-400); --t-sl-500:var(--sl-500);
  --t-sl-600:var(--sl-600); --t-sl-700:var(--sl-700); --t-sl-800:var(--sl-800);
  --t-sl-900:var(--sl-900);
  color:var(--t-sl-900); background:var(--sl-0);
}
.abt{
    --cy-50:#EAF6FA; --cy-100:#CCF2FC; --cy-200:#A3E8F9; --cy-300:#70DBF5; --cy-400:#2FC9EF;
    --cy-500:#05A9D1; --cy-600:#0787A8; --cy-700:#046F89; --cy-800:#045265; --cy-900:#0B2A34;
    --sl-0:#FFFFFF; --sl-50:#F6F8F9; --sl-100:#EDF1F3; --sl-200:#DCE3E6; --sl-300:#C3CDD2;
    --sl-400:#9AA9AE; --sl-500:#7A8B91; --sl-600:#5A6B72; --sl-700:#44535A; --sl-800:#2E3B41;
    --sl-900:#1F2A30; --sl-950:#0B1418;
    --rule:#D6E6EC;
    --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --measure:35rem;
    --navh:60px;
  }
.abt *{box-sizing:border-box}
.abt{scroll-behavior:smooth; scroll-padding-top:var(--navh)}
.abt{
    margin:0; font-family:var(--font); color:var(--t-sl-900); background:var(--sl-0);
    font-size:17.5px; line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
.abt .inner{ max-width:1120px; margin:0 auto; padding:0 40px; }
.abt .col{ max-width:var(--measure); }
.abt .masthead{
    background:
      radial-gradient(120% 140% at 88% 0%, rgba(47,201,239,.18) 0%, rgba(47,201,239,0) 58%),
      linear-gradient(140deg, var(--cy-900) 0%, #08404F 58%, var(--cy-700) 100%);
    color:#fff; padding:104px 0 92px; position:relative; overflow:hidden;
  }
.abt .eyebrow{
    font-size:12px; letter-spacing:.19em; text-transform:uppercase; font-weight:700;
    color:var(--t-cy-300); margin:0 0 22px;
  }
.abt .masthead h1{
    font-size:clamp(2.3rem,5vw,3.7rem); line-height:1.1; letter-spacing:-.022em;
    font-weight:700; margin:0 0 26px; max-width:19ch;
  }
.abt .masthead .deck{
    font-size:clamp(1.06rem,1.9vw,1.3rem); line-height:1.6; color:#CFE6EE;
    max-width:52ch; margin:0;
  }
.abt .tabnav{
    position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--rule);
  }
.abt .tabnav .inner{ display:flex; align-items:center; gap:4px; height:var(--navh); overflow-x:auto; }
.abt .tabnav a{
    flex:0 0 auto; text-decoration:none; color:var(--t-sl-600); font-size:14.5px; font-weight:500;
    padding:0 16px; height:var(--navh); display:flex; align-items:center;
    border-bottom:3px solid transparent; white-space:nowrap; letter-spacing:-.005em;
  }
.abt .tabnav a:hover{ color:var(--t-cy-800); }
.abt .tabnav a.on{ color:var(--t-cy-800); border-bottom-color:var(--cy-500); font-weight:700; }
.abt .tabnav .spacer{ flex:1 1 auto; }
.abt .tabnav .teamlink{
    color:var(--t-cy-700); font-weight:700; border-bottom-color:transparent;
  }
.abt .tabnav .teamlink::after{ content:"→"; margin-left:7px; }
.abt [hidden]{ display:none !important; }
.abt section.tab.tabpanel{ padding-top:70px; border-bottom:0; }
.abt section.tab{ padding:82px 0 96px; border-bottom:1px solid var(--rule); }
.abt section.tab:last-of-type{ border-bottom:0; }
.abt .sectionhead{ margin:0 0 54px; }
.abt .sectionhead .n{
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
    color:var(--t-cy-500); display:block; margin-bottom:14px;
  }
.abt .sectionhead h2{
    font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.14; letter-spacing:-.024em;
    font-weight:700; margin:0 0 18px; max-width:20ch; color:var(--t-sl-900);
  }
.abt .sectionhead .sub{ font-size:1.14rem; color:var(--t-sl-600); max-width:54ch; margin:0; }
.abt h3.sub{
    font-size:clamp(1.35rem,2.4vw,1.72rem); line-height:1.22; letter-spacing:-.018em;
    font-weight:700; color:var(--t-sl-900); margin:0 0 20px;
  }
.abt .kicker{
    font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; font-weight:700;
    color:var(--t-cy-600); margin:0 0 13px; display:flex; align-items:center; gap:10px;
  }
.abt .kicker::before{ content:""; width:22px; height:2px; background:var(--cy-400); flex:0 0 22px; }
.abt p{ margin:0 0 22px; color:var(--t-sl-800); }
.abt p:last-child{ margin-bottom:0; }
.abt .lead{ font-size:1.18rem; color:var(--t-sl-900); }
.abt strong{ font-weight:700; color:var(--t-sl-900); }
.abt .beat{ font-size:1.14rem; font-weight:500; color:var(--t-cy-900); margin:0 0 22px; letter-spacing:-.008em; }
.abt .block{ margin:0 0 70px; }
.abt .block:last-child{ margin-bottom:0; }
.abt .proof{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--rule); border-bottom:1px solid var(--rule);
  }
.abt .proof .cell{ background:var(--sl-0); padding:28px 26px; }
.abt .proof .n{ font-size:1.95rem; font-weight:700; letter-spacing:-.02em; color:var(--t-cy-800); line-height:1.1; display:block; margin-bottom:6px; }
.abt .proof .n.sm{ font-size:1.18rem; line-height:1.3; margin-bottom:8px; }
.abt .proof .l{ font-size:13.5px; line-height:1.45; color:var(--t-sl-600); }
.abt .contrast{ margin:40px 0; padding:32px 0 32px 30px; border-left:4px solid var(--cy-400); max-width:var(--measure); }
.abt .contrast .a{ font-size:1.14rem; color:var(--t-sl-500); margin:0 0 10px; line-height:1.45; }
.abt .contrast .b{ font-size:clamp(1.28rem,2.3vw,1.58rem); font-weight:700; color:var(--t-cy-900); margin:0; line-height:1.32; letter-spacing:-.018em; }
.abt .pull{ margin:52px 0; padding:42px 44px; background:var(--cy-50); border-radius:18px; max-width:var(--measure); }
.abt .pull q{ quotes:none; display:block; font-size:clamp(1.35rem,2.7vw,1.8rem); line-height:1.32; letter-spacing:-.02em; font-weight:700; color:var(--t-cy-900); }
.abt .pull .sub2{ margin:16px 0 0; font-size:15.5px; color:var(--t-cy-800); line-height:1.6; }
.abt .panel{ background:var(--sl-50); border:1px solid var(--sl-200); border-radius:18px; padding:32px 34px; margin:28px 0 0; max-width:var(--measure); }
.abt .panel h4{ font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--t-sl-600); margin:0 0 18px; }
.abt .panel ul{ margin:0; padding:0; list-style:none; }
.abt .panel li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:16px; line-height:1.6; color:var(--t-sl-800); }
.abt .panel li:last-child{ margin-bottom:0; }
.abt .panel li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--cy-400); box-shadow:0 0 0 3px var(--cy-100); }
.abt .learn{ margin:30px 0 0; max-width:44rem; }
.abt .learn .row{ display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start; padding:16px 0; border-top:1px solid var(--rule); }
.abt .learn .row:last-child{ border-bottom:1px solid var(--rule); }
.abt .learn .mk{ font-size:12px; font-weight:700; color:var(--t-cy-500); letter-spacing:.06em; padding-top:.34em; }
.abt .learn .tx{ font-size:16.5px; line-height:1.55; color:var(--t-sl-800); }
.abt .prior{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin:34px 0 0; }
.abt .pcard{
    border:1px solid var(--sl-200); border-radius:18px; padding:28px 30px 30px; background:var(--sl-50);
  }
.abt .pcard .pt{
    font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--t-cy-600); display:block; margin-bottom:10px;
  }
.abt .pcard h4{ font-size:18.5px; font-weight:700; letter-spacing:-.015em; margin:0 0 12px; color:var(--t-sl-900); line-height:1.28; }
.abt .pcard p{ font-size:15.5px; line-height:1.6; color:var(--t-sl-700); margin:0 0 14px; }
.abt .pcard .out{
    margin:0; padding-top:14px; border-top:1px solid var(--sl-200);
    font-size:15px; color:var(--t-cy-800); font-weight:500;
  }
.abt .cycle{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:32px 0 0; }
.abt .cycle .c{ border-top:3px solid var(--cy-400); padding-top:16px; }
.abt .cycle .c .s{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t-cy-600); display:block; margin-bottom:7px; }
.abt .cycle .c p{ font-size:15px; line-height:1.55; color:var(--t-sl-700); margin:0; }
.abt .diffs{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin:0 0 60px; }
.abt .diff{
    border:1px solid var(--sl-200); border-radius:18px; padding:30px 30px 32px;
    background:var(--sl-0); position:relative;
  }
.abt .diff::before{
    content:""; position:absolute; top:0; left:30px; right:30px; height:3px;
    background:var(--cy-400); border-radius:0 0 3px 3px;
  }
.abt .diff .t{ font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--t-cy-600); display:block; margin:6px 0 10px; }
.abt .diff h4{ font-size:19px; font-weight:700; letter-spacing:-.015em; margin:0 0 12px; color:var(--t-sl-900); line-height:1.28; }
.abt .diff p{ font-size:15.5px; line-height:1.6; color:var(--t-sl-700); margin:0; }
.abt .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:34px 0 0; }
.abt .step{ border-top:3px solid var(--cy-400); padding-top:18px; }
.abt .step .num{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--t-cy-600); text-transform:uppercase; display:block; margin-bottom:8px; }
.abt .step h4{ font-size:17px; font-weight:700; margin:0 0 8px; color:var(--t-sl-900); letter-spacing:-.01em; }
.abt .step p{ font-size:15px; color:var(--t-sl-700); margin:0; }
.abt .mission{
    background:linear-gradient(150deg,var(--cy-900) 0%, #08404F 100%); color:#fff;
    border-radius:22px; padding:52px 50px; margin:0 0 64px;
  }
.abt .mission .kicker{ color:var(--t-cy-300); }
.abt .mission .kicker::before{ background:var(--cy-400); }
.abt .mission p{
    margin:0; color:#fff; font-size:clamp(1.2rem,2.3vw,1.6rem); line-height:1.4;
    font-weight:500; letter-spacing:-.015em; max-width:40ch;
  }
.abt .acro{ margin:0 0 60px; }
.abt .acro .ahead{ display:flex; align-items:baseline; gap:14px; margin:0 0 8px; flex-wrap:wrap; }
.abt .acro .ahead .word{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--t-cy-800); }
.abt .acro .ahead .note{ font-size:15px; color:var(--t-sl-600); }
.abt .acro .aintro{ font-size:16px; color:var(--t-sl-600); margin:0 0 26px; max-width:52ch; }
.abt .vgrid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:16px; overflow:hidden; }
.abt .vgrid.four{ grid-template-columns:repeat(4,1fr); }
.abt .vgrid.five{ grid-template-columns:repeat(5,1fr); }
.abt .v{ background:var(--sl-0); padding:26px 24px 28px; }
.abt .v .ltr{
    display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:9px; background:var(--cy-50); color:var(--t-cy-700);
    font-size:16px; font-weight:700; margin-bottom:14px;
  }
.abt .v h4{ font-size:17px; font-weight:700; margin:0 0 8px; color:var(--t-sl-900); letter-spacing:-.012em; }
.abt .v p{ font-size:14.5px; line-height:1.55; color:var(--t-sl-700); margin:0; }
.abt .commit{ background:var(--cy-50); border-radius:18px; padding:38px 40px; margin:0; }
.abt .commit h3{ font-size:1.32rem; font-weight:700; letter-spacing:-.018em; margin:0 0 20px; color:var(--t-cy-900); }
.abt .commit ul{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; }
.abt .commit li{ position:relative; padding-left:26px; font-size:16px; line-height:1.55; color:var(--t-cy-900); }
.abt .commit li::before{
    content:""; position:absolute; left:0; top:.5em; width:10px; height:10px;
    border-radius:50%; background:var(--cy-500); box-shadow:0 0 0 3px #fff;
  }
.abt .standard{
    margin:34px 0 0; padding:46px 48px; border-radius:20px;
    background:var(--cy-900); color:#fff; position:relative; overflow:hidden;
  }
.abt .standard::after{
    content:""; position:absolute; inset:auto 0 0 0; height:4px;
    background:linear-gradient(90deg,var(--cy-400) 0%, var(--cy-500) 45%, rgba(5,169,209,0) 100%);
  }
.abt .standard .lbl{
    font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:700;
    color:var(--t-cy-300); margin:0 0 18px;
  }
.abt .standard q{
    quotes:none; display:block; font-size:clamp(1.35rem,2.7vw,1.85rem); line-height:1.34;
    font-weight:700; letter-spacing:-.022em; color:#fff; max-width:26ch;
  }
.abt .standard q .hi{ color:var(--t-cy-300); }
.abt .standard .after{ margin:20px 0 0; font-size:16px; color:#B7D3DD; max-width:52ch; }
.abt .us{
    background:var(--cy-900); color:#fff; border-radius:22px; padding:54px 50px; margin:0 0 60px;
    display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:start;
  }
.abt .us h3{ color:#fff; font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:0 0 20px; }
.abt .us p{ color:#C6DCE4; font-size:16.5px; }
.abt .us p.close{
    color:#fff; font-weight:500; font-size:17px; letter-spacing:-.008em;
    margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16);
  }
.abt .us .kicker{ color:var(--t-cy-300); }
.abt .us .kicker::before{ background:var(--cy-400); }
.abt .us .facts{ display:flex; flex-direction:column; }
.abt .us .fact{ padding:15px 0; border-top:1px solid rgba(255,255,255,.14); }
.abt .us .fact:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.abt .us .fact .k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--t-cy-300); font-weight:700; display:block; margin-bottom:4px; }
.abt .us .fact .v2{ font-size:15.5px; color:#fff; line-height:1.45; }
.abt .residency{
    display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start;
    border:1px solid var(--rule); border-radius:22px; padding:44px 46px; margin:0 0 60px;
    background:linear-gradient(180deg,var(--sl-0) 0%, var(--cy-50) 100%);
  }
.abt .residency .rhead p{ font-size:16.5px; }
.abt .rgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.abt .rgrid .r{
    background:var(--sl-0); border:1px solid var(--cy-200); border-radius:12px;
    padding:16px 18px; display:flex; align-items:center; gap:11px;
  }
.abt .rgrid .r::before{
    content:"✓"; flex:0 0 22px; width:22px; height:22px; border-radius:50%;
    background:var(--cy-500); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
.abt .rgrid .r .rk{ font-size:15px; font-weight:500; color:var(--t-cy-900); line-height:1.35; }
.abt .rgrid .r.wide{ grid-column:1 / -1; background:var(--cy-900); border-color:var(--cy-900); }
.abt .rgrid .r.wide::before{ background:var(--cy-400); color:var(--cy-900); }
.abt .rgrid .r.wide .rk{ color:#fff; font-weight:700; }
.abt .certs{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:0 0 56px; }
.abt .cert{ border:1px solid var(--sl-200); border-radius:16px; padding:26px 26px 28px; }
.abt .cert .n2{ font-size:17px; font-weight:700; color:var(--t-cy-800); margin:0 0 8px; letter-spacing:-.012em; }
.abt .cert p{ font-size:14.5px; line-height:1.55; color:var(--t-sl-600); margin:0; }
.abt .note{ font-size:14.5px; line-height:1.6; color:var(--t-sl-600); border-left:2px solid var(--sl-200); padding-left:18px; max-width:var(--measure); }
.abt .roster{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:44px 0 0; }
.abt .card{
    border:1px solid var(--sl-200); border-radius:20px; overflow:hidden; background:var(--sl-0);
    display:flex; flex-direction:column; text-decoration:none; color:inherit;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
.abt a.card:hover{
    border-color:var(--cy-300); box-shadow:0 10px 30px rgba(11,42,52,.09); transform:translateY(-2px);
  }
.abt a.card:hover h4{ color:var(--t-cy-700); }
.abt .card .more{
    margin:16px 0 0; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--t-cy-600);
  }
.abt .card .more::after{ content:" \2192"; }
.abt .photo{
    aspect-ratio:4/3; background:linear-gradient(150deg,var(--cy-800) 0%, var(--cy-600) 100%);
    display:flex; align-items:center; justify-content:center; position:relative;
  }
.abt .photo .ini{ font-size:3.2rem; font-weight:700; color:rgba(255,255,255,.92); letter-spacing:-.03em; }
.abt .photo::after{
    content:"Photo"; position:absolute; bottom:12px; right:14px; font-size:10px;
    letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700;
  }
.abt .card .cbody{ padding:26px 26px 28px; flex:1 1 auto; display:flex; flex-direction:column; }
.abt .card h4{ font-size:20px; font-weight:700; letter-spacing:-.018em; margin:0 0 5px; color:var(--t-sl-900); }
.abt .card .role{ font-size:14px; font-weight:700; color:var(--t-cy-700); margin:0 0 16px; letter-spacing:-.005em; }
.abt .card .blurb{ font-size:15px; line-height:1.6; color:var(--t-sl-700); margin:0 0 20px; flex:1 1 auto; }
.abt .tags{ display:flex; flex-wrap:wrap; gap:7px; }
.abt .tag{
    font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--t-cy-800);
    background:var(--cy-50); border:1px solid var(--cy-100); border-radius:999px; padding:5px 11px;
  }
.abt .bio{ border-top:1px solid var(--rule); padding:52px 0 0; margin:52px 0 0; }
.abt .bio:first-of-type{ border-top:0; padding-top:0; margin-top:40px; }
.abt .biohead{ display:grid; grid-template-columns:96px 1fr; gap:24px; align-items:center; margin:0 0 30px; }
.abt .biohead .av{
    width:96px; height:96px; border-radius:20px;
    background:linear-gradient(150deg,var(--cy-800) 0%, var(--cy-600) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; font-weight:700; color:#fff; letter-spacing:-.02em;
  }
.abt .biohead h4{ font-size:clamp(1.45rem,2.5vw,1.9rem); font-weight:700; letter-spacing:-.022em; margin:0 0 4px; color:var(--t-sl-900); }
.abt .biohead .role{ font-size:15px; font-weight:700; color:var(--t-cy-700); margin:0 0 6px; }
.abt .biohead .meta{ font-size:14px; color:var(--t-sl-500); margin:0; }
.abt .biogrid{ display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.abt .biogrid .prose p{ font-size:16.5px; }
.abt .side{ border:1px solid var(--sl-200); border-radius:18px; padding:26px 26px 28px; background:var(--sl-50); }
.abt .side h5{
    font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
    color:var(--t-sl-600); margin:0 0 16px;
  }
.abt .side + .side{ margin-top:20px; }
.abt .side ul{ margin:0; padding:0; list-style:none; }
.abt .side li{ position:relative; padding-left:22px; margin-bottom:11px; font-size:14.5px; line-height:1.5; color:var(--t-sl-800); }
.abt .side li:last-child{ margin-bottom:0; }
.abt .side li::before{
    content:""; position:absolute; left:0; top:.56em; width:8px; height:8px; border-radius:50%;
    background:var(--cy-400); box-shadow:0 0 0 3px var(--cy-100);
  }
.abt .side.contact{ background:var(--cy-50); border-color:var(--cy-200); }
.abt .side.contact .cline{
    margin:0 0 12px; display:flex; flex-direction:column; gap:2px;
    padding-bottom:12px; border-bottom:1px solid var(--cy-200);
  }
.abt .side.contact .cline:last-of-type{ border-bottom:0; margin-bottom:6px; }
.abt .side.contact .ck{
    font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--t-cy-600);
  }
.abt .side.contact .cline a{
    font-size:15.5px; font-weight:700; color:var(--t-cy-800); text-decoration:none; word-break:break-word;
  }
.abt .side.contact .cline a:hover{ color:var(--t-cy-600); text-decoration:underline; }
.abt .side.contact .calt{ font-size:13px; font-weight:500; color:var(--t-cy-700); letter-spacing:.01em; }
.abt .side.contact .cnote{ margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--t-cy-700); font-style:italic; }
.abt .side li strong{ color:var(--t-sl-900); font-weight:700; }
.abt .qline{ margin:30px 0 0; padding:30px 34px; background:var(--cy-50); border-radius:16px; }
.abt #bio-wade .biogrid{ align-items:stretch; }
.abt #bio-wade .biogrid > .prose{ display:flex; flex-direction:column; }
.abt #bio-wade .biogrid > div:last-child{ display:flex; flex-direction:column; }
.abt #bio-wade .side.contact{ margin-top:24px; }
.abt .qline q{
    quotes:none; display:block; font-size:1.18rem; line-height:1.45; font-weight:500;
    color:var(--t-cy-900); letter-spacing:-.012em;
  }
.abt .qline .who{ margin:14px 0 0; font-size:13.5px; font-weight:700; color:var(--t-cy-700); letter-spacing:.02em; }
.abt .sgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 40px; margin:38px 0 0; }
.abt .sblk{ border-top:3px solid var(--cy-400); padding-top:18px; }
.abt .sblk h4{ font-size:17px; font-weight:700; margin:0 0 9px; color:var(--t-sl-900); letter-spacing:-.012em; }
.abt .sblk p{ font-size:15px; line-height:1.6; color:var(--t-sl-700); margin:0; }
.abt .teamcta{
    margin-top:64px; border:1px solid var(--rule); border-radius:20px; padding:40px 44px;
    background:linear-gradient(180deg,var(--sl-0) 0%, var(--cy-50) 100%);
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
.abt .teamcta h3{ font-size:1.42rem; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; color:var(--t-cy-900); }
.abt .teamcta p{ margin:0; font-size:16px; color:var(--t-sl-600); max-width:48ch; }


.abt .signoff{ margin-top:60px; padding:44px 46px; border-radius:20px; background:linear-gradient(150deg,var(--cy-900) 0%, #08404F 100%); color:#fff; }
.abt .signoff p{ margin:0; color:#fff; font-size:clamp(1.12rem,2.1vw,1.4rem); line-height:1.45; font-weight:500; letter-spacing:-.012em; max-width:36ch; }
.abt .signoff p span{ color:var(--t-cy-300); }
@media (max-width:960px){.abt .proof{ grid-template-columns:repeat(2,1fr); }
.abt .diffs{ grid-template-columns:1fr; }
.abt .prior{ grid-template-columns:1fr; }
.abt .roster{ grid-template-columns:1fr; }
.abt .biogrid{ grid-template-columns:1fr; gap:32px; }
.abt .sgrid{ grid-template-columns:1fr; }
.abt .cycle{ grid-template-columns:repeat(2,1fr); }
.abt .vgrid.four,.abt .vgrid.five{ grid-template-columns:repeat(2,1fr); }
.abt .certs{ grid-template-columns:1fr; }
.abt .us{ grid-template-columns:1fr; gap:36px; padding:42px 32px; }
.abt .residency{ grid-template-columns:1fr; gap:32px; padding:38px 32px; }
.abt .steps{ grid-template-columns:1fr; }
.abt .commit ul{ grid-template-columns:1fr; }}
@media (max-width:600px){.abt{ font-size:16.5px; }
.abt .inner{ padding:0 22px; }
.abt .masthead{ padding:74px 0 64px; }
.abt .proof{ grid-template-columns:1fr; }
.abt .cycle{ grid-template-columns:1fr; }
.abt .vgrid.four,.abt .vgrid.five{ grid-template-columns:1fr; }
.abt .pull{ padding:30px 26px; }
.abt .mission,.abt .commit,.abt .signoff,.abt .teamcta,.abt .residency,.abt .standard{ padding:32px 26px; }
.abt .rgrid{ grid-template-columns:1fr; }
.abt .biohead{ grid-template-columns:72px 1fr; gap:18px; }
.abt .biohead .av{ width:72px; height:72px; font-size:1.5rem; border-radius:16px; }
.abt .contrast{ padding-left:22px; }
.abt .learn .row{ grid-template-columns:26px 1fr; gap:12px; }}
[data-theme="dark"] .abt{
  --sl-0:#0C1B21; --sl-50:#10242B; --sl-100:#12262E; --sl-200:#26414B; --sl-300:#33525E;
  --rule:#26414B; --cy-50:#12262E; --cy-100:#173540; --cy-200:#26414B;
  --t-sl-900:#EAF3F6; --t-sl-800:#E4EDF0; --t-sl-700:#CBD8DD; --t-sl-600:#B9C9CF;
  --t-sl-500:#A6BAC1; --t-sl-400:#93A8B0;
  --t-cy-900:#EAF3F6; --t-cy-800:#BFE6F2; --t-cy-700:#A3E8F9; --t-cy-600:#7FD6EE;
  --t-cy-500:#3FC6E8;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .abt{
  --sl-0:#0C1B21; --sl-50:#10242B; --sl-100:#12262E; --sl-200:#26414B; --sl-300:#33525E;
  --rule:#26414B; --cy-50:#12262E; --cy-100:#173540; --cy-200:#26414B;
  --t-sl-900:#EAF3F6; --t-sl-800:#E4EDF0; --t-sl-700:#CBD8DD; --t-sl-600:#B9C9CF;
  --t-sl-500:#A6BAC1; --t-sl-400:#93A8B0;
  --t-cy-900:#EAF3F6; --t-cy-800:#BFE6F2; --t-cy-700:#A3E8F9; --t-cy-600:#7FD6EE;
  --t-cy-500:#3FC6E8;
}
}

/* the authored page assumed a white page under it */
.abt .tabnav{ background:var(--sl-0); border-bottom:1px solid var(--rule); }
.abt .photo, .abt .av{ box-shadow:0 0 0 3px var(--sl-0); }
/* it sits under the site header, which is sticky too */
.abt .tabnav{ top:var(--site-head, 76px); }
@media (max-width:1023px){ .abt .tabnav{ position:static; } }
.abt .inner{ max-width:var(--maxw,1120px); }
.abt .btns{ display:flex; gap:12px; flex-wrap:wrap; }
/* ---- the page adopts the site's type scale and measure ------------------- */
.abt{ font-size:17px; line-height:1.65; --measure:68ch; }
.abt .col{ max-width:820px; }
.abt .sectionhead h2{ max-width:22ch; }
.abt .sectionhead .sub{ max-width:70ch; }
.abt p{ max-width:none; }
.abt .lead, .abt .prose p, .abt .col p{ max-width:76ch; }

/* ---- the proof strip is the site's stats band ---------------------------- */
.abt .proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  max-width:var(--maxw,1120px); margin:0 auto; padding:0; }
.abt .proof .cell{ display:block; background:var(--surface); padding:26px 22px; text-align:left;
  border:0; }
.abt .proof .cell .n{ display:block; font-size:1.7rem; font-weight:750; color:var(--accent-lg);
  letter-spacing:-.03em; line-height:1.1; margin:0; }
.abt .proof .cell .n.sm{ font-size:1.12rem; line-height:1.25; letter-spacing:-.01em; }
.abt .proof .cell .l{ display:block; font-size:.82rem; color:var(--text-soft); line-height:1.4;
  margin:7px 0 0; }
@media (max-width:1180px){ .abt .proof{ margin:0 20px; } }
/* the authored mid-cyan is 2.8:1 on white; small bold text needs 4.5 */
.abt{ --t-cy-500:#046F89; --t-cy-600:#046F89; --t-sl-500:#5A6B72; --t-sl-400:#5A6B72; }
.abt .v h3{ font-size:17px; font-weight:700; margin:0 0 8px; color:var(--t-sl-900);
  letter-spacing:-.012em; }
/* the site sets heading colours directly, and inheritance loses to that, so the
   dark panels have to name their own headings */
.abt h1, .abt h2, .abt h3, .abt h4{ color:var(--t-sl-900); }
.abt .masthead h1, .abt .masthead h2,
.abt .mission h2, .abt .mission h3, .abt .mission h4,
.abt .standard h2, .abt .standard h3, .abt .standard h4,
.abt .us h2, .abt .us h3, .abt .us h4,
.abt .signoff h2, .abt .signoff h3, .abt .signoff p,
.abt .r.wide, .abt .r.wide *{ color:#fff; }

/* the two panels are the same object, so they are the same size */
@media (min-width:1024px){
  #mega-who{ height:calc(100vh - 140px); }
  #mega-who .nav-mega{ align-items:stretch; }
  #mega-who .who-col{ display:flex; flex-direction:column; }
  #mega-who .who-art{ margin-top:auto; }
}

.who-art{ border-radius:14px; object-fit:cover; }

/* the page opened on its own gradient; it uses the site's hero instead */
.abt .masthead{ background:linear-gradient(168deg,#0C1E27 0%,#123746 58%,#0E4A5E 100%);
  padding:88px 0 128px; }
.abt .masthead::before{ content:""; position:absolute; right:-160px; top:-90px; width:760px;
  height:760px; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 35% 35%,rgba(0,168,216,.18),rgba(0,168,216,0) 62%); }
.abt .masthead::after{ content:""; position:absolute; left:-5%; right:-5%; bottom:-2px;
  height:110px; background:var(--bg); clip-path:polygon(0 100%,100% 26%,100% 100%); z-index:1; }
.abt .masthead .inner{ position:relative; z-index:2; }
@media (max-width:760px){ .abt .masthead{ padding:64px 0 96px; } }

.abt .cline .cnum{ font-weight:700; color:var(--t-sl-900); }

/* the number is a fact to read, not a link to click on a desktop */
.telno{ font-weight:700; color:var(--text); }
.contact .telno, .facts .telno{ color:inherit; }

/* the panels are full height, so the rows use it instead of leaving a gap */
@media (min-width:1024px){
  .site-nav .nav-mega li > a{ padding:11px 10px; gap:15px; }
  .nav-mega .icon-badge{ width:44px; height:44px; border-radius:13px; }
  .nav-mega .icon-badge svg{ width:23px; height:23px; }
  .nav-mega{ padding:18px 26px 14px; }
  .nav-mega .who-head{ padding-bottom:10px; }
  /* the card cap has to move with it, or the panel just scrolls */
  #mega-who, #mega-about{ height:calc(100vh - 96px); max-height:calc(100vh - 96px); }
  .nav-mega .m-text{ font-size:1.02rem; font-weight:700; }
  .nav-mega .m-text span{ margin-top:4px; font-size:.86rem; font-weight:400; }
  .nav-mega .who-hname{ font-size:1.12rem; }
  /* the two panels are one component: same header type, same colour */
  .about-mega .who-hname{ font-size:1.12rem; letter-spacing:-.01em;
    text-transform:none; }
  .nav-mega .who-hsub{ font-size:.88rem; }
  .nav-mega .m-go{ font-size:1.2rem; }
  /* short columns stretch their rows rather than trailing off into space */
  #mega-who .who-col > ul, #mega-about .who-col > ul{ display:flex; flex-direction:column; }
  #mega-who .who-col > ul{ flex:1 1 auto; }
  #mega-who .who-col > ul > li{ flex:1 1 auto; max-height:132px; display:flex; }
  #mega-who .who-col > ul > li > a{ flex:1 1 auto; align-items:center; }
}

.ab-hero-img{ display:block; width:100%; height:auto; margin-bottom:16px; border-radius:14px;
  border:1px solid var(--line); }
@media (min-width:1024px){
  /* the whole banner at the column's full width, not a crop of it */
  .ab-hero-img{ width:100%; max-width:100%; height:auto; margin:0 0 12px; }
  .about-mega .ab-cta{ padding:11px 13px; margin-top:12px; }
  .about-mega .who-col:last-child .who-head{ padding-bottom:8px; }
}

/* ---- purchasing vehicles: the link out to the awarding body -------------- */
.v-cta{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.v-cta .btn{ margin-top:0; }

/* ---- purchasing vehicles: badges matched on width ------------------------ */
.vehicle summary img{ width:180px; height:auto; max-height:130px; object-fit:contain;
  object-position:left center; }
@media (max-width:560px){ .vehicle summary img{ width:140px; } }

/* ---- ERP comparison table ------------------------------------------------ */
.cmp-intro{ margin:14px 0 0; max-width:70ch; color:var(--text-soft); }
.cmp-wrap{ margin:30px 0 0; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); overflow-x:auto; overscroll-behavior-x:contain; }
.cmp-wrap:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.cmp{ width:100%; min-width:760px; border-collapse:collapse; font-size:.95rem; }
.cmp caption{ text-align:left; }
.cmp th, .cmp td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line);
  vertical-align:top; }
.cmp thead th{ background:var(--bg-alt); font-size:.78rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft); }
.cmp thead th.cmp-t{ color:var(--accent-text); }
/* the column a reader is actually comparing against gets an edge */
.cmp th.cmp-t, .cmp td.cmp-t{ border-left:3px solid var(--accent-ui); }
.cmp tbody th{ font-weight:700; color:var(--text); width:26%; }
.cmp tbody td{ color:var(--text-soft); width:37%; }
.cmp tbody td.cmp-t{ color:var(--text); font-weight:600; background:var(--tint); }
.cmp tbody tr:hover th, .cmp tbody tr:hover td{ background:var(--bg-alt); }
.cmp tbody tr:hover td.cmp-t{ background:var(--tint); }
/* the three bands are the point of the table, so each one is a control */
.cmp .cmp-band th{ padding:0; background:var(--bg-alt);
  border-top:2px solid var(--line-strong,var(--line));
  border-bottom:1px solid var(--line); }
.band-btn{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px;
  border:0; border-left:5px solid var(--line-strong,var(--line)); background:transparent;
  font:inherit; text-align:left; cursor:pointer; color:var(--text); }
.band-btn:hover{ background:var(--tint); }
.band-btn:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
#erpband-both .band-btn{ border-left-color:var(--accent-ui); }
#erpband-moves .band-btn{ border-left-color:var(--accent-text); }
.band-ico{ display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:9px; background:var(--surface); border:1px solid var(--line);
  color:var(--accent-text); }
.band-ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.band-t{ font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text); }
.band-s{ font-size:.86rem; color:var(--text-soft); }
.band-n{ margin-left:auto; flex:none; min-width:26px; padding:2px 9px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line); font-size:.78rem; font-weight:750;
  color:var(--text-soft); text-align:center; }
.band-chev{ flex:none; display:grid; place-items:center; width:22px; height:22px;
  color:var(--text-soft); transition:transform .16s ease; }
.band-chev svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.band-btn[aria-expanded="false"] .band-chev{ transform:rotate(-90deg); }
.cmp-row[hidden]{ display:none; }
@media (prefers-reduced-motion:reduce){ .band-chev{ transition:none; } }
.cmp tbody:last-child tr:last-child th, .cmp tbody:last-child tr:last-child td{
  border-bottom:0; }
.cmp-note{ margin:18px 0 0; font-size:.9rem; color:var(--text-soft); max-width:74ch; }
.cmp-hint{ color:var(--accent-text); font-weight:650; }
.cmp-foot{ margin:16px 0 0; font-size:1.02rem; font-weight:650; color:var(--text);
  max-width:74ch; }
@media (max-width:760px){
  .cmp{ font-size:.9rem; }
  .cmp th, .cmp td{ padding:12px 14px; }
  .cmp .cmp-band th span{ display:block; margin:4px 0 0; }
}

/* the hero art has the column to itself now */
@media (min-width:1024px){
  .hero-split .art{ align-self:stretch; display:flex; flex-direction:column;
    justify-content:center; }
  .hero-split .art svg{ width:100%; height:auto; }
}

/* ---- credential bar: four columns, all reading from the same top line ---- */
.cred-row{ grid-template-columns:auto repeat(3,1fr); align-items:start; }
.cred-row > li{ align-self:start; }
.cred-row b{ display:flex; align-items:center; gap:9px; min-height:26px; }
.cred-ico{ width:22px; height:22px; flex:none; fill:none; stroke:var(--accent-text);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1100px){ .cred-row{ grid-template-columns:auto 1fr 1fr; } }
@media (max-width:760px){ .cred-row{ grid-template-columns:1fr; } }

/* ---- the line the whole section turns on --------------------------------- */
.erp-pull{ margin:34px 0 0; padding:0 0 0 22px; border-left:4px solid var(--accent-ui);
  max-width:70ch; font-size:1.12rem; line-height:1.5; font-weight:600; color:var(--text); }
.erp-def > .erp-split{ margin-top:8px; }
/* the ownership cards keep the type they had as h4 */
.erp-split .erp-h{ font-size:1.18rem; margin:0 0 14px; }
/* the bullet rule matched every li, so each card wore a stray grey marker */
.erp-split > li{ padding-left:24px; margin-bottom:0; }   /* the card's own padding */
.erp-split > li::before{ content:none; }
.erp-split .card .erp-h .tag{ display:block; font-size:.7rem; font-weight:750;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.erp-split .card.is-tansi .erp-h .tag{ color:var(--accent-text); }

.erp-sub{ margin:10px 0 0; max-width:70ch; color:var(--text-soft); }

/* ---- working with us ------------------------------------------------------ */
.svc-tag{ margin:0 0 6px; font-size:.7rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-text); }
.svc-foot{ margin:26px 0 0; font-size:1.06rem; font-weight:700; color:var(--text); }
.svc-grid.two{ align-items:start; }

.svc-grid{ max-width:none; }
/* auto-fit would make three columns at this width and orphan the fourth card */
.svc-grid.two{ grid-template-columns:1fr; }
@media (min-width:900px){ .svc-grid.two{ grid-template-columns:repeat(2,1fr); } }

/* ---- Proven in the field: the story beside the numbers ------------------- */
.proof-lead{ display:grid; grid-template-columns:1.02fr 1fr; gap:44px; align-items:start;
  margin:30px 0 0; padding:30px 34px; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); }
.proof-lead h3{ margin:0 0 12px; font-size:1.22rem; }
.proof-lead .pl-say p{ margin:0; max-width:56ch; color:var(--text-soft); }
.proof-lead .btn{ margin-top:22px; white-space:nowrap; }
.proof-lead .wp-grid{ grid-template-columns:1fr 1fr; gap:26px 30px; margin:0; }
.proof-lead .wp-stat{ padding:0; }
@media (max-width:900px){
  .proof-lead{ grid-template-columns:1fr; gap:28px; }
  .proof-lead .wp-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ .proof-lead .wp-grid{ grid-template-columns:1fr; } }

/* the diagram was the smaller half of the hero; it is the proof of the claim */
@media (min-width:1024px){
  .wwd-hero-grid{ grid-template-columns:.86fr 1.14fr; gap:46px; }
}

/* the lead column was too narrow for the heading at the page's h2 size */
@media (min-width:1024px){
  .wc-grid{ grid-template-columns:.98fr 2.3fr; }
  .wc-lead h2{ font-size:1.86rem; line-height:1.2; white-space:nowrap; }
}

/* ---- What we do: the system, drawn as one -------------------------------- */
.wc-art{ margin:0; }
.wc-art figcaption{ max-width:none; }

/* ---- hero photograph ----------------------------------------------------- */
.hero-photo{ margin:0; }
.hero-photo img{ display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid rgba(255,255,255,.16); }
.hero-split .art{ margin:0; }

/* the sign-off is one sentence, so it reads as one line where there is room */
.abt .signoff p{ max-width:none; }
@media (min-width:1180px){ .abt .signoff p{ font-size:1.1rem; white-space:nowrap; } }

/* ---- Buying: how a cooperative contract gets to you ---------------------- */
.buy-art{ margin:34px 0 0; }
.buy-art:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.buy-art svg{ width:100%; height:auto; }
.hero .buy-art figcaption{ color:#C4DAE3; max-width:none; }
@media (max-width:760px){ .buy-art{ overflow-x:auto; }
  .buy-art svg{ min-width:760px; } }

/* the panels float over the page, so they carry a real edge and a deeper lift */
.mega{ border:2px solid var(--line-strong,var(--accent-ui)); border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(9,26,33,.45), 0 0 0 1px rgba(255,255,255,.04) inset; }
[data-theme="dark"] .mega{ box-shadow:0 30px 70px -18px rgba(0,0,0,.72); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mega{
  box-shadow:0 30px 70px -18px rgba(0,0,0,.72); } }

@media (min-width:1024px){
  .about-mega .who-col > ul > li > a{ min-height:88px; align-items:center; }
}

.who-hlogo{ width:auto; height:42px; }
.who-hlogo img{ display:block; width:96px; height:auto; }
@media (max-width:1023px){ .who-hlogo img{ width:82px; } }

@media (min-width:1024px){ .hero-split{ grid-template-columns:.9fr 1.1fr; gap:48px; } }

.buy-art{ margin:0; }
/* the circle is the tallest hero art on the site; it does not need to be */
@media (min-width:1024px){ .buy-art svg{ max-width:520px; margin-inline:auto; } }
.hero .buy-art figcaption strong{ color:#fff; }
@media (max-width:760px){ .buy-art{ overflow-x:visible; } .buy-art svg{ min-width:0; } }

/* ---- About masthead: words and picture ---------------------------------- */
.abt .masthead .inner{ display:grid; gap:44px; align-items:center; }
.abt .masthead .mh-say{ min-width:0; }
.abt-hero-img{ display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid rgba(255,255,255,.18); }
@media (min-width:1024px){
  .abt .masthead .inner{ grid-template-columns:1fr 1.02fr; }
  .abt .masthead h1{ max-width:none; }
  .abt .masthead .deck{ max-width:none; }
}
@media (max-width:1023px){ .abt-hero-img{ margin-top:8px; } }

/* the rows had grown past what a 800px-tall window can show */
@media (min-width:1024px){
  .site-nav .nav-mega li > a{ padding:7px 10px; gap:12px; }
  .nav-mega .icon-badge{ width:36px; height:36px; border-radius:11px; }
  .nav-mega .icon-badge svg{ width:19px; height:19px; }
  .nav-mega .m-text{ font-size:.94rem; }
  .nav-mega .m-text span{ margin-top:2px; font-size:.81rem; line-height:1.38; }
  .nav-mega .who-hname{ font-size:1rem; }
  .nav-mega .who-hsub{ font-size:.82rem; }
  .nav-mega .who-head{ padding-bottom:8px; }
  .about-mega .who-col > ul > li > a{ min-height:62px; }
  .about-mega .ab-cta{ padding:9px 12px; margin-top:8px; }
  .ab-hero-img{ max-height:168px; }
  #mega-who .who-col > ul > li{ max-height:104px; }
  .nav-mega{ padding:14px 24px 10px; }
  /* the band under the panel is a summary, not a section */
  .mega-foot .wrap{ padding-top:10px; padding-bottom:10px; }
  .ab-stat, .who-foot .wrap > *{ font-size:.96em; }
}

/* ---- What you get hero --------------------------------------------------- */
.jr-hero{ display:grid; gap:20px 48px; align-items:start; }
.jr-hero .jr-head h1{ margin-top:0; }
.jr-hero .jr-lede .lede{ max-width:none; }
@media (min-width:1024px){
  .jr-hero{ grid-template-columns:.9fr 1.1fr; }
  .jr-hero .jr-head{ grid-column:1; }
  .jr-art{ grid-column:2; grid-row:1; margin:0; align-self:start; }
  .jr-hero .jr-lede{ grid-column:1 / -1; }
}

@media (min-width:1024px){ .ab-hero-img{ max-height:218px; } }

/* six tiles read as two rows of three, not four and two */
/* .grid.three is two classes, so the override has to match its weight */
@media (min-width:1024px){ .grid.city-caps{ grid-template-columns:repeat(3,1fr); } }

@media (min-width:1024px){ .buy-art svg{ max-width:416px; } }