/* Everything every page on this site needs, and nothing any single page needs.
 *
 * Until this file existed each page carried its own copy of the block below, on
 * the reasoning that a site with no build step should not need a stylesheet.
 * Three copies is where that stopped being true: site/404.html and site/c/mg/
 * both carried a comment claiming their subsets "match site/index.html" while
 * in fact missing all five latin-ext faces, so an é or a š on either page fell
 * back to Arial. Nobody would have found that by reading — the comment said it
 * was fine. One copy cannot disagree with itself.
 *
 * No build step is involved: this is a static file served from the same origin,
 * which style-src 'self' already permits. Page-specific rules stay inline in
 * the page that needs them, which is still most of the layout.
 *
 * IBM Plex, self-hosted. Latin + Latin Extended, SIL OFL 1.1 — see fonts/LICENSE.
 * Self-hosted rather than served from fonts.gstatic.com so that no visitor IP
 * reaches a third party.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- tokens — §2 palette, §5 typography -------------------------------- */

:root {
  --ink:    #0E1416;
  --paper:  #EEF0EF;
  --steel:  #5A6462;
  --rule:   #CBD1CF;
  --accent: #1F5148;

  /* The card reverse. Fixed in both schemes — it is a printed side, not a surface. */
  --reverse-ground: #1F5148;
  --reverse-type:   #EEF0EF;

  --font-serif: "IBM Plex Serif", Charter, Georgia, serif;
  --font-sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", SFMono-Regular, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #EEF0EF; --paper: #0E1416; --steel: #93A09D;
    --rule: #2A3336; --accent: #6FB3A4;
  }
}

/* ---- reset and page ground --------------------------------------------- */

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

html {
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.62;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 120ms linear;
}

a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- the identity lockup ------------------------------------------------ */
/* The mark is the firm — §6. Set identically wherever it appears; the home page
   scales it up a step, which is the only permitted variation. */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.descriptor {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--steel);
  margin-top: 0.7em;
}

/* ---- the sheet pages ----------------------------------------------------- */
/* /c/mg/, /404 and /privacy/ are one column of centred text with the lockup at
   the top. /review/ and /contact/ are sheets too and keep this type, but
   override the display to put the form in a second column — the sheet cut in
   two; their block is at the foot of this file. The home page is not a sheet at
   all; it is a two-up spread and sets its own grid. */

body.sheet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: clamp(28px, 8vw, 72px);
  max-width: 34rem;
}

body.sheet h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}

body.sheet p { margin: 0; }

.note { font-size: 0.85rem; color: var(--steel); }

/* ---- the consent prompt -------------------------------------------------- */
/* Injected by /trackers.js, only in the jurisdictions where an affirmative
   choice is required before the organisation-identification tracker may run.
   Site copy in the site's face, not a vendor widget: two sentences, two
   equal-weight choices set in the same button, neither dressed up or down. */

.consent {
  position: fixed;
  bottom: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  max-width: 24rem;
  width: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  z-index: 10;
}

.consent p { margin: 0; }

.consent-actions { display: flex; gap: 10px; }

.consent button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  padding: 0.5em 1.1em;
  min-height: 40px;
  cursor: pointer;
}

.consent button:hover,
.consent button:focus-visible { background: var(--accent); color: var(--paper); }

/* ---- the enquiry pages --------------------------------------------------- */
/* /review/ and /contact/. Both are sheets and keep the type above, and both
   override the display to put the form in a second column — the sheet cut in
   two, with the standing text on the left. It stacks back into one column below
   900px, which is every phone and the iPad in portrait; the iPad in landscape
   keeps both columns.
 *
 * These rules are here rather than inline because there are now two pages with
 * the same layout, and this file exists because three copies of a block is
 * where "each page carries its own" stopped being true. What stays inline in
 * either page is what only that page has, which is currently nothing.
 */

body.enquiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 64rem;
  align-content: start;
  align-content: safe center;  /* start, on anything that does not know `safe` */
}

.enquiry .column {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Its own row across both columns, and the last thing in the source. Inside the
   left column it was last on a desktop and halfway down the page once the two
   stacked — a footer above the form it is meant to sit under. */
.enquiry .foot { grid-column: 1 / -1; }

/* The hairline is the cut. In one column it lies across the page instead. */
.enquiry .form-side {
  border-left: 1px solid var(--rule);
  padding-left: clamp(24px, 3vw, 40px);
}

/* One glyph, where two mono lines used to sit. The mail address left with the
   paragraph that told the enquirer to reply to it — the form takes the report
   directly now, so there is no reply to attach anything to — and what remains
   is the profile link, as the icon-only form the front page uses. */
.channels {
  font-style: normal;
  margin: 0;
  display: flex;
  align-items: center;
}

/* The front page's rule, unchanged: 40px of hit area around an 18px glyph, the
   negative margins letting that box overflow the type rather than open the
   column up. §1.2 permits the mark because the destination is LinkedIn's, not
   ours. */
.profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -11px 0 -11px -11px;
  color: inherit;
  text-decoration: none;
  transition: color 120ms linear;
}

.profile svg { display: block; width: 18px; height: 18px; }

.profile:hover, .profile:focus-visible { color: var(--accent); }

.enquiry form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.enquiry label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.5em;
}

/* 1rem, never less: iOS zooms the page in on any field it reads as under 16px,
   and it does not zoom back out. appearance:none is for the same platform,
   which otherwise rounds and shades the control itself. */
.enquiry input, .enquiry textarea {
  width: 100%;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.65em 0.75em;
}

.enquiry input:focus-visible, .enquiry textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.enquiry textarea { min-height: 9em; resize: vertical; }

/* The one control the browser draws for itself. It keeps the box the other
   fields have, and appearance stays auto: reset to none, Safari removes the
   button inside it and leaves a file field with nothing to press. */
.enquiry input[type="file"] {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  padding: 0.55em 0.6em;
}

/* Under the field it belongs to, not a paragraph in its own right — a limit is
   worth stating before a file is chosen rather than after it is refused. */
.hint { margin: 0.5em 0 0; }

/* What the browser refuses on its own, before anything is sent. Not .note:
   small print in steel is the wrong weight for the reason a form stopped. */
.reject { margin: 0; }

/* Same element as /c/mg/ — sized as a target, not styled as a promotion. */
.action {
  display: inline-block;
  align-self: start;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--accent);
  padding: 0.85em 1.4em;
  min-height: 44px;
  cursor: pointer;
}

.action:hover, .action:focus-visible { background: var(--accent); color: var(--paper); }
.action:disabled { opacity: 0.5; cursor: default; }
.action:disabled:hover { background: transparent; color: var(--accent); }

[hidden] { display: none !important; }

/* ---- one column --------------------------------------------------------- */
/* 900px: phones, and the iPad in portrait at 768. Landscape iPads are 1024 and
   keep the spread, which leaves each column near 460px — still a readable
   measure and a form that does not need scrolling to reach. */

@media (max-width: 900px) {
  body.enquiry { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .enquiry .form-side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 32px;
  }
}

@media (max-width: 480px) {
  .enquiry textarea { min-height: 7em; }
  .action { align-self: stretch; text-align: center; }
}