/* Whole-site review clean-up (final.html only). Each rule fixes one inconsistency the audit measured on the page. */
/* ---------- Section heads: one system ----------
Label to heading: 1rem above every H2 (it was 2rem in Problem, Questions and Apply), 1.5rem above the display heading. */
.label-row {
margin-bottom: 1rem;
}
.apply .label-row {
margin-bottom: 1.5rem;
}
/* Every section heading in the same weight (the Problem statement was set lighter than the rest). */
.statement-title {
font-weight: 600;
}
/* Every lead at the lead size (Questions and Apply were 18px against 21px). */
.qs-lead,
.apply-lead {
font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
line-height: 1.55;
}
/* Head to content is 4rem everywhere; Case studies now has the same head as the others. */
.sec-head + .cases {
margin-top: 4rem;
}
/* ---------- Cards: one border colour, square corners ----------
Two cards used the darker #dcdcdc and three had 2px corners; everything else was #e5e5e5 and square, like the buttons
and the fields. */
.pb-grid .pain-card,
.wdb-box,
.wdb-box .wdb-pillar + .wdb-pillar {
border-color: var(--line);
}
.cs,
.flow,
.feed {
border-radius: 0;
}
/* ---------- Type: card titles and card copy on one scale ----------
Card titles 24px (two were 26px), the pillars and the lead case keep their larger feature size; card copy 17px (two
were 16px and 18px). */
.cs-sm .cs-title,
.wwb-name {
font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
}
.pillar p,
.tmc-bio {
font-size: 1.0625rem;
line-height: 1.6;
}
@media (min-width: 640px) {
.pc-body {
padding: 2rem;
}
}
/* ---------- Effects: a hover only where something can be clicked ----------
The problem cards and the pillar tiles changed on hover but do nothing when clicked. The drawings now show in full
colour all the time instead of only under the pointer. */
.pc-art svg {
filter: none;
}
.pain-card:hover .pc-art svg {
transform: none;
}
.pain-card:hover .pain-num {
color: var(--n600);
}
.pb-grid .pain-card:hover {
border-color: var(--line);
box-shadow: none;
}
.pillar:hover .pillar-tile {
border-color: var(--line);
}
/* Questions keeps its side-by-side head (right for a long list), so its lead stacks under the heading: 2rem, the same as
every stacked head on phones. */
.qs-lead {
margin-top: 2rem;
}
/* Jumps land exactly under the nav: the offset is the bar (4rem) plus its 1px bottom line, so a section's top edge meets the
nav's bottom edge with no sliver of the section before it (it was 5rem, which stopped 15px short). */
html {
scroll-padding-top: calc(4rem + 1px);
}
/* ---------- How it works: the terms (Michael, October 8 and 9) ----------
The promises moved here from Who we are. Option C5 of how-options-c.html: two cards side by side, what it asks of you in
white and what you can hold us to in graphite. The promises are rows like the asks beside them: the promise on the left,
what it means on the right, and a line only between rows, so nothing doubles the header's line. On phones the cards stack
and each meaning sits under its promise. */
.terms {
display: grid;
gap: 1.25rem;
margin-top: 4rem;
}
@media (min-width: 1024px) {
.terms {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 2rem;
align-items: start;
}
.terms > :first-child {
grid-column: 1 / span 4;
}
.terms > :last-child {
grid-column: 5 / span 8;
}
}
.terms-box {
border: 1px solid var(--line);
background: var(--white);
}
.terms-dark {
border-color: #2a2d33;
background: #2a2d33;
color: var(--white);
}
.terms-title {
padding: 0.875rem 1.5rem;
border-bottom: 1px solid var(--line);
background: var(--page);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.5rem;
letter-spacing: 0;
color: var(--ink);
}
.terms-dark .terms-title {
border-bottom-color: rgb(255 255 255 / 0.12);
background: #32353c;
color: var(--white);
}
.terms-asks {
margin: 0;
padding: 0 1.5rem;
list-style: none;
}
.terms-asks li {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.9375rem 0;
font-size: 1rem;
line-height: 1.45;
color: var(--ink);
text-wrap: balance;
}
.terms-asks li + li {
border-top: 1px solid var(--line);
}
.terms-asks .icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
color: var(--accent-ink);
}
.terms-pro {
margin: 0;
padding: 0 1.5rem;
list-style: none;
}
.terms-pro li {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
column-gap: 0.5rem;
padding: 1.25rem 0;
}
.terms-pro li + li {
border-top: 1px solid rgb(255 255 255 / 0.14);
}
.terms-pro .pr-no {
padding-top: 0.25rem;
color: var(--accent);
}
.terms-pro h4 {
grid-column: 2;
margin: 0;
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--white);
text-wrap: balance;
}
.terms-pro p {
grid-column: 2;
margin: 0.375rem 0 0;
font-size: 0.9375rem;
line-height: 1.6;
color: rgb(255 255 255 / 0.68);
text-wrap: pretty;
}
@media (min-width: 640px) {
.terms-pro {
padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.terms-pro li {
grid-template-columns: 2.25rem minmax(0, 5fr) minmax(0, 7fr);
column-gap: 1.5rem;
align-items: baseline;
}
.terms-pro .pr-no {
padding-top: 0;
}
.terms-pro p {
grid-column: 3;
margin: 0;
}
}
/* ---------- The problem drawings (Michael's picks, October 8: 1C, 2F, 3B, 4B, 5J) ----------
They keep moving (Michael, October 8), calmly: long cycles with long holds, one move at a time, nothing fast or
flashing, and each card on its own rhythm. A card starts as it rises into view (.is-in) and pauses while it's off
screen (.is-paused, from the small script at the end of the page). With motion turned off, each drawing shows its
still frame. */
.lk-flow {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
html.js .lk-still {
display: none;
}
html.js .lk-flow {
display: inline;
}
.pain-card.is-paused .pc-art * {
animation-play-state: paused !important;
}
/* 1C: a new approval slides in at the top every four seconds. The rows are drawn twice, so after seven the view is
exactly where it began and the loop has no seam. */
.pain-card.is-in .ap-rows {
animation: ap-feed 28s var(--ease) infinite both;
animation-delay: calc(var(--d, 0s) + 0.4s);
}
@keyframes ap-feed {
0%,
11.79% {
transform: translateY(-182px);
}
14.29%,
26.07% {
transform: translateY(-156px);
}
28.57%,
40.36% {
transform: translateY(-130px);
}
42.86%,
54.64% {
transform: translateY(-104px);
}
57.14%,
68.93% {
transform: translateY(-78px);
}
71.43%,
83.21% {
transform: translateY(-52px);
}
85.71%,
97.5% {
transform: translateY(-26px);
}
100% {
transform: none;
}
}
/* 2F: twenty leads every fourteen seconds at a calm pace, a little unevenly spaced. Eight drip out at the quote, eight
where the follow-up should be, and four reach the order: the biggest loss comes first, and the pipe thins after each
leak. */
.pain-card.is-in .lk {
animation: 14s linear infinite;
animation-delay: calc(var(--d, 0s) + 0.4s - var(--o));
}
.pain-card.is-in .lk-a {
animation-name: lk-a;
}
.pain-card.is-in .lk-b {
animation-name: lk-b;
}
.pain-card.is-in .lk-o {
animation-name: lk-o;
}
@keyframes lk-a {
0% {
transform: translate(0, 0);
opacity: 0;
}
2% {
opacity: 1;
}
12.4% {
transform: translate(var(--lx), 0);
opacity: 1;
animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.55);
}
19.5%,
100% {
transform: translate(var(--lx), var(--fy));
opacity: 0;
}
}
@keyframes lk-b {
0% {
transform: translate(0, 0);
opacity: 0;
}
2% {
opacity: 1;
}
24.8% {
transform: translate(var(--lx), 0);
opacity: 1;
animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.55);
}
31.9%,
100% {
transform: translate(var(--lx), var(--fy));
opacity: 0;
}
}
@keyframes lk-o {
0% {
transform: translate(0, 0);
opacity: 0;
}
2% {
opacity: 1;
}
37% {
transform: translate(var(--lx), 0);
opacity: 1;
}
41%,
100% {
transform: translate(var(--lx), 0);
opacity: 0;
}
}
/* 3B: admin drops into the week slot by slot and squeezes selling to a sliver; the week holds, empties, and fills again */
.pain-card.is-in .pc-drop {
animation: pc-drop 11s var(--ease) infinite both;
animation-delay: calc(var(--d, 0s) + 0.4s + var(--dd) * 1.8);
}
@keyframes pc-drop {
0% {
opacity: 0;
transform: translateY(-14px);
}
5%,
78% {
opacity: 1;
transform: none;
}
85%,
100% {
opacity: 0;
transform: none;
}
}
.pc-squeeze {
transform-box: fill-box;
transform-origin: center top;
}
.pain-card.is-in .pc-squeeze {
animation: pc-squeeze 11s var(--ease) infinite both;
animation-delay: calc(var(--d, 0s) + 0.4s);
}
@keyframes pc-squeeze {
0%,
4% {
transform: scaleY(6);
}
30%,
84% {
transform: none;
}
96%,
100% {
transform: scaleY(6);
}
}
.pain-card.is-in .pc-sq-t {
animation: pc-sq-t 11s linear infinite both;
animation-delay: calc(var(--d, 0s) + 0.4s);
}
@keyframes pc-sq-t {
0%,
9% {
opacity: 1;
}
18%,
88% {
opacity: 0;
}
97%,
100% {
opacity: 1;
}
}
/* 4B: the top idea starts across to Building, waits, and goes back */
.pain-card.is-in .pc-lift {
animation: pc-lift 7s var(--ease) infinite both;
animation-delay: calc(var(--d, 0s) + 0.8s);
}
@keyframes pc-lift {
0%,
20% {
transform: none;
}
42%,
56% {
transform: translate(58px, -6px);
}
80%,
100% {
transform: none;
}
}
/* 5J: a highlight checks the two lists line by line, and each mismatch lights as it passes, the way the card says you
check both before you decide. Matching rows stay quiet. */
.pain-card.is-in .pc-scan {
animation: pc-scan 9s var(--ease) infinite both;
animation-delay: calc(var(--d, 0s) + 0.6s);
}
@keyframes pc-scan {
0% {
opacity: 0;
transform: translateY(0);
}
3% {
opacity: 1;
}
7.2% {
transform: translateY(0);
}
10%,
17.2% {
transform: translateY(18px);
}
20%,
27.2% {
transform: translateY(36px);
}
30%,
37.2% {
transform: translateY(54px);
}
40%,
47.2% {
transform: translateY(72px);
}
50%,
57.2% {
transform: translateY(90px);
}
60% {
transform: translateY(108px);
}
67.2% {
transform: translateY(108px);
opacity: 1;
}
72%,
100% {
transform: translateY(108px);
opacity: 0;
}
}
.pain-card.is-in .pc-neq {
animation: pc-neq 9s ease infinite both;
animation-delay: calc(var(--d, 0s) + 0.6s + var(--r) * 0.9s);
}
@keyframes pc-neq {
0% {
opacity: 0.35;
}
3%,
9% {
opacity: 1;
}
14%,
100% {
opacity: 0.35;
}
}
}
/* ---------- Case studies: the lead card (Michael, October 9) ----------
Locked as the Business strategy session's preview C: the title leads on the system and the revenue, and three numbers sit
quietly under it. From 1100px, where the card's own grid starts, the card splits 11 to 13 (Michael's pick, preview D): the
divider a little left of centre, as he liked it before the lock, and the chart 2rem taller, so it's about 11% wider and 13%
taller than at 6 and 6. The title sets in three lines at 1280 and four at 1440. Below 1100 the card stacks, as before. */
.cs-nums {
display: grid;
gap: 0.25rem;
margin-top: 0.5rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--n600);
}
.cs-nums b {
margin-right: 0.5rem;
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.cs-text .cs-nums + p {
margin-top: 0.75rem;
}
@media (min-width: 1100px) {
.cs-lead .cs-body {
grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
}
.cs-lead .cs-text {
grid-column: 1;
}
.cs-lead .cs-evidence {
grid-column: 2;
}
.cs-lead .ld-plot {
height: 17rem;
}
}
/* ---------- Case studies: an odd small card out ----------
October 9 to 14, a small card left alone in the last row spanned the row from 1100px and laid out like a quiet lead.
Michael, October 14: every card but the first stays the same small size, even alone with an empty cell beside it, so the
grid reads as one set and no card looks promoted. That rule is gone; nothing here overrides the two-up grid. */
/* The small cards' links sit on one line across a row, whatever the length of each text: the space a shorter text leaves goes
above its link, and the link keeps its usual gap below the longest one (October 9). */
.cs-sm .cs-text > p:last-of-type {
margin-bottom: auto;
}
/* Team cards (October 9, the site audit): when a role wraps to two lines (Chris's, from 1024 to 1440), centring each name block
on its photo lifted that name about 10px above the others. Top-aligning the blocks to the photos puts the three names on one
line, and with no extra padding the dividers and bios stay level too (.375rem pushed a two-line block 2px past the photo). */
.tmc-top {
align-items: flex-start;
}
/* The headline's weight follows the pointer, so it behaves like an object rather than text to select: the pointer stays an
arrow over it instead of turning into the text cursor (Michael, October 9). The architecture practice map's X mark, which
loads this file too, gets the same. */
#hero-title,
#hero-title .hw,
.ar-x {
cursor: default;
}
/* ---------- Hero and header on phones and tablets (review, October 9) ---------- */
/* The headline breaks at its phrases, set in the markup instead of left to each browser's balancing. Portrait
screens get three lines (Automate the work / you shouldn't / be doing.), landscape and desktop keep two. On a tall
screen, three lines give the headline the same share of the height as two lines do on desktop, so the space
between it and the copy keeps the desktop's proportions. */
.hero-title .br-b {
display: none;
}
/* The menu button: a 44px tap target, and an icon that holds its own beside the logo. */
.menu-btn {
padding: 0.625rem;
margin-right: -0.625rem;
}
.menu-btn .icon {
width: 1.5rem;
height: 1.5rem;
stroke-width: 1.75;
}
@media (max-width: 639.98px) {
/* Sized so "Automate the work" fills the column on every phone, down to 360px. Touch has no pointer to thicken
the words the way desktop does, so the resting weight comes up from light (300) to regular (400). */
.hero-title {
font-size: min(calc((100vw - 2 * var(--gutter)) / 7.6), 3.75rem);
font-weight: 400;
}
.hero-title .hl-line {
display: block;
}
.hero-title .br-b {
display: inline;
}
.hero-lead {
font-size: 1.0625rem;
line-height: 1.65rem;
}
}
@media (min-width: 640px) {
/* Two lines, as on desktop, whichever browser draws them. */
.hero-title .hl-line {
display: block;
white-space: nowrap;
}
}
@media (min-width: 640px) and (orientation: portrait) {
/* Portrait tablets: the phone's three lines, "Automate the work" across about 90% of the width, and the desktop's
top space (15% of the height plus the 24px chosen for it) without the cap that only suits wide screens. */
.hero,
[data-herospace] .hero {
padding-top: calc(15vh + 1.5rem);
}
.hero-title {
font-size: min(calc((100vw - 2 * var(--gutter)) / 8.15), 7.5rem);
}
.hero-title .br-b {
display: inline;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
/* Below about 790px the four links wrap into the button, and up to about 900px they sit closer to the logo and
button than to each other, so the menu button stays until the full nav has room at 1024. */
.nav {
display: none;
}
.menu-btn {
display: inline-grid;
}
.mobile-menu.is-open {
display: block;
}
}
/* ---------- Hero spacing on phones, and landscape phones (second pass, October 9) ---------- */
@media (max-width: 639.98px) {
/* The headline group sat closer to the copy (48px) than to the header (80px), the reverse of desktop. The eyebrow
now sits 56px under the header, the minimum the hero keeps, and the copy 72px under the headline, so the
subheading and button stay exactly where they were. */
.hero,
[data-herospace] .hero {
padding-top: 7.5rem;
}
.hero-row {
padding-top: 4.5rem;
}
}
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
/* Landscape phones: the headline is capped by the height, as desktop's is, so the whole of it is on the first screen. */
.hero,
[data-herospace] .hero {
padding-top: 6.5rem;
}
.hero-title {
font-size: min(calc(1rem + 6.6vw), 16vh);
}
}
/* ---------- The hero, one system (October 9, late) ---------- */
/* The headline is "You already know what the business needs. Get it built." These rules replace the notes on the headline
in the blocks above and hold the hero to one system from the smallest phone to the largest monitor, so nothing jumps as a
window is resized (Michael, October 9: too big at 750 to 760 wide, too small just past 770, where his window turned from
portrait to landscape, and the eyebrow on two lines at 610). Every value below was swept from 320 to 1600px wide at
window heights from 664 to 1180 (tools/halde/hero_sweep.py).
Lines. Narrow screens (phones, portrait screens and windows less than 5:4 wide) run the lines together and break after
"know" and "business": You already know / what the business / needs. Get it built. Wider screens break at the phrases:
You already know / what the business needs. / Get it built. At 5:4 both come out the same size, so the switch only moves
the breaks.
Size. One curve for every width, 22px + 6.85vw (46px on a phone, 64px at 610, 74px at 760, 78px at 820), held to the
column and to 10% of the window's height: on a laptop the three lines then take the height the old two did, and the space
under the headline never drops below the space above the eyebrow. Tall portrait screens grow with their height, to 8% of
it, so a portrait iPad keeps the size it had; that growth eases in from 640px wide, so nothing jumps there. Wide screens
hold the middle line, at the pointer's full weight, inside the column, and no screen goes past that size (106px).
Weight. Smaller type needs more weight to look the same: 450 up to 479px wide (phones), 400 to 639px and on landscape
phones, 350 from 640 up, where the pointer still takes the words to 800 (the script reads the resting weight).
The subheading is 16px on phones and rises with the width to 18px by 800px, at 450. The eyebrow is 500 and sits on one
line wherever it fits. */
/* Lines */
@media (max-width: 639.98px), (max-aspect-ratio: 5/4) {
.hero-title .hl-line {
display: inline;
white-space: normal;
}
.hero-title .br-b {
display: inline;
}
}
/* Size */
@media (max-width: 639.98px) {
.hero-title {
font-size: min(
calc((100vw - 2 * var(--gutter)) / 7.6),
calc(1.375rem + 6.85vw),
10vh
);
}
}
@media (min-width: 640px) {
.hero-title {
font-size: min(
calc(1.375rem + 6.85vw),
calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 11.5),
10vh
);
}
}
@media (min-width: 640px) and (max-aspect-ratio: 5/4) {
.hero-title {
font-size: min(
calc((100vw - 2 * var(--gutter)) / 8.15),
max(calc(1.375rem + 6.85vw), min(8vh, calc(31.85vw - 8.625rem))),
10vh,
calc((var(--wrap) - 2 * var(--gutter)) / 11.5)
);
}
}
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
.hero-title {
font-size: min(
calc(1rem + 6.6vw),
16vh,
calc((100vw - 2 * var(--gutter)) / 10.5)
);
}
}
/* Weight */
.hero-title {
font-weight: 350;
}
@media (max-width: 639.98px),
(max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
.hero-title {
font-weight: 400;
}
}
@media (max-width: 479.98px) {
.hero-title {
font-weight: 450;
}
}
/* Space above the eyebrow. Phones keep 56px under the header up to 430px wide, then it grows with the width to meet the
tablets' at 640. From 640 up one rule serves portrait and landscape: 15% of the height plus 24px, at least 7.5rem; wide
screens cap it at 8.5rem, and the cap lifts as a screen gets taller than it is wide (so it is the same either side of
square), easing in from 640px wide. Landscape phones keep their 6.5rem. */
@media (max-width: 639.98px) and (min-height: 500.02px) {
.hero,
[data-herospace] .hero {
padding-top: clamp(7.5rem, calc(5rem + 10vw), 9rem);
}
}
@media (min-width: 640px) and (min-height: 500.02px) {
.hero,
[data-herospace] .hero {
padding-top: max(
9rem,
min(
calc(
clamp(7.5rem, 15vh, calc(8.5rem + max(0px, (100vh - 100vw) * 0.6))) +
1.5rem
),
calc(50vw - 11rem)
)
);
}
}
/* Space under the headline: never less than the space above the eyebrow. Phones keep 72px up to 430px wide, easing to the
56px minimum every wider screen keeps by 640. */
@media (max-width: 639.98px) {
.hero-row {
padding-top: clamp(3.5rem, calc(4.5rem - (100vw - 430px) * 0.0762), 4.5rem);
}
}
@media (min-width: 640px) {
.hero-row {
padding-top: 3.5rem;
}
}
/* Below 1024 the copy spans the whole row, so the row's 12-column grid only added gaps (11 x 2rem = 352px), which on phones
narrower than about 385px came to more than the column itself: the subheading and terms were laid out wider than the
screen and the hero clipped them (about 3px of text on a 360px phone, 43px on a 320px one). */
@media (max-width: 1023.98px) {
.hero-row {
column-gap: 0;
}
}
/* Subheading and eyebrow */
.hero-lead {
font-size: clamp(1rem, calc(0.855rem + 0.54vw), 1.125rem);
line-height: calc(1em + 0.625rem);
font-weight: 450;
}
.hero-eyebrow {
max-width: none;
font-weight: 500;
}
/* ---------- Footer columns (October 9, the big round) ---------- */
/* The email address can't break, and at 15px it needs about 165px. The footer's equal columns gave it 124 to 159px on phones
up to 390px wide, so it ran into the gutter (and off a 320px screen), and in the four-column footer from 768px it ran into
"Apply for a process review". The Contact column now takes the width of its address; from 640 to 1023 the logo sits on
its own row above three equal columns, and below 360 the columns stack. */
.foot-grid {
grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 359.98px) {
.foot-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.foot-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.foot-brand {
grid-column: 1 / -1;
}
}
@media (min-width: 1024px) {
.foot-grid {
grid-template-columns: 2fr minmax(0, 1fr) auto minmax(0, 1fr);
}
}
/* ---------- Team cards (October 9, the big round) ---------- */
/* The three cards sat side by side from 900px, where each name broke over two lines beside its photo ("Michael Di / Grazia")
and the dividers fell at three heights. They now go side by side from 1024, where the names fit, and stack below that.
Stacked, a bio ran up to 105 characters a line; it now keeps to about 70 (38rem), with the divider still full width. */
@media (min-width: 900px) and (max-width: 1023.98px) {
.tmc-crew {
grid-template-columns: minmax(0, 1fr);
}
}
.tmc-bio {
padding-right: max(0px, calc(100% - 38rem));
}
/* ---------- Small screens (October 9, the big round) ---------- */
/* The closing heading's 48px floor broke "process review." over two lines on phones under about 356px, leaving "review." on
its own; below that width it now scales with the screen (13vw), and from 356px up nothing changes. */
.apply-title {
font-size: clamp(min(3rem, 13vw), calc(1.4rem + 6.4vw), 7rem);
}
/* The Questions heading sits in a four-column side column from 1024px, which is 299px wide at 1024 while its lines need 304
and 319px at 42px, so it broke into four ragged lines (What / people ask / before / they apply.). From 1024 it now scales
with the column (38.8px at 1024) and reaches its 42px by about 1100, so its two lines always hold. */
@media (min-width: 1024px) {
.qs-side .h2 {
font-size: min(2.625rem, calc(4.329vw - 0.346rem));
}
}
/* The small case cards went two-up only from 1100px, with the lead card's split; between 900 and 1099 they stacked at full
width (up to 960px for a short paragraph and a figure), which left them sparse and the section twice as long. They now
go two-up from 900, rows lined up as on desktop; the lead card still stacks until its own split at 1100. */
@media (min-width: 900px) and (max-width: 1099.98px) {
.cases {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-lead {
grid-column: 1 / -1;
}
.cs-sm,
.cs-sm > article,
.cs-sm .cs-body {
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
}
.cs-sm {
grid-row: span 3;
}
.cs-sm > article {
grid-row: 1 / -1;
}
.cs-sm .cs-body {
grid-row: 2 / -1;
}
}
/* With reduced motion the logo ticker stands still as one wrapped row, which broke three and one wherever four logos
don't fit beside the label (about 640 to 1199px). There it's now two by two; from 1200 the four sit in one row. */
@media (prefers-reduced-motion: reduce) and (max-width: 1199.98px) {
.ticker-group {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
justify-items: center;
align-items: center;
}
}
/* A hyphenated word that shouldn't split at its hyphen in a heading ("re-architected" broke as "re- / architected." on
phones, in the university case's title and its card). */
.nw {
white-space: nowrap;
}
/* ---------- What we do, the diagram (October 12) ---------- */
/* Our logo left the middle of the After view (Lucas: apps wired to our logo looked like Zapier or Make). The tile now holds
a plain system icon, drawn like the pillar icons, and the note above it ("Your direction") takes the Before view's person
icon. In the Before view, You is dark grey instead of black (Michael): still the darkest tile in the box, no longer the
After tile's black. */
.hub-mark svg.hub-icon {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.p-you .av {
background: var(--n700);
}
/* ---------- The logo strip, one grey (October 14) ---------- */
/* Michael: every logo one shade of grey, with colour when you hover. The client logos are grey files (#707070) shown at 58%
and multiplied into the page (style.css); Robin Hood's and Ploomo's are colour files, which that grayscale left darker. So
every logo is drawn as a one-colour shape at one strength: black at 32.5% gives the same tone as the grey files did. Robin
Hood's circle has its profile drawn in white inside, which a one-colour shape would fill in, so its green is brought to the
same grey instead (brightness 53 to 112) and the white drops out against the page; at 46px the circle weighs about the
same as the wordmarks. Hovering still shows each file as it is (style.css). Moved from v1.css so both releases have it. */
.lg {
filter: brightness(0);
opacity: 0.325;
}
.lg-rhv {
height: 46px;
filter: grayscale(1) brightness(2.11);
opacity: 0.58;
}
/* Later on October 14 Ploomo's logo came off and Colington Consulting and Prahran Osteopathy went on: two wide wordmarks,
sized by how heavy they look (Colington's thin serif capitals at 24px, Prahran's bold wordmark at 30px, like myoprocess). */
.lg-colington {
height: 24px;
}
.lg-prahran {
height: 30px;
}
/* With reduced motion the still strip lays its six logos out three across from 640px up, with a narrower gap so three fit
beside the label: two even rows at every width (the rule above was written for four, and from 1200px the row wrapped four
and two). Phones keep two across. */
@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
.ticker-group {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
justify-items: center;
align-items: center;
column-gap: 3rem;
}
}
/* ---------- Before the content lock (October 14) ---------- */
/* The problem section's question line takes the grey of the section's lead (Michael), and the form marks its optional fields
(role, phone, where they're starting from) in a lighter grey, so the four required ones read as the form. */
.pq-ask {
color: var(--n700);
}
.apply-form label .opt {
color: var(--n500);
}
/* The booking step after Apply (script.js, "After Apply"; Michael, October 15): the form and its copy give way to
Cal.com's calendar, framed like the form card. The calendar's own greys and square corners are set by script.js. */
.apply-grid.is-leaving {
opacity: 0;
transition: opacity 0.2s ease;
}
.apply-grid[hidden] {
display: none;
}
.apply-book {
max-width: 65rem;
margin-top: 3.5rem;
scroll-margin-top: 2rem;
opacity: 0;
transform: translateY(0.5rem);
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
.apply-book.is-in {
opacity: 1;
transform: none;
}
.book-label {
display: flex;
align-items: center;
gap: 0.625rem;
color: var(--accent-ink);
}
.book-label::before {
content: "";
flex: none;
width: 0.5rem;
height: 0.5rem;
background: var(--accent);
}
.book-title {
margin-top: 1rem;
font-weight: 600;
font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
}
.book-title:focus {
outline: none;
}
.book-sub {
margin-top: 0.875rem;
font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
line-height: 1.55;
color: var(--n700);
text-wrap: pretty;
}
.book-frame {
position: relative;
min-height: 35.75rem;
margin-top: 2.25rem;
}
.book-wait {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 1.25rem;
padding: 1.5rem;
border: 1px solid var(--line);
background: var(--white);
text-align: center;
transition: opacity 0.3s ease;
}
.book-wait [hidden] {
display: none;
}
.book-cal {
opacity: 0;
transition: opacity 0.4s ease;
}
.book-frame.is-ready .book-wait {
opacity: 0;
pointer-events: none;
}
.book-frame.is-ready .book-cal {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.book-frame:not(.is-failed) .book-status {
animation: book-pulse 1.6s ease-in-out infinite;
}
@keyframes book-pulse {
50% {
opacity: 0.35;
}
}
}
@media (prefers-reduced-motion: reduce) {
.apply-grid.is-leaving,
.apply-book,
.book-wait,
.book-cal {
transition: none;
}
.apply-book {
transform: none;
}
}
/* ---------- The logo strip, the designer's pass (October 15) ---------- */
/* Michael: "do a 0.01 design expert pass" on the strip; the spacing, the sizing and the colours weren't right. Every logo is
now the client's own current file (where each came from: assets/logos/SOURCES.md), in two versions built by
tools/halde/logo_strip.py: the same grey for every logo at rest (#a8a8a8, the strip's tone before), with white inside a
logo left open so Robin Hood's profile still reads, and its own colours on hover. The colour fades in over the grey, and
the grey goes once the colour is mostly there, so the logo never dips in strength on the way. Heights are set by how heavy
each logo looks rather than one height for all, so the long wordmarks no longer loom (Colington was 302px wide; now 205)
and the badges don't shrink to dots. These replace the .lg rules above, which no longer match anything. */
.lm {
position: relative;
display: block;
flex: none;
}
.lm img {
display: block;
width: auto;
height: 100%;
}
.lm .lm-on {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.lm .lm-rest {
transition: opacity 0.2s ease;
}
.ticker-group li:hover .lm-on {
opacity: 1;
}
.ticker-group li:hover .lm-rest {
opacity: 0;
transition-delay: 0.15s;
}
.lm-myoprocess {
height: 28px;
}
.lm-alignr {
height: 30px;
}
.lm-rhv {
height: 42px;
}
.lm-colington {
height: 19px;
}
.lm-prahran {
height: 32px;
}
.lm-ajl {
height: 54px;
}
@media (prefers-reduced-motion: reduce) {
.lm img {
transition: none;
}
}
/* ---------- The Apply button on phones (the staging checks, step 6, October 15) ---------- */
/* Below 640px the header kept only the logo and the menu, so Apply was a tap into the menu away wherever the reader was;
the plan asks for it within reach on phones (Boom's pages drop theirs). It now stays in the sticky header at every
width, set compact: 13px with a small arrow from 375px, and below that 12px without the arrow beside a slightly smaller
logo, so it keeps clear of the logo and the menu down to 320px. */
@media (max-width: 639.98px) {
.header-cta {
display: inline-flex;
gap: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
line-height: 1.25rem;
}
.header-cta .icon {
width: 0.75rem;
height: 0.75rem;
}
}
@media (max-width: 374.98px) {
.brand img,
[data-logo] .brand img {
height: 28px;
}
.header-end {
gap: 0.5rem;
}
.header-cta {
padding: 0.4375rem 0.5rem;
font-size: 0.75rem;
}
.header-cta .icon {
display: none;
}
}
/* ---------- The hero at first paint (the SEO review, October 15; Michael: "I do everything you've suggested") ---------- */
/* The hero's words and lead rose in only once script.js had run and the fonts were in, so on a mid-range phone the hero sat
empty for about three seconds after the page painted (its lead is the page's largest text, which Google times), and if
the script failed, the lead and the buttons never appeared. The same rise, with the same timing and stagger, now starts
from the stylesheet as the page first paints; script.js's is-ready no longer has anything to start. Each case page's top
block (its label, headline, lead and facts) does the same instead of waiting for the reveal script. */
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(28px);
}
}
@media (prefers-reduced-motion: no-preference) {
html.js .hero .hw,
html.js .hero .rise,
html.js .cv-head .reveal {
opacity: 1;
transform: none;
transition: none;
animation: rise-in 0.7s var(--ease) var(--d, 0s) backwards;
}
}
/* ---------- Links that say where they go (the SEO review, October 15) ---------- */
/* The case cards' headlines link to their cases, and the founders' names to their LinkedIn profiles: the text as it was,
underlined on hover. */
.cs-title-link,
.tmc-link {
color: inherit;
text-decoration: none;
text-decoration-thickness: 1px;
text-underline-offset: 0.14em;
}
.cs-title-link:hover,
.tmc-link:hover {
text-decoration-line: underline;
text-decoration-color: var(--n300);
}
.tmc-link:hover {
text-decoration-color: currentColor;
}
/* More case studies, at the foot of each case page: the other cases as the home page's small cards (the bar with the case
number and department, the headline, the link), two across from tablets up. */
.cs-more {
padding-block: var(--sec);
border-bottom: 1px solid var(--line);
}
.cs-more-label {
margin: 0;
}
.cs-more-list {
display: grid;
gap: 1.5rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.cs-more-list > li {
display: flex;
}
@media (min-width: 768px) {
.cs-more-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.cs-more-item {
display: flex;
flex: 1;
flex-direction: column;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
transition: border-color 0.2s;
}
.cs-more-item:hover {
border-color: var(--n300);
}
.cs-more-bar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.875rem;
min-height: 3.5rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--line);
background: var(--page);
font-size: 0.875rem;
line-height: 1.5rem;
}
.cs-more-no {
color: var(--accent-ink);
}
.cs-more-dept {
position: relative;
padding-left: 0.875rem;
font-weight: 500;
}
.cs-more-dept::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 0.875rem;
margin-top: -0.4375rem;
background: var(--n300);
}
.cs-more-head {
display: block;
max-width: 22em;
padding: 2rem 1.5rem 1.5rem;
font-weight: 600;
font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
line-height: 1.15;
letter-spacing: -0.03em;
text-wrap: balance;
}
.cs-more-go {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.375rem;
margin: auto 1.5rem 2rem;
padding-bottom: 2px;
border-bottom: 1px solid var(--n300);
font-weight: 500;
transition: border-color 0.2s;
}
.cs-more-go .icon {
width: 0.9375rem;
height: 0.9375rem;
transition: transform 0.2s var(--ease);
}
.cs-more-item:hover .cs-more-go {
border-color: var(--ink);
}
.cs-more-item:hover .cs-more-go .icon {
transform: translate(1px, -1px);
}