/* ══════════════════════════════════════════
   PAGES (14 Nov 2026): the bodies of the five remaining old pages (contact, jobs, programme, privacy, 404) in the
   site's new design language. Their headers and endings are the shared ones (system.css's quiet pass for the
   header, ending.css for the ending); this file draws only what sits between them, inside <main class="pg ...">.
   The language is the approved homepage (a051a89), About and the work index, measured:
   - the wide grid: 16 / 32 / 48 px side margins (the content stopping at 1824 px), one space between sections
     (48 / 64 / 80 px above and below each), the header's clearance 56 / 72 / 88 px;
   - type: the work index's display headline (left), About's hero headline (centred), About's section titles, item
     names 18 / 19 / 20 px, copy 16 / 17 px on 1.45 in the one muted grey (60% ink), links ink under a 30% line;
   - hairline lists (1 px, 8% ink) for anything that is a list, never cards, tints, outlines or accent bars;
   - one ink button, 44 px, 8 px corners; fields and chips with 8 px corners; the one 2 px focus ring;
   - no purple and nothing that fades or slides in.
   Every rule is under main.pg, one step more specific than the pages' own inline rules, so the old body styles
   that are still in the files can never win. No colour here is lighter than the muted grey (4.5:1 or more).
══════════════════════════════════════════ */

main.pg {
  --pg-ink: #09090B;
  --pg-muted: #09090B99;
  --pg-line: #09090B14;
  --pg-field: #09090B2E;
  --pg-field-hover: #09090B66;
  --pg-error: #B42318;
  --pg-warm: #F6F5F3;
  --pg-gutter: 16px;
  --pg-space: 48px;
  --pg-clear: 56px;
  --pg-desc: 16px;
  --pg-desc-lh: 1.45;
  --pg-item: 18px;
  --pg-title: clamp(26px, min(8.4vw, calc(28.3px + 0.95vw)), 38px);
  --pg-title-track: -0.022em;
  --pg-statement: 24px;
  --pg-r: 8px;
  --pg-ease: cubic-bezier(0.65, 0, 0.35, 1);
  display: block;
  font-family: var(--font, 'Inter Tight', 'Geist', system-ui, sans-serif);
  color: var(--pg-ink);
  padding-top: var(--pg-clear);
}
@media (min-width: 769px) {
  main.pg { --pg-gutter: 32px; --pg-space: 64px; --pg-clear: 72px; --pg-title: clamp(26px, calc(28.3px + 0.95vw), 38px); --pg-statement: 30px; }
}
@media (min-width: 1024px) {
  main.pg { --pg-item: 19px; --pg-title: 40px; --pg-title-track: -0.025em; }
}
@media (min-width: 1025px) {
  main.pg { --pg-gutter: max(48px, calc((100% - 1824px) / 2)); --pg-space: 80px; --pg-clear: 88px; --pg-statement: 32px; }
}
@media (min-width: 1280px) {
  main.pg { --pg-desc: 17px; --pg-title: clamp(44px, calc(44px + (100vw - 1280px) * 0.025), 48px); --pg-title-track: -0.028em; --pg-statement: clamp(32px, calc(32px + (100vw - 1280px) * 0.025), 36px); }
}
@media (min-width: 1440px) {
  main.pg { --pg-item: 20px; --pg-title: clamp(48px, calc(48px + (100vw - 1440px) * 0.01389), 52px); --pg-title-track: -0.03em; --pg-statement: clamp(36px, calc(36px + (100vw - 1440px) * 0.025), 48px); }
}

/* ── Sections: one space above and below each, content to content twice that ── */
main.pg .pg-sec { padding: var(--pg-space) var(--pg-gutter); }
main.pg .pg-sec + .pg-sec { padding-top: var(--pg-space); }

/* The split (About's founders row, the work index's column): the title and its line in the first of three
   columns, the content across the other two, 24 px apart. Stacked to 1024 px, 32 px apart. */
main.pg .pg-split { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
@media (min-width: 1025px) {
  main.pg .pg-split { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  main.pg .pg-split > .pg-side { grid-column: 1; }
  main.pg .pg-split > .pg-body { grid-column: 2 / span 2; min-width: 0; }
}

/* ── Type ── */
/* The display headline, left (the work index's "Work"): 40 to 52 px on phones, 56 on tablets, 80 at 1440, 96 at
   1920, its cap height on the block's top */
main.pg .pg-display { font-size: clamp(40px, 12.3vw, 52px); font-weight: 400; line-height: 1.02; letter-spacing: -0.045em; color: var(--pg-ink); text-wrap: balance; }
@media (min-width: 769px) { main.pg .pg-display { font-size: 56px; line-height: 0.98; letter-spacing: -0.05em; } }
@media (min-width: 1025px) { main.pg .pg-display { font-size: clamp(40px, 5.56vw, 96px); } }

/* About's hero headline, centred: 36 / 48 / 72 px */
main.pg .pg-hero-title { font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; color: var(--pg-ink); text-align: center; text-wrap: balance; }
@media (min-width: 769px) { main.pg .pg-hero-title { font-size: 48px; } }
@media (min-width: 1280px) { main.pg .pg-hero-title { font-size: 72px; } }

/* About's section title */
main.pg .pg-title { font-size: var(--pg-title); font-weight: 400; line-height: 1.05; letter-spacing: var(--pg-title-track); color: var(--pg-ink); text-wrap: balance; }

/* Copy in the muted grey */
main.pg .pg-desc { font-size: var(--pg-desc); line-height: var(--pg-desc-lh); color: var(--pg-muted); max-width: 30em; text-wrap: pretty; }

/* The homepage's statement: ink, then the muted grey for the second thought */
main.pg .pg-statement { font-size: var(--pg-statement); font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; color: var(--pg-muted); max-width: 22em; text-wrap: balance; }
main.pg .pg-statement strong { font-weight: 400; color: var(--pg-ink); }

/* Small labels (13 px, the muted grey) */
main.pg .pg-label { font-size: 13px; line-height: 18px; color: var(--pg-muted); }

/* Links in copy: ink under a 30% line, solid on hover */
main.pg .pg-link, main.pg .pg-desc a, main.pg .pg-prose a {
  color: var(--pg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: #09090B4D; transition: text-decoration-color 0.2s ease;
}
main.pg .pg-link:hover, main.pg .pg-desc a:hover, main.pg .pg-prose a:hover { text-decoration-color: currentColor; }

/* ── The one button: ink, 44 px, 8 px corners, 14 px label ── */
main.pg .pg-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--pg-r); background: var(--pg-ink); color: #FFFFFF; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 18px; text-decoration: none;
  transition: opacity 0.15s ease;
}
main.pg .pg-btn:hover { opacity: 0.85; }
main.pg .pg-btn span { color: inherit; font: inherit; }
main.pg .pg-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Hairline lists: rows divided by the 8% ink hairline, no outer frame ── */
main.pg .pg-list { list-style: none; margin: 0; padding: 0; }
main.pg .pg-list > * { border-bottom: 1px solid var(--pg-line); }
main.pg .pg-list > *:first-child { border-top: 1px solid var(--pg-line); }

/* ── Fields: label above (13 px, the muted grey), the field 48 px with 8 px corners and a 1 px edge at 18% ink,
   ink on hover and focus, the one focus ring outside it. Errors in the homepage's red. ── */
main.pg .form-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
main.pg .form-label { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--pg-muted); letter-spacing: 0; text-transform: none; padding: 0; }
main.pg .form-label .required { color: var(--pg-muted); margin-left: 2px; }
main.pg .form-input, main.pg .form-textarea, main.pg .form-group input[type="date"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 48px; margin: 0; padding: 0 16px;
  border: 1px solid var(--pg-field); border-radius: var(--pg-r); background: #FFFFFF; box-shadow: none;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--pg-ink);
  transition: border-color 0.2s ease;
}
main.pg .form-textarea { height: auto; min-height: 144px; padding: 12px 16px; resize: none; field-sizing: content; }
main.pg .form-input:hover, main.pg .form-textarea:hover { border-color: var(--pg-field-hover); }
main.pg .form-input:focus, main.pg .form-textarea:focus { border-color: var(--pg-ink); }
main.pg .form-input::placeholder, main.pg .form-textarea::placeholder { color: var(--pg-muted); opacity: 1; }
main.pg .form-input.error, main.pg .form-textarea.error { border-color: var(--pg-error); }
main.pg .form-error { display: none; margin: 0; font-size: 13px; line-height: 18px; color: var(--pg-error); }
main.pg .form-error.visible { display: block; }
main.pg .form-select { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2309090B' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
main.pg .form-select.is-empty { color: var(--pg-muted); }
main.pg .form-select option { color: var(--pg-ink); }
main.pg .form-other[hidden] { display: none; }
main.pg .form-other { margin-top: 8px; }
main.pg .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 769px) { main.pg .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main.pg .form-submit { display: flex; align-items: center; gap: 16px; padding: 0; }
main.pg .form-submit button {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 0; border-radius: var(--pg-r);
  background: var(--pg-ink); color: #FFFFFF; cursor: pointer; transition: opacity 0.15s ease;
}
main.pg .form-submit button:hover { opacity: 0.85; }
main.pg .form-submit button span { font-family: inherit; font-size: 14px; font-weight: 500; line-height: 18px; color: #FFFFFF; }

/* Chips (one choice from a few): 44 px, 8 px corners, the field's edge; the one chosen in ink */
main.pg .service-pills { display: flex; flex-wrap: wrap; gap: 8px; }
main.pg .service-pills .service-pill {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; margin: 0;
  border: 1px solid var(--pg-field); border-radius: var(--pg-r); background: #FFFFFF; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
main.pg .service-pills .service-pill:hover { border-color: var(--pg-field-hover); }
main.pg .service-pills .service-pill span { font-size: 16px; line-height: 20px; color: var(--pg-ink); transition: color 0.2s ease; }
main.pg .service-pills .service-pill.selected { background: var(--pg-ink); border-color: var(--pg-ink); }
main.pg .service-pills .service-pill.selected span { color: #FFFFFF; }

/* The budget: one row of equal cells on shared hairlines inside one 8 px frame (a scale, not separate chips) */
main.pg .budget-scale { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; max-width: 560px; gap: 1px; padding: 0; background: var(--pg-field); border: 1px solid var(--pg-field); border-radius: var(--pg-r); overflow: hidden; }
main.pg .budget-scale[hidden] { display: none; }
main.pg .budget-scale .service-pill { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 8px; border: 0; border-radius: 0; background: #FFFFFF; cursor: pointer; white-space: nowrap; transition: background 0.2s ease; }
main.pg .budget-scale .service-pill:hover { background: #F4F4F5; }
main.pg .budget-scale .service-pill span { font-size: 15px; line-height: 20px; color: var(--pg-ink); }
main.pg .budget-scale .service-pill.selected { background: var(--pg-ink); }
main.pg .budget-scale .service-pill.selected span { color: #FFFFFF; }
@media (max-width: 480px) {
  /* four cells do not fit one row at 16 px gutters: two rows of two, the hairlines between */
  main.pg .budget-scale:not(.is-monthly) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The checkbox (programme): an 18 px square with 4 px corners and an ink tick, beside its sentence */
main.pg .perk-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
main.pg .perk-check-text { font-size: 16px; line-height: 22px; color: var(--pg-ink); }

/* Reduced motion: nothing eases */
@media (prefers-reduced-motion: reduce) {
  main.pg *, main.pg *::before, main.pg *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════
   CONTACT: the headline and its line, the form, then the ways to reach us. Phones and tablets: one column in
   that order, 64 px between the blocks. From 1025 px: the homepage's twelve columns 24 px apart, the head and
   the ways to reach us across columns 1 to 5, column 6 left empty for air, the form from column 7 (to 600 px),
   its first label on the headline's cap height and the headline on the work index's line.
   Calm by design (Charlie, 14 Nov: "a bit busy and dense", then "more of an airy feel"): one quiet chip for both
   choices (40 px, 8 px corners, a 10% ink hairline, ink when chosen, 8 px apart), fields on the same 10%
   hairline with the ink ring only on focus, one rhythm (12 px from label to field, 40 px between groups, 64 px
   before the button), and the ways to reach us as plain lines under one hairline. The section's own space and
   the ending's make the gap from the form's end to the ending 160 / 128 / 96 px, the site's section rhythm.
══════════════════════════════════════════ */
main.pg-contact { --ct-edge: #09090B1A; --ct-edge-hover: #09090B40; }
/* From 1025 px the contact lines sit beside the form but follow it in the source, so Tab jumps from Send back up
   the page. Keep what takes focus clear of the header that scrolling up brings back, and scroll to it at once:
   a smooth scroll still running down to Send would otherwise carry the page past it (the page has no in-page
   links for the smooth scroll to serve). */
html:has(main.pg-contact) { scroll-padding-top: 112px; scroll-behavior: auto; }
main.pg-contact .pg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
main.pg-contact .pg-contact-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
main.pg-contact .contact-form { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 600px; margin: 0; padding: 0; }
main.pg.pg-contact .form-group { gap: 12px; }
main.pg.pg-contact .form-other { margin-top: 0; }

/* Fields: 40 px like the chips, on the same 10% hairline, a touch darker on hover; focus is the one ink ring, the
   edge stays. The project box opens at three lines and grows with what is typed. */
main.pg.pg-contact .form-input, main.pg.pg-contact .form-textarea { height: 40px; padding: 0 14px; border-color: var(--ct-edge); }
main.pg.pg-contact .form-textarea { height: auto; min-height: 88px; padding: 8px 14px; }
main.pg.pg-contact .form-label { line-height: 16px; }
main.pg.pg-contact .form-select { padding-right: 40px; background-position: right 14px center; }
main.pg.pg-contact .form-input:hover, main.pg.pg-contact .form-textarea:hover { border-color: var(--ct-edge-hover); }
main.pg.pg-contact .form-input:focus, main.pg.pg-contact .form-textarea:focus { border-color: var(--ct-edge); outline: 2px solid var(--pg-ink); outline-offset: 3px; }
main.pg.pg-contact .form-input.error, main.pg.pg-contact .form-textarea.error { border-color: var(--pg-error); }
main.pg.pg-contact .form-row { grid-template-columns: minmax(0, 1fr); column-gap: 24px; row-gap: 40px; }
@media (min-width: 820px) { main.pg.pg-contact .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main.pg.pg-contact .form-submit { margin-top: 24px; padding-top: 0; }   /* 40 + 24: 64 px before the button */

/* One quiet chip for the service and the budget alike */
main.pg.pg-contact .service-pills, main.pg.pg-contact .budget-scale {
  display: flex; flex-wrap: wrap; gap: 8px; width: auto; max-width: none; padding: 0;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
main.pg.pg-contact .budget-scale[hidden] { display: none; }
main.pg.pg-contact .service-pills .service-pill, main.pg.pg-contact .budget-scale .service-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; margin: 0;
  border: 1px solid var(--ct-edge); border-radius: var(--pg-r); background: #FFFFFF; white-space: nowrap; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
main.pg.pg-contact .service-pills .service-pill:hover, main.pg.pg-contact .budget-scale .service-pill:hover { background: #FFFFFF; border-color: var(--ct-edge-hover); }
main.pg.pg-contact .service-pills .service-pill span, main.pg.pg-contact .budget-scale .service-pill span { font-size: 15px; line-height: 20px; color: var(--pg-ink); transition: color 0.2s ease; }
main.pg.pg-contact .service-pills .service-pill.selected, main.pg.pg-contact .budget-scale .service-pill.selected { background: var(--pg-ink); border-color: var(--pg-ink); }
main.pg.pg-contact .service-pills .service-pill.selected span, main.pg.pg-contact .budget-scale .service-pill.selected span { color: #FFFFFF; }
main.pg.pg-contact .service-pills .service-pill:has(input:focus-visible), main.pg.pg-contact .budget-scale .service-pill:has(input:focus-visible) { outline: 2px solid var(--pg-ink); outline-offset: 3px; }
/* The service chips a touch tighter, 12 px a side (14 Nov, with Motion added): the six sit on one row from 820 px and
   three by three on phones, at the same type; the budget chips keep 14 px */
main.pg.pg-contact .service-pills .service-pill { padding: 0 12px; }
@media (max-width: 480px) {
  /* the four-band budget sets (project, Motion) two by two, in two even columns; the monthly three keep one row */
  main.pg.pg-contact .budget-scale:not(.is-monthly):not([hidden]) { display: grid; grid-template-columns: repeat(2, max-content); }
}

/* The ways to reach us: plain lines under one hairline, the small muted label over ink links */
main.pg.pg-contact .pg-contact-list { display: flex; flex-direction: column; gap: 20px; max-width: 600px; padding-top: 24px; border-top: 1px solid var(--pg-line); }
main.pg.pg-contact .pg-contact-list > li { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; }
main.pg-contact .pg-contact-links { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; font-size: var(--pg-desc); line-height: var(--pg-desc-lh); }
main.pg-contact .pg-contact-links a { padding-inline: 12px; margin-inline: -12px; }   /* short names (X) a wider target, in place */
@media (max-width: 1024px), (pointer: coarse) {
  /* each link a 44 px tall target, keeping its place */
  main.pg-contact .pg-contact-links a { padding-block: 10px; margin-block: -10px; }
}
@media (min-width: 769px) {
  main.pg-contact .pg-contact-head { gap: 24px; }
}
@media (min-width: 1025px) {
  main.pg-contact .pg-contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px;
    grid-template-areas:
      "head head head head head . form form form form form form"
      "list list list list list . form form form form form form";
    grid-template-rows: auto 1fr;
  }
  main.pg-contact .pg-contact-head { grid-area: head; }
  main.pg-contact .pg-display { margin-top: -0.126em; }
  main.pg-contact .contact-form { grid-area: form; margin-top: -3px; }   /* the first label's cap height on the headline's */
  main.pg-contact .pg-contact-list { grid-area: list; align-self: start; }
}

/* ══════════════════════════════════════════
   PRIVACY: a calm reading page in the article template's measure and type (writing.css): 624 px of text centred,
   the title at the article's 48 / 40 / 32 px, body 17 px on 170% in ink, section headings 28 px, lists with
   bullets. The contents as a hairline list: above the text to 1279 px; from 1280 px in the left margin beside it,
   sticky under the header, the section in view in ink.
══════════════════════════════════════════ */
main.pg-privacy .pg-privacy-grid { display: grid; grid-template-columns: minmax(0, 624px); justify-content: center; row-gap: 40px; }
main.pg-privacy .pg-privacy-head { display: flex; flex-direction: column; gap: 16px; }
main.pg-privacy .pg-privacy-title { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; color: var(--pg-ink); text-wrap: balance; }
@media (min-width: 481px) { main.pg-privacy .pg-privacy-title { font-size: 40px; line-height: 1.08; } }
@media (min-width: 1025px) { main.pg-privacy .pg-privacy-title { font-size: 48px; line-height: 1.06; } }

main.pg-privacy .privacy-sidebar { position: static; padding: 0; margin: 0; border: 0; }
main.pg-privacy .privacy-sidebar a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 20px;
  color: var(--pg-muted); text-decoration: none; transition: color var(--duration-state, 0.2s) ease;
}
main.pg-privacy .privacy-sidebar a:hover, main.pg-privacy .privacy-sidebar a.active { color: var(--pg-ink); }

main.pg-privacy .pg-prose { min-width: 0; }
main.pg-privacy .pg-prose p, main.pg-privacy .pg-prose ul { font-size: 17px; line-height: 170%; color: var(--pg-ink); margin: 0 0 24px; }
main.pg-privacy .pg-prose .pg-prose-lead { font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; margin-bottom: 0; }
main.pg-privacy .pg-prose ul { padding-left: 24px; }
main.pg-privacy .pg-prose li { margin-bottom: 8px; }
main.pg-privacy .pg-prose li:last-child { margin-bottom: 0; }
main.pg-privacy .pg-prose strong { font-weight: 500; }
main.pg-privacy .pg-prose h2 { display: block; width: auto; padding: 0; border: 0; font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--pg-ink); margin: 56px 0 16px; text-wrap: balance; scroll-margin-top: calc(var(--pg-clear) + 24px); }
main.pg-privacy .pg-prose > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  main.pg-privacy .pg-prose p, main.pg-privacy .pg-prose ul { font-size: 16px; }
  main.pg-privacy .pg-prose .pg-prose-lead { font-size: 18px; }
  main.pg-privacy .pg-prose h2 { font-size: 24px; margin-top: 48px; }
}
@media (min-width: 1280px) {
  main.pg-privacy .pg-privacy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 624px) minmax(0, 1fr); column-gap: 48px; justify-content: stretch; }
  main.pg-privacy .pg-privacy-head, main.pg-privacy .pg-prose { grid-column: 2; }
  main.pg-privacy .privacy-sidebar { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: calc(var(--pg-clear) + 24px); max-width: 280px; }
  main.pg-privacy .privacy-sidebar a { min-height: 40px; padding-block: 8px; }
}
/* Touch: links in the reading column take a 44 px tall target, keeping their place */
@media (max-width: 1024px), (pointer: coarse) {
  main.pg-privacy .pg-prose a { padding-block: 12px; margin-block: -12px; }
}

/* ══════════════════════════════════════════
   404: a short plain message on the left of the wide grid (the "404" as a small label, the sentence at the
   display step), the homepage and the work page as the two ways back, then the quiet ending.
══════════════════════════════════════════ */
main.pg-404 .pg-404-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: calc(var(--pg-space) * 2); }
main.pg-404 .pg-404-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 24px; margin-top: 16px; }
main.pg-404 .pg-404-links .pg-link { font-size: 15px; line-height: 20px; }
@media (min-width: 769px) { main.pg-404 .pg-404-sec { gap: 24px; } main.pg-404 .pg-404-links { margin-top: 24px; } }
@media (max-width: 1024px), (pointer: coarse) { main.pg-404 .pg-404-links .pg-link { padding-block: 12px; margin-block: -12px; } }

/* ══════════════════════════════════════════
   CAREERS SYSTEM (jobs, programme): the same sections, re-set in the language.
   - The hero: the warm band, About's hero headline (36 / 48 / 72 px, centred), the line and button under it, the
     strip of work below, every tile 8 px. Nothing rises or fades in.
   - Each section: About's split. The section's name as the section title in the first column; its statement (ink,
     then the muted grey) and its content across the other two. One space above and below.
   - Lists (fees, the four weeks, terms, the roles): hairline lists, names at the item step.
══════════════════════════════════════════ */
main.pg-careers { padding-top: 0; }
main.pg-careers .c-hero { background: var(--pg-warm); padding: calc(var(--pg-clear) + var(--pg-space)) 0 var(--pg-space); overflow: hidden; }
main.pg-careers .c-hero-text { padding-inline: var(--pg-gutter); text-align: center; }
main.pg-careers .c-hero h1 { max-width: 1240px; margin: 0 auto; font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; color: var(--pg-ink); text-wrap: balance; }
@media (min-width: 769px) { main.pg-careers .c-hero h1 { font-size: 48px; } }
@media (min-width: 1280px) { main.pg-careers .c-hero h1 { font-size: 72px; } }
main.pg-careers .c-hero h1 .w, .js main.pg-careers .c-hero h1 .w,
main.pg-careers .c-hero-sub, main.pg-careers .c-hero-cta { opacity: 1; transform: none; animation: none; }
main.pg-careers .c-hero-sub { max-width: 30em; margin: 24px auto 0; font-size: var(--pg-desc); line-height: var(--pg-desc-lh); letter-spacing: 0; color: var(--pg-muted); text-wrap: balance; }
main.pg-careers .c-hero-cta { margin-top: 32px; display: flex; justify-content: center; }
main.pg-careers .c-strip { --h: 240px; --gap: 8px; margin-top: var(--pg-space); overflow: hidden; }
@media (min-width: 769px) { main.pg-careers .c-strip { --h: 320px; --gap: 12px; } }
@media (min-width: 1280px) { main.pg-careers .c-strip { --h: 380px; } }
main.pg-careers .c-card, .js main.pg-careers .c-card { border-radius: var(--pg-r); opacity: 1; transform: none; transition: none; }

/* The ink button (the careers pages' .c-btn), as everywhere */
main.pg-careers .c-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 0; border-radius: var(--pg-r); background: var(--pg-ink); color: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 18px; text-decoration: none; transition: opacity 0.15s ease; }
main.pg-careers .c-btn:hover { opacity: 0.85; }

/* Sections: About's split */
main.pg-careers .c-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; column-gap: 24px; padding: var(--pg-space) var(--pg-gutter); }
main.pg-careers .c-hero + .c-row { padding-top: calc(var(--pg-space) * 2); }
main.pg-careers .c-row:last-child { padding-bottom: calc(var(--pg-space) * 2); }
@media (min-width: 769px) { main.pg-careers .c-row { row-gap: 32px; } }
@media (min-width: 1025px) {
  main.pg-careers .c-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: baseline; }   /* the title on the statement's first baseline */
  main.pg-careers .c-row > .c-label { grid-column: 1; }
  main.pg-careers .c-row > div { grid-column: 2 / span 2; min-width: 0; }
}
main.pg-careers .c-label { padding: 0; font-size: var(--pg-title); font-weight: 400; line-height: 1.05; letter-spacing: var(--pg-title-track); color: var(--pg-ink); text-wrap: balance; }
main.pg-careers .c-lead { max-width: 22em; font-size: var(--pg-statement); font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; color: var(--pg-muted); text-wrap: balance; }
main.pg-careers .c-lead strong { font-weight: 400; color: var(--pg-ink); }
main.pg-careers .c-intro .c-lead + .c-lead { margin-top: 24px; }
/* the content takes both columns of the split (the lists and the form to the grid's right edge) */
main.pg-careers .c-row > div { max-width: none; }

/* ── Jobs: the roles as a hairline list; a role opens as the FAQ rows do (300 ms open, 240 shut, the template's
   curve, the text easing in opacity only, the thin plus turning to a cross) ── */
main.pg-careers .c-roles .c-lead { margin-bottom: 48px; }
@media (min-width: 1025px) { main.pg-careers .c-roles .c-lead { margin-bottom: 56px; } }
main.pg-careers .role { border-top: 1px solid var(--pg-line); scroll-margin-top: calc(var(--pg-clear) + 24px); }
main.pg-careers .role:last-of-type { border-bottom: 1px solid var(--pg-line); }
main.pg-careers .role-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; column-gap: 24px; width: 100%; padding: 20px 0; background: none; border: 0; border-radius: 0; text-align: left; color: inherit; cursor: pointer; }
main.pg-careers .role-title, main.pg-careers .role-head:hover .role-title, main.pg-careers .role.open .role-title { font-size: var(--pg-item); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--pg-ink); }
main.pg-careers .role-meta { font-size: 15px; line-height: 20px; color: var(--pg-muted); text-align: right; }
main.pg-careers .role-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-block: -7px; font-size: 32px; font-weight: 200; line-height: 1; color: var(--pg-ink); transition: transform 0.3s var(--pg-ease); }
main.pg-careers .role.open .role-icon { transform: rotate(45deg); }
@media (hover: hover) { main.pg-careers .role:not(.open) .role-head:hover .role-icon { transform: rotate(90deg); } }
main.pg-careers .role-head:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 3px; border-radius: var(--pg-r); }
.js main.pg-careers .role-body { transition: grid-template-rows 0.24s var(--pg-ease); }
.js main.pg-careers .role.open .role-body { transition-duration: 0.3s; }
.js main.pg-careers .role-body-inner { transition: visibility 0s linear 0.24s; }
.js main.pg-careers .role.open .role-body-inner { transition-delay: 0s; }
main.pg-careers .role-body-grid, .js main.pg-careers .role:not(.open) .role-body-grid, .js main.pg-careers .role.open .role-body-grid { transform: none; padding: 8px 0 48px; transition: opacity 0.24s var(--pg-ease); transition-delay: 0s; }
.js main.pg-careers .role:not(.open) .role-body-grid { opacity: 0; }
.js main.pg-careers .role.open .role-body-grid { opacity: 1; transition-duration: 0.3s; }
main.pg-careers .role-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 0 0 40px; padding-top: 20px; border-top: 1px solid var(--pg-line); }
@media (min-width: 1025px) { main.pg-careers .role-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
main.pg-careers .role-facts dt { font-size: 13px; line-height: 18px; color: var(--pg-muted); }
main.pg-careers .role-facts dd { margin: 4px 0 0; font-size: 16px; line-height: 23px; color: var(--pg-ink); }
main.pg-careers .role-detail { max-width: 624px; }
main.pg-careers .role-intro, main.pg-careers .role-para, main.pg-careers .role-list li, main.pg-careers .role-howto { font-size: 17px; line-height: 1.6; color: var(--pg-ink); }
main.pg-careers .role-intro:first-child { font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: var(--pg-ink); }
main.pg-careers .role-intro + .role-intro { margin-top: 16px; }
main.pg-careers .role-list-block { margin-top: 40px; }
main.pg-careers .role-list-block h4 { padding-bottom: 12px; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--pg-ink); }
main.pg-careers .role-list li { padding-left: 20px; }
main.pg-careers .role-list li + li { margin-top: 8px; }
main.pg-careers .role-list li::before { left: 2px; top: 0.72em; width: 4px; height: 4px; background: var(--pg-ink); }
main.pg-careers .role-apply-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 40px; }
main.pg-careers .role-mail { font-size: 15px; line-height: 20px; color: var(--pg-muted); }
main.pg-careers .role-mail a { color: var(--pg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #09090B4D; transition: text-decoration-color 0.2s ease; }
main.pg-careers .role-mail a:hover { color: var(--pg-ink); text-decoration-color: currentColor; }
@media (max-width: 768px) {
  main.pg-careers .role-head { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 4px; padding: 18px 0; }
  main.pg-careers .role-meta { grid-column: 1; grid-row: 2; text-align: left; }
  main.pg-careers .role-icon { grid-column: 2; grid-row: 1 / span 2; font-size: 26px; }
  main.pg-careers .role-intro, main.pg-careers .role-para, main.pg-careers .role-list li, main.pg-careers .role-howto { font-size: 16px; }
  main.pg-careers .role-intro:first-child { font-size: 18px; }
  main.pg-careers .role-apply-row { flex-direction: column; align-items: flex-start; }
}
/* The apply block: the address at the statement step, ink, under the in-copy line */
main.pg-careers .c-apply .c-label { padding-top: 0; }
main.pg-careers .c-apply-mail, main.pg-careers .c-apply-mail:hover, main.pg-careers .c-apply-mail:focus-visible {
  display: inline; font-size: var(--pg-statement); line-height: 1.2; letter-spacing: -0.025em; color: var(--pg-ink);
  background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; text-decoration-color: #09090B4D; transition: text-decoration-color 0.2s ease;
  overflow-wrap: anywhere;
}
main.pg-careers .c-apply-mail:hover { text-decoration-color: currentColor; }
main.pg-careers .c-apply-note { margin-top: 24px; max-width: 30em; font-size: var(--pg-desc); line-height: var(--pg-desc-lh); color: var(--pg-muted); text-wrap: pretty; }

/* ── Programme: the fees, the four weeks and the terms as hairline lists, the date field and the form as fields ── */
main.pg-careers .pk-fees { margin: 48px 0 0; border-bottom: 1px solid var(--pg-line); }
main.pg-careers .pk-fees li { column-gap: 24px; padding: 20px 0; border-top: 1px solid var(--pg-line); }
main.pg-careers .pk-fee-name, main.pg-careers .pk-fee-amount { font-size: var(--pg-item); line-height: 1.3; letter-spacing: -0.01em; color: var(--pg-ink); }
main.pg-careers .pk-fee-scope { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--pg-muted); }
main.pg-careers .pk-when { margin-top: 48px; gap: 12px 24px; align-items: flex-end; }
main.pg-careers .pk-when label { width: 280px; max-width: 100%; gap: 8px; }
main.pg-careers .pk-when-label { font-size: 13px; line-height: 18px; color: var(--pg-muted); }
main.pg-careers .pk-when input { -webkit-appearance: none; appearance: none; height: 48px; padding: 0 16px; border: 1px solid var(--pg-field); border-radius: var(--pg-r); background: #FFFFFF; font-size: 16px; line-height: 24px; color: var(--pg-ink); }
main.pg-careers .pk-when input:hover { border-color: var(--pg-field-hover); }
main.pg-careers .pk-when input:focus { border-color: var(--pg-ink); }
/* the picker button is its own tab stop: Chrome's ring there, in ink and solid icon so it reads like the chevron on the contact select */
main.pg-careers .pk-when input::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; border-radius: 4px; outline-color: var(--pg-ink); outline-width: 2px; outline-offset: 3px; }
main.pg-careers .pk-when-out { padding-bottom: 12px; font-size: 16px; line-height: 24px; color: var(--pg-ink); }
main.pg-careers .pk-rows { margin: 32px 0 0; border-bottom: 1px solid var(--pg-line); }
main.pg-careers .pk-terms { margin-top: 0; }
main.pg-careers .pk-rows li { column-gap: 24px; padding: 16px 0; border-top: 1px solid var(--pg-line); font-size: 17px; line-height: 24px; }
main.pg-careers .pk-key, main.pg-careers .pk-date { color: var(--pg-muted); }
main.pg-careers .pk-val { color: var(--pg-ink); }
@media (max-width: 768px) {
  main.pg-careers .pk-when label { width: 100%; }
  main.pg-careers .pk-rows li { padding: 14px 0; font-size: 16px; }
}
main.pg-careers #perkForm { column-gap: 24px; row-gap: 32px; }
main.pg-careers #perkForm .form-label { font-size: 13px; line-height: 18px; color: var(--pg-muted); }
main.pg-careers #perkForm .form-label .required { color: var(--pg-muted); }
main.pg-careers #perkForm .form-input { font-size: 16px; }
main.pg-careers #perkForm .form-submit button { height: 44px; padding: 0 20px; border-radius: var(--pg-r); }
main.pg-careers .perk-check-box { margin-top: 0; border-color: var(--pg-field); }
main.pg-careers .perk-check:hover .perk-check-box { border-color: var(--pg-field-hover); }
main.pg-careers .perk-check input:focus-visible + .perk-check-box { outline: 2px solid var(--pg-ink); outline-offset: 3px; }
main.pg-careers .perk-send-error { font-size: 13px; line-height: 18px; color: var(--pg-error); }
main.pg-careers .perk-calendar:empty::before { color: var(--pg-muted); }
main.pg-careers .perk-calendar-link { color: var(--pg-ink); text-decoration-color: #09090B4D; }
main.pg-careers .pk-claim .perk-right { max-width: 888px; }

/* Programme's headline is two whole lines ("You cover the brand." / "We cover the landing page.", each kept on one
   line by the page): on phones it scales with the screen so the second line fits, as the page had it */
@media (max-width: 768px) {
  main.pg-careers .c-hero h1:has(.ln) { font-size: min(36px, 8.3vw); }
}