/*
 * Thrive Web Media - custom design layer.
 *
 * Loaded after the _s base stylesheet so it can override it. Keeping the
 * custom design here means style.css stays close to upstream _s and is easy
 * to diff when the starter theme is updated.
 *
 * 1.  Design tokens
 * 2.  Base overrides
 * 3.  Layout helpers
 * 4.  Buttons and links
 * 5.  Site header and navigation
 * 6.  Hero
 * 7.  Sections
 * 8.  Services grid
 * 9.  Why Thrive
 * 10. Process steps
 * 11. Insights
 * 12. Closing CTA
 * 13. Site footer
 * 14. Inner pages
 * 15. Motion and focus
 */

/*--------------------------------------------------------------
1. Design tokens
--------------------------------------------------------------*/
:root {
	/*
	 * Brand greens sampled straight from assets/images/twm-logo.png:
	 * #527c5b is the lighter stroke, #2c4f1d the darker one. Everything
	 * below is derived from those two so the site matches the mark.
	 */
	--twm-sage: #527c5b;
	--twm-forest: #2c4f1d;

	--twm-ink: #16211a;
	--twm-ink-2: #1b2818;
	--twm-forest-ink: #141e12;
	--twm-body: #45524b;
	--twm-muted: #6c7a71;
	--twm-line: #e2e8e3;
	--twm-bg: #ffffff;
	--twm-bg-soft: #f4f7f4;

	/* Buttons use a slightly deeper sage so white label text clears AA (6.3:1),
	   and darken to the logo's forest green on hover. */
	--twm-accent: #42684b;
	--twm-accent-strong: #2c4f1d;
	--twm-accent-soft: #e8f0e9;
	--twm-accent-bright: #8fb396;

	--twm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--twm-radius: 14px;
	--twm-radius-sm: 10px;
	--twm-radius-pill: 999px;

	--twm-shadow-sm: 0 1px 2px rgba(20, 30, 18, 0.06);
	--twm-shadow-md: 0 10px 30px rgba(20, 30, 18, 0.09);
	--twm-shadow-lg: 0 24px 60px rgba(20, 30, 18, 0.16);

	--twm-container: 1160px;
	--twm-gutter: 1.5rem;

	--twm-section-y: clamp(3.5rem, 7vw, 6.5rem);
}

/*--------------------------------------------------------------
2. Base overrides
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--twm-body);
	font-family: var(--twm-font);
	font-size: 1rem;
	line-height: 1.65;
}

body {
	background-color: var(--twm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--twm-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/*
 * :where() keeps these at zero specificity so every component (.twm-btn,
 * .twm-card__link, footer lists) wins without having to restate :visited and
 * :hover. Visited links deliberately match unvisited ones.
 */
:where(a, a:visited) {
	color: var(--twm-accent-strong);
}

:where(a:hover, a:focus) {
	color: var(--twm-ink);
}

img {
	height: auto;
	max-width: 100%;
}

.twm-icon {
	flex: none;
	height: 1.25em;
	width: 1.25em;
}

.twm-eyebrow {
	color: var(--twm-accent-strong);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
3. Layout helpers
--------------------------------------------------------------*/
.twm-container {
	margin-inline: auto;
	max-width: var(--twm-container);
	padding-inline: var(--twm-gutter);
	width: 100%;
}

.twm-section {
	padding-block: var(--twm-section-y);
}

.twm-section--soft {
	background-color: var(--twm-bg-soft);
}

.twm-section__header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	max-width: 46rem;
}

.twm-section__header--row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	max-width: none;
}

.twm-section__title {
	font-size: clamp(1.75rem, 3.5vw, 2.6rem);
	margin: 0;
}

.twm-section__lede {
	color: var(--twm-muted);
	font-size: 1.0625rem;
	margin: 1rem 0 0;
}

.twm-grid {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*--------------------------------------------------------------
4. Buttons and links
--------------------------------------------------------------*/
.twm-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--twm-radius-pill);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.2;
	padding: 0.9rem 1.5rem;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.twm-btn--compact {
	font-size: 0.875rem;
	padding: 0.65rem 1.15rem;
}

.twm-btn .twm-icon {
	height: 1.05em;
	transition: transform 0.18s ease;
	width: 1.05em;
}

.twm-btn:hover .twm-icon,
.twm-btn:focus .twm-icon {
	transform: translateX(3px);
}

.twm-btn--primary {
	background-color: var(--twm-accent);
	color: #fff;
}

.twm-btn--primary:hover,
.twm-btn--primary:focus {
	background-color: var(--twm-accent-strong);
	color: #fff;
}

.twm-btn--ghost {
	border-color: var(--twm-line);
	color: var(--twm-ink);
}

.twm-btn--ghost:hover,
.twm-btn--ghost:focus {
	background-color: var(--twm-bg-soft);
	border-color: var(--twm-ink);
	color: var(--twm-ink);
}

.twm-link {
	align-items: center;
	color: var(--twm-accent-strong);
	display: inline-flex;
	font-weight: 600;
	gap: 0.4rem;
	text-decoration: none;
}

.twm-link:hover,
.twm-link:focus {
	color: var(--twm-ink);
}

/*--------------------------------------------------------------
5. Site header and navigation
--------------------------------------------------------------*/
.site-header {
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--twm-line);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 72px;
}

.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-title {
	font-size: 1.3125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	white-space: nowrap;
}

.site-title a {
	color: var(--twm-ink);
	text-decoration: none;
}

.site-branding {
	align-items: center;
	flex-direction: row;
	gap: 0.7rem;
}

.site-branding__mark {
	display: inline-flex;
	flex: none;
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.twm-logo,
.site-branding .custom-logo {
	display: block;
	height: 38px;
	width: auto;
}

/*
 * The name is kept on one line, so on the narrowest phones the lockup has to
 * step down to stay on the same row as the menu toggle - otherwise it wraps
 * and the header grows to two rows.
 */
@media screen and (max-width: 22.5em) {

	.site-title {
		font-size: 1.0625rem;
	}

	.twm-logo,
	.site-branding .custom-logo {
		height: 30px;
	}

	.site-branding {
		gap: 0.5rem;
	}
}

/* Reset the _s full-width nav so the header can lay out as a flex row. */
.main-navigation {
	width: auto;
}

.main-navigation a {
	border-radius: var(--twm-radius-sm);
	color: var(--twm-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background-color: var(--twm-accent-soft);
	color: var(--twm-accent-strong);
}

/*
 * Being inside a section is not the same as being on its landing page, so an
 * ancestor item takes the colour but not the filled background - enough to say
 * "you are in here" without claiming to be the current page. Applies to a case
 * study under Case Studies, and to an article under the posts page.
 */
.main-navigation .current-menu-parent > a,
.main-navigation .current_page_parent > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {
	color: var(--twm-accent-strong);
}

.menu-toggle {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius-sm);
	cursor: pointer;
	display: inline-flex;
	height: 42px;
	justify-content: center;
	padding: 0;
	width: 42px;
}

.menu-toggle:hover,
.menu-toggle:focus {
	border-color: var(--twm-ink);
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	background-color: var(--twm-ink);
	border-radius: 2px;
	display: block;
	height: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 18px;
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	left: 0;
	position: absolute;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

.main-navigation.toggled .menu-toggle__bars {
	background-color: transparent;
}

.main-navigation.toggled .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Mobile navigation: overrides the _s 37.5em breakpoint. */
@media screen and (max-width: 61.9375em) {

	.site-header__inner {
		flex-wrap: wrap;
	}

	/*
	 * The toggle button and the menu list both live inside <nav>, so the nav
	 * and the wrapper wp_nav_menu() prints are flattened out of the flex flow.
	 * That lets the button sit at the end of the header row while the list
	 * wraps onto its own full-width line underneath.
	 */
	.main-navigation,
	.main-navigation > div {
		display: contents;
	}

	.menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.site-header__cta {
		display: none;
	}

	.main-navigation ul:not(.sub-menu) {
		display: none;
		flex-basis: 100%;
		order: 4;
		width: 100%;
	}

	.main-navigation.toggled ul:not(.sub-menu) {
		border-top: 1px solid var(--twm-line);
		display: block;
		padding-block: 0.75rem 1rem;
	}

	/* Let sub-menus stack inline instead of sitting off-screen. */
	.main-navigation.toggled .sub-menu {
		border-left: 2px solid var(--twm-line);
		box-shadow: none;
		display: block;
		float: none;
		left: auto;
		margin-left: 0.75rem;
		position: static;
		top: auto;
	}

	.main-navigation.toggled .sub-menu a {
		width: auto;
	}

	.main-navigation a {
		padding-block: 0.65rem;
	}
}

@media screen and (min-width: 62em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul:not(.sub-menu) {
		display: flex;
	}

	.main-navigation ul ul {
		background-color: var(--twm-bg);
		border: 1px solid var(--twm-line);
		border-radius: var(--twm-radius-sm);
		box-shadow: var(--twm-shadow-md);
		display: block;
		padding: 0.35rem;
	}
}

/*--------------------------------------------------------------
6. Hero
--------------------------------------------------------------*/
.twm-hero {
	background-color: var(--twm-forest-ink);
	background-image:
		radial-gradient(60rem 30rem at 15% -10%, rgba(82, 124, 91, 0.42), transparent 60%),
		radial-gradient(45rem 28rem at 95% 10%, rgba(143, 179, 150, 0.20), transparent 62%);
	color: #d3dcd4;
	overflow: hidden;
	position: relative;
}

.twm-hero__inner {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

.twm-hero .twm-eyebrow {
	color: var(--twm-accent-bright);
}

.twm-hero__title {
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 4rem);
	margin: 0;
	max-width: 18ch;
}

.twm-hero__lede {
	color: #aebdb1;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	margin: 1.5rem 0 0;
	max-width: 58ch;
}

.twm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/*
 * On the forest-ink sections the solid sage button is too close in value to
 * the background to read as the primary action, so it inverts: light fill,
 * forest-green label. The ghost button stays outlined, so the two remain
 * clearly distinct.
 */
.twm-hero .twm-btn--primary,
.twm-cta .twm-btn--primary {
	background-color: #e8efe9;
	color: var(--twm-accent-strong);
}

.twm-hero .twm-btn--primary:hover,
.twm-hero .twm-btn--primary:focus,
.twm-cta .twm-btn--primary:hover,
.twm-cta .twm-btn--primary:focus {
	background-color: #fff;
	color: var(--twm-forest);
}

.twm-hero .twm-btn--ghost {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.twm-hero .twm-btn--ghost:hover,
.twm-hero .twm-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.twm-hero__proof {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: clamp(3rem, 6vw, 4.5rem) 0 0;
	padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

.twm-hero__proof-figure {
	color: #fff;
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.twm-hero__proof-label {
	color: #93a596;
	display: block;
	font-size: 0.9375rem;
	margin-top: 0.25rem;
}

/*--------------------------------------------------------------
7. Sections
--------------------------------------------------------------*/
.twm-editor-content .entry-content {
	margin-inline: auto;
	max-width: 46rem;
}

/*--------------------------------------------------------------
8. Services grid
--------------------------------------------------------------*/
.twm-services {
	background-color: var(--twm-bg-soft);
}

.twm-grid--services {
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.twm-card {
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	box-shadow: var(--twm-shadow-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.twm-card:hover,
.twm-card:focus-within {
	border-color: rgba(82, 124, 91, 0.55);
	box-shadow: var(--twm-shadow-md);
	transform: translateY(-3px);
}

.twm-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	text-decoration: none;
}

.twm-card__icon {
	align-items: center;
	background-color: var(--twm-accent-soft);
	border-radius: var(--twm-radius-sm);
	color: var(--twm-accent-strong);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	margin-bottom: 1.25rem;
	width: 44px;
}

.twm-card__icon .twm-icon {
	height: 22px;
	width: 22px;
}

.twm-card__tagline {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.twm-card__title {
	font-size: 1.1875rem;
	margin: 0.35rem 0 0.6rem;
}

.twm-card__text {
	color: var(--twm-muted);
	font-size: 0.9375rem;
	margin: 0 0 1.25rem;
}

.twm-card__cta {
	align-items: center;
	color: var(--twm-accent-strong);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.4rem;
	margin-top: auto;
}

.twm-card:hover .twm-card__cta .twm-icon,
.twm-card:focus-within .twm-card__cta .twm-icon {
	transform: translateX(3px);
}

.twm-card__cta .twm-icon {
	height: 1.05em;
	transition: transform 0.18s ease;
	width: 1.05em;
}

/*--------------------------------------------------------------
9. Why Thrive
--------------------------------------------------------------*/
.twm-why__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media screen and (min-width: 56em) {

	.twm-why__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	.twm-why__intro {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

.twm-why__list {
	display: grid;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-why__item {
	display: flex;
	gap: 1rem;
}

.twm-why__check {
	align-items: center;
	background-color: var(--twm-accent-soft);
	border-radius: var(--twm-radius-pill);
	color: var(--twm-accent-strong);
	display: inline-flex;
	flex: none;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.twm-why__check .twm-icon {
	height: 17px;
	width: 17px;
}

.twm-why__title {
	font-size: 1.125rem;
	margin: 0.25rem 0 0.4rem;
}

.twm-why__text {
	color: var(--twm-muted);
	margin: 0;
}

/*--------------------------------------------------------------
10. Process steps
--------------------------------------------------------------*/
.twm-process {
	background-color: var(--twm-bg-soft);
}

.twm-steps {
	counter-reset: none;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-steps__item {
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	padding: 1.75rem;
}

.twm-steps__number {
	color: var(--twm-accent);
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.85rem;
}

.twm-steps__title {
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
}

.twm-steps__text {
	color: var(--twm-muted);
	font-size: 0.9375rem;
	margin: 0;
}

/*--------------------------------------------------------------
11. Insights
--------------------------------------------------------------*/
.twm-grid--posts {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.twm-post-card {
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.twm-post-card:hover,
.twm-post-card:focus-within {
	border-color: rgba(82, 124, 91, 0.55);
	box-shadow: var(--twm-shadow-md);
	transform: translateY(-3px);
}

.twm-post-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.twm-post-card__media {
	display: block;
	overflow: hidden;
}

.twm-post-card__media img {
	aspect-ratio: 16 / 9;
	display: block;
	object-fit: cover;
	width: 100%;
}

.twm-post-card__meta {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	padding: 1.5rem 1.5rem 0;
}

.twm-post-card__title {
	font-size: 1.125rem;
	margin: 0.4rem 0 0.5rem;
	padding-inline: 1.5rem;
}

.twm-post-card__excerpt {
	color: var(--twm-muted);
	font-size: 0.9375rem;
	margin: 0;
	padding: 0 1.5rem 1.75rem;
}

/*--------------------------------------------------------------
12. Closing CTA
--------------------------------------------------------------*/
.twm-cta {
	background-color: var(--twm-ink-2);
	background-image: radial-gradient(50rem 26rem at 50% 0%, rgba(82, 124, 91, 0.38), transparent 65%);
	color: #d3dcd4;
}

.twm-cta__inner {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	text-align: center;
}

.twm-cta__title {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 auto;
	max-width: 20ch;
}

.twm-cta__text {
	color: #aebdb1;
	font-size: 1.0625rem;
	margin: 1rem auto 0;
	max-width: 52ch;
}

.twm-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 2rem;
}

.twm-cta .twm-btn--ghost {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.twm-cta .twm-btn--ghost:hover,
.twm-cta .twm-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

/*--------------------------------------------------------------
13. Site footer
--------------------------------------------------------------*/
.site-footer {
	background-color: var(--twm-forest-ink);
	color: #93a596;
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

.site-footer__inner {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.site-footer__brand {
	max-width: 24rem;
}

.site-footer__name {
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.65rem;
}

.site-footer__blurb {
	font-size: 0.9375rem;
	margin: 0 0 1.5rem;
}

.site-footer .twm-btn--ghost {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.site-footer .twm-btn--ghost:hover,
.site-footer .twm-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.site-footer__heading {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__list li + li {
	margin-top: 0.6rem;
}

.site-footer__list a {
	color: #93a596;
	font-size: 0.9375rem;
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
	color: #fff;
}

.site-info {
	color: #7d8f81;
	font-size: 0.875rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-block: 1.5rem;
	position: relative;
}

.site-info::before {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	content: "";
	inset: 0 var(--twm-gutter) auto;
	position: absolute;
}

.site-info p {
	margin: 0;
}

/*--------------------------------------------------------------
14. Inner pages
--------------------------------------------------------------*/
.site-main:not(.site-main--home):not(.site-main--pricing):not(.site-main--contact):not(.site-main--full) {
	margin-inline: auto;
	max-width: var(--twm-container);
	padding: clamp(2.5rem, 5vw, 4rem) var(--twm-gutter);
	width: 100%;
}

.site-main:not(.site-main--home):not(.site-main--pricing):not(.site-main--contact):not(.site-main--full) .entry-content,
.site-main:not(.site-main--home):not(.site-main--pricing):not(.site-main--contact):not(.site-main--full) .entry-header {
	margin-inline: auto;
	max-width: 46rem;
}

.entry-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/*--------------------------------------------------------------
15. Motion and focus
--------------------------------------------------------------*/
a:focus-visible,
button:focus-visible,
.twm-btn:focus-visible,
.twm-card__link:focus-visible,
.twm-post-card__link:focus-visible {
	outline: 2px solid var(--twm-accent);
	outline-offset: 3px;
}

/*
 * The header is sticky, so an anchor jump would otherwise land with the target
 * heading hidden underneath it. Set on the scroll container so every in-page
 * link benefits, not just the pricing ones.
 */
html {
	scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


/*--------------------------------------------------------------
16. Featured work
--------------------------------------------------------------*/
.twm-work__inner {
	align-items: start;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media screen and (min-width: 56em) {

	.twm-work__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.twm-work__media {
	background-color: var(--twm-forest-ink);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	margin: 0;
	overflow: hidden;
	position: relative;
}

/*
 * The whole still is the click target, with the ring as the visible
 * affordance. The button is removed from the flow once playback starts so the
 * native controls are not sitting underneath it.
 */
.twm-work__play {
	align-items: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: 100%;
}

.twm-work__media.is-playing .twm-work__play {
	display: none;
}

.twm-work__play-ring {
	align-items: center;
	background-color: rgba(20, 30, 18, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--twm-radius-pill);
	color: #fff;
	display: flex;
	height: 78px;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
	width: 78px;
}

.twm-work__play-ring svg {
	height: 34px;
	/* The glyph's visual centre sits left of its bounding box. */
	margin-left: 4px;
	width: 34px;
}

.twm-work__play:hover .twm-work__play-ring,
.twm-work__play:focus-visible .twm-work__play-ring {
	background-color: var(--twm-accent-strong);
	transform: scale(1.06);
}

.twm-work__play:focus-visible {
	outline: 2px solid var(--twm-accent);
	outline-offset: -4px;
}

.twm-work__video,
.twm-work__still {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	width: 100%;
}

.twm-work__kicker {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.twm-work__kicker span {
	margin-inline: 0.35rem;
}

.twm-work__title {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	margin: 0 0 0.75rem;
}

.twm-work__text {
	color: var(--twm-muted);
	margin: 0 0 1.5rem;
}

.twm-work__list {
	display: grid;
	gap: 0.7rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.twm-work__list li {
	align-items: flex-start;
	color: var(--twm-ink);
	display: flex;
	font-size: 0.9375rem;
	gap: 0.6rem;
}

.twm-work__list .twm-icon {
	color: var(--twm-accent);
	height: 1.15em;
	margin-top: 0.15em;
	width: 1.15em;
}

/*--------------------------------------------------------------
17. Pricing
--------------------------------------------------------------*/
.twm-page-head {
	background-color: var(--twm-bg-soft);
	border-bottom: 1px solid var(--twm-line);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.twm-page-head__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	margin: 0;
	max-width: 20ch;
}

.twm-page-head__lede,
.twm-page-head__intro {
	color: var(--twm-muted);
	font-size: 1.0625rem;
	margin: 1rem 0 0;
	max-width: 56ch;
}

.twm-pricing {
	padding-block: var(--twm-section-y);
}

.twm-price-group + .twm-price-group {
	border-top: 1px solid var(--twm-line);
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(3rem, 6vw, 4.5rem);
}

.twm-price-group__title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0;
}

.twm-price-group__blurb {
	color: var(--twm-muted);
	margin: 0.6rem 0 0;
	max-width: 54ch;
}

.twm-price-group__header {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.twm-price-grid {
	align-items: stretch;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-price {
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.twm-price--featured {
	border-color: var(--twm-accent);
	box-shadow: var(--twm-shadow-md);
}

.twm-price__flag {
	background-color: var(--twm-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
	padding: 0.5rem 1rem;
	text-align: center;
	text-transform: uppercase;
}

/* Same box, no ink: holds the row open on cards with no flag. */
.twm-price__flag--spacer {
	background-color: transparent;
	visibility: hidden;
}

.twm-price--featured .twm-price__body {
	background-color: var(--twm-accent-soft);
}

.twm-price__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.6rem;
}

.twm-price__name {
	color: var(--twm-accent-strong);
	font-size: 1.0625rem;
	margin: 0 0 0.9rem;
	/* Two lines of the heading, so one- and two-line names keep the rows below
	   them aligned across the row of cards. */
	min-height: calc(2em * 1.15);
}

.twm-price__figure {
	color: var(--twm-ink);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

.twm-price__currency {
	font-size: 1.35rem;
	margin-right: 0.1rem;
	vertical-align: 0.5rem;
}

.twm-price__interval {
	color: var(--twm-ink);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0.4rem 0 0;
}

.twm-price__interval--spacer {
	visibility: hidden;
}

.twm-price__cta {
	margin-top: 1.25rem;
	width: 100%;
}

.twm-price--featured .twm-btn--ghost,
.twm-price--featured .twm-price__cta {
	background-color: var(--twm-bg);
	border-color: var(--twm-accent);
	color: var(--twm-accent-strong);
}

.twm-price--featured .twm-price__cta:hover,
.twm-price--featured .twm-price__cta:focus {
	background-color: var(--twm-accent);
	color: #fff;
}

.twm-price__summary {
	color: var(--twm-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 1.5rem 0 0.75rem;
}

.twm-price__intro {
	color: var(--twm-body);
	font-size: 0.9375rem;
	margin: 1.5rem 0 0.75rem;
}

.twm-price__features {
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.twm-price__features li {
	align-items: flex-start;
	display: flex;
	font-size: 0.9375rem;
	gap: 0.6rem;
	line-height: 1.5;
}

.twm-price__features .twm-icon {
	color: var(--twm-accent);
	height: 1.1em;
	margin-top: 0.2em;
	width: 1.1em;
}

.twm-price__features em {
	color: var(--twm-muted);
	display: block;
	font-size: 0.875rem;
}

.twm-price__footnote {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.5;
	margin: 1.5rem 0 0;
}

/* The enquiry card closes each group and is deliberately quieter. */
.twm-price--quote {
	background-color: var(--twm-bg-soft);
	border-style: dashed;
}

.twm-price__text {
	color: var(--twm-muted);
	font-size: 0.9375rem;
	margin: 1.5rem 0 0;
}

/* "Custom" stands in for a figure, so keep it a touch smaller than the numerals
   while the row height stays identical. */
.twm-price--quote .twm-price__figure {
	font-size: 1.9rem;
	line-height: 1.26;
}

.twm-btn--quote {
	background-color: var(--twm-ink);
	color: #fff;
	width: 100%;
}

.twm-btn--quote:hover,
.twm-btn--quote:focus {
	background-color: var(--twm-accent-strong);
	color: #fff;
}

.twm-price-notes {
	margin-top: 2rem;
}

.twm-price-notes__title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.twm-price-notes__list {
	color: var(--twm-muted);
	font-size: 0.875rem;
	margin: 0;
	padding-left: 1.2rem;
}

.twm-price-notes__list li + li {
	margin-top: 0.35rem;
}

/* The footer mark sits above the wordmark. */
.site-footer .twm-logo {
	height: 40px;
	margin-bottom: 0.9rem;
}

/*--------------------------------------------------------------
18. Case studies
--------------------------------------------------------------*/
.twm-cases {
	background-color: var(--twm-bg-soft);
}

.twm-grid--cases {
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.twm-case {
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
}

.twm-case__meta {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 0.6rem;
	/* Two lines, so a long sector/discipline pair that wraps does not push its
	   card's title out of line with the rest of the row. */
	min-height: calc(2em * 1.4);
	text-transform: uppercase;
}

.twm-case__meta span {
	margin-inline: 0.3rem;
}

.twm-case__title {
	font-size: 1.1875rem;
	margin: 0 0 0.6rem;
}

.twm-case__text {
	color: var(--twm-muted);
	font-size: 0.9375rem;
	margin: 0 0 1.25rem;
}

.twm-case__link {
	font-size: 0.9375rem;
	margin-top: auto;
}

/*--------------------------------------------------------------
19. Social proof: testimonials and client roster
--------------------------------------------------------------*/
.twm-proof__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media screen and (min-width: 56em) {

	.twm-proof__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

/* Lead quote: set at display size, with the mark hung to the left of it. */
.twm-proof__lead {
	margin: 0;
	position: relative;
}

.twm-proof__mark {
	color: var(--twm-accent);
	display: block;
	margin-bottom: 0.75rem;
	opacity: 0.85;
}

.twm-proof__mark .twm-icon {
	height: 2.5rem;
	width: 2.5rem;
}

.twm-proof__lead-text {
	border: 0;
	margin: 0;
	padding: 0;
}

.twm-proof__lead-text p {
	color: var(--twm-ink);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}

.twm-proof__by {
	margin-top: 1.5rem;
}

.twm-proof__author {
	color: var(--twm-ink);
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
}

.twm-proof__role {
	color: var(--twm-muted);
	display: block;
	font-size: 0.875rem;
	margin-top: 0.1rem;
}

/* Supporting quotes: rules, not boxes. */
.twm-proof__rest {
	align-self: end;
}

.twm-proof__item {
	border-top: 1px solid var(--twm-line);
	margin: 0;
	padding-top: 1.5rem;
}

.twm-proof__item + .twm-proof__item {
	margin-top: 1.5rem;
}

.twm-proof__item-text {
	border: 0;
	margin: 0;
	padding: 0;
}

.twm-proof__item-text p {
	color: var(--twm-body);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.twm-proof__item .twm-proof__by {
	margin-top: 0.9rem;
}

/* Client roster */
.twm-clients {
	border-top: 1px solid var(--twm-line);
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 2.75rem);
}

.twm-clients__label {
	color: var(--twm-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.twm-clients__list {
	align-items: stretch;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The supplied logos each carry their own background - one is white on a black
 * block, one is gold on transparent - so they sit on a neutral tile rather
 * than being recoloured to match each other.
 */
.twm-clients__item {
	align-items: center;
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius-sm);
	display: flex;
	justify-content: center;
	min-height: 6.5rem;
	padding: 1.25rem;
}

.twm-clients__item img {
	display: block;
	height: auto;
	max-height: 4rem;
	max-width: 100%;
	width: auto;
}

/*--------------------------------------------------------------
20. Footer contact
--------------------------------------------------------------*/
.site-footer__contact {
	font-size: 0.9375rem;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.site-footer__contact li + li {
	margin-top: 0.45rem;
}

.site-footer__contact a {
	color: #93a596;
	text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus {
	color: #fff;
}

.site-footer__place {
	color: #7d8f81;
	font-size: 0.875rem;
}

/*--------------------------------------------------------------
21. Contact page
--------------------------------------------------------------*/
.twm-contact {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: var(--twm-section-y);
}

@media screen and (min-width: 56em) {

	.twm-contact {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.twm-contact__body .entry-content {
	margin-bottom: 2rem;
	max-width: 46rem;
}

.twm-contact__details {
	display: grid;
	gap: 2rem;
}

.twm-contact__block {
	border-top: 1px solid var(--twm-line);
	padding-top: 1.25rem;
}

.twm-contact__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 0.9rem;
	text-transform: uppercase;
}

.twm-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-contact__list li + li {
	margin-top: 0.7rem;
}

.twm-contact__list a {
	color: var(--twm-ink);
	font-weight: 600;
	text-decoration: none;
}

.twm-contact__list a:hover,
.twm-contact__list a:focus {
	color: var(--twm-accent-strong);
}

.twm-contact__label {
	color: var(--twm-muted);
	display: block;
	font-size: 0.8125rem;
}


/*--------------------------------------------------------------
22. Footer social
--------------------------------------------------------------*/
.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social li + li {
	margin-top: 0.6rem;
}

.site-footer__social a {
	align-items: center;
	color: #93a596;
	display: inline-flex;
	font-size: 0.9375rem;
	gap: 0.6rem;
	text-decoration: none;
}

.site-footer__social a:hover,
.site-footer__social a:focus {
	color: #fff;
}

.twm-social__icon {
	flex: none;
	height: 1.1rem;
	opacity: 0.85;
	width: 1.1rem;
}

.site-footer__social a:hover .twm-social__icon,
.site-footer__social a:focus .twm-social__icon {
	opacity: 1;
}

/*--------------------------------------------------------------
23. Case study pages
--------------------------------------------------------------*/
.twm-cs__back {
	color: inherit;
	text-decoration: none;
}

.twm-cs__back:hover,
.twm-cs__back:focus {
	text-decoration: underline;
}

.twm-cs__facts {
	display: grid;
	gap: 1.25rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
	margin: 2rem 0 0;
}

.twm-cs__fact dt {
	color: var(--twm-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
}

.twm-cs__fact dd {
	color: var(--twm-ink);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.twm-cs__visit {
	margin: 2rem 0 0;
}

/* The metrics band straddles the page head and the body, which is the point:
   the numbers are the first thing a visitor should land on. */
.twm-cs__metrics {
	background-color: var(--twm-ink);
	color: #fff;
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.twm-metrics {
	display: grid;
	gap: 1.5rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-metric {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.twm-metric__value {
	color: var(--twm-accent-bright);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.1;
}

.twm-metric__label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.twm-metric__period {
	color: #93a596;
	font-size: 0.8125rem;
}

.twm-cs__media {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.twm-cs__media img {
	border-radius: var(--twm-radius);
	display: block;
	height: auto;
	width: 100%;
}

.twm-cs__columns {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media screen and (min-width: 48em) {
	.twm-cs__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.twm-cs__heading {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.twm-cs__block p {
	color: var(--twm-body);
	margin: 0 0 0.75rem;
}

.twm-cs__block p:last-child {
	margin-bottom: 0;
}

.twm-cs__content {
	margin-top: clamp(2rem, 4vw, 3rem);
	max-width: 46rem;
}

.twm-quote {
	background-color: var(--twm-bg-soft);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: clamp(1.75rem, 4vw, 2.5rem);
}

.twm-quote blockquote {
	border: 0;
	font-size: 1.125rem;
	margin: 0 0 1rem;
	padding: 0;
	quotes: none;
}

.twm-quote blockquote p {
	margin: 0 0 0.75rem;
}

.twm-quote blockquote p:last-child {
	margin-bottom: 0;
}

.twm-cs__nav {
	border-top: 1px solid var(--twm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
}

.twm-cs__nav a {
	color: var(--twm-accent);
	font-weight: 600;
	text-decoration: none;
}

.twm-cs__nav a:hover,
.twm-cs__nav a:focus {
	text-decoration: underline;
}

/* The archive's page head already carries the top spacing, so the grid below it
   does not need a full section's worth again. */
.twm-cases--archive {
	padding-top: clamp(2rem, 4vw, 3rem);
}

/* Archive pagination: core prints .navigation.pagination with .page-numbers. */
.twm-cases .pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.twm-cases .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.twm-cases .page-numbers {
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius-sm);
	color: var(--twm-body);
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	text-decoration: none;
}

.twm-cases .page-numbers:hover,
.twm-cases .page-numbers:focus {
	border-color: var(--twm-accent);
	color: var(--twm-accent);
}

.twm-cases .page-numbers.current {
	background-color: var(--twm-accent);
	border-color: var(--twm-accent);
	color: #fff;
}

/*--------------------------------------------------------------
24. Service pages
--------------------------------------------------------------*/
.twm-service__cta {
	margin: 2rem 0 0;
}

/* The quote sits on its own between two grids, so it does not need a full
   section's padding above and below. */
.twm-service__proof {
	padding-block: 0;
}

.twm-service__proof .twm-quote {
	margin: 0;
}

.twm-service-nav {
	background-color: var(--twm-bg-soft);
	border-top: 1px solid var(--twm-line);
}

.twm-service-nav__title {
	font-size: 1.25rem;
	margin: 0 0 1.5rem;
}

.twm-service-nav__list {
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.twm-service-nav__list a {
	align-items: center;
	background-color: var(--twm-bg);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius-sm);
	color: var(--twm-ink);
	display: flex;
	font-weight: 600;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.twm-service-nav__list a:hover,
.twm-service-nav__list a:focus {
	border-color: var(--twm-accent);
	color: var(--twm-accent);
}

.twm-service-nav__list .twm-icon {
	color: var(--twm-accent);
}

/*--------------------------------------------------------------
25. Service page rhythm
--------------------------------------------------------------*/
/*
 * A service page stacks the page head straight onto a section, and both the
 * head and the case study band use the soft ground - so without the overrides
 * below the top of the page reads as one large empty area with a stray rule
 * across the middle of it. The head keeps the soft ground; everything under it
 * alternates against white.
 */
.twm-service .twm-page-head {
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.twm-service .twm-page-head + .twm-section {
	padding-top: clamp(2.25rem, 4vw, 3rem);
}

/*
 * Sections on a service page are conditional, so backgrounds are set per
 * section rather than by nth-child - which would shift every time a service
 * gained its first case study. White is the default ground here; the soft one
 * is reserved for the two bands that need to separate from what precedes them.
 */
.twm-service .twm-cases,
.twm-service .twm-insights,
.twm-service .twm-service-pricing {
	background-color: var(--twm-bg);
}

.twm-service .twm-process {
	background-color: var(--twm-bg-soft);
	border-top: 1px solid var(--twm-line);
}

/*
 * Two soft bands in a row read as one tall empty area with a stray rule across
 * it, which is what a service with nothing tagged yet used to look like. When
 * these land next to each other, the second one drops to white.
 */
.twm-service .twm-page-head + .twm-process,
.twm-service .twm-page-head + .twm-service-nav,
.twm-service .twm-process + .twm-service-nav {
	background-color: var(--twm-bg);
}

/*
 * Once two sections share a ground there is no colour change to carry the gap,
 * so their stacked vertical padding just reads as a hole. The second of any
 * such pair drops its top padding and lets the first one's bottom padding do
 * the spacing.
 *
 * The quote band is the exception and must never be listed here: it carries no
 * vertical padding of its own, so whatever follows it has to supply the whole
 * gap. Zeroing both sides is what pushed the packages block hard against the
 * bottom edge of the quote card.
 */
.twm-service .twm-editor-content + .twm-cases,
.twm-service .twm-editor-content + .twm-insights,
.twm-service .twm-editor-content + .twm-service-pricing,
.twm-service .twm-cases + .twm-insights,
.twm-service .twm-cases + .twm-service-pricing,
.twm-service .twm-insights + .twm-service-pricing {
	padding-top: 0;
}

/* Anything following the quote band supplies its own top gap. */
.twm-service .twm-service__proof + .twm-insights,
.twm-service .twm-service__proof + .twm-service-pricing,
.twm-service .twm-service__proof + .twm-process,
.twm-service .twm-service__proof + .twm-service-nav {
	padding-top: clamp(2.25rem, 4vw, 3rem);
}

/* Editor content is centred on the homepage, where it sits alone in a wide
   band. Here it follows a left-aligned page head, so centring it reads as a
   misalignment rather than a choice. */
.twm-service .twm-editor-content .entry-content {
	margin-inline: 0;
}

.twm-service .twm-section__header {
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/*--------------------------------------------------------------
26. Service pricing teaser
--------------------------------------------------------------*/
.twm-service-pricing__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media screen and (min-width: 48em) {
	.twm-service-pricing__inner {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	}
}

.twm-service-pricing__aside {
	background-color: var(--twm-bg-soft);
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.twm-service-pricing__from {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.twm-service-pricing__label {
	color: var(--twm-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.twm-service-pricing__figure {
	color: var(--twm-ink);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
}

.twm-service-pricing__tiers {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.twm-service-pricing__tiers li {
	align-items: flex-start;
	color: var(--twm-body);
	display: flex;
	font-size: 0.9375rem;
	gap: 0.6rem;
}

.twm-service-pricing__tiers .twm-icon {
	color: var(--twm-accent);
	margin-top: 0.15em;
}

/*--------------------------------------------------------------
27. Plain pages
--------------------------------------------------------------*/
/* The page head already carries the top spacing, so the body below it does not
   need a full section's worth again. */
.twm-page__body {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.twm-page__media {
	padding-bottom: 0;
}

.twm-page__media img {
	border-radius: var(--twm-radius);
	display: block;
	height: auto;
	width: 100%;
}

/* Long-form prose wants a narrower measure than the container gives it. */
.twm-prose,
.twm-page__comments {
	max-width: 46rem;
}

.twm-prose h2 {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	margin-top: 2.5rem;
}

.twm-prose h2:first-child {
	margin-top: 0;
}

.twm-prose h3 {
	font-size: 1.25rem;
	margin-top: 2rem;
}

.twm-prose > p:first-child {
	color: var(--twm-ink);
	font-size: 1.125rem;
}

.twm-prose ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.twm-prose ul li {
	padding-left: 1.5rem;
	position: relative;
}

.twm-prose ul li::before {
	background-color: var(--twm-accent);
	border-radius: 50%;
	content: "";
	height: 0.4rem;
	left: 0.35rem;
	position: absolute;
	top: 0.6em;
	width: 0.4rem;
}

.twm-page__body .entry-footer {
	margin-top: 2rem;
}

/*--------------------------------------------------------------
28. Articles
--------------------------------------------------------------*/
.twm-article__back {
	color: inherit;
	text-decoration: none;
}

.twm-article__back:hover,
.twm-article__back:focus {
	text-decoration: underline;
}

.twm-article__meta {
	align-items: center;
	color: var(--twm-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}

.twm-article__meta a {
	color: var(--twm-accent);
	font-weight: 600;
}

.twm-article__media {
	padding-bottom: 0;
}

.twm-article__media img {
	border-radius: var(--twm-radius);
	display: block;
	height: auto;
	width: 100%;
}

/* The page head carries the top spacing already. */
.twm-article__body {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.twm-article__nav {
	border-top: 1px solid var(--twm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	max-width: 46rem;
	padding-top: 1.5rem;
}

.twm-article__nav a {
	color: var(--twm-accent);
	font-weight: 600;
	text-decoration: none;
}

.twm-article__nav a:hover,
.twm-article__nav a:focus {
	text-decoration: underline;
}

.twm-article__related {
	background-color: var(--twm-bg-soft);
	border-top: 1px solid var(--twm-line);
}

/* The index's page head already spaces the grid below it. */
.twm-insights--index {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.twm-insights .pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.twm-insights .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.twm-insights .page-numbers {
	border: 1px solid var(--twm-line);
	border-radius: var(--twm-radius-sm);
	color: var(--twm-body);
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	text-decoration: none;
}

.twm-insights .page-numbers:hover,
.twm-insights .page-numbers:focus {
	border-color: var(--twm-accent);
	color: var(--twm-accent);
}

.twm-insights .page-numbers.current {
	background-color: var(--twm-accent);
	border-color: var(--twm-accent);
	color: #fff;
}

/*--------------------------------------------------------------
29. Contact form
--------------------------------------------------------------*/
/*
 * Forminator styles its own controls with selectors like
 *   .forminator-ui.forminator-custom-form[data-design="default"] .forminator-checkbox
 * which is specificity (0,4,0). A plain `.twm-form .forminator-checkbox` is
 * (0,2,0) and silently loses - the rule is in the stylesheet, matches the
 * element, and does nothing.
 *
 * So every override below is prefixed with
 *   .twm-form .forminator-ui.forminator-custom-form[data-design]
 * which is (0,5,0): higher than the plugin's own, and independent of which
 * stylesheet the browser loads last. The unquoted [data-design] also means this
 * keeps working if the form's design setting is ever changed from "default".
 */
.twm-form {
	border-top: 1px solid var(--twm-line);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(2rem, 4vw, 3rem);
}

/*
 * The rule above separates the form from whatever precedes it. With the intro
 * copy and booking button removed the form leads the column, so the divider
 * would be a line drawn under nothing.
 */
.twm-contact__body > .twm-form:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.twm-form__title {
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	margin: 0 0 0.5rem;
}

.twm-form__lede {
	color: var(--twm-muted);
	margin: 0 0 2rem;
	max-width: 46ch;
}

/* Labels and field rhythm. The "none" field style strips Forminator's own
   spacing, so the vertical rhythm is set here. */
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-label {
	color: var(--twm-ink);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}

.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-row + .forminator-row {
	margin-top: 1.5rem;
}

/*
 * The submit row's previous sibling is an unclassed element Forminator prints,
 * so the adjacent-sibling rule above never matches it and the button ended up
 * flush against the textarea. Targeted directly, and given a little more room
 * than the gaps between fields so the button reads as the end of the form.
 */
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-row-last {
	margin-top: 2.5rem;
}

/* Inputs. */
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-input,
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-textarea {
	border-color: var(--twm-line);
	border-radius: var(--twm-radius-sm);
	color: var(--twm-ink);
}

/*
 * Select2 replaces the real <select> with a span and hides the original off
 * screen, so styling select.forminator-select2 restyles something nobody sees.
 * The visible control is .select2-selection, and it ships with square corners
 * while every other field is rounded.
 */
.twm-form .forminator-ui.forminator-custom-form[data-design] .select2-container .select2-selection,
.twm-form .forminator-ui.forminator-custom-form[data-design] .select2-container .select2-selection--single {
	border-color: var(--twm-line);
	border-radius: var(--twm-radius-sm);
}

.twm-form .forminator-ui.forminator-custom-form[data-design] .select2-container .select2-selection__rendered {
	color: var(--twm-ink);
}

/* The open dropdown panel, so the rounding is not just on the closed state. */
.select2-container .select2-dropdown {
	border-color: var(--twm-line);
	border-radius: var(--twm-radius-sm);
	overflow: hidden;
}

.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-input:focus,
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-textarea:focus {
	border-color: var(--twm-accent);
	outline: 2px solid var(--twm-accent-soft);
	outline-offset: 1px;
}

/*
 * The submit button. Without the prefix this came through at the plugin's 2px
 * radius and 10px padding, and inherited the theme's dark body colour onto the
 * accent green - which fails contrast. White on --twm-accent is the pairing
 * .twm-btn--primary already uses.
 */
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit,
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:visited {
	background-color: var(--twm-accent);
	border-radius: var(--twm-radius-pill);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.9rem 1.75rem;
}

.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover,
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus {
	background-color: var(--twm-accent-strong);
	color: #fff;
}

/*
 * Preferred Services. The plugin gives each option a 20px margin, which on a
 * two-column grid stacks on top of the grid gap and leaves the rows floating
 * far apart. Zero the margins and let the gap do the spacing.
 *
 * The plugin's rule carries :not(.forminator-checkbox-inline), and a :not()
 * argument counts toward specificity - putting it level with the prefix above
 * rather than below it, so source order decided and the plugin won. Repeating
 * the :not() here breaks the tie for good.
 */
.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-checkbox:not(.forminator-checkbox-inline) {
	margin: 0;
}

@media screen and (min-width: 40em) {
	.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-field-checkbox .forminator-field {
		display: grid;
		gap: 0.85rem 1.5rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Forminator prints the field's label as the first child of the same
	 * element that holds the options, so without this the label would occupy
	 * the first grid cell and the options would start alongside it.
	 */
	.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-field-checkbox .forminator-label,
	.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-field-checkbox .forminator-error-message {
		grid-column: 1 / -1;
	}
}

/* Below the breakpoint the options are one stack and still need separating. */
@media screen and (max-width: 39.999em) {
	.twm-form .forminator-ui.forminator-custom-form[data-design] .forminator-checkbox:not(.forminator-checkbox-inline) {
		margin-bottom: 0.85rem;
	}
}