/*
Theme Name:  Domestic Operating
Theme URI:   https://domestic.leadcroc.dev
Description: Custom child theme of Twenty Twenty-Five for the Domestic Operating site. Bespoke tokens, templates, parts, patterns and styles live here so the parent theme stays updatable.
Author:      Domestic Operating
Template:    twentytwentyfive
Version:     0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domestic-operating
Tags: block-theme, full-site-editing, custom-colors, custom-menu, editor-style
*/

/*
 * Color, type and spacing tokens live in theme.json so the block editor
 * resolves them too. This sheet holds the component styles that the
 * theme.json schema cannot express, and it loads after the parent stylesheet.
 *
 * Class vocabulary: every section the page uses carries a do- prefixed class
 * set on the block in the editor, so the layout survives content edits.
 */

:root {
	--do-navy: var(--wp--preset--color--navy, #16273F);
	--do-navy-hover: var(--wp--preset--color--navy-hover, #1F3557);
	--do-navy-light: var(--wp--preset--color--navy-light, #2A4571);
	--do-mist: var(--wp--preset--color--mist, #E6EBF2);
	--do-mist-light: var(--wp--preset--color--mist-light, #EDF1F7);
	--do-line: var(--wp--preset--color--line, #C8D2E0);
	--do-gold: var(--wp--preset--color--gold, #E0B26A);
	--do-white: #FFFFFF;
	--do-section-y: clamp(56px, 7vw, 104px);
	--do-radius: 2px;
	--do-shadow: 0 3px 10px rgba(22, 39, 63, 0.10);
	--do-shadow-lg: 0 14px 38px rgba(22, 39, 63, 0.16);
}

/* ---------------------------------------------------------------- Base */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* Wrapped in :where() so it neutralises browser defaults at zero specificity
   and never outranks a component rule below. */
:where(.do-section h2, .do-section h3, .do-section h4) {
	margin-block: 0;
}

.do-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--do-navy-light);
	margin-bottom: 10px;
}

.do-section--navy .do-eyebrow,
.do-hero .do-eyebrow {
	color: var(--do-gold);
}

/* ------------------------------------------------------------ Sections */

.do-section {
	padding-top: var(--do-section-y);
	padding-bottom: var(--do-section-y);
}

.do-section--mist {
	background-color: var(--do-mist);
}

.do-section--mist-light {
	background-color: var(--do-mist-light);
}

.do-section--navy {
	background-color: var(--do-navy);
	color: var(--do-mist);
}

.do-section--navy :is(h1, h2, h3, h4, p, li, td, th) {
	color: inherit;
}

.do-section__head {
	max-width: 780px;
}

/* A header row with the heading on the left and an action on the right. */
.do-section__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 40px;
}

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

/*
 * An inset, rounded panel. The drilling loop runs behind a light wash, which
 * is what keeps navy type — and the transparent nav bar sitting over it —
 * readable. The bar is fixed, so the panel carries its height as top padding
 * and the header stops reserving it (see the opt-out under Navigation).
 */

.do-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: clamp(6px, 1vw, 10px);
	padding: 0;
	border-radius: clamp(14px, 2vw, 25px);
	min-height: min(1120px, max(620px, 92svh));
	color: var(--do-navy);
}

.do-hero :is(h1, h2, h3, p),
.do-hero .wp-block-cover__inner-container {
	color: var(--do-navy);
}

/* The source clip is portrait and framed high, so it is covered and anchored
   to the top where the rig sits, rather than centred. */
.do-hero video,
.do-hero .wp-block-cover__video-background {
	object-fit: cover;
	object-position: center center;
	transform: scaleX(-1);
}

.do-hero .wp-block-cover__inner-container {
	width: 100%;
}

.do-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding-block: calc(var(--do-nav-h, 88px) + 24px) clamp(32px, 4vw, 56px);
}

.do-hero__title {
	font-size: clamp(30px, 3.8vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0;
}

.do-hero__lead {
	font-size: 17px;
	line-height: 28px;
	max-width: 490px;
	margin: 32px 0 0;
}

.do-hero__actions {
	margin-top: 28px;
	gap: 15px;
}

.do-hero__actions .wp-block-button__link {
	font-size: 17px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0;
	padding: 16px 26px;
	border-radius: 8px;
	border: 1px solid var(--do-navy);
}

.do-hero__actions .is-style-outline > .wp-block-button__link {
	color: var(--do-navy);
	background-color: var(--wp--preset--color--off-white, #F5F5F5);
	border: 1px solid #C9CED6;
}

.do-hero__actions .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--do-white);
}

/* The badge row under the hero copy. */

.do-hero__cards {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
	padding-block: clamp(32px, 4vw, 56px);
}

.do-hero__cards .do-card {
	border-radius: 16px;
}

.do-hero__cards .do-card--feature {
	flex: 2 1 420px;
	min-width: 0;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 16px;
}

.do-hero__cards .do-card--feature .wp-block-image,
.do-hero__cards .do-card--feature figure {
	margin: 0;
}

.do-hero__cards .do-card--feature img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.do-hero__cards .do-card--badge {
	flex: 1 1 180px;
}

.do-hero__cards .do-card--badge img {
	max-width: 180px;
}

/* --------------------------------------------------------------- Cards */

.do-card {
	background: var(--do-white);
	color: var(--do-navy);
	border-radius: var(--do-radius);
	box-shadow: var(--do-shadow);
	overflow: hidden;
}

.do-card :is(h1, h2, h3, h4, p) {
	color: var(--do-navy);
}

.do-card__body {
	padding: 18px 20px 20px;
}

.do-card__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--do-navy-light);
}

.do-card__title {
	font-size: 17px;
	font-weight: 600;
	margin: 6px 0 4px;
}

.do-card__text {
	font-size: 14px;
	line-height: 1.6;
	color: #4A5A72;
}

/* Badge tiles sit on white and letterbox their logo rather than cropping it. */
.do-card--badge {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 22px;
	min-height: 96px;
}

.do-card--badge img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
}

/* A plain content card used by projects, team and posts. */
.do-tile img {
	width: 100%;
	display: block;
	border-radius: var(--do-radius);
}

.do-tile h3 {
	font-size: 18px;
	margin: 14px 0 4px;
}

.do-tile p {
	font-size: 14px;
	color: #4A5A72;
	margin: 0;
}

.do-tile a {
	text-decoration: none;
}

.do-tile a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------- Split panels */

.do-split {
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

.do-split figure,
.do-split .wp-block-image {
	margin: 0;
}

.do-split img {
	width: 100%;
	border-radius: var(--do-radius);
	box-shadow: var(--do-shadow-lg);
}

/* Heading and paragraph pairs stacked down a column. */
.do-points h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 22px 0 4px;
}

.do-points h3:first-child {
	margin-top: 0;
}

.do-points p {
	font-size: 15px;
	line-height: 1.65;
	color: #46566E;
	margin: 0;
}

.do-section--navy .do-points p {
	color: #C3CEDD;
}

/* --------------------------------------------------------------- Stats */

.do-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--do-navy-light);
}

.do-stat {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--do-line);
}

.do-stat__label {
	font-size: 15px;
	color: #46566E;
}

.do-stat__value {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--do-navy);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Numbered reasons */

/* Authored as a plain list block so the ten reasons stay editable as a list.
   The leading number is a <strong> inside each item. */
.do-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 44px;
}

.do-numbers li {
	break-inside: avoid;
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 13px 0;
	border-bottom: 1px solid var(--do-line);
	font-size: 16px;
}

.do-numbers li strong {
	font-size: 13px;
	font-weight: 700;
	color: var(--do-gold);
	font-variant-numeric: tabular-nums;
	min-width: 22px;
}

/* --------------------------------------------------------------- Table */

.do-table table {
	width: 100%;
	border-collapse: collapse;
}

.do-table :is(th, td) {
	text-align: left;
	padding: 14px 18px 14px 0;
	border-bottom: 1px solid var(--do-line);
	vertical-align: top;
	font-size: 15px;
}

.do-table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--do-navy-light);
}

.do-table td:last-child {
	font-weight: 600;
	white-space: nowrap;
}

/* Wide tables scroll inside their own box instead of pushing the page. */
.do-table {
	overflow-x: auto;
}

/* --------------------------------------------------------------- Quote */

.do-pullquote {
	border: 0;
	padding: 0;
	margin: 0;
}

.do-pullquote p {
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.35;
	letter-spacing: -0.015em;
	font-weight: 600;
}

.do-pullquote cite,
.do-quote-attrib {
	display: block;
	margin-top: 16px;
	font-size: 14px;
	font-style: normal;
	letter-spacing: 0.04em;
	color: var(--do-navy-light);
}

.do-section--navy :is(.do-pullquote cite, .do-quote-attrib) {
	color: var(--do-gold);
}

.do-rating {
	color: var(--do-gold);
	letter-spacing: 0.2em;
	font-size: 18px;
}

/* --------------------------------------------------------------- Forms */

.do-form {
	display: block;
	border-radius: var(--do-radius);
}

/* Solid navy panel: it sits on the washed video, where a translucent card
   would let the footage read through the field labels. */
.do-form--hero {
	background: var(--do-navy);
	border: 0;
	border-radius: 18px;
	padding: clamp(32px, 3vw, 48px);
	color: var(--do-mist);
	box-shadow: var(--do-shadow-lg);
}

.do-form--hero .do-form__title {
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--do-white);
	margin-bottom: 34px;
}

.do-form--hero .do-form__grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 26px 24px;
}

.do-form--hero .do-field--accredited {
	margin-top: 26px;
}

.do-form--hero .do-field__label {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	color: #EDF1F7;
	opacity: 1;
}

.do-form--hero .do-field__input {
	font-size: 15px;
	line-height: 22px;
	padding: 17px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--do-white);
}

.do-form--panel {
	background: var(--do-white);
	border: 1px solid var(--do-line);
	box-shadow: var(--do-shadow);
	padding: clamp(22px, 2.6vw, 34px);
	color: var(--do-navy);
}

.do-form__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 18px;
	color: inherit;
}

.do-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}

.do-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.do-field--accredited {
	margin-top: 14px;
}

.do-field__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.86;
}

.do-field__req {
	color: var(--wp--preset--color--alert, #E2566F);
	margin-left: 2px;
}

.do-field__input {
	width: 100%;
	font: inherit;
	font-size: 15px;
	padding: 12px 14px;
	border-radius: var(--do-radius);
	border: 1px solid var(--do-line);
	background: var(--do-white);
	color: var(--do-navy);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.do-form--hero .do-field__input {
	border-color: rgba(230, 235, 242, 0.3);
	background: rgba(255, 255, 255, 0.94);
}

.do-field__input:focus-visible {
	outline: none;
	border-color: var(--do-navy-light);
	box-shadow: 0 0 0 3px rgba(42, 69, 113, 0.22);
}

.do-field__input::placeholder {
	color: #8794A8;
}

.do-fieldset {
	border: 0;
	padding: 0;
	margin: 18px 0 0;
}

.do-seg {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.do-seg__opt {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border: 1px solid var(--do-line);
	border-radius: var(--do-radius);
	font-size: 15px;
	cursor: pointer;
	background: var(--do-white);
	transition: border-color 120ms ease, background-color 120ms ease;
}

.do-seg__opt:hover {
	border-color: var(--do-navy-light);
}

.do-seg__opt:has(input:checked) {
	border-color: var(--do-navy);
	background: var(--do-mist-light);
	font-weight: 600;
}

.do-form__submit {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 15px 26px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--do-white);
	background: var(--do-navy);
	border: 1px solid var(--do-navy);
	border-radius: var(--do-radius);
	cursor: pointer;
	transition: background-color 120ms ease;
}

.do-form--hero .do-form__submit {
	margin-top: 34px;
	padding: 18px 20px;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 8px;
	background: var(--wp--preset--color--off-white, #F5F5F5);
	border-color: var(--do-line);
	color: var(--do-navy);
}

.do-form__submit:hover {
	background: var(--do-navy-hover);
	border-color: var(--do-navy-hover);
	color: var(--do-white);
}

.do-form--hero .do-form__submit:hover {
	background: var(--do-white);
	border-color: var(--do-white);
	color: var(--do-navy);
}

.do-form__note {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.6;
	opacity: 0.75;
}

.do-form__success {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: var(--do-radius);
	border: 1px solid var(--do-gold);
	background: rgba(224, 178, 106, 0.14);
	font-size: 14px;
	font-weight: 600;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.do-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.do-footer {
	background: var(--do-navy);
	color: var(--do-mist);
}

.do-footer :is(h1, h2, h3, h4, p, li) {
	color: inherit;
}

.do-footer a {
	color: #C3CEDD;
	text-decoration: none;
}

.do-footer a:hover {
	color: var(--do-white);
	text-decoration: underline;
}

.do-footer__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--do-gold);
	margin-bottom: 14px;
}

.do-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.do-footer__links a {
	display: block;
	padding: 5px 0;
	font-size: 14.5px;
}

.do-footer__legal {
	border-top: 1px solid rgba(230, 235, 242, 0.16);
	padding-top: 20px;
	font-size: 13px;
}

.do-footer__disclaimer {
	font-size: 11.5px;
	line-height: 1.65;
	color: #93A2B8;
	max-width: 100%;
}

/* --------------------------------------------------------- Navigation */

/*
 * The bar is fixed and starts transparent so a hero can run beneath it, and
 * takes a white ground once the page has scrolled past 40px. main.js measures
 * the bar into --do-nav-h and toggles .is-scrolled; with the script blocked the
 * bar stays transparent over the page background, which still reads correctly.
 *
 * The header element reserves that height in normal flow, so ordinary pages are
 * never covered. Give the header .do-nav-overlay to drop the reservation and
 * let the first section run full-bleed under the bar.
 */

.wp-site-blocks > header {
	min-height: var(--do-nav-h, 88px);
}

.wp-site-blocks > header.do-nav-overlay,
/* A page that opens on the hero runs under the bar by design, so it drops the
   reservation on its own rather than needing a class set on the header. */
.wp-site-blocks:has(.do-hero) > header {
	min-height: 0;
}

/* Anchor targets clear the fixed bar instead of landing behind it. */
html {
	scroll-padding-top: calc(var(--do-nav-h, 88px) + 12px);
}

.do-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	width: 100%;
	margin: 0;
	border: 0;
	box-sizing: border-box;
	background: transparent;
	transition: background-color 250ms ease, box-shadow 250ms ease;
	/* Gutters track the viewport until the 1440px content well is reached,
	   then hold the bar's items flush with the sections below. */
	padding-inline: max(clamp(20px, 3.4vw, 44px), calc((100vw - 1440px) / 2));
}

.do-nav.is-scrolled {
	background: var(--do-white);
	box-shadow: 0 1px 0 rgba(22, 39, 63, 0.10);
}

.admin-bar .do-nav {
	top: 32px;
}

/* Logo */

.do-nav .wp-block-site-logo {
	line-height: 0;
}

.do-nav .wp-block-site-logo img {
	height: clamp(38px, 4.4vw, 52px);
	width: auto;
	max-width: none;
	display: block;
	border-radius: 0;
}

/* Links */

.do-nav .do-nav__menu {
	margin-left: auto;
}

.do-nav .wp-block-navigation .wp-block-navigation-item__content {
	line-height: 1.4;
	color: var(--do-navy);
	text-decoration: none;
	white-space: nowrap;
}

.do-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.do-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: #000000;
}

/* Request Info */

.do-nav .do-nav__cta {
	flex: 0 0 auto;
}

.do-nav .do-nav__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--lead, clamp(15px, 1.5vw, 20px));
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	white-space: nowrap;
	padding: 12px 22px;
	color: var(--do-white);
	background-color: var(--do-navy);
	border: 1px solid var(--do-navy);
	border-radius: 8px;
}

.do-nav .do-nav__cta .wp-block-button__link:hover,
.do-nav .do-nav__cta .wp-block-button__link:focus-visible {
	color: var(--do-white);
	background-color: var(--do-navy-hover);
	border-color: var(--do-navy-hover);
}

/* Menu toggle. Core owns its display, which flips at the breakpoint below;
   only the box is restyled here so the desktop bar is left untouched. */

.do-nav .wp-block-navigation__responsive-container-open {
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	color: var(--do-navy);
	border: 1px solid #C9CED6;
	border-radius: 8px;
}

.do-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--do-navy);
}

.do-nav .wp-block-navigation__responsive-container-close {
	color: var(--do-navy);
}

.do-nav .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--do-navy);
}

.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 18px;
	line-height: 26px;
	padding: 6px 0;
	white-space: normal;
}

/* The bar justifies its links right; the drawer reads as a list, so it starts
   at the left edge instead of inheriting that justification. */
.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.do-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

/* ---------------------------------------------------------- Responsive */

/*
 * Six links plus the logo and the button need more room than core's 600px
 * overlay breakpoint gives them, so the overlay is extended to 1120px by
 * re-applying core's own small-screen rules across the gap. Below 600px core
 * already collapses the menu on its own.
 */
@media (min-width: 600px) and (max-width: 1120px) {
	.do-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.do-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		width: auto;
		position: fixed;
	}
}

/* Collapsed bar: logo left, Request Info centred, menu toggle right. */
@media (max-width: 1120px) {
	.do-nav .do-nav__cta {
		order: 2;
		flex: 1 1 auto;
		justify-content: center;
	}

	.do-nav .do-nav__menu {
		order: 3;
		margin-left: 0;
	}
}

@media (max-width: 1024px) {
	.do-numbers {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.do-form__grid {
		grid-template-columns: 1fr;
	}

	.do-section__bar {
		align-items: start;
	}

	.do-stat {
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.do-stat__rule {
		display: none;
	}

	.do-hero__lead {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.admin-bar .do-nav {
		top: 46px;
	}

	/* The bar wraps rather than shrinks, so on a phone the gutter, the gap and
	   the button padding come in far enough for logo, CTA and toggle to hold
	   one line. */
	.do-nav.do-nav {
		column-gap: 12px;
		padding-inline: 16px;
	}

	.do-nav .do-nav__cta .wp-block-button__link {
		padding: 11px 16px;
	}
}

/* --------------------------------------------------- Homepage sections */

/*
 * The front page runs on flow layout, so every band sets its own width: one
 * shell holds the 1440px well and the gutter, and the section classes below
 * only describe what happens inside it.
 */

/* Same gutter formula as the nav bar and the footer, so the logo, the section
   headings and the footer columns all share one left edge. */
.do-shell {
	width: 100%;
	box-sizing: border-box;
	padding-inline: max(clamp(20px, 3.4vw, 44px), calc((100vw - 1440px) / 2));
}

/* A two-column band that collapses to one at its own content width rather
   than at a shared breakpoint, so each band breaks when it needs to. */
.do-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px clamp(28px, 5vw, 88px);
	align-items: start;
}

.do-duo--center {
	align-items: center;
}

.do-lede {
	font-size: 16px;
	line-height: 28px;
	color: #46566E;
	max-width: 52ch;
	margin: 26px 0 0;
}

.do-note {
	font-size: 13px;
	line-height: 22px;
	color: #5B6B84;
	max-width: 70ch;
	margin: 20px 0 0;
}

/* Get to know */

.do-know__title {
	font-weight: 400;
	font-size: clamp(36px, 4.2vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 22ch;
	margin: 0;
}

.do-know__intro {
	font-size: 20px;
	line-height: 28px;
	margin: 0 0 22px;
}

.do-know__body {
	max-width: 62ch;
	margin-top: 38px;
	font-size: 17px;
	line-height: 30px;
	color: #2B3340;
}

.do-know__body > * {
	margin-block: 0 24px;
}

.do-know__body > :last-child {
	margin-bottom: 0;
}

.do-know__body h3 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

/* A photograph that carries its own caption rather than a floating label. */
.do-figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 18px;
	background: var(--do-navy);
	min-height: clamp(320px, 44vw, 640px);
	align-self: stretch;
}

.do-figure img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* A soft navy wash keeps the caption legible over a bright dusk sky. */
.do-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 39, 63, 0.42);
	pointer-events: none;
}

.do-figure figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 0 32px 30px;
	font-size: 24px;
	line-height: 32px;
	color: var(--do-white);
	background: linear-gradient(to top, rgba(10, 18, 32, 0.55), transparent);
}

/* Testimonials panel */

.do-panel {
	background: var(--do-navy);
	color: var(--do-mist);
	border-radius: 20px;
	padding: clamp(56px, 6vw, 88px) clamp(24px, 3.4vw, 48px);
}

.do-panel :is(h1, h2, h3, p) {
	color: inherit;
}

.do-panel__title {
	font-weight: 400;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.16;
	letter-spacing: -0.02em;
	max-width: 32ch;
	margin: 0;
	color: var(--do-white);
}

.do-panel__kicker {
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 18px;
	color: #C8D2E0;
}

.do-panel__sub {
	font-size: 16px;
	line-height: 28px;
	color: #C8D2E0;
	max-width: 44ch;
	margin: 24px 0 0;
}

.do-panel .do-rating {
	margin: 38px 0 10px;
}

.do-panel__score {
	font-size: 15px;
	line-height: 24px;
	color: #C8D2E0;
	margin: 0 0 30px;
}

.do-review {
	background: var(--do-white);
	border-radius: 16px;
	padding: 28px 30px;
	margin: 0;
	border: 0;
}

.do-review :is(p, cite) {
	color: var(--do-navy);
}

.do-review__name {
	font-size: 24px;
	line-height: 32px;
	margin: 0;
}

.do-review .do-rating {
	font-size: 15px;
	letter-spacing: 3px;
	margin: 6px 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid #E6E9EE;
}

.do-review__text {
	font-size: 16px;
	line-height: 28px;
	color: #2B3340;
	margin: 0;
}

/* Stats band */

/* Typed as hr.* so these outrank the separator block's own single-class
   border rules without a specificity hack. */
hr.do-band__rule--top {
	height: 5px;
	border: 0;
	margin: 0;
	border-top: 2px solid var(--do-navy);
	border-bottom: 1px solid var(--do-navy);
	background: none;
	opacity: 1;
}

hr.do-band__rule {
	height: 0;
	border: 0;
	margin: 0;
	border-top: 1px solid var(--do-navy);
	background: none;
	opacity: 1;
}

.do-band .do-chips {
	justify-content: space-between;
	gap: 14px 28px;
	padding: 14px 0;
	font-weight: 400;
	color: #5B6B84;
}

.do-band__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 clamp(28px, 6vw, 70px);
	padding-top: 14px;
}

.do-band__stats .do-stat:last-child,
.do-band__stats .do-stat:nth-last-child(2) {
	border-bottom: 0;
}

.do-band__stats .do-stat__value {
	font-size: 17px;
	letter-spacing: 0;
}

/* Tax, why, projects, team, news */

.do-h2 {
	font-size: clamp(28px, 2.9vw, 36px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 26ch;
}

.do-table--tax {
	margin-top: 40px;
}

.do-table--tax td:last-child,
.do-table--tax th:last-child {
	text-align: right;
	padding-right: 0;
}

.do-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	margin-top: 40px;
}

.do-grid--books {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(20px, 3vw, 36px);
}

.do-grid--news {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 4vw, 48px);
}

.do-tile--book img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.do-tile--person img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.do-tile--news img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.do-tile__role {
	font-size: 13px;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5B6B84;
	margin: 10px 0 0;
}

.do-tile--news h3 {
	font-size: 21px;
	line-height: 29px;
	margin: 12px 0 0;
}

.do-tile--news h3 a {
	color: inherit;
	text-decoration: none;
}

.do-tile--news h3 a:hover {
	text-decoration: underline;
}

/* Closing quote */

.do-quote {
	margin: 0;
	max-width: 36ch;
}

.do-quote blockquote,
.do-quote p {
	font-style: italic;
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0;
}

.do-quote figcaption,
.do-quote .do-quote-attrib {
	font-size: 15.5px;
	line-height: 28px;
	letter-spacing: 0;
	color: #5B6B84;
	margin: 36px 0 0;
}

.do-close__title {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.018em;
	margin: 0;
	max-width: 24ch;
}

/* Buttons used outside the hero */

.do-actions {
	margin-top: 32px;
	gap: 15px;
}

.do-actions .wp-block-button__link,
.do-section__bar .wp-block-button__link {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0;
	padding: 15px 24px;
	border-radius: 8px;
	border: 1px solid var(--do-navy);
}

.do-actions .is-style-outline > .wp-block-button__link,
.do-section__bar .is-style-outline > .wp-block-button__link {
	color: var(--do-navy);
	background-color: transparent;
	border: 1px solid var(--do-line);
}

.do-actions .is-style-outline > .wp-block-button__link:hover,
.do-section__bar .is-style-outline > .wp-block-button__link:hover {
	border-color: var(--do-navy);
	background-color: var(--do-mist-light);
}

/* ---------------------------------------------------- Homepage footer */

.do-footer {
	padding: 64px max(clamp(24px, 3.4vw, 48px), calc((100vw - 1440px) / 2)) 44px;
}

.do-footer__members {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 32px;
	margin-bottom: 88px;
}

.do-footer__members > p {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 30px;
	color: var(--do-white);
	margin: 0;
}

/* Takes the row's remaining width so the three marks sit on one line rather
   than breaking two-and-one. */
.do-footer__badges {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 16px;
}

.do-footer__badges .do-card--badge {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 132px;
	border-radius: 16px;
}

.do-footer__badges .do-card--badge img {
	max-width: 190px;
	max-height: 88px;
}

.do-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 48px clamp(32px, 5vw, 72px);
	align-items: start;
}

/* The mark is a single dark PNG, so it is knocked out to white here rather
   than shipping a second file. */
.do-footer__mark img {
	height: 52px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	border-radius: 0;
}

.do-footer__blurb {
	font-size: 17px;
	line-height: 30px;
	color: #E6EBF2;
	max-width: 44ch;
	margin: 24px 0 0;
}

.do-footer__contact {
	font-size: 17px;
	line-height: 26px;
	color: #E6EBF2;
}

.do-footer__contact p {
	margin: 0 0 18px;
}

.do-footer__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px clamp(24px, 3vw, 48px);
	border-left: 1px solid #2B3D5C;
	padding-left: clamp(0px, 2vw, 40px);
}

.do-footer__nav .do-footer__label,
.do-footer__label--lg {
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--do-white);
	margin-bottom: 24px;
}

.do-footer__label--lg {
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 22px;
}

.do-footer__links a {
	font-size: 17px;
	line-height: 26px;
	padding: 8px 0;
}

.do-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 56px;
	padding-top: 28px;
	font-size: 16px;
	line-height: 26px;
}

.do-footer__legal p {
	margin: 0;
}

.do-footer__disclaimer {
	text-align: center;
	font-size: 13.5px;
	line-height: 23px;
	margin: 26px 0 0;
}

.do-social {
	display: flex;
	gap: 12px;
	margin-top: 32px;
}

.do-social a {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--do-navy-hover);
	color: var(--do-white);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.do-social a:hover {
	background: var(--do-navy-light);
	text-decoration: none;
}

.do-social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ------------------------------------------------------ Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.do-hero video,
	.do-hero .wp-block-cover__video-background {
		display: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}