/* Black and white consultancy look. The hero keeps its own typeface and colours. */
:root { --font: 'Space Grotesk', system-ui, sans-serif; }
body {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #2e2e2e;
  --muted: #6b6b6b;
  --rule: #d6d6d6;
  --rule-soft: #e9e9e9;
  --accent: #111111;
  --accent-soft: #e9e9e9;
  font-size: 17px;
  line-height: 1.5;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; }

/* Hero: unchanged shapes and serif, on a calmer ground */
.hero { --font: 'Fraunces', 'Times New Roman', serif; --bg: #f2f2ee; --accent: #5b4fc0; --rule: #e2e2dc; --rule-soft: #e2e2dc; }
.hero h1 { font-weight: 400; letter-spacing: -0.02em; }

/* Top bar */
.nav { background: #ffffff; border-bottom: 1px solid var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { font-weight: 700; letter-spacing: -0.03em; }
.brand-em { font-style: normal; color: var(--ink); }
.brand-mark, .brand-mark::before, .brand-mark::after { border-color: var(--ink); }
.brand-mark { background: var(--ink); }
.nav-links { font-weight: 600; font-size: 16.5px; }
.nav-links a.active::after { height: 2px; background: var(--ink); }
.nav-lang { font-weight: 600; }
.nav-lang a.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Text blocks */
.statement p { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; font-weight: 500; color: var(--ink); max-width: 58ch; }
.page-title { font-size: clamp(40px, 6vw, 76px); line-height: 1; max-width: 16ch; }
.block h2 { font-size: clamp(26px, 3vw, 40px); }
.block-lede { font-size: 19px; color: var(--ink-2); }
.block-lede.small { font-size: 16.5px; }
.more-link, .inline-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover, .inline-link:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* Cards: square, thin black line */
.card { border-radius: 0; border: 1px solid var(--ink); }
a.card:hover { transform: none; background: #f4f4f4; border-color: var(--ink); }
.card h3 { font-size: 21px; letter-spacing: -0.02em; }
.card .practice { border-top-color: var(--rule); }
.cover { border-bottom: 1px solid var(--ink); }
.chip { border-radius: 0; font-weight: 600; letter-spacing: 0.06em; }
.chip.plain { background: #ececec; color: var(--ink); }
.chip.outline { border-color: var(--ink); color: var(--ink); }
.chip.s-recruit, .chip.s-plan { background: var(--ink); color: #ffffff; }
.cards.three .card h3 { font-size: 18px; }
.card.service { padding: 24px 24px 26px; }
.service-n { font-style: normal; font-weight: 700; color: var(--ink); }
.service-who { font-weight: 600; }

/* Figures */
.figures-band { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.figures strong { font-style: normal; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-size: 40px; }

/* Collaborators */
.collab { border-top: 1px solid var(--ink); }
.collab li { font-weight: 700; letter-spacing: -0.02em; border-bottom-color: var(--rule); }
.collab li span { font-weight: 400; letter-spacing: 0; }

/* Contact band and footer in black */
.cta { background: var(--ink); border-radius: 0; }
.cta h2 em { color: #ffffff; font-style: normal; text-decoration: underline; text-underline-offset: 6px; }
.cta-button { border-radius: 0; background: #ffffff; color: var(--ink); font-weight: 600; }
.cta-button:hover { background: #e8f34a; }
.cta-button.dark { border-radius: 0; }
.footer { background: var(--ink); color: #ffffff; border-top: 0; }
.footer .brand, .footer a { color: #ffffff; }
.footer .brand-mark { background: #ffffff; border-color: #ffffff; }
.footer .brand-mark::before, .footer .brand-mark::after { border-color: #ffffff; }
.footer .brand-em { color: #ffffff; }
.footer-about, .footer h4, .footer-base { color: #b9b9b9; }
.footer-base { border-top-color: #3a3a3a; }
.footer a:hover { color: #e8f34a; }

/* Posts */
.post h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; }
.prose a { color: var(--ink); }
.by-note { border-left-color: var(--ink); background: #f4f4f4; }
.post-img { border-radius: 0; }
.post-back { color: var(--ink); font-weight: 600; }
.gap { color: #b3361d; outline-color: #b3361d; }

/* Experts directory */
.experts { list-style: none; margin-top: 16px; border-top: 1px solid var(--ink); }
.experts li { display: grid; grid-template-columns: 44px minmax(180px, 300px) 1fr; align-items: center; gap: 8px 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.experts img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1); display: block; }
.experts strong { font-weight: 600; font-size: 17px; }
.experts .chips { gap: 5px; }
@media (max-width: 700px) { .experts li { grid-template-columns: 44px 1fr; } .experts .chips { grid-column: 1 / -1; } }

/* Home: two plain lists instead of card rows */
.home-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.plain-list { list-style: none; margin-top: 12px; border-top: 1px solid var(--ink); }
.plain-list a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.plain-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.plain-list span { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .home-lists { grid-template-columns: 1fr; } }

/* Clients and collaborators: black logos moving in one line */
.logo-line { overflow: hidden; margin-top: 18px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 26px 0; }
.logo-track { list-style: none; display: flex; align-items: center; gap: 72px; width: max-content; animation: logos 36s linear infinite; }
.logo-line:hover .logo-track { animation-play-state: paused; }
.logo-track li { flex: none; }
.logo-track img { height: 46px; width: auto; display: block; filter: brightness(0); opacity: 0.92; }
.logo-track a:hover img { opacity: 1; }
.logo-track .wordmark { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
@keyframes logos { to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; padding: 0 24px; gap: 32px 56px; } .logo-track li[aria-hidden] { display: none; } }

/* Wordmarks with a simple sign in front, for partners without a logo file */
.logo-track .wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.logo-track .mark-dot { font-size: 27px; letter-spacing: -0.02em; }
.logo-track .mark-dot::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); }
.logo-track .mark-rings { font-size: 28px; letter-spacing: 0; }
.logo-track .mark-rings::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px var(--ink), 0 0 0 12px #ffffff, 0 0 0 13.5px var(--ink); margin: 0 14px; }
.logo-track { animation-duration: 48s; }

/* Rings made of signs instead of words */
.process .ring.sym { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; white-space: pre; }

/* Hub statement: small, bold, in the violet of the drawing */
.statement p { font-size: 18.5px; line-height: 1.45; font-weight: 600; color: #5b4fc0; max-width: 62ch; }

/* Smaller logo line */
.logo-line { padding: 16px 0; margin-top: 12px; }
.logo-track { gap: 52px; }
.logo-track img { height: 28px; }
.logo-track .wordmark { font-size: 18px; gap: 8px; }
.logo-track .mark-dot { font-size: 17px; }
.logo-track .mark-dot::before { width: 12px; height: 12px; }
.logo-track .mark-rings { font-size: 17px; }
.logo-track .mark-rings::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px #ffffff, 0 0 0 4.5px var(--ink), 0 0 0 7.5px #ffffff, 0 0 0 8.5px var(--ink); margin: 0 9px; }

/* How-to guides: step picker and step colours on the cards */
.steps-intro { margin: 18px 0 12px; font-size: 16px; color: var(--ink-2); max-width: 70ch; }
#steps.step-cards { margin-bottom: 28px; }
#steps .step-card { border-radius: 0; background: var(--c); color: var(--ct); }
#steps .step-card[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip.step { background: var(--c); color: var(--ct); }
.card.case[hidden] { display: none; }
.cover:has(.stepmap) { background: #f4f3ee; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.cover:has(.stepmap)::before, .cover:has(.stepmap)::after { content: none; }
.stepmap { width: 92%; height: auto; display: block; }
.stepmap text { font-family: 'Fraunces', Georgia, serif; font-size: 27px; }

/* Image credit */
.img-source { font-size: 13px; color: var(--muted); margin: 6px 0 18px; }
.img-source a { text-decoration: underline; }

/* About: what we bring, four rows that open on click */
.services { border-top: 1px solid var(--ink); margin-top: 16px; }
.service-row { border-bottom: 1px solid var(--rule); }
.service-row summary { display: grid; grid-template-columns: 28px 1fr auto 20px; align-items: baseline; gap: 14px; padding: 13px 0; cursor: pointer; list-style: none; }
.service-row summary::-webkit-details-marker { display: none; }
.service-row summary::after { content: "+"; font-size: 20px; line-height: 1; text-align: right; }
.service-row[open] summary::after { content: "-"; }
.service-row .service-n { font-size: 15px; }
.service-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.service-row .service-who { margin: 0; text-align: right; }
.service-more { padding: 0 0 16px 42px; max-width: 70ch; font-size: 16px; line-height: 1.5; display: grid; gap: 8px; }
@media (max-width: 700px) { .service-row summary { grid-template-columns: 24px 1fr 20px; } .service-row .service-who { grid-column: 2; grid-row: 2; text-align: left; } .service-more { padding-left: 38px; } }

/* Guides without a photo: a plain colour bar in the colours of their steps */
.cover.bar { aspect-ratio: auto; height: 12px; display: flex; background: none; }
.cover.bar::before, .cover.bar::after { content: none; }
.cover.bar i { flex: 1; background: var(--c); }

/* Events & funding: table of calls */
.calls-h2 { margin-top: 56px; }
.calls { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.4; }
.calls th { text-align: left; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink); }
.calls td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.calls td a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.calls td span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.calls-date { white-space: nowrap; font-weight: 600; }
.calls-sep th { padding-top: 26px; }
@media (max-width: 760px) { .calls thead { display: none; } .calls tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); } .calls td { display: block; border: 0; padding: 2px 0; } .calls-sep th { display: block; border: 0; } }

/* Funding calls as cards: the deadline is the picture */
.cover.call-cover { aspect-ratio: 16 / 9; background: #d3ccf6; color: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 22px; }
.cover.call-cover::before, .cover.call-cover::after { content: none; }
.cover.call-cover.soon { background: #ececec; }
.call-cover span { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.call-cover strong { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.call-cover em { font-style: normal; font-size: 14px; }
.post-wide { max-width: 980px; margin: 28px auto 0; }
.plain-list span { font-size: 10.5px; letter-spacing: 0.07em; margin-bottom: 2px; }
h2.collab-h2 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* Cards: short summary, small picture credit */
.card.case .card-body > p:not(.practice):not(.card-credit) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.4; }
.card-credit { font-size: 11px; color: var(--muted); margin-top: -4px; }

/* Square illustrations are shown whole on the paper colour of the drawing */
.cover:has(img.fit-contain) { background: #f3f3ee; }
.cover img.fit-contain { object-fit: contain; }
.post-img[src*="/guides/"][src$=".jpg"] { max-height: 420px; object-fit: contain; background: #f3f3ee; }

/* How-to guides: smaller cards, picture, tags and title only */
.cards.compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.cards.compact .card-body { padding: 12px 14px 14px; gap: 7px; }
.cards.compact .card h3 { font-size: 16px; line-height: 1.25; }
.cards.compact .card-body > p:not(.practice):not(.card-credit) { display: none; }
.cards.compact .practice { font-size: 12px; padding-top: 8px; margin-top: auto; }
.cards.compact .chip { font-size: 9.5px; padding: 3px 7px; }
.cards.compact .card-credit { font-size: 10px; }

/* Guides by others: publisher name instead of a picture */
.cards.compact .call-cover { padding: 0 14px; gap: 4px; }
.cards.compact .call-cover span { font-size: 10px; }
.cards.compact .call-cover strong { font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; }
.cards.compact .practice:empty { display: none; }
.prose h3 { font-size: 20px; margin: 30px 0 6px; }
.prose h3 a { text-decoration: underline; text-underline-offset: 4px; }
.prose h3 + p { margin-bottom: 8px; }

/* About: our work as a plain list, no pictures */
.work-list { list-style: none; border-top: 1px solid var(--ink); margin-top: 16px; }
.work-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
a.work-row:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.work-who { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.work-who.alt { font-weight: 500; color: var(--muted); }
.work-main strong { display: block; font-size: 17px; letter-spacing: -0.015em; line-height: 1.3; }
.work-main span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.work-date { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .work-row { grid-template-columns: 1fr; gap: 3px; } }

/* About: our work, one line per project */
.work-row { grid-template-columns: 240px 1fr; gap: 24px; padding: 14px 0; }
.work-name strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.work-name span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.work-main { font-size: 15.5px; line-height: 1.45; color: var(--ink); margin: 0; }
.work-main .work-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 14px; color: var(--ink); }
.work-links a { text-decoration: underline; text-underline-offset: 3px; }