@charset "UTF-8";
/* Westmark Assurance
   westmarkassurance.co.uk

   Brand package v1.1, 11 September 2026.
   Graphite #1B1E23, gold #E7B124, off-white #FAF9F6, black.

   The palette is light: off-white ground, white surfaces, graphite text.
   Gold never appears as text, as a rule or as a control on a light
   background, because it measures 1.96 to 1 against white and fails. It
   appears inside the mark, on graphite where it measures 8.52 to 1, and as a
   pale sand tint used only as a background. Headings are Outfit Bold, with
   Outfit Medium for navigation and controls. Body text falls back to Arial as
   section 10 of the specification directs, since Outfit Regular is not held
   as a web file.

   Photographs are set in one place, in images.css. */

/* WOFF2 first, at about a third of the size. The TrueType files stay as a
   fallback for anything that cannot read WOFF2, which in practice is nothing
   still in use. */
@font-face { font-family: "Outfit"; src: url("brand/Outfit-Bold.woff2") format("woff2"), url("brand/Outfit-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("brand/Outfit-Medium.woff2") format("woff2"), url("brand/Outfit-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --graphite: #1B1E23;
  --graphite-2: #262A31;
  --gold: #E7B124;
  /* Scheme accent colours. Gold belongs to Westmark as a whole. Each mark has
     its own, in two strengths: deep for this off-white ground, where it passes
     as text at better than 4.5 to 1, and bright for graphite. Defined here so
     the scheme pages can take them up. See SCHEME-COLOURS.txt for the rule. */
  --dsm-deep: #3A6EA5;
  --dsm-bright: #63A4E0;
  --ppm-deep: #1E7A3E;
  --ppm-bright: #45B871;
  --offwhite: #FAF9F6;
  --white: #FFFFFF;
  --ink: #1B1E23;
  --steel: #565A61;
  --mute: #6A6D73;
  --rule: #E7E4DE;
  --rule-2: #D8D4CC;
  --edge: #9A958C;   /* interactive borders, 3.11:1 on white */
  --sand: #FBF4E4;
  --sand-2: #F1E6CC;
  --rule-dark: #3A3F47;
  --shadow: 0 1px 2px rgba(27,30,35,.04), 0 10px 30px rgba(27,30,35,.05);
  --shadow-2: 0 2px 4px rgba(27,30,35,.05), 0 18px 44px rgba(27,30,35,.08);
  --head: "Outfit", Arial, Helvetica, sans-serif;
  --body: Arial, Helvetica, system-ui, sans-serif;
  --wrap: 1160px;
  --measure: 66ch;
  --r: 14px;
}

* { box-sizing: border-box; }
html { background: var(--offwhite); color: var(--ink); font: 17px/1.7 var(--body); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  a.card:hover, .dl:hover { transform: none; }
}
body { margin: 0; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; margin: 0; line-height: 1.14; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(33px, 4.4vw, 47px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
h4 { font-size: 17px; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: .45em; }
strong { font-weight: 700; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip-path: none; background: var(--graphite); color: var(--offwhite); font-family: var(--head); font-weight: 500; padding: 12px 18px; border-radius: 8px; text-decoration: none; }
:focus-visible { outline: 3px solid var(--graphite); outline-offset: 2px; box-shadow: 0 0 0 3px var(--offwhite); }
.foot :focus-visible, .cta :focus-visible, .dark :focus-visible { outline-color: var(--offwhite); box-shadow: 0 0 0 3px var(--graphite); }

/* ---- Header ---------------------------------------------------------- */
.masthead { background: rgba(255,255,255,.97); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.brand { flex: none; display: inline-flex; align-items: center; padding: 6px 0; text-decoration: none; }
.brand img { width: 226px; height: auto; display: block; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a { font-family: var(--head); font-weight: 500; font-size: 15px; text-decoration: none; color: var(--steel); padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: #F1EEE8; }
.nav a[aria-current="page"] { color: var(--ink); background: #F1EEE8; }
.nav .sep { width: 1px; height: 24px; background: var(--rule-2); margin: 0 10px; }
.menu { display: none; }

@media (max-width: 1120px) {
  .masthead .wrap { min-height: 66px; }
  .brand img { width: 188px; }
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; cursor: pointer; font-family: var(--head); font-weight: 500; font-size: 15px; color: var(--ink); border: 1px solid var(--rule-2); border-radius: 8px; padding: 10px 15px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: #F1EEE8; }
  .menu .sheet { position: absolute; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); padding: 8px 24px 20px; }
  .menu .sheet a { display: block; font-family: var(--head); font-weight: 500; text-decoration: none; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .menu .sheet a:last-child { border-bottom: 0; }
}

/* ---- Buttons --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-weight: 500; font-size: 16px; line-height: 1; text-decoration: none; padding: 15px 24px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.btn.dark { background: var(--graphite); color: var(--offwhite); }
.btn.dark:hover { background: var(--graphite-2); }
.btn.line { border-color: var(--edge); color: var(--ink); background: var(--white); }
.btn.line:hover { border-color: var(--graphite); }
.btn.gold { background: var(--gold); color: var(--graphite); font-weight: 700; }
.btn.gold:hover { background: #F2BE3E; }
.btn.ghost { border-color: rgba(250,249,246,.45); color: var(--offwhite); }
.btn.ghost:hover { background: rgba(250,249,246,.1); }
.btn.small { padding: 11px 17px; font-size: 15px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.out::after { content: "\2197"; font-size: .85em; opacity: .7; }

/* ---- Sections -------------------------------------------------------- */
section { padding: 68px 0; }
section.tight { padding: 46px 0; }
.band { background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sandband { background: var(--sand); border-top: 1px solid var(--sand-2); border-bottom: 1px solid var(--sand-2); }
.dark { background: var(--graphite); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--offwhite); }
.dark p, .dark li { color: #D3D0CA; }
.dark a { color: var(--offwhite); }
.eyebrow { font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.dark .eyebrow { color: var(--gold); }
.lede { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--steel); }
.dark .lede { color: #CFCCC5; }
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head p { margin-bottom: 0; }

/* ---- Hero ------------------------------------------------------------ */
.hero { padding: 66px 0 60px; }
.hero .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 54ch; margin-top: 20px; }
.hero.inner { padding: 54px 0 46px; }
.hero.inner h1 { max-width: 20ch; }
@media (max-width: 940px) { .hero .split { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

/* Photograph blocks. Every source is set in images.css and nowhere else. */
.shot { border-radius: var(--r); overflow: hidden; background: #EDEAE4; box-shadow: var(--shadow-2); position: relative; }
.shot::after { content: ""; display: block; padding-top: 76%; }
.shot.wide::after { padding-top: 32%; }
.shot.tall::after { padding-top: 112%; }
.shot > i { position: absolute; inset: 0; background-size: cover; background-position: center; display: block; }
/* The picture credit sits inside the frame, low against the photograph
   rather than as a caption line under it. */
.shot-credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0;
  padding: 38px 15px 11px; text-align: right;
  font-size: 11.5px; line-height: 1.35; color: rgba(250, 249, 246, .70);
  background: linear-gradient(to top, rgba(14, 16, 19, .60) 0%, rgba(14, 16, 19, .28) 46%, rgba(14, 16, 19, 0) 100%);
  pointer-events: none; }
.shot:hover .shot-credit { color: rgba(250, 249, 246, .82); }
.shot-credit:empty { display: none; }

/* ---- Cards ----------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid.two, .grid.three, .grid.four { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card .more { font-family: var(--head); font-weight: 500; text-decoration: none; box-shadow: inset 0 -2px 0 var(--rule-2); }
a.card { display: block; text-decoration: none; transition: transform .16s, box-shadow .16s, border-color .16s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--rule-2); }
a.card:hover .more { box-shadow: inset 0 -2px 0 var(--graphite); }
.card.sand { background: var(--sand); border-color: var(--sand-2); box-shadow: none; }
.dark .card { background: var(--graphite-2); border-color: var(--rule-dark); box-shadow: none; }

.tile { padding-left: 20px; border-left: 2px solid var(--rule-2); }
.tile h3 { margin-bottom: 7px; font-size: 17px; letter-spacing: 0; }
.tile p { margin-bottom: 0; color: var(--steel); font-size: 16px; }
.dark .tile { border-left-color: var(--gold); }

/* ---- Prose ----------------------------------------------------------- */
.prose h2 { margin: 46px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; }
.prose .note { background: var(--sand); border: 1px solid var(--sand-2); border-radius: 12px; padding: 22px 26px; margin: 26px 0; }
.prose .note p:last-child { margin-bottom: 0; }
.prose .note h4 { margin-bottom: 8px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
.aside { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; position: sticky; top: 104px; box-shadow: var(--shadow); }
.aside h3 { font-size: 17px; margin-bottom: 12px; }
.aside h3 + h3 { margin-top: 24px; }
.aside p, .aside li { font-size: 15px; color: var(--steel); }

/* Assessed professional standing, post-nominal first. */
.creds { list-style: none; padding: 0; margin: 0; }
.creds li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--steel); }
.creds li:first-child { border-top: 0; padding-top: 0; }
.creds b { flex: none; min-width: 74px; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--ink); }
.aside ul { padding-left: 1.1em; }
@media (max-width: 1000px) { .aside { position: static; } }

/* ---- Tables ---------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); }
.tablewrap table { min-width: 600px; }
.tablewrap table.cols4 { min-width: 900px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
caption { text-align: left; font-family: var(--head); font-weight: 500; font-size: 14px; color: var(--mute); padding: 0 0 10px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { background: #F6F4EF; color: var(--steel); font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
table th:first-child { white-space: nowrap; }

/* ---- Steps ----------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 28px 58px; margin: 0; border-left: 1px solid var(--rule-2); }
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: -18px; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid var(--edge); color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.steps h3 { margin-bottom: 6px; font-size: 17px; letter-spacing: 0; }
.steps p { color: var(--steel); margin-bottom: 0; }
.steps .who { font-family: var(--head); font-weight: 500; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 5px; }

/* ---- Facts strip ----------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.facts div { padding: 26px; border-left: 1px solid var(--rule); }
.facts div:first-child { border-left: 0; }
.facts b { display: block; font-family: var(--head); font-weight: 700; font-size: 30px; line-height: 1; margin-bottom: 9px; }
.facts span { font-size: 15px; color: var(--steel); }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts div:nth-child(3) { border-left: 0; } .facts div:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 460px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts div { border-left: 0; border-top: 1px solid var(--rule); } .facts div:first-child { border-top: 0; } }

/* ---- Call to action -------------------------------------------------- */
.cta { background: var(--graphite); color: var(--offwhite); border-radius: 18px; padding: 46px; display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.cta h2 { color: var(--offwhite); margin-bottom: 10px; }
.cta p { color: #CFCCC5; margin-bottom: 0; max-width: 50ch; }
.cta .btns { margin: 0; }
.cta.light { background: var(--sand); color: var(--ink); border: 1px solid var(--sand-2); }
.cta.light h2 { color: var(--ink); }
.cta.light p { color: var(--steel); }

/* ---- Downloads ------------------------------------------------------- */
.dl { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; text-decoration: none; box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s; }
.dl:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dl .cov { flex: none; width: 58px; height: auto; border-radius: 3px; border: 1px solid var(--rule-2); background: var(--white); display: block; }
.dl b { display: block; font-family: var(--head); font-size: 16px; margin-bottom: 3px; }
.dl span { display: block; font-size: 14px; color: var(--steel); }

/* The take-it-away grid shows the covers properly rather than as thumbnails. */
/* The tall cards show the brochure's own front page. The caption sits
   over the foot of the cover rather than under it, quiet enough to read
   as part of the artwork. The cover carries its own reference line
   underneath, which the scrim covers. */
.dl.tall { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; position: relative; }
.dl.tall .cov { width: 100%; border: 0; border-radius: 0; display: block; }
.dl.tall > span { position: absolute; left: 0; right: 0; bottom: 0; display: block;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(18,20,24,.97) 0%, rgba(18,20,24,.93) 62%, rgba(18,20,24,0) 100%); }
/* The cover already carries the title in large type, so the caption shows
   only the one-line description. The title stays in the markup for screen
   readers and for the link's accessible name. */
.dl.tall > span b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dl.tall > span > span { display: block; color: rgba(250,249,246,.74); font-size: 12.5px; line-height: 1.42; }
.dl.tall:hover > span > span, .dl.tall:focus-visible > span > span { color: rgba(250,249,246,.78); }
.dl.tall b { font-size: 17px; margin-bottom: 4px; }

/* ---- Footer ---------------------------------------------------------- */
.foot { background: var(--graphite); color: #CFCCC5; padding: 58px 0 34px; border-top: 3px solid var(--gold); }
.foot a { color: #CFCCC5; text-decoration: none; }
.foot a:hover { color: var(--offwhite); text-decoration: underline; }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 900px) { .foot .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .foot .cols { grid-template-columns: minmax(0, 1fr); } }
.foot h2 { font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 15px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 9px; font-size: 15px; }
.foot .mark img { width: 198px; margin-bottom: 16px; }
.foot .mark p { font-size: 15px; max-width: 34ch; color: #CFCCC5; }
.foot .legal { border-top: 1px solid var(--rule-dark); margin-top: 42px; padding-top: 24px; font-size: 14px; color: #9C9FA5; }
.foot .legal p { max-width: none; margin-bottom: .5em; }
.foot .legal a { color: #9C9FA5; text-decoration: underline; }

/* ---- Odds and ends --------------------------------------------------- */
.pill { display: inline-block; font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .05em; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--sand-2); color: var(--steel); background: var(--sand); }
.crumb { font-size: 14px; color: var(--mute); margin-bottom: 18px; }
.crumb a { color: var(--steel); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.wide { max-width: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 42px 0; }

/* Inner pages with no photograph. The hero was built as a two-column
   grid around a picture, so without one it left the right half of the
   screen empty and the page read as broken. These pages set the title
   against the standfirst instead, which uses the width deliberately. */
.hero.inner.plain { padding: 46px 0 42px; border-bottom: 1px solid var(--rule); }
.hero.inner.plain .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 60px; align-items: start; }
.hero.inner.plain .crumb { grid-column: 1 / -1; grid-row: 1; }
.hero.inner.plain .eyebrow { grid-column: 1; grid-row: 2; }
.hero.inner.plain h1 { grid-column: 1; grid-row: 3; max-width: 17ch; }
.hero.inner.plain .lede { grid-column: 2; grid-row: 2 / 5; align-self: center; margin-top: 0; max-width: 48ch; }
.hero.inner.plain .btns { grid-column: 1; grid-row: 4; margin-top: 26px; }
@media (max-width: 940px) {
  .hero.inner.plain { padding: 34px 0 30px; }
  .hero.inner.plain .wrap { display: block; }
  .hero.inner.plain .lede { max-width: 54ch; margin-top: 18px; }
}

/* Launch status beside the main call to action, so nobody assumes a mark
   can be obtained today. Remove this when assessments open. */
.status { font-size: 14.5px; color: var(--mute); margin: 16px 0 0; }

/* Download groups, so the eight documents read as three answers to three
   different questions rather than one undifferentiated wall. */
.dlgroup { margin: 34px 0 16px; }
.dlgroup:first-of-type { margin-top: 4px; }
.dlgroup h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 4px; }
.dlgroup p { margin: 0; font-size: 15px; color: var(--mute); max-width: 62ch; }

/* ---- Flow layout (homepage rebuild, September 2026) ----------------
   One ground colour, one reading column. Sections are separated by
   space and a heading rather than by a change of background. The only
   coloured panel on the page is the closing call to action. */
.flow { padding: 0; }
.flow > .wrap > section, section.flow-block { padding: 0; margin: 0 0 84px; }
.flow h2 { margin-bottom: 14px; max-width: 24ch; }
.flow .intro { font-size: clamp(18px, 2vw, 20px); line-height: 1.6; color: var(--steel); max-width: 60ch; margin-bottom: 30px; }
.flow .textlink { font-family: var(--head); font-weight: 500; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--rule-2); }
.flow .textlink:hover { box-shadow: inset 0 -2px 0 var(--graphite); }
.hero .textlink { display: inline-flex; align-items: center; padding: 15px 4px; font-family: var(--head); font-weight: 500; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--rule-2); }
.hero .textlink:hover { box-shadow: inset 0 -2px 0 var(--graphite); }

/* Two-column reasons list. Plain text with a rule, no cards. */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 48px; margin: 0; padding: 0; list-style: none; max-width: none; }
.reasons li { margin: 0; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.reasons h3 { font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.reasons p { margin: 0; color: var(--steel); max-width: 46ch; }
@media (max-width: 720px) { .reasons { grid-template-columns: minmax(0, 1fr); } }

/* Routes into the site, one line each. */
.routes { list-style: none; padding: 0; margin: 0; max-width: none; border-top: 1px solid var(--rule-2); }
.routes li { margin: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
.routes h3 { font-size: 18px; letter-spacing: -0.01em; }
.routes p { margin: 0; color: var(--steel); max-width: 60ch; }
.routes a.go { font-family: var(--head); font-weight: 500; white-space: nowrap; color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--rule-2); }
.routes a.go:hover { box-shadow: inset 0 -2px 0 var(--graphite); }
@media (max-width: 820px) { .routes li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Documents as a compact list rather than a gallery. */
.doclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; padding: 0; list-style: none; max-width: none; }
.doclist li { margin: 0; }
.doclist a { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.doclist .cov { flex: none; width: 46px; height: auto; border-radius: 2px; border: 1px solid var(--rule-2); display: block; }
.doclist b { display: block; font-family: var(--head); font-weight: 700; font-size: 16px; }
.doclist span { display: block; font-size: 14.5px; color: var(--steel); }
.doclist a:hover b { text-decoration: underline; }
@media (max-width: 720px) { .doclist { grid-template-columns: minmax(0, 1fr); } }

/* Partner note: one short paragraph set off by a rule, not a card. */
.note-line { border-left: 2px solid var(--gold); padding-left: 22px; margin-top: 40px; max-width: 62ch; }
.note-line p { margin-bottom: 0; color: var(--steel); }

/* Homepage introduction: two columns of plain prose at reading width. */
.prose-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: none; }
.prose-cols p { max-width: 52ch; font-size: 17.5px; }
.prose-cols p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .prose-cols { grid-template-columns: minmax(0, 1fr); } }

/* Introduction: lead paragraph, then process and outcome side by side. */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 64px; margin-top: 8px; }
.intro-grid h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--steel); margin-bottom: 18px; }
.intro-grid h3 + h3 { margin-top: 0; }
.intro-grid ul + h3 { margin-top: 32px; }
@media (max-width: 860px) { .intro-grid { grid-template-columns: minmax(0, 1fr); } }
.steps.compact li { padding: 0 0 22px 52px; }
.steps.compact li::before { width: 32px; height: 32px; left: -16px; font-size: 14px; }
.steps.compact h4 { font-size: 17px; margin-bottom: 4px; }
.steps.compact p { font-size: 16px; }

/* Tick lists: a plain mark in the margin, no bullet glyph. */
.ticks { list-style: none; padding: 0; margin: 0; max-width: none; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--steel); font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.ticks.cross li::before { width: 11px; height: 11px; top: 5px; left: 3px; border: 0; background:
  linear-gradient(var(--ink), var(--ink)) center / 2.5px 100% no-repeat,
  linear-gradient(var(--ink), var(--ink)) center / 100% 2.5px no-repeat; transform: rotate(45deg); }

/* Label and value rows inside the scheme cards. */
.facts-list { list-style: none; padding: 0; margin: 0 0 18px; max-width: none; }
.facts-list li { display: grid; grid-template-columns: minmax(82px, max-content) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); margin: 0; font-size: 15.5px; }
.facts-list li:first-child { border-top: 0; padding-top: 0; }
.facts-list b { font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); padding-top: 3px; }
.facts-list span { color: var(--ink); }
.fineline { margin: 26px 0 0; font-size: 14px; color: var(--mute); max-width: 52ch; }

/* ---- Motion ---------------------------------------------------------
   Sections rise a short way as they arrive. The starting state is only
   applied once the script has run, so with scripts off everything is
   simply visible. Reduced motion disables it in the script and here. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* Hover states on the rows and lists. The card lift already exists. */
.routes li { transition: background-color .16s; margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 8px; }
.routes li:hover { background: var(--white); }
.routes li:hover a.go { box-shadow: inset 0 -2px 0 var(--graphite); }
.doclist a { transition: background-color .16s; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.doclist a:hover { background: var(--white); }
.doclist .cov { transition: transform .16s, box-shadow .16s; }
.doclist a:hover .cov { transform: translateY(-2px); box-shadow: var(--shadow); }
.reasons li { transition: border-color .16s; }
.reasons li:hover { border-top-color: var(--graphite); }
.ticks li { transition: color .16s; }

/* ---- Section rail ---------------------------------------------------
   Built by site.js on pages that mark a container with data-rail. Sits
   under the sticky masthead and names the section the reader is in. */
.rail { position: sticky; top: 78px; z-index: 40; background: rgba(250,249,246,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.rail .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail .wrap::-webkit-scrollbar { display: none; }
.rail a { flex: none; font-family: var(--head); font-weight: 500; font-size: 14px; color: var(--steel); text-decoration: none; padding: 13px 12px 11px; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 1120px) { .rail { top: 66px; } }

/* ---- Scheme page components ---------------------------------------- */
.hero.inner .status { margin-top: 14px; }
.hero .btns .textlink { padding: 15px 4px; }

/* The sections of a standard. Numbered because the Control Set numbers them. */
.sections { list-style: none; padding: 0; margin: 0 0 40px; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--rule-2); }
.sections li { margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); align-items: start; }
.sections b { font-family: var(--head); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sections strong { display: block; font-family: var(--head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 2px; }
.sections span { font-size: 15px; color: var(--steel); line-height: 1.5; }
@media (max-width: 720px) { .sections { grid-template-columns: minmax(0, 1fr); } }

/* Steps in two columns on wide screens. */
.steps.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.steps.twocol li { padding-bottom: 26px; }
.steps.twocol li:nth-last-child(-n+2) { border-left-color: transparent; }
@media (max-width: 860px) { .steps.twocol { grid-template-columns: minmax(0, 1fr); } .steps.twocol li:nth-last-child(2) { border-left-color: var(--rule-2); } }

/* Outcomes: a coloured edge per outcome, since the outcome is a state. */
.outcomes { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.outcomes li { margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 24px 26px 22px; border-top-width: 4px; }
.outcomes .pass { border-top-color: var(--ppm-deep); }
.outcomes .cond { border-top-color: var(--gold); }
.outcomes .fail { border-top-color: var(--steel); }
.outcomes .tag { font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 12px; }
.outcomes p { font-size: 16px; margin-bottom: 8px; }
.outcomes p.small { font-size: 14.5px; color: var(--steel); margin-bottom: 0; }
@media (max-width: 860px) { .outcomes { grid-template-columns: minmax(0, 1fr); } }

/* Summary list: key and value rows. */
.summary { margin: 0; max-width: 820px; border-top: 1px solid var(--rule-2); }
.summary > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
.summary dt { font-family: var(--head); font-weight: 500; color: var(--steel); font-size: 15px; padding-top: 2px; }
.summary dd { margin: 0; font-size: 16.5px; }
@media (max-width: 640px) { .summary > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.doclist.one { grid-template-columns: minmax(0, 1fr); }
.intro-grid .btns { margin-top: 22px; align-items: center; }
.flow[data-rail] > .wrap { padding-top: 56px; }
.rail .wrap { padding-left: 12px; }
.intro-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticks strong { color: var(--ink); }
@media (max-width: 860px) { .intro-grid.even { grid-template-columns: minmax(0, 1fr); } }
.outcomes.products li { border-top-color: var(--ppm-deep); }
.outcomes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; max-width: 760px; }
@media (max-width: 860px) { .outcomes.two { grid-template-columns: minmax(0, 1fr); } }
/* Full sequence on the method page: one column, room for a paragraph each. */
.steps.full { max-width: 760px; }
.steps.full li { padding: 0 0 34px 62px; }
.steps.full h3 { font-size: 19px; margin-bottom: 6px; }
.steps.full p { font-size: 16.5px; }
.summary.tight > div { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 0; }
.summary.tight dd { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; }
.card .facts-list { margin-bottom: 14px; }
.card .facts-list span { font-size: 15px; }
/* Wide summary list on the explainer page. */
.summary.wide { max-width: none; }
.summary.wide > div { grid-template-columns: 260px minmax(0, 1fr); }
.summary.wide dt { font-weight: 700; color: var(--ink); font-size: 16px; }
@media (max-width: 640px) { .summary.wide > div { grid-template-columns: minmax(0, 1fr); } }
/* Sections list without numbers. */
.sections.plain li { grid-template-columns: minmax(0, 1fr); }
.hero.inner.plain .status { grid-column: 1; grid-row: 5; }
.intro-grid ol + h3 { margin-top: 30px; }

/* ---- Modifiers replacing inline style attributes -------------------
   The site sends Content-Security-Policy with style-src 'self', which
   discards style attributes as well as style blocks, so these values
   have to live in the stylesheet to take effect. */
.doclist.narrow { max-width: 560px; }
.doclist.spaced { margin-top: 34px; }
.prose.measure { max-width: 820px; }
.fineline.tight { margin: 0 0 12px; }

/* ---- Contact card hero ----------------------------------------------
   The plain inner hero sets the title against the standfirst in two
   columns. The card wants the name, the role and the line stacked as one
   block, so this variant keeps the single column at every width. */
.hero.inner.plain.card .wrap { display: block; }
.hero.inner.plain.card h1 { max-width: none; }
.hero.inner.plain.card .lede { max-width: 54ch; margin-top: 14px; }
.rolename { font-family: var(--head); font-weight: 500; font-size: clamp(16px, 1.7vw, 19px); color: var(--graphite); margin: 10px 0 0; }

/* Guidance page, September 2026 */
.doclist .meta, .lead-doc .meta { font-size: 14px; color: var(--mute); margin-top: 4px; }
.lead-doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--dsm-deep); border-radius: 14px; padding: 28px; max-width: 880px; }
.lead-doc .lead-cov img { width: 100%; height: auto; display: block; border-radius: 3px; border: 1px solid var(--rule-2); box-shadow: var(--shadow); }
.lead-doc h3 { margin: 0 0 12px; }
.lead-doc p { color: var(--steel); }
.lead-doc .btns { margin-top: 18px; }
@media (max-width: 640px) { .lead-doc { grid-template-columns: minmax(0, 1fr); } .lead-doc .lead-cov { max-width: 180px; } }
.gform { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 28px; max-width: 760px; }
.gform .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-bottom: 22px; }
@media (max-width: 640px) { .gform .grid { grid-template-columns: minmax(0, 1fr); } }
.gform label { display: block; font-family: var(--head); font-weight: 500; font-size: 15px; color: var(--ink); }
.gform input[type=text], .gform input[type=email], .gform input[type=tel], .gform textarea { display: block; width: 100%; margin-top: 6px; font: 16px/1.4 var(--body, Arial, sans-serif); color: var(--ink); background: var(--white); border: 1px solid var(--edge); border-radius: 8px; padding: 11px 12px; }
.gform input:focus, .gform textarea:focus { outline: 2px solid var(--dsm-deep); outline-offset: 1px; border-color: var(--dsm-deep); }
.gform fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.gform legend { font-family: var(--head); font-weight: 500; font-size: 15px; margin-bottom: 10px; }
.gform .check { display: flex; gap: 10px; align-items: center; font-family: inherit; font-weight: 400; font-size: 16px; color: var(--steel); margin: 0 0 8px; }
.gform .check input { width: 18px; height: 18px; accent-color: var(--dsm-deep); }
.gform .opt { font-weight: 400; color: var(--mute); }
.gform textarea { resize: vertical; }
.gform .small { font-size: 14px; color: var(--mute); margin-top: 16px; }
.gform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Eight menu items from September 2026. Between the menu breakpoint and a
   full desktop width the bar tightens so the hub button never falls off. */
@media (min-width: 1121px) and (max-width: 1340px) {
  .brand img { width: 190px; }
  .nav a { padding: 9px 8px; }
  .nav .sep { margin: 0 6px; }
  .nav .btn.small { padding: 10px 13px; }
}