/**
 * Work — the index at `/work/` and, later, the project detail.
 *
 * Measured on the rendered master at the ratified shapes. One ascending
 * media-query set at 651 / 1101 / 1501; every laptop override reset at 1501.
 *
 * The grid is the interesting part: twelve columns of 72px auto-rows, with each
 * tile spanning a fixed number of columns and rows from a twelve-step pattern
 * applied by position. Tile size is therefore a property of a card's place in
 * the list, not of the project — which is why `site.js` reassigns these classes
 * whenever the filter changes.
 */

/* ------------------------------------------------------------------ hero */
.work-library-hero {
	padding: 118px 0 55px;
}

/* Block, not the two-column grid of the base rule: the master's QA pass turns
   every one of these heads into a block. Same treatment as .work-head. */
.work-library-intro {
	display: block;
}

.work-library-intro > div + div {
	max-width: 720px;
	margin-top: 18px;
}

/*
 * 20px, where the shared `.lead` is 27 at this width. The master carries it as
 * an inline style on the index's lead paragraph; scoped here instead so the
 * markup stays clean and the value stays with the rest of the index.
 */
.work-library-hero .lead {
	max-width: 620px;
	font-size: var(--fs-body);
}

/* ----------------------------------------------------------------- filter */
/*
 * Sticky beneath the header. `top` is the header's own height, so the two
 * values have to agree: at mobile the master drops it to 68 with the header.
 */
.work-filter-wrap {
	position: sticky;
	top: 68px;
	z-index: 50;
	background: var(--filter-bar-bg);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.work-filter-inner {
	width: min(var(--content-max), calc(100% - var(--pad-x) * 2));
	margin: auto;
	padding: 16px 0;
}

.work-filter-modern {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
	align-items: center;
}

.work-filter-modern label {
	font-size: max(calc(9px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
}

.select-shell {
	position: relative;
}

/*
 * A 999px radius, and the one place in the build that has one. 28_ §5 removes
 * pill buttons, and the master's own QA pass strips the pill from `.btn` and
 * `.nav-cta` — but not from this select, which still renders fully rounded.
 * Reproduced because the master shows it; flagged in the checklist.
 */
.select-shell select {
	appearance: none;
	width: 100%;
	padding: 12px 42px 12px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	font-size: max(calc(12px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	font-family: inherit;
	color: var(--ink);
	outline: none;
}

.select-shell span {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-52%);
	pointer-events: none;
}

/*
 * The master takes the native outline off this control and puts nothing in its
 * place, so a keyboard user cannot see where they are. Approved correction
 * (Ben, 21 Sep 2026).
 *
 * It is the theme's own focus treatment, not a new one: the skip link and
 * `.section-action` both invert to ink when focused, and this does the same and
 * no more. `:focus-visible` only, so the resting and mouse states are the
 * master's, untouched.
 */
.select-shell select:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

/* The chevron is painted over the control, so it inverts with it. */
.select-shell select:focus-visible + span {
	color: var(--white);
}

/* `margin-left: auto` is what actually pushes this to the right edge of its
   cell; the `justify-self` that follows it in the master only decides how the
   cell itself is aligned. Both are needed. */
.work-count {
	margin-left: auto;
	justify-self: start;
	font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ------------------------------------------------------------------ grid */
.big-work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 34px 0 110px;
}

.big-work-card {
	position: relative;
	height: 420px;
	min-height: 0;
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	background: var(--grey-tile);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
}

/*
 * A tile past the first page, or one the filter leaves out, is out of sight, out of the Tab order and out of the accessibility tree, and its link stays an ordinary link in the page's HTML
 * (SEO Batch 6, Ben, 8 Oct 2026): the HTML `hidden` attribute made crawlers that skip hidden elements miss 37 Work links. `initWorkFilter()` toggles the class, not the attribute.
 */
.big-work-card.is-later {
	display: none;
}

.big-work-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.55s;
}

.big-work-card:hover img,
.big-work-card:focus-visible img {
	transform: scale(1.035);
}

.big-work-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--work-tile-scrim);
}

/* Defensive: every one of the master's forty-eight projects has an image, so
   this never paints there. Kept because a project without one must not render
   as an empty black tile. */
.big-work-fallback {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--work-fallback);
}

/* The master labels an imageless tile rather than leaving it blank. */
.big-work-fallback::before {
	content: "Live Form project";
	position: absolute;
	top: 25px;
	left: 25px;
	font-size: max(calc(9px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--work-fallback-label);
}

.big-work-content {
	position: absolute;
	z-index: 3;
	left: 24px;
	right: 24px;
	bottom: 22px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	color: var(--white);
}

.big-work-content .client {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	color: var(--work-tile-client);
	display: block;
	line-height: 1.35;
}

/*
 * One title size for every tile, whatever its shape (Ben, 1 Oct 2026: the
 * tiles read at different sizes; the narrow tile's size is the one he chose).
 * The shape classes still set the grid span and nothing else. One clamp here
 * and one in the laptop band below; the large-desktop band inherits this one.
 */
.big-work-content h2 {
	max-width: 670px;
	margin: 10px 0 0;
	font-size: calc(clamp(23px, 2.15vw, 33px) * var(--type-heading));
	line-height: 0.98;
	letter-spacing: var(--tr-display);
	text-wrap: balance;
	/*
	 * Three lines, then it stops. One tile ran to four lines where the master
	 * takes three, with the font, size, line-height, letter-spacing, width and
	 * text all identical — both lay out four lines and the master clips the
	 * fourth. The same `-webkit-box` clamp `.project-content h3` already uses;
	 * a clipped line is invisible to every property a box-and-type comparison
	 * records, which is why the sweep now reads `-webkit-line-clamp` too.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.big-work-content .round-arrow {
	background: var(--white);
	color: var(--ink);
}

.work-load-more {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	padding: 24px 0 8px;
}

/* ------------------------------------------------- tablet, 651px and up */
@media screen and (min-width: 651px) {
	.work-library-hero {
		padding-top: 155px;
	}

	.work-filter-wrap {
		top: 82px;
	}

	.work-filter-modern {
		grid-template-columns: auto minmax(220px, 320px) 1fr;
	}

	.work-count {
		justify-self: end;
	}

	.big-work-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.big-work-card {
		height: 390px;
	}

}

/* ---------------------------------------------- the tile pattern, 1101+ */
/*
 * The twelve-column grid only exists above the master's collapse. Below it
 * every tile is the same size and the pattern classes do nothing, which is why
 * they are written as spans rather than as heights.
 */
@media screen and (min-width: 1101px) {
	.big-work-grid {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 62px;
		grid-auto-flow: row;
		gap: 12px;
		padding: 28px 0 84px;
	}

	.big-work-card {
		height: 100%;
	}

	.big-work-card.work-8x6 {
		grid-column: span 8;
		grid-row: span 6;
	}

	.big-work-card.work-4x6 {
		grid-column: span 4;
		grid-row: span 6;
	}

	.big-work-card.work-4x4 {
		grid-column: span 4;
		grid-row: span 4;
	}

	.big-work-card.work-8x5 {
		grid-column: span 8;
		grid-row: span 5;
	}

	.big-work-card.work-4x5 {
		grid-column: span 4;
		grid-row: span 5;
	}

	.big-work-card.work-6x5 {
		grid-column: span 6;
		grid-row: span 5;
	}

	/* The laptop band tightens the caption inset as well as the type. */
	.big-work-content {
		left: 21px;
		right: 21px;
		bottom: 19px;
	}

	.big-work-content h2 {
		font-size: calc(clamp(20px, 1.8vw, 28px) * var(--type-heading));
	}

	/*
	 * Back to the shared lead size for this band only. The master's index lead
	 * carries an inline `font-size:20px`, and its laptop `.lead` rule is
	 * `!important`, which outranks even an inline style — so 20px applies
	 * everywhere except here.
	 */
	.work-library-hero .lead {
		font-size: var(--fs-body);
	}

	.work-library-hero {
		padding: 112px 0 32px;
		min-height: auto;
	}

	.work-filter-inner {
		padding: 13px 0;
	}
}

/* ---------------------------------------------- large desktop, 1501px and up */
@media screen and (min-width: 1501px) {
	.big-work-content {
		left: 24px;
		right: 24px;
		bottom: 22px;
	}

	/* The tile title is the base size again here: the laptop clamp is a min-width band, so it is undone. */
	.big-work-content h2 {
		font-size: calc(clamp(23px, 2.15vw, 33px) * var(--type-heading));
	}

	.work-library-hero {
		padding: 155px 0 55px;
	}

	.work-filter-inner {
		padding: 16px 0;
	}

	.big-work-grid {
		grid-auto-rows: 72px;
		gap: 14px;
		padding: 34px 0 110px;
	}

}

/* ==================================================================== detail
 *
 * One spine, a variable middle. The blocks below are the complete vocabulary a
 * Work page can draw on; which of them a page uses is in its block list, not
 * here. See inc/work-detail-render.php.
 *
 * Two cascade facts from the master worth stating once, because they decide
 * several values below:
 *
 * 1. The heading-length modifiers (`.work-title-medium|long|xlong`) are
 *    `!important` in the master and outrank every block's own heading size —
 *    except inside the laptop band, where the master's `.display-sm` override
 *    is itself `!important` and later, so between 1101 and 1500 the modifiers
 *    do nothing at all. They are therefore written here for the bands outside
 *    that one only.
 *
 * 2. `.generic-work-detail .work-detail-brief-title .display-sm` is three
 *    classes deep and beats both the modifier and the laptop brief rule, so a
 *    generic page's brief heading is one size at every width. Saxo, which does
 *    not carry that class, takes the ordinary sizes. The same wrapper is why a
 *    generic page's proof figures clamp and Saxo's stay at 34px.
 */

/* ------------------------------------------------------------------ hero */
.work-detail-hero {
	padding: 102px 0 58px;
	background: var(--paper);
}

.work-detail-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 45px;
	align-items: center;
}

.work-detail-hero-copy .display-sm {
	max-width: 760px;
	/*
	 * 80px, not the master's 82px (Ben, 21 Sep 2026 -- an approved production
	 * correction). Two of the 48 Work details clip: "sophisticated" at 82px
	 * needs 584px in a 575px column, and the existing ceiling is
	 * viewport-relative, so it cannot see a column narrower than the viewport
	 * implies. 2px across the family is better than knowingly shipping
	 * clipped type on two pages.
	 *
	 * The 12.5vw ceiling stays: it holds the longest word inside the gutter
	 * below 400px and is identical from 400px up.
	 */
	font-size: min(clamp(50px, 5.6vw, 80px), 12.5vw);
}

.work-detail-hero-copy .lead {
	max-width: 720px;
	margin: 25px 0 0;
	color: var(--work-lead);
}

.work-detail-services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

/* A chip, not a button: 15px is the option radius, not the 16px button one. */
/*
 * The anchor is included so a service that links to its Route is **identical at
 * rest** to one that does not (audit A5, Ben 23 Sep 2026). Nothing moves and
 * nothing is restyled; some chips simply became clickable.
 */
.work-detail-services span,
.work-detail-services a {
	padding: 10px 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-option);
	background: var(--white);
	font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--work-chip);
}

/*
 * ...and a chip that *is* a link says so on hover and focus. A link that looks
 * exactly like static text is the accessibility problem this would otherwise
 * introduce. The treatment is the site's existing one, from `.motion-other`.
 */
.work-detail-services a {
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.work-detail-services a:hover,
.work-detail-services a:focus-visible {
	border-color: rgba(255, 106, 0, 0.35);
	background: #fffaf1;
	color: var(--ink);
	outline: 0;
}

.work-detail-services a:focus-visible {
	outline: 3px solid rgba(255, 106, 0, 0.35);
	outline-offset: 2px;
}

.work-detail-hero-media {
	min-height: 380px;
	margin: 0;
	overflow: hidden;
	border-radius: 26px;
	background: var(--media-bg);
}

.work-detail-hero-media img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

/* ----------------------------------------------------------------- facts */
.work-detail-facts {
	background: var(--white);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.work-detail-fact-grid,
.work-detail-proof-grid {
	display: grid;
	grid-template-columns: 1fr;
}

/*
 * One rule set for the facts strip and the proof strip: the master divides
 * both the same way and changes both at the same two widths. Stacked, the
 * divider is a top border; side by side it moves to the left edge of every
 * cell that has a neighbour.
 */
.work-detail-fact-grid > div,
.work-detail-proof-grid article {
	border-top: 1px solid var(--line);
}

.work-detail-fact-grid > div:first-child,
.work-detail-proof-grid article:first-child {
	border-top: 0;
}

.work-detail-fact-grid > div {
	padding: 28px 26px;
}

.work-detail-fact-grid span:not(.work-detail-fact-value) {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
	color: var(--work-label);
}

.work-detail-fact-grid .work-detail-fact-value {
	font-size: calc(18px * var(--type-reading));
	line-height: 1.2;
	letter-spacing: -0.025em;
}

/* ----------------------------------------------------------------- brief */
.work-detail-brief {
	padding: 108px 0;
	background: var(--white);
}

/*
 * The brief reads title, then copy directly beneath it, in one column (Ben, 1 Oct 2026, overruling the master's split, where the copy floated in a column of its own beside
 * the title). From 1101px the deliverables list takes the right-hand column, beside the title and copy (Ben, 1 Oct 2026, later: "title and body on the left, the bullets on the
 * right"); below that everything stacks: title, copy, deliverables. The left column holds a readable measure (title up to 800px, the copy itself 760px).
 */
.work-detail-brief-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.work-detail-brief-title,
.work-detail-brief-copy {
	max-width: 800px;
}

.work-detail-brief-title .display-sm {
	max-width: 760px;
	font-size: clamp(44px, 5vw, 72px);
}

.work-detail-brief-copy > p {
	max-width: 760px;
	margin: 0 0 22px;
	color: var(--work-body);
}

.work-detail-deliverables {
	margin-top: 8px;
	border-top: 1px solid var(--line);
}

/* The list's label is an eyebrow (Ben, 1 Oct 2026): the same size, face, weight and case as every other eyebrow (the Home hero's, 6 Oct 2026). */
.work-detail-deliverables > span {
	display: block;
	padding: 18px 0 14px;
	font-family: var(--font-body);
	font-size: max(calc(13.2px * var(--type-small)), var(--type-floor));
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}

@media screen and (min-width: 1101px) {

	.work-detail-brief-grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: auto 1fr;
		column-gap: 88px;
		row-gap: 30px;
	}

	.work-detail-brief-title {
		grid-column: 1;
		grid-row: 1;
	}

	.work-detail-brief-copy {
		grid-column: 1;
		grid-row: 2;
	}

	.work-detail-deliverables {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
		align-self: start;
	}
}

.work-detail-deliverables > div {
	padding: 15px 0;
	border-top: 1px solid var(--line);
	font-size: calc(20px * var(--type-heading));
	font-weight: var(--fw-eyebrow);
	letter-spacing: -0.025em;
}

/* ------------------------------------------------- the image-led panels */
.work-detail-idea {
	padding: 92px 0;
	background: var(--sand);
}

/* A later panel sits on sand too; only the reversed one goes white. */
.work-detail-idea-secondary.work-detail-idea-reverse {
	background: var(--white);
}

.work-detail-idea-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 45px;
	align-items: center;
}

.work-detail-idea-media {
	height: 390px;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--white);
	box-shadow: var(--work-media-shadow);
}

.work-detail-idea-media img,
.work-detail-motion-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.work-detail-idea-copy {
	max-width: 630px;
}

/* No `display-sm` on this heading in the master, so it carries its own. */
.work-detail-idea-copy h2 {
	margin: 0 0 24px;
	font-size: clamp(45px, 5vw, 72px);
	line-height: 0.96;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-title);
}

.work-detail-idea-copy p {
	color: var(--work-copy);
}

/* --------------------------------------------------------------- gallery */
.work-detail-gallery {
	padding: 106px 0;
	background: var(--white);
}

.work-detail-section-head {
	margin-bottom: 32px;
}

.work-detail-section-head .display-sm {
	max-width: 840px;
}

.work-detail-gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 380px 300px 300px;
	gap: 14px;
}

.work-detail-gallery-grid figure {
	margin: 0;
	overflow: hidden;
	border-radius: 22px;
	background: var(--media-bg);
}

.work-detail-gallery-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.work-detail-gallery-grid figure:hover img {
	transform: scale(1.025);
}

/*
 * The count is on the section because the grid changes shape with it: one
 * image fills the width, two sit side by side in a single row, three put the
 * first across both rows of the default grid.
 */
.gallery-count-1 .work-detail-gallery-grid {
	display: block;
}

.gallery-count-1 .work-detail-gallery-grid figure {
	height: 570px;
}

.gallery-count-2 .work-detail-gallery-grid {
	grid-template-columns: 1fr;
	grid-template-rows: 360px 360px;
}

.gallery-count-2 .work-detail-gallery-grid figure {
	grid-row: auto;
	height: 360px;
}

/* ----------------------------------------------------------------- video */
.work-detail-video-section {
	padding: 100px 0 108px;
	background: var(--work-video-bg);
}

.work-detail-video-section .work-detail-section-head {
	margin-bottom: 30px;
}

.work-detail-video-section .work-detail-section-head > div {
	max-width: 850px;
}

/* The bespoke page writes this paragraph straight into the section head. */
.work-detail-video-section .copy {
	max-width: 720px;
	margin-top: 18px;
	color: var(--work-video-intro);
	font-size: var(--fs-body);
	line-height: 1.55;
}

.work-video-intro {
	max-width: 760px;
	margin-top: 18px;
}

.work-video-intro p {
	margin: 0 0 10px;
	color: var(--work-video-intro);
	font-size: var(--fs-body);
	line-height: 1.58;
}

.work-video-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* A control, not a link: it opens the video in a dialog. The font has to be
   asked for — a button does not inherit the document's. */
.work-video-card {
	position: relative;
	width: 100%;
	min-height: 390px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 24px;
	background: var(--work-video-card-bg);
	color: var(--white);
	font: inherit;
	text-align: left;
	cursor: pointer;
	isolation: isolate;
}

.work-video-card > img,
.work-video-card-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s ease;
}

.work-video-card-fallback {
	background: var(--work-video-fallback);
}

.work-video-card:hover > img,
.work-video-card:focus-visible > img {
	transform: scale(1.025);
}

.work-video-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--work-video-shade);
}

.work-video-play {
	position: absolute;
	z-index: 2;
	top: 28px;
	left: 28px;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding-left: 4px;
	border-radius: var(--r-round);
	background: var(--white);
	color: var(--ink);
	font-size: calc(20px * var(--type-heading));
	box-shadow: var(--work-video-play-shadow);
	transition: transform 0.2s ease;
}

.work-video-card:hover .work-video-play,
.work-video-card:focus-visible .work-video-play {
	transform: scale(1.07);
}

.work-video-meta {
	position: absolute;
	z-index: 2;
	right: 28px;
	bottom: 25px;
	left: 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.work-video-meta small {
	margin-bottom: 8px;
	font-size: max(calc(9px * var(--type-small)), var(--type-floor));
	font-style: normal;
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--work-video-label);
}

.work-video-meta strong {
	max-width: 680px;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 0.98;
	letter-spacing: var(--tr-display);
}

.work-video-meta em {
	margin-top: 14px;
	font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	font-style: normal;
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--white);
}

/*
 * When the master's own rhythm pass moves the video section between two
 * text-only panels it turns the section dark, so the page is not three pale
 * panels in a row. The class is carried in the block list.
 */
.work-video-rhythm-break {
	padding: 58px 0 62px;
	background: var(--ink);
	color: var(--white);
}

.work-video-rhythm-break .eyebrow {
	color: var(--work-quote-meta);
}

.work-video-rhythm-break .display-sm {
	max-width: 840px;
	color: var(--white);
}

.work-video-rhythm-break .work-video-intro p {
	color: var(--work-rhythm-copy);
}

.work-video-rhythm-break .work-video-card {
	box-shadow: var(--work-rhythm-shadow);
}

/* --------------------------------------------------------------- rollout */
.work-detail-motion {
	padding: 105px 0;
	background: var(--white);
}

.work-detail-motion-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 45px;
	align-items: center;
}

.work-detail-motion-copy .display-sm {
	max-width: 660px;
	font-size: clamp(42px, 4.8vw, 68px);
}

/* 650, not the 620 of the bare `.work-detail-motion-copy` rule: every motion
   section the master renders is a rollout, and the rollout rule is deeper. */
.work-detail-motion-copy p {
	max-width: 650px;
	color: var(--work-copy);
	font-size: var(--fs-body);
	line-height: 1.62;
}

.work-detail-motion-media {
	position: relative;
	min-height: 380px;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--white);
	box-shadow: var(--work-media-shadow);
}

.work-detail-motion-media img {
	display: block;
	min-height: 380px;
}

/* ----------------------------------------------- the text-only panel */
.work-rich-text-section {
	padding: 78px 0 86px;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	background: var(--white);
}

.work-rich-text-section-alt {
	background: var(--sand);
}

.work-rich-text-section .display-sm {
	max-width: 760px;
}

.work-rich-text-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	align-items: center;
}

.work-rich-text-copy {
	max-width: 800px;
	padding-top: 4px;
}

.work-rich-text-copy p {
	margin: 0 0 18px;
	color: var(--work-body);
}

/* ----------------------------------------------------------------- proof */
.work-detail-proof {
	padding: 34px 0;
	background: var(--yellow);
}

.work-detail-proof-grid article {
	padding: 8px 26px 10px;
}

.work-detail-proof-grid .work-detail-proof-value {
	display: block;
	font-size: calc(34px * var(--type-heading));
	line-height: 0.95;
	letter-spacing: var(--tr-display);
	font-weight: var(--fw-title);
}

.work-detail-proof-grid span:not(.work-detail-proof-value) {
	display: block;
	margin-top: 8px;
	font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	font-weight: var(--fw-eyebrow);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- outcome */
.work-rich-outcome {
	/* 78/86 at every width but the laptop band. The master carries a 72px
	   mobile rule too, but its later QA rule is `!important` and wins. */
	padding: 78px 0 86px;
	background: var(--white);
}

.work-rich-outcome-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 38px;
	align-items: center;
}

.work-rich-outcome-grid .display-sm {
	max-width: 720px;
	font-size: clamp(44px, 5vw, 72px);
}

.work-rich-outcome-copy {
	max-width: 680px;
}

.work-rich-outcome-copy p {
	margin: 0;
	color: var(--work-body);
}

/* ------------------------------------------------------- closing visual */
.work-closing-visual {
	position: relative;
	min-height: 300px;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--work-closing-bg);
	box-shadow: var(--work-closing-shadow);
}

.work-closing-visual img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

/*
 * Thirty-nine of the master's forty-eight Work pages have no closing image and
 * draw this instead: two rings and a dot, in the brand colours. Variant 0 is
 * the outcome block's and variant 1 the case feature's; the master defines two
 * more that nothing reaches.
 */
.work-closing-placeholder {
	background: var(--work-closing-fill);
}

.work-closing-ring {
	position: absolute;
	display: block;
	border-style: solid;
	border-radius: var(--r-round);
}

.work-closing-placeholder .ring-a {
	top: -78px;
	right: -70px;
	width: 270px;
	height: 270px;
	border-width: 54px;
	border-color: var(--yellow);
}

.work-closing-placeholder .ring-b {
	bottom: -70px;
	left: -58px;
	width: 180px;
	height: 180px;
	border-width: 38px;
	border-color: var(--magenta);
}

.work-closing-placeholder .work-closing-dot {
	position: absolute;
	right: 34px;
	bottom: 28px;
	width: 54px;
	height: 54px;
	border-radius: var(--r-round);
	background: var(--cyan);
}

.work-closing-placeholder.variant-1 .ring-a {
	border-color: var(--cyan);
}

.work-closing-placeholder.variant-1 .ring-b {
	border-color: var(--yellow);
}

.work-closing-placeholder.variant-1 .work-closing-dot {
	background: var(--ink);
}

/* --------------------------------------------------------- case feature */
.work-case-feature {
	padding: 70px 0;
	background: var(--sand);
}

.work-case-feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 38px;
	align-items: center;
}

.work-case-feature-copy {
	max-width: 720px;
}

.work-case-feature-copy .display-sm {
	max-width: 700px;
	font-size: clamp(42px, 4.6vw, 66px);
}

.work-case-feature-copy p {
	margin: 20px 0 28px;
	color: var(--work-lead);
}

.work-case-feature .work-closing-visual,
.work-case-feature .work-closing-visual img {
	min-height: 300px;
}

/* The shared `.section-action`, squared off and given a minimum width. */
.work-detail-case-link {
	display: inline-flex;
	min-width: 250px;
	border-radius: var(--r-button);
	clip-path: none;
}

/* ----------------------------------------------------------- testimonial */
.work-detail-testimonial {
	padding: 88px 0;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}

/*
 * The shared carousel's name is 20px; the master lifts it to 22px on this
 * surface and on the Case Study detail, each with its own rule. Both are
 * `!important` there and neither is here — the selector is specific enough.
 */
.work-detail-testimonial cite .testimonial-name {
	font-size: calc(22px * var(--type-heading));
}

.work-detail-testimonial .eyebrow {
	color: var(--work-quote-meta);
}

/* --------------------------------------------------------------- related */
.work-detail-related {
	padding: 96px 0 108px;
	background: var(--white);
}

.work-detail-related .display-sm {
	max-width: 900px;
	font-size: clamp(38px, 4vw, 58px);
	line-height: 0.98;
	letter-spacing: var(--tr-display);
}

.work-detail-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.work-detail-related-card {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--grey-tile);
	color: var(--white);
	text-decoration: none;
}

.work-detail-related-card > img,
.work-detail-related-card > .project-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-detail-related-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--work-related-scrim);
}

.work-detail-related-card > div:last-child {
	position: absolute;
	z-index: 2;
	right: 22px;
	bottom: 20px;
	left: 22px;
}

.work-detail-related-card span {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow-label);
	font-weight: 800;
	letter-spacing: var(--ls-eyebrow-label);
	text-transform: uppercase;
	color: var(--work-related-meta);
	display: block;
	line-height: 1.35;
}

.work-detail-related-card h3 {
	margin: 8px 0 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--tr-h3);
	font-weight: var(--fw-card-title);
}

/* ------------------------------------------------- tablet, 651px and up */
@media screen and (min-width: 651px) {
	.work-detail-hero {
		padding-top: 132px;
	}

	.work-detail-hero-media,
	.work-detail-hero-media img {
		min-height: 533px;
	}

	.work-detail-fact-grid,
	.work-detail-proof-grid {
		grid-template-columns: 1fr 1fr;
	}

	.work-detail-fact-grid > div:nth-child(2),
	.work-detail-proof-grid article:nth-child(2) {
		border-top: 0;
	}

	.work-detail-fact-grid > div:nth-child(2n),
	.work-detail-proof-grid article:nth-child(2n) {
		border-left: 1px solid var(--line);
	}

	.work-detail-proof-grid article:nth-child(2n) {
		border-left-color: var(--work-proof-line);
	}

	.work-detail-idea-media {
		height: 560px;
	}

	.work-detail-gallery-grid {
		grid-template-columns: 1.25fr 0.75fr;
		grid-template-rows: 310px 310px;
	}

	.work-detail-gallery-main {
		grid-row: 1 / span 2;
	}

	.work-video-intro p {
		font-size: var(--fs-body);
	}

	.work-video-rhythm-break {
		padding: 82px 0 88px;
	}

	.work-closing-visual,
	.work-closing-visual img,
	.work-case-feature .work-closing-visual,
	.work-case-feature .work-closing-visual img {
		min-height: 380px;
	}

	.work-case-feature {
		padding: 90px 0;
	}

	.work-detail-related-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------- the 801 and 1001 steps */
/*
 * Two widths the master changes at that are not one of the four states. The
 * video grid splits at 801 and the two-up gallery, the text grid and the
 * related grid at 1001, so each gets the narrow query it actually uses rather
 * than being rounded to the nearest state.
 */
@media screen and (min-width: 801px) {
	.work-video-card-grid {
		grid-template-columns: 1fr 1fr;
	}

	.work-video-card-grid.single {
		grid-template-columns: minmax(0, 1fr);
	}

	.work-video-card {
		min-height: 430px;
	}

	.work-video-card-grid.single .work-video-card {
		min-height: 520px;
	}
}

@media screen and (min-width: 1001px) {
	.gallery-count-2 .work-detail-gallery-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 500px;
	}

	.gallery-count-2 .work-detail-gallery-grid figure {
		grid-row: 1;
		height: 500px;
	}

	.work-rich-text-grid {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: 78px;
	}

	.work-detail-related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ------------------------------------------------- laptop, 1101px and up */
@media screen and (min-width: 1101px) {
	.work-detail-hero {
		padding: 106px 0 42px;
	}

	.work-detail-hero-grid {
		grid-template-columns: var(--hero-copy-col) var(--hero-media-col);
		gap: 48px;
	}

	.work-detail-hero-copy .display-sm {
		font-size: clamp(44px, 4vw, 60px);
	}

	.work-detail-hero-copy .lead {
		margin-top: 18px;
	}

	.work-detail-services {
		margin-top: 20px;
	}

	.work-detail-services span {
		padding: 8px 11px;
		font-size: max(calc(9.5px * var(--type-small)), var(--type-floor));
	}

	.work-detail-hero-media,
	.work-detail-hero-media img {
		min-height: 504px;
		border-radius: 22px;
	}

	.work-detail-fact-grid,
	.work-detail-proof-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.work-detail-fact-grid > div,
	.work-detail-proof-grid article {
		border-top: 0;
		border-left: 1px solid var(--line);
	}

	.work-detail-proof-grid article {
		border-left-color: var(--work-proof-line);
	}

	.work-detail-fact-grid > div:first-child,
	.work-detail-proof-grid article:first-child {
		border-left: 0;
	}

	.work-detail-fact-grid > div {
		padding: 20px;
	}

	.work-detail-fact-grid .work-detail-fact-value {
		font-size: calc(16px * var(--type-reading));
	}

	.work-detail-brief {
		padding: 74px 0;
	}

	.work-detail-brief-title .display-sm {
		font-size: clamp(40px, 3.7vw, 56px);
	}

	/*
	 * These three set their own size outside the laptop band and give it up
	 * inside it: the master's laptop `.display-sm` is `!important`, so it
	 * outranks them however deep they are. Same value as components.css.
	 */
	.work-detail-motion-copy .display-sm,
	.work-case-feature-copy .display-sm,
	.work-rich-outcome-grid .display-sm {
		font-size: clamp(43px, 3.8vw, 57px);
	}

	.work-detail-idea,
	.work-detail-gallery,
	.work-detail-motion,
	.work-detail-video-section {
		padding: 72px 0;
	}

	.work-detail-idea-grid {
		grid-template-columns: minmax(520px, 1.1fr) minmax(0, 0.9fr);
		gap: 52px;
	}

	.work-detail-idea-reverse .work-detail-idea-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
	}

	.work-detail-idea-media {
		height: 440px;
	}

	.work-detail-idea-copy h2 {
		font-size: clamp(40px, 3.8vw, 56px);
	}

	.work-detail-gallery-grid {
		grid-template-rows: 250px 250px;
	}

	.work-video-card,
	.work-video-card-grid.single .work-video-card {
		min-height: 380px;
	}

	.work-video-rhythm-break {
		padding: 64px 0 70px;
	}

	.work-detail-motion-grid {
		grid-template-columns: minmax(0, 0.72fr) minmax(580px, 1.28fr);
		gap: 52px;
	}

	.work-detail-motion-media,
	.work-detail-motion-media img {
		min-height: 430px;
	}

	.work-rich-text-section {
		padding: 70px 0;
	}

	.work-rich-text-grid {
		gap: 58px;
	}

	.work-rich-outcome {
		padding: 66px 0 72px;
	}

	/*
	 * Three columns, not two: every outcome block the master renders carries
	 * `work-rich-outcome-visual`, and the third column is the closing visual.
	 */
	.work-rich-outcome-visual .work-rich-outcome-grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.72fr) minmax(300px, 0.46fr);
		gap: 34px;
	}

	.work-closing-visual,
	.work-closing-visual img {
		min-height: 270px;
	}

	.work-case-feature {
		padding: 68px 0;
	}

	.work-case-feature-grid {
		grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
		gap: 62px;
	}

	.work-case-feature .work-closing-visual,
	.work-case-feature .work-closing-visual img {
		min-height: 360px;
	}

	.work-detail-testimonial {
		padding: 68px 0;
	}

	.work-detail-related {
		padding: 70px 0 78px;
	}

	.work-detail-related .display-sm {
		font-size: 46px;
	}

	.work-detail-related-card {
		min-height: 290px;
	}

	.work-detail-related-card h3 {
		font-size: calc(24px * var(--type-heading));
	}
}

/* ------------------------------------------ large desktop, 1501px and up */
@media screen and (min-width: 1501px) {
	.work-detail-hero {
		padding: 132px 0 58px;
	}

	/*
	 * The same balance as the Case Study and Journey heroes, which is the
	 * point of holding it in a token. Work kept its own 0.92/1.08 through the
	 * 49/51 pass because that pass only touched `tokens.css`, and the 43px it
	 * cost the copy column was worth a whole line: 28 of 54 Work and Case
	 * Study headlines ran to six or seven lines at 1600, against five on the
	 * families already using the token. Ben, 23 Sep 2026.
	 */
	.work-detail-hero-grid {
		grid-template-columns: var(--hero-copy-col) var(--hero-media-col);
		gap: 70px;
	}

	.work-detail-hero-copy .display-sm {
		font-size: clamp(50px, 5.6vw, 80px);
	}

	.work-detail-hero-copy .lead {
		margin-top: 25px;
	}

	.work-detail-services {
		margin-top: 28px;
	}

	.work-detail-services span {
		padding: 10px 13px;
		font-size: max(calc(10px * var(--type-small)), var(--type-floor));
	}

	.work-detail-hero-media,
	.work-detail-hero-media img {
		min-height: 684px;
		border-radius: 26px;
	}

	.work-detail-fact-grid > div {
		padding: 28px 26px;
	}

	.work-detail-fact-grid .work-detail-fact-value {
		font-size: calc(18px * var(--type-reading));
	}

	.work-detail-brief {
		padding: 108px 0;
	}

	.work-detail-brief-title .display-sm {
		font-size: clamp(44px, 5vw, 72px);
	}

	.work-detail-motion-copy .display-sm {
		font-size: clamp(42px, 4.8vw, 68px);
	}

	.work-case-feature-copy .display-sm {
		font-size: clamp(42px, 4.6vw, 66px);
	}

	.work-rich-outcome-grid .display-sm {
		font-size: clamp(44px, 5vw, 72px);
	}

	.work-detail-idea {
		padding: 92px 0;
	}

	.work-detail-idea-grid {
		gap: 70px;
	}

	.work-detail-idea-media {
		height: 560px;
	}

	.work-detail-idea-copy h2 {
		font-size: clamp(45px, 5vw, 72px);
	}

	.work-detail-gallery {
		padding: 106px 0;
	}

	.work-detail-gallery-grid {
		grid-template-rows: 310px 310px;
	}

	.work-detail-video-section {
		padding: 100px 0 108px;
	}

	.work-video-card {
		min-height: 430px;
	}

	.work-video-card-grid.single .work-video-card {
		min-height: 520px;
	}

	.work-video-rhythm-break {
		padding: 82px 0 88px;
	}

	.work-detail-motion {
		padding: 105px 0;
	}

	.work-detail-motion-grid {
		gap: 76px;
	}

	.work-rich-text-section {
		padding: 78px 0 86px;
	}

	.work-rich-text-grid {
		gap: 78px;
	}

	.work-rich-outcome {
		padding: 78px 0 86px;
	}

	.work-rich-outcome-visual .work-rich-outcome-grid {
		gap: 46px;
	}

	.work-closing-visual,
	.work-closing-visual img {
		min-height: 330px;
	}

	.work-case-feature {
		padding: 90px 0;
	}

	.work-case-feature-grid {
		gap: 62px;
	}

	.work-case-feature .work-closing-visual,
	.work-case-feature .work-closing-visual img {
		min-height: 460px;
	}

	.work-detail-testimonial {
		padding: 88px 0;
	}

	.work-detail-related {
		padding: 96px 0 108px;
	}

	.work-detail-related .display-sm {
		font-size: clamp(38px, 4vw, 58px);
	}

	.work-detail-related-card {
		min-height: 360px;
	}

	.work-detail-related-card h3 {
		font-size: var(--fs-h3);
	}
}

/* --------------------------------------------- heading length modifiers */
/*
 * H1 ONLY since 1 Oct 2026 (the panel reset; `:where(h1)` restricts the match to an H1 without adding specificity, so the H1 ladder in components.css still outranks these exactly as before): these steps were chosen by how long a heading is, and a panel heading is no longer sized by its length (panel-headings.css).
 * They still steer a Work page's H1, which is not part of that system and is not changed. Three sizes below the page's own, chosen by how long the heading is. They sit
 * after the block rules so they win on source order, which is what the master's
 * `!important` does there — and they are confined to the bands outside
 * 1101-1500 because inside it the master's laptop `.display-sm` override is
 * itself `!important` and later still, so every heading there takes its band
 * size no matter how long it is.
 */
@media screen and (max-width: 650px) {
	.work-detail-page .work-title-medium:where(h1),
	.work-detail-page .work-title-long:where(h1),
	.work-detail-page .work-title-xlong:where(h1) {
		/* One size for all three, and a literal: `--fs-work-h1` is the Work
		   heading's own four-state scale, which is a different thing. The
		   leading still differs between them, because the master's mobile rule
		   sets the size alone. */
		font-size: calc(38px * var(--type-heading));
	}

	.work-detail-page .work-title-medium:where(h1) {
		line-height: 0.97;
	}

	.work-detail-page .work-title-long:where(h1) {
		line-height: 0.98;
	}

	.work-detail-page .work-title-xlong:where(h1) {
		line-height: 1;
	}
}

@media screen and (min-width: 651px) and (max-width: 1100px) {
	.work-detail-page .work-title-medium:where(h1) {
		font-size: clamp(36px, 4vw, 58px);
		line-height: 0.97;
	}

	.work-detail-page .work-title-long:where(h1) {
		font-size: clamp(32px, 3.6vw, 51px);
		line-height: 0.98;
	}

	.work-detail-page .work-title-xlong:where(h1) {
		font-size: clamp(29px, 3.15vw, 45px);
		line-height: 1;
	}
}

/*
 * Inside the laptop band only the line-height survives, and only on a heading
 * that is not also a `.display-sm`: the shared display rule is `!important`
 * there and takes both size and leading on everything that carries it. The
 * idea panel's H2 is the one heading in this family that does not.
 */
@media screen and (min-width: 1101px) and (max-width: 1500px) {
	.work-detail-page .work-title-medium:where(h1):not(.display-sm) {
		line-height: 0.97;
	}

	.work-detail-page .work-title-long:where(h1):not(.display-sm) {
		line-height: 0.98;
	}

	.work-detail-page .work-title-xlong:where(h1):not(.display-sm) {
		line-height: 1;
	}
}

@media screen and (min-width: 1501px) {
	.work-detail-page .work-title-medium:where(h1) {
		font-size: clamp(36px, 4vw, 58px);
		line-height: 0.97;
	}

	.work-detail-page .work-title-long:where(h1) {
		font-size: clamp(32px, 3.6vw, 51px);
		line-height: 0.98;
	}

	.work-detail-page .work-title-xlong:where(h1) {
		font-size: clamp(29px, 3.15vw, 45px);
		line-height: 1;
	}
}

/* ------------------------------------------------------ the two variants */
/*
 * What separates a generic Work page from the Saxo one. Both use the same
 * template and the same spine; the wrapper classes are the whole difference in
 * treatment, and Saxo carries neither.
 *
 * These come last because they have to outrank the length modifiers above,
 * exactly as they do in the master.
 */
.generic-work-detail .work-detail-brief-title .display-sm {
	max-width: 800px;
}

/*
 * The brief heading's size is the shared panel-title size like every other panel (panel-headings.css); it used to be its own clamp, held under 9.8vw, with a step down
 * (`work-title-brief-xlong`) for two headings whose longest word did not fit. A long word wraps at the column's edge, and a title that does not read well at the common size is
 * flagged to Ben for shortening (1 Oct 2026).
 */

.saxo-format-work-detail .work-detail-proof-grid .work-detail-proof-value {
	font-size: calc(clamp(22px, 2vw, 31px) * var(--type-heading));
	letter-spacing: var(--tr-display);
}

.saxo-format-work-detail .work-detail-proof-grid span:not(.work-detail-proof-value) {
	font-size: max(calc(9px * var(--type-small)), var(--type-floor));
}

.saxo-format-work-detail .work-detail-hero-media img,
.saxo-format-work-detail .work-detail-idea-media img,
.saxo-format-work-detail .work-detail-motion-media img {
	transition: transform 0.75s ease;
}

.saxo-format-work-detail .work-detail-hero-media:hover img,
.saxo-format-work-detail .work-detail-idea-media:hover img,
.saxo-format-work-detail .work-detail-motion-media:hover img {
	transform: scale(1.02);
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.big-work-card img {
		transition: none;
	}

	.big-work-card:hover img,
	.big-work-card:focus-visible img {
		transform: none;
	}

	.work-detail-gallery-grid img,
	.work-detail-gallery-grid figure:hover img,
	.work-video-card > img,
	.work-video-card:hover > img,
	.work-video-card:focus-visible > img,
	.work-video-play,
	.work-video-card:hover .work-video-play,
	.work-video-card:focus-visible .work-video-play,
	.saxo-format-work-detail .work-detail-hero-media img,
	.saxo-format-work-detail .work-detail-idea-media img,
	.saxo-format-work-detail .work-detail-motion-media img,
	.saxo-format-work-detail .work-detail-hero-media:hover img,
	.saxo-format-work-detail .work-detail-idea-media:hover img,
	.saxo-format-work-detail .work-detail-motion-media:hover img {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------ short viewports */
/*
 * The master's single height-based rule. It contains both obvious desktop
 * test sizes — 1600x900 and 1366x768 — so it has to be here or the hero is
 * measured 36px too tall at the width everyone looks at first.
 */
@media screen and (min-width: 1101px) and (max-height: 900px) {
	.work-detail-hero {
		padding-top: 96px;
	}
}

/* ------------------------------------------- a Work page built in the CMS */
/*
 * `work-detail-cms` is only on pages the generic layout builds, so nothing
 * here can reach the 48 migrated projects (Ben, 24 Sep 2026).
 *
 * The shared testimonial is display type — up to 68px across a 1180px measure
 * — which suits a one-line quote and turns a four-sentence one into a wall.
 * Frances's runs to sixty words. This is the same component at pull-quote
 * scale, so a long quote reads as a premium endorsement rather than a
 * paragraph shouted.
 *
 * The measure is wide rather than narrow: at 760px a sixty-word quote stacked
 * six lines deep and the panel read as a column of text. Running it across the
 * page costs two lines of depth and no legibility, because the type is
 * pull-quote size and not body size (Ben, 24 Sep 2026).
 */
.work-detail-cms .testimonial-slide blockquote {
	max-width: 1180px;
	font-size: calc(clamp(22px, 1.9vw, 30px) * var(--type-heading));
	line-height: 1.32;
	letter-spacing: normal;
}

@media screen and (min-width: 1101px) {
	.work-detail-cms .testimonial-slide blockquote {
		font-size: calc(clamp(24px, 2vw, 30px) * var(--type-heading));
	}
}

@media screen and (min-width: 1501px) {
	.work-detail-cms .testimonial-slide blockquote {
		font-size: calc(30px * var(--type-heading));
	}
}

/*
 * A CMS page's pictures are photographs of finished work, and the master's
 * sizes were set for the graphic panel that stands in for one. These give the
 * photographs the footprint they earn, at the same four widths as everything
 * else, and stay inside `work-detail-cms` so no frozen page moves (Ben,
 * 24 Sep 2026).
 */
/*
 * The outcome panel is white, which is right until the panel above it is also
 * white — a text-only section directly above turns the two into one long pale
 * block. The builder carries this class only in that case (work-generic.php).
 */
.work-detail-cms .work-rich-outcome-sand {
	background: var(--sand);
}

/*
 * The master's outcome copy is a single paragraph, so `margin: 0` never had a
 * second one to separate. A CMS page can carry more than one.
 */
.work-detail-cms .work-rich-outcome-copy p + p {
	margin-top: 15px;
}

@media screen and (min-width: 1101px) {
	.work-detail-cms .work-detail-idea-media {
		height: 520px;
	}

	/*
	 * The master's third column is `minmax(300px, 0.46fr)` — the width a small
	 * closing graphic needs. A photograph in that column rendered 300px wide
	 * beside two columns of type, which is the picture reading as an
	 * afterthought; narrowing the type to widen it only moved the problem into
	 * the heading, which then broke over six lines.
	 *
	 * So this is the proportion the theme already uses where the closing
	 * visual is a photograph rather than a graphic — `work-case-feature`'s
	 * 0.86 / 1.14 — with the heading and the copy stacked in the first column
	 * and the picture spanning both rows. The heading gets more room than the
	 * master's three-column split gave it, and the picture more than doubles.
	 */
	.work-detail-cms .work-rich-outcome-visual .work-rich-outcome-grid {
		grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
		align-items: start;
	}

	.work-detail-cms .work-rich-outcome-visual .work-rich-outcome-grid > :nth-child(1),
	.work-detail-cms .work-rich-outcome-visual .work-rich-outcome-grid > .work-rich-outcome-copy {
		grid-column: 1;
	}

	.work-detail-cms .work-rich-outcome-visual .work-closing-visual {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: stretch;
	}

	.work-detail-cms .work-closing-visual,
	.work-detail-cms .work-closing-visual img {
		min-height: 430px;
	}
}

@media screen and (min-width: 1501px) {
	.work-detail-cms .work-detail-idea-media {
		height: 640px;
	}

	.work-detail-cms .work-closing-visual,
	.work-detail-cms .work-closing-visual img {
		min-height: 530px;
	}
}

/* ------------------------------------------------------ panel rhythm */
/*
 * No two pale panels in a row share a background (Ben, 1 Oct 2026). The master colours each Work component by its type, so two white-by-type panels beside each other
 * read as one long panel (INFINOX: the brief, a text panel and the gallery, all white; 35 of 49 frozen pages stack at least one pair). `form_theme_work_apply_rhythm()`
 * (inc/work-detail-render.php) keeps each panel's own tone where it already differs from the panel above and flips it where it would not, by adding one of these classes.
 * They come last, and carry one more class than the component rules they settle, so they win without `!important`. High contrast makes `--sand` white (contrast.css),
 * so the alternation is a Standard and Larger text feature and High contrast stays one flat surface, as it was.
 */
.work-detail-page .work-tone-white {
	background: var(--white);
}

.work-detail-page .work-tone-sand {
	background: var(--sand);
}

/* The video section's sand is the master's lighter one. */
.work-detail-page .work-detail-video-section.work-tone-sand {
	background: var(--work-video-bg);
}