/* Matter Machine Technologies: site styles.
   Midnight background, emerald accent; serif headings, green-rule labels, square capital buttons.
   Every colour is set once below; change a value only after re-measuring its contrast.
   Measured (WCAG 2.2), on the page #050C1A / on the bands #080E1E:
   headings 17.4 / 17.1, body text 9.0 / 8.8, soft text 12.2 / 12.0, muted text 6.1 / 6.0, green 6.6 / 6.5,
   green hover 9.4 / 9.2. Dark text on the green button 6.6. Lowest anywhere: muted text where the hero's
   green glow is strongest (the context line), 5.7. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/fraunces-latin-standard-normal.woff2") format("woff2-variations"), url("fonts/fraunces-latin-standard-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
/* IBM Plex Mono is used only by the formula animation. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #050C1A;        /* page */
  --band: #080E1E;      /* alternate bands, pop-ups */
  --line: rgba(157, 178, 202, .14); /* hairlines, decorative */
  --green-dim: rgba(52, 170, 114, .45); /* resting card border, rules */
  --text: #EEF2F8;      /* headings */
  --soft: #C3CDDF;      /* callout, emphasis */
  --body: #9DB2CA;      /* body text */
  --muted: #7B92AC;     /* small print, meta, footer */
  --green: #34AA72;     /* labels, links, buttons */
  --green-hi: #4FC98D;  /* hover */
  --on-green: #050C1A;  /* text on the green button */
  --error: #F28B82;     /* form errors: 8.2 on the page, 8.1 on fields */
  /* formula field, decorative */
  --ff-symbol: #2E3A55; --ff-grid: #111A2B; --ff-atom: #ECEEF6; --ff-bond: #C3CDDF; --ff-accent: #34AA72;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1280px;
  --gutter: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 4px; }
a:hover { color: var(--green-hi); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
h1, h2, h3 { color: var(--text); font-family: var(--serif); font-weight: 300; line-height: 1.1; margin: 0; }
p { margin: 0; }
sub { font-size: .72em; line-height: 0; }

.skip { position: absolute; left: 16px; top: -100px; background: var(--green); color: var(--on-green); padding: 10px 16px; font-weight: 600; z-index: 100; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* Labels: a short green rule, then spaced capitals */
.label { display: inline-flex; align-items: center; gap: 14px; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; line-height: 1.4; }
.label::before { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }

/* Buttons and arrow links: square, spaced capitals */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--green); color: var(--on-green); border: 1px solid var(--green); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; padding: 17px 32px; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.btn:hover { background: var(--green-hi); border-color: var(--green-hi); color: var(--on-green); }
.btn-outline { background: transparent; color: var(--green); }
.btn-outline:hover { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn-small { padding: 11px 20px; font-size: 12.5px; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: gap .3s, color .3s; }
.arrow-link:hover { gap: 16px; color: var(--green-hi); }
.arrow-link svg, .btn svg, .bio-link svg { flex: none; }

/* Header: transparent over the hero, solid once the page scrolls */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .4s, box-shadow .4s, border-color .4s; border-bottom: 1px solid transparent; }
.site-header.scrolled, .site-header.menu-open { background: var(--bg); border-bottom-color: var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.header-in { display: flex; align-items: center; gap: 32px; height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--text); font-family: var(--serif); font-weight: 300; font-size: 19px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
/* MMT mark: a periodic-table style tile. A placeholder until MMT supplies a logo. */
.mark { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid var(--green); color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 14px; letter-spacing: .03em; line-height: 1; }
.brand:hover { color: var(--text); }
.site-nav { flex: 1; display: flex; align-items: center; gap: 32px; }
.nav { display: flex; gap: 36px; list-style: none; margin: 0 auto; padding: 0; }
.nav a { color: var(--body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: color .3s; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--green); }
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; color: var(--body); cursor: pointer; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: inline; }

/* Hero: words on the left, the formula field on the right, never behind the text */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 112px 0 96px; overflow: hidden;
  background: radial-gradient(640px 460px at 74% 46%, rgba(52, 170, 114, .07), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; width: 100%; }
.hero h1 { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -.01em; margin-top: 18px; }
.hero h1 span { display: block; }
.hero h1 .hl { color: var(--green); }
.lede { max-width: 40rem; margin-top: 24px; }
.lede p { font-size: 16px; line-height: 1.6; }
.lede p:first-child { font-size: 17px; color: var(--soft); }
.lede p + p { margin-top: 12px; }
.hero .ctas { margin-top: 28px; }
.context { margin-top: 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero-visual { margin: 0; }
.field-wrap { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1; margin-left: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.field-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Sections */
.section { padding: 120px 0; scroll-margin-top: 80px; }
.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.12; margin-top: 18px; }
.body.large { font-size: 18px; }
.more { margin-top: 40px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.two-col h2 { margin-top: 18px; }
.section-head { max-width: 48rem; }
.section-head .body { margin-top: 24px; }

/* Cards: no fill, square, a thin green border with a slow light travelling round it.
   Set --card-bg to the colour of the section the card sits on. Still for reduced motion. */
@property --edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card {
  --card-bg: var(--bg);
  position: relative; padding: 36px 32px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    conic-gradient(from var(--edge), var(--green-dim) 0deg, var(--green) 50deg, var(--green-dim) 110deg, var(--green-dim) 360deg) border-box;
  animation: card-edge 9s linear infinite;
}
.band .card { --card-bg: var(--band); }
.card:nth-child(4n+2) { animation-delay: -2.25s; }
.card:nth-child(4n+3) { animation-delay: -4.5s; }
.card:nth-child(4n+4) { animation-delay: -6.75s; }
@keyframes card-edge { to { --edge: 360deg; } }
.cards { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 24px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.num { display: block; color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .2em; }
.card h3 { font-size: 23px; font-weight: 350; line-height: 1.25; margin-top: 18px; }
.card p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; }

/* Research */
.research-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; margin-top: 8px; }
.research-head h2 { font-size: clamp(30px, 3.2vw, 42px); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.journal { color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.journal em { font-style: normal; }
.sep { width: 1px; height: 16px; background: var(--muted); opacity: .5; }
.inst { color: var(--muted); font-size: 14px; }
.research-head .more { margin-top: 32px; }
@media (min-width: 1081px) { .research-head { position: sticky; top: 120px; } }
.research-body { padding-top: 6px; }
.research-body .body + .body { margin-top: 20px; }
.steps-list { margin: 20px 0 0; padding-left: 26px; }
.steps-list li { margin-top: 10px; padding-left: 6px; }
.steps-list li::marker { color: var(--green); font-weight: 600; }
.callout { margin-top: 32px; padding: 4px 0 4px 24px; border-left: 2px solid var(--green-dim); color: var(--soft); }

/* Leadership: portrait-led cards, name set over the faded foot of the photo */
.lead-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.lead-head .body { max-width: 21rem; }
.card.person { padding: 0; display: flex; flex-direction: column; }
.person-photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--card-bg); }
.person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.person-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to bottom, transparent, rgba(8, 14, 30, .78) 45%, var(--card-bg) 82%); }
/* Names sit level across the cards whatever follows them: placed from the top so that a name with
   honours and role ends 10px above the foot of the photo. Names and roles stay on one line. */
.person-id { position: absolute; left: 28px; right: 28px; top: calc(100% - 64px - 1.15 * clamp(17px, 1.85vw, 25px)); z-index: 1; }
.person-id h3 { font-size: clamp(17px, 1.85vw, 25px); line-height: 1.15; margin: 0; white-space: nowrap; }
.person-id .honours { margin-top: 6px; font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.person-id .role { margin-top: 6px; font-size: clamp(12px, 1.3vw, 14px); font-weight: 500; color: var(--green); line-height: 1.4; white-space: nowrap; }
.person-body { flex: 1; display: flex; flex-direction: column; padding: 14px 28px 30px; }
.person-body > p { margin-top: 0; }
.bio-link { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--green-dim); transition: gap .3s; align-self: flex-start; }
.bio-link:hover { gap: 14px; }
/* Portrait in the biography pop-ups */
.portrait { flex: none; width: 140px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--band); border: 1px solid var(--line); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Biography pop-ups */
dialog.bio { padding: 0; width: calc(100% - 32px); max-width: 780px; max-height: 88vh; border: 1px solid var(--green-dim); background: var(--band); color: var(--body); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
dialog.bio::backdrop { background: rgba(5, 12, 26, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bio-in { position: relative; padding: 48px; }
.bio-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--body); cursor: pointer; transition: color .3s, border-color .3s; }
.bio-close:hover { color: var(--green); border-color: var(--green); }
.bio-head { display: flex; align-items: center; gap: 28px; padding-right: 48px; }
.role-caps { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.bio-head h2 { font-size: clamp(28px, 4vw, 38px); margin-top: 8px; }
.bio-body { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.bio-body p { font-size: 16px; }
.bio-body p + p { margin-top: 16px; }
.bio-in > .arrow-link { margin-top: 32px; }

/* Contact panel */
.cta-panel { position: relative; border: 1px solid var(--line); padding: 88px 48px; text-align: center; }
.cta-panel::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 48px; background: var(--green-dim); }
.cta-panel .label::after { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }
.cta-panel .body { max-width: 38rem; margin: 22px auto 0; }
.cta-panel .btn { margin-top: 40px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.site-footer .wrap { padding-top: 72px; padding-bottom: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.foot-grid > div > p + p { margin-top: 10px; }
.foot-brand { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 300; font-size: 20px; color: var(--text); margin-bottom: 18px; }
.foot-head { color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li + li { margin-top: 8px; }
.foot-links a { color: var(--muted); text-decoration: none; transition: color .3s; }
.foot-links a:hover { color: var(--text); }
.legal { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 12.5px; }
.legal p { max-width: 46rem; }
.foot-links.inline { display: flex; gap: 24px; }
.foot-links.inline li + li { margin-top: 0; }

/* ---------- Inner pages ---------- */
.page-hero { padding: 160px 0 72px; }
.page-hero h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -.01em; margin-top: 20px; }
.page-hero h1 span { display: block; }
.page-hero h1 .hl { color: var(--green); }
.page-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.page-intro .body + .body, .two-col .body + .body { margin-top: 16px; }
.page-hero .lede-wide { max-width: 44rem; margin-top: 24px; font-size: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.section-head.split-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 24px 72px; }
.section-head.split-head h2 { max-width: 15em; }
.section-head.split-head .body { margin-top: 0; }

/* Discovery workflow: four steps joined by a line */
.workflow { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.workflow::before { content: ""; position: absolute; top: 32px; left: 32px; right: calc(25% - 24px); height: 1px; background: var(--green-dim); }
.workflow li { position: relative; }
.step-num { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--green); background: var(--band); color: var(--green); font-size: 13px; font-weight: 500; letter-spacing: .16em; }
.workflow h3 { font-size: 23px; font-weight: 350; margin-top: 24px; }
.workflow p { margin-top: 10px; font-size: 15.5px; }
.caption { margin-top: 44px; max-width: 46rem; font-size: 14.5px; color: var(--muted); }

/* Leadership on the About page: portrait beside the full biography */
.leaders { margin-top: 56px; display: grid; gap: 72px; }
.leader { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.leader-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--band); border: 1px solid var(--line); }
.leader-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leader h3 { font-size: clamp(28px, 3vw, 36px); margin-top: 10px; }
.leader .honours { margin-top: 8px; font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.leader-bio { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 44rem; }
.leader-bio p + p { margin-top: 16px; }
.leader .arrow-link { margin-top: 28px; }

/* A section that follows straight on from the page heading */
.section.follow { padding-top: 24px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.form-head h2 { font-size: 30px; margin-top: 0; }
.form-help { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.notice { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--green-dim); border-left-width: 3px; font-size: 14.5px; color: var(--soft); }
.notice strong { color: var(--text); font-weight: 600; }
.enquiry { margin-top: 32px; }
.field + .field { margin-top: 24px; }
.field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
/* Field borders: 3.4 against the page, so each box can be seen (WCAG 1.4.11). */
.field .hint { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 10px; padding: 13px 16px; background: var(--band); color: var(--text); border: 1px solid rgba(157, 178, 202, .55); border-radius: 0; font: inherit; font-size: 16px; line-height: 1.5; transition: border-color .3s; }
.field textarea { resize: vertical; min-height: 170px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--body) 50%), linear-gradient(135deg, var(--body) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.field-error { display: block; margin-top: 8px; font-size: 14px; color: var(--error); }
.field-error:empty { display: none; }
.count { display: block; margin-top: 8px; text-align: right; font-size: 13px; color: var(--muted); }
.form-privacy { margin-top: 24px; font-size: 14px; color: var(--muted); }
.enquiry .btn { margin-top: 28px; width: 100%; }
.enquiry .btn[disabled] { opacity: .7; cursor: progress; }
.form-status { margin-top: 18px; font-size: 15px; color: var(--soft); }
.form-status.bad { color: var(--error); }
.form-status:empty { display: none; }
/* Error summary: lists each problem and links to its field */
.error-summary { margin-top: 28px; padding: 20px 24px; border: 1px solid var(--error); border-left-width: 3px; }
.error-summary:focus { outline: 2px solid var(--error); outline-offset: 3px; }
.error-summary h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.4; }
.error-summary ul { margin: 10px 0 0; padding-left: 20px; }
.error-summary li + li { margin-top: 6px; }
.error-summary a { color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { margin-top: 32px; padding: 48px 32px; border: 1px solid var(--green-dim); text-align: center; }
.sent h3 { font-size: 30px; margin-top: 14px; }
.sent p { margin-top: 12px; }
.sent button { margin-top: 24px; background: none; border: 0; color: var(--green); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.side h2 { font-size: 30px; margin-top: 16px; }
.side .body { margin-top: 16px; }
.side .arrow-link { margin-top: 24px; }
.side-block + .side-block { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.details { margin: 20px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 15px; }
.details dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.details dd { margin: 0; color: var(--soft); }
.side address { font-style: normal; margin-top: 10px; color: var(--soft); font-size: 15px; }
.side .small { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* Policy and statement pages */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin-top: 56px; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; font-weight: 400; margin-top: 32px; }
.prose p, .prose ul, .prose dl { margin-top: 16px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--green); }
.prose strong { color: var(--soft); font-weight: 600; }
.prose address { font-style: normal; margin-top: 12px; color: var(--soft); }
.prose .detail-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.prose .detail-table th, .prose .detail-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.prose .detail-table th { color: var(--soft); font-weight: 500; width: 45%; }
.prose .meta-note { margin-top: 48px; font-size: 14px; color: var(--muted); }

/* Page not found */
.not-found { min-height: 70vh; display: flex; align-items: center; }
.not-found .wrap { width: 100%; }
.not-found .lede-wide { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Footer credit */
.credit { font-size: 12.5px; color: var(--muted); }
.credit a { color: var(--green); }

@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: 1fr; gap: 64px; }
  .leader { grid-template-columns: 240px 1fr; gap: 40px; }
}
@media (max-width: 880px) {
  .page-intro { grid-template-columns: 1fr; gap: 24px; }
  .section-head.split-head { grid-template-columns: 1fr; }
  .cards.two { grid-template-columns: 1fr; max-width: 600px; }
  .workflow { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .workflow::before { display: none; }
  .leader { grid-template-columns: 1fr; gap: 28px; }
  .leader-photo { max-width: 320px; }
}
@media (max-width: 560px) {
  .page-hero { padding: 120px 0 56px; }
  .arrow-link { font-size: 12px; letter-spacing: .12em; }
  .workflow { grid-template-columns: 1fr; }
}

/* Smaller screens */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .field-wrap { margin: 0 auto; max-width: 520px; }
  .research-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .cards.three { grid-template-columns: 1fr; max-width: 600px; }
  #leadership .cards.three { max-width: 440px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .legal { flex-direction: column; gap: 16px; }
  /* Phone menu: only when the script is running; without it the links stay visible */
  .js .menu-toggle { display: block; }
  .js .site-nav { display: none; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 24px; padding: 28px var(--gutter) 32px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .js .menu-open .site-nav { display: flex; }
  .js .nav { flex-direction: column; gap: 20px; margin: 0; }
  .js .site-nav .btn { align-self: flex-start; }
  html:not(.js) .header-in { height: auto; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; gap: 12px 24px; }
  html:not(.js) .site-header { position: absolute; }
}
@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .hero { padding: 100px 0 88px; }
  .lede p { font-size: 15px; }
  .lede p:first-child { font-size: 16px; }
  .lede { margin-top: 18px; }
  .hero .ctas { margin-top: 22px; }
  .section { padding: 84px 0; }
  .body.large { font-size: 17px; }
  .card { padding: 30px 24px; }
  .label { letter-spacing: .22em; }
  .sep { display: none; }
  .meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .btn { padding: 16px 22px; letter-spacing: .12em; }
  .cta-panel { padding: 64px 22px; }
  .bio-in { padding: 32px 22px; }
  .bio-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand { font-size: 16.5px; gap: 12px; }
  .mark { width: 44px; height: 44px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { animation: none; }
  .btn, .arrow-link, .bio-link, .site-header, .nav a { transition: none; }
}

/* ---------- Motion ----------
   Three deliberate moments, not movement everywhere: the hero arrives in sequence on load; the
   three-step approach appears in order when it scrolls into view, joined by short green lines;
   and the page answers the visitor (formula symbols light near the pointer, portraits ease
   larger on hover). Pages cross-fade where the browser supports it. Everything here is off for
   reduced motion, and without the script the page shows complete and still. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: label, the three heading lines, then text, button and the formula panel */
  .js .hero .label, .js .hero h1 > span, .js .hero .lede, .js .hero .ctas, .js .hero .context {
    opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .hero .label { animation-delay: .1s; }
  .js .hero h1 > span:nth-child(1) { animation-delay: .25s; }
  .js .hero h1 > span:nth-child(2) { animation-delay: .45s; }
  .js .hero h1 > span:nth-child(3) { animation-delay: .65s; }
  .js .hero .lede { animation-delay: .9s; }
  .js .hero .ctas { animation-delay: 1.05s; }
  .js .hero .context { animation-delay: 1.15s; }
  .js .hero .field-wrap { opacity: 0; animation: appear 1.8s ease .55s forwards; }

  /* The integrated approach: cards appear in order, each step joined to the next */
  .js .seq > .card { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .js .seq.in > .card { opacity: 1; transform: none; }
  .js .seq.in > .card:nth-child(2) { transition-delay: .45s; }
  .js .seq.in > .card:nth-child(3) { transition-delay: .9s; }
  .js .seq > .card .num { transition: color .6s ease; color: var(--muted); }
  .js .seq.in > .card .num { color: var(--green); }
  .js .seq.in > .card:nth-child(1) .num { transition-delay: .3s; }
  .js .seq.in > .card:nth-child(2) .num { transition-delay: .75s; }
  .js .seq.in > .card:nth-child(3) .num { transition-delay: 1.2s; }

  /* Portraits ease slightly larger when a card is pointed at or focused */
  .card.person .person-photo img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
  .card.person:hover .person-photo img, .card.person:focus-within .person-photo img { transform: scale(1.035); }

  /* Page changes cross-fade; the header stays put */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes appear { to { opacity: 1; } }

/* Step connectors: short green lines between the approach cards, drawn in order (three columns only) */
@media (min-width: 881px) {
  .seq > .card:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -25px; width: 24px; height: 1px; background: var(--green); transform-origin: left; }
}
@media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
  .js .seq > .card:not(:last-child)::after { transform: scaleX(0); transition: transform .45s ease; }
  .js .seq.in > .card:nth-child(1)::after { transform: scaleX(1); transition-delay: .35s; }
  .js .seq.in > .card:nth-child(2)::after { transform: scaleX(1); transition-delay: .8s; }
}

/* Video: a designed panel that opens the video on YouTube in a new tab; nothing is embedded */
.video { margin: 64px 0 0; max-width: 1040px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--green-dim); overflow: hidden;
  background:
    radial-gradient(520px 320px at 50% 46%, rgba(52, 170, 114, .10), transparent 70%),
    linear-gradient(to right, var(--ff-grid) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, var(--ff-grid) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--band); }
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 32px; text-align: center; color: var(--text); text-decoration: none; }
.video-icon { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); transition: background-color .4s, color .4s, transform .4s; }
.video-icon svg { margin-left: 4px; }
.video-play:hover .video-icon, .video-play:focus-visible .video-icon { background: var(--green); color: var(--on-green); transform: scale(1.06); }
.video-play:hover, .video-play:focus-visible { color: var(--text); }
.video-play:focus-visible { outline: 2px solid var(--green); outline-offset: -6px; }
.video figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) {
  .video { margin-top: 44px; }
  .video-icon { width: 64px; height: 64px; }
  .video-play { gap: 16px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-icon { transition: none; }
}

/* ---------- Place and footer ----------
   Photographs of the Materials Innovation Factory, graded to the same cool monochrome as the
   portraits so the site reads as one set of pictures. Supplied by the University of Liverpool. */
.place-pair { display: grid; grid-template-columns: 1fr; margin-top: 44px; }
.place-pair figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.place-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-cap { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Footer: the building fades up out of the page, then the company details in four columns */
.site-footer { border-top: 0; }
.foot-image { position: relative; height: 240px; overflow: hidden; }
.foot-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .55; }
.foot-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(5, 12, 26, .35) 40%, rgba(5, 12, 26, .55) 70%, var(--bg) 100%); }
.foot-image-cap { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; font-size: 12.5px; color: var(--soft); }
.site-footer .wrap.foot-image-cap { padding-top: 0; padding-bottom: 0; }
.site-footer .foot-image + .wrap { padding-top: 48px; }
.foot-grid { grid-template-columns: 1.3fr .7fr 1.1fr 1fr; gap: 48px; }
.foot-company p + p, .foot-company address { margin-top: 10px; }
.foot-company address { font-style: normal; }
.legal { align-items: center; }
.legal .foot-links.inline { margin-left: auto; }
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .legal { align-items: flex-start; }
  .legal .foot-links.inline { margin-left: 0; }
}
@media (max-width: 560px) {
  .foot-image { height: 170px; }
  .foot-image img { opacity: .4; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- About page motion ----------
   Inner-page headings arrive in sequence, as the home hero does. The discovery workflow is the
   page's one orchestrated moment: the line draws from Define to Measure, each step lights as the
   line reaches it, then a dashed path returns from Measure to Define, because the process is
   iterative. The Liverpool photographs develop into full tone when they come into view. */
.workflow .workflow-loop { display: none; }
@media (min-width: 881px) {
  /* The return path: above the row, from step 04 back to step 01, ending in a small arrow */
  .workflow .workflow-loop { display: block; position: absolute; top: -34px; left: 32px; right: calc(25% - 56px); height: 34px;
    border: 1px dashed rgba(52, 170, 114, .7); border-bottom: 0; border-radius: 16px 16px 0 0; }
  .workflow .workflow-loop::after { content: ""; position: absolute; left: -4px; bottom: 0; border: 4px solid transparent; border-top: 6px solid var(--green); border-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Inner-page headings */
  .js .page-hero .label, .js .page-hero h1 > span, .js .page-hero h1:not(:has(span)),
  .js .page-hero .page-intro > div:last-child, .js .page-hero .lede-wide {
    opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .page-hero .label { animation-delay: .1s; }
  .js .page-hero h1 > span:nth-child(1), .js .page-hero h1:not(:has(span)) { animation-delay: .25s; }
  .js .page-hero h1 > span:nth-child(2) { animation-delay: .45s; }
  .js .page-hero .page-intro > div:last-child, .js .page-hero .lede-wide { animation-delay: .7s; }

  /* Workflow: line, then each step in turn, then the return path */
  .js .workflow.seq::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.45, 0, .25, 1) .2s; }
  .js .workflow.seq.in::before { transform: none; }
  .js .workflow.seq .step-num { border-color: var(--green-dim); color: var(--muted); transition: border-color .5s ease, color .5s ease, box-shadow .8s ease; }
  .js .workflow.seq.in .step-num { border-color: var(--green); color: var(--green); }
  .js .workflow.seq > li:not(.workflow-loop) h3, .js .workflow.seq > li:not(.workflow-loop) p { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .workflow.seq.in > li h3, .js .workflow.seq.in > li p { opacity: 1; transform: none; }
  .js .workflow.seq.in > li:nth-child(2) .step-num, .js .workflow.seq.in > li:nth-child(2) h3, .js .workflow.seq.in > li:nth-child(2) p { transition-delay: .2s; }
  .js .workflow.seq.in > li:nth-child(3) .step-num, .js .workflow.seq.in > li:nth-child(3) h3, .js .workflow.seq.in > li:nth-child(3) p { transition-delay: .75s; }
  .js .workflow.seq.in > li:nth-child(4) .step-num, .js .workflow.seq.in > li:nth-child(4) h3, .js .workflow.seq.in > li:nth-child(4) p { transition-delay: 1.3s; }
  .js .workflow.seq.in > li:nth-child(5) .step-num, .js .workflow.seq.in > li:nth-child(5) h3, .js .workflow.seq.in > li:nth-child(5) p { transition-delay: 1.85s; }
  .js .workflow.seq .workflow-loop { clip-path: inset(0 0 0 100%); transition: clip-path 1.2s cubic-bezier(.45, 0, .25, 1) 2.3s; }
  .js .workflow.seq.in .workflow-loop { clip-path: inset(0 0 0 -8px); }

  /* Liverpool photographs develop into full tone */
  .js .place-pair.seq img { transform: scale(1.06); filter: brightness(.35); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1), filter 1.6s ease; }
  .js .place-pair.seq.in img { transform: none; filter: none; }

  /* Leadership portraits on the About page ease larger on hover, as on the home page */
  .leader-photo img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
  .leader:hover .leader-photo img, .leader:focus-within .leader-photo img { transform: scale(1.035); }
}

/* Video still: a frame from the University of Liverpool video, with the play button and "Watch on
   YouTube" lower left over a dark fade (text contrast 8.9 or more at every width). The link opens
   YouTube in a new tab; nothing is embedded. */
.video-frame.has-still { background: #000; }
.video-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.video-frame.has-still::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5,12,26,.94) 0%, rgba(5,12,26,.7) 30%, rgba(5,12,26,0) 62%); }
.has-still .video-play { z-index: 1; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 18px; padding: 28px; text-align: left; }
.has-still .video-icon { width: 64px; height: 64px; background: rgba(5,12,26,.55); }
.video-cta { padding-bottom: 20px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.video-frame.has-still:hover .video-still { transform: scale(1.03); }
.video figcaption .video-name { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; color: var(--text); }
.video figcaption .video-credit { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .video-still { transition: none; } }

/* Why it matters: text left, video right, on the same grid as .two-col; stacks below 880px */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.why-text h2 { margin: 18px 0 28px; }
.why-text .body + .body { margin-top: 16px; }
.why-grid .video { margin: 0; max-width: none; }
@media (max-width: 1080px) {
  .has-still .video-play { padding: 18px; gap: 14px; } .has-still .video-icon { width: 52px; height: 52px; }
  .video-cta { padding-bottom: 15px; font-size: 12px; letter-spacing: .12em; } }
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; gap: 36px; } .why-grid .video { max-width: 640px; } }
@media (max-width: 560px) {
  .has-still .video-play { padding: 14px; gap: 12px; } .has-still .video-icon { width: 44px; height: 44px; } .has-still .video-icon svg { width: 15px; height: 16px; }
  .video-cta { padding-bottom: 13px; font-size: 11px; letter-spacing: .12em; } }

/* Panels alternate left and right on wide screens: "mirror" puts the heading on the right. The heading
   stays first in the page order and when the columns stack. */
@media (min-width: 881px) {
  .two-col.mirror > :first-child { grid-column: 2; grid-row: 1; }
  .two-col.mirror > :last-child { grid-column: 1; grid-row: 1; }
}

/* Home, "Our approach": introduction centred above the three cards; on laptops and up, tightened so the
   whole panel shows below the section bar when its link is used. */
@media (min-width: 881px) {
  #approach .section-head { margin: 0 auto; max-width: 46rem; text-align: center; }
  #approach .section-head h2 { text-wrap: balance; }
  #approach .section-head .label::after { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }
  #approach .more { text-align: center; }
}
@media (min-width: 1081px) {
  #approach { scroll-margin-top: -100px; }
  #approach .section-head { max-width: 64rem; }
  #approach .section-head .body { max-width: 52rem; margin-left: auto; margin-right: auto; }
  #approach .cards { margin-top: 36px; }
  #approach .card { padding-top: 28px; padding-bottom: 28px; }
  #approach .more { margin-top: 24px; }
}

/* Home, leadership: label, heading and line centred above the three portrait cards */
@media (min-width: 881px) {
  #leadership > .wrap > .label { display: flex; width: 100%; justify-content: center; }
  #leadership > .wrap > .label::after { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }
  #leadership .lead-head { flex-direction: column; align-items: center; text-align: center; }
  #leadership .lead-head .body { max-width: none; }
}
@media (max-width: 880px) { .person-id h3 { font-size: 25px; } .person-id .role { font-size: 14px; } .person-id { top: calc(100% - 64px - 1.15 * 25px); } }

/* Home, research: first paragraph and the callout on the page, the rest of the summary in a pop-up.
   Without scripts the link opens the paper itself. */
.research-body .bio-link { display: inline-flex; margin-top: 28px; padding-top: 0; }
.bio-body .steps-list { margin-top: 20px; }
.bio-body p.body { font-size: 16px; }

/* Home: the opening panel is shortened by the section bar's height so the bar sits at the foot of the
   first screen; on shorter laptop screens its spacing and type tighten so the bar still shows. */
.hero.has-subnav { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
@media (min-width: 1081px) and (max-height: 940px) {
  .hero.has-subnav { padding: 92px 0 24px; }
  .hero.has-subnav h1 { font-size: clamp(34px, min(3.9vw, 6vh), 56px); margin-top: 14px; }
  .hero.has-subnav .lede { margin-top: 18px; }
  .hero.has-subnav .lede p { font-size: 15px; }
  .hero.has-subnav .lede p:first-child { font-size: 16px; }
  .hero.has-subnav .lede p + p { margin-top: 10px; }
  .hero.has-subnav .ctas { margin-top: 22px; }
  .hero.has-subnav .context { margin-top: 14px; }
  .hero.has-subnav .field-wrap { max-width: min(540px, 68vh); }
}

/* "On this page" bar (home and About): sits below the opening panel, then stays pinned under the main
   menu. The current section is marked in green; the thin line along the bottom shows reading progress. */
.page-hero.has-subnav { padding-bottom: 56px; }
.subnav { position: sticky; top: 80px; z-index: 45; background: rgba(5, 12, 26, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 36px; border-top: 1px solid var(--line); transition: border-color .3s; }
.subnav a { display: inline-block; padding: 16px 0 14px; color: var(--body); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.subnav a:hover { color: var(--green); border-bottom-color: var(--green); }
.subnav a[aria-current] { color: var(--green); border-bottom-color: var(--green); }
.subnav.is-stuck { border-bottom-color: var(--line); }
.subnav.is-stuck ul { border-top-color: transparent; }
.subnav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .subnav ul { opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) .95s forwards; }
}
/* Section links land with the heading just below the bar, not under it */
html:has(.subnav) { scroll-padding-top: 128px; }
.subnav ~ .section[id] { scroll-margin-top: -64px; }
/* On phones the links form one row that swipes sideways, fading at the right edge */
@media (max-width: 560px) {
  .subnav ul { gap: 0 22px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .subnav ul::-webkit-scrollbar { display: none; }
  .subnav li { flex: none; }
}

/* Back to top: appears once the reader is well down the page */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px;
  background: rgba(8, 14, 30, .92); border: 1px solid var(--green-dim); color: var(--green);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, visibility .3s, transform .3s, border-color .3s, color .3s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--green); color: var(--green-hi); }
.to-top[hidden] { display: none; }
@media (max-width: 560px) { .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* About, capabilities. Wide screens: introduction centred; without the turning box (reduced motion),
   cards 01 to 03 in a row and card 04 across the full width. */
@media (min-width: 881px) {
  #platform .section-head.split-head { display: block; margin: 0 auto; max-width: 46rem; text-align: center; }
  #platform .section-head .label::after { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }
  #platform .section-head h2 { max-width: none; text-wrap: balance; }
  #platform .section-head .body { margin-top: 24px; }
  #platform .cards.two { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #platform .cards.two > .card:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  #platform .cards.two > .card:nth-child(4) .num, #platform .cards.two > .card:nth-child(4) h3 { grid-column: 1; }
  #platform .cards.two > .card:nth-child(4) p { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* About, capabilities as a turning box (wide screens, scripts and motion allowed; set up by site.js).
   The four cards become the sides of a box that turns to show one at a time. Every card stays in the
   page for screen readers. */
.pillars-ctrl { display: none; }
@media (min-width: 881px) {
  #platform .pillars.is-cube { max-width: 880px; margin: 56px auto 0; }
  .pillars.is-cube .pillars-scene { perspective: 2000px; height: var(--cube-h, 360px); }
  #platform .pillars.is-cube .cards.two { display: block; position: relative; margin: 0; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
  #platform .pillars.is-cube .cards.two > .card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 44px 56px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  #platform .pillars.is-cube .cards.two > .card.measuring { position: relative; inset: auto; }
  #platform .pillars.is-cube .card h3 { font-size: 28px; margin-top: 14px; }
  #platform .pillars.is-cube .cards.two > .card:nth-child(n) p { margin-top: 16px; font-size: 16.5px; max-width: 46rem; }
  .pillars.is-cube .pillars-ctrl { display: flex; align-items: flex-start; gap: 20px; margin-top: 32px; }
  .pillars-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pillars-tab { padding: 12px 0 0; background: none; border: 0; border-top: 2px solid var(--line); color: var(--muted);
    font: inherit; text-align: left; cursor: pointer; transition: border-color .4s, color .4s; }
  .pillars-tab .n { display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em; }
  .pillars-tab .t { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
  .pillars-tab:hover { color: var(--soft); }
  .pillars-tab[aria-pressed="true"] { border-top-color: var(--green); color: var(--text); }
  .pillars-tab[aria-pressed="true"] .n { color: var(--green); }
  .pillars-pause { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 14px; background: none;
    border: 1px solid var(--green-dim); color: var(--green); cursor: pointer; transition: border-color .3s, color .3s; }
  .pillars-pause:hover { border-color: var(--green); color: var(--green-hi); }
  .pillars-pause .i-play { display: none; }
  .pillars-pause[aria-pressed="true"] .i-play { display: block; }
  .pillars-pause[aria-pressed="true"] .i-pause { display: none; }
}
/* On laptops and up, tightened so the heading, introduction and box show below the section bar when
   the "Our capabilities" link is used. */
@media (min-width: 1081px) {
  #platform { scroll-margin-top: -112px; }
  #platform .section-head.split-head { max-width: 880px; }
  #platform .section-head .body { max-width: none; margin: 18px auto 0; }
  #platform .pillars.is-cube { max-width: 880px; margin-top: 32px; }
  #platform .pillars.is-cube .cards.two > .card { padding: 26px 48px; }
  #platform .pillars.is-cube .card h3 { font-size: 24px; margin-top: 10px; }
  #platform .pillars.is-cube .cards.two > .card:nth-child(n) p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; max-width: none; }
  .pillars.is-cube .pillars-ctrl { margin-top: 18px; }
  .pillars-tab { padding-top: 10px; }
  .pillars-tab .t { margin-top: 4px; font-size: 13px; }
  .pillars-pause { margin-top: 10px; }
}

/* About, discovery workflow. Wide screens: label, heading, steps and caption centred; the joining line
   and the dashed return path meet the centres of the numbers. */
@media (min-width: 881px) {
  #workflow > .wrap > .label { display: flex; width: 100%; justify-content: center; }
  #workflow > .wrap > .label::after { content: ""; width: 48px; height: 1px; background: var(--green); flex: none; }
  #workflow h2 { text-align: center; }
  #workflow .caption { margin-left: auto; margin-right: auto; text-align: center; }
  #workflow .workflow { max-width: 1040px; margin-left: auto; margin-right: auto; }
  #workflow .workflow > li:not(.workflow-loop) { text-align: center; }
  #workflow .workflow .step-num { margin: 0 auto; }
  #workflow .workflow p { text-wrap: balance; }
  #workflow .workflow::before, #workflow .workflow .workflow-loop { left: calc((100% - 96px) / 8); right: calc((100% - 96px) / 8); }
}
/* Phones: a compact timeline. Numbers on the left joined by a line, text beside them, and a dashed
   path on the far left returning from Measure to Define. */
@media (max-width: 560px) {
  .workflow { margin-top: 44px; padding-left: 18px; gap: 28px 0; }
  .workflow > li:not(.workflow-loop) { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; align-content: start; }
  .workflow .step-num { grid-row: span 2; width: 44px; height: 44px; font-size: 12px; }
  .workflow h3 { margin-top: 0; padding-top: 7px; font-size: 21px; }
  .workflow p { margin-top: 4px; font-size: 15px; }
  /* solid line from each number down to the next */
  .workflow > li:not(.workflow-loop):not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: -28px; width: 1px; background: var(--green-dim); }
  /* dashed return path, drawn in pieces so it fits whatever the text length */
  .workflow > li:not(.workflow-loop)::before { content: ""; position: absolute; left: -18px; top: 0; bottom: -28px; border-left: 1px dashed rgba(52, 170, 114, .7); }
  .workflow > li:nth-child(2)::before { top: 22px; }
  .workflow > li:last-child::before { bottom: auto; height: 22px; }
  .workflow > li:nth-child(2) .step-num::before, .workflow > li:last-child .step-num::before { content: ""; position: absolute; right: 100%; top: 50%; width: 18px; border-top: 1px dashed rgba(52, 170, 114, .7); }
  .workflow > li:nth-child(2) .step-num::after { content: ""; position: absolute; right: 100%; top: calc(50% - 4px); border: 4px solid transparent; border-left: 6px solid var(--green); border-right: 0; }
}
/* When the diagram has left the screen it resets instantly, ready to play again when it returns */
.seq-reset, .seq-reset *, .seq-reset *::before, .seq-reset *::after { transition: none !important; animation: none !important; }

/* About, leadership: header left-aligned and stacked (the home page centres it). Each biography shows
   its first paragraph; "Read full biography" opens the rest in place. */
@media (min-width: 881px) {
  #leadership.lead-left > .wrap > .label { display: inline-flex; width: auto; }
  #leadership.lead-left > .wrap > .label::after { content: none; }
  #leadership.lead-left .lead-head { flex-direction: column; align-items: flex-start; text-align: left; gap: 20px; }
  #leadership.lead-left .lead-head .body { max-width: none; }
}
.js .leader-bio.is-collapsed > p:not(:first-child) { display: none; }
.bio-toggle { margin-top: 22px; padding: 4px 0; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
  color: var(--green); font: inherit; font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--green-dim);
  text-underline-offset: 3px; cursor: pointer; }
.bio-toggle:hover { color: var(--green-hi); }
.bio-toggle svg { flex: none; transition: transform .3s; }
.bio-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bio-toggle[hidden] { display: none; }
.leader .bio-toggle + .arrow-link { display: flex; width: max-content; margin-top: 24px; }

/* About, Liverpool: one photograph beside the text on wide screens; phones show heading, text, photograph */
.lv-text .body { margin-top: 28px; }
.lv-text h2 { margin-top: 18px; }
@media (min-width: 881px) {
  .lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .lv-grid .lv-media { grid-column: 1; grid-row: 1; }
  .lv-grid .lv-text { grid-column: 2; grid-row: 1; }
  .lv-media .place-pair { display: block; margin: 0; }
  .lv-media .place-cap { margin-top: 20px; }
}

/* Contact, opening: heading on one line with the introduction under it, so the form starts on the
   first screen. Phones are unchanged. */
@media (min-width: 881px) {
  .contact-hero { padding: 124px 0 36px; }
  .contact-hero h1 span { display: inline; }
  .contact-hero .lede-wide { margin-top: 18px; max-width: 48rem; }
  .contact-hero + .section.follow { padding-top: 16px; }
}

/* Contact, right-hand column: the laboratory photograph in the Headquarters block; company details
   with each label beside its value (above it on phones), and the privacy note under a hairline. */
.side-photo { margin: 28px 0 0; }
.side-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 50%; border: 1px solid var(--line); }
.side-photo figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.side .side-block .side-photo + .arrow-link { margin-top: 20px; }
.side .side-block.company { margin-top: 32px; padding-top: 28px; }
.side .company .details { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; font-size: 15.5px; }
.side .company .details > div { min-width: 0; }
.side .company .details .wide { grid-column: 1 / -1; }
.side .company .details dt { padding-top: 0; }
.side .company .details dd { margin-top: 6px; color: var(--soft); }
.side .company address { margin-top: 0; font-size: inherit; line-height: 1.6; }
.side .company .small { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 561px) {
  .side .company .details { grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; align-items: baseline; }
  .side .company .details > div { display: contents; }
  .side .company .details .wide { grid-column: auto; }
  .side .company .details dd { margin-top: 0; }
}
/* Laptops and up: form and right-hand column at equal widths, which shortens the fields and gives the
   registered office room to sit on two lines. The help line under the form heading stays on one line. */
@media (min-width: 1081px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 72px; }
  .form-help { font-size: 13.5px; text-wrap: balance; }
}