/* ==========================================================================
   Aero IT — site.css (v6: clear and credible)

   Written for the person choosing an IT partner for a company of 25 to 250+
   people: an owner, a COO, an office manager. They are busy and wary. The page
   has to answer "who are these people, what do they do, can I trust them, how
   do I reach them" at a glance, then reward a closer read.

   So: one friendly, sturdy typeface (Figtree, SIL OFL) at clear sizes, Aero blue
   for anything you can act on, white and a cool gray for the page, navy for
   the bands that carry the strongest statements. Content is grouped in plain
   panels you can scan. Nothing moves unless you touch it.

   The site is always in day mode (decided Oct 15, 2026): there is no dark
   theme and no switch, and the device's dark setting is ignored. No inline styles are used anywhere (the CSP forbids them).
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Day */
  color-scheme: light;
  --bg: #ffffff;
  --bg-alt: #f2f5fa;
  --card: #ffffff;
  --fg: #0c1a2e;
  --fg-soft: #4a586c;
  --rule: #d9e1ec;
  --brand: #1d4ed8;          /* Aero blue: 6.7:1 on white */
  --brand-hover: #163da8;
  --brand-ink: #ffffff;      /* text on a brand fill */
  --brand-tint: #e7eefd;
  --link: #1d4ed8;
  --ok: #157347;
  --no: #b42318;
  --star: #e8a200;
  --star-text: #8f5d00;     /* stars set as text, where they must read as text (4.9:1 on white) */
  --field: #ffffff;
  --field-line: #7a8799;
  --alert: #b42318;
  --alert-bg: #fdf0ee;
  --shadow: 0 1px 2px rgb(12 26 46 / 6%), 0 12px 32px -12px rgb(12 26 46 / 18%);

  /* The navy bands (top bar, footer, "everything" band, closing band) */
  --navy: #0b1a33;
  --navy-2: #13284a;
  --navy-fg: #ffffff;
  --navy-soft: #b8c6db;
  --navy-rule: #26406a;
  --navy-brand: #8db0ff;

  /* Type */
  --font: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.32vw, 1.3rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-4: clamp(1.95rem, 1.5rem + 2vw, 3rem);
  --step-5: clamp(2.3rem, 1.6rem + 3vw, 3.9rem);

  /* Space & shape */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --section: clamp(4rem, 3rem + 4.5vw, 7rem);
  --radius: 14px;
  --radius-sm: 10px;
  --max: 76rem;
  --head-h: 72px;
}


/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* WCAG 1.4.12: a long word ("questionnaires", a URL) breaks rather than pushing the page sideways when someone widens letter spacing */
body { overflow-wrap: break-word; }
.btn { max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 420;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 720; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: var(--step-5); letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-size: var(--step-4); letter-spacing: -0.026em; }
h3 { font-size: var(--step-2); font-weight: 680; letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: var(--step-1); font-weight: 680; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 680; }
hr { border: 0; height: 1px; background: var(--rule); margin: 2rem 0; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; background: var(--brand-tint); padding: .1em .35em; border-radius: 5px; }

:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  background: var(--brand); color: var(--brand-ink); padding: 0.75rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Grounds. A band changes its ground by re-pointing the tokens,
   so every part inside it follows without its own override. ---------- */
.mist { background: var(--bg-alt); --card: var(--bg); }
.dark, .cta-band {
  --bg: var(--navy); --bg-alt: var(--navy-2); --card: var(--navy-2); --fg: var(--navy-fg); --fg-soft: var(--navy-soft);
  --rule: var(--navy-rule); --brand: var(--navy-brand); --brand-hover: #b3caff; --brand-ink: #061430; --brand-tint: rgb(141 176 255 / 14%);
  --link: var(--navy-brand); --ok: #6fdba3; --no: #ff9b8f; --shadow: none;
  background: var(--bg); color: var(--fg);
}

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 48rem); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.62); }
.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 7fr; }
  .split-even { grid-template-columns: 1fr 1fr; }
  .split-rev { grid-template-columns: 7fr 5fr; }
  .sticky { position: sticky; top: calc(var(--head-h) + 2rem); }
}
.split h2 { font-size: var(--step-3); }
.stack > * + * { margin-top: 1rem; }
.lede { font-size: var(--step-1); color: var(--fg-soft); max-width: 42rem; line-height: 1.55; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.measure { max-width: 42rem; }

/* The small line above a heading says what the section is. Sentence case, in Aero blue. */
.eyebrow { margin: 0 0 .8rem; font-size: .95rem; font-weight: 650; line-height: 1.4; color: var(--brand); }
.notfit .eyebrow { color: var(--no); }

.section-head { margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); max-width: 48rem; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-bottom: 0.45em; }
.section-head .lede { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.7rem 1.35rem; border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--brand-ink);
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--brand-hover); color: var(--brand-ink); text-decoration: none; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 2rem; }
.btn-sm { min-height: 44px; padding: 0.5rem 1.05rem; font-size: 0.95rem; }

.text-link { font-weight: 650; display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; color: var(--link); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.text-link .arrow { transition: transform .15s ease; }

/* ---------- Top bar: office status, support ---------- */
.utility { position: relative; z-index: 51; background: var(--navy); color: var(--navy-soft); font-size: var(--step--1); }
.utility .wrap { display: flex; justify-content: flex-end; gap: .25rem 1.5rem; align-items: center; min-height: 42px; flex-wrap: wrap; padding-block: .3rem; }
.utility a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; font-weight: 520; }
.utility a:hover { text-decoration: underline; }
.utility svg { width: 14px; height: 14px; }
.utility :focus-visible { outline-color: #fff; }
.office { margin: 0 auto 0 0; display: flex; align-items: center; min-height: 32px; }

/* The office status: an icon and plain words. A headset while someone is at the desk, a shield while we watch from standby. */
.office-state { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; white-space: nowrap; }
.office-state:empty { display: none; }   /* without JavaScript there is no status, rather than a wrong one */
.office-state::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none; background: #8db0ff;
  -webkit-mask: var(--i-shield) center / contain no-repeat; mask: var(--i-shield) center / contain no-repeat;
}
html[data-office="open"] .office-state::before { background: #6fdba3; -webkit-mask-image: var(--i-headset); mask-image: var(--i-headset); }
:root {
  --i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='13' width='4' height='7' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='7' rx='1.5'/%3E%3Cpath d='M19 20c0 1.5-2 2-5 2'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10v-6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

@media (max-width: 40rem) {
  .utility .wrap { justify-content: space-between; gap: .1rem .75rem; }
  .office { flex: 1 1 auto; margin: 0; min-width: 0; flex-wrap: wrap; }
  .utility .office-state, .utility .office-label { white-space: normal; }
  .deck-now .office-state { white-space: normal; }   /* the after-hours status wraps at 320px instead of widening the page */
  .utility a { order: 2; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; color: var(--fg); background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand svg { width: 108px; height: auto; }
.brand-sub { font-size: 0.66rem; font-weight: 650; letter-spacing: .02em; line-height: 1.2; color: var(--fg-soft); padding-left: .8rem; border-left: 1px solid var(--rule); }
.brand:hover { color: inherit; }

.nav-toggle {
  display: none; align-items: center; gap: .55rem; min-height: 44px; min-width: 44px; padding: .5rem .95rem;
  background: var(--bg-alt); border: 0; color: var(--fg); border-radius: var(--radius-sm); font: inherit; font-weight: 620; cursor: pointer;
}
.nav-toggle .bars { width: 18px; height: 12px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; }
.nav-toggle .bars::before { top: 0; } .nav-toggle .bars span { top: 5px; } .nav-toggle .bars::after { bottom: 0; }

.primary-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.primary-nav a.nav-link, .primary-nav .sub-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .7rem; white-space: nowrap; border-radius: 8px;
  color: inherit; text-decoration: none; font-weight: 560; font-size: .97rem;
}
.primary-nav a.nav-link:hover { background: var(--bg-alt); }
.primary-nav a[aria-current="page"], .primary-nav a[aria-current="true"] { color: var(--brand); }
.has-sub { position: relative; display: flex; align-items: center; }
.has-sub > a.nav-link { padding-right: .15rem; }
.sub-toggle { background: none; border: 0; cursor: pointer; padding: .5rem !important; min-width: 36px; justify-content: center; font: inherit; }
.sub-toggle:hover { background: var(--bg-alt); }
.sub-toggle svg { width: 11px; transition: transform .15s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + .5rem); left: -1rem; min-width: 24rem; list-style: none; margin: 0; padding: .5rem;
  background: var(--card); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.submenu[hidden] { display: none; }
.submenu a { display: block; padding: .7rem .85rem; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.submenu a:hover { background: var(--bg-alt); }
.submenu a strong { display: block; font-weight: 650; }
.submenu a[aria-current="page"] strong { color: var(--brand); }
.submenu a span { display: block; font-size: var(--step--1); color: var(--fg-soft); }
.nav-cta { margin-left: .75rem; }

@media (max-width: 76rem) {
  :root { --head-h: 64px; }
  .brand-sub { display: none; }
  .nav-toggle { display: inline-flex; }
  .js .primary-nav { display: none; }
  .js .primary-nav.open { display: block; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); color: var(--fg); border-top: 1px solid var(--rule);
    padding: .75rem var(--gutter) 1.5rem; max-height: calc(100vh - var(--head-h)); max-height: calc(100dvh - var(--head-h)); overflow-y: auto; box-shadow: var(--shadow);
  }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a.nav-link { width: 100%; font-size: 1.1rem; min-height: 50px; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > a.nav-link { width: auto; flex: 1; }
  .sub-toggle { min-width: 48px; min-height: 48px; }
  .submenu { position: static; min-width: 0; width: 100%; box-shadow: none; border: 0; padding: 0 0 .5rem .5rem; background: transparent; }
  .nav-cta { margin: 1rem 0 0; }
  .nav-cta .btn { width: 100%; }
}
@media (max-width: 76rem) {
  /* without JavaScript the menu cannot be opened, so it is simply part of the page */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .header-inner { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .nav-toggle, html:not(.js) .sub-toggle { display: none; }
  html:not(.js) .primary-nav { position: static; width: 100%; max-height: none; padding: 0 0 1rem; box-shadow: none; overflow: visible; }
}
@media (min-width: 76.01rem) { .nav-toggle { display: none; } }

/* ---------- Page header (interior pages) ---------- */
.page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--rule); }
.page-hero > .wrap, .page-hero > .wrap-narrow { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); }
.page-hero h1 { max-width: 22ch; margin-bottom: 0; }
.page-hero .lede { margin: 1.25rem 0 0; }
.page-hero .btn-row { margin-top: 1.75rem; }
.breadcrumbs { font-size: var(--step--1); margin-bottom: 1.5rem; color: var(--fg-soft); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.breadcrumbs li { display: flex; gap: .45rem; align-items: center; }
.breadcrumbs li + li::before { content: "/"; opacity: .7; }
.breadcrumbs a { color: inherit; text-decoration: none; font-weight: 560; display: inline-flex; align-items: center; min-height: 28px; }
.breadcrumbs a:hover { color: var(--fg); text-decoration: underline; }

/* ==========================================================================
   Parts. Things you compare side by side sit in plain panels: a thin border,
   one radius, no decoration. A panel that is a link says so on hover.
   ========================================================================== */

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: .65rem;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card h3 { margin: 0; }
.card p { color: var(--fg-soft); margin: 0; }
.card .text-link { margin-top: auto; padding-top: .35rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card-link:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.card-link:hover .text-link .arrow { transform: translateX(4px); }
/* whole-card click target: the stretched link keeps one accessible link per card */
.card-link a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link a.stretch:focus-visible { outline: none; }
.card-link:has(a.stretch:focus-visible) { outline: 2.5px solid var(--brand); outline-offset: 3px; }

/* Icons sit on a tinted tile */
.icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); flex: none; margin-bottom: .35rem; }
.icon svg { width: 24px; height: 24px; }

.tag-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-list li { font-size: .82rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--brand-tint); color: var(--fg); }

/* small labels on items */
.audience .who, .pillar-num, .post-meta, .leader-body .role, .member .role, .contact-list .k {
  font-size: var(--step--1); font-weight: 600; line-height: 1.4; color: var(--fg-soft);
}
.audience .who { color: var(--brand); margin: 0; }

/* Pillars */
.pillar { padding: clamp(1.35rem, 1rem + 1vw, 1.85rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; }
.pillar-num { color: var(--brand); margin: 0 0 .9rem; }
.pillar h3 { margin-bottom: .5rem; }
.pillar p { color: var(--fg-soft); }
.pillar ul { list-style: none; padding: 0; margin: auto 0 0; border-top: 1px solid var(--rule); padding-top: .5rem; }
.pillar li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; color: var(--fg); font-weight: 620; text-decoration: none; }
.pillar li a:hover { color: var(--brand); }
.pillar li a span[aria-hidden] { color: var(--brand); transition: transform .15s ease; }
.pillar li a:hover span[aria-hidden] { transform: translateX(4px); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.stat { display: flex; flex-direction: column-reverse; }
.stat dt { font-size: var(--step--1); color: var(--fg-soft); }
.stat dd { margin: 0 0 .35rem; font-size: var(--step-4); font-weight: 760; letter-spacing: -0.03em; color: var(--fg); line-height: 1; }

/* Timeline: numbered steps joined by a line */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; }
@media (min-width: 60rem) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.timeline li { position: relative; padding-left: 3.6rem; }
.timeline li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-weight: 720; font-size: 1.05rem;
}
.timeline li::after { content: ""; position: absolute; left: 1.3rem; top: 2.9rem; bottom: -1.5rem; width: 2px; background: var(--rule); }
.timeline li:last-child::after { display: none; }
@media (min-width: 60rem) {
  .timeline li { padding: 3.6rem 0 0; }
  .timeline li::after { left: 3rem; right: -1.6rem; top: 1.3rem; bottom: auto; width: auto; height: 2px; }
}
.timeline .when { display: block; font-size: var(--step--1); font-weight: 650; color: var(--brand); }
.timeline h3 { font-size: var(--step-1); margin: .2rem 0 .4rem; }
.timeline p { color: var(--fg-soft); margin: 0; font-size: .98rem; }
.timeline + p { margin-top: 2.25rem; }
.timeline-v { grid-template-columns: 1fr !important; gap: 1.5rem !important; margin-top: 1rem; }
.timeline-v li { padding: 0 0 0 3.6rem !important; }
.timeline-v li::after { left: 1.3rem !important; right: auto !important; top: 2.9rem !important; bottom: -1.25rem !important; width: 2px !important; height: auto !important; }

/* Checklists: a tick in a tinted circle; a cross where the answer is no */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .95rem; }
.checks li { position: relative; padding-left: 2.15rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--brand-tint) center / 62% no-repeat;
}
.checks li::after {
  content: ""; position: absolute; left: .3rem; top: calc(.12em + .3rem); width: .8rem; height: .8rem; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checks-x li::before { background-color: color-mix(in srgb, var(--no) 13%, transparent); }
.checks-x li::after {
  background: var(--no);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.checks li strong { color: var(--fg); }
.checks-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: 2rem; }

/* Included list (service pages) */
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.included > * { padding: 1.4rem 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.included h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.included p { color: var(--fg-soft); margin: 0; }

/* Industries */
.industry { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.industry:last-of-type { border-bottom: 0; }
.industry h2 { font-size: var(--step-3); }
.industry h3 { margin: 0 0 .75rem; font-size: var(--step--1); font-weight: 650; color: var(--brand); }
.chip-nav ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.chip-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 54px; padding: .7rem 1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  color: var(--fg); font-weight: 620; text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.chip-nav a::after { content: "\2192"; color: var(--brand); transition: transform .15s ease; }
.chip-nav a:hover { border-color: var(--brand); color: var(--brand); }
.chip-nav a:hover::after { transform: translateX(3px); }
.page-hero .chip-nav { margin-top: 2rem; }

/* Quotes: review cards with their stars */
.quote { margin: 0; padding: clamp(1.35rem, 1rem + 1vw, 1.85rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; }
.quote p { margin: 0; }
.quote::before { content: "\2605\2605\2605\2605\2605"; color: var(--star); letter-spacing: .12em; font-size: .95rem; margin-bottom: .75rem; }
.quote blockquote { margin: 0 0 1.25rem; font-size: var(--step-0); line-height: 1.6; }
.quote figcaption { margin-top: auto; color: var(--fg-soft); font-size: var(--step--1); padding-top: 1rem; border-top: 1px solid var(--rule); }
.quote figcaption strong { display: block; color: var(--fg); font-size: var(--step-0); }
.reviews .quote:first-child { border-color: var(--brand); }
@media (min-width: 60rem) {
  .reviews .quote:first-child { grid-column: span 2; }
  .reviews .quote:first-child blockquote { font-size: var(--step-2); line-height: 1.4; font-weight: 560; letter-spacing: -0.012em; }
}

/* FAQ: an accordion of plain panels */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.faq details[open] { border-color: var(--brand); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center;
  min-height: 60px; padding: .9rem 1.15rem; font-weight: 650; font-size: var(--step-0); line-height: 1.35; border-radius: var(--radius-sm);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand); font-size: 1.2rem; font-weight: 600; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.15rem 1.15rem; color: var(--fg-soft); max-width: 46rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Closing band: every page ends on the invitation, in Aero blue */
.cta-band {
  position: relative; overflow: hidden;
  --bg: #1a44c2; --fg: #ffffff; --fg-soft: #dce6ff; --rule: rgb(255 255 255 / 40%);
  --brand: #ffffff; --brand-hover: #e3ebff; --brand-ink: #12307f; --link: #ffffff;
}
.cta-band :focus-visible { outline-color: #fff; }
.cta-band .wrap { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); display: grid; gap: 1.5rem 4rem; align-items: center; }
@media (min-width: 60rem) { .cta-band .wrap { grid-template-columns: 1fr 1.1fr; } }
.cta-band h2 { font-size: var(--step-5); margin: 0; max-width: 14ch; }
.cta-band p { color: var(--fg-soft); font-size: var(--step-1); line-height: 1.55; margin: 0; }
.cta-band .btn-row { margin-top: 1.5rem; }
.cta-band .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--fg); }
.cta-band .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }

/* Callout */
.callout { background: var(--brand-tint); border-radius: var(--radius-sm); padding: 1rem 1.2rem; border-left: 4px solid var(--brand); }
.callout p { margin: 0; }
.callout strong { color: var(--alert); }
.callout-info strong { color: var(--fg); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.table-wrap:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { background: var(--bg-alt); font-size: var(--step--1); font-weight: 680; color: var(--fg); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 650; }
tbody td { color: var(--fg-soft); }
.compare td:last-child { background: var(--brand-tint); color: var(--fg); font-weight: 560; }
.compare thead th:last-child { background: var(--brand); color: var(--brand-ink); }

/* People */
.person { display: flex; flex-direction: column; gap: .35rem; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-weight: 720; font-size: 1.15rem; margin-bottom: .6rem; }
.person .role { color: var(--fg-soft); font-size: var(--step--1); margin: 0; }
.leaders { display: grid; gap: 1.25rem; }
.leader { display: grid; gap: 1.25rem 2.5rem; align-items: start; padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
@media (min-width: 48rem) { .leader { grid-template-columns: 10rem 1fr; } .leader .headshot { width: 10rem; } }
.leader-body h3 { margin-bottom: .25rem; }
.leader-body .role, .member .role { color: var(--brand); margin: 0 0 1rem; }
.leader-body p { color: var(--fg-soft); max-width: 46rem; }
.leader-body p:last-child { margin-bottom: 0; }
.headshot { width: 8.5rem; max-width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: var(--radius); background: var(--brand-tint); display: block; }
.headshot-ph { display: grid; place-items: center; color: var(--brand); font-size: 2rem; font-weight: 720; letter-spacing: -0.02em; }
.member { display: flex; flex-direction: column; gap: .35rem; padding: 1.35rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.member .headshot { width: 4.5rem; border-radius: 50%; }
.member h3 { font-size: var(--step-1); margin: .6rem 0 0; }
.member .role { margin-bottom: .3rem; }
.member p:last-child { color: var(--fg-soft); margin: 0; font-size: .95rem; }
.team .headshot-ph { font-size: 1.2rem; }

/* Forms */
.form { display: grid; gap: 1.3rem; }
.form-row { display: grid; gap: 1.3rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label, .field legend { font-weight: 620; font-size: .98rem; }
.field .hint { font-size: var(--step--1); color: var(--fg-soft); margin: 0; }
.req { color: var(--alert); font-weight: 700; }
.opt { color: var(--fg-soft); font-weight: 420; font-size: var(--step--1); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 50px; padding: .7rem .95rem; font: inherit; color: var(--fg);
  background: var(--field); border: 1.5px solid var(--field-line); border-radius: var(--radius-sm);
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
[aria-invalid="true"] { border-color: var(--alert) !important; }
.field-error { color: var(--alert); font-size: .92rem; font-weight: 620; margin: 0; display: flex; gap: .4rem; }
.field-error[hidden] { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: .6rem; }
.checks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .4rem 1.25rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; min-height: 44px; padding: .45rem 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--brand); flex: none; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.error-summary { border: 2px solid var(--alert); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; background: var(--alert-bg); }
.error-summary h2 { font-size: var(--step-1); color: var(--alert); margin-bottom: .5rem; }
.error-summary ul { margin: 0; }
.error-summary a { color: var(--alert); font-weight: 620; }
.error-summary[hidden] { display: none; }
.form-status { font-weight: 620; }
.form-note { font-size: var(--step--1); color: var(--fg-soft); }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }

/* Contact details */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: grid; grid-template-columns: 46px 1fr; gap: .9rem; align-items: center; }
.contact-list .icon { margin: 0; }
.contact-list .k { display: block; }
.contact-list a { font-weight: 650; }

/* Prose pages (legal, articles) */
.prose { max-width: 46rem; font-size: var(--step-0); line-height: 1.72; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-3); margin-top: 2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.7em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 4px solid var(--brand); font-size: var(--step-1); line-height: 1.5; font-weight: 560; }
.prose p:first-child { font-size: var(--step-1); line-height: 1.55; }
.post-next .btn-row { margin-top: 1rem; }

/* Footer */
.site-footer { position: relative; z-index: 1; background: var(--navy); color: var(--navy-soft); font-size: .95rem; }
.site-footer .wrap { padding-block: clamp(3.5rem, 2rem + 4vw, 5rem) 2rem; }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--navy-rule); }
@media (min-width: 60rem) { .footer-top { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.footer-brand svg { width: 124px; color: #fff; }
.footer-brand .brand-sub { color: var(--navy-soft); border-color: var(--navy-rule); }
.footer-brand .brand-line { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.site-footer h2 { margin: 0 0 .9rem; font-size: .95rem; font-weight: 680; letter-spacing: 0; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--navy-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer address a { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: var(--step--1); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.social { display: flex; gap: .4rem; margin: 1.25rem 0 0; }
.social a { width: 42px; height: 42px; display: grid !important; place-items: center; color: #fff !important; border-radius: 10px; background: rgb(255 255 255 / 8%); }
.social a:hover { background: rgb(255 255 255 / 16%); }
.social svg { width: 18px; height: 18px; }

/* Placeholders: content Aero must supply before launch.
   `python build.py --release` refuses to build while any remain. */
.ph { outline: 1.5px dashed var(--alert); outline-offset: 2px; border-radius: 3px; color: inherit; }

.h-sm { font-size: var(--step-3); margin-bottom: 1.25rem; }
address { font-style: normal; }
.aside-stack > * + * { margin-top: 2rem; }
.aside-stack h3 { font-size: var(--step-1); }

/* Ratings: a compact row of proof */
.badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.badges a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .85rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--fg); font-size: var(--step--1); font-weight: 560; text-decoration: none;
}
.badges a { flex-wrap: wrap; max-width: 100%; }   /* with wider letter spacing the pill wraps instead of spilling out of the hero */
.badges a:hover { border-color: var(--brand); }
.badges .stars { color: var(--star-text); letter-spacing: .06em; font-size: .9em; }
.badges strong { font-weight: 760; }
.badges .muted { color: var(--fg-soft); }

/* Updates */
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.post-card h3 { margin: .15rem 0 .1rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.page-hero .post-meta { margin-top: 1.25rem; }

/* Page-to-page: a quick dissolve */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .2s ease both; }
  ::view-transition-new(root) { animation: vt-in .3s ease both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Print */
@media print {
  .utility, .site-header, .site-footer .social, .skip-link { display: none !important; }
  .dark, .cta-band, .site-footer { background: #fff !important; color: #000 !important; --fg: #000; --fg-soft: #333; }
  a { color: #000; }
  .card, .pillar, .quote, .panel { box-shadow: none !important; }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
  .btn, .office-state, .badges a { border: 1px solid CanvasText; }
  .checks li::after, .office-state::before { background: CanvasText; }
  .ph { outline: 2px dashed CanvasText; }
}

/* ==========================================================================
   Home page
   ========================================================================== */

/* The opening: what we do and who for on the left; the five questions every
   buyer asks, answered, on the right, with whether someone is at the desk now. */
.hero { background: var(--bg-alt); border-bottom: 1px solid var(--rule); }
.hero-inner { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }
.hero-inner > * { min-width: 0; }   /* one column on phones: let it shrink to the screen */
@media (min-width: 64rem) { .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.55rem); max-width: 18ch; margin-bottom: .45em; }
.hero .lede { font-size: var(--step-1); max-width: 37rem; }
/* the promise line under the home headline */
.hero-promise { margin: 0 0 1rem; font-size: var(--step-1); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); }
.hero-promise span { color: var(--brand); }
.hero .btn-row { margin-top: 1.75rem; }
.hero-note { display: flex; align-items: center; gap: .55rem; margin: 1.5rem 0 .85rem; font-size: var(--step--1); font-weight: 560; color: var(--fg-soft); }
.hero-note::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Straight answers */
.deck { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.deck-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rule); }
.deck-title { margin: 0; font-size: 1.15rem; font-weight: 720; letter-spacing: -0.015em; }
.deck-now { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; font-size: var(--step--1); font-weight: 600; color: var(--fg-soft); }
.deck-now:has(.office-state:empty) { display: none; }
.deck-now .office-state { color: var(--fg); }
.deck-now .office-state::before { background: var(--brand); }
html[data-office="open"] .deck-now .office-state::before { background: var(--ok); }
.qa { margin: 0; }
.qa > div { padding: 1rem 1.4rem; border-bottom: 1px solid var(--rule); }
.qa > div:last-child { border-bottom: 0; }
.qa dt { font-weight: 700; font-size: 1.02rem; line-height: 1.35; margin-bottom: .2rem; }
.qa dd { margin: 0; color: var(--fg-soft); font-size: .97rem; line-height: 1.5; }

/* "If it plugs in, connects, or logs in, it's ours." on navy */
.everything .checks { column-gap: 2.5rem; }
.everything .checks li { color: var(--fg); font-weight: 520; }
@media (min-width: 60rem) { .everything .checks-2 { grid-template-columns: 1fr 1fr; } }

/* "Why organizations switch": each complaint, then what we do about it */
.switch .checks li { padding: 1.15rem 1.25rem 1.15rem 3.35rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--fg-soft); }
.switch .checks li::before { left: 1.2rem; top: 1.25rem; }
.switch .checks li::after { left: 1.5rem; top: calc(1.25rem + .3rem); }
.switch .checks li strong { display: block; margin-bottom: .15rem; color: var(--fg); }

/* "A fair warning" sits in its own quiet panel */
.notfit .wrap.split { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border: 1px solid var(--rule); border-radius: 18px; background: var(--card); }

/* Notes from the work */
.upd .post-card { box-shadow: var(--shadow); }

/* ==========================================================================
   Version C, "Approachable": light, rounded and warm. navy, steel and pale blues
   with near-black, a friendly geometric sans (Figtree), pill buttons, generous
   rounded panels.
   ========================================================================== */
:root {
  --bg: #ffffff; --bg-alt: #f4f6fa; --card: #ffffff; --fg: #0b0f19; --fg-soft: #4a5263; --rule: #d9e0ec;
  /* three blues: navy for actions, a steel blue for marks and links, a pale blue for grounds */
  --brand: #1e3a8a; --brand-hover: #162c6b; --brand-ink: #ffffff; --brand-tint: #e8edf7; --link: #1e40af;
  --accent: #2d56c4;
  --radius: 24px; --radius-sm: 16px;
  --navy: #0a0c11; --navy-2: #151a24; --navy-rule: #272e3c; --navy-soft: #b7c0d0; --navy-brand: #8eb0f5;
  --hero-tint: #eaeff8;
  --cta-bg: #12285e; --cta-ink: #12285e;
  --danger: #b42318; --danger-deep: #8f1a12;
}

h1, h2, h3 { font-weight: 750; letter-spacing: -0.03em; }
.eyebrow { color: var(--brand); font-weight: 700; }
.btn { border-radius: 999px; padding-inline: 1.5rem; }
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.btn-ghost:hover { background: var(--brand-tint); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.nav-toggle { border-radius: 999px; }

/* the opening: a big rounded mint panel inside the page, not edge to edge */
.hero { background: var(--bg); border: 0; }
.hero-inner { background: var(--hero-tint); border-radius: 36px; padding: clamp(1.75rem, 1rem + 3vw, 4rem); margin-block: clamp(1rem, .5rem + 1.5vw, 2rem); }
.hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.8rem); }
.hero .badges a { background: var(--bg); border-color: transparent; }
.deck { border-radius: 26px; border: 0; }
.deck-head { border-bottom: 0; background: var(--brand); color: var(--brand-ink); }
.deck-head .deck-title, .deck-head .deck-now, .deck-head .office-state { color: var(--brand-ink); }
.deck-head .office-state::before, html[data-office="open"] .deck-head .office-state::before { background: var(--brand-ink); }
.qa > div { border-bottom-style: dashed; }

.card, .pillar, .quote, .member, .leader, .included > *, .faq details, .chip-nav a { border-radius: var(--radius); }
.card, .pillar, .quote { border-color: var(--rule); }
.icon { border-radius: 50%; width: 52px; height: 52px; }
.audience .who { display: inline-block; align-self: flex-start; padding: .2rem .7rem; border-radius: 999px; background: var(--brand-tint); }
.timeline li::before { box-shadow: 0 0 0 6px var(--brand-tint); }
.chip-nav a { border-radius: 999px; padding-inline: 1.25rem; }
.faq details { border-radius: 18px; }
.faq summary { border-radius: 18px; }
.notfit .wrap.split { border-radius: 32px; background: var(--bg-alt); border: 0; }
.switch .checks li { border-radius: 18px; }
.page-hero { background: var(--bg); border: 0; }
.page-hero > .wrap, .page-hero > .wrap-narrow { background: var(--hero-tint); border-radius: 36px; padding: clamp(1.75rem, 1rem + 3vw, 3.75rem); margin-block: clamp(1rem, .5rem + 1.5vw, 2rem); }

/* the closing invitation */
.cta-band { --bg: var(--cta-bg); --brand: #ffffff; --brand-ink: var(--cta-ink); --brand-hover: #e6eeff; --fg-soft: #e3ebff; }
.cta-band .wrap { margin-block: clamp(1rem, .5rem + 1.5vw, 2rem); }
.cta-band .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 60%); }
.cta-band .btn-ghost:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.office-state::before { background: #7ea6ff; }

/* the steel blue carries the small marks */
.eyebrow, .audience .who, .timeline .when, .pillar-num { color: var(--accent); }
.icon { color: var(--accent); }
.checks li::after { background: var(--accent); }
.checks-x li::after { background: var(--no); }
.dark .checks li::after, .dark .icon, .dark .eyebrow { color: var(--navy-brand); }
.dark .checks li::after { background: var(--navy-brand); }
.hero-note::before { background: var(--accent); }

/* Current status, in the top bar */
.office-label { color: var(--navy-soft); font-weight: 500; margin-right: .45rem; white-space: nowrap; }
.office:has(.office-state:empty) .office-label { display: none; }

/* A security incident is never an email: a red banner that asks for a phone call */
.incident {
  display: grid; gap: 1rem 2rem; align-items: center; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius); background: var(--danger); color: #fff;
  --fg: #fff; --fg-soft: #ffe1dd; --link: #fff;
}
@media (min-width: 52rem) { .incident { grid-template-columns: auto 1fr auto; } }
.incident::before {
  content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(255 255 255 / 16%) center / 1.6rem no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18h.01'/%3E%3C/svg%3E");
}
.incident h2, .incident h3 { margin: 0 0 .3rem; font-size: var(--step-2); color: #fff; }
.incident p { margin: 0; color: #ffe9e6; }
.incident p strong { color: #fff; }
.incident .btn { background: #fff; color: var(--danger-deep); font-size: 1.1rem; min-height: 56px; padding-inline: 1.6rem; white-space: nowrap; }
.incident .btn:hover { background: #ffeeec; color: var(--danger-deep); }
.incident :focus-visible { outline-color: #fff; }
.incident-sm { grid-template-columns: auto 1fr !important; }
.incident-sm .btn { grid-column: 1 / -1; justify-self: start; }

/* support: three ways in */
.ways .card .btn-row { margin-top: auto; padding-top: .75rem; }
.ways .card .btn-row .btn { margin: 0; }
.form-status[data-state="sent"] { padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--fg); }

.ways-title { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-hero + .section:has(> .wrap > .incident) { padding-top: clamp(1rem, .5rem + 1.5vw, 2rem); }
.primary-nav .btn[aria-current] { color: var(--brand-ink); }
.dark .timeline .when, .dark .audience .who, .dark .pillar-num, .dark .hero-note::before { color: var(--navy-brand); }

/* ==========================================================================
   Grids that hold their shape as the window changes size. Each grid steps
   between set layouts (1, 2, 3 or 4 across) instead of reflowing freely, so a
   row never ends with a single card left on its own.
   ========================================================================== */
.grid-2, .grid-3, .grid-4, .included { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) {
  .grid-2, .grid-4, .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd card out at two across takes the full row */
  .grid-4 > :last-child:nth-child(odd), .included > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 58rem) {
  .grid-3:not(.reviews) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .included { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .included > :last-child:nth-child(odd) { grid-column: auto; }
  .included > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .included > :last-child:nth-child(3n+2) { grid-column: span 2; }
  /* six reviews: the featured one takes a 2 x 2 block, the rest fill around it */
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews .quote:first-child { grid-column: span 2; grid-row: span 2; }
  .reviews .quote:first-child blockquote { font-size: var(--step-3); line-height: 1.3; margin-block: auto; padding-block: 1.5rem; max-width: 30ch; }
  .reviews .quote:first-child figcaption { margin-top: 0; }
}
@media (max-width: 67.99rem) {
  .reviews .quote:first-child { grid-column: auto; }
  .reviews .quote:first-child blockquote { font-size: var(--step-0); line-height: 1.6; font-weight: inherit; letter-spacing: normal; }
}
@media (min-width: 72rem) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-4 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid-4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
  .grid-4 > :last-child:nth-child(4n+2) { grid-column: span 3; }
}

/* Large monitors: the whole page scales up gently past 1440px (to 112.5% at
   2560px) instead of sitting small in the middle of a wide screen. */
html { font-size: clamp(100%, 83.93% + 0.1786vw, 112.5%); }

/* the comparison on How We Work: Aero's logo heads the Aero column */
.compare thead th.th-logo { vertical-align: middle; }
.compare .compare-logo { display: block; width: 5.25rem; height: auto; }
/* "What's included" links land with the section label just under the header, not its top padding */
#included { scroll-margin-top: calc(1.5rem - var(--section)); }

/* --------------------------------------------------------------------------
   Partner wall (About). Tiles stay white so partner logos,
   which are drawn for light backgrounds, keep their own colors.
   -------------------------------------------------------------------------- */
.partner-wall { list-style: none; margin: clamp(1.75rem, 1rem + 2vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.partner { display: grid; place-items: center; min-height: 5.5rem; padding: 0.9rem 0.85rem; background: #ffffff; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.partner img { display: block; width: auto; max-width: 100%; height: auto; max-height: 2.75rem; object-fit: contain; }
.partner-text span { color: #0b0f19; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; text-align: center; }

/* --------------------------------------------------------------------------
   "What we support" ticker (Fully Managed IT). Without JavaScript, or with
   reduced motion, it is a static, wrapped list. site.js adds .is-live to run
   it for 10 seconds, with a pause button (WCAG 2.2.2), then shows the quip.
   -------------------------------------------------------------------------- */
.ticker-band { padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); border-block: 1px solid var(--rule); }
.ticker-band .h-sm { margin-bottom: 1.25rem; }
.ticker.ticker-short.is-live .ticker-track { animation-duration: 30s; }
.everything .section-head { margin-bottom: 1.75rem; }
.everything-more { margin: 1rem 0 0; }
.ticker { position: relative; }
.ticker-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ticker-track li { flex: none; padding: 0.45rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--fg); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.ticker-track li.dup { display: none; }
.ticker-controls { margin-top: 0.75rem; }
.ticker-pause[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ticker-end { margin-top: 1.5rem; }
.ticker-quip { font-size: var(--step-1, 1.2rem); margin: 0 0 1rem; }

.ticker.is-live { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.ticker.is-live .ticker-track { flex-wrap: nowrap; width: max-content; animation: ticker-scroll 42s linear infinite; }
.ticker.is-live .ticker-track li.dup { display: block; }
.ticker.is-live.is-paused .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker.is-live .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker.is-live .ticker-track li.dup { display: none; }
  .ticker.is-live { mask-image: none; }
}

.ticker-wrap [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Remote session join box (Support page card and footer).
   -------------------------------------------------------------------------- */
.join-form { margin-top: 0.75rem; }
.join-form label { display: block; font-weight: 650; margin-bottom: 0.4rem; }
.join-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.join-row input { flex: 1 1 9rem; min-width: 0; min-height: 50px; padding: 0.6rem 0.9rem; font: inherit; font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--fg); background: var(--bg); border: 1.5px solid var(--fg-soft); border-radius: var(--radius-sm); }
.join-row input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.join-form-footer { margin-top: 0.35rem; max-width: 18rem; }
.join-form-footer label { color: #fff; font-weight: 600; font-size: 0.95rem; }
.join-form-footer .join-row input { min-height: 44px; font-size: 1rem; color: #0b0f19; background: #ffffff; border-color: #ffffff; }
.join-form-footer .join-row input::placeholder { color: #4a5263; }
.join-form-footer .join-row input:focus-visible { outline-color: #ffffff; }