/*
Theme Name: Tom Rigby
Theme URI: https://www.tomrigby.com
Description: Editorial child theme for Tom Rigby, senior freelance copywriter.
             Built on Twenty Twenty-Five so it stays maintained by WordPress core.
             Carries the existing navy and cream brand identity.
Author: Tom Rigby
Template: twentytwentyfive
Version: 1.11.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tomrigby
*/

/* Long-form reading comfort - this is a copywriter's site, the words come first. */
.entry-content > p {
  max-width: 76ch;
}

/* Links in body copy: underlined, not colour-only (accessibility). */
.entry-content a:not(.wp-element-button) {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.entry-content a:not(.wp-element-button):hover {
  text-decoration-thickness: 2px;
}

/* Visible keyboard focus everywhere - the old site had none.
   Two rings, because no single colour works on both the white header and the
   navy footer: the navy ring carries light backgrounds, the cream halo behind
   it carries dark ones. One of the two is always visible. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--wp--preset--color--accent);
  border-radius: 2px;
}

/* Skip link must be reachable. */
.skip-link:focus {
  outline: 3px solid var(--wp--preset--color--primary);
  box-shadow: 0 0 0 5px var(--wp--preset--color--accent);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark sections: gold fails contrast on navy (2.76:1), so links use cream there.
   Excludes the navigation: core wraps the whole menu in a div carrying the
   overlay colour class even on desktop, so without the exclusion the header
   links turned white-on-white on hover and vanished. */
.has-primary-background-color a:not(.wp-element-button):not(.wp-block-navigation-item__content),
.has-primary-dark-background-color a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
  color: var(--wp--preset--color--accent);
}
.has-primary-background-color a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover,
.has-primary-dark-background-color a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover {
  color: #ffffff;
}

/* Header: keep the logo a sensible optical size and never let it vanish
   on small screens, which is what the previous build did. The block prints a
   width attribute, so these need to beat it. */
.wp-block-site-logo img,
.wp-block-site-logo a img { width: 138px !important; max-width: 138px !important; height: auto !important; }
@media (max-width: 782px) {
  .wp-block-site-logo img,
  .wp-block-site-logo a img { width: 104px !important; max-width: 104px !important; }
}

/* Hero: first heading on a page gets room to breathe. */
.entry-content > h1:first-child { margin-bottom: 0.6em; }

/* ---------------------------------------------------------------- forms --- */
.tr-form p { margin: 0 0 1.4rem; }
.tr-form label {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--wp--preset--color--primary);
}
.tr-optional { font-weight: 400; opacity: 0.6; }
.tr-form input[type="text"],
.tr-form input[type="email"],
.tr-form input[type="tel"],
.tr-form input[type="url"],
.tr-form textarea {
  width: 100%;
  box-sizing: border-box;                /* padding + border inside the 100% */
  max-width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 1rem;                       /* 16px stops iOS zooming on focus */
  color: var(--wp--preset--color--contrast);
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
}
.tr-form input:focus, .tr-form textarea:focus {
  outline: 3px solid var(--wp--preset--color--accent-strong);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary);
}
.tr-form textarea { min-height: 170px; resize: vertical; }
.tr-form input[type="submit"] {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--wp--preset--color--primary);
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 2rem;
  cursor: pointer;
  min-height: 44px;                      /* touch target */
}
.tr-form input[type="submit"]:hover { background: var(--wp--preset--color--primary-dark); }

/* CF7 feedback: make errors obvious and announced, not just red text. */
.wpcf7-not-valid-tip {
  color: #a4161a;
  font-size: 0.9rem;
  margin-top: 0.35rem;
  font-family: var(--wp--preset--font-family--heading);
}
.tr-form .wpcf7-not-valid { border-color: #a4161a; border-width: 2px; }
.wpcf7-response-output {
  margin: 1.5rem 0 0 !important;
  padding: 1rem 1.2rem !important;
  border-width: 2px !important;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.95rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #2f6b4f !important; background: #f2f9f5; color: #1d4432; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #a4161a !important; background: #fdf3f3; color: #7a1114; }

/* Screen-reader-only text used for required-field cues. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ logo wall --- */
/* Client logo wall.
   The logos arrive as 75 loose image blocks of wildly different dimensions -
   tall roundels next to wide wordmarks. A grid of fixed-height cells gives
   them even optical weight, and greyscale keeps them reading as evidence
   rather than competing with the copy. */
.tr-logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin-block: var(--wp--preset--spacing--30);
}

.tr-logo-wall .tr-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  margin: 0;
  padding: 0.25rem;
}

.tr-logo-wall .tr-logo img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.tr-logo-wall .tr-logo img:hover,
.tr-logo-wall .tr-logo img:focus {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 480px) {
  .tr-logo-wall {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
  .tr-logo-wall .tr-logo { height: 54px; }
  .tr-logo-wall .tr-logo img { max-height: 32px; }
}

/* --------------------------------------------------------------------------
   Portfolio gallery
   -------------------------------------------------------------------------- */

.tr-gallery-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.tr-filter {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.tr-filter:hover {
	border-color: var(--wp--preset--color--primary);
}

.tr-filter[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tr-filter__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
	margin-inline-start: 0.35em;
}

.tr-filter[aria-pressed="true"] .tr-filter__count {
	opacity: 0.8;
}

.tr-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.tr-gallery .tr-item {
	margin: 0;
}

.tr-gallery .tr-item a,
.tr-gallery .tr-item img {
	display: block;
}

.tr-gallery .tr-item img {
	width: 100%;
	height: auto;
	/* The samples run from square brochures to a 1500x554 banner. A fixed
	   ratio keeps the grid even; `contain` means none of them gets cropped -
	   on a portfolio, showing the whole piece matters more than a flush grid. */
	aspect-ratio: 3 / 4;
	object-fit: contain;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--muted);
}

.tr-gallery .tr-item a:hover img {
	border-color: var(--wp--preset--color--primary);
}

.tr-gallery .wp-element-caption {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.82rem;
	line-height: 1.35;
	margin-top: 0.6rem;
	color: var(--wp--preset--color--contrast);
	text-align: left;
}

.tr-pdf {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.1em 0.45em;
	margin-inline-start: 0.35em;
	border-radius: 3px;
	background: var(--wp--preset--color--muted);
	color: #96492f; /* darker terracotta: 5.1:1 on the muted badge */
	vertical-align: 1px;
}

@media (max-width: 480px) {
	.tr-gallery {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Post listings
   -------------------------------------------------------------------------- */

.tr-posts .wp-block-post {
	display: flex;
	flex-direction: column;
}

.tr-posts .wp-block-post-featured-image {
	margin-bottom: 0.75rem;
}

.tr-posts .wp-block-post-featured-image img {
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
}

.tr-posts .wp-block-post-date {
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tr-posts .wp-block-post-title a {
	text-decoration: none;
}

.tr-posts .wp-block-post-title a:hover {
	text-decoration: underline;
}

.tr-posts .wp-block-post-excerpt__more-text {
	margin-top: 0.4rem;
}

.tr-posts .wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	gap: 0.75rem;
}

.tr-posts .wp-block-query-pagination-numbers .page-numbers {
	padding: 0.2rem 0.55rem;
	border-radius: 4px;
}

.tr-posts .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.tr-posts .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

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

/* Services has 15 children and Sectors 12. A single column would run off the
   bottom of the screen, so the big menus go two-up.

   The selectors below deliberately mirror core's own open-state chain
   (`.wp-block-navigation .has-child .…__toggle[aria-expanded="true"] ~ …`),
   which is five classes plus an attribute. Anything shorter loses to it and
   the panel stays 200px wide. */
.wp-block-navigation .tr-megamenu > .wp-block-navigation__submenu-container {
	padding: 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(20, 20, 43, 0.28);
}

/* Anchor the big panels to the header rather than to the menu item. A 550px
   panel hung off a 55px item falls off one edge of the screen or the other
   depending on where that item happens to sit; pinned to the header's right
   edge it is always on screen, for both menus. */
.tr-header > .wp-block-group {
	position: relative;
}

.wp-block-navigation .has-child.tr-megamenu {
	position: static;
}

.wp-block-navigation .has-child.tr-megamenu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child.tr-megamenu:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child.tr-megamenu:focus-within > .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
	top: 100%;
	width: max-content;
	min-width: 30rem;
	max-width: calc(100vw - 3rem);
	/* Grid, not CSS columns: core lays the submenu out as a flex column and
	   `columns` is ignored on a flex container. */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1rem 0.4rem;
	align-content: start;
}

.tr-megamenu .wp-block-navigation__submenu-container > li {
	break-inside: avoid;
}

/* The top level is uppercase and tracked out; at 15 items that would shout. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
	display: block;
}

/* Items sit on the navy panel with cream text; the hover state darkens the
   row rather than lightening it, so the text stays readable. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--primary-dark);
	color: #ffffff;
}

/* Not enough room for two columns on a narrow window. */
@media (max-width: 860px) {
	.wp-block-navigation .has-child.tr-megamenu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child.tr-megamenu:hover > .wp-block-navigation__submenu-container,
	.wp-block-navigation .has-child.tr-megamenu:focus-within > .wp-block-navigation__submenu-container {
		min-width: 0;
		grid-template-columns: 1fr;
	}
}

/* The overlay lays submenus out in normal flow, so undo the static trick. */
.wp-block-navigation .is-menu-open .has-child.tr-megamenu {
	position: relative;
}

/* In the mobile overlay the dropdown is a plain nested list, so drop the card
   styling and the columns - they only make sense as a hover panel. Needs one
   more class than the desktop rules above to win. */
.wp-block-navigation .is-menu-open .has-child.tr-megamenu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.wp-block-navigation .is-menu-open .has-child.tr-megamenu:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .is-menu-open .has-child.tr-megamenu > .wp-block-navigation__submenu-container {
	left: auto;
	right: auto;
	display: block;
	min-width: 0;
	max-width: none;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding-left: 0.9rem;
}

/* --------------------------------------------------------------------------
   Breadcrumbs and sibling navigation
   -------------------------------------------------------------------------- */

.tr-breadcrumb {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.82rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.tr-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	align-items: baseline;
}

.tr-breadcrumb li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.tr-breadcrumb li + li::before {
	content: "/";
	opacity: 0.45;
}

.tr-breadcrumb [aria-current="page"] {
	opacity: 0.7;
}

.tr-siblings {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.tr-siblings h2 {
	font-size: 0.85rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	margin: 0 0 0.9rem;
}

.tr-siblings ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 0.3rem 1.2rem;
}

.tr-siblings a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.92rem;
	text-decoration: none;
	display: block;
	padding: 0.35rem 0;
}

.tr-siblings a:hover {
	text-decoration: underline;
}

/* Sector hero. Wide, shallow crop so the image sets the scene without pushing
   the copy below the fold. */
.tr-hero {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--40);
}

.tr-hero img {
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 8;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 600px) {
	.tr-hero img {
		aspect-ratio: 16 / 9;
	}
}

/* WCAG 2.2 wants interactive targets at 24x24 or more. Core renders the
   submenu chevron as a bare 9px glyph, and breadcrumb links come out at 22px
   on their own line - both just under. */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	padding: 0 0.2rem;
}

.tr-breadcrumb a,
.tr-breadcrumb [aria-current="page"] {
	display: inline-block;
	padding: 0.3rem 0;
}

/* A stray 84-character run of ellipses in the automotive copy could not wrap,
   which forced ~400px of horizontal scrolling on that page at every width.
   This is the general guard: no single token can widen the page again. */
body,
.entry-content,
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Page sections
   The Divi build was a stack of full-width sections with alternating
   backgrounds, two-column rows and card grids. The conversion flattened all of
   that into one 720px column, which on a desktop reads as a phone layout. These
   classes put the section rhythm back using core group/columns/grid blocks, so
   everything stays editable.
   -------------------------------------------------------------------------- */

.tr-band {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tr-band + .tr-band {
	margin-top: 0 !important;
}

.tr-band--navy,
.tr-band--navy h1,
.tr-band--navy h2,
.tr-band--navy h3 {
	color: var(--wp--preset--color--base);
}

.tr-band--navy a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent);
}

/* Section headings: the source has them in capitals; give them a small
   eyebrow scale rather than a shout. */
.tr-band > h2.wp-block-heading,
.tr-band .tr-band__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Hero */
.tr-hero-band {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.tr-hero-band h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	margin-bottom: var(--wp--preset--spacing--30);
}

.tr-hero-band p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	max-width: 34ch;
}

.tr-hero-band .wp-block-image img {
	border-radius: 12px;
	width: 100%;
	/* The portrait file is 507px wide. Never scale it up - it goes soft. */
	max-width: 507px;
	height: auto;
	margin-inline: auto;
}

/* Process steps: numbered cards, counter supplied by CSS, no copy added. */
.tr-steps {
	counter-reset: tr-step;
}

.tr-steps > p {
	counter-increment: tr-step;
	position: relative;
	padding: 1.4rem 1.4rem 1.4rem 4.2rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	margin: 0;
	font-size: 1.02rem;
}

.tr-steps > p::before {
	content: counter(tr-step);
	position: absolute;
	left: 1.2rem;
	top: 1.15rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-strong);
}

/* Testimonial cards */
.tr-quotes > .wp-block-quote.tr-testimonial,
.wp-block-quote.tr-testimonial {
	margin: 0;
	padding: 1.4rem 1.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent-strong);
	border-radius: 10px;
	font-size: 1.02rem;
	font-style: normal;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.wp-block-quote.tr-testimonial p {
	margin: 0;
}

.wp-block-quote.tr-testimonial cite {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	margin-top: auto;
}

/* "More testimonials" disclosure */
.tr-more {
	margin-top: var(--wp--preset--spacing--30);
}

.tr-more > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	padding: 0.7rem 0;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.tr-more > summary::-webkit-details-marker { display: none; }

.tr-more > summary::before {
	content: "+";
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--primary);
	font-size: 1rem;
	line-height: 1;
}

.tr-more[open] > summary::before {
	content: "−";
}

.tr-more[open] > summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Compact centred contact band */
.tr-contact-band {
	text-align: center;
}

.tr-contact-band p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	margin: 0.25rem 0;
}

/* Core grid layouts stack on narrow screens by themselves; the steps and
   quotes just need a floor so cards do not get squeezed. */
@media (max-width: 781px) {
	.tr-steps.is-layout-grid,
	.tr-quotes.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Step titles restored from the original Divi timeline (Conversation,
   Proposal, Discover, Thinking, Write, Deliver). */
.tr-steps > p > .tr-step__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.35rem;
}

.tr-steps-intro {
	max-width: 60ch;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Hub cards (Services / Sectors), contact layout, post meta and navigation
   -------------------------------------------------------------------------- */

.tr-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tr-cards .wp-block-post:hover,
.tr-cards .wp-block-post:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgba(20, 20, 43, 0.1);
}

.tr-cards .wp-block-post-featured-image {
	margin: 0;
}

.tr-cards .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.tr-cards .wp-block-post-title,
.tr-cards .wp-block-post-excerpt {
	padding: 0 1.25rem;
}

.tr-cards .wp-block-post-title {
	margin: 1.1rem 0 0.4rem;
}

.tr-cards .wp-block-post-title a {
	text-decoration: none;
}

.tr-cards .wp-block-post-title a::after {
	content: " \2192";
	opacity: 0.55;
}

.tr-cards .wp-block-post-title a:hover {
	text-decoration: underline;
}

.tr-cards .wp-block-post-excerpt {
	margin-bottom: 1.25rem;
	color: var(--wp--preset--color--contrast);
}

.tr-cards .wp-block-post-excerpt__more-text {
	display: none;
}

/* Contact: form on the left, the quote and details on the right. */
.tr-contact-aside {
	background: var(--wp--preset--color--muted);
	border-radius: 12px;
	padding: 1.6rem 1.7rem;
	position: sticky;
	top: 1.5rem;
}

.tr-contact-aside .tr-pullquote {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.4rem;
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--accent-strong);
}

.tr-contact-aside .tr-contact-line {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.tr-contact-aside .tr-contact-line a {
	text-decoration: none;
}

.tr-contact-aside .tr-contact-line a:hover {
	text-decoration: underline;
}

/* Blog post meta and previous / next links */
.tr-post-meta {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.8;
}

.tr-post-meta a {
	text-decoration: none;
}

.tr-post-nav {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	gap: 1rem;
}

.tr-post-nav .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}

.tr-post-nav .post-navigation-link-previous,
.tr-post-nav .post-navigation-link-next {
	max-width: 48%;
}

.tr-post-nav a {
	text-decoration: none;
}

.tr-post-nav a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.tr-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	.tr-contact-aside {
		position: static;
	}
}

/* Audit follow-ups: 24px minimum targets on card and category links; two
   card columns on tablets; and inline images pasted into old posts without a
   block wrapper must never exceed the column. */
.tr-cards .wp-block-post-title a,
.tr-post-meta a {
	display: inline-block;
	padding: 0.25rem 0;
}

@media (min-width: 600px) and (max-width: 781px) {
	.tr-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

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

/* Contact Form 7 states. These only appear after a submit, so LiteSpeed's
   unused-CSS pass never sees them and strips the plugin's own rules; the
   selectors are also on the UCSS allowlist. */
.tr-form .wpcf7-not-valid {
	border-color: #b3261e;
}

.tr-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	color: #b3261e;
}

.tr-form .wpcf7-spinner {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.75rem;
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid var(--wp--preset--color--border);
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 999px;
	animation: tr-spin 0.8s linear infinite;
	background: none;
	opacity: 1;
}

.tr-form .wpcf7-spinner::before {
	display: none;
}

@keyframes tr-spin {
	to { transform: rotate(360deg); }
}

.tr-form .wpcf7-form.submitting .wpcf7-submit {
	opacity: 0.6;
	pointer-events: none;
}

.tr-form .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.tr-form .wpcf7-spinner { animation: none; }
}

/* Phone header: one row. The logo was stacking above the menu button and
   call-to-action and taking ~230px of an 812px screen before any content. */
@media (max-width: 600px) {
	.tr-header > .wp-block-group {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.75rem;
	}
	.wp-block-site-logo img,
	.wp-block-site-logo a img {
		width: 76px !important;
		max-width: 76px !important;
	}
	.tr-header__right {
		flex-wrap: nowrap;
		gap: 0.6rem;
		margin-left: auto;
	}
	.tr-header__cta .wp-block-button__link {
		padding: 0.65rem 1rem;
		font-size: 0.82rem;
		white-space: nowrap;
	}
	.tr-header {
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}
}

/* Tablet header (601-900px): the menu was wrapping into a third row under a
   lonely logo. Logo left and call-to-action right on one row, menu on its own
   full-width row beneath. */
@media (min-width: 601px) and (max-width: 900px) {
	/* Core prints `body .is-layout-flex { display:flex }`, so this needs more
	   than a single class to win. */
	.tr-header .tr-header__right.is-layout-flex {
		display: contents;
	}
	/* With the wrapper flattened, its children become flex items of the outer
	   group, so they can be ordered: logo, call-to-action, then the menu. */
	.tr-header .tr-header__right > .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		margin-top: 0.4rem;
	}
	.tr-header .tr-header__right > .tr-header__cta {
		order: 2;
	}
}

/* Footer links: enough height to tap. */
.tr-footer .wp-block-navigation-item__content {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

/* FAQ questions in the heading face so the list scans. */
.wp-block-details > summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
	cursor: pointer;
	padding: 0.85rem 0;
}

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0;
}

.wp-block-details[open] > summary {
	color: var(--wp--preset--color--primary);
}

/* September 2026: Tom's creative studio direction. Keep the established
   navy/cream identity, with paper-like surfaces and typography doing the work. */
body {
	--wp--preset--font-family--body: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tr-paper: #fffdf5;
	--tr-warm: #f3efdf;
	font-family: var(--wp--preset--font-family--body);
	background: var(--tr-paper);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.75;
}

.tr-header.has-background {
	background: var(--wp--preset--color--accent) !important;
	border-bottom: 1px solid rgba(33, 33, 86, 0.16);
}

.tr-header .wp-block-site-logo img {
	/* Removes the white backing of the existing navy signature logo. */
	mix-blend-mode: multiply;
	width: 108px !important;
	max-width: 108px !important;
}

.tr-header .wp-block-navigation {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
}

.tr-header .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.wp-element-button,
.wp-block-button__link,
.tr-form input[type="submit"] {
	border-radius: 4px;
	font-weight: 500;
	letter-spacing: 0;
}

.tr-header__cta .wp-block-button__link {
	border-radius: 4px;
	padding: 0.85rem 1.25rem;
}

.tr-band--white { background: var(--tr-paper); }
.tr-band--muted.has-background { background: var(--tr-warm) !important; }
.home .wp-site-blocks > main { margin-top: 0; }

.tr-band {
	padding-block: clamp(3rem, 5vw, 5rem);
}

.tr-hero-band {
	padding-block: clamp(2.5rem, 4vw, 4rem);
}

.tr-hero-band h1 {
	font-size: clamp(2.25rem, 4.5vw, 4.5rem);
	letter-spacing: -0.045em;
	line-height: 1.04;
}

.tr-hero-band h1::first-line {
	color: var(--wp--preset--color--accent);
}

.tr-hero-band p {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	line-height: 1.75;
	max-width: 48ch;
}

.tr-hero-band .wp-block-image {
	border-bottom: 3px solid var(--wp--preset--color--accent);
}

.tr-hero-band .wp-block-image img {
	border-radius: 0;
	display: block;
}

.tr-band > h2.wp-block-heading,
.tr-band .tr-band__title {
	letter-spacing: -0.035em;
	line-height: 1.12;
}

/* Open layouts and rules replace the repeated corporate card treatment. */
.tr-steps > p {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	padding: 1.5rem 0.25rem 1.5rem 3rem;
}

.tr-steps > p::before { left: 0; top: 1.65rem; }

.tr-quotes > .wp-block-quote.tr-testimonial,
.wp-block-quote.tr-testimonial {
	background: transparent;
	border: 0;
	border-top: 2px solid var(--wp--preset--color--accent-strong);
	border-radius: 0;
	padding: 1.4rem 0.5rem 0.5rem 0;
}

.tr-cards .wp-block-post {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.tr-cards .wp-block-post-title,
.tr-cards .wp-block-post-excerpt { padding-inline: 0; }

.tr-cards .wp-block-post-featured-image img,
.tr-posts .wp-block-post-featured-image img,
.tr-hero img { border-radius: 2px; }

.tr-logo-wall .tr-logo img { opacity: 0.9; }

.tr-gallery { gap: 2rem 1.5rem; }
.tr-gallery .tr-item { min-width: 0; }
.tr-gallery .tr-item img {
	box-sizing: border-box;
	background: var(--tr-warm);
	border: 0;
	padding: 1rem;
}
.tr-gallery .tr-item a:hover img {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.tr-gallery .wp-element-caption { font-size: 0.9rem; line-height: 1.5; }
.tr-filter { border-radius: 3px; min-height: 44px; }

.tr-contact-aside {
	background: var(--tr-warm);
	border-radius: 0;
	border-top: 3px solid var(--wp--preset--color--accent-strong);
}

/* The legacy honeypot must stay out of visual layout and the accessibility
   tree, including when an optimizer drops the plugin's own stylesheet. */
.wpcf7 .cf7apps-honeypot-wrap,
.wpcf7 .wpcf7-form-control-wrap.honeypot { display: none !important; }

@media (max-width: 600px) {
	.tr-header .wp-block-site-logo img { width: 76px !important; max-width: 76px !important; }
	.tr-header__cta .wp-block-button__link { padding: 0.7rem 0.85rem; font-size: 0.8rem; }
	.tr-hero-band .wp-block-image { max-width: 340px; margin-inline: auto; }
	.tr-gallery { gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
	.tr-header__right { gap: 0.35rem; }
	.tr-gallery { grid-template-columns: 1fr; }
}

/* 25 September 2026: Tom's chosen palette - "Refined navy" (his colour note).
   Warm ivory reading surfaces, ink-navy text, slate for secondary text,
   clear-blue links, solid navy kept for genuine calls to action, and the pale
   yellow used sparingly (header, hero button, one highlight band). */
body {
	--tr-paper: #f8f7ef;   /* warm ivory - main background */
	--tr-warm: #fdfbd4;    /* pale yellow - alternate band, sparingly */
	--tr-ink: #202044;     /* ink navy - primary text */
	--tr-slate: #4a4a61;   /* slate - secondary text */
	--tr-link: #303081;    /* clear blue - text links */
	color: var(--tr-ink);
}

/* Links: clear blue, underlined in running text, navy on hover. */
.entry-content a:not(.wp-element-button),
.tr-band:not(.tr-band--navy) a:not(.wp-element-button):not(.wp-block-navigation-item__content),
.wp-block-post-title a,
.tr-more a {
	color: var(--tr-link);
}
.entry-content a:not(.wp-element-button):hover,
.tr-band:not(.tr-band--navy) a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover,
.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Secondary text in slate rather than faded ink. */
.wp-block-post-date,
.wp-block-post-terms,
.wp-element-caption,
figcaption,
.tr-optional,
.tr-posts .wp-block-post-date,
.tr-gallery .wp-element-caption,
.tr-cards .wp-block-post-excerpt,
.tr-testimonial cite,
.wp-block-quote cite {
	color: var(--tr-slate);
	opacity: 1;
}

/* Solid navy buttons read as calls to action: ivory text, deep navy on hover. */
.wp-element-button:not(.has-background):not(.has-accent-background-color),
.wp-block-button__link:not(.has-background):not(.has-accent-background-color),
.tr-form input[type="submit"] {
	color: var(--tr-paper);
}

/* Service and sector lists (four or more buttons in one group) are light cards
   on the ivory, not a wall of navy. Single buttons stay navy calls to action. */
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background) {
	background: #ffffff;
	color: var(--tr-ink);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 0 rgba(32, 32, 68, 0.06);
}
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background):hover,
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background):focus-visible {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Ivory everywhere the page shows paper; pale yellow only on the marked bands. */
body,
.wp-site-blocks,
.wp-site-blocks > main {
	background: var(--tr-paper);
}
.tr-band--white { background: var(--tr-paper); }
.tr-band--muted.has-background { background: var(--tr-warm) !important; }

/* Quiet portfolio and reading areas: the work supplies the colour. */
.tr-gallery .tr-item img { background: #ffffff; border: 1px solid var(--wp--preset--color--border); }
.tr-contact-aside { background: var(--tr-warm); }

/* 26 September 2026: sector pages show Tom's own work for that sector in place
   of stock photography. Same markup and look as the portfolio gallery, kept to
   a modest size so the copy stays near the top. */
.tr-gallery.tr-work {
	grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
	justify-content: start;
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}
.tr-gallery.tr-work .wp-element-caption { font-size: 0.82rem; }
@media (max-width: 600px) {
	.tr-gallery.tr-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Blog cards without a picture: keep the grid tidy with a ruled top edge. */
.tr-posts .wp-block-post:not(:has(.wp-block-post-featured-image)),
.tr-cards .wp-block-post:not(:has(.wp-block-post-featured-image)) {
	border-top: 3px solid var(--wp--preset--color--primary);
	padding-top: 1rem;
}

/* ===========================================================================
   Design system, 26 September 2026 (theme 1.10.0)
   From Tom's design brief: warm ivory ground, ink navy for headings and
   structure, charcoal reading text, soft stone for occasional section bands,
   terracotta used sparingly for interaction and small details. Every text
   pair checked for WCAG AA: terracotta #B65F47 is kept to rules and details
   (3.95:1); hover text and hover fills use #A4533D (4.79:1 both ways).
   ======================================================================== */
body {
	--tr-paper: #f4f1ea;      /* warm ivory - page ground */
	--tr-warm: #d8d2c7;       /* soft stone - alternate bands */
	--tr-field: #faf8f3;      /* form fields */
	--tr-ink: #303030;        /* charcoal - reading text */
	--tr-navy: #172a3a;       /* ink navy - headings, structure, CTAs */
	--tr-slate: #62605c;      /* muted charcoal - captions, metadata (ivory only) */
	--tr-link: #172a3a;
	--tr-terra: #b65f47;      /* terracotta - rules and details only */
	--tr-terra-text: #a4533d; /* terracotta safe for text and fills */
	color: var(--tr-ink);
	background: var(--tr-paper);
}
body, .wp-site-blocks, .wp-site-blocks > main { background: var(--tr-paper); }

/* --- Typography: three deliberate scales --------------------------------- */
h1, h2, h3, h4, .wp-block-post-title { color: var(--tr-navy); }
.entry-content > p,
.tr-band > p,
.wp-block-post-content > p { max-width: min(68ch, var(--wp--style--global--content-size, 68ch)); }
h2.wp-block-heading {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
}
h3.wp-block-heading { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); }

/* Statement scale: the few lines meant to be remembered. */
.tr-statement,
.tr-hero-band h1 {
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.03;
	color: var(--tr-navy);
	max-width: 16ch;
}
.tr-statement { margin: 0.5em 0; }

/* --- Links -------------------------------------------------------------- */
a { color: var(--tr-navy); }
.entry-content a:not(.wp-element-button),
.tr-band:not(.tr-band--navy) a:not(.wp-element-button):not(.wp-block-navigation-item__content),
.wp-block-post-title a,
.tr-more a {
	color: var(--tr-navy);
	text-decoration-line: underline;
	text-decoration-color: var(--tr-terra);
	text-underline-offset: 0.2em;
}
.wp-block-post-title a { text-decoration-line: none; }
.entry-content a:not(.wp-element-button):hover,
.tr-band:not(.tr-band--navy) a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover,
.wp-block-post-title a:hover { color: var(--tr-terra-text); }

/* Secondary text: muted charcoal on ivory; charcoal on stone (contrast). */
.wp-block-post-date, .wp-block-post-terms, .wp-element-caption, figcaption,
.tr-optional, .tr-posts .wp-block-post-date, .tr-gallery .wp-element-caption,
.tr-cards .wp-block-post-excerpt, .tr-testimonial cite, .wp-block-quote cite {
	color: var(--tr-slate);
}
.tr-band--muted .wp-element-caption, .tr-band--muted cite, .tr-band--muted .tr-testimonial cite,
.tr-band--muted .wp-block-post-date, .tr-band--muted .wp-block-post-excerpt { color: var(--tr-ink); }

/* --- Header: ivory, no separate band ------------------------------------ */
.tr-header.has-background {
	background: var(--tr-paper) !important;
	border-bottom: 1px solid var(--tr-warm);
}
.tr-header .wp-block-navigation-item__content { color: var(--tr-navy); }
.tr-header .wp-block-navigation-item__content:hover,
.tr-header .current-menu-item > .wp-block-navigation-item__content,
.tr-header [aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--tr-terra);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

/* --- Hero: ivory, a large navy statement, charcoal support, navy CTA ----- */
.tr-hero-band.has-background {
	background: var(--tr-paper) !important;
	color: var(--tr-ink) !important;
}
.tr-hero-band h1::first-line { color: inherit; }
.tr-hero-band p { color: var(--tr-ink); }
.tr-hero-band .wp-block-image { border-bottom: 3px solid var(--tr-terra); }
.tr-hero-band a:not(.wp-element-button) { color: var(--tr-navy); }

/* --- Buttons: one primary style, restrained ----------------------------- */
.wp-element-button,
.wp-block-button__link,
.tr-form input[type="submit"] {
	background: var(--tr-navy);
	color: var(--tr-paper);
	border: 1px solid var(--tr-navy);
	border-radius: 2px;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.wp-element-button:hover, .wp-element-button:focus-visible,
.wp-block-button__link:hover, .wp-block-button__link:focus-visible,
.tr-form input[type="submit"]:hover {
	background: var(--tr-terra-text);
	border-color: var(--tr-terra-text);
	color: var(--tr-paper);
}
/* The old cream buttons become navy primaries on ivory... */
.wp-block-button__link.has-accent-background-color,
.wp-block-button__link.has-primary-background-color {
	background: var(--tr-navy) !important;
	color: var(--tr-paper) !important;
}
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-primary-background-color:hover {
	background: var(--tr-terra-text) !important;
	border-color: var(--tr-terra-text) !important;
}
/* ...and ivory secondaries on navy panels. */
.tr-band--navy .wp-block-button__link,
.tr-footer .wp-block-button__link {
	background: var(--tr-paper) !important;
	color: var(--tr-navy) !important;
	border-color: var(--tr-paper) !important;
}
.tr-band--navy .wp-block-button__link:hover,
.tr-footer .wp-block-button__link:hover {
	background: var(--tr-terra-text) !important;
	border-color: var(--tr-terra-text) !important;
	color: var(--tr-paper) !important;
}

/* Service and sector lists: lightly separated tags, not a wall of pills. */
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) { gap: 0.5rem; }
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--tr-navy);
	border: 1px solid var(--tr-slate);
	border-radius: 2px;
	box-shadow: none;
	padding: 0.55rem 0.9rem;
	font-size: 0.88rem;
	font-weight: 500;
}
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background):hover,
.tr-band:not(.tr-band--navy) .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:not(.has-background):focus-visible {
	background: var(--tr-navy);
	color: var(--tr-paper);
	border-color: var(--tr-navy);
}

/* --- Rhythm: ivory, stone, navy bands ----------------------------------- */
.tr-band { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.tr-band--white { background: var(--tr-paper); }
.tr-band--muted.has-background { background: var(--tr-warm) !important; }
.tr-band--navy.has-background { background: var(--tr-navy) !important; }
.tr-band--navy, .tr-band--navy p { color: var(--tr-paper); }
.tr-band--navy h1, .tr-band--navy h2, .tr-band--navy h3 { color: var(--tr-paper); }

/* Hero overrides the navy-band rules above: ivory ground, navy statement. */
.tr-band.tr-hero-band.has-background { background: var(--tr-paper) !important; color: var(--tr-ink) !important; }
.tr-band.tr-hero-band h1, .tr-band.tr-hero-band h2 { color: var(--tr-navy); }
.tr-band.tr-hero-band p { color: var(--tr-ink); }
.tr-band.tr-hero-band a:not(.wp-element-button) { color: var(--tr-navy); }
.tr-band.tr-hero-band .wp-block-button__link { background: var(--tr-navy) !important; color: var(--tr-paper) !important; border-color: var(--tr-navy) !important; }
.tr-band.tr-hero-band .wp-block-button__link:hover { background: var(--tr-terra-text) !important; border-color: var(--tr-terra-text) !important; }

/* Process steps: numbers in terracotta, navy rules. */
.tr-steps > p { border-top-color: var(--tr-navy); }
.tr-steps > p::before { color: var(--tr-terra-text); }

/* --- Testimonials: editorial, not widgets ------------------------------- */
.tr-quotes > .wp-block-quote.tr-testimonial,
.wp-block-quote.tr-testimonial {
	border-top: 2px solid var(--tr-terra);
	background: transparent;
	padding: 1.4rem 0.25rem 0.25rem 0;
}
.wp-block-quote.tr-testimonial p {
	color: var(--tr-navy);
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.55;
}
.wp-block-quote.tr-testimonial cite { font-size: 0.85rem; font-style: normal; }

/* --- Client logos: one collection, not a bag of logos ------------------- */
.tr-logo-wall .tr-logo img {
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply; /* drops the white boxes some logo files carry */
	opacity: 0.72;
	transition: filter 0.2s, opacity 0.2s;
}
.tr-logo-wall .tr-logo:hover img { filter: none; opacity: 1; }

/* --- Portfolio: the gallery frames the work ----------------------------- */
.tr-gallery .tr-item img { background: #ffffff; border: 1px solid var(--tr-warm); }
.tr-gallery .tr-item a:hover img,
.tr-gallery .tr-item a:focus-visible img {
	border-color: var(--tr-terra);
	outline: 2px solid var(--tr-terra);
	outline-offset: 2px;
}
.tr-filter[aria-pressed="true"] { background: var(--tr-navy); color: var(--tr-paper); border-color: var(--tr-navy); }

/* --- Forms ---------------------------------------------------------------- */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.wpcf7 textarea, .wpcf7 select {
	background: var(--tr-field);
	border: 1px solid var(--tr-slate);
	color: var(--tr-ink);
	border-radius: 2px;
}
.wpcf7 input[type="submit"] { background: var(--tr-navy); color: var(--tr-paper); border-radius: 2px; }
.wpcf7 input[type="submit"]:hover { background: var(--tr-terra-text); }
.tr-contact-aside { background: var(--tr-warm); border-top-color: var(--tr-terra); }
.tr-contact-aside, .tr-contact-aside p, .tr-contact-aside a { color: var(--tr-navy); }

/* --- Footer: navy close to every page ----------------------------------- */
.tr-footer.has-background { background: var(--tr-navy) !important; }
.tr-footer, .tr-footer p, .tr-footer a { color: var(--tr-paper); }
.tr-footer h2 { color: var(--tr-warm); }
.tr-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--tr-terra);
	text-decoration-thickness: 2px;
}

/* Pull quotes and statements get a small terracotta rule, nothing more. */
.wp-block-pullquote, .tr-pull { border-left: 3px solid var(--tr-terra); padding-left: 1.25rem; }

/* Focus: navy ring with a stone halo, visible on ivory and on navy. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline-color: var(--tr-navy);
	box-shadow: 0 0 0 5px var(--tr-warm);
}

/* Name line under the home page statement. */
.tr-band.tr-hero-band .tr-hero-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tr-terra-text);
	margin-top: 0.25rem;
}
.tr-band.tr-hero-band h1 { max-width: 18ch; }

/* The sector filter row sits under the type row. */
.tr-sector-filters { margin-top: 0.5rem; }

/* One button shape everywhere (some older buttons carry an inline radius). */
.wp-block-button__link, .wp-element-button { border-radius: 2px !important; }

/* ===========================================================================
   Home page, 29 September 2026 (theme 1.11.0)
   From Tom's homepage brief: one 1320px grid with a single left edge, type as
   the main design feature, work as the imagery, rules instead of boxes.
   Section order: hero, experience, what I write, selected work, how I write,
   sectors, clients, testimonials, then the footer's closing call to action.
   ======================================================================== */
body {
	--tr-grid: 1320px;
	--tr-gutter: var(--wp--style--root--padding-left, clamp(1.25rem, 4.5vw, 3.5rem));
	--tr-section: clamp(4rem, 2rem + 5vw, 7.5rem);
	--tr-measure: 42rem;
}

/* --- Grid and rhythm ------------------------------------------------------ */
.tr-home-sec.alignfull {
	padding: var(--tr-section) var(--tr-gutter);
	margin-block: 0;
	background: var(--tr-paper);
	color: var(--tr-ink);
}
.tr-home-sec .tr-home-inner {
	max-width: var(--tr-grid);
	margin-inline: auto !important;
}
.tr-home-sec p { font-size: 1.0625rem; line-height: 1.7; max-width: var(--tr-measure); margin-inline: 0; }
/* Two ivory sections in a row are divided by a fine rule, not a box. */
.tr-home-proof .tr-home-inner,
.tr-home-write .tr-home-inner,
.tr-home-whyme .tr-home-inner,
.tr-home-clients .tr-home-inner {
	border-top: 1px solid var(--tr-warm);
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.tr-home-proof.alignfull,
.tr-home-write.alignfull,
.tr-home-whyme.alignfull,
.tr-home-clients.alignfull { padding-top: 0; }
.tr-home-selected.alignfull,
.tr-home-testimonials.alignfull { background: var(--tr-warm); }
.tr-home-sectors.alignfull { background: var(--tr-navy); color: var(--tr-paper); }

/* --- Type scale ------------------------------------------------------------ */
.tr-home-sec h2.wp-block-heading {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--tr-navy);
	max-width: 18ch;
	margin: 0 0 1.5rem;
	text-transform: none;
}
.tr-home-sec h3.wp-block-heading {
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--tr-navy);
	margin: 0 0 0.6rem;
}
/* Small labels: section names that sit above a statement, group names. */
.tr-home-sec .wp-block-heading.tr-label,
.tr-home-sec p.tr-label,
.tr-home-sec .tr-home-work__client,
.tr-home-sec .tr-hero-name {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--tr-terra-text);
	max-width: none;
	margin: 0 0 1.75rem;
}
.tr-home-sec .tr-home-intro {
	font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.375rem);
	line-height: 1.55;
	max-width: 44rem;
	color: var(--tr-ink);
}
.tr-home-sec .tr-home-statement {
	font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.5rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.018em;
	color: var(--tr-navy);
	max-width: 23em;
}
.tr-home-sec .tr-home-statement a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}
.tr-home-sec .tr-home-statement a:hover { color: var(--tr-terra-text); }
.tr-home-sec .tr-home-statement a:focus-visible {
	color: var(--tr-terra-text);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.tr-home-sec .tr-home-statement--short,
.tr-home-sec h2.wp-block-heading.tr-home-statement--short {
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 1.5rem;
}
.tr-home-sec .tr-home-statement--big,
.tr-home-sec h2.wp-block-heading.tr-home-statement--big {
	font-size: clamp(2.5rem, 1.1rem + 5vw, 5.5rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.04em;
	max-width: 13ch;
	color: var(--tr-paper);
}

/* --- Links: one secondary style ------------------------------------------ */
.tr-home-sec .tr-textlink { margin-top: 2.75rem; font-size: 1rem; font-weight: 600; }
.tr-home-sec .tr-textlink a,
.tr-footer .tr-textlink a {
	color: var(--tr-navy);
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--tr-terra);
	text-underline-offset: 0.35em;
}
.tr-home-sec .tr-textlink a::after { content: "\00a0→" / ""; }
.tr-home-sec .tr-textlink a:hover { color: var(--tr-terra-text); text-decoration-color: currentColor; }
.tr-home-selected .tr-textlink a:hover { color: var(--tr-navy); }

/* --- Buttons: one primary treatment -------------------------------------- */
.wp-block-button__link.wp-element-button {
	min-height: 3rem;
	padding: 0.9rem 1.9rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 2px !important;
	box-shadow: none;
}

/* --- 1. Hero --------------------------------------------------------------- */
.tr-home-hero.alignfull { padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); }
.tr-home-hero .tr-home-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
	grid-template-areas: "h1 img" "name img" "intro img" "cta img";
	grid-template-rows: auto auto auto 1fr;
	column-gap: clamp(2.5rem, 7vw, 7rem);
	align-items: start;
}
.tr-home-hero .tr-home-hero-grid > * { margin: 0; }
.tr-home-hero .tr-home-hero-grid > h1 { grid-area: h1; }
.tr-home-hero .tr-home-hero-grid > .tr-hero-name { grid-area: name; }
.tr-home-hero .tr-home-hero-grid > .tr-home-intro { grid-area: intro; }
.tr-home-hero .tr-home-hero-grid > .wp-block-buttons { grid-area: cta; }
.tr-home-hero .tr-home-hero-grid > .tr-home-portrait { grid-area: img; align-self: center; justify-self: end; }
.tr-home-hero h1.wp-block-heading {
	font-size: clamp(2.65rem, 1.35rem + 4.3vw, 4.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--tr-navy);
	max-width: 12ch;
	margin: 0 0 1.75rem;
}
.tr-home-hero .tr-home-hero-grid > .tr-hero-name { margin-bottom: 2rem; }
.tr-home-hero .tr-home-hero-grid > .tr-home-intro { max-width: 36rem; margin-bottom: 2.5rem; }
.tr-home-hero .tr-home-portrait { width: 100%; max-width: 340px; }
.tr-home-hero .tr-home-portrait img { display: block; width: 100%; height: auto; }

/* --- 2. Experience --------------------------------------------------------- */
.tr-home-whyme .tr-home-why { margin: 0; gap: clamp(2rem, 5vw, 5rem); }
.tr-home-sec .tr-home-why h2.wp-block-heading.tr-home-pull {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
	max-width: 16ch;
	margin: 0;
}
.tr-home-why .tr-label { margin: 0 0 1.75rem; }
.tr-home-sec .tr-home-why .tr-home-intro { margin: 3rem 0 0; }

/* --- 3. What I write: a contents page ------------------------------------- */
.tr-home-write .tr-home-contents {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	margin-top: clamp(3rem, 5vw, 4.5rem);
}
.tr-home-contents__group { border-top: 1px solid var(--tr-navy); padding-top: 1.25rem; }
.tr-home-contents__group .wp-block-heading.tr-label { margin-bottom: 0.75rem; }
.tr-home-list { list-style: none; margin: 0; padding: 0; }
.tr-home-list li { margin: 0; border-bottom: 1px solid var(--tr-warm); }
.tr-home-sec .tr-home-list a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--tr-navy);
	text-decoration: none;
}
.tr-home-sec .tr-home-list a::after { content: "→" / ""; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.tr-home-sec .tr-home-list a:hover,
.tr-home-sec .tr-home-list a:focus-visible { color: var(--tr-terra-text); }
.tr-home-sec .tr-home-list a:hover::after,
.tr-home-sec .tr-home-list a:focus-visible::after { opacity: 1; transform: translateX(3px); }

/* --- 4. Selected work ------------------------------------------------------ */
.tr-home-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem 2rem;
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.tr-home-head h2.wp-block-heading { margin: 0; }
.tr-home-head .tr-textlink { margin: 0; }
.tr-home-work {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem clamp(1.5rem, 3vw, 3rem);
}
.tr-home-work__item > * { margin-block: 0; }
.tr-home-work .tr-home-work__cover {
	height: clamp(260px, 26vw, 390px);
	display: flex;
	align-items: flex-end;
	margin: 0 0 1.5rem;
}
.tr-home-work .tr-home-work__cover a { display: block; max-height: 100%; }
.tr-home-work .tr-home-work__cover img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: clamp(260px, 26vw, 390px);
	background: #fff;
	box-shadow: 0 1px 2px rgba(23, 42, 58, 0.12), 0 18px 30px -18px rgba(23, 42, 58, 0.45);
	transition: transform 0.2s;
}
.tr-home-work .tr-home-work__cover a:hover img,
.tr-home-work .tr-home-work__cover a:focus-visible img { transform: translateY(-4px); }
.tr-home-selected .tr-home-work__client { color: var(--tr-navy); margin-bottom: 0.5rem; }
.tr-home-work__item p { font-size: 1rem; line-height: 1.6; color: var(--tr-ink); }
.tr-home-work__item .tr-textlink { margin-top: 1rem; font-size: 0.9375rem; }

/* --- 5. How I write --------------------------------------------------------- */
.tr-home-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.75rem clamp(2rem, 4vw, 4rem);
	margin-top: clamp(3rem, 5vw, 4.5rem);
	counter-reset: tr-home-step;
}
.tr-home-sec .tr-home-steps > p {
	counter-increment: tr-home-step;
	border-top: 1px solid var(--tr-navy);
	padding-top: 1.1rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
}
.tr-home-steps > p::before {
	content: counter(tr-home-step, decimal-leading-zero);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--tr-terra-text);
	margin-bottom: 0.9rem;
}
.tr-home-steps .tr-step__title {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tr-navy);
	margin-bottom: 0.45rem;
}

/* --- 6. Sectors, condensed ------------------------------------------------- */
.tr-home-sectors p.tr-label { color: var(--tr-warm); }
.tr-home-sectors .tr-home-intro { color: var(--tr-warm); margin-top: 2rem !important; }
.tr-home-run {
	list-style: none;
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	max-width: 60rem;
	line-height: 2.1;
}
.tr-home-run li { margin: 0; }
.tr-home-run li:not(:last-child)::after { content: "/"; margin: 0 0.7rem; color: var(--tr-terra); }
.tr-home-sec .tr-home-run a {
	color: var(--tr-paper);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	text-decoration-line: underline;
	text-decoration-color: rgba(244, 241, 234, 0.35);
	text-underline-offset: 0.3em;
}
.tr-home-sec .tr-home-run a:hover { text-decoration-color: var(--tr-terra); }
.tr-home-sectors :focus-visible { outline-color: var(--tr-paper); }

/* --- 7. Clients -------------------------------------------------------------- */
.tr-home-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3.5vw, 3.5rem);
	align-items: center;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}
.tr-home-logos .tr-home-logo { margin: 0; }
.tr-home-logos .tr-home-logo img {
	display: block;
	width: auto;
	height: calc(92px * var(--tr-logo-scale, 1));
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply;
	opacity: 0.75;
}

/* --- 8. Testimonials -------------------------------------------------------- */
.tr-home-testimonials .wp-block-quote.tr-testimonial {
	margin: 0;
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid var(--tr-navy);
	background: none;
}
.tr-home-testimonials .wp-block-quote.tr-testimonial p {
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
	line-height: 1.5;
	color: var(--tr-navy);
	margin: 0 0 1rem;
}
.tr-home-testimonials .wp-block-quote.tr-testimonial cite {
	display: block;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	color: var(--tr-ink);
}
.tr-home-testimonials .wp-block-quote.tr-home-featured {
	border-top: 0;
	padding: 0;
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
	position: relative;
}
.tr-home-testimonials .wp-block-quote.tr-home-featured p {
	font-size: clamp(1.8rem, 1.1rem + 2.5vw, 3.25rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.03em;
	max-width: 22ch;
}
.tr-home-testimonials .wp-block-quote.tr-home-featured p::before {
	content: "“";
	color: var(--tr-terra-text);
	margin-left: -0.45em;
	padding-right: 0.05em;
}
.tr-home-testimonials .wp-block-quote.tr-home-featured p::after { content: "”"; color: var(--tr-terra-text); }
.tr-home-quotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.75rem clamp(2rem, 5vw, 5rem);
}
.tr-home-testimonials .tr-more { margin-top: clamp(3rem, 5vw, 4rem); border-color: var(--tr-navy); }
.tr-home-testimonials .tr-more > summary { color: var(--tr-navy); }
.tr-home-quotes--more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.tr-home-quotes--more .wp-block-quote.tr-testimonial p { font-size: 1.0625rem; }

/* --- Closing call to action (the footer, on every page) -------------------- */
.tr-footer.has-background { padding-top: clamp(4.5rem, 2.5rem + 6vw, 8rem) !important; }
.tr-footer .tr-footer-cta { margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.tr-footer h2.tr-cta-title {
	font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.5rem) !important;
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--tr-paper);
	margin: 0 0 1.25rem;
}
.tr-footer .tr-cta-text {
	font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.375rem) !important;
	line-height: 1.5;
	max-width: 34rem;
	color: var(--tr-warm);
	margin: 0 0 2.25rem;
}

/* --- Tablet ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	.tr-home-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-home-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tr-home-quotes--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet hero: a narrower portrait so the headline keeps its width. */
@media (min-width: 782px) and (max-width: 1100px) {
	.tr-home-hero .tr-home-hero-grid { grid-template-columns: minmax(0, 1fr) 28%; column-gap: 2.5rem; }
	.tr-home-hero h1.wp-block-heading { max-width: none; }
}

/* --- Phone: its own layout, not a shrunk desktop ------------------------------ */
@media (max-width: 781px) {
	.tr-home-hero .tr-home-hero-grid {
		grid-template-columns: minmax(0, 1fr) 34%;
		grid-template-areas: "h1 h1" "name name" "intro img" "cta cta";
		grid-template-rows: auto;
		column-gap: 1.25rem;
	}
	.tr-home-hero .tr-home-hero-grid > .tr-home-portrait { align-self: start; max-width: 160px; margin-top: 0.35rem; }
	.tr-home-hero .tr-home-hero-grid > .tr-home-intro { font-size: 1.05rem; }
	.tr-home-whyme .tr-home-why { gap: 0; }
	.tr-home-sec .tr-home-why .tr-home-intro { margin-top: 1.5rem; }
	/* Services as compact runs of links rather than fifteen rows. */
	.tr-home-list { display: flex; flex-wrap: wrap; line-height: 2.1; }
	.tr-home-list li { border: 0; }
	.tr-home-list li:not(:last-child)::after { content: "/"; margin: 0 0.6rem; color: var(--tr-terra); }
	.tr-home-sec .tr-home-list a { display: inline; padding: 0; font-size: 1.05rem; text-decoration: underline; text-decoration-color: var(--tr-warm); text-underline-offset: 0.3em; }
	.tr-home-sec .tr-home-list a::after { content: none; }
	.tr-home-write .tr-home-contents { gap: 2rem; }
	/* Steps: number beside the title to save a line each. */
	.tr-home-steps > p::before { float: left; width: 2.4rem; margin: 0.3rem 0 0; }
	.tr-home-hero h1.wp-block-heading { max-width: none; }
	.tr-home-write .tr-home-contents,
	.tr-home-steps,
	.tr-home-quotes,
	.tr-home-quotes--more { grid-template-columns: minmax(0, 1fr); }
	.tr-home-steps { gap: 2rem; }
	/* Work: thumbnail beside its caption, so four pieces fit a couple of screens. */
	.tr-home-work { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.tr-home-work__item {
		display: grid;
		grid-template-columns: 38% minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}
	.tr-home-work__item > :not(.tr-home-work__cover) { grid-column: 2; }
	.tr-home-work .tr-home-work__cover { grid-column: 1; grid-row: 1 / span 4; height: auto; margin: 0; }
	.tr-home-work .tr-home-work__cover img { max-height: none; width: 100%; }
	.tr-home-work__item h3.wp-block-heading { font-size: 1.2rem; }
	.tr-home-work__item p { font-size: 0.9375rem; }
	.tr-home-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.75rem; }
	.tr-home-run { line-height: 2; }
	.tr-home-testimonials .wp-block-quote.tr-home-featured p::before { margin-left: 0; }
}

/* Logo files are 400x250 canvases with the mark drawn at different sizes;
   these scales even out their optical weight. */
.tr-home-logo.tr-logo--xs { --tr-logo-scale: 0.66; }
.tr-home-logo.tr-logo--sm { --tr-logo-scale: 0.8; }
.tr-home-logo.tr-logo--xl { --tr-logo-scale: 1.45; }
.tr-home-logo.tr-logo--lg { --tr-logo-scale: 1.25; }

/* --- Spacing inside a section: set once, here ------------------------------ */
.tr-home-sec .tr-home-inner > * { margin: 0; }
.tr-home-sec .tr-home-inner > .tr-label { margin-bottom: 1.75rem; }
.tr-home-sec .tr-home-inner > h2:not(.tr-label) { margin-bottom: 1.5rem; }
.tr-home-sec .tr-home-inner > .tr-home-statement--short { margin-bottom: 1.5rem; }
.tr-home-sec .tr-home-inner > .tr-home-contents,
.tr-home-sec .tr-home-inner > .tr-home-steps,
.tr-home-sec .tr-home-inner > .tr-home-logos,
.tr-home-sec .tr-home-inner > .tr-home-run { margin-top: clamp(3rem, 5vw, 4.5rem); }
.tr-home-sec .tr-home-inner > .tr-textlink { margin-top: 2.75rem; }
.tr-home-sec .tr-home-inner > .wp-block-buttons { margin-top: 2.75rem; }
.tr-home-sec .tr-home-inner > .tr-home-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.tr-home-sec .tr-home-inner > .tr-home-featured { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.tr-home-sec .tr-home-inner > .tr-more { margin-top: clamp(3rem, 5vw, 4rem); }
@media (max-width: 781px) {
	.tr-home-logo { --tr-logo-scale: 0.8; }
	.tr-home-logo.tr-logo--xs { --tr-logo-scale: 0.55; }
	.tr-home-logo.tr-logo--sm { --tr-logo-scale: 0.65; }
	.tr-home-logo.tr-logo--lg { --tr-logo-scale: 1; }
	.tr-home-logo.tr-logo--xl { --tr-logo-scale: 1.15; }
}

/* The last section runs straight into the footer's closing call to action. */
body.home .wp-site-blocks > footer { margin-block-start: 0; }

/* --- Header: navy, as on the rest of Tom's material (5 Oct) --------------- */
.tr-header.has-background {
	background: var(--tr-navy) !important;
	border-bottom: 0;
}
.tr-header .wp-block-site-logo img {
	mix-blend-mode: normal;
	filter: brightness(0) invert(1);
	opacity: 0.96;
}
.tr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.tr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
.tr-header .wp-block-navigation__responsive-container-open {
	color: var(--tr-paper);
}
.tr-header .tr-header__cta .wp-block-button__link {
	background: var(--tr-paper) !important;
	color: var(--tr-navy) !important;
	border-color: var(--tr-paper) !important;
}
.tr-header .tr-header__cta .wp-block-button__link:hover,
.tr-header .tr-header__cta .wp-block-button__link:focus-visible {
	background: var(--tr-terra-text) !important;
	border-color: var(--tr-terra-text) !important;
	color: var(--tr-paper) !important;
}
.tr-header :focus-visible { outline-color: var(--tr-paper); }

/* --- Inner pages, 8 Oct ----------------------------------------------------- */
/* The footer now closes every page with "Lost for words?", so the older copy
   of it inside page content would say it twice. */
.tr-contact-band { display: none; }
/* Lists of sector or service links on inner pages: light outlined tags, not a
   block of solid buttons. */
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button:nth-child(4)) { gap: 0.5rem; }
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link {
	background: transparent !important;
	color: var(--tr-navy) !important;
	border: 1px solid var(--tr-slate) !important;
	min-height: 0;
	padding: 0.55rem 0.9rem;
	font-size: 0.88rem;
	font-weight: 500;
}
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:hover,
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button:nth-child(4)) .wp-block-button__link:focus-visible {
	background: var(--tr-navy) !important;
	color: var(--tr-paper) !important;
	border-color: var(--tr-navy) !important;
}