/* ============================================================
   SQL View — one stylesheet for the whole site.
   Change a value here and all 224 pages follow.

   No webfonts. The work is done with spacing, scale and
   restraint. Sections are generous, the type scale is tight,
   and colour is used sparingly so the few accents land.
   ============================================================ */

:root {

  /* --- ink ------------------------------------------------ */
  --ink:        #0f1720;   /* headings, body                */
  --ink-soft:   #55636f;   /* secondary text                */
  --ink-faint:  #8b97a2;   /* captions, fine print          */

  /* --- surfaces ------------------------------------------- */
  --bg:         #ffffff;
  --bg-soft:    #f6f8fa;   /* panels, table headers         */
  --bg-dark:    #08090d;   /* hero, dark bands              */
  --line:       #e5e9ee;
  --line-dark:  #23252e;

  /* --- accent --------------------------------------------- */
  --accent:     #1a4fd6;   /* links, eyebrows               */
  --accent-dk:  #143ea9;
  --brand:      #c3172c;   /* primary button                */
  --brand-dk:   #a01123;

  /* the one gradient, used for headline words and card rules */
  --grad: linear-gradient(90deg, #3b4fe4 0%, #7b2ff7 34%, #e0219b 68%, #e23a3a 100%);

  /* --- rhythm --------------------------------------------- */
  --measure:    68ch;      /* comfortable reading width      */
  --maxwidth:   1140px;
  --gutter:     clamp(20px, 5vw, 40px);
  --band:       clamp(56px, 9vw, 116px);   /* section padding */
  --radius:     14px;
}

/* ---------------------------------------------------------- reset */

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

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

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

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--maxwidth);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------- type */

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.033em;
  margin: 0 0 0.5em;
}

h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.15rem);
  letter-spacing: -0.026em;
  margin: 2.4em 0 0.6em;
}

h3 {
  font-size: clamp(1.12rem, 1rem + 0.45vw, 1.32rem);
  margin: 1.9em 0 0.5em;
}

h4, h5, h6 {
  font-size: 1.02rem;
  margin: 1.7em 0 0.45em;
}

/* first heading in a section should not push away from the top */
main > .section > :is(h1, h2, h3):first-child,
.section > .wrap > :is(h1, h2, h3):first-child,
.eyebrow + h2 { margin-top: 0; }

p, ul, ol, blockquote, table { margin: 0 0 1.15em; }

main p, main li { max-width: var(--measure); }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.42vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 1.6em;
}

.eyebrow {
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9em;
}

.fineprint {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 76ch;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-dk); }

strong, b { font-weight: 650; }

code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  font-size: 0.88em;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }

li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.35em; }

blockquote {
  margin-inline: 0;
  padding: 0.15em 0 0.15em 1.35em;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  white-space: pre-line;
}

/* ---------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding-block: 12px;
  flex-wrap: wrap;
}

.logo {
  font-size: 1.06rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  align-items: center;
}

.nav a {
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav a.active { color: var(--ink); font-weight: 620; border-bottom-color: var(--brand); }

/* ---------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  color: #eef1f5;
  padding-block: clamp(64px, 10vw, 132px);
  border-bottom: 1px solid var(--line-dark);
}

/* two soft lights, so the black is not flat */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -20%;
  height: 150%;
  z-index: -1;
  background:
    radial-gradient(48ch 40ch at 78% 18%, rgba(123, 47, 247, 0.30), transparent 68%),
    radial-gradient(44ch 34ch at 12% 88%, rgba(195, 23, 44, 0.22), transparent 66%);
}

/* the gradient rule that closes the dark band */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--grad);
}

.hero h1 { color: #fff; max-width: 17ch; }
.hero .lead { color: #b9c2cc; max-width: 56ch; }
.hero a:not(.btn):not(.btn-quiet) { color: #cdd5de; }

/* the one gradient headline word */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------- buttons */

.btn, .btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.86em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.btn {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px -12px rgba(195,23,44,.7);
}
.btn:hover { background: var(--brand-dk); color: #fff; transform: translateY(-1px); }

.btn-quiet {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-quiet:hover { border-color: var(--ink-faint); color: var(--ink); }

.hero .btn-quiet { border-color: #3a3f4a; color: #e7ebf0; }
.hero .btn-quiet:hover { border-color: #6c7481; color: #fff; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2em;
}

/* ---------------------------------------------------------- chips */

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
}

.chips li {
  font-size: 0.83rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32em 0.95em;
  margin: 0;
  max-width: none;
}

.hero .chips li {
  color: #aab3bd;
  border-color: #2a2e38;
  background: rgba(255,255,255,.03);
}

/* ---------------------------------------------------------- sections */

.section { padding-block: var(--band); }

main > .section + .section { border-top: 1px solid var(--line); }

.crumbs {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-bottom: 1.6em;
  max-width: none;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 2.2em 0 2.6em;
  align-items: start;   /* a card with no body stays short */
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.2vw, 30px);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .15s ease;
}

.card:hover {
  border-color: #d5dbe3;
  box-shadow: 0 1px 2px rgba(15,23,32,.04), 0 18px 40px -28px rgba(15,23,32,.45);
  transform: translateY(-2px);
}
.card:hover::after { opacity: 1; }

.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }

.card :is(h2, h3, h4) {
  font-size: 1.11rem;
  letter-spacing: -0.018em;
  margin: 0 0 0.55em;
}

.card p, .card li { font-size: 0.95rem; max-width: none; }
.card p { color: var(--ink-soft); }

.card .tag {
  margin-top: auto;
  padding-top: 1em;
  font-size: 0.715rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

.card .step {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: #eef2fd;
  border-radius: 7px;
  padding: 0.25em 0.62em;
  margin: 0 0 1em;
}

/* stat tiles read as numbers first */
.cards.stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stats .card :is(h2, h3, h4) {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.35em;
}

.stats .card p { font-size: 0.88rem; line-height: 1.5; }

/* ---------------------------------------------------------- client logos */

.logos-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.6em 0 1.4em;
  max-width: none;
}

.logos-label strong { font-weight: 700; }

.logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(26px, 3.4vw, 48px);
  margin: 0 0 1em;
  padding: 0;
}

.logos li { margin: 0; max-width: none; }

/* one height for every mark, so widths vary but weight reads even */
.logos img {
  display: block;
  height: 42px;
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity .15s ease, filter .15s ease;
}

.logos img:hover { opacity: 1; filter: none; }

/* crest-style marks carry their wordmark underneath, so they need
   a little more height to stay legible next to wide logotypes */
.logos img[src*="client-moe"] { height: 54px; }
.logos img[src*="client-shell"],
.logos img[src*="client-jtc"] { height: 46px; }

.logos-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-faint);
}

/* certification marks sit under the label, sized by height so the
   two marks always match whatever card they land in */
.badge {
  display: block;
  /* .card is a flex column, so the default align-items:stretch was pulling
     the mark to the full card width and distorting it against height:74px */
  align-self: flex-start;
  width: auto;
  height: 74px;
  margin-top: 1.1em;
}

/* a stat on its own should not stretch across the page */
.cards.stats:has(.card:only-child) { grid-template-columns: minmax(0, 320px); }

/* ---------------------------------------------------------- flow */

.flow {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
  margin: 2em 0;
  padding: 0;
}

.flow li {
  counter-increment: step;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

.flow li strong { display: block; color: var(--ink); margin-bottom: 0.25em; }

.flow li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.7em;
}

/* ---------------------------------------------------------- callout */

p.cta {
  max-width: var(--measure);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 1em 1.25em;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------- tables */

.table-scroll, main table { display: block; overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93rem;
}

th, td {
  border: 1px solid var(--line);
  padding: 0.7em 0.9em;
  text-align: left;
  vertical-align: top;
}

th { background: var(--bg-soft); font-weight: 650; }

/* ---------------------------------------------------------- subpages */

.subpages {
  margin-top: 3.4em;
  padding-top: 2em;
  border-top: 1px solid var(--line);
}

.subpages h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1em;
}

.subpages ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 36px;
}

.subpages li {
  break-inside: avoid;
  margin-bottom: 0.55em;
  font-size: 0.94rem;
  max-width: none;
}

.subpages a { text-decoration: none; }
.subpages a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- footer */

.site-footer {
  background: var(--bg-dark);
  padding-block: clamp(40px, 5vw, 64px);
  color: #98a2ae;
  font-size: 0.9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-bottom: 1.4em;
}

.footer-nav a { color: #e7ebf0; text-decoration: none; font-weight: 500; }
.footer-nav a:hover { color: #fff; }

.footer-nav-sub { margin-bottom: 1.4em; }
.footer-nav-sub a { font-weight: 450; color: #a8b2bd; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 1.3em;
  border-top: 1px solid #22252d;
  margin-bottom: 1.1em;
}

.footer-legal a {
  font-size: 0.82rem;
  color: #7b8592;
  text-decoration: none;
}
.footer-legal a:hover { color: #cdd5de; }

.site-footer p { margin: 0; color: #6f7885; max-width: none; font-size: 0.82rem; }

/* ---------------------------------------------------------- small screens */

@media (max-width: 720px) {
  .subpages ul { columns: 1; }
  .header-inner { min-height: 56px; }
  .nav { gap: 4px 16px; }
  .nav a { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
  .card:hover, .btn:hover { transform: none; }
}

/* ---------------------------------------------------------- hero grid */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.hero-copy > :last-child { margin-bottom: 0; }
.hero h1 { max-width: 19ch; }
.hero .lead { max-width: 46ch; }

.hero-panel {
  border: 1px solid #23262f;
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 30px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter: blur(2px);
}

.panel-title {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #98a2ae;
  margin: 0 0 1.3em;
  max-width: none;
}

.hero-panel .flow {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 1.4em;
}

/* the payoff step gets the full width */
.hero-panel .flow li:last-child { grid-column: 1 / -1; }

.hero-panel .flow li {
  border-color: #262a34;
  background: rgba(255,255,255,.035);
  color: #98a2ae;
  padding: 14px 15px;
  font-size: 0.85rem;
}

.hero-panel .flow li strong { color: #e9edf2; font-size: 0.93rem; }
.hero-panel .flow li::before { color: #8a7bf0; }

.panel-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #8f99a5;
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1, .hero .lead { max-width: none; }
}

/* ============================================================
   Alternating bands, as in the design comp:
   dark hero, light, dark, soft, dark, then the footer.
   Cards stay white on every band, which is what gives the
   dark sections their contrast.
   ============================================================ */

.band-light { background: var(--bg); }
.band-soft  { background: #f4f4fa; }

main > .band-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  color: #c4ccd6;
}

/* the same two soft lights as the hero, so the dark bands read as
   one family rather than flat black. Each band shifts them so no
   two sections look stamped from the same plate. */
main > .band-dark::before {
  content: "";
  position: absolute;
  inset: -35% -12%;
  z-index: -1;
  background:
    radial-gradient(46ch 38ch at 82% 12%, rgba(123, 47, 247, 0.26), transparent 68%),
    radial-gradient(42ch 32ch at 10% 92%, rgba(195, 23, 44, 0.20), transparent 66%);
}

/* mirrored, and a touch cooler, on the closing section */
main > .band-dark#request::before {
  background:
    radial-gradient(48ch 40ch at 14% 14%, rgba(59, 79, 228, 0.26), transparent 68%),
    radial-gradient(42ch 34ch at 88% 88%, rgba(224, 33, 155, 0.18), transparent 66%);
}

/* the thin gradient rule closes every dark band */
main > .band-dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--grad);
}

.band-dark :is(h2, h3, h4) { color: #fff; }
.band-dark .lead           { color: #aab4c0; }
.band-dark .fineprint      { color: #7c8794; }
.band-dark .eyebrow        { color: #9d8bf5; }
.band-dark p               { color: #b3bcc7; }
.band-dark a:not(.btn):not(.btn-quiet) { color: #d6dde5; }

/* cards keep their light face on the dark bands */
.band-dark .card,
.band-dark .form-card { color: var(--ink); }
.band-dark .card :is(h2, h3, h4),
.band-dark .form-card :is(h2, h3, h4) { color: var(--ink); }
.band-dark .card p { color: var(--ink-soft); }
.band-dark .card:hover { border-color: transparent; }

/* the bands supply their own separation, so drop the hairlines */
main > .section + .section { border-top: 0; }

/* ---------------------------------------------------------- split */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.split-copy > :last-child { margin-bottom: 0; }
.split-copy h2 { margin-top: 0; }

.direct { font-size: 0.95rem; margin-top: 2em; }
.band-dark .direct strong { color: #e7ecf2; }

.form-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .75);
}

.form-card > :first-child { margin-top: 0; }
.form-card > :last-child  { margin-bottom: 0; }
.form-card h3 { font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; }
.form-card p  { color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================
   Articles — the 216 content pages.
   A centred reading column, a header with a gradient underline,
   and a calm rhythm. The landing pages do not use these rules.
   ============================================================ */

.article-page {
  max-width: 860px;      /* narrower than the landing pages */
}

.article-page .crumbs { margin-bottom: 2.2em; }

/* header: h1 with a short gradient rule beneath */
.article > h1:first-child {
  margin-bottom: 0.45em;
}

.article > h1:first-child::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--grad);
  margin-top: 0.5em;
}

/* opening paragraph slightly larger, like a standfirst */
.article > h1:first-child + p {
  font-size: 1.13rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.article h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  margin-top: 2.2em;
}

.article h3 { margin-top: 1.8em; }

.article p, .article li { max-width: none; }  /* column is the measure */

.article ul, .article ol { margin-bottom: 1.3em; }

/* end-of-article CTA card */
.article-cta {
  margin-top: 3.2em;
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg-dark);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.article-cta::before {
  content: "";
  position: absolute;
  inset: -40% -15%;
  z-index: -1;
  background:
    radial-gradient(40ch 30ch at 85% 15%, rgba(123, 47, 247, 0.30), transparent 68%),
    radial-gradient(36ch 26ch at 8% 90%, rgba(195, 23, 44, 0.22), transparent 66%);
}

.article-cta .cta-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9d8bf5;
  margin: 0 0 0.5em;
}

.article-cta .cta-line {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.1em;
}

.article-cta .btn { font-size: 0.9rem; }

/* hub pages: child links as a card grid */
.article-page .subpages ul {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.article-page .subpages li { margin: 0; }

.article-page .subpages a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.article-page .subpages a:hover {
  text-decoration: none;
  border-color: #cfd6df;
  box-shadow: 0 10px 24px -18px rgba(15,23,32,.5);
  color: var(--accent);
}

/* ============================================================
   Landing-page hero band (product pages).
   Same dark family as the homepage, shorter.
   ============================================================ */

.landing-hero {
  padding-block: clamp(48px, 7vw, 88px);
}

.landing-hero .crumbs { color: #7c8794; margin-bottom: 1.8em; }
.landing-hero .crumbs a { color: #a5aeb9; }
.landing-hero .crumbs a:hover { color: #fff; }

.landing-hero h1 { max-width: 24ch; }

.landing-hero .hero-tagline { color: #b9c2cc; margin-bottom: 0; }
.landing-hero h1 + .hero-tagline { margin-top: 0.2em; }

/* stat cards sit on the dark band as translucent tiles */
.landing-hero .stats { margin: 2.4em 0 0; }

.landing-hero .stats .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: #262a34;
}

.landing-hero .stats .card :is(h2, h3, h4) { color: #fff; }
.landing-hero .stats .card p { color: #98a2ae; }
.landing-hero .stats .card:hover { transform: none; box-shadow: none; }

.landing-body { padding-top: 0; }
.landing .band-light { padding-block: var(--band); }

/* ---------------------------------------------------------- brand marks */

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo img {
  display: block;
  height: 30px;
  width: auto;
}

.footer-logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 1.8em;
}

.footer-logo img {
  display: block;
  height: 28px;
  width: auto;
}

@media (max-width: 720px) {
  .logo img { height: 26px; }
}

/* ---------------------------------------------------------- closing CTA */

.landing-cta { text-align: center; }

.landing-cta .eyebrow {
  color: #9d8bf5;
  max-width: none;   /* main p is capped at the measure; centre needs full width */
}

.landing-cta h2 {
  margin: 0 0 0.4em;
  max-width: 20ch;
  margin-inline: auto;
}

.landing-cta .lead {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 2em;
}

.landing-cta .btn { font-size: 1rem; }

/* ============================================================
   Header nav: inline on desktop, a panel on phones.
   The toggle is a hidden checkbox — no JavaScript involved.
   ============================================================ */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-button { display: none; }

/* small demo button, sized to sit in the header bar */
.btn-sm {
  padding: 0.6em 1.15em;
  font-size: 0.875rem;
}

/* .nav a sets a muted colour and padding and outranks .btn/.btn-sm, so restate both here */
.nav a.nav-cta,
.nav a.nav-cta:hover {
  margin-left: 6px;
  padding: 0.6em 1.15em;
  color: #fff;
  border-bottom: 0;
}

@media (max-width: 860px) {

  .header-inner {
    position: relative;
    flex-wrap: nowrap;
    min-height: 56px;
  }

  /* the hamburger itself: three bars drawn from one span */
  .nav-button {
    display: block;
    width: 42px;
    height: 34px;
    margin: -6px -8px -6px 0;
    padding: 10px 8px;
    cursor: pointer;
    border-radius: 8px;
  }

  .nav-button span,
  .nav-button span::before,
  .nav-button span::after {
    display: block;
    height: 2px;
    width: 26px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
  }

  .nav-button span { position: relative; }
  .nav-button span::before,
  .nav-button span::after { content: ""; position: absolute; left: 0; }
  .nav-button span::before { top: -8px; }
  .nav-button span::after  { top:  8px; }

  /* open state: the bars become a cross */
  .nav-toggle:checked ~ .nav-button span { background: transparent; }
  .nav-toggle:checked ~ .nav-button span::before { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-button span::after  { transform: translateY(-8px) rotate(-45deg); }

  /* keyboard users must be able to see focus */
  .nav-toggle:focus-visible ~ .nav-button {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* the panel */
  .nav {
    position: absolute;
    top: 100%;
    /* .header-inner is itself the .wrap, so its padding box is already
       full-bleed — offsetting by -gutter pushed the panel past the viewport */
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 0 var(--gutter);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -28px rgba(15, 23, 32, .5);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .25s ease, visibility 0s linear .25s;
  }

  .nav-toggle:checked ~ .nav {
    max-height: 80vh;
    overflow-y: auto;
    visibility: visible;
    transition: max-height .25s ease, visibility 0s;
  }

  .nav a {
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  .nav a:last-of-type { border-bottom: 0; }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav a.active { border-bottom-color: var(--line); }

  /* the demo button keeps its shape inside the panel */
  .nav a.nav-cta {
    margin: 14px 0 20px;
    justify-self: start;
    padding: 0.8em 1.5em;
    font-size: 0.95rem;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-button span,
  .nav-button span::before, .nav-button span::after { transition: none !important; }
}

/* ---------------------------------------------------------- contact */

.contact-cards { margin-top: 2.4em; }

.contact-card h2 {
  font-size: 1.08rem;
  margin: 0 0 0.7em;
}

.contact-card .tag { margin: 0 0 0.6em; padding: 0; }

.contact-line {
  margin: 0 0 0.55em;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: normal;       /* <address> italicises by default */
  line-height: 1.55;
}

.contact-line:last-child { margin-bottom: 0; }

.contact-card a {
  font-weight: 550;
  text-decoration: none;
}
.contact-card a:hover { text-decoration: underline; }

/* the route we actually want people to take */
.contact-card.is-primary {
  border-color: #f0c9cf;
  background: linear-gradient(180deg, #fff7f8, var(--bg) 60%);
}

.contact-card.is-primary h2 { font-size: 1.2rem; }