/* WordPress adapter for the Precision design.
   precision.css and pages.css are the Astro site's stylesheets, copied as-is.
   Core blocks write slightly different markup (wrapper divs, groups where the
   original had <li> and <dl>, block buttons), so this file maps the original
   rules onto the block class names and clears WordPress's default spacing. */

/* ---------- WordPress wrappers ---------- */

.wp-site-blocks,
.wp-block-post-content,
.wp-block-template-part {
	margin: 0;
	padding: 0;
}
:where(.wp-site-blocks) > *,
:where(.wp-block-post-content) > *,
:where(.wp-block-group) > * {
	margin-block: 0;
}
/* Zero-specificity, so the design's own margins (.hero-ctas, .page-ctas…) win. */
:where(.wp-block-image, .wp-block-quote, .wp-block-details, .wp-block-buttons, .wp-block-navigation) {
	margin: 0;
}
.wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}
:where(.wp-block-quote) {
	border: 0;
	padding: 0;
}
.wp-block-quote cite {
	font-style: normal;
}
mark.has-inline-color {
	background: none;
}
.has-accent-text-color {
	color: var(--accent-text) !important;
}
.wp-block-group.container {
	box-sizing: border-box;
}

/* ---------- Buttons: core Button block as .btn ----------
   Two classes deep, so these beat WordPress's global button rule in the editor too. */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	background: var(--accent-strong);
	color: var(--on-accent);
	font-family: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 6px 16px -6px rgb(11 18 32 / 0.35);
	transition:
		background-color 0.2s,
		border-color 0.2s,
		transform 0.2s var(--ease),
		box-shadow 0.2s;
}
.wp-block-button .wp-block-button__link:hover {
	background: var(--accent-deep);
	color: var(--on-accent);
}
.is-style-ghost > .wp-block-button__link {
	background: var(--glass);
	border-color: var(--line-strong);
	color: var(--text);
	box-shadow: none;
}
.is-style-ghost > .wp-block-button__link:hover {
	border-color: var(--text);
	background: var(--surface);
	color: var(--text);
}
/* The arrow, drawn as a mask so it takes the button's text colour. */
.wp-block-button:not(.no-arrow) > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s var(--ease);
}
.wp-block-button.arrow-down > .wp-block-button__link::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.wp-block-button .wp-block-button__link:hover::after {
	transform: translateX(3px);
}
.arrow-down > .wp-block-button .wp-block-button__link:hover::after {
	transform: translateY(3px);
}

/* Hero pills. */
.hero-ctas {
	gap: 14px;
}
.hero-ctas .wp-block-button__link {
	min-height: 58px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 600;
}
.hero-ctas .is-style-ghost > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
}
.hero-ctas .is-style-ghost > .wp-block-button__link:hover {
	border-color: var(--accent);
	background: transparent;
}
@media (max-width: 640px) {
	.hero-ctas .wp-block-button,
	.hero-ctas .wp-block-button__link {
		width: 100%;
	}
	.hero-ctas .wp-block-button__link {
		min-height: 54px;
		font-size: 17px;
	}
}
.story-cta {
	gap: 10px;
}
.case-btn {
	margin-top: auto;
}

/* CTA band on the night theme: the button turns white. */
:root[data-theme="dark"] .cta-band-in .wp-block-button__link {
	background: #fff;
	color: #0047ab;
}
/* Wide enough that the band's copy sets in two lines on desktop (it needs 56ch). */
.cta-band-in > p:not(.cta-band-note) {
	max-width: 60ch;
	text-wrap: pretty;
}

/* ---------- Top bar ---------- */

.site-header {
	position: relative;
	z-index: 50;
}
/* Logged in: the bar sits under the WordPress toolbar. */
.admin-bar .topbar {
	top: var(--wp-admin--admin-bar--height, 32px);
}
.topbar-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
	font-size: 15px;
	font-weight: 500;
}
.topbar .wp-block-navigation {
	font-size: 15px;
	font-weight: 500;
}
.nav-links .wp-block-navigation__container {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 36px);
}
.topbar .wp-block-navigation-item__content {
	color: var(--muted);
	padding: 0;
	transition: color 0.2s;
}
.topbar .wp-block-navigation-item__content:hover {
	color: var(--text);
}
.topbar .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
.nav-cta > .wp-block-button__link {
	min-height: 40px;
	padding: 9px 16px;
	font-size: 15px;
}
/* The Navigation block copies its class onto its inner <ul>, so the dropdown
   panel is nav.nav-links and the list inside it is reset. */
@media (max-width: 960px) {
	nav.nav-links {
		display: none !important;
	}
	nav.nav-links.open {
		display: flex !important;
	}
	ul.nav-links {
		position: static;
		display: flex !important;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.nav-links .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.nav-links .wp-block-navigation-item__content {
		display: block;
		padding: 14px 12px;
		border-radius: var(--radius);
		font-size: 17px;
	}
	.nav-links .wp-block-navigation-item__content:hover {
		background: var(--bg);
	}
}
@media (max-width: 640px) {
	.nav-cta > .wp-block-button__link {
		padding: 8px 12px;
		font-size: 14px;
	}
}
@media (max-width: 400px) {
	.topbar {
		gap: 12px;
	}
	.topbar-nav {
		gap: 10px;
	}
	.nav-cta > .wp-block-button__link {
		padding: 8px 10px;
		font-size: 13px;
	}
}

/* ---------- Footer ---------- */

.footer-in .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.footer-legal .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.footer-in .wp-block-navigation {
	color: var(--muted);
	font-size: 14px;
}
.footer-legal .wp-block-navigation {
	font-size: 13px;
}
.footer-legal .wp-block-navigation__container {
	gap: 20px;
}
.footer .wp-block-navigation-item__content {
	padding: 0;
}
.footer .wp-block-navigation-item__content:hover {
	color: var(--text);
}

/* ---------- Whole-card links ----------
   A card links through its title: the title's link stretches over the card. */

.svc-card,
.ind-card,
.door,
.site-card,
.case-suggest-card,
.post-card,
.ind-site {
	position: relative;
}
.svc-name a::after,
.ind-card h2 a::after,
.door-go a::after,
.site-name a::after,
.case-suggest-card .ind-go a::after,
.post-card .wp-block-post-title a::after,
.ind-site .wp-block-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ind-site {
	display: grid;
	gap: 12px;
}

/* ---------- Hero ---------- */

.hero-rating::before {
	content: "★★★★★";
	color: #f5b301;
	letter-spacing: 2px;
	font-size: 14px;
}
.hero-rating strong {
	color: var(--text);
	font-weight: 700;
}

/* ---------- Work: client sites ---------- */

.site-card {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s;
}
.site-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.site-bar::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 26px;
	border-radius: 50%;
	background: var(--line-strong);
	box-shadow:
		13px 0 0 var(--line-strong),
		26px 0 0 var(--line-strong);
}
.site-bar code {
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 4px;
	background: var(--surface);
	font: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site-img {
	aspect-ratio: 3 / 2;
}
.site-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: top;
	transition: transform 0.6s var(--ease);
}
.site-card:hover .site-img img {
	transform: scale(1.03);
}
/* precision.css styles .site-card a as the whole card; here the link is the
   name, stretched over the card, so it drops those card styles. */
.site-card a,
.site-card a:hover {
	display: inline;
	height: auto;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}
.site-name {
	grid-column: 1;
}
/* The arrow: a grid item in the meta's second column, as on the Astro site. */
.site-meta::after {
	content: "";
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	width: 20px;
	height: 20px;
	background: var(--accent-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-name {
	font-size: 26px;
	line-height: 1;
}
.site-result strong {
	color: var(--accent-text);
	font-size: 16px;
	margin-right: 4px;
}

/* ---------- System: story cards ---------- */

.eco-pinned {
	height: calc(var(--steps, 9) * 72svh + 100svh);
}
.eco-card-stack {
	position: relative;
}
.story-cta {
	display: flex;
}

/* ---------- Stacked panels ----------
   The first panel lives in the page content and the booking panel in the
   front-page template. Sticky only holds inside its parent, so the content
   wrapper steps aside and both panels share <main>, letting the booking
   panel slide up over the proof panel. */

.site-main > .wp-block-post-content:has(> .stack-panel) {
	display: contents;
}

/* ---------- Proof: case cards on the homepage ---------- */

.case-stat .case-stat-l {
	grid-column: 2;
	grid-row: 1;
	font-size: 14px;
	color: var(--muted);
}
.case-stat .case-stat-n {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	font-size: 34px;
	white-space: nowrap;
	color: var(--accent-text);
}
@media (max-width: 640px) {
	.case-stat .case-stat-n {
		font-size: 26px;
	}
}

/* Quotes */
.qstat-n {
	font-size: 48px;
	color: var(--accent-text);
}
.qstat-l {
	font-size: 13px;
	line-height: 1.35;
	color: var(--muted);
	padding-top: 4px;
}
.qstat-l strong {
	color: var(--text);
	font-size: 12px;
	font-weight: 700;
}
.qcard .wp-block-quote {
	font-size: 15px;
	color: var(--text);
}
.qcard.big .wp-block-quote {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.02;
}
.qwho .who {
	display: grid;
	line-height: 1.35;
}
.qwho .who br {
	display: none;
}

/* Industry doors: the art sits behind the copy. */
.door::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--glow-1) 55%, transparent), transparent 40%),
		radial-gradient(circle at 10% 110%, color-mix(in srgb, var(--glow-2) 40%, transparent), transparent 42%),
		linear-gradient(color-mix(in srgb, var(--shade) 4.5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, color-mix(in srgb, var(--shade) 4.5%, transparent) 1px, transparent 1px) 0 0 / 32px 32px;
	transition: transform 0.8s var(--ease);
}
.door:hover::before {
	transform: scale(1.06);
}
/* An odd door out runs the full width rather than sitting alone in a column. */
.door:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.door-go a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.door-go a::before,
.ind-go::after,
.ind-go a::before {
	content: "";
	order: 2;
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s var(--ease);
}
.ind-go:has(a)::after {
	content: none;
}
.door:hover .door-go a::before,
.ind-card:hover .ind-go::after,
.case-suggest-card:hover .ind-go a::before {
	transform: translateX(4px);
}

/* Plan steps */
.plan-steps > .plan-item {
	display: flex;
	gap: 22px;
	padding: 22px 24px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.plan-step-h {
	font-size: 30px;
	color: var(--text);
}
.plan-cta {
	margin-top: 12px;
}

/* ---------- FAQ: the Details block ---------- */

.faq-item summary {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.2s;
}
.faq-item summary:hover {
	color: var(--accent-text);
}
.faq-item summary::marker {
	content: "";
}
/* The plus/minus button, drawn with gradients on one pseudo-element. */
.faq-item summary::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background:
		linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat,
		var(--surface);
	transition:
		background-color 0.2s,
		border-color 0.2s;
}
.faq-item[open] summary::after {
	border-color: var(--accent-line);
	background:
		linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
		var(--accent-soft);
}
.faq-item > p {
	max-width: 62ch;
	padding: 0 56px 24px 0;
	color: var(--muted);
}
@media (max-width: 640px) {
	.faq-item summary {
		font-size: 16px;
	}
	.faq-item > p {
		padding-right: 0;
	}
}

/* ---------- Book ---------- */

.book-h {
	display: grid;
}
.book-h .fit mark {
	color: inherit;
}

/* ---------- Inner pages ---------- */

/* Yoast SEO's breadcrumbs block. Its separator is plain text in the inner span, so
   that span's colour is the separator's. */
.crumbs .yoast-breadcrumbs > span {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 14px;
	color: var(--line-strong);
}
.crumbs .yoast-breadcrumbs > span > span {
	color: var(--soft);
}
.crumbs a:hover {
	color: var(--text);
}
.crumbs .yoast-breadcrumbs > span > span:last-child,
.crumbs .yoast-breadcrumbs > span > span:last-child a {
	color: var(--muted);
}
.page-ctas {
	gap: 12px;
}
.page-hero-art .wp-block-image,
.page-hero-art figure {
	display: grid;
	gap: 12px;
}

.split-body p + p {
	margin-top: 16px;
}
.lead-gap {
	margin-bottom: 28px;
}

.points > * {
	padding-block: 28px;
	border-top: 1px solid var(--line);
}
.points h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.points p {
	margin-top: 10px;
	max-width: 52ch;
	color: var(--muted);
	line-height: 1.65;
}

/* Service cards */
.svc-card {
	padding: 28px 28px 72px;
}
.svc-card::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: 24px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent-pale);
	transition: transform 0.3s var(--ease);
}
.svc-card::before {
	content: "";
	position: absolute;
	left: 36px;
	bottom: 32px;
	z-index: 1;
	width: 20px;
	height: 20px;
	background: var(--accent-deep);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s var(--ease);
}
.svc-card:hover::after,
.svc-card:hover::before {
	transform: translateX(4px);
}

/* Result numbers */
.proof-nums .proof-n {
	font-size: clamp(56px, 6vw, 88px);
	color: var(--accent-text);
}
.proof-nums .proof-l {
	font-size: 17px;
	color: var(--text);
}
.proof-nums .proof-who {
	font-size: 14px;
	color: var(--soft);
}
.case-nums .proof-n {
	white-space: nowrap;
}
.case-lead .proof-n {
	font-size: clamp(72px, 9vw, 136px);
}
.case-nums > div:not(.case-lead) .proof-n {
	font-size: clamp(44px, 4.4vw, 64px);
}
.case-nums-sm > div:not(.case-lead) .proof-n {
	font-size: clamp(40px, 3.6vw, 52px);
}
@media (max-width: 560px) {
	.case-lead .proof-n {
		font-size: clamp(56px, 16vw, 72px);
	}
}

/* Pull quote: the Quote block with the card around it. */
.pull-quote p {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.05;
	text-wrap: pretty;
}
.pull-quote cite {
	display: block;
	margin-top: 18px;
	font-size: 15px;
	color: var(--muted);
}
.pull-quote cite strong {
	color: var(--text);
}
.case-quote.is-long {
	display: grid;
	gap: 14px;
}
.case-quote.is-long p {
	font-size: clamp(26px, 2.4vw, 34px);
}
.case-quote.is-long p + p {
	font-family: var(--font-body);
	font-weight: 400;
	letter-spacing: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--muted);
}
.case-quote.is-long cite {
	margin-top: 4px;
}

/* Industries */
.ind-card .ind-go::after {
	order: 0;
}
.ind-site .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.ind-site-name strong {
	font-weight: 600;
}
.ind-site-line {
	font-size: 14px;
	color: var(--soft);
}

/* About */
.stats .stat-n {
	font-size: clamp(56px, 6vw, 88px);
	color: var(--accent-text);
}
.stats .stat-l {
	margin-top: 6px;
	color: var(--muted);
	line-height: 1.5;
}
.vs .wp-block-list {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	font-size: 18px;
}
.team-member {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
	line-height: 1.4;
}
.team-member .who br {
	display: none;
}
.team-member strong {
	display: block;
	margin-bottom: 2px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}
.ratings {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Case studies */
.cols-1 {
	--cols: 1;
}
.cols-2 {
	--cols: 2;
}
.cols-3 {
	--cols: 3;
}
.cols-4 {
	--cols: 4;
}
.case-facts-list > div {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 12px;
	padding-block: 12px;
	border-top: 1px solid var(--line);
}
.case-facts-list > div:first-child {
	border-top: 0;
	padding-top: 0;
}
.case-fact-l {
	font-size: 14px;
	color: var(--soft);
}
.case-fact-v {
	font-weight: 500;
	line-height: 1.45;
}
.case-cards > *,
.case-steps > * {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.case-band .case-cards > * {
	background: var(--bg);
	box-shadow: none;
}
.case-cards > * > p:not(.case-card-h),
.case-steps > * > p:not(.case-step-n) {
	color: var(--muted);
	line-height: 1.65;
}
.case-steps h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.case-fig img,
.case-cover img {
	width: 100%;
}
.case-fig figcaption,
.case-cover figcaption {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--soft);
}
.case-shots .case-fig img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top;
}
.case-goals h3 {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 600;
}
.case-goals > div + div h3 {
	font-size: 16px;
	color: var(--muted);
}
.case-after h3:not(.display) {
	margin-top: 12px;
	font-size: 20px;
	font-weight: 600;
}

.case-suggest-card {
	grid-template-rows: auto 1fr;
}
.case-suggest-img {
	aspect-ratio: 16 / 10;
}
.case-suggest-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: top;
}
.case-suggest-n {
	font-size: 20px;
	line-height: 1.2;
	color: var(--accent-text);
}
.case-suggest-body .case-suggest-name {
	margin: 0;
}
.case-suggest-body .ind-go a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.case-card h2 a,
.ind-card h2 a {
	color: inherit;
}

/* ---------- Blog ---------- */

/* Three across on desktop, two on tablets, one on phones. */
.post-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.post-cards > li {
	display: grid;
}
.post-cards .post-card-body {
	padding: 24px 26px 28px;
}
.post-cards .post-card .wp-block-post-title {
	font-size: clamp(24px, 2vw, 30px);
}
@media (max-width: 1100px) {
	.post-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 760px) {
	.post-cards {
		grid-template-columns: 1fr;
	}
}
/* Category on its own line above the title, date beside "Read more":
   each stays on one line whatever the category is called. */
.post-card .wp-block-post-terms.post-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.post-card-foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	white-space: nowrap;
}
.post-byline > * + *::before {
	content: "·";
	margin-right: 6px;
}
.post-card .wp-block-post-title {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.05;
	text-wrap: balance;
}
.post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--muted);
	line-height: 1.6;
}
.post-card .wp-block-post-excerpt__more-text {
	display: none;
}
/* The photo runs edge to edge across the top; the text sits padded below. */
.post-card {
	grid-template-rows: auto 1fr;
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.post-card-img {
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
}
.post-card-img img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.post-card:hover .post-card-img img {
	transform: scale(1.03);
}
.post-card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 32px 32px;
}
.post-card .post-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--accent-deep);
	text-decoration: none;
}
@media (max-width: 760px) {
	.post-card {
		padding: 0;
	}
	.post-card-body {
		padding: 22px 24px 24px;
	}
}
/* Post page: the featured photo under the title. */
.post-hero-img {
	margin-top: clamp(32px, 4vw, 56px);
}
.post-hero-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
/* Images in a post's body: rounded like the featured photo, set off from the text. */
.prose .wp-block-image {
	--wide: min(125%, calc(100vw - 2 * var(--gutter)));
	width: var(--wide);
	max-width: none;
	margin-block: 2em;
	margin-inline: calc((100% - var(--wide)) / 2);
}
.prose .wp-block-image img {
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
}
.prose .wp-block-image figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--soft);
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.post-card .post-go::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.post-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
}
.page-hero:has(.post-byline) .page-h1 {
	max-width: 22ch;
	font-size: clamp(40px, 5vw, 76px);
}
.prose .wp-block-post-content > * + * {
	margin-top: 1.1em;
}
.prose .wp-block-post-content > h2 {
	margin-top: 2em;
}
.prose .wp-block-post-content > h3,
.prose .wp-block-post-content > h4 {
	margin-top: 1.6em;
}
.prose .wp-block-quote {
	position: relative;
	margin-block: 1.6em;
	padding-left: 1.4em;
	color: var(--text);
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.45;
}
.prose .wp-block-quote::before {
	content: "\201C";
	position: absolute;
	left: -0.05em;
	top: -0.18em;
	font-family: var(--font-display);
	font-size: 2.4em;
	line-height: 1;
	color: var(--accent-text);
}
/* Tables in a post: a rounded card with hairline rows, scrolling sideways on
   narrow screens rather than squeezing. Overrides WordPress's boxed cells. */
.prose .wp-block-table {
	margin-block: 2em;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.prose .wp-block-table table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.5;
}
.prose .wp-block-table :is(th, td) {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.prose .wp-block-table tr:last-child td {
	border-bottom: 0;
}
.prose .wp-block-table thead {
	border: 0;
}
.prose .wp-block-table thead th {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line-strong);
	color: var(--text);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.prose .wp-block-table td:first-child {
	color: var(--text);
}
.prose .wp-block-table figcaption {
	padding: 10px 18px;
	font-size: 14px;
	color: var(--soft);
}
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
}

/* ---------- Service page header art ---------- */

.art {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 1000 / 700;
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.art-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	height: 700px;
	transform-origin: 0 0;
	scale: tan(atan2(100cqw, 1000px));
}
.art-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--shade) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--shade) 7%, transparent) 1px, transparent 1px);
	background-size: 50px 50px;
	background-position: -1px -1px;
	mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 40%, transparent 100%);
}
.art-wires {
	position: absolute;
	inset: 0;
	overflow: visible;
}
.art .node.art-dim {
	opacity: 0.55;
}
.art .node-in {
	overflow: hidden;
}
.sk.full {
	gap: 14px;
}
.sk-strategy .cmp {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 10px;
	align-items: end;
	margin-top: 6px;
}
.sk-strategy .cmp i {
	border-radius: 4px;
}
.sk-strategy .cmp .you {
	height: 70px;
	background: var(--accent-strong);
}
.sk-strategy .cmp .them {
	height: 46px;
	background: var(--sk);
}
.sk-seo.full i.res {
	display: block;
}
.sk-seo.full i.res.hi {
	height: 64px;
}
.sk-reviews.full i.s {
	display: block;
}
.sk-paid.full i.ad {
	height: 72px;
}
.sk-paid.full i.ad:first-child {
	background: var(--sk-blue-2);
}
.sk-content.full i.img {
	height: 92px;
}
.sk-social.full {
	grid-template-columns: repeat(3, 1fr);
}
.sk-social.full i.tile {
	height: 120px;
	border-radius: 4px;
	background: var(--sk);
}
.sk-social.full i.tile:nth-child(2) {
	background: var(--sk-blue-2);
}
.sk-social.full i.line,
.sk-sales.full i.line {
	grid-column: 1 / -1;
	height: 14px;
}
.sk-website.full .wf-hero {
	height: 110px;
}
.sk-website.full .wf-cols i {
	height: 34px;
}
.sk-website.full .wf-btn {
	width: 130px;
	height: 22px;
}
.sk-forms.full i.field,
.sk-forms.full i.submit {
	height: 28px;
}
.sk-crm.full .bars {
	height: 110px;
}
.sk-email.full > i {
	height: 22px;
	background: var(--sk);
}
.sk-email.full > i.hi {
	background: var(--sk-blue-2);
}
.sk-sales.full i.deal {
	height: 120px;
}
.sk.dim {
	gap: 10px;
}
.sk-crm.dim .bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 60px;
}
.sk-crm.dim .bars i {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: var(--sk-blue);
}
.sk-paid.dim i.ad,
.sk-sales.dim i.deal {
	height: 60px;
}
.sk-content.dim i.img {
	height: 44px;
}
.sk-website.dim .wf-hero {
	height: 48px;
}

/* ---------- Reveal ---------- */

.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.45s linear,
		transform 0.45s linear;
}
.js .reveal.in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Under a post: call to action, author box, more from the blog ---------- */

/* The article text is 52ch wide (in its own type size). The author box shares
   that column; the call to action and the post's photos run 25% wider (65ch),
   centred on it. */
.author-box {
	max-width: calc(52ch + 2 * var(--gutter));
	font-size: clamp(17px, 1.3vw, 18px);
}
.post-hero-img {
	max-width: calc(65ch + 2 * var(--gutter));
	font-size: clamp(17px, 1.3vw, 18px);
}
/* The excerpt under the photo: a lead-in as wide as the photo. */
.post-lede {
	max-width: calc(65ch + 2 * var(--gutter));
	margin-top: clamp(40px, 5vw, 56px);
	font-size: clamp(17px, 1.3vw, 18px); /* the article's, so ch measures the same */
}
.post-lede .wp-block-post-excerpt__excerpt,
.post-lede > p {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.5;
	color: var(--text);
}
/* A post's own call to action, inside the article: as wide as its photos. */
.prose .post-cta-inline {
	--wide: min(125%, calc(100vw - 2 * var(--gutter)));
	width: var(--wide);
	max-width: none;
	margin-block: 2em;
	margin-inline: calc((100% - var(--wide)) / 2);
}
.post-cta-in {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(120% 90% at 50% 120%, rgb(0 71 171 / 0.55), transparent 60%),
		linear-gradient(160deg, #13203a, #0b1220 70%);
	color: #fff;
	text-align: center;
}
/* Two classes, so the article's own heading style (.prose h2) doesn't win */
.post-cta .post-cta-in h2 {
	margin-top: 0;
	color: #fff;
	font-size: clamp(34px, 3.6vw, 48px);
	line-height: 1.02;
	text-wrap: balance;
}
.post-cta-in h2 mark {
	color: #9dbcf0 !important;
}
.post-cta-in > p:not(.post-cta-note) {
	max-width: 40ch;
	font-size: 17px;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.84);
}
.post-cta-in .wp-block-buttons {
	margin-top: 8px;
}
.post-cta-in .wp-block-button .wp-block-button__link {
	background: #fff;
	color: #0047ab;
}
.post-cta-in .wp-block-button .wp-block-button__link:hover {
	background: #e6eefa;
	color: #0047ab;
}
.post-cta-note {
	font-size: 14px;
	color: rgb(255 255 255 / 0.6);
}

/* Table of contents (blocks/post-toc). Narrow screens: a closed box above the
   article, as wide as its text. From 1400px: a list in the left margin that
   sticks under the top bar until the article ends, kept open by precision.js.
   The article stays centred on the photo and author box either way. */
.post-body {
	font-size: clamp(17px, 1.3vw, 18px); /* the article's, so ch measures the same */
}
.prose h2[id] {
	scroll-margin-top: calc(var(--topbar-h) + 24px);
}
.post-toc {
	box-sizing: border-box;
	max-width: calc(52ch + 2 * var(--gutter));
	margin: clamp(40px, 5vw, 56px) auto 0;
	padding-inline: var(--gutter);
}
.post-toc + .prose {
	padding-top: clamp(40px, 5vw, 56px);
}
.post-toc-box {
	font-size: 15px;
	line-height: 1.45;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.post-toc-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	color: var(--text);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.post-toc-title::-webkit-details-marker {
	display: none;
}
.post-toc-title::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--soft);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s var(--ease);
}
.post-toc-box[open] > .post-toc-title::after {
	transform: rotate(180deg);
}
.post-toc-list {
	margin: 0;
	padding: 0 18px 16px;
	list-style: none;
}
.post-toc-list a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	transition:
		color 0.2s,
		border-color 0.2s;
}
.post-toc-list a:hover {
	color: var(--text);
	border-left-color: var(--line-strong);
}
.post-toc-list a[aria-current] {
	color: var(--accent-deep);
	border-left-color: var(--accent);
	font-weight: 500;
}
:root[data-theme="dark"] .post-toc-list a[aria-current] {
	color: var(--accent-text);
}
@media (min-width: 1400px) {
	.post-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) calc(52ch + 2 * var(--gutter)) minmax(0, 1fr);
		align-items: start;
	}
	.post-body > .prose {
		grid-area: 1 / 2;
		padding-top: clamp(64px, 8vw, 120px);
	}
	/* Its right edge clears the article's photos, which run 6.5ch past the text. */
	.post-toc {
		grid-area: 1 / 1;
		position: sticky;
		top: calc(var(--topbar-h) + var(--wp-admin--admin-bar--height, 0px) + 32px);
		display: flex;
		justify-content: flex-end;
		max-width: none;
		margin: clamp(64px, 8vw, 120px) 0 0;
		padding-inline: var(--gutter) calc(6.5ch - var(--gutter) + 32px);
	}
	.post-toc-box {
		width: min(100%, 248px);
		max-height: calc(100vh - var(--topbar-h) - var(--wp-admin--admin-bar--height, 0px) - 64px);
		overflow-y: auto;
		border: 0;
		border-radius: 0;
		background: none;
		scrollbar-width: thin;
	}
	.post-toc-title {
		padding: 0 0 12px;
		font-size: 14px;
		font-weight: 500;
		color: var(--soft);
		cursor: default;
		pointer-events: none;
	}
	.post-toc-title::after {
		content: none;
	}
	.post-toc-list {
		padding: 0;
		font-size: 14px;
	}
}

/* Author box: set off from the article above it */
.author-box {
	padding-top: clamp(48px, 6vw, 72px);
}
.author-box-in {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 24px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.author-box-photo img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var(--accent-line);
	object-fit: cover;
}
.author-box-body {
	display: grid;
	gap: 4px;
}
.author-box-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--soft);
}
.author-box-name {
	font-size: clamp(26px, 2.4vw, 32px);
}
.author-box-name a {
	color: var(--text);
	text-decoration: none;
}
.author-box-name a:hover {
	color: var(--accent-text);
}
.author-box-bio {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--muted);
}
.author-linkedin {
	display: inline-grid;
	place-items: center;
	justify-self: start;
	width: 32px;
	height: 32px;
	margin-top: 8px;
	border-radius: 8px;
	color: var(--accent-text);
	background: var(--accent-pale);
	transition: background-color 0.2s;
}
.author-linkedin:hover {
	background: var(--accent-soft);
}
@media (max-width: 560px) {
	.author-box-in {
		grid-template-columns: 1fr;
	}
}

/* More from the blog: the call to action under it brings its own top spacing */
.related-posts {
	padding-bottom: 0;
}
.related-posts .post-card .wp-block-post-title {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.08;
	text-wrap: balance;
}

/* An embed in a post (a Google Slides deck): full width at 16:9. */
.prose .post-embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-lg);
}

/* A link in a post CTA's text: white on the navy box. */
.prose .post-cta-in p a {
	color: #fff;
}

/* Blog: "Load more posts" under the cards (a Query Pagination next link). */
.post-query .load-more {
	margin-top: clamp(40px, 5vw, 64px);
}
.post-query .load-more .btn[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

/* Our Work: twelve cards, then "Show more case studies" (precision.js reveals the
   rest). The button is a core Button, so it gets the same spacing and centring. */
.case-suggest.is-paged > .is-hidden {
	display: none;
}
.show-more-cases {
	display: none;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 64px);
}
.js .show-more-cases {
	display: flex;
}

/* Our Work: the project showcases, a plain list under the cards. With JS it shows
   once every card has (precision.js adds .is-shown). */
.js .showcases:not(.is-shown) {
	display: none;
}
.showcase-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}
.showcase-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.showcase-list .showcase-thumb {
	width: 96px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--surface);
}
.showcase-list strong {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text);
}
.showcase-list a {
	color: var(--accent-text);
	font-weight: 600;
}

/* Grunt Test (/grunt-test/): bullet lists in the points grid, the form slot's
   link-out state, the quote row and the note under the options list. */
.gt-points .wp-block-list {
	display: grid;
	gap: 8px;
	margin-top: 12px;
	padding-left: 1.1em;
	list-style: disc;
	color: var(--muted);
	line-height: 1.6;
}
.gt-points .wp-block-list li {
	padding: 0;
	border: 0;
}
.gt-reasons {
	display: grid;
	gap: 8px;
	margin-top: 8px;
	padding-left: 1.1em;
	list-style: disc;
}
.split-body .gt-reasons + p {
	margin-top: 16px;
}
.cta-band-note a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.gt-form-link {
	display: grid;
	gap: 16px;
	justify-items: start;
}
.gt-form-h {
	font-size: 24px;
	font-weight: 600;
}
.gt-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.gt-quotes .pull-quote p {
	font-size: clamp(24px, 2vw, 30px);
}
@media (max-width: 960px) {
	.gt-quotes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Short case study (one live write-up in the case-study design) ---------- */

/* Results: two or three big numbers, the live words that date them underneath. */
.short-nums .proof-n,
.case-nums.short-nums > div:not(.case-lead) .proof-n {
	font-size: clamp(64px, 7vw, 104px);
}
.short-proof-note {
	max-width: 52ch;
	margin-top: 20px;
	color: var(--muted);
	line-height: 1.6;
}

/* The story: problem, what we did, result, as headed rows split by hairlines. */
.short-row + .short-row {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--line);
}
.short-row .section-title.small {
	margin-bottom: 0;
}

/* The work: the screens beside the colour palette, then each set of views. */
.short-work-top {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.short-palette {
	padding: 24px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.short-palette-h,
.short-work-h {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--soft);
}
.short-palette ul {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}
.short-palette li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
}
.swatch-chip {
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.swatch-name {
	font-weight: 500;
	color: var(--text);
}
.swatch-hex {
	font-size: 13px;
	color: var(--soft);
}
.short-work-group {
	margin-top: clamp(48px, 6vw, 80px);
}
.short-shots {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: 20px;
	align-items: center;
	margin-top: 20px;
}
.short-shots .case-fig img {
	width: 100%;
	height: auto;
}
@media (max-width: 960px) {
	.short-work-top {
		grid-template-columns: 1fr;
	}
	.short-shots {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.short-shots {
		grid-template-columns: 1fr;
	}
}

/* Short case study, continued: pages without results, the story's statement line and lists. */
.short-glance.no-proof {
	grid-template-columns: minmax(0, 1fr);
}
.short-glance.no-proof .case-facts-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0 32px;
}
.short-glance.no-proof .case-facts-list > div:first-child {
	border-top: 1px solid var(--line);
	padding-top: 12px;
}
.short-story-intro {
	max-width: 22ch;
	margin-bottom: clamp(40px, 5vw, 72px);
	font-size: clamp(36px, 4.2vw, 60px);
	line-height: 1.02;
	text-wrap: balance;
}
.short-list li strong {
	color: var(--text);
	font-weight: 600;
}
.short-work-top.is-single {
	grid-template-columns: minmax(0, 1fr);
}
.short-work-p {
	margin-top: 10px;
}
.short-shots.cols-1 {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 961px) {
	.short-shots.cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
/* Results that don't fit one row at full size: four go two by two, three go smaller. */
.case-nums.short-nums.cols-4 {
	--cols: 2;
}
.case-nums.short-nums.cols-3 > div:not(.case-lead) .proof-n {
	font-size: clamp(44px, 4.4vw, 64px);
}
@media (max-width: 560px) {
	.case-nums.short-nums > div:not(.case-lead) .proof-n {
		font-size: clamp(52px, 15vw, 72px);
	}
}

/* ---------- Podcast ---------- */

/* The show's white logo on a dark tile (the cover art's navy), so it reads in both themes. */
.podcast-logo {
	margin: 0;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background: #2a3140;
	box-shadow: var(--shadow-lg);
}
.podcast-logo img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin-inline: auto;
}

/* The platforms' own subscribe badges (rocketship/podcast-badges), one height, side
   by side: the dark badges in the light theme, the light ones in the dark theme. */
.podcast-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.page-hero-text .podcast-badges {
	margin-top: 28px;
}
.podcast-badge img {
	display: block;
	width: auto;
	height: 46px;
	transition: transform 0.2s var(--ease);
}
.podcast-badge:hover img {
	transform: translateY(-2px);
}
.podcast-badge .on-dark,
:root[data-theme="dark"] .podcast-badge .on-light {
	display: none;
}
:root[data-theme="dark"] .podcast-badge .on-dark {
	display: block;
}
/* An episode's YouTube video (rocketship/episode-video), where a post has its photo:
   16:9, framed like the photo. */
.episode-video {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	background: #0b1220;
}
.episode-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* An episode's player (rocketship/episode-player), then the badges for the episode. */
.episode-player {
	margin-bottom: clamp(32px, 4vw, 48px);
}
.episode-player .podcast-badges {
	margin-top: 16px;
}
.episode-player .podcast-badge img {
	height: 40px;
}

/* An episode's transcript, closed under the show notes; opens like the FAQs. */
.episode-transcript {
	max-width: calc(52ch + 2 * var(--gutter)); /* The show notes' width (.prose). */
	font-size: clamp(17px, 1.3vw, 18px);
	padding-bottom: clamp(48px, 6vw, 80px);
}
.episode-transcript-box {
	border-block: 1px solid var(--line);
}
.episode-transcript-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 600;
	transition: color 0.2s;
}
.episode-transcript-title::-webkit-details-marker {
	display: none;
}
.episode-transcript-title:hover {
	color: var(--accent-text);
}
.episode-transcript-title::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background:
		linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat,
		var(--surface);
}
.episode-transcript-box[open] .episode-transcript-title::after {
	border-color: var(--accent-line);
	background:
		linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
		var(--accent-soft);
}
.episode-transcript-text {
	padding: 0 0 28px;
	max-height: 70vh;
	overflow-y: auto;
}
/* The episode body shares the blog's grid, whose left column is the contents list. */
@media (min-width: 1400px) {
	.post-body > .episode-transcript {
		grid-area: 2 / 2;
		width: 100%;
	}
}

/* The episode list (a Query Loop on the podcast page): the episode's artwork on the
   left, then its title, summary and a "Listen or Watch Now" button. The title's link
   covers the whole card. Stacks on narrow screens. */
.episode-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.episode-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 12px 36px;
	margin: 0;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition:
		border-color 0.2s,
		box-shadow 0.3s,
		transform 0.3s var(--ease);
}
.episode-card:hover {
	border-color: var(--accent-line);
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}
.episode-card-img {
	align-self: start;
	margin: 0;
}
.episode-card-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius);
}
.episode-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.episode-card-title {
	margin: 6px 0 0;
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-tracking);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.05;
	text-wrap: balance;
}
.episode-card-title a {
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s;
}
.episode-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.episode-card:hover .episode-card-title a {
	color: var(--accent-text);
}
.episode-card-text,
.episode-card-text p {
	margin: 0;
	color: var(--muted);
	line-height: 1.6;
}
/* The theme's primary button. */
.episode-card-go {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: var(--radius);
	background: var(--accent-strong);
	color: var(--on-accent);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 6px 16px -6px rgb(11 18 32 / 0.35);
	transition: background-color 0.2s;
}
.episode-card:hover .episode-card-go {
	background: var(--accent-deep);
}
@media (max-width: 860px) {
	.episode-card {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}
}

/* The audio player (WordPress's MediaElement): a night-shade bar with brand-blue
   progress in the light theme; in the dark theme a navy a step lighter than the
   cards, so it stands off them. */
.mejs-container.wp-audio-shortcode,
.wp-audio-shortcode .mejs-controls {
	background: #0b1220;
	border-radius: var(--radius);
}
.wp-audio-shortcode .mejs-time-rail .mejs-time-current,
.wp-audio-shortcode .mejs-horizontal-volume-current {
	background: #2563eb;
}
.wp-audio-shortcode .mejs-time-rail .mejs-time-total {
	background: rgb(255 255 255 / 0.18);
}
:root[data-theme="dark"] .mejs-container.wp-audio-shortcode,
:root[data-theme="dark"] .wp-audio-shortcode .mejs-controls {
	background: #1c2a44;
}
:root[data-theme="dark"] .wp-audio-shortcode .mejs-time-rail .mejs-time-current,
:root[data-theme="dark"] .wp-audio-shortcode .mejs-horizontal-volume-current {
	background: #3b82f6;
}