/*
* Mirai360 design system: site.css
* Self-hosted, no external requests. Fonts: /assets/fonts/ (README.md there has sources + OFL licences).
* Reference sheet: DevLog/design/reference.html. Consistency rules (one panel language, one h2 size, two
* left edges, 760px tool column, muted eyebrows, one solid button per section): DevLog/design/ui-consistency-2026-10-29.md.
*
* Page head, in this order (build_site.py emits it on every page):
* (inline, BEFORE the stylesheet, so the
* mobile header renders in its JS layout on first paint; CSP at company-service/nginx.conf:18 allows
* 'unsafe-inline'. site.js adds the class again as a fallback.)
*
*
* Type roles: mono (JetBrains Mono) is used ONLY for eyebrows and figures (row numbers, run-log times, code).
* Buttons, captions, labels, status marks, table heads, footer headings and the menu button are Inter.
*
* Contract for the page builder (scripts/build_site.py), class by class:
* Layout .wrap .grid > .span-N / .start-N (12 columns at >=960px; children stack full width below)
* .section .section--alt .section--rule section[data-layout][data-rail]
* .section-head > .eyebrow (columns 1-3) + .section-head__main (columns 4-11)
* .section-body: everything after a section head, on the heading's column (column 4 at
* >=960px; column 1 when the head has no eyebrow: .section-head--flush). ONE LEFT EDGE PER SECTION: in a [data-rail] section the .wrap holds only
* .section-head, .section-body and .proof-note; body, bullets and links never fall back
* to the gutter.
* TWO CONTENT STARTS BELOW THE HERO (>=960px): column 1 (the page edge) and column 4. Split,
* FAQ and the media split hold their heading or photo in columns 1-3 and everything else
* from column 4; statement and phases run from column 1. No section starts on another column.
* Type .display (h1) .h2 .h3 .lead .small .eyebrow .caption .measure .muted .prose
* Inline links are ink with an underline; the accent colour belongs to the one .btn.
* Actions .btn (one solid button per screen: the page's primary in the hero, and .btn.btn--band, the
* closing band's first action, inverse: paper on ink) .link-cta (text link + chevron)
* Header .site-header > .wrap.site-header__inner > .brand (> svg.brand__mark + span.brand__word) +
* a.site-header__cta--m + div.site-header__finder--m + button.nav-toggle
* [data-nav-toggle][aria-controls] + nav.site-nav#id > ul > li > a[aria-current="page"]
* + a.site-header__cta--d + div.site-header__finder--d (the sticky "Find your bottleneck",
* a.btn.btn--header, shown by site.js after the hero's button; see "Sticky header CTA").
* The two .site-header__cta (.link-cta "Get in touch") are the same link
* in its mobile place (before Menu) and its desktop place (after the nav); exactly one is
* displayed, so focus order = visual order at every width. The contact page is home #contact now (E21).
* Every header link goes to a section of the one-scroll home ("/#tools"); on / site.js gives the
* link of the section in view aria-current="true" (the same mark). A jump to one of those sections
* lands its top on the header's bottom edge: html's scroll-padding-top (header + 16px) plus the
* sections' scroll-margin-top (-16px), so the section's own rule tucks under the header's.
* Hero .hero(.hero--aside) > .wrap.grid > .hero__copy (h1, p.lead, .hero__actions > .btn (the page's one
* primary action, on the first screen at 390px) + optional .link-cta; before the actions, optional
* dl.credentials > .credentials__item[data-credential] > dt.eyebrow + dd (the wording, or
* img.credentials__badge for a badge credential that passes the gate)) + .hero__aside(--runlog)
* (> .runlog, or > dl.facts.facts--stack in label style: nothing in the aside competes with the
* h1; vertically centred on the hero at >=960px). Legal pages and essays have no .btn in the
* hero: their one filled button is the closing band's.
* [data-entrance] is emitted on the home page only.
* Layouts the builder picks one per section (data-layout), so pages change pace:
* numbered ol.rows.rows--numbered > li.row > .row__num + .row__title + .row__body (> p.row__link)
* only for a real sequence; at most two numbered lists per page
* pairs ul.rows.rows--pairs (the same rows, no numbers)
* prose .prose.prose--items > p > strong (lead-in) + text (+ p.prose__link)
* split .split-aside > .split-aside__text (eyebrow + h2.split-aside__title; columns 1-3)
* + .split-aside__aside (lead, ul.aside-list > li.aside-list__item, actions; from column 4)
* statement .statement > .eyebrow + h2.statement__text + .lead + ul.notes > li.note > .note__title
* phases ol.phases > li.phases__col > .phases__num + h2.phases__title + .phases__lead + .prose
* POV section.pov > .wrap.pov__pin > .eyebrow + p.pov__text (static; [data-pov] would pin + reveal)
* Method .method (static; [data-method] would draw the line) > svg.method__line--h + svg.method__line--v (each: line.method__track
* + line.method__draw, pathLength="1") + ol.method__steps > li.method__step[style="--i:N"]
* > .method__node + .method__num + .method__title + .method__body
* FAQ .faq__head.span-3 (eyebrow + h2.faq__title) + .faq__body.span-8.start-4 (> p.lead.faq__lead
* + .faq > details.faq__item > summary (> span + .faq__icon) + .faq__a)
* Close .band > .wrap > .band__title + .band__actions (> a.btn.btn--band first, then .link-cta)
* Footer .site-footer > .wrap > .site-footer__grid (.site-footer__col rows: h2 + inline ul) + .site-footer__legal
* (> button.site-footer__consent[data-consent-open], shown only with JS)
* Consent div.consent[data-consent][hidden][tabindex="-1"] > .wrap.consent__inner > .consent__body
* (> p.consent__text (> a to /privacy/ + span.consent__status[data-consent-status], "Current
* choice: ..." when reopened) + fieldset.consent__options > label.consent__option x2 (> input
* [type=checkbox][data-consent-purpose="analytics" | "ads"], unticked by default, + span)) +
* .consent__choices > button.consent__choice x3 ("accepted" Accept all, "declined" Decline all,
* "saved" Save choices: equal weight, same class, 44px targets, hover fill only on hover
* devices) + button.consent__choice[data-consent-more] ("Manage choices"). Two layers: the
* fieldset (id="consent-options") and Save choices start [hidden]; Manage choices reveals them
* and hides itself; reopened from Cookie choices, the banner opens on that second layer. Analytics and Meta advertising (the Pixel) are separate purposes. Fixed to the
* bottom, square, hairline top; html.consent-open reserves its height (--consent-h). Reopened,
* the banner takes focus itself (outline inset). Under 500px of height the header is static
* and the banner scrolls inside at most 50vh (WCAG 1.4.10).
* Artefacts one per page that no other page has (section "layout"), in .section-body:
* report figure.report[id] > .report__head + ol.report__lines > li.report__line(--call: the
* week's scale/fix/stop call, blue square) > .report__n + .report__term + .report__value
* + .report__detail; figcaption.report__note ("Illustration. Not a client system.",
* always). Also inside .prose (/how-we-work/ #weekly-report) and as the hero rail
* (.hero__aside.hero__aside--report > .report + p.hero__aside__link, /insights/).
* timeline ol.timeline > li.timeline__step(.timeline__step--human: a person decides)
* > .timeline__time + .timeline__text > h3.timeline__title + .timeline__who + .timeline__body
* compare table.compare > thead (step, before, after) + tbody > tr > th + td + td.compare__after
* (td[data-label] heads each cell when the table stacks under 720px)
* timeline and compare end in p.caption.artefact__note (the same label). On a sector page the
* artefact also holds dl.artefact-notes > .artefact-notes__item > dt.eyebrow (Decide, Build,
* Run) + dd (+ dd > a.link-cta: Run links to the example weekly report), so the page does
* not repeat Decide / Build / Run as a numbered list.
* Focus after a consent choice focus returns to the opener or the element focused before the banner;
* failing that main#main[tabindex="-1"] (pointer; no ring: a landmark) or the main h1
* (keyboard; site.js sets tabindex="-1", the normal focus ring shows).
* html.consent-open sets scroll-padding-bottom to the banner's height, so focus never hides
* under it (WCAG 2.4.11).
* Extras .facts(.facts--stack) > .fact (any count fills its rows) · ol.entries > li.entry · .split
* · .status--yes/--no · .field · .runlog(.runlog--loop) · ul.link-stack > li > a.link-cta
* · p.caption.proof-note (the Walmart disclaimers the builder adds under proof)
*
* Motion: the headline entrance is CSS-only ([data-entrance], home only, 600ms in all, runs once per
* load, so text is never hidden waiting for JS); every other page is static. The home run log loops
* quietly (site.js adds .runlog--loop; it has a Pause button). Nothing else moves: the builder no longer
* emits [data-pov] or [data-method], so the point of view and the method line render static (site.js keeps
* those modules for the reference sheet). Everything is static under prefers-reduced-motion and without JS.
*/
/* ---------- Fonts (latin subset; unicode-range from Google Fonts' latin block) ---------- */
@font-face {
font-family: "Newsreader Display";
src: url("fonts/newsreader-display-300.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader Display";
src: url("fonts/newsreader-display-300-italic.woff2") format("woff2");
font-weight: 300; font-style: italic; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader Text";
src: url("fonts/newsreader-text-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Variable";
src: url("fonts/inter-var-latin.woff2") format("woff2");
font-weight: 400 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono Web";
src: url("fonts/jetbrainsmono-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Tokens ---------- */
:root,
[data-theme="light"] {
color-scheme: light;
/* colour: warm canvas, near-black ink, one accent (Mirai360 cobalt) */
--canvas: #F6F2EA;
--canvas-alt: #EEE9DE;
--ink: #15161A;
--ink-soft: #3A3934;
--muted: #65625A;
--rule: #D6CFC1;
--rule-strong: #15161A;
--accent: #2461B8;
--accent-hover: #1C4E96;
--on-accent: #FFFFFF;
--band: #15161A;
--on-band: #F6F2EA;
--on-band-muted: #ADA89D;
--band-rule: #3A3A36;
--band-accent: #2E6CC6; /* cobalt lifted so the button clears 3:1 on the ink band */
--band-accent-hover: #3170CB;
--band-on-accent: #FFFFFF;
--band-btn: #F6F2EA; /* the band's filled button: paper on ink */
--band-btn-hover: #FFFFFF;
--band-on-btn: #15161A;
--focus: #2461B8;
--selection: rgba(36, 97, 184, 0.18);
--error: #A8261B;
}
[data-theme="dark"] {
color-scheme: dark;
--canvas: #121311;
--canvas-alt: #1A1B18;
--ink: #ECE8DF;
--ink-soft: #CFCAC0;
--muted: #A29E94;
--rule: #34342F;
--rule-strong: #ECE8DF;
--accent: #8FB3F0;
--accent-hover: #B3CBF5;
--on-accent: #0E1520;
/* dark mode inverts the band: a light block on the dark page, as the ink block is on the light page */
--band: #ECE8DF;
--on-band: #15161A;
--on-band-muted: #57544D;
--band-rule: #ECE8DF;
--band-accent: #2461B8;
--band-accent-hover: #1C4E96;
--band-on-accent: #FFFFFF;
--band-btn: #15161A; /* dark mode: ink on the light band */
--band-btn-hover: #34342F;
--band-on-btn: #ECE8DF;
--focus: #8FB3F0;
--selection: rgba(143, 179, 240, 0.28);
--error: #F2A196;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--canvas: #121311;
--canvas-alt: #1A1B18;
--ink: #ECE8DF;
--ink-soft: #CFCAC0;
--muted: #A29E94;
--rule: #34342F;
--rule-strong: #ECE8DF;
--accent: #8FB3F0;
--accent-hover: #B3CBF5;
--on-accent: #0E1520;
/* dark mode inverts the band: a light block on the dark page, as the ink block is on the light page */
--band: #ECE8DF;
--on-band: #15161A;
--on-band-muted: #57544D;
--band-rule: #ECE8DF;
--band-accent: #2461B8;
--band-accent-hover: #1C4E96;
--band-on-accent: #FFFFFF;
--band-btn: #15161A;
--band-btn-hover: #34342F;
--band-on-btn: #ECE8DF;
--focus: #8FB3F0;
--selection: rgba(143, 179, 240, 0.28);
--error: #F2A196;
}
}
:root {
/* type families */
--font-display: "Newsreader Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-serif: "Newsreader Text", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono Web", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* type scale (fluid between 390px and 1440px) */
--fs-display: clamp(2.75rem, 1.65rem + 4.5vw, 5.5rem); /* 44 -> 88 */
/* 30 -> 44. One section-title size on every page (E8b 2026-10-29: "Free tools" at 54px read as a second
h1 beside the 38px "What we do"); the h1 (44 -> 76) stays the only display-size line on a screen. */
--fs-h2: clamp(1.875rem, 1.4rem + 1.95vw, 2.75rem);
--fs-pov: clamp(1.875rem, 1.2rem + 2.75vw, 3.5rem); /* 30 -> 56 */
--fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); /* 22 -> 28 */
--fs-h4: clamp(1.1875rem, 1.13rem + 0.25vw, 1.375rem); /* 19 -> 22 */
--fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); /* 18 -> 21 */
--fs-body: 1.0625rem; /* 17 */
--fs-small: 0.9375rem; /* 15 */
--fs-eyebrow: 0.75rem; /* 12 */
--fs-caption: 0.8125rem; /* 13 */
--lh-display: 1.04;
--lh-heading: 1.12;
--lh-body: 1.6;
--track-display: -0.022em;
--track-eyebrow: 0.09em;
/* space */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
--s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
/* One vertical rhythm for every section (Shivang 2026-10-29: "the spacing is too much, use good design
practice and consistent across the site"): 48px a side on a phone, 72px at 1440, so two sections sit
96-144px apart. Was clamp(80px, 10vw, 160px): 288px between sections at 1440 on the one-scroll home. */
--section: clamp(48px, 5vw, 72px);
--gutter: clamp(20px, 4.5vw, 64px);
--gap: clamp(16px, 2vw, 32px);
--max: 1344px;
--header-h: 64px;
/* lines, corners, motion */
--hairline: 1px;
--radius: 0px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
/* While the consent banner is open, focus scrolling clears it (WCAG 2.4.11): site.js sets --consent-h */
html.consent-open { scroll-padding-bottom: calc(var(--consent-h, 0px) + 16px); }
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
::selection { background: var(--selection); }
img, video { display: block; max-width: 100%; height: auto; }
svg { display: block; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
/* One inline link style: ink with an underline. The accent belongs to the one primary .btn. */
a {
color: var(--ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--muted);
text-underline-offset: 0.22em;
}
a:hover { color: var(--ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* The one exception: an inline link to the survey (the site's goal) is accent, so it reads apart (E24). */
.prose a[href="/tools/bottleneck-finder/"],
.prose a[href="/tools/bottleneck-finder/"]:hover { color: var(--accent); font-weight: 500; text-decoration-color: currentColor; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 0;
}
:focus:not(:focus-visible) { outline: none; }
/* main[tabindex="-1"] takes focus from the skip link and after a first-visit consent choice; it is a
landmark, not a control, so it shows no ring (the next Tab lands on its first control) */
main[tabindex="-1"]:focus { outline: none; }
hr { border: 0; border-top: var(--hairline) solid var(--rule); margin: 0; }
.skip-link {
position: absolute;
left: var(--gutter);
top: -100px;
z-index: 100;
padding: var(--s-3) var(--s-4);
background: var(--ink);
color: var(--canvas);
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-small);
text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: var(--canvas); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------- Layout ---------- */
.wrap {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: var(--s-6);
}
.grid > * { grid-column: 1 / -1; }
@media (min-width: 960px) {
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; }
.span-10 { grid-column-end: span 10; }
.span-12 { grid-column-end: span 12; }
.grid > [class*="span-"] { grid-column-start: auto; }
.grid > .start-2 { grid-column-start: 2; }
.grid > .start-3 { grid-column-start: 3; }
.grid > .start-4 { grid-column-start: 4; }
.grid > .start-5 { grid-column-start: 5; }
.grid > .start-6 { grid-column-start: 6; }
.grid > .start-7 { grid-column-start: 7; }
.grid > .start-8 { grid-column-start: 8; }
.grid > .start-9 { grid-column-start: 9; }
}
.section { padding-block: var(--section); }
.section--alt { background: var(--canvas-alt); }
.section--rule { border-top: var(--hairline) solid var(--rule); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section-head {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: var(--s-4);
margin-bottom: clamp(32px, 4vw, 48px); /* heading block to body: 32 -> 48, the same at every section (E8b) */
}
.section-head > * { grid-column: 1 / -1; }
.section-head__main > * + * { margin-top: var(--s-5); }
@media (min-width: 960px) {
.section-head > .eyebrow { grid-column: 1 / span 3; padding-top: 0.9em; }
.section-head__main { grid-column: 4 / span 8; }
}
/* Everything after a section head sits on the heading's column: one left edge per section */
.section-body > * + * { margin-top: var(--s-6); }
.proof-note { margin-top: var(--s-6); max-width: 62ch; }
@media (min-width: 960px) {
.section-body,
[data-rail] > .wrap > .proof-note,
[data-layout="split"] > .wrap > .proof-note,
[data-layout="media"] > .wrap > .proof-note,
[data-layout="people"] > .wrap > .proof-note { margin-left: calc((100% + var(--gap)) / 4); }
[data-layout="faq"] > .wrap > .proof-note { grid-column: 4 / span 8; }
/* A section without an eyebrow starts on column 1, the hero's edge, instead of beside an empty label column */
.section-head--flush > .section-head__main { grid-column: 1 / span 8; }
.wrap:has(> .section-head--flush) > .section-body,
.wrap:has(> .section-head--flush) > .proof-note,
.wrap:not(:has(> .section-head)) > .section-body { margin-left: 0; } /* no head at all: blog list, essay text */
}
.stack > * + * { margin-top: var(--s-5); }
.measure { max-width: 62ch; }
/* ---------- Type ---------- */
.display, h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--track-display);
text-wrap: balance;
}
.h2, h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: -0.018em;
text-wrap: balance;
}
.h3, h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-h3);
line-height: 1.22;
letter-spacing: -0.01em;
}
.h4, h4 {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-h4);
line-height: 1.3;
}
.display em, .h2 em, h1 em, h2 em, .pov__text em, .band__title em { font-style: italic; }
.lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--ink-soft);
max-width: 38em;
text-wrap: pretty;
}
.small { font-size: var(--fs-small); line-height: 1.55; }
.muted { color: var(--muted); }
.eyebrow {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
line-height: 1.4;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--muted);
}
.caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--muted);
}
/* ---------- Actions ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75em;
min-height: 48px;
padding: 14px 24px;
background: var(--accent);
color: var(--on-accent);
border: 0;
border-radius: var(--radius);
font-family: var(--font-sans);
font-weight: 500;
font-size: 1rem; /* 16px, sentence case: the loudest action on its screen */
line-height: 1.2;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
transition: background-color 160ms ease;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
/* The closing band's filled button: inverse (paper on ink; ink on the light band in dark mode) */
.btn--band, .band .btn--band { background: var(--band-btn); color: var(--band-on-btn); }
.btn--band:hover, .band .btn--band:hover { background: var(--band-btn-hover); color: var(--band-on-btn); }
/* The hero's primary (E18: "i want the CTA button to stand out"): one size step up (56px, body-size text,
wider), and the site's chevron, which moves on hover as .link-cta's does. Still the one solid button. */
.btn--hero { min-height: 56px; padding: var(--s-4) var(--s-6); font-size: var(--fs-body); }
.btn--hero::after, .btn--header::after {
content: "";
flex-shrink: 0;
width: 0.42em;
height: 0.42em;
margin-left: -0.25em;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
.btn--hero::after, .btn--header::after { transition: transform 180ms var(--ease-out); }
.btn--hero:hover::after, .btn--header:hover::after { transform: translateX(3px) rotate(45deg); }
}
/* inline-block, not inline-flex: when a long label wraps at 390px the chevron stays inline after the
last word instead of being pinned to the far edge of the box (design review round 2) */
.link-cta {
display: inline-block;
min-height: 44px;
padding-block: 10px;
line-height: 1.4;
color: var(--ink);
font-weight: 500;
font-size: var(--fs-body);
text-decoration-line: none;
text-underline-offset: 0.28em;
text-decoration-thickness: 1px;
}
.link-cta::after {
content: "";
display: inline-block;
width: 0.42em;
height: 0.42em;
margin-left: 0.5em;
vertical-align: 0.12em;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 180ms var(--ease-out);
}
.link-cta:hover { color: var(--accent); text-decoration-line: underline; }
.link-cta:hover::after { transform: translateX(3px) rotate(45deg); }
.link-cta--small { font-size: var(--fs-small); min-height: 44px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
/* ---------- Header and nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--canvas);
border-bottom: var(--hairline) solid var(--rule);
}
.site-header__inner {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
column-gap: var(--s-6);
min-height: var(--header-h);
}
.brand {
font-family: var(--font-serif);
font-size: 1.375rem;
line-height: 1;
letter-spacing: -0.01em;
color: var(--ink);
text-decoration: none;
padding-block: var(--s-3);
display: inline-flex;
align-items: baseline;
gap: var(--s-2);
}
.brand:hover { color: var(--ink); }
/* The brand mark (B17): the geometric M, in the one accent, sized to the wordmark's cap height (0.7em) and
sat on its baseline, so it reads as part of the word. currentColor in the SVG; --accent follows dark mode. */
.brand__mark { flex-shrink: 0; width: 1.2em; height: 0.7em; color: var(--accent); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.site-nav a {
display: inline-block;
padding-block: var(--s-3);
color: var(--ink-soft);
font-size: var(--fs-small);
text-decoration: none;
}
.site-nav a:hover { color: var(--ink); text-decoration-line: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
/* One-scroll home (E3): site.js marks the item of the section in view with aria-current="true", same mark */
.site-nav a[aria-current="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
.site-header__cta { font-size: var(--fs-small); white-space: nowrap; }
/* The CTA when its section is the one in view (home #contact): same active mark as the nav, no chevron */
.site-header__cta[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
.site-header__cta[aria-current]::after { display: none; }
.site-header__cta[aria-current]:hover { text-decoration-line: none; }
/* On home the mark comes and goes with the scroll: hold the chevron's width (margin 0.5em + 0.42em box) so the
nav beside it does not shift */
.site-header__cta[aria-current="true"] { margin-right: 0.92em; }
/* The one-scroll home's sections (header links "/#"): the jump clears the sticky header exactly; with the
html scroll-padding-top above (header + 16px) the section top lands on the header's bottom edge, and the
section's padding keeps its heading well below. No JS needed. */
main > section:is(#what-we-do, #tools, #blog, #people, #contact) { scroll-margin-top: calc(-1 * var(--s-4)); }
/* A control in the sticky header is always on screen, but Chrome counts it as hidden under html's
scroll-padding-top and scrolled the page up on Tab (1200px to 742px at 1440, every header link; found with
the sticky CTA, E18). The negative margin takes that padding back for the header's own controls only. */
.site-header a, .site-header button { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
.nav-toggle {
display: none;
align-items: center;
min-height: 44px;
padding: 0 var(--s-3);
margin-right: calc(var(--s-3) * -1); /* keeps the 2px+3px focus ring inside the viewport */
background: transparent;
color: var(--ink);
border: 0;
border-radius: 0;
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-small);
cursor: pointer;
}
/* The header carries "Get in touch" twice, once where each layout shows it; exactly one is displayed,
so the DOM order (and the focus order) is the visual order at every width (WCAG 2.4.3, 1.3.2). */
@media (min-width: 960px) {
.site-header__inner { flex-wrap: nowrap; }
.site-nav { margin-left: auto; }
.site-header__cta--m { display: none; }
}
@media (max-width: 959px) {
/* the contact action stays on the first screen: brand | Get in touch | Menu */
.site-header__inner { column-gap: var(--s-5); }
.site-header__cta--d { display: none; }
.site-header__cta--m { margin-left: auto; }
/* no JS: nav wraps as a row of links under the brand */
.site-nav { flex-basis: 100%; padding-bottom: var(--s-2); }
html.js .nav-toggle { display: inline-flex; }
html.js .site-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: var(--s-2) var(--gutter) var(--s-6);
background: var(--canvas);
border-bottom: var(--hairline) solid var(--rule);
}
html.js.nav-open .site-nav { display: block; }
html.js .site-nav ul { flex-direction: column; }
html.js .site-nav li { border-bottom: var(--hairline) solid var(--rule); }
html.js .site-nav a {
display: block;
padding-block: var(--s-4);
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--ink);
}
html.js .site-nav a[aria-current] { box-shadow: none; color: var(--accent); }
}
@media (max-width: 359px) {
.site-header__inner { column-gap: var(--s-4); }
.site-header__cta::after { display: none; }
}
/* Sticky header CTA (E18). div.site-header__finder[data-header-finder] > span.site-header__finder-clip >
a.btn.btn--header, twice like Get in touch: --m before Menu (phones), --d after Get in touch (>=960px).
site.js sets .site-header[data-finder="on"] once the hero's button has scrolled under the header (the
first screen on pages without one) and neither the hero's button nor the survey form is on screen; the
hidden copy is inert and aria-hidden. Without JS it is never shown. It stays over the contact block
(Shivang 2026-10-29, E23: "keep the CTA in top right even when you are in Get In Touch section"), and it
is never on /tools/bottleneck-finder/. */
.site-header__finder { display: none; }
.btn--header {
min-height: 40px;
padding: var(--s-2) var(--s-4);
font-size: var(--fs-small);
white-space: nowrap;
}
/* The ring sits inside the button (on-accent on accent): the desktop slot clips while it slides open, and
the focus colour is the accent itself, so an outer ring would vanish against the button's own edge */
.btn--header:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -5px; }
/* overflow: clip, not hidden: a hidden-overflow box is a scroll container, and focusing the button inside it
made Chrome scroll the page back up (700px to 399px at 1440) and bring the hero's button back on screen */
.site-header__finder-clip { display: block; min-width: 0; overflow: hidden; overflow: clip; }
@media (min-width: 960px) {
/* Closed, the slot is zero wide and its negative margin takes back the header's 32px column gap, so Get
in touch stays on the right edge; open, the slot grows to the button and the nav moves left with it. */
html.js .site-header__finder--d {
display: grid;
grid-template-columns: 0fr;
margin-left: calc(-1 * var(--s-6));
opacity: 0;
visibility: hidden;
}
html.js .site-header[data-finder="on"] .site-header__finder--d {
grid-template-columns: 1fr;
margin-left: 0;
opacity: 1;
visibility: visible;
}
}
@media (max-width: 959px) {
/* Phones: the button takes Get in touch's place beside Menu (both do not fit at 390px), with no chevron
and 12px sides, so brand | Take the quiz | Menu stays on one 64px line (a wrap would change the
header's height while scrolling and make the page jump) */
html.js .site-header[data-finder="on"] .site-header__cta--m { display: none; }
html.js .site-header[data-finder="on"] .site-header__finder--m { display: block; margin-left: auto; }
.btn--header { padding-inline: var(--s-3); }
.btn--header::after { display: none; }
}
@media (max-width: 389px) {
/* With the brand mark (B17) the brand is 34px wider: 16px gaps keep brand | Get in touch | Menu, and
brand | Take the quiz | Menu, on one line down to 340px */
.site-header__inner { column-gap: var(--s-4); }
.btn--header { padding-inline: var(--s-2); }
}
@media (max-width: 339px) {
/* 320px: no room for the mark beside Get in touch and Menu; the wordmark alone (the footer keeps it) */
.site-header .brand__mark { display: none; }
}
@media (max-width: 359px) {
/* Under 360px there is no room for a button beside Menu: Get in touch stays */
html.js .site-header[data-finder="on"] .site-header__cta--m { display: inline-block; }
html.js .site-header[data-finder="on"] .site-header__finder--m { display: none; }
}
@keyframes mirai-finder-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
html.js .site-header__finder--d {
transition: grid-template-columns 280ms var(--ease-out), margin-left 280ms var(--ease-out),
opacity 200ms ease, visibility 0s linear 280ms;
}
html.js .site-header[data-finder="on"] .site-header__finder--d {
transition: grid-template-columns 280ms var(--ease-out), margin-left 280ms var(--ease-out),
opacity 200ms ease 80ms, visibility 0s;
}
html.js .site-header[data-finder="on"] .site-header__finder--m { animation: mirai-finder-in 200ms var(--ease-out) both; }
}
/* ---------- Hero (split) ---------- */
.hero { padding-block: clamp(32px, 6vw, 88px) var(--section); }
.hero__copy > * + * { margin-top: var(--s-5); }
.hero__copy > .eyebrow + * { margin-top: var(--s-4); }
.hero__copy .display { max-width: 15ch; }
.hero__actions { margin-top: var(--s-6) !important; }
.hero__aside { margin-top: var(--s-7); }
/* The aside supports the h1, it never competes with it: body-size text, top-aligned with the headline */
.hero__aside .facts--stack dd { font-size: var(--fs-body); color: var(--ink); }
/* Credential row (E25, Shivang 2026-10-29: "highlight the fact we are claude partner network"): under the
lead, above the button. A hairline as wide as its content, then each credential as a muted mono label
8px over its wording in body type (rule 7). Words only for text credentials; a badge is the programme's
own image, shown only when its credential passes the gate (scripts/check_source.py credential_problems). */
.credentials { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); width: fit-content; max-width: 100%;
margin-bottom: 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.credentials__item { display: grid; gap: var(--s-2); }
.credentials dd { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--ink); }
.credentials__badge { display: block; height: 32px; width: auto; }
@media (max-width: 959px) {
/* 390px: the primary action stays on the first screen, above the consent banner */
.hero__copy .display { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 2.75rem); max-width: none; }
.hero__copy > * + * { margin-top: var(--s-3); }
.hero__copy .lead { font-size: var(--fs-body); }
.hero__actions { margin-top: var(--s-4) !important; }
}
@media (min-width: 960px) {
/* 1440x900: the primary action stays above the fold and the consent banner */
.hero { padding-top: clamp(48px, 5.5vw, 88px); }
.hero__copy { grid-column: 1 / span 8; }
.hero__copy .display { font-size: clamp(2.75rem, 1.2rem + 3.9vw, 4.75rem); max-width: 17ch; }
.hero--aside .hero__copy { grid-column: 1 / span 7; }
/* The rail sits in the middle of the hero's height, so no tall empty column hangs under it
(design review round 2: ~470px under the home run log at 1440) */
.hero__aside { grid-column: 9 / span 4; margin-top: 0; align-self: center; }
.hero__actions { margin-top: var(--s-6) !important; }
}
/* Headline entrance: home only, CSS-only, once per load, 600ms in all; nothing waits on JS */
@keyframes mirai-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
[data-entrance] { animation: mirai-rise 480ms var(--ease-out) both; }
[data-entrance="2"] { animation-delay: 60ms; }
[data-entrance="3"] { animation-delay: 120ms; }
}
/* Run log: an illustrative record of one shift (plan: hero visual). Set as a document, not a terminal:
entries in Inter, only the times in mono. The hero aside can hold .facts.facts--stack instead. */
.runlog {
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1.45;
border-top: var(--hairline) solid var(--rule-strong);
}
.runlog__head {
display: flex;
justify-content: space-between;
gap: var(--s-4);
padding-block: var(--s-3);
border-bottom: var(--hairline) solid var(--rule);
font-weight: 500;
font-size: var(--fs-caption);
color: var(--ink);
}
.runlog ol { list-style: none; margin: 0; padding: 0; }
.runlog li {
display: grid;
grid-template-columns: 6ch minmax(0, 1fr);
gap: var(--s-3);
padding-block: var(--s-3);
border-bottom: var(--hairline) solid var(--rule);
color: var(--ink-soft);
}
.runlog time, .runlog .runlog__t {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
padding-top: 0.1em;
color: var(--muted);
}
.runlog__hold { color: var(--ink) !important; }
.runlog__hold span::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-right: 0.6em;
vertical-align: 0.05em;
background: var(--accent);
}
.runlog__note { margin-top: var(--s-3); }
.runlog__meta { display: inline-flex; align-items: center; gap: var(--s-4); }
.runlog__toggle {
min-height: 44px;
margin-block: -10px; /* a 44px target inside the 24px head line */
padding: 0 4px;
background: none;
border: 0;
border-radius: 0;
color: var(--ink);
font: 500 var(--fs-caption)/1.2 var(--font-sans);
text-decoration: underline;
text-decoration-color: var(--muted);
text-underline-offset: 0.22em;
cursor: pointer;
}
.runlog__toggle[hidden] { display: none; }
/* Home: a quiet looping reveal; entries fade in one by one (site.js), the last one holds */
.runlog--loop li { opacity: 0; transition: opacity 420ms var(--ease-out); }
.runlog--loop li.is-shown { opacity: 1; }
/* ---------- Artefacts: the one element a page has that no other page has ---------- */
/* Report: an illustrative one-page document (the weekly report, a redacted sample), set like the run log:
hairlines, Inter text, mono only for the line numbers and the figures. Always captioned
"Illustration. Not a client system." by the builder. */
.report {
max-width: 60rem;
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1.45;
border-top: var(--hairline) solid var(--rule-strong);
}
.prose .report { margin-block: var(--s-7); }
.report__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--s-2) var(--s-4);
padding-block: var(--s-3);
border-bottom: var(--hairline) solid var(--rule);
font-weight: 500;
font-size: var(--fs-caption);
color: var(--ink);
}
.report__meta { display: inline-flex; flex-wrap: wrap; gap: var(--s-4); font-weight: 400; color: var(--muted); }
.report__lines { list-style: none; margin: 0; padding: 0; }
.prose .report__lines { padding-left: 0; } /* beats .prose ol, so the hairlines start on the head's edge */
.prose .report__lines > li { padding-left: 0; }
.prose .report__lines > li::before { content: none; }
.prose .report__lines > li + li { margin-top: 0; }
.report__line {
display: grid;
grid-template-columns: 3ch minmax(0, 1fr) auto;
gap: var(--s-1) var(--s-3);
padding-block: var(--s-3);
border-bottom: var(--hairline) solid var(--rule);
color: var(--ink-soft);
}
.report__n, .report__value {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
padding-top: 0.1em;
}
.report__n { grid-column: 1; color: var(--muted); }
.report__term { grid-column: 2; color: var(--ink); font-weight: 500; }
.report__value { grid-column: 3; color: var(--ink); text-align: right; white-space: nowrap; }
.report__detail { grid-column: 2 / -1; }
.report__note { margin-top: var(--s-3); }
@media (min-width: 720px) {
.report__line { grid-template-columns: 3ch minmax(0, 11rem) minmax(0, 7rem) minmax(0, 1fr); column-gap: var(--s-4); }
.report__value { text-align: left; }
.report__detail { grid-column: 4; }
}
/* The week's call (scale, fix or stop) closes the report: ink text behind the run log's blue square */
.report__line--call { color: var(--ink); }
.report__line--call .report__term::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-right: 0.6em;
vertical-align: 0.05em;
background: var(--accent);
}
.report__line--call .report__value { color: var(--accent); }
/* In the hero rail (/insights/) the report keeps its narrow, three-column line at every width */
.hero__aside--report .report { max-width: none; }
.hero__aside--report .report__line { grid-template-columns: 3ch minmax(0, 1fr) auto; column-gap: var(--s-3); }
.hero__aside--report .report__value { text-align: right; }
.hero__aside--report .report__detail { grid-column: 2 / -1; }
.hero__aside__link { margin-top: var(--s-3); }
/* An artefact's caption ("Illustration. Not a client system.") and the Decide / Build / Run notes that
replace a sector page's numbered "What we do" list: one line each, mono label, on the same column */
.artefact__note { margin-top: var(--s-3); }
.artefact-notes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-5) var(--gap);
margin-top: var(--s-7);
}
.artefact-notes__item { border-top: var(--hairline) solid var(--rule); padding-top: var(--s-4); }
.artefact-notes__item > * + * { margin-top: var(--s-2); }
.artefact-notes__item dd { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.artefact-notes__item dd + dd { margin-top: var(--s-2); }
@media (min-width: 720px) {
.artefact-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* a lone note runs the column's width instead of sitting in a third of it (E8b) */
.artefact-notes__item:only-child { grid-column: 1 / -1; }
.artefact-notes__item:only-child dd { max-width: 62ch; }
}
/* Timeline: one case moving through time; the filled mark is the step a person decides */
.timeline { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.timeline__step {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-2) var(--gap);
padding: var(--s-5) 0 var(--s-5) 28px;
border-bottom: var(--hairline) solid var(--rule);
}
.timeline__step::before {
content: "";
position: absolute;
left: 0;
top: calc(var(--s-5) + 0.3em);
width: 10px;
height: 10px;
border: 1.5px solid var(--ink);
}
.timeline__step--human::before { background: var(--accent); border-color: var(--accent); }
.timeline__time {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
color: var(--muted);
padding-top: 0.15em;
}
.timeline__text > * + * { margin-top: var(--s-2); }
.timeline__title { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; }
.timeline__who { font-size: var(--fs-caption); font-weight: 500; color: var(--ink); }
.timeline__body { color: var(--ink-soft); font-size: var(--fs-small); max-width: 52ch; }
@media (min-width: 720px) {
.timeline__step { grid-template-columns: 9rem minmax(0, 1fr); }
}
/* Compare: before and after, step by step (a table; it stacks under 720px) */
.compare { width: 100%; border-collapse: collapse; border-top: var(--hairline) solid var(--rule-strong); font-size: var(--fs-small); }
.compare th, .compare td {
text-align: left;
vertical-align: top;
padding: var(--s-4) var(--s-5) var(--s-4) 0;
border-bottom: var(--hairline) solid var(--rule);
}
.compare thead th {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--muted);
padding-block: var(--s-3);
}
.compare tbody th { width: 26%; font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); }
.compare td { color: var(--ink-soft); }
.compare td.compare__after { color: var(--ink); }
@media (max-width: 719px) {
.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compare tr { padding-block: var(--s-5); border-bottom: var(--hairline) solid var(--rule); }
.compare tbody th, .compare td { width: auto; padding: 0; border: 0; }
.compare td { margin-top: var(--s-3); }
.compare td::before {
content: attr(data-label);
display: block;
margin-bottom: var(--s-1);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--muted);
}
}
/* ---------- Rows: numbered (a real sequence) and pairs (no numbers) ---------- */
/* Both sit in .section-body, so the hairline and the first text start on the heading's column. */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.row {
display: grid;
grid-template-columns: minmax(0, 1fr);
column-gap: var(--gap);
row-gap: var(--s-3);
padding-block: clamp(24px, 3vw, 36px);
border-bottom: var(--hairline) solid var(--rule);
}
.rows--numbered > .row { grid-template-columns: 2.5rem minmax(0, 1fr); }
.rows--numbered .row__title, .rows--numbered .row__body { grid-column: 2; }
.row__num {
grid-row: 1;
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--track-eyebrow);
color: var(--muted);
padding-top: 0.55em;
}
.row__title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.01em; }
.row__body { color: var(--ink-soft); max-width: 52ch; }
.row__body > * + * { margin-top: var(--s-3); }
.row__link { margin-top: var(--s-4) !important; }
/* A part row (home #what-we-do, E15: what the retired What we do page had) may list options in its text: label over value
(8px, as in every facts list), the row's own hairlines around them and none between them. */
.row__body > .facts { border-top: 0; row-gap: var(--s-4); margin-top: var(--s-5); }
.row__body > .facts > .fact { padding-block: 0; border-bottom: 0; }
.row__body > .facts dd { color: var(--ink-soft); }
@media (min-width: 960px) {
/* Pairs sit on the page's own columns (E8b): the title in columns 1-3, the text from column 4, the
section's second content start. A full-width body has 12 tracks; a body already on column 4 has 9. */
.rows--pairs > .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rows--pairs > .row > .row__title { grid-column: 1 / span 3; }
.rows--pairs > .row > .row__body { grid-column: 4 / -1; }
.wrap:has(> .section-head:not(.section-head--flush)) .rows--pairs > .row { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.rows--numbered > .row { grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 5fr); }
.rows--numbered .row__title { grid-column: 2; }
.rows--numbered .row__body { grid-column: 3; }
.row__body { padding-top: 0.2em; }
}
/* A list of one is not a sequence: no "01" on a lone row */
.rows > .row:only-child .row__num { display: none; }
/* A follow-on link after a block belongs to the whole block, not to its last item */
.method + .actions {
padding-top: var(--s-5);
border-top: var(--hairline) solid var(--rule);
}
/* ---------- Prose items: a list written out, with bold lead-ins ---------- */
.prose--items > p { color: var(--ink-soft); }
.prose--items > p > strong:first-child { color: var(--ink); font-weight: 600; }
.prose--items > p + p { margin-top: var(--s-5); }
.prose--items > .prose__link { margin-top: var(--s-2); }
/* ---------- Split: text on the left, an aside of short items on the right ---------- */
.split-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--gap); }
.split-aside__text > * + * { margin-top: var(--s-5); }
.split-aside__text .actions { margin-top: var(--s-6); }
.aside-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.aside-list__item { padding-block: var(--s-5); border-bottom: var(--hairline) solid var(--rule); }
.aside-list__item > * + * { margin-top: var(--s-2); }
.aside-list__item > p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 52ch; }
.aside-list__title { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; }
.aside-list__link { padding-top: var(--s-1); }
.split-aside__aside > * + * { margin-top: var(--s-6); }
.split-aside__aside > .lead + .aside-list { margin-top: var(--s-6); }
@media (min-width: 960px) {
/* Two content starts below the hero: the heading in columns 1-3, everything else from column 4 */
.split-aside { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.split-aside__text { grid-column: 1 / span 3; }
.split-aside__aside { grid-column: 4 / -1; }
}
/* A heading held in columns 1-3 (split, FAQ) keeps the one h2 size (44px max fits a short title in three
columns); only the line height tightens. Below 960px the split's heading sits 24px over its lead, as in
every .section-head (E8b). */
@media (min-width: 960px) {
.split-aside__title, .faq__title { line-height: 1.15; }
}
@media (max-width: 959px) {
.split-aside { row-gap: var(--s-5); }
}
/* ---------- Statement: one large sentence, notes below ---------- */
.statement > * + * { margin-top: var(--s-5); }
.statement > .eyebrow + * { margin-top: var(--s-5); }
.statement__text {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.125rem, 1.4rem + 3vw, 4.25rem);
line-height: 1.08;
letter-spacing: -0.02em;
max-width: 20ch;
text-wrap: balance;
}
.statement > .lead { max-width: 40em; }
.notes {
list-style: none;
margin: var(--s-8) 0 0 !important;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-6) var(--gap);
}
.note { padding-top: var(--s-4); border-top: var(--hairline) solid var(--rule-strong); }
.note > * + * { margin-top: var(--s-3); }
.note > p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 46ch; }
.note__title { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; }
@media (min-width: 720px) {
.notes { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
/* ---------- Phases: Decide / Build / Run as one block of columns ---------- */
.phases {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-8) var(--gap);
}
.phases__col { padding-top: var(--s-5); border-top: var(--hairline) solid var(--rule-strong); }
.phases__col > * + * { margin-top: var(--s-4); }
.phases__num {
display: block;
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--track-eyebrow);
color: var(--muted);
}
.phases__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); /* 26 -> 36: three columns, never the h1's rival */
line-height: 1.15;
letter-spacing: -0.015em;
max-width: 18ch;
text-wrap: balance;
}
.phases__lead { color: var(--ink); max-width: 36ch; }
.phases__col .prose { font-size: var(--fs-small); color: var(--ink-soft); }
.phases__eyebrow { margin-bottom: var(--s-6); }
@media (min-width: 960px) {
.phases { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
/* ---------- Point of view (pinned, revealed word by word by site.js) ---------- */
.pov { padding-block: var(--section); }
.pov__pin > .eyebrow { margin-bottom: var(--s-6); }
.pov__text {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-pov);
line-height: 1.16;
letter-spacing: -0.018em;
max-width: 24ch;
text-wrap: balance;
}
/* No indent: the sentence starts on the page's left edge, like the hero above it */
.pov--live { height: 150vh; padding-block: 0; } /* pin travel ~0.9 viewport; site.js finishes the reveal by half of it */
.pov--live .pov__pin {
position: sticky;
top: 0;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: var(--header-h);
}
.pov__word { opacity: 0.35; transition: opacity 120ms linear; }
@media (min-width: 960px) { .pov--live { height: 160vh; } }
/* ---------- Method line (SVG draws in once, via site.js) ---------- */
.method { position: relative; }
.method__line { position: absolute; overflow: visible; pointer-events: none; }
.method__line line { fill: none; stroke-linecap: butt; }
.method__track { stroke: var(--rule); stroke-width: 1; }
.method__draw { stroke: var(--accent); stroke-width: 2; }
.method__line--h { display: none; }
.method__line--v { left: 5px; top: 6px; bottom: 0; width: 2px; height: calc(100% - 6px); }
.method__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
row-gap: var(--s-7);
position: relative;
}
.method__step { position: relative; padding-left: 40px; }
.method__step > * + * { margin-top: var(--s-3); }
.method__node {
position: absolute;
left: 0;
top: 0.35em;
width: 12px;
height: 12px;
background: var(--accent);
border: 1.5px solid var(--accent);
}
.method__num { display: block; }
.method__title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.22; }
.method__body { color: var(--ink-soft); font-size: var(--fs-small); max-width: 34ch; }
@media (min-width: 960px) {
.method__line--v { display: none; }
.method__line--h { display: block; left: 0; right: 0; top: 5px; width: 100%; height: 2px; }
.method__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.method__step { padding-left: 0; padding-top: 48px; }
.method__node { top: 0; }
}
.method--live .method__draw {
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1600ms var(--ease-in-out);
}
.method--live .method__node {
background: var(--canvas);
transition: background-color 240ms ease;
transition-delay: calc(var(--i, 0) * 360ms + 120ms);
}
.method--live.is-drawn .method__draw { stroke-dashoffset: 0; }
.method--live.is-drawn .method__node { background: var(--accent); }
/* ---------- FAQ accordion (native ; site.js animates open/close) ---------- */
.faq__head > .eyebrow + * { margin-top: var(--s-4); }
.faq__body > .faq__lead { margin-bottom: var(--s-6); }
.faq { border-top: var(--hairline) solid var(--rule-strong); }
.faq__item { border-bottom: var(--hairline) solid var(--rule); }
.faq__item > summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-5);
padding-block: var(--s-5);
font-family: var(--font-serif);
font-size: var(--fs-h4);
line-height: 1.3;
color: var(--ink);
list-style: none;
cursor: pointer;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ""; }
.faq__item > summary:hover { color: var(--accent); }
.faq__icon {
position: relative;
flex: none;
width: 14px;
height: 14px;
margin-top: 0.38em;
}
.faq__icon::before, .faq__icon::after {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 1.5px;
margin-top: -0.75px;
background: currentColor;
transition: transform 240ms var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding-bottom: var(--s-6); color: var(--ink-soft); max-width: 62ch; }
.faq__a > * + * { margin-top: var(--s-4); }
/* ---------- Closing band ---------- */
.band {
--accent: var(--band-accent);
--accent-hover: var(--band-accent-hover);
--on-accent: var(--band-on-accent);
--selection: rgba(36, 97, 184, 0.22);
background: var(--band);
color: var(--on-band);
padding-block: var(--section);
border-top: var(--hairline) solid var(--band-rule);
}
.band__title {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: -0.018em;
max-width: 20ch;
text-wrap: balance;
}
.band__actions { margin-top: var(--s-7); }
.band .eyebrow, .band .muted, .band .caption { color: var(--on-band-muted); }
.band .eyebrow + .band__title { margin-top: var(--s-5); }
.band a:not(.btn) { color: var(--on-band); }
.band a:not(.btn):hover { color: var(--on-band); }
.band :focus-visible { outline-color: var(--on-band); }
/* ---------- Footer ---------- */
.site-footer {
padding-block: var(--s-7) var(--s-6);
border-top: var(--hairline) solid var(--rule);
font-size: var(--fs-small);
}
/* A flat, compact sitemap (Shivang 2026-10-29, E26): one row per group, the heading then its links in a
line that wraps; no brand block (the header carries it) */
.site-footer__grid { display: grid; gap: var(--s-4); }
.site-footer__col { display: grid; gap: var(--s-1) var(--gap); }
.site-footer__col h2, .site-footer__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-small);
line-height: 1.4;
color: var(--ink);
margin: 0;
padding-block: 6px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer li a {
display: inline-block;
padding-block: 6px;
color: var(--ink-soft);
text-decoration: none;
}
.site-footer li a:hover { color: var(--ink); text-decoration-line: underline; }
.site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline; /* the note and the links share a baseline (the links' 8px padding put them lower) */
gap: var(--s-3) var(--s-6);
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: var(--hairline) solid var(--rule);
font-size: var(--fs-caption);
color: var(--muted);
}
.site-footer__legal a { color: var(--muted); display: inline-block; padding-block: 8px; }
/* The entity line, then the email and postal address in smaller print under it (Shivang 2026-10-29) */
.site-footer__entity { display: flex; flex-direction: column; gap: var(--s-1); }
.site-footer__reach { font-size: var(--fs-eyebrow); overflow-wrap: anywhere; }
.site-footer__legal .site-footer__reach a { padding-block: 0; text-decoration-line: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.site-footer__consent {
display: inline-block;
padding: 8px 0;
background: none;
border: 0;
border-radius: 0;
color: var(--muted);
font: inherit;
text-decoration: underline;
text-underline-offset: 0.22em;
cursor: pointer;
}
.site-footer__consent:hover { color: var(--ink); }
html:not(.js) .site-footer__consent { display: none; }
/* ---------- Consent banner: two optional purposes, each off until chosen ---------- */
/* Analytics and Meta advertising are separate choices (diligence review round 3: one Accept bundled visit
analytics, linking a visit to a named outreach recipient, and Meta ad measurement). Both boxes start
unticked; Accept all, Decline all and Save choices are three equal-weight buttons of one class. */
.consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: var(--canvas);
color: var(--ink);
border-top: var(--hairline) solid var(--rule-strong);
}
.consent[hidden] { display: none; }
/* Large text (WCAG 1.4.4): the second layer can outgrow the screen, so the banner never takes more than
most of the height and scrolls inside (consent review 2026-10-20: 896px tall at 200% on a 844px screen) */
.consent { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; }
/* Reopened from "Cookie choices", the banner itself takes focus (not Accept all) */
.consent:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.consent__status { font-weight: 500; color: var(--ink); }
.consent__status[hidden] { display: none; }
.consent__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3) var(--s-6);
padding-block: var(--s-3);
}
.consent__body { flex: 1 1 32rem; min-width: 0; max-width: 80ch; }
.consent__text { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-soft); }
.consent__options { margin: var(--s-2) 0 0; padding: 0; border: 0; min-width: 0; }
/* Second layer (Manage choices): hidden wins over the desktop grid below */
.consent__options[hidden], .consent__choice[hidden] { display: none !important; }
.consent__option {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: var(--s-2);
align-items: start;
padding-block: 2px;
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--ink-soft);
cursor: pointer;
}
.consent__option + .consent__option { margin-top: var(--s-1); }
.consent__option strong { font-weight: 500; color: var(--ink); }
/* Square boxes, ink when ticked; the 20px box plus its label row clears the 24px target minimum (2.5.8) */
.consent__option input {
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--ink);
border-radius: 0;
cursor: pointer;
}
.consent__choices { display: flex; flex-wrap: wrap; gap: var(--s-3); flex: 0 0 auto; }
.consent__choice {
min-height: 44px;
min-width: 7.5rem;
padding: 8px 18px;
background: transparent;
color: var(--ink);
border: var(--hairline) solid var(--ink);
border-radius: 0;
font: 500 var(--fs-small)/1.2 var(--font-sans);
cursor: pointer;
}
/* Hover fill only where hover is real: on touch screens a tapped button keeps :hover, which made one
choice look filled and favoured when the banner was reopened (design review round 2) */
@media (hover: hover) {
.consent__choice:hover { background: var(--ink); color: var(--canvas); }
}
html.consent-open body { padding-bottom: var(--consent-h, 0px); }
@media (min-width: 960px) {
.consent__inner { padding-block: var(--s-2); flex-wrap: nowrap; }
.consent__body { max-width: none; }
/* Desktop: the two purposes sit side by side, so the banner stays low and the hero's button clear */
.consent__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-6); }
.consent__option + .consent__option { margin-top: 0; }
}
@media (max-width: 599px) {
.consent__choices { flex: 1 1 100%; gap: var(--s-2); }
.consent__choice { flex: 1 1 5rem; min-width: 0; padding: 6px 4px; font-size: var(--fs-caption); }
}
/* Short viewports (WCAG 1.4.10: 320x256 is 1280x1024 at 400% zoom; a phone in landscape is ~390px tall):
the header scrolls away with the page and the banner takes at most half the height and scrolls inside,
so page content is always visible beside it (a11y review round 3: header + banner covered 103%). */
@media (max-height: 500px) {
.site-header { position: static; }
html { scroll-padding-top: 16px; }
.consent { max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; }
.consent__inner { padding-block: var(--s-2); gap: var(--s-2) var(--s-4); }
.consent__text, .consent__option { font-size: 0.75rem; line-height: 1.4; }
.consent__options { margin-top: var(--s-1); }
.consent__choice { padding-block: 4px; }
}
@media (min-width: 960px) {
.site-footer__col { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
.site-footer__col h2 { grid-column: 1 / span 3; }
.site-footer__col ul { grid-column: 4 / -1; }
}
/* ---------- Extras for inner pages ---------- */
/* Record lines: plain figures, never counted up */
.facts {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 var(--gap);
border-top: var(--hairline) solid var(--rule-strong);
}
.fact { padding-block: var(--s-5); border-bottom: var(--hairline) solid var(--rule); }
.fact__value {
display: block;
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.fact__label { display: block; margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-small); max-width: 32ch; }
/* A mono label sits 8px over its value everywhere (facts, contact details, Decide/Build/Run notes) (E8b) */
.fact.stack > dt.eyebrow + dd { margin-top: var(--s-2); }
/* Desktop: three across on a 6-track grid, so no count leaves an empty slot.
1 = full row; 2 = halves; 4 = 2 x 2; 5 = 3 + 2 halves; 7 = 3 + 3 + full. Later rows get a hairline. */
@media (min-width: 960px) {
.facts:not(.facts--stack) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.facts:not(.facts--stack) > .fact { grid-column-end: span 2; border-bottom: 0; }
.facts:not(.facts--stack) > .fact:nth-child(n+4) { border-top: var(--hairline) solid var(--rule); }
.facts:not(.facts--stack) > .fact:last-child:nth-child(3n+2),
.facts:not(.facts--stack) > .fact:nth-last-child(2):nth-child(3n+1) { grid-column-end: span 3; }
.facts:not(.facts--stack) > .fact:last-child:nth-child(3n+1) { grid-column-end: span 6; }
.facts:not(.facts--stack):has(> .fact:nth-child(4):last-child) > .fact { grid-column-end: span 3; border-top: 0; }
.facts:not(.facts--stack):has(> .fact:nth-child(4):last-child) > .fact:nth-child(n+3) { border-top: var(--hairline) solid var(--rule); }
}
/* Labelled facts as columns (a run of facts sections alternates stacked / columns) */
@media (min-width: 720px) {
.facts--cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 0; }
.facts--cols > .fact { border-bottom: 0; border-top: var(--hairline) solid var(--rule-strong); }
}
/* Link stack: a list whose items are each one chevron link (contact: ways to write).
The builder can emit ul.link-stack > li > a.link-cta; site.js also marks such lists inside .prose. */
.link-stack, .prose .link-stack { list-style: none; margin-bottom: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.link-stack > li, .prose .link-stack > li { margin: 0; border-bottom: var(--hairline) solid var(--rule); }
.link-stack > li > a { padding-block: var(--s-3); }
.link-stack > li > a.link-cta { min-height: 44px; }
/* Dated entries (insights) */
.entries { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.entry { border-bottom: var(--hairline) solid var(--rule); }
/* the list's top rule opens it; the next section's rule closes it, so the last row carries no second line */
.entry:last-child { border-bottom: 0; }
.entry > a {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-2) var(--gap);
padding-block: var(--s-5);
color: inherit;
text-decoration: none;
}
.entry__title { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.3; }
/* The title is first in the link (its accessible name starts with it); the date still shows first */
.entry__date { order: -1; }
.entry__sum { color: var(--ink-soft); font-size: var(--fs-small); }
.entry > a:hover .entry__title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* A row that starts something (the free tools): the action reads as the .link-cta text CTA, and the
whole row answers the pointer (Shivang 2026-10-29: "these should look like CTA") */
/* A tool row's action sits where the title would, as a solid CTA in the hero button's style; the
tool's name moves to the small print. Hover shades the row and deepens the button (Shivang 2026-10-29,
E14 rework: "here as marked add CTA"). */
.entry__cta {
display: inline-flex; align-items: center; gap: 0.75em; justify-self: start;
min-height: 48px; padding: 14px 24px; background: var(--accent); color: var(--on-accent);
border-radius: var(--radius); font-family: var(--font-sans); font-weight: 500; font-size: 1rem;
line-height: 1.2; letter-spacing: -0.005em; transition: background-color 160ms ease;
}
.entry__cta::after {
content: ""; flex-shrink: 0; width: 0.42em; height: 0.42em; margin-left: -0.25em;
border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.entry--action > a { transition: background-color 180ms var(--ease-out); }
.entry--action > a:hover, .entry--action > a:focus-visible { background: var(--canvas-alt); }
.entry--action > a:hover .entry__title.entry__cta { color: var(--on-accent); background: var(--accent-hover); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
.entry__cta::after { transition: transform 180ms var(--ease-out); }
.entry--action > a:hover .entry__cta::after { transform: translateX(3px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .entry--action > a, .entry__cta { transition: none; } }
@media (min-width: 960px) {
.entry > a { grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* the title starts on column 4, the same second edge as split, pairs and the rail sections (E8b) */
.entry__date { grid-column: 1 / span 3; grid-row: 1; padding-top: 0.35em; }
.entry__title { grid-column: 4 / span 4; grid-row: 1; }
.entry__sum { grid-column: 8 / span 5; grid-row: 1; padding-top: 0.2em; }
.entry--action > a { padding-inline: var(--s-4); margin-inline: calc(-1 * var(--s-4)); }
}
/* Media + text split (people, a real photo) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--gap); }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; mix-blend-mode: multiply; }
/* Light theme: multiply lays the studio shot's white background onto the warm paper tone, so the
photo is not a cold white rectangle (design review round 2). Dark themes show it as shot. */
[data-theme="dark"] .split__media img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .split__media img { mix-blend-mode: normal; }
}
.split__media figcaption { margin-top: var(--s-3); }
.split__text > * + * { margin-top: var(--s-5); }
@media (min-width: 960px) {
.split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.split__media { grid-column: 1 / span 3; }
.split__text { grid-column: 4 / span 8; }
}
/* Home #people (E9, Shivang 2026-10-29: /people/ folded into the section). A split may carry a note under
the photo (.split__note: the partner line as label facts) and h3 parts after the lead (.split__part: the
bio as prose, the record as figures). Parts sit a step further apart than the lines inside them. */
.split__text > .split__part { margin-top: var(--s-7); }
.split__part > .facts { margin-top: var(--s-5); }
@media (max-width: 959px) {
/* Phone: heading and lead first, as in every other home section (a People jump lands the heading where
the others land), then the photo small with the note beside it, then the parts. The figure holds no
focusable element, so focus order is unchanged. */
.split:has(> .split__media > .split__note) { row-gap: 0; }
.split:has(> .split__media > .split__note) > .split__text { display: contents; }
.split:has(> .split__media > .split__note) > .split__text > :not(.eyebrow, h2, .lead) { order: 1; }
.split__media:has(> .split__note) {
order: 1; margin-top: var(--s-6);
display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 var(--s-5); align-items: end;
}
.split__media:has(> .split__note) > .split__note { margin-top: 0; }
.split__text > .split__part { margin-top: var(--s-6); }
/* The record as 2 x 2 instead of four full-width rows */
.split__part > .facts:not(.facts--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Status marks (trust checklist: "in place" / "not yet") */
.status {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-small);
color: var(--ink);
white-space: nowrap;
}
.status::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; }
.status--yes::before { background: var(--accent); border-color: var(--accent); }
.status--no { color: var(--muted); }
/* Form fields (contact) */
.field { display: grid; gap: var(--s-2); }
.field > label {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.field input, .field textarea, .field select {
width: 100%;
min-height: 48px;
padding: var(--s-3) 0;
font: inherit;
color: var(--ink);
background: transparent;
border: 0;
border-bottom: var(--hairline) solid var(--muted);
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent); }
.field__hint { font-size: var(--fs-caption); color: var(--muted); }
/* Long-form text: trust, privacy, terms, insights */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.22; margin-top: 2.2em; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ol { padding-left: 1.25em; }
/* Bullets hang as en-dashes, so the text keeps the column's left edge */
.prose ul:not(.link-stack) { list-style: none; padding-left: 0; }
.prose ul:not(.link-stack) > li { position: relative; padding-left: 1.35em; }
.prose ul:not(.link-stack) > li::before {
content: "\2013";
content: "\2013" / ""; /* the dash is decoration: empty alt text, so it is not read aloud */
position: absolute; left: 0; color: var(--muted);
}
.prose li + li { margin-top: 0.5em; }
.prose blockquote {
padding-left: var(--s-5);
border-left: 2px solid var(--accent);
font-family: var(--font-serif);
font-size: var(--fs-h4);
line-height: 1.4;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th {
text-align: left;
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-caption);
color: var(--muted);
padding: var(--s-3) var(--s-4) var(--s-3) 0;
border-bottom: var(--hairline) solid var(--rule-strong);
}
.prose td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--hairline) solid var(--rule); vertical-align: top; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; }
.table-scroll { overflow-x: auto; }
/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
}
@media print {
.site-header, .nav-toggle, .skip-link { position: static; }
.site-nav, .band__actions, .consent, .site-footer__consent, .runlog__toggle { display: none; }
.band { background: none; color: #000; border-top: 1px solid #000; }
.pov--live { height: auto; }
.pov--live .pov__pin { position: static; min-height: 0; }
.pov__word, .runlog--loop li { opacity: 1 !important; }
}
/* ---------- Free tools (2026-10-28): section.tool[data-tool], run by /assets/tools.js ----------
The form is plain HTML from the builder; the result is drawn by tools.js. Everything sits on
column 1, the hero's edge, and reads at most about 72 characters wide. */
.tool .wrap > * { max-width: 760px; }
.hero:has(+ .tool) { padding-bottom: var(--s-6); }
.hero + .section.tool { border-top: 0; padding-top: 0; }
/* Index pages (/blog/, /tools/): a title-only hero runs straight into the list, whose own rule
is the only line (Shivang 2026-10-29: "why such big empty space in blog?"). */
.hero:has(+ [data-layout="cards"]) { padding-bottom: var(--s-6); }
.hero + .section[data-layout="cards"] { border-top: 0; padding-top: 0; }
/* An essay's closing line (#end, one sentence) is a sign-off under a hairline, not a full 144px section
(E8b: it read as an empty band with one line in it). */
#essay + #end { padding-block: var(--s-8); }
button.link-cta { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
/* ---------- Form fields (B7, 2026-10-29): one system for every form on the site ----------
Shivang 2026-10-29: "these boxes in forms is not aligned ... make it look professional". The hint sat
between label and box, so a field with a hint had its box lower than its neighbour's, and boxes were
53px tall. Pattern taken from B2B forms on Mobbin (Notion, Webflow, Square, Shopify, HoneyBook; notes
in DevLog/design/form-fields-2026-10-29.md):
.form-grid > .form-row (two fields side by side from 960px, one column below) | .form-field
.form-field > label.tool-form__label, then the .tool-input, then p.tool-form__hint (helper text)
.form-actions > .btn (full width on a phone), p.caption note, p.tool-status
The label is always above, helper text is always BELOW the box, and tools.js fieldError() puts the
.field-error straight under the box, so paired boxes share a top and a bottom edge whatever text
hangs under them. Every single-line box is 48px, the height of .btn, so a box and a button can sit
on one row (.tool-form__row). Rhythm: label 8px box 8px hint/error; 24px between fields. */
.tool-form__label { display: block; font-weight: 500; line-height: 1.4; margin-bottom: var(--s-2); }
.tool-form__hint { margin: var(--s-2) 0 0; color: var(--ink-soft); }
.tool-form__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tool-input {
flex: 1 1 260px;
min-height: 48px;
width: 100%;
padding: 11px 14px; /* 24px line + 22px + 2px hairlines = 48px, the height of .btn */
font: inherit;
font-size: 1rem; /* 16px: no zoom-on-focus on iOS */
line-height: 1.5;
color: var(--ink);
background: var(--canvas);
border: var(--hairline) solid var(--rule-strong);
border-radius: var(--radius);
}
input.tool-input { height: 48px; }
/* a textarea is taller; :where keeps this a default that .contact-form__message and .finder__textarea override */
:where(textarea).tool-input { min-height: 120px; resize: vertical; }
.tool-input::placeholder { color: var(--muted); }
.tool-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool-form__row .tool-input { width: auto; }
.tool-form__note { margin-top: var(--s-3); }
.form-grid { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-5) var(--s-4); align-items: start; }
@media (min-width: 960px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-field { display: flex; flex-direction: column; min-width: 0; }
.form-field > .tool-form__label { margin-bottom: var(--s-2); }
.form-field > .tool-input { flex: none; } /* .tool-input's 260px flex-basis is a width in a row, not a height here */
.form-field > .field-error + .tool-form__hint { margin-top: var(--s-1); }
.form-actions > .caption { margin-top: var(--s-3); }
@media (max-width: 599.98px) { .form-actions > .btn { width: 100%; } }
.field-error { margin-top: var(--s-2); color: var(--error); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
.field-error::before { content: "! "; font-weight: 700; }
.tool-input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
fieldset:has(> .field-error:not([hidden])) .choice { border-color: var(--error); }
.tool-status { margin-top: var(--s-3); min-height: 1.5em; color: var(--ink-soft); }
/* An empty status line takes no room: it added ~38px under every form, so a panel ended lower than it
started (E8b). It still exists for the live region; text or the busy spinner gives it its line back. */
.tool-status:empty { min-height: 0; margin-top: 0; }
.tool.is-busy .tool-status:empty { min-height: 1.5em; margin-top: var(--s-3); }
/* On a phone every form's submit runs full width (the gates already did; the URL check, the survey and the
contact call now match). Hero and band buttons keep their own width. */
@media (max-width: 599.98px) {
.tool-form__row > .btn, .finder__nav > .btn, .contact-col__action > .btn { flex: 1 1 100%; width: 100%; }
}
.tool.is-busy .tool-status::before {
content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.6em; vertical-align: -0.05em;
border: 2px solid var(--rule-strong); border-top-color: var(--accent); border-radius: 50%;
animation: tool-spin 0.9s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tool.is-busy .tool-status::before { animation: none; } }
.tool-noscript { margin-top: var(--s-5); color: var(--ink-soft); }
.tool-result, .finder-result { margin-top: var(--s-7); outline: none; }
.tool-result > * + *, .finder-result > * + * { margin-top: var(--s-6); }
.score { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); }
.score__num { font-family: var(--font-display); font-weight: 300; line-height: 0.9; }
.score__value { font-size: clamp(64px, 9vw, 112px); letter-spacing: -0.03em; }
.score__max { font-size: var(--fs-h3); color: var(--muted); margin-left: 0.1em; }
.score__line { margin-bottom: var(--s-2); }
.score-layers { list-style: none; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.score-layer {
display: grid; grid-template-columns: 1fr; gap: var(--s-2);
padding: var(--s-4) 0; border-bottom: var(--hairline) solid var(--rule);
}
@media (min-width: 720px) { .score-layer { grid-template-columns: 2fr 1.4fr 1.2fr; align-items: center; } }
.score-layer__bar { display: block; height: 6px; background: var(--rule); }
.score-layer__bar > span { display: block; height: 100%; background: var(--accent); }
.score__fix { font-size: var(--fs-lead); }
/* A panel you act in (the two gates, the contact columns) is OPEN: a strong hairline on top, 32px, then
its h3, text and form on the column's own left edge. No box (E8b 2026-10-29: the gates were boxed and
inset 33px while the contact columns were open, two languages for one thing). */
.tool-gate { padding-top: var(--s-6); border-top: var(--hairline) solid var(--rule-strong); }
.tool-gate > * + * { margin-top: var(--s-4); }
.tool-gate > .form-grid, .tool-gate > .form-actions { margin-top: var(--s-5); }
.tool-credit, .tool-next { color: var(--ink-soft); }
/* the AI-readiness report shows its top fixes; this line says how many more are in the emailed PDF (E27) */
.tool-more { margin-top: var(--s-5); }
.tool-more + .tool-next { margin-top: var(--s-3); }
.tool-sent { font-size: var(--fs-lead); outline: none; }
.findings { list-style: none; padding: 0; border-top: var(--hairline) solid var(--rule-strong); }
.finding { padding: var(--s-6) 0; border-bottom: var(--hairline) solid var(--rule); }
.finding__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.finding__name { margin-top: var(--s-3); }
.finding__body { margin-top: var(--s-4); }
.finding__body dt { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); margin-top: var(--s-4); }
.finding__body dd { margin: var(--s-1) 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.tag { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; padding: 2px 8px; border: var(--hairline) solid var(--rule-strong); }
.tag--strong { border-color: var(--ink); color: var(--ink); }
.passed summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.passed ul { margin-top: var(--s-3); padding-left: 1.2em; color: var(--ink-soft); columns: 2 240px; }
/* Bottleneck finder: one scrolling form, every question in order (2026-10-29); the result replaces it. */
.finder[hidden] { display: none !important; }
/* The stepper's top progress bar, kept (2026-10-29): one 4px segment per question, a gap between parts,
accent once answered. It sticks just under the sticky header (64px + its 1px rule) while the form
scrolls; tools.js shows it, so without JS it stays hidden. */
.finder__meta {
position: sticky; top: calc(var(--header-h) + var(--hairline)); z-index: 10;
margin-bottom: var(--s-6); padding-block: var(--s-3); background: var(--canvas);
}
.finder__meta[hidden] { display: none; }
.finder__count { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.finder__bar { display: flex; gap: 3px; margin-top: var(--s-2); }
.finder__seg { flex: 1; height: 4px; border-radius: 0; background: var(--rule); transition: background-color 0.2s var(--ease-out); }
.finder__seg.is-stage-start { margin-left: 7px; }
.finder__seg.is-done { background: var(--accent); }
/* keyboard focus scrolls a field clear of the bar as well as the header (WCAG 2.4.11) */
.finder__q .choice__input, .finder__textarea { scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { .finder__seg { transition: none; } }
@media (max-height: 500px) { .finder__meta { top: 0; } } /* the header scrolls away on short screens */
@media print { .finder__meta { position: static; } }
.finder__q { border: 0; padding: 0; margin: 0 0 var(--s-7); min-width: 0; }
.finder__legend { padding: 0; display: block; }
.finder__legend .eyebrow { display: block; margin-bottom: var(--s-3); } /* muted like every eyebrow; the bar carries the accent */
.finder__text { display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-heading); }
.finder__hint { margin-top: var(--s-3); color: var(--ink-soft); }
.finder__choices { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.choice {
position: relative; display: flex; gap: var(--s-3); align-items: center; cursor: pointer;
min-height: 52px; padding: 10px 14px;
border: var(--hairline) solid var(--rule-strong); border-radius: var(--radius);
transition: border-color 0.15s, background-color 0.15s;
}
.choice:hover { border-color: var(--ink-soft); }
.choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice__key {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
font-family: var(--font-mono); font-size: var(--fs-eyebrow); border: var(--hairline) solid var(--rule-strong); color: var(--ink-soft);
}
.choice:has(.choice__input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--canvas)); }
.choice:has(.choice__input:checked) .choice__key { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.choice:has(.choice__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.finder__textarea { margin-top: var(--s-5); resize: vertical; min-height: 120px; }
.finder__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-top: var(--s-6); border-top: var(--hairline) solid var(--rule); }
.finder__nav .caption { margin: 0; color: var(--ink-soft); }
.finder-result__task { margin: 0; padding-left: var(--s-5); border-left: 2px solid var(--accent); font-size: var(--fs-lead); color: var(--ink); }
.finder-result__grid { display: grid; gap: var(--s-6); border-top: var(--hairline) solid var(--rule-strong); padding-top: var(--s-6); }
.finder-result__grid > section > * + * { margin-top: var(--s-3); }
.gates { list-style: none; padding: 0; margin-top: var(--s-4); }
.gate { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; color: var(--ink-soft); }
.gate__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); transform: translateY(1px); }
.gate.is-open .gate__dot { background: var(--accent); border-color: var(--accent); }
.gate.is-part .gate__dot { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border-color: var(--accent); }
.gate.is-shut { color: var(--ink); font-weight: 500; }
/* The gate in front of the rest of the result (E6, 2026-10-29: "only show results IF they give us the
information with VALIDATED email address"). Under the .tool-gate panel, blurred grey bars in the shape
of the three hidden sections (eyebrow, lines; the last with a heading and three gate rows), fading out.
They hold no text: tools.js builds the real sections only after the server accepts the email. */
.finder-locked {
display: grid; gap: var(--s-6); filter: blur(3px); pointer-events: none; user-select: none;
-webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent);
}
.finder-locked__block { display: grid; gap: var(--s-3); }
.finder-locked__bar { display: block; height: 14px; background: var(--rule); }
.finder-locked__bar.is-eyebrow { width: 10rem; max-width: 50%; height: 10px; background: var(--muted); opacity: 0.5; }
.finder-locked__bar.is-head { width: 40%; height: 26px; }
.finder-locked__bar.is-short { width: 65%; }
.finder-locked__gate { display: block; width: 55%; height: 12px; margin-left: 22px; background: var(--rule); }
@media print { .finder-locked { display: none; } }
.finder-result__follows { color: var(--ink-soft); }
.finder-result__grid > section:focus { outline: none; }
/* ---------- home #contact (2026-10-29; the contact page until E21): two columns, the call and the message (section.tool[data-tool=contact])
Shivang 2026-10-29: "message box looks bad just have to column one for book call and another for message".
No boxes: each column opens on a hairline. Stacked on a phone, the call first (DOM order). */
.tool[data-tool="contact"] .wrap > * { max-width: none; }
.contact-cols { display: grid; gap: var(--s-8); }
.contact-col { border-top: var(--hairline) solid var(--rule-strong); padding-top: var(--s-6); min-width: 0; }
.contact-col > * + * { margin-top: var(--s-4); }
.contact-col > p { max-width: 60ch; }
.contact-col > .contact-col__action { margin-top: var(--s-5); }
.contact-col .caption { color: var(--ink-soft); }
.contact-form { scroll-margin-top: calc(var(--header-h) + var(--s-5)); margin-top: var(--s-5); }
/* One solid button per section: the call is this section's primary, so the message form's Send is the
outline secondary (ink hairline, fills ink on hover), the same weight as the consent choices (E8b). */
.contact-form .form-actions > .btn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 var(--hairline) var(--ink); }
.contact-form .form-actions > .btn:hover { background: var(--ink); color: var(--canvas); }
.contact-form > * + * { margin-top: var(--s-5); }
.contact-form__topic { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form__topic > legend { padding: 0; }
.contact-form__topics { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 0; }
.contact-form__message { resize: vertical; min-height: 160px; }
.contact-form__note { margin-top: var(--s-3); }
.choice--chip { min-height: 44px; padding: 8px 14px; }
/* On the page's 12 columns (E8b): the call in 1-5, the message in 7-12, so the message column starts on a
grid line instead of at 656px, between two of them. */
@media (min-width: 960px) {
.contact-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.contact-col--call { grid-column: 1 / span 5; }
.contact-col--write { grid-column: 7 / span 6; }
}
/* The survey gate's one prompt line, between the verdict and the email field (Shivang 2026-10-29) */
.finder-gate__prompt { font-weight: 500; color: var(--ink); margin: 0 0 var(--s-5); }