/* Mission Critical Applications – "Calm multicolour" design.
   Each main page has its own colour; the six-colour stripe ties them together. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

/* ---- Palette ------------------------------------------------------------ */
:root {
  --ink: #22262B;
  --muted: #4A5058;
  --line: #DCE1E4;
  --white: #FFFFFF;
  --charcoal: #23272B;

  /* The six page colours: strong ("deep") and soft ("tint") versions. */
  --teal: #2F6664;       --teal-tint: #E3EFEE;       --teal-page: #EEF6F5;
  --blue: #3B5C8C;       --blue-tint: #E4EAF4;       --blue-page: #EEF2F8;
  --terracotta: #9E5034; --terracotta-tint: #F6E6DE; --terracotta-page: #FBF1EC;
  --sage: #4F6B42;       --sage-tint: #E7EEE2;       --sage-page: #F1F5EE;
  --plum: #6B4A74;       --plum-tint: #EEE6F0;       --plum-page: #F5F0F7;
  --ochre: #8A6420;      --ochre-tint: #F5ECD9;      --ochre-page: #FAF5EA;

  /* Per-page values (overridden by the body theme class). */
  --deep: var(--teal);
  --tint: var(--teal-tint);
  --page: #FBFAF7;
  --banner: #1E2A36;
  --banner-soft: #D5DCE2;

  --wrap: 72rem;
  --radius: 4px;
}

.t-home       { --deep: var(--teal); --tint: var(--teal-tint); --page: #FBFAF7; --banner: #1E2A36; --banner-soft: #D5DCE2; }
.t-teal       { --deep: var(--teal); --tint: var(--teal-tint); --page: var(--teal-page); --banner: var(--teal); --banner-soft: var(--teal-tint); }
.t-blue       { --deep: var(--blue); --tint: var(--blue-tint); --page: var(--blue-page); --banner: var(--blue); --banner-soft: var(--blue-tint); }
.t-terracotta { --deep: var(--terracotta); --tint: var(--terracotta-tint); --page: var(--terracotta-page); --banner: var(--terracotta); --banner-soft: var(--terracotta-tint); }
.t-sage       { --deep: var(--sage); --tint: var(--sage-tint); --page: var(--sage-page); --banner: var(--sage); --banner-soft: var(--sage-tint); }
.t-plum       { --deep: var(--plum); --tint: var(--plum-tint); --page: var(--plum-page); --banner: var(--plum); --banner-soft: var(--plum-tint); }
.t-ochre      { --deep: var(--ochre); --tint: var(--ochre-tint); --page: var(--ochre-page); --banner: var(--ochre); --banner-soft: var(--ochre-tint); }
.t-slate      { --deep: #3E4A56; --tint: #E6E9EC; --page: #F7F8F9; --banner: #3E4A56; --banner-soft: #E6E9EC; }

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
}
img { max-width: 100%; height: auto; }
a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; margin: 0 0 0.6em; }
h2 { font-size: 1.75rem; color: var(--deep); }
h3, .h3 { font-size: 1.25rem; color: var(--deep); }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.section { padding-top: 3.5rem; padding-bottom: 1rem; }
.section:last-child { padding-bottom: 4rem; }
.prose > *, p.prose { max-width: 46rem; }
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }
.prose h2 { font-size: 2rem; }
.prose h3 { margin-top: 2em; }
.small { font-size: 0.9375rem; color: var(--muted); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--white); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }

/* ---- Header ------------------------------------------------------------- */
.site-header { background: #FBFAF7; border-bottom: 1px solid var(--line); }
.stripe { display: flex; height: 6px; }
.stripe span { flex: 1; }
.stripe span:nth-child(1) { background: #3E7C7A; }
.stripe span:nth-child(2) { background: #4A6FA5; }
.stripe span:nth-child(3) { background: #C0704F; }
.stripe span:nth-child(4) { background: #6E8F5E; }
.stripe span:nth-child(5) { background: #7D5A86; }
.stripe span:nth-child(6) { background: #C9973B; }

.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); padding-bottom: 0.75rem; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 2px solid var(--deep);
  font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.05em; color: var(--ink);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 600; font-size: 1.0625rem; }
.brand-tag { font-size: 0.8125rem; color: var(--muted); }

.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 0.75rem 0.75rem 0.65rem; min-height: 44px;
  color: var(--muted); font-weight: 500; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--nav-c, var(--deep)); }
.nav .c-home { --nav-c: var(--charcoal); }
.nav .c-teal { --nav-c: var(--teal); }
.nav .c-blue { --nav-c: var(--blue); }
.nav .c-terracotta { --nav-c: var(--terracotta); }
.nav .c-sage { --nav-c: var(--sage); }
.nav .c-plum { --nav-c: var(--plum); }
.nav .c-ochre { --nav-c: var(--ochre); }

/* ---- Banners ------------------------------------------------------------ */
.banner { background: var(--banner); color: var(--white); }
.banner-inner { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.banner h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.4em; max-width: 24em; }
.banner .lede { font-size: 1.1875rem; color: var(--banner-soft); max-width: 40em; margin: 0; }
.hero .banner-inner { padding-top: 5rem; padding-bottom: 5.5rem; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.4rem); max-width: 18em; }
.kicker { color: #9FD3CF; font-weight: 500; margin-bottom: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }

.subnav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 1.5rem; margin-bottom: -3.5rem; }
.subnav a {
  padding: 0.85rem 1.25rem; color: var(--white); text-decoration: none; font-weight: 500;
  background: rgba(0, 0, 0, 0.25); border-radius: var(--radius) var(--radius) 0 0;
}
.subnav a[aria-current="page"] { background: var(--page); color: var(--ink); font-weight: 600; }

/* ---- Buttons ------------------------------------------------------------ */
.button {
  display: inline-block; padding: 0.8rem 1.4rem; min-height: 44px;
  background: var(--deep); color: var(--white); font-weight: 600; text-decoration: none;
  border: 2px solid var(--deep); border-radius: var(--radius);
}
.button:hover { filter: brightness(1.1); }
.hero .button { background: var(--teal); border-color: var(--teal); }
.button-ghost, .hero .button-ghost { background: transparent; border-color: var(--banner-soft); color: var(--white); }

/* ---- Grids and cards ---------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.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)); }

.card { background: var(--white); border: 1px solid var(--line); padding: 1.75rem; border-radius: var(--radius); }
.card > :last-child { margin-bottom: 0; }
.card.feature { border-top: 5px solid var(--deep); margin: 2rem 0; }

/* Coloured top bars cycle through the six colours. */
.bar-0 { --bar: var(--teal); }
.bar-1 { --bar: var(--blue); }
.bar-2 { --bar: var(--terracotta); }
.bar-3 { --bar: var(--sage); }
.bar-4 { --bar: var(--plum); }
.bar-5 { --bar: var(--ochre); }
.card[class*="bar-"] { border-top: 5px solid var(--bar); }
.t-home .card[class*="bar-"] h3 { color: var(--bar); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* ---- Home ----------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.chip { padding: 0.55rem 1.1rem; font-weight: 600; border-radius: 999px; }
.chip-0 { background: var(--teal-tint); color: var(--teal); }
.chip-1 { background: var(--blue-tint); color: var(--blue); }
.chip-2 { background: var(--terracotta-tint); color: var(--terracotta); }
.chip-3 { background: var(--sage-tint); color: var(--sage); }
.chip-4 { background: var(--plum-tint); color: var(--plum); }
.chip-5 { background: var(--ochre-tint); color: var(--ochre); }

.news-card { border-top: 3px solid var(--bar); padding-top: 1rem; }
.news-card .news-date { color: var(--bar); }

.cta { background: var(--teal-tint); margin-top: 3rem; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; }
.cta h2 { color: var(--ink); margin: 0; max-width: 20em; }
.section:has(+ .cta) { padding-bottom: 0; }

/* ---- News ----------------------------------------------------------------- */
.news-date { font-weight: 600; font-size: 0.9375rem; color: var(--deep); margin-bottom: 0.25rem; }
.news-list { max-width: 50rem; }
.news-list .news-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.news-list .news-item:first-child { padding-top: 0; }
.news-item:target { background: var(--tint); outline: 0.75rem solid var(--tint); }

/* ---- Steps ---------------------------------------------------------------- */
.steps { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.steps li { border-top: 3px solid var(--bar); padding-top: 0.75rem; font-weight: 600; font-size: 1.0625rem; }
.step-n { display: block; color: var(--bar); font-size: 0.875rem; font-weight: 600; }

/* ---- Clients ------------------------------------------------------------ */
.logo-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.logo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 9rem; padding: 1.25rem; text-align: center; font-weight: 600;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.logo-card img { max-height: 4.5rem; width: auto; object-fit: contain; }

/* ---- Team ----------------------------------------------------------------- */
.person .portrait { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; margin-bottom: 1rem; }
.person .role { font-weight: 600; color: var(--muted); margin-top: -0.4em; }

/* ---- Contact -------------------------------------------------------------- */
.big-link { font-size: 1.25rem; font-weight: 600; word-break: break-word; }

/* ---- Tables (privacy policy) ------------------------------------------------ */
.table-scroll { overflow-x: auto; margin-bottom: 1em; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; background: var(--white); }
th, td { border: 1px solid var(--line); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--tint); }

/* ---- Footer ----------------------------------------------------------------- */
.site-footer { background: var(--charcoal); color: #D9DCDF; font-size: 0.9375rem; margin-top: 2rem; }
.site-footer a { color: #FFFFFF; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.footer-inner p { margin: 0 0 0.25rem; }
.footer-name { color: #FFFFFF; font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.cta + * , main:has(.cta) + .site-footer { margin-top: 0; }

@media (max-width: 40rem) {
  .nav a { padding: 0.6rem 0.5rem; }
  .banner-inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero .banner-inner { padding-top: 3rem; padding-bottom: 3.5rem; }
  .subnav { margin-bottom: -2.5rem; }
}