/* ============================================================================
   TRUE RECORD — frontend stylesheet
   ----------------------------------------------------------------------------
   SOURCE OF TRUTH: theme.json. Every colour, size and family below is read
   from the presets WordPress generates from it (--wp--preset--*). This file
   defines NO palette of its own — change theme.json and this follows.

   SCOPE: rules are nested under .trr-site (added to <body> in inc/setup.php).
   No :root block, no bare universal selector, no unscoped element selector.
   ========================================================================== */


/* --- 1. Local aliases + non-colour tokens -------------------------------- */

.trr-site {
	/* Functional colours. NOT palette — intentionally outside theme.json so a
	   client palette edit cannot make an error state unreadable. */
	/* Composition colour: the paper stock in the hero illustration. Not part
	   of the brand palette, so it does not belong in theme.json. */
	--trr-paper:     #FBFDFB;

	/* Concept 3 document tokens. Ivory foundation and hairline rules — the
	   surface an official transcript is printed on. */
	--trr-ivory:     var(--wp--preset--color--ivory, #F6F5F1);
	--trr-ivory-2:   var(--wp--preset--color--ivory-2, #EFEDE6);
	--trr-doc-rule:  var(--wp--preset--color--rule, #D9D7CE);

	--trr-error:     #B3261E;
	--trr-error-ink: #8C1D18;
	--trr-warn-ink:  #7A5200;

	--trr-line:        rgba(14, 92, 67, .13);
	--trr-line-onDark: rgba(255, 255, 255, .13);

	--trr-r-xl:   28px;
	--trr-r-lg:   20px;
	--trr-r-md:   12px;
	--trr-r-pill: 999px;

	--trr-sh-1: 0 1px 2px rgba(11, 36, 28, .04), 0 10px 26px -14px rgba(14, 92, 67, .18);
	--trr-sh-2: 0 2px 6px rgba(11, 36, 28, .05), 0 22px 48px -20px rgba(14, 92, 67, .26);

	--trr-max:        1320px;
	--trr-max-narrow: 800px;
	--trr-measure:    75ch;   /* readable long-form measure */
	--trr-gutter:     20px;

	/* Vertical rhythm. Desktop 64-100, tablet 56-80, mobile a flat 56 — never
	   below the 50px floor the brief sets for a major section. */
	--trr-section-y:         clamp(72px, 6.2vw, 92px);
	--trr-section-y-compact: clamp(56px, 4.8vw, 70px);
	--trr-section-gap:       clamp(38px, 3.6vw, 60px);

	/* Internal padding for every form shell, so the section index, legend,
	   fields, required-fields notice and submit all share one content edge. */
	--trr-form-pad-x:        clamp(22px, 2.4vw, 40px);
	--trr-form-pad-y:        clamp(24px, 2.2vw, 36px);
	--trr-content-gap:       clamp(22px, 2vw, 34px);

	margin: 0;
	-webkit-font-smoothing: antialiased;
}

.trr-site *,
.trr-site *::before,
.trr-site *::after {
	box-sizing: border-box;
}

@media (min-width: 601px) {
	.trr-site { --trr-gutter: 32px; }
}

@media (max-width: 1024px) {
	.trr-site {
		--trr-section-y:         clamp(60px, 6.4vw, 74px);
		--trr-section-y-compact: clamp(48px, 5.2vw, 58px);
	}
}

@media (max-width: 600px) {
	.trr-site {
		--trr-section-y:         56px;
		--trr-section-y-compact: 46px;
		--trr-section-gap:       34px;
	}
}

@media (min-width: 1280px) {
	.trr-site { --trr-gutter: 40px; }
}


/* --- 2. Layout primitives ------------------------------------------------ */

.trr-site .trr-container {
	width: 100%;
	max-width: var(--trr-max);
	margin-inline: auto;
	padding-inline: var(--trr-gutter);
}

.trr-site .trr-container--narrow {
	max-width: var(--trr-max-narrow);
}

.trr-site .trr-section {
	padding-block: clamp(56px, 7vw, 104px);
}

.trr-site .trr-section--center {
	text-align: center;
}

.trr-site .trr-main {
	display: block;
	min-height: 40vh;
}

.trr-site img,
.trr-site svg,
.trr-site video {
	max-width: 100%;
	height: auto;
}


/* --- 2b. WordPress constrained-layout interop -----------------------------
   Every section group in the page content declares layout:constrained, so
   WordPress emits `.wp-container-* > * { max-width: content-size }` and caps
   each section's children. Our sections own their own measure and gutters, so
   the cap is released here. Component rules further down re-apply a measure
   where one is genuinely wanted (section heads, ledes, notes).

   This is a layout fix, NOT an overflow suppression — there is no
   overflow-x:hidden anywhere in this file.                                 */

.trr-site .trr-home__content,
.trr-site .trr-page__content,
.trr-site .trr-content {
	max-width: none;
}

.trr-site .trr-home__content > .wp-block-group,
.trr-site .trr-page__content > .wp-block-group,
.trr-site .trr-hero,
.trr-site .trr-pagehero,
.trr-site .trr-section,
.trr-site .trr-cat,
.trr-site .trr-faq,
.trr-site .trr-split,
.trr-site .trr-booking,
.trr-site .trr-contact,
.trr-site .trr-bookpage,
.trr-site .trr-contactpage {
	max-width: none;
	margin-inline: 0;
}

.trr-site .trr-hero > *,
.trr-site .trr-pagehero > *,
.trr-site .trr-section > *,
.trr-site .trr-cat > *,
.trr-site .trr-faq > *,
.trr-site .trr-split > *,
.trr-site .trr-booking > *,
.trr-site .trr-contact > *,
.trr-site .trr-bookpage > *,
.trr-site .trr-contactpage > *,
.trr-site .trr-hero__grid > *,
.trr-site .trr-cat__head > * {
	max-width: none;
	margin-inline: 0;
}

/* WordPress adds its own block gap between siblings; ours comes from grid and
   section padding, so the inherited margin is removed rather than fought. */
.trr-site .trr-home__content > .wp-block-group,
.trr-site .trr-page__content > .wp-block-group {
	margin-block: 0;
}

/* Constrained layout centres every section child with !important. Our sections
   are left-aligned compositions, so the centring is overridden explicitly.
   This is the fix for the dead space either side of the section headings. */
.trr-site .trr-hero > *,
.trr-site .trr-pagehero > *,
.trr-site .trr-section > *,
.trr-site .trr-cat > *,
.trr-site .trr-faq > *,
.trr-site .trr-split > *,
.trr-site .trr-booking > *,
.trr-site .trr-contact > *,
.trr-site .trr-bookpage > *,
.trr-site .trr-contactpage > *,
.trr-site .trr-legal > *,
.trr-site .trr-hero__grid > *,
.trr-site .trr-cat__head > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Flow layout adds a block gap to every element after the first. Inside a CSS
   grid that becomes a phantom offset on the second column — the reason the two
   contact panels and the two closing-CTA panels did not line up. */
.trr-site .trr-hero__grid > *,
.trr-site .trr-booking > *,
.trr-site .trr-contact > *,
.trr-site .trr-contactpage > *,
.trr-site .trr-bookpage > *,
.trr-site .trr-cat > *,
.trr-site .trr-split > *,
.trr-site .trr-steps > *,
.trr-site .trr-reviewgrid > *,
/* Concept 3 grid containers — added after the same fault reappeared on the
   client records. Any NEW grid container must be added to this list. */
.trr-site .trr-records > *,
.trr-site .trr-strip__row > *,
.trr-site .trr-idx > *,
.trr-site .trr-idxrow > *,
.trr-site .trr-rec > *,
.trr-site .trr-docket > *,
.trr-site .trr-docketrow > *,
.trr-site .trr-index > *,
.trr-site .trr-facts > *,
.trr-site .trr-meta > *,
.trr-site .trr-svcrow > *,
.trr-site .trr-bookhelp__inner > * {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* --- 2c. Admin bar offset -------------------------------------------------
   The sticky header must sit below the admin bar for signed-in users and at
   the very top for everyone else. */

.trr-site.admin-bar .trr-header {
	top: 32px;
}

@media (max-width: 782px) {
	.trr-site.admin-bar .trr-header {
		top: 46px;
	}
}

/* --- 3. Editorial type helpers ------------------------------------------- */

.trr-site .trr-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--deep-green, #0E5C43);
	background: rgba(21, 156, 107, .11);
	padding: 8px 16px;
	border-radius: var(--trr-r-pill);
	margin-bottom: 20px;
}

.trr-site .trr-display,
.trr-site .trr-page-head__title {
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-size: var(--wp--preset--font-size--xx-large, clamp(36px, 2rem + 2.8vw, 76px));
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--ink, #0B241C);
	margin: 0;
}

.trr-site .trr-lede {
	font-size: var(--wp--preset--font-size--lede, 21px);
	max-width: 60ch;
	margin-inline: auto;
}

.trr-site .trr-page-head {
	padding-block: var(--trr-section-y) 0;
}


/* --- 4. Buttons ----------------------------------------------------------
   Mirrors the theme.json button element so hand-written template buttons and
   editor-inserted core/button blocks are visually identical.               */

.trr-site .trr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 14px 28px;
	border: 1.5px solid var(--wp--preset--color--primary-action, #118058);
	border-radius: var(--trr-r-pill);
	background: var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--white, #FFFFFF);
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.trr-site .trr-btn:hover,
.trr-site .trr-btn:focus {
	background: var(--wp--preset--color--deep-green, #0E5C43);
	border-color: var(--wp--preset--color--deep-green, #0E5C43);
	color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-btn--secondary {
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--ink, #0B241C);
	border-color: var(--trr-line);
}

.trr-site .trr-btn--secondary:hover,
.trr-site .trr-btn--secondary:focus {
	background: var(--wp--preset--color--white, #FFFFFF);
	border-color: var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

.trr-site .trr-btn--compact {
	min-height: 46px;
	padding: 12px 24px;
}

.trr-site .trr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}


/* --- 5. Header ----------------------------------------------------------- */

.trr-site .trr-header {
	position: sticky;
	top: 0;
	z-index: 90;
	padding-block: 0;
	background: var(--trr-ivory);
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: 92px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}


.trr-site .trr-brand {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	text-decoration: none;
	line-height: 1.05;
}

.trr-site .trr-brand__name {
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-brand__sub {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
	margin-top: 3px;
}

/* The logo is whatever the client uploads, at whatever dimensions. Cap the
   height, let the width follow, and never let WordPress's width/height
   attributes squash it. A 2x asset simply renders sharp at the capped size. */
.trr-site .custom-logo-link img,
.trr-site .trr-brand--logo .trr-logo,
.trr-site .trr-footer-logo {
	max-height: 44px;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.trr-site .trr-footer__brand .trr-footer-logo {
	max-height: 56px;
}

/* The client's mark is a circular lockup — near square, so it needs more
   height than a wide wordmark to read at the same optical size. */
.trr-site .trr-navbar .trr-brand--logo .trr-logo,
.trr-site .trr-header .custom-logo-link img {
	max-height: 60px;
}

.trr-site .trr-footer__brand .trr-footer-logo {
	max-height: 76px;
}

@media (max-width: 600px) {
	.trr-site .trr-header .custom-logo-link img,
	.trr-site .trr-navbar .trr-brand--logo .trr-logo { max-height: 40px; }
}

.trr-site .trr-brand--logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.trr-site .trr-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trr-site .trr-menu--primary a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 9px 15px;
	border-radius: var(--trr-r-pill);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #0B241C);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.trr-site .trr-menu--primary a:hover,
.trr-site .trr-menu--primary a:focus {
	background: rgba(21, 156, 107, .10);
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

.trr-site .trr-menu--primary .current-menu-item > a,
.trr-site .trr-menu--primary [aria-current="page"] {
	color: var(--wp--preset--color--deep-green, #0E5C43);
	font-weight: 600;
}

.trr-site .trr-navbar__acts {
	display: flex;
	align-items: center;
	gap: 10px;
}

.trr-site .trr-burger {
	display: none;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-r-pill);
	cursor: pointer;
}

.trr-site .trr-burger__bars,
.trr-site .trr-burger__bars::before,
.trr-site .trr-burger__bars::after {
	display: block;
	width: 17px;
	height: 1.6px;
	background: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-burger__bars {
	position: relative;
}

.trr-site .trr-burger__bars::before,
.trr-site .trr-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.trr-site .trr-burger__bars::before { top: -5.5px; }
.trr-site .trr-burger__bars::after  { top: 5.5px; }

.trr-site .trr-mobile-nav {
	margin-top: 8px;
	padding: 6px;
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-r-lg);
}

.trr-site .trr-mobile-nav[hidden] {
	display: none;
}

.trr-site .trr-menu--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.trr-site .trr-menu--mobile a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #0B241C);
	text-decoration: none;
}

.trr-site .trr-menu--mobile a:hover,
.trr-site .trr-menu--mobile a:focus {
	background: rgba(21, 156, 107, .10);
}

@media (max-width: 1024px) {
	.trr-site .trr-navbar__nav { display: none; }
	.trr-site .trr-burger { display: inline-flex; }
	.trr-site .trr-navbar { padding-left: 18px; gap: 12px; }
}

@media (min-width: 601px) and (max-width: 1024px) {
	.trr-site .trr-mobile-nav {
		max-width: 340px;
		margin-left: auto;
	}
}

@media (max-width: 600px) {
	.trr-site .trr-navbar { padding: 8px 8px 8px 16px; }
	.trr-site .trr-btn--compact { padding: 12px 18px; font-size: 14.5px; }
	.trr-site .trr-brand__name { font-size: 15px; }
}

@media (max-width: 390px) {
	.trr-site .trr-brand__sub { display: none; }
	.trr-site .trr-btn--compact { padding: 12px 14px; font-size: 14px; }
}


/* --- 6. Footer ----------------------------------------------------------- */

.trr-site .trr-footer {
	margin-top: var(--trr-section-y);
	padding-block: 0;
	background: var(--wp--preset--color--ink, #0B241C);
	border-radius: var(--trr-r-xl) var(--trr-r-xl) 0 0;
	color: rgba(255, 255, 255, .74);
	font-size: 16.5px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.trr-site .trr-footer > * {
	position: relative;
	z-index: 1;
}

/* Brand bubble motif: two blurred circles, zero DOM, zero images. */
.trr-site .trr-footer::before,
.trr-site .trr-footer::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--soft-green, #8FD9B6);
	filter: blur(60px);
	pointer-events: none;
}

.trr-site .trr-footer::before {
	width: 420px;
	height: 420px;
	top: -180px;
	left: -140px;
	opacity: .14;
}

.trr-site .trr-footer::after {
	width: 320px;
	height: 320px;
	bottom: -160px;
	right: -100px;
	opacity: .10;
}

.trr-site .trr-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr .85fr 1.3fr 1.3fr;
	gap: 48px;
	padding-block: 72px 48px;
}

.trr-site .trr-footer__head {
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-green, #8FD9B6);
	margin: 0 0 22px;
}

.trr-site .trr-footer .trr-brand__name { color: var(--wp--preset--color--white, #FFFFFF); }
.trr-site .trr-footer .trr-brand__sub  { color: var(--wp--preset--color--soft-green, #8FD9B6); }

.trr-site .trr-footer__tagline {
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-size: 21px;
	font-weight: 300;
	line-height: 1.42;
	color: rgba(255, 255, 255, .86);
	max-width: 26ch;
	margin: 26px 0 0;
}

.trr-site .trr-footer__address {
	font-style: normal;
	margin-top: 22px;
	line-height: 1.6;
}

.trr-site .trr-menu--footer,
.trr-site .trr-menu--legal {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.trr-site .trr-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
}

.trr-site .trr-footer a:hover,
.trr-site .trr-footer a:focus {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-deflist {
	display: grid;
	margin: 0;
}

.trr-site .trr-deflist > div {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 8px 16px;
	align-items: baseline;
	padding-block: 13px;
	border-top: 1px solid var(--trr-line-onDark);
}

.trr-site .trr-deflist dt {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

.trr-site .trr-deflist dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 15.5px;
	color: rgba(255, 255, 255, .88);
}

/* Logo area: reserve presence now so the real asset lands into a considered
   space rather than shrinking to fit whatever is there today. */
.trr-site .trr-footer__brand .trr-brand {
	min-height: 52px;
}

.trr-site .trr-footer__brand .trr-brand__name {
	font-size: 22px;
}

.trr-site .trr-footer__brand .trr-brand__sub {
	font-size: 10px;
	letter-spacing: .22em;
	margin-top: 5px;
}

.trr-site .trr-footer__brand .custom-logo-link img {
	max-height: 56px;
	width: auto;
}

.trr-site .trr-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	padding-block: 20px 32px;
	border-top: 1px solid var(--trr-line-onDark);
	font-size: 14px;
	color: rgba(255, 255, 255, .45);
}

.trr-site .trr-menu--legal {
	flex-direction: row;
	gap: 22px;
}

@media (max-width: 1024px) {
	.trr-site .trr-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 44px 40px;
		padding-block: 64px 40px;
	}

	.trr-site .trr-footer__brand,
	.trr-site .trr-footer__grid > div:last-child {
		grid-column: 1 / -1;
	}

	.trr-site .trr-footer__tagline { max-width: 38ch; }
}

@media (max-width: 767px) {
	.trr-site .trr-footer { margin-top: var(--trr-section-y); }

	.trr-site .trr-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 26px 24px;
		padding-block: 44px 26px;
	}

	/* Two narrow columns keep the mobile footer from becoming a long scroll. */
	.trr-site .trr-footer__brand,
	.trr-site .trr-footer__grid > div:last-child { grid-column: 1 / -1; }

	.trr-site .trr-footer__head    { margin-bottom: 13px; }
	.trr-site .trr-menu--footer,
	.trr-site .trr-menu--mobile    { gap: 8px; }
	.trr-site .trr-footer__tagline { margin-top: 18px; font-size: 18px; }
	.trr-site .trr-footer__address { margin-top: 16px; }

	.trr-site .trr-footer__bar {
		flex-direction: column;
		gap: 12px;
		padding-block: 16px 26px;
	}
}

@media (max-width: 430px) {
	.trr-site .trr-deflist > div {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}


/* --- 7. Content, lists, empty states ------------------------------------- */

.trr-site .trr-content {
	padding-block: var(--trr-section-y-compact) var(--trr-section-y);
}

.trr-site .trr-summary {
	padding-block: 28px;
	border-top: 1px solid var(--trr-line);
}

.trr-site .trr-summary__title {
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-weight: 400;
	margin: 0 0 6px;
}

.trr-site .trr-summary__meta,
.trr-site .trr-page-head__meta {
	font-size: 14px;
	color: var(--wp--preset--color--muted, #5E736D);
	margin: 0 0 12px;
}

.trr-site .trr-empty {
	padding-block: 48px;
}


/* --- 8. Accessibility ---------------------------------------------------- */

.trr-site .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.trr-site .trr-skip-link:focus {
	position: fixed !important;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	z-index: 100000;
	padding: 14px 22px;
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--ink, #0B241C);
	border-radius: var(--trr-r-md);
	text-decoration: none;
}

.trr-site a:focus-visible,
.trr-site button:focus-visible,
.trr-site input:focus-visible,
.trr-site select:focus-visible,
.trr-site textarea:focus-visible,
.trr-site summary:focus-visible,
.trr-site [tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-action, #118058);
	outline-offset: 3px;
	border-radius: 4px;
}

.trr-site .trr-on-dark a:focus-visible,
.trr-site .trr-on-dark button:focus-visible {
	outline-color: var(--wp--preset--color--white, #FFFFFF);
}

@media (prefers-reduced-motion: reduce) {
	.trr-site .trr-btn,
	.trr-site .trr-menu a {
		transition: none;
	}
}


/* ==========================================================================
   9. HOMEPAGE — visual system (revision 2)
   --------------------------------------------------------------------------
   The previous revision carried every section on the same pale mint, which
   read as one long undifferentiated page. This revision gives the page a
   surface progression:

     hero      mint canvas + branded composition
     services  white
     how       tinted canvas-2 slab
     booking   deep green, full bleed
     reviews   white
     contact   mint canvas + elevated white container
     footer    ink

   Concept 3 keeps the structure and typography; Concept 2 supplies the
   surface contrast, depth and bubble language.
   ========================================================================== */

.trr-site .trr-home {
	position: relative;
	isolation: isolate;
}

.trr-site .trr-home__content > * {
	position: relative;
	z-index: 1;
}

/* --- Full-bleed section shell --------------------------------------------
   Sections span the viewport so they can carry a background, while their
   content stays on the 1240px measure. One rule does both.               */

.trr-site .trr-section,
.trr-site .trr-hero {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	border-top: 0;
}

.trr-site .trr-sechead {
	max-width: 46ch;
	margin-bottom: var(--trr-section-gap);
}

.trr-site .trr-sechead h2 {
	margin: 0;
}

.trr-site .trr-sechead__lede {
	margin-top: var(--trr-content-gap);
	font-size: var(--wp--preset--font-size--lede, 21px);
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-eyebrow--plain {
	background: none;
	padding: 0;
	margin-top: 16px;
	margin-bottom: 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted, #5E736D);
}


/* --- Decorative bubble field (hero band only) ---------------------------- */


/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */


/* The margin rule of a transcript page. */


/* --- Hero media composition (v2) -----------------------------------------
   A certified transcript page, drawn entirely in CSS.

   The old version was a green plate with a ring on it — correct in tone but
   with nothing to look at. This one has an actual subject: a stacked pair of
   pages on the deep green field, the front page ruled and line-marked in the
   margin, carrying a certification seal. It says "court reporting" without a
   word of copy and without a claim of any kind.

   No image file, no remote URL, no library. Every layer is a pseudo-element,
   so the block markup is untouched and .trr-hero__slot remains the Media
   Library hand-off: drop a core Image block in and the whole composition
   steps aside.                                                             */


/* The page itself.
   `background` draws, in order: the red-brown margin rule, the ruled writing
   lines, and six abstract text bars of varying length. They are graphic bars,
   never words — nothing here can be mistaken for copy or read out. */


/* Line marks down the margin — ticks rather than digits, so nothing is
   announced to a screen reader and nothing needs translating. */


/* Certification seal, sitting on the lower right of the page. Two rings and a
   soft fill — geometry only, carrying no text and therefore no claim. */


/* One brand bubble, breaking the frame's top-right corner so the composition
   reads as layered rather than boxed. */


/* The Media Library hand-off: a real photograph replaces the whole thing. */


/* A bubble breaking the frame's left edge. Positioned against the frame, not
   the copy column, so it can never sit on top of the paragraph — which is
   exactly what it was doing before. */


/* ==========================================================================
   SECTION 2 — SERVICES  (white surface, framed rows)
   ========================================================================== */


/* One restrained bubble anchoring the section to the brand. */


/* Circular service marker, rendered as the first grid item. */


/* ==========================================================================
   SECTION 3 — HOW IT WORKS  (tinted slab, editorial docket)
   ========================================================================== */


/* The connecting rule. These steps genuinely happen in order — the line is
   the sequence, not decoration. */


/* Node on the rule. */


/* ==========================================================================
   SECTION 4 — BOOKING  (deep green split, full bleed)
   ========================================================================== */


/* White form shell. */


.trr-site .trr-form-mount {
	width: 100%;
}

/* Field-shell language: rounded bars drawn as backgrounds. There is no form
   element, no input and nothing interactive — it cannot be mistaken for a
   working form, and it stops the area reading as an unfinished box. */
.trr-site .trr-form-mount--pending::before {
	content: "";
	display: block;
	height: 232px;
	margin-bottom: 26px;
	border-radius: var(--trr-r-md);
	background:
		linear-gradient(var(--trr-ivory) 0 0) 0 0 / 42% 12px no-repeat,
		linear-gradient(rgba(14, 92, 67, .07) 0 0) 0 24px / 100% 52px no-repeat,
		linear-gradient(var(--trr-ivory) 0 0) 0 96px / 34% 12px no-repeat,
		linear-gradient(rgba(14, 92, 67, .07) 0 0) 0 120px / 100% 52px no-repeat,
		linear-gradient(var(--trr-ivory) 0 0) 0 192px / 26% 12px no-repeat,
		linear-gradient(rgba(17, 128, 88, .16) 0 0) 0 208px / 44% 44px no-repeat;
	background-repeat: no-repeat;
	opacity: .9;
}

.trr-site .trr-form-mount--pending {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	text-align: left;
}

.trr-site .trr-form-mount__notice {
	margin: 0;
	padding-top: 22px;
	border-top: 1px dashed rgba(14, 92, 67, .22);
	font-size: 15px;
	color: var(--wp--preset--color--muted, #5E736D);
	max-width: none;
}

.trr-site .trr-form-mount__dev {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

@media (max-width: 1180px) {
	

	
	
	/* Stacked, the form gets the whole section — no narrow right-hand column. */
	
	
}

@media (max-width: 767px) {
	.trr-site .trr-form-mount--pending::before { height: 200px; }
}

/* ==========================================================================
   SECTION 5 — REVIEWS  (white surface, tinted cards)
   ========================================================================== */


/* Opening mark, set in the display face — decorative, states nothing. */


/* Three cards need ~300px each to stay readable. */


/* ==========================================================================
   SECTION 6 — CONTACT  (elevated white container on mint)
   ========================================================================== */


.trr-site .trr-deflist--light {
	margin-top: 32px;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-deflist--light > div {
	border-top: 0;
	border-bottom: 1px solid var(--trr-doc-rule);
	padding-block: 15px;
}

.trr-site .trr-deflist--light dt {
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-deflist--light dd,
.trr-site .trr-deflist--light dd a {
	color: var(--wp--preset--color--ink, #0B241C);
	font-size: 16px;
}


/* ==========================================================================
   Core button block alignment
   ========================================================================== */

.trr-site .wp-block-button__link {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.trr-site .is-style-outline .wp-block-button__link,
.trr-site .trr-btn-secondary .wp-block-button__link {
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--ink, #0B241C);
	border: 1.5px solid var(--trr-line);
}

.trr-site .is-style-outline .wp-block-button__link:hover,
.trr-site .trr-btn-secondary .wp-block-button__link:hover,
.trr-site .is-style-outline .wp-block-button__link:focus,
.trr-site .trr-btn-secondary .wp-block-button__link:focus {
	background: var(--wp--preset--color--white, #FFFFFF);
	border-color: var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

/* ==========================================================================
   Standalone link target sizes (WCAG 2.2 SC 2.5.8)
   ========================================================================== */

.trr-site .trr-svcrow__link a,
.trr-site .trr-sec-outro a,
.trr-site .trr-deflist dd a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
}

/* ==========================================================================
   Pending markers
   ========================================================================== */

.trr-site .trr-pending {
	border-bottom: 1px dashed rgba(143, 217, 182, .55);
}

.trr-site .trr-pending__note {
	font-size: 12px;
	opacity: .7;
}


/* ==========================================================================
   10. INNER PAGES
   --------------------------------------------------------------------------
   Same visual language as the approved homepage: alternating surfaces, ruled
   editorial structure, restrained bubbles. The inner-page hero is shorter than
   the homepage hero by design — it introduces a page rather than opening the
   site.
   ========================================================================== */

.trr-site .trr-page {
	position: relative;
	isolation: isolate;
}

.trr-site .trr-page__content > * {
	position: relative;
	z-index: 1;
}

/* Sticky header clearance for in-page anchors such as /services/#faq. */
.trr-site [id] {
	scroll-margin-top: 104px;
}

/* --- Inner-page hero ----------------------------------------------------- */


.trr-site .trr-pagehero__inner {
	position: relative;
	padding-left: clamp(24px, 3.4vw, 54px);
}

@media (min-width: 1025px) {
	.trr-site .trr-pagehero__inner {
		display: grid;
		grid-template-columns: 1.12fr .88fr;
		column-gap: clamp(48px, 5vw, 88px);
		align-items: end;
	}

	/* eyebrow + heading left, lede + actions right */
	.trr-site .trr-pagehero__inner > .trr-eyebrow,
	.trr-site .trr-pagehero__inner > .trr-pagehero__title { grid-column: 1; }

	/* Grid items stretch by default; the eyebrow is a pill, not a bar. */
	.trr-site .trr-pagehero__inner > .trr-eyebrow { justify-self: start; }

	/* The column already sets the measure — a ch cap on top of it forced a
	   four-line headline. */
	.trr-site .trr-pagehero__inner > .trr-pagehero__title { max-width: none; }
	.trr-site .trr-pagehero__inner > .trr-pagehero__lede,
	.trr-site .trr-pagehero__inner > .trr-pagehero__actions { grid-column: 2; }
	.trr-site .trr-pagehero__inner > .trr-pagehero__lede {
		margin-top: 0;
		align-self: start;
		grid-row: 1;
		padding-bottom: 0;
	}
	.trr-site .trr-pagehero__inner > .trr-pagehero__actions {
		grid-row: 2;
		align-self: start;
		margin-top: 28px;
	}
}

/* The transcript margin rule, carried through from the homepage hero. */
.trr-site .trr-pagehero__inner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--brand-accent, #159C6B) 0%,
		rgba(21, 156, 107, .35) 30%,
		var(--trr-line) 100%
	);
}

.trr-site .trr-pagehero .trr-eyebrow {
	margin-bottom: 24px;
	font-size: 13px;
}

.trr-site .trr-pagehero__title {
	margin: 0;
	max-width: 17ch;
	font-size: clamp(34px, 1.4rem + 2.6vw, 58px);
	line-height: 1.06;
	letter-spacing: -.026em;
}

.trr-site .trr-pagehero__lede {
	margin-top: 24px;
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--lede, 21px);
	line-height: 1.55;
}

.trr-site .trr-pagehero__actions {
	margin-top: 34px;
	gap: 14px;
}

@media (max-width: 767px) {
	.trr-site .trr-pagehero__inner { padding-left: 20px; }
	.trr-site .trr-pagehero__title { max-width: none; }
	.trr-site .trr-pagehero__lede { max-width: none; }
	.trr-site .trr-pagehero__actions { width: 100%; }
	.trr-site .trr-pagehero__actions .wp-block-button { flex: 1 1 46%; }
	.trr-site .trr-pagehero__actions .wp-block-button__link { width: 100%; }
}

/* --- Service categories --------------------------------------------------
   Two columns: a sticky editorial head on the left, the service list on the
   right. Surfaces alternate white / tinted so the three categories are
   immediately distinguishable without any of them becoming a giant card.  */

.trr-site .trr-cat {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: clamp(36px, 4vw, 72px);
	align-items: start;
	width: 100%;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	position: relative;
}

.trr-site .trr-cat { overflow: hidden; }
.trr-site .trr-cat--white { background: var(--wp--preset--color--white, #FFFFFF); }
.trr-site .trr-cat--tint  { background: var(--trr-ivory-2); }

/* One restrained bubble on the tinted category. */
.trr-site .trr-cat--tint::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -140px;
	top: -80px;
	border-radius: 50%;
	background: var(--wp--preset--color--soft-green, #8FD9B6);
	opacity: .30;
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}

.trr-site .trr-cat > * {
	position: relative;
	z-index: 1;
}

.trr-site .trr-cat__head {
	position: sticky;
	top: 116px;
}

.trr-site .trr-cat__mark {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

.trr-site .trr-cat__idx {
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12.5px;
	letter-spacing: .14em;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-svcicon {
	width: 42px;
	height: 42px;
	padding: 9px;
	border-radius: 50%;
	background: rgba(21, 156, 107, .12);
	color: var(--wp--preset--color--deep-green, #0E5C43);
	flex: 0 0 auto;
}

.trr-site .trr-cat__title {
	margin: 0;
	font-size: clamp(26px, 1.1rem + 1.2vw, 36px);
	line-height: 1.14;
	letter-spacing: -.022em;
}

.trr-site .trr-cat__intro {
	margin: 18px 0 0;
	max-width: 34ch;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-cat__cta {
	margin-top: 30px;
}

/* Service list: a ruled two-column index, not nine little cards. */
.trr-site .trr-cat__list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 44px;
	border-top: 1px solid var(--trr-line);
}

.trr-site .trr-cat__list li {
	position: relative;
	padding: 16px 0 16px 26px;
	border-bottom: 1px solid var(--trr-line);
	font-size: 17.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #0B241C);
	break-inside: avoid;
}

.trr-site .trr-cat__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 24px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-cat--tint .trr-cat__list li {
	border-bottom-color: rgba(14, 92, 67, .16);
}

.trr-site .trr-cat--tint .trr-cat__list {
	border-top-color: rgba(14, 92, 67, .16);
}

@media (max-width: 1100px) {
	.trr-site .trr-cat {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.trr-site .trr-cat__head { position: static; }
	.trr-site .trr-cat__intro { max-width: none; }
}

/* A three-item list in two columns reads as a column that ran out. Categories
   with a short list use one column and a wider measure instead, so the length
   looks chosen. */
.trr-site .trr-cat--short .trr-cat__list {
	columns: 1;
	max-width: 46ch;
}

.trr-site .trr-cat--short .trr-cat__list li {
	padding-block: 18px;
	font-size: 18px;
}

@media (max-width: 600px) {
	.trr-site .trr-cat__list { columns: 1; }
	.trr-site .trr-cat__list li { padding-block: 13px; }
}

/* --- FAQ -----------------------------------------------------------------
   Native <details>/<summary> via core/details: keyboard operation, screen
   reader semantics and open/close behaviour with zero JavaScript.        */

.trr-site .trr-faq {
	width: 100%;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	background: var(--trr-ivory);
}

.trr-site .trr-faq__list {
	max-width: 92ch;
	border-top: 1px solid var(--trr-line);
	counter-reset: trr-faq;
}

.trr-site .trr-faq__item {
	counter-increment: trr-faq;
	border-bottom: 1px solid var(--trr-line);
	background: none;
	padding: 0;
}

.trr-site .trr-faq__item summary {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 27px 44px 27px 0;
	position: relative;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-size: clamp(21px, .95rem + .8vw, 27px);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--ink, #0B241C);
	transition: color .18s ease;
}

.trr-site .trr-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Editorial numbering — these are indexed questions, not a sequence. */
.trr-site .trr-faq__item summary::before {
	content: counter(trr-faq, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--wp--preset--color--muted, #5E736D);
	transform: translateY(-2px);
	transition: color .18s ease;
}

/* Open/closed indicator: a plus that becomes a minus. */
.trr-site .trr-faq__item summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 30px;
	width: 15px;
	height: 15px;
	background:
		linear-gradient(var(--wp--preset--color--deep-green, #0E5C43) 0 0) center / 15px 1.6px no-repeat,
		linear-gradient(var(--wp--preset--color--deep-green, #0E5C43) 0 0) center / 1.6px 15px no-repeat;
	transition: transform .2s ease, background-size .2s ease;
}

.trr-site .trr-faq__item[open] summary::after {
	background:
		linear-gradient(var(--wp--preset--color--brand-accent, #159C6B) 0 0) center / 15px 1.6px no-repeat,
		linear-gradient(var(--wp--preset--color--brand-accent, #159C6B) 0 0) center / 1.6px 0 no-repeat;
}

.trr-site .trr-faq__item summary:hover,
.trr-site .trr-faq__item[open] summary {
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

.trr-site .trr-faq__item[open] summary::before {
	color: var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-action, #118058);
	outline-offset: 3px;
	border-radius: 6px;
}

.trr-site .trr-faq__item > p,
.trr-site .trr-faq__item > .wp-block-paragraph {
	margin: 0;
	padding: 0 44px 28px 40px;
	max-width: 74ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

@media (max-width: 600px) {
	.trr-site .trr-faq__item summary { gap: 12px; padding-right: 38px; }
	.trr-site .trr-faq__item > p { padding: 0 0 24px 30px; }
}

/* Unresolved copy. Deliberately conspicuous: this must never look like final
   production text. Removed at launch together with the placeholder itself. */
.trr-site .trr-pending--content {
	padding: 1px 7px;
	border: 1px dashed rgba(180, 120, 0, .75);
	border-radius: 5px;
	background: rgba(255, 196, 61, .18);
	color: var(--trr-warn-ink);
	font-weight: 600;
}

/* --- Closing split CTA ---------------------------------------------------- */

.trr-site .trr-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	width: 100%;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	background: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-split__side {
	padding: clamp(34px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.trr-site .trr-split__side--deep {
	position: relative;
	overflow: hidden;
	border-radius: var(--trr-r-xl) 0 0 var(--trr-r-xl);
	color: rgba(255, 255, 255, .82);
	background:
		radial-gradient(90% 120% at 10% 0%, rgba(21, 156, 107, .34) 0%, rgba(21, 156, 107, 0) 60%),
		linear-gradient(160deg, var(--wp--preset--color--deep-green, #0E5C43) 0%, var(--wp--preset--color--ink, #0B241C) 100%);
}

.trr-site .trr-split__side--deep::after {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	left: -110px;
	bottom: -160px;
	border-radius: 50%;
	background: var(--wp--preset--color--soft-green, #8FD9B6);
	opacity: .16;
	filter: blur(64px);
	pointer-events: none;
}

.trr-site .trr-split__side--deep > * {
	position: relative;
	z-index: 1;
}

.trr-site .trr-split__side--deep .trr-split__title {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-split__side--light {
	background: var(--trr-ivory);
	border: 1px solid var(--trr-line);
	border-left: 0;
	border-radius: 0 var(--trr-r-xl) var(--trr-r-xl) 0;
}

.trr-site .trr-split__title {
	margin: 0;
	font-size: clamp(24px, 1rem + 1.1vw, 33px);
	line-height: 1.16;
	letter-spacing: -.02em;
}

.trr-site .trr-split__side p {
	margin: 16px 0 0;
	max-width: 34ch;
	font-size: 17px;
	line-height: 1.6;
}

.trr-site .trr-split__side .wp-block-buttons {
	margin-top: 28px;
}

.trr-site .trr-btn-onDark .wp-block-button__link {
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--deep-green, #0E5C43);
	border-color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-btn-onDark .wp-block-button__link:hover,
.trr-site .trr-btn-onDark .wp-block-button__link:focus {
	background: var(--trr-ivory);
	border-color: var(--trr-ivory);
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

@media (max-width: 1100px) {
	.trr-site .trr-split { grid-template-columns: 1fr; }
	.trr-site .trr-split__side--deep { border-radius: var(--trr-r-xl) var(--trr-r-xl) 0 0; }
	.trr-site .trr-split__side--light {
		border-left: 1px solid var(--trr-line);
		border-top: 0;
		border-radius: 0 0 var(--trr-r-xl) var(--trr-r-xl);
	}
	.trr-site .trr-split__side p { max-width: none; }
}


/* ==========================================================================
   11. FORMS
   --------------------------------------------------------------------------
   The plugin owns structure and semantics; this owns appearance. Visible
   labels always, never a placeholder standing in for one. Long form, so the
   work is in grouping and rhythm rather than decoration.
   ========================================================================== */

.trr-site .trr-form-wrap {
	width: 100%;
}

.trr-site .trr-form__section {
	margin: 0 0 34px;
	padding: 0 0 30px;
	border: 0;
	border-bottom: 1px solid var(--trr-line);
}

.trr-site .trr-form__section:last-of-type {
	border-bottom: 0;
	padding-bottom: 8px;
	margin-bottom: 20px;
}

.trr-site .trr-form__legend {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 0 0 20px;
	width: 100%;
}

.trr-site .trr-form__legend-n {
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-form__legend-t {
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-size: 23px;
	font-weight: 400;
	letter-spacing: -.018em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-form__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px 20px;
}

.trr-site .trr-field--full   { grid-column: span 6; }
.trr-site .trr-field--half   { grid-column: span 3; }
.trr-site .trr-field--third  { grid-column: span 2; }

.trr-site .trr-field[hidden] { display: none; }

.trr-site .trr-field__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-field__req {
	color: var(--wp--preset--color--primary-action, #118058);
	margin-left: 2px;
}

.trr-site .trr-field__input {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #0B241C);
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-r-md);
	transition: border-color .16s ease, box-shadow .16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.trr-site textarea.trr-field__input {
	min-height: 108px;
	resize: vertical;
}

.trr-site select.trr-field__input {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--deep-green, #0E5C43) 50%),
		linear-gradient(135deg, var(--wp--preset--color--deep-green, #0E5C43) 50%, transparent 50%);
	background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.trr-site .trr-field__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary-action, #118058);
	box-shadow: 0 0 0 3px rgba(17, 128, 88, .16);
}

.trr-site .trr-field__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-action, #118058);
	outline-offset: 2px;
}

.trr-site .trr-field__help {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--muted, #5E736D);
}

/* Errors: colour, an icon and text. Never colour alone. */
.trr-site .trr-field.is-error .trr-field__input,
.trr-site .trr-field.is-error .trr-field__group {
	border-color: var(--trr-error);
}

.trr-site .trr-field__error {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--trr-error-ink);
}

.trr-site .trr-field__error-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--trr-error);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	transform: translateY(2px);
}

/* --- Choice groups -------------------------------------------------------- */

.trr-site .trr-field__group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	border: 0;
}

.trr-site .trr-field__group--checks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.trr-site .trr-choice {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 52px;
	padding: 12px 18px;
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-r-md);
	font-size: 15.5px;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #0B241C);
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.trr-site .trr-choice:hover {
	border-color: rgba(21, 156, 107, .5);
}

.trr-site .trr-choice input {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--primary-action, #118058);
	margin: 0;
}

.trr-site .trr-choice:has(input:checked) {
	border-color: var(--wp--preset--color--primary-action, #118058);
	background: rgba(21, 156, 107, .07);
}

.trr-site .trr-choice:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-action, #118058);
	outline-offset: 2px;
}

/* --- File field ----------------------------------------------------------- */

.trr-site .trr-field__file {
	width: 100%;
	padding: 16px;
	font-size: 15px;
	background: var(--trr-ivory);
	border: 1.5px dashed rgba(14, 92, 67, .28);
	border-radius: var(--trr-r-md);
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-field__file::file-selector-button {
	margin-right: 14px;
	padding: 9px 16px;
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--deep-green, #0E5C43);
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1.5px solid var(--trr-line);
	border-radius: var(--trr-r-pill);
	cursor: pointer;
}

/* --- Honeypot: hidden from sight, kept out of the tab order --------------- */

.trr-site .trr-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Foot ----------------------------------------------------------------- */

.trr-site .trr-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 24px;
	border-top: 1px solid var(--trr-line);
}

.trr-site .trr-form__note {
	margin: 0;
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 16px 34px;
	font-family: var(--wp--preset--font-family--ui, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--white, #FFFFFF);
	background: var(--wp--preset--color--primary-action, #118058);
	border: 1.5px solid var(--wp--preset--color--primary-action, #118058);
	border-radius: var(--trr-r-pill);
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.trr-site .trr-form__submit:hover,
.trr-site .trr-form__submit:focus {
	background: var(--wp--preset--color--deep-green, #0E5C43);
	border-color: var(--wp--preset--color--deep-green, #0E5C43);
}

/* Submitting state. Cosmetic only — the button stays focusable and the form
   still works with JavaScript disabled. */
.trr-site .trr-form__submit.is-busy {
	background: var(--wp--preset--color--deep-green, #0E5C43);
	border-color: var(--wp--preset--color--deep-green, #0E5C43);
	cursor: progress;
}

/* --- Error summary and success state -------------------------------------- */

.trr-site .trr-form__errors {
	margin: 0 0 28px;
	padding: 22px 24px;
	background: rgba(179, 38, 30, .06);
	border: 1.5px solid rgba(179, 38, 30, .35);
	border-radius: var(--trr-r-md);
}

.trr-site .trr-form__errors-title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--trr-error-ink);
}

.trr-site .trr-form__errors ul {
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-form__errors a {
	color: var(--trr-error-ink);
}

.trr-site .trr-form__success {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 18px;
	align-items: start;
	padding: clamp(28px, 3vw, 40px);
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid rgba(17, 128, 88, .45);
	border-left: 4px solid var(--wp--preset--color--primary-action, #118058);
	border-radius: 0;
	outline: none;
}

/* The tick: a filled green disc, the one element that reads as "done" before
   a word is read. */
.trr-site .trr-form__success-mark {
	grid-row: 1 / span 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--white, #FFFFFF);
	flex-shrink: 0;
}

.trr-site .trr-form__success-heading {
	grid-column: 2;
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-form__success-title {
	grid-column: 2;
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, 'Times New Roman', serif);
	font-size: clamp(21px, 1.8vw, 26px);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-form__success-ref {
	grid-column: 2;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--trr-doc-rule, #D9D7CE);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-form__success-ref strong {
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 16px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink, #0B241C);
}

/* The redirect jumps to #trr-form-{id}. Without this the 92px sticky header
   sits on top of the confirmation — which is what happens when LiteSpeed
   defers the script that would otherwise scroll it into view. */
.trr-site .trr-form-wrap {
	scroll-margin-top: 124px;
}

/* On an ink band the confirmation keeps its white card so it stays readable. */
.trr-site .trr-ink .trr-form__success-title { color: var(--wp--preset--color--ink, #0B241C); }
.trr-site .trr-ink .trr-form__success-ref   { color: var(--wp--preset--color--body, #3C5149); }

@media (max-width: 600px) {
	.trr-site .trr-form__success {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: 24px 20px;
	}

	.trr-site .trr-form__success-mark {
		grid-row: auto;
		width: 38px;
		height: 38px;
		margin-bottom: 14px;
	}

	.trr-site .trr-form__success-heading,
	.trr-site .trr-form__success-title,
	.trr-site .trr-form__success-ref {
		grid-column: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trr-site .trr-form-wrap { scroll-behavior: auto; }
}

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

@media (max-width: 1180px) {
	.trr-site .trr-field__group--checks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.trr-site .trr-field--third { grid-column: span 3; }
}

@media (max-width: 767px) {
	.trr-site .trr-form__grid { grid-template-columns: 1fr; gap: 18px; }
	.trr-site .trr-field--full,
	.trr-site .trr-field--half,
	.trr-site .trr-field--third { grid-column: 1 / -1; }
	.trr-site .trr-field__group--checks { grid-template-columns: 1fr; }
	.trr-site .trr-form__legend-t { font-size: 21px; }
	/* Every control takes the full width at mobile. */
	.trr-site .trr-field__input,
	.trr-site .trr-field__file { width: 100%; }
	.trr-site .trr-form__foot { flex-direction: column; align-items: stretch; }
	.trr-site .trr-form__submit { width: 100%; }
	.trr-site .trr-form__note { max-width: none; }
}

/* The homepage form sits inside the deep-green booking slab's white card, so
   it needs slightly tighter rhythm than the dedicated page. */
/* The intro column tracks the form as it scrolls, so the context stays with
   the fields. Offset clears the sticky header. */


/* The card is narrower than the dedicated booking page, so a three-across row
   clips its own select labels. Two across instead. */


/* ==========================================================================
   12. BOOK A DEPOSITION PAGE
   ========================================================================== */

.trr-site .trr-pagehero--compact {
	padding-block: var(--trr-section-y-compact);
}

.trr-site .trr-bookpage {
	display: grid;
	grid-template-columns: .3fr .7fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	background: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-bookpage__rail {
	position: sticky;
	top: 116px;
	padding: 30px 28px;
	background: var(--trr-ivory);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-r-lg);
}

.trr-site .trr-bookpage__railtitle {
	margin: 0 0 18px;
	font-size: 20px;
	letter-spacing: -.015em;
}

.trr-site .trr-bookpage__groups {
	counter-reset: trr-bg;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--trr-line);
}

.trr-site .trr-bookpage__groups li {
	counter-increment: trr-bg;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--trr-line);
	font-size: 15.5px;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-bookpage__groups li::before {
	content: counter(trr-bg, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 11.5px;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-bookpage__railnote {
	margin: 18px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-bookpage__form {
	padding: clamp(28px, 3.2vw, 44px);
	background: var(--wp--preset--color--white, #FFFFFF);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-r-xl);
}


.trr-site .trr-bookhelp__inner h2 {
	margin: 0;
	font-size: clamp(24px, 1rem + 1.1vw, 32px);
	letter-spacing: -.02em;
}

.trr-site .trr-bookhelp__inner > p {
	margin: 0;
}

.trr-site .trr-bookhelp__inner .trr-deflist--light {
	grid-column: 1 / -1;
	margin-top: 8px;
	border-top: 1px solid var(--trr-line);
}

.trr-site .trr-bookhelp__inner .trr-deflist--light > div {
	border-bottom: 1px solid var(--trr-line);
	grid-template-columns: 96px 1fr;
}


@media (max-width: 1180px) {
	.trr-site .trr-bookpage { grid-template-columns: 1fr; gap: 26px; }
	.trr-site .trr-bookpage__rail { position: static; }
	
}

@media (max-width: 767px) {
	.trr-site .trr-bookpage__form { border-radius: var(--trr-r-md); }
}


/* ==========================================================================
   13. CONTACT PAGE
   --------------------------------------------------------------------------
   Wireframe two-column: form left, details panel right. The panel is a deep
   green surface — the second half of the composition, not a grey sidebar.
   ========================================================================== */


/* ==========================================================================
   14. PHASE 5 POLISH — Book page (approved corrections)
   ========================================================================== */

/* Left "What we'll ask" panel: more readable at the same size. */
.trr-site .trr-bookpage__railtitle {
	font-size: 21px;
}

.trr-site .trr-bookpage__groups li {
	padding: 13px 0;
	font-size: 16.5px;
	line-height: 1.45;
}

.trr-site .trr-bookpage__groups li::before {
	font-size: 12px;
}

.trr-site .trr-bookpage__railnote {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3C5149);
}

/* Service checkbox rows: more vertical comfort. */
.trr-site .trr-choice {
	min-height: 58px;
	padding: 14px 18px;
	line-height: 1.4;
}

.trr-site .trr-field__group--checks {
	gap: 12px;
}

/* "Prefer to speak to someone?" — one restrained accent, consistent with the
   transcript rule used across the site. */


.trr-site .trr-bookhelp__inner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--brand-accent, #159C6B) 0%,
		rgba(21, 156, 107, .32) 55%,
		rgba(14, 92, 67, .10) 100%
	);
}

/* ==========================================================================
   15. SUBMISSION ADMIN (front-end has no styles; these are for parity only)
   ========================================================================== */

.trr-site .trr-type {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--trr-r-pill);
	font-size: 12.5px;
	font-weight: 600;
	background: rgba(21, 156, 107, .12);
	color: var(--wp--preset--color--deep-green, #0E5C43);
}


/* ==========================================================================
   16. LONG-FORM LEGAL PAGES
   --------------------------------------------------------------------------
   Privacy and Terms use the same inner-page hero as every other page, then a
   readable measure for the body. Legal prose must not stretch across a 1320px
   container, and it must not collapse into a narrow strip either.
   ========================================================================== */

.trr-site .trr-pagehero--legal {
	border-bottom: 1px solid var(--trr-line);
}

.trr-site .trr-legal {
	width: 100%;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	background: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-legal__body {
	max-width: 820px;
	margin-inline: 0;
}

/* Long-form reading: a touch larger and looser than UI copy. */
.trr-site .trr-legal__body p {
	margin: 0 0 var(--trr-content-gap);
	font-size: 17.5px;
	line-height: 1.78;
	color: var(--wp--preset--color--body, #3C5149);
	max-width: var(--trr-measure);
}

.trr-site .trr-legal__body p:last-child {
	margin-bottom: 0;
}

.trr-site .trr-legal__h2 {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--display, Newsreader, Georgia, serif);
	font-size: clamp(24px, 1rem + 1.1vw, 32px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-legal__list {
	margin: 0 0 var(--trr-content-gap);
	padding: 0;
	list-style: none;
	max-width: var(--trr-measure);
}

.trr-site .trr-legal__list li {
	position: relative;
	padding: 8px 0 8px 24px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-legal__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 17px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-legal__body ol {
	margin: 0 0 var(--trr-content-gap);
	padding-left: 22px;
	max-width: var(--trr-measure);
	font-size: 17px;
	line-height: 1.7;
}

/* Ruled separator between sections, matching the section rhythm. */
.trr-site .trr-legal__rule {
	margin-block: var(--trr-section-gap);
	border: 0;
	border-top: 1px solid var(--trr-line);
	background: none;
	height: 0;
	width: 100%;
	max-width: none;
	opacity: 1;
}

.trr-site .trr-legal__body a {
	color: var(--wp--preset--color--primary-action, #118058);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* The shared contact block sits on a tinted panel to close the page. */
.trr-site .trr-legal__body .trr-deflist--light {
	margin-top: 4px;
	padding: 24px 26px;
	background: var(--trr-ivory);
	border: 1px solid var(--trr-line);
	border-radius: var(--trr-r-lg);
	border-top: 1px solid var(--trr-line);
	max-width: 620px;
}

.trr-site .trr-legal__body .trr-deflist--light > div {
	border-bottom: 1px solid var(--trr-line);
	grid-template-columns: 84px 1fr;
}

.trr-site .trr-legal__body .trr-deflist--light > div:last-child {
	border-bottom: 0;
}


@media (max-width: 900px) {
	.trr-site .trr-legal__body p { font-size: 17px; }
}

@media (max-width: 600px) {
	.trr-site .trr-legal__body p,
	.trr-site .trr-legal__list li { font-size: 16.5px; line-height: 1.72; }
	.trr-site .trr-legal__body .trr-deflist--light { padding: 20px 18px; }
	.trr-site .trr-legal__body .trr-deflist--light > div { grid-template-columns: 1fr; }
}


/* ==========================================================================
   17. RUNTIME POLISH — section transitions, hero, help panels
   --------------------------------------------------------------------------
   Fixes driven by annotated screenshots of the live site.
   ========================================================================== */

/* --- 17.1 The footer no longer adds its own gap ---------------------------
   Every page already ends with a section that has bottom padding. The footer's
   margin-top was stacking on top of it, which is the large empty band that
   appeared above the footer on the booking, request and home pages. */

.trr-site .trr-footer {
	margin-top: 0;
}

@media (max-width: 767px) {
	.trr-site .trr-footer { margin-top: 0; }
}

/* --- 17.2 Coloured sections read as bands, not butt joints ----------------
   Full-bleed slabs meeting edge to edge gave no visual pause between them.
   Insetting the two coloured homepage sections lets the page canvas show
   around them, which separates the sections without inventing dead space. */


/* The inset changes what 100% means, so the internal centring is recomputed. */


/* --- 17.3 Hero breathing room -------------------------------------------- */


/* --- 17.4 Hero composition: quiet motion ---------------------------------
   Two layers only, on long offset cycles: the page lifts and settles, and the
   seal breathes. Slow enough to read as depth rather than animation. The
   sheen band from the previous release is gone — at speed it registered as a
   rendering artifact rather than light.                                    */

@keyframes trr-page-lift {
	0%, 100% { transform: rotate(-1.4deg) translate3d(0, 0, 0); }
	50%      { transform: rotate(-1.15deg) translate3d(0, -7px, 0); }
}

@keyframes trr-mark-lift {
	0%, 100% { transform: rotate(-1.4deg) translate3d(0, 0, 0); }
	50%      { transform: rotate(-1.15deg) translate3d(0, -7px, 0); }
}

@keyframes trr-seal-breathe {
	0%, 100% { transform: scale(1); opacity: .92; }
	50%      { transform: scale(1.035); opacity: 1; }
}

@keyframes trr-bubble-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-9px, 12px, 0); }
}


/* --- 17.5 Service categories with a short list ---------------------------
   Three items beside a four-element head column left a large empty quarter.
   The head is centred against a short list instead, and the sticky behaviour
   is dropped — it did nothing useful in a section this height. */

.trr-site .trr-cat__head {
	position: static;
}

.trr-site .trr-cat--short {
	align-items: center;
}

@media (min-width: 1101px) {
	.trr-site .trr-cat--short .trr-cat__list {
		max-width: 52ch;
	}
}

/* --- 17.6 "See all services in detail" ----------------------------------- */


/* --- 17.7 "Prefer to speak to someone?" ----------------------------------
   Heading and copy sat on one row with the contact list stranded beneath on a
   half-empty band. Two real columns instead: message on the left, details on
   the right, aligned to the same baseline. */


.trr-site .trr-bookhelp__inner h2 {
	grid-column: 1;
	grid-row: 1;
}

.trr-site .trr-bookhelp__inner > p {
	grid-column: 1;
	grid-row: 2;
	margin-top: 14px;
	max-width: 44ch;
}

.trr-site .trr-bookhelp__inner .trr-deflist--light {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-top: 0;
	border-top: 0;
	align-self: start;
}

.trr-site .trr-bookhelp__inner .trr-deflist--light > div:first-child {
	padding-top: 0;
}

@media (max-width: 900px) {
	

	.trr-site .trr-bookhelp__inner h2,
	.trr-site .trr-bookhelp__inner > p,
	.trr-site .trr-bookhelp__inner .trr-deflist--light {
		grid-column: 1;
		grid-row: auto;
	}

	.trr-site .trr-bookhelp__inner .trr-deflist--light {
		border-top: 1px solid var(--trr-line);
		padding-top: 4px;
	}
}

/* --- 17.8 Contact panels line up ----------------------------------------- */


/* ==========================================================================
   18. MOTION — SCROLL REVEAL
   --------------------------------------------------------------------------
   Nothing here hides anything unless <html> carries `trr-js`, which is set by
   an inline snippet in the head and only when the visitor has NOT asked for
   reduced motion. So: no JavaScript, no hiding. Reduced motion, no hiding.
   The final resting state of every element is identical to the approved
   layout — these rules only describe how it arrives there.
   ========================================================================== */

.trr-js .trr-site .trr-reveal {
	opacity: 0;
	transition:
		opacity .6s cubic-bezier(.22, .61, .36, 1),
		transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

/* The connector container is not itself hidden — only its rule draws. */
.trr-js .trr-site .trr-reveal--line  { opacity: 1; transform: none; }

.trr-js .trr-site .trr-reveal--up    { transform: translate3d(0, 16px, 0); }
.trr-js .trr-site .trr-reveal--left  { transform: translate3d(-14px, 0, 0); }
.trr-js .trr-site .trr-reveal--right { transform: translate3d(14px, 0, 0); }

.trr-js .trr-site .trr-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* The How It Works connector draws itself as the steps arrive. The rule is a
   pseudo-element, so this animates a transform and never a width. */


/* Mobile: fades only. Horizontal entrances risk clipping on a narrow screen,
   and continuous decorative motion is not worth the battery. */
@media (max-width: 767px) {
	.trr-js .trr-site .trr-reveal--left,
	.trr-js .trr-site .trr-reveal--right {
		transform: translate3d(0, 14px, 0);
	}

	
}

/* --- Micro-interactions --------------------------------------------------- */

.trr-site .trr-btn,
.trr-site .wp-block-button__link {
	transition:
		background-color .2s ease,
		border-color .2s ease,
		color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

.trr-site .trr-btn:hover,
.trr-site .wp-block-button__link:hover {
	transform: translateY(-1px);
}


.trr-site .trr-form__submit:hover {
	transform: translateY(-1px);
}

/* --- Reduced motion ------------------------------------------------------
   Belt and braces. The head snippet already withholds `trr-js` from these
   visitors, so nothing is hidden and nothing transitions — but if that
   snippet is ever bypassed, this stops every moving part regardless. */

@media (prefers-reduced-motion: reduce) {
	.trr-js .trr-site .trr-reveal,
	.trr-js .trr-site .trr-reveal--up,
	.trr-js .trr-site .trr-reveal--left,
	.trr-js .trr-site .trr-reveal--right {
		opacity: 1;
		transform: none;
		transition: none;
	}

	

	.trr-site .trr-btn,
	.trr-site .wp-block-button__link,
	.trr-site .trr-btn:hover,
	.trr-site .wp-block-button__link:hover,
	.trr-site .trr-form__submit:hover,
	.trr-site .trr-svcrow,
	.trr-site .trr-svcrow:hover,
	.trr-site .trr-review,
	.trr-site .trr-review:hover,
	.trr-site .trr-sec-outro a,
	.trr-site .trr-sec-outro a::after {
		transform: none;
		transition: none;
	}

	
}


/* ==========================================================================
   19. THE CERTIFIED PAGE — CONCEPT 3 TRANSCRIPT LANGUAGE
   --------------------------------------------------------------------------
   The client asked for the homepage to read as an official legal transcript.
   The reference she supplied is a hearing transcript: right-aligned Courier
   line numbers in a narrow left column, a hairline separating them from the
   body, indented speaker labels, and a generous, even baseline.

   That language is recreated here in CSS. Nothing from the reference document
   is reproduced — no names, no testimony, no case detail. Only the structure.
   ========================================================================== */

/* --- 19.1 Hero: the record ------------------------------------------------ */


/* The line-number rail. Right-aligned Courier against a hairline, exactly as
   a transcript sets it. aria-hidden in the markup: it is page furniture, and
   reading "01 02 03…" aloud would help nobody. */


/* --- 19.2 Q. / A. --------------------------------------------------------- */

.trr-site .trr-qa {
	margin-top: clamp(24px, 2.4vw, 34px);
	padding-left: clamp(16px, 1.6vw, 26px);
	border-left: 2px solid var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-qa__q,
.trr-site .trr-qa__a {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 15px;
	line-height: 1.85;
	/* Hanging indent: the label sits out to the left and continuation lines
	   align under the first word, the way a transcript wraps. */
	padding-left: 2.6em;
	text-indent: -2.6em;
}

.trr-site .trr-qa__q {
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-qa__a {
	margin-top: 14px;
	color: var(--wp--preset--color--ink, #0B241C);
	max-width: 62ch;
}

.trr-site .trr-qa__q strong,
.trr-site .trr-qa__a strong {
	font-weight: 700;
	color: var(--wp--preset--color--primary-action, #118058);
	letter-spacing: .06em;
}


@media (max-width: 767px) {
	/* The rail becomes a short accent rather than a full column — twelve
	   numbers beside a narrow measure would squeeze the copy. */
	

	

	.trr-site .trr-qa__q,
	.trr-site .trr-qa__a {
		font-size: 14px;
		padding-left: 2.4em;
		text-indent: -2.4em;
	}
}

@media (max-width: 480px) {
	
	
	.trr-site .trr-qa { padding-left: 14px; }
}

/* --- 19.3 Services: a structured index, not a stack of cards -------------- */


/* --- 19.4 Reviews: client records ----------------------------------------- */


/* --- 19.5 Docket rhythm on How It Works ----------------------------------- */


/* --- 19.6 Booking keeps its green surface, gains document detail ---------- */

.trr-site .trr-booking .trr-eyebrow,
.trr-site .trr-form__legend-n {
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	letter-spacing: .12em;
}


/* --- 19.7 Removing the pre-transcript hero furniture ---------------------
   The hero used to carry a decorative margin rule as a pseudo-element. The
   line-number rail now provides that rule for real, and running both drew two
   parallel lines. The old one is retired here rather than deleted upstream, so
   the same rule still serves the inner-page heroes that have no rail. */


/* The hero eyebrow becomes a procedural label: Courier, letter-spaced, sitting
   on a rule. The mint pill belongs to Concept 2 and reads as a badge, which is
   the wrong register for the head of a transcript. */


/* The rail runs the height of the record it sits beside. */


/* ==========================================================================
   20. SERVICES PAGE — GREEN BUBBLE ACCENTS
   --------------------------------------------------------------------------
   The client asked specifically for the bubble background on this page. Four
   restrained clusters, never behind reading matter: the hero, the transition
   between categories, the FAQ corner, and the closing CTA. Concept 3 stays
   dominant — these sit behind the document, they do not become it.
   ========================================================================== */

.trr-site .trr-pagehero,
.trr-site .trr-cat--tint,
.trr-site .trr-faq,
.trr-site .trr-split {
	position: relative;
	isolation: isolate;
}

/* Deliberately NOT `position: relative` on the children — see the note in
   section 20: that reactivates offsets left on statically-positioned elements.
   `isolation` on the section contains the negative z-index instead. */
.trr-site .trr-cat__head {
	top: auto;
}

/* One shared bubble treatment. Blurred, low opacity, pointer-events off, and
   clipped by the section it belongs to so nothing can create scroll. */


/* Services hero — a soft cluster off the right shoulder. */
.trr-site.trr-page-services .trr-pagehero::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -60px;
	top: -70px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 36% 30%,
		rgba(143, 217, 182, .5) 0%,
		rgba(143, 217, 182, .16) 58%,
		rgba(143, 217, 182, 0) 100%);
}

.trr-site.trr-page-services .trr-pagehero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 220px;
	bottom: -90px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 38% 32%,
		rgba(21, 156, 107, .3) 0%,
		rgba(21, 156, 107, .08) 60%,
		rgba(21, 156, 107, 0) 100%);
}

/* Category transition — a partial composition breaking the left edge. */
.trr-site .trr-cat--tint::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -110px;
	top: 40%;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 60% 40%,
		rgba(143, 217, 182, .42) 0%,
		rgba(143, 217, 182, .12) 62%,
		rgba(143, 217, 182, 0) 100%);
}

/* FAQ — one quiet corner. */
.trr-site .trr-faq::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -80px;
	bottom: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 40% 34%,
		rgba(21, 156, 107, .24) 0%,
		rgba(21, 156, 107, .07) 60%,
		rgba(21, 156, 107, 0) 100%);
}

/* Closing CTA — a small layered pair. */
.trr-site .trr-split::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 6%;
	top: -50px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 38% 30%,
		rgba(143, 217, 182, .44) 0%,
		rgba(143, 217, 182, .12) 60%,
		rgba(143, 217, 182, 0) 100%);
}

/* Very slow, small, and each on its own cycle so they never move in unison. */
@keyframes trr-bubble-a {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-7px, 9px, 0); }
}

@keyframes trr-bubble-b {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(8px, -6px, 0); }
}

.trr-site.trr-page-services .trr-pagehero::before { animation: trr-bubble-a 21s ease-in-out infinite; }
.trr-site.trr-page-services .trr-pagehero::after  { animation: trr-bubble-b 25s ease-in-out infinite; }
.trr-site .trr-cat--tint::after { animation: trr-bubble-b 19s ease-in-out infinite; }
.trr-site .trr-faq::before      { animation: trr-bubble-a 23s ease-in-out infinite; }
.trr-site .trr-split::before    { animation: trr-bubble-b 17s ease-in-out infinite; }

@media (max-width: 767px) {
	/* Smaller, and still — decorative drift is not worth the battery. */
	.trr-site.trr-page-services .trr-pagehero::after,
	.trr-site .trr-split::before {
		display: none;
	}

	.trr-site.trr-page-services .trr-pagehero::before,
	.trr-site .trr-cat--tint::after,
	.trr-site .trr-faq::before {
		animation: none;
		width: 200px;
		height: 200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trr-site.trr-page-services .trr-pagehero::before,
	.trr-site.trr-page-services .trr-pagehero::after,
	.trr-site .trr-cat--tint::after,
	.trr-site .trr-faq::before,
	.trr-site .trr-split::before {
		animation: none;
	}
}


/* Decoration is clipped by the section that owns it. Without this the bubbles
   extend past the viewport and create horizontal scroll — the exact failure
   the earlier overflow masks were hiding. */
.trr-site .trr-pagehero,
.trr-site .trr-faq,
.trr-site .trr-split {
	overflow: hidden;
}


/* ==========================================================================
   21. HOMEPAGE — THE CERTIFIED PAGE (Concept 3 rebuild)
   --------------------------------------------------------------------------
   The homepage's previous CSS was removed rather than overridden; this is the
   whole homepage system, written once.

   Concept 3's mechanics, reproduced: a document grid (line rail / body /
   editorial rail), hairline rules instead of cards, Courier for every index
   and label, Newsreader for headings, an ivory paper foundation, and green
   used for rules, numerals and CTAs rather than as a surface.
   ========================================================================== */

/* --- 21.1 Shared document primitives -------------------------------------- */

.trr-site .trr-home__content {
	background: var(--trr-ivory);
}

/* Small-caps label. Concept 3's `.sc`. */
.trr-site .trr-sc {
	margin: 0 0 22px;
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-idxhead {
	max-width: 62ch;
	margin-bottom: clamp(42px, 4vw, 64px);
}

.trr-site .trr-idxhead__title {
	margin: 0;
	font-size: clamp(32px, 3.4vw, 50px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.024em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-idxhead__lede {
	margin: 16px 0 0;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-idxhead--tight { max-width: 46ch; }

/* --- 21.2 Hero: the record ------------------------------------------------ */

.trr-site .trr-hero {
	background: var(--trr-ivory);
	border-bottom: 1px solid var(--trr-doc-rule);
	padding-block: clamp(56px, 5vw, 84px);
}

.trr-site .trr-rec {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 316px;
	align-items: start;
}

/* The line-number rail: right-aligned Courier against a hairline, as the
   client's transcript reference sets it. aria-hidden in the markup. */
.trr-site .trr-rec__rail {
	margin: 0;
	padding: 4px 18px 4px 0;
	border-right: 1px solid var(--trr-doc-rule);
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 13px;
	line-height: 2.1;
	text-align: right;
	color: var(--wp--preset--color--muted, #5E736D);
	opacity: .55;
	user-select: none;
	align-self: stretch;
}

.trr-site .trr-rec__body {
	padding: 4px clamp(40px, 4vw, 64px);
	border-right: 1px solid var(--trr-doc-rule);
	min-width: 0;
}

.trr-site .trr-rec__title {
	margin: 26px 0 0;
	max-width: 15ch;
	font-size: clamp(44px, 5.2vw, 78px);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.028em;
	color: var(--wp--preset--color--ink, #0B241C);
}

/* Q. / A. — hanging indent so continuation lines align under the first word,
   which is what makes it read as a transcript rather than monospace prose. */
.trr-site .trr-qa__q,
.trr-site .trr-qa__a {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 14.5px;
	line-height: 1.9;
	padding-left: 2.6em;
	text-indent: -2.6em;
	max-width: 58ch;
}

.trr-site .trr-qa__q {
	margin-top: clamp(28px, 2.6vw, 40px);
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-qa__a {
	margin-top: 12px;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-qa__q strong,
.trr-site .trr-qa__a strong {
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-rec__actions {
	margin-top: clamp(30px, 3vw, 44px);
	gap: 22px;
}

/* The editorial rail: record metadata, then the certified document. */
.trr-site .trr-rec__meta {
	padding: 4px 0 4px clamp(28px, 2.6vw, 44px);
}

.trr-site .trr-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-meta li {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--trr-doc-rule);
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-meta li i {
	font-style: normal;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5E736D);
}


/* The certified page itself, drawn in CSS: ruled writing lines, a green margin
   rule, abstract text bars, and a seal. Graphic bars only — never words. */

/* Line marks down the document's margin. */


/* The certification seal. */

/* One restrained bubble, the only Concept 2 note in the hero. */

/* A client photograph replaces the whole composition. */


/* --- 21.3 Services: an index of the record -------------------------------- */

.trr-site .trr-services {
	background: var(--trr-ivory);
}

.trr-site .trr-idxrow {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 3vw, 48px);
	padding: clamp(36px, 3.4vw, 48px) 0;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-idx > .trr-idxrow:last-child {
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-idxrow__n {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-idxrow__title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.018em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-idxrow__head p {
	margin: 14px 0 0;
	max-width: 34ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-idxrow__link {
	margin-top: 22px !important;
}

.trr-site .trr-idxrow__link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary-action, #118058);
	border-bottom: 1px solid rgba(17, 128, 88, .4);
}

.trr-site .trr-idxrow__link a:hover,
.trr-site .trr-idxrow__link a:focus {
	color: var(--wp--preset--color--deep-green, #0E5C43);
	border-bottom-color: currentColor;
}

.trr-site .trr-idxlist {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 36px;
}

.trr-site .trr-idxlist li {
	position: relative;
	padding: 9px 0 9px 18px;
	border-bottom: 1px solid var(--trr-doc-rule);
	break-inside: avoid;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-idxlist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-accent, #159C6B);
}

.trr-site .trr-sec-outro {
	margin: clamp(30px, 3vw, 44px) 0 0;
}

/* --- 21.4 Docket ---------------------------------------------------------- */


/* --- 21.5 Booking: green as a rail, not a slab ---------------------------- */

.trr-site .trr-booking {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(32px, 3.6vw, 64px);
	align-items: start;
	background: var(--trr-ivory);
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-booking__intro {
	padding-left: clamp(20px, 2vw, 30px);
	border-left: 3px solid var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-booking__title {
	margin: 0;
	font-size: clamp(28px, 1.3rem + 1.4vw, 40px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.022em;
	color: var(--wp--preset--color--deep-green, #0E5C43);
}

.trr-site .trr-booking__intro p {
	margin: 18px 0 0;
	max-width: 42ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-booking__note {
	font-size: 15px !important;
	color: var(--wp--preset--color--muted, #5E736D) !important;
}

.trr-site .trr-booking__mount {
	padding: clamp(26px, 2.6vw, 40px);
	background: var(--trr-paper);
	border: 1px solid var(--trr-doc-rule);
	border-radius: var(--trr-r-md);
}

@media (min-width: 1181px) {
	.trr-site .trr-booking__intro {
		position: sticky;
		top: 108px;
		align-self: start;
	}
}

/* --- 21.6 Reviews: client records ----------------------------------------- */

.trr-site .trr-reviews {
	background: var(--trr-ivory);
}

.trr-site .trr-records {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(28px, 3vw, 48px);
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-record {
	padding: clamp(24px, 2.4vw, 34px) 0;
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-record__n {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-record__q {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(19px, .9rem + .5vw, 22px);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -.012em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-record__by {
	margin: 20px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--trr-doc-rule);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--muted, #5E736D);
}

/* --- 21.7 Contact --------------------------------------------------------- */

.trr-site .trr-contact {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 3.6vw, 64px);
	align-items: start;
	background: var(--trr-ivory);
}

.trr-site .trr-contact__title {
	margin: 0;
	font-size: clamp(28px, 1.3rem + 1.4vw, 40px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.022em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-contact__copy > p {
	margin: 18px 0 0;
	max-width: 44ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-contact__copy .trr-deflist {
	margin-top: 28px;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-contact__copy .trr-deflist > div {
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-contact__mount {
	padding: clamp(26px, 2.6vw, 40px);
	background: var(--trr-paper);
	border: 1px solid var(--trr-doc-rule);
	border-radius: var(--trr-r-md);
}

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

@media (max-width: 1180px) {
	.trr-site .trr-rec { grid-template-columns: 52px minmax(0, 1fr); }
	.trr-site .trr-rec__body { border-right: 0; }
	.trr-site .trr-rec__meta {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: clamp(24px, 3vw, 44px);
		align-items: start;
		margin-top: clamp(32px, 3.4vw, 48px);
		padding: clamp(28px, 3vw, 40px) 0 0;
		border-top: 1px solid var(--trr-doc-rule);
	}
}

@media (max-width: 1024px) {
	.trr-site .trr-idxrow { grid-template-columns: 44px minmax(0, 1fr); }
	.trr-site .trr-idxlist { grid-column: 2; }
			.trr-site .trr-records { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.trr-site .trr-rec { grid-template-columns: 38px minmax(0, 1fr); }
	.trr-site .trr-rec__rail { font-size: 11px; line-height: 2; padding-right: 12px; }
	.trr-site .trr-rec__body { padding-inline: 20px; }
	.trr-site .trr-rec__meta { grid-template-columns: minmax(0, 1fr); }
	.trr-site .trr-qa__q,
	.trr-site .trr-qa__a { font-size: 14px; padding-left: 2.4em; text-indent: -2.4em; }
	.trr-site .trr-idxlist { columns: 1; }
			.trr-site .trr-booking__mount,
	.trr-site .trr-contact__mount { border-radius: var(--trr-r-md); }
}

@media (max-width: 480px) {
	/* The rail would steal a fifth of a phone screen. */
	.trr-site .trr-rec { grid-template-columns: minmax(0, 1fr); }
	.trr-site .trr-rec__rail { display: none; }
	.trr-site .trr-rec__body { padding-inline: 0; }
}


/* The FAQ link in the contact panel is a standalone target and keeps its own
   height (WCAG 2.2 SC 2.5.8). */
.trr-site .trr-contactpage__faq a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}


/* ==========================================================================
   22. CONCEPT 3 COMPLETION — booking index, docket, records, inner hero
   --------------------------------------------------------------------------
   The four components the previous pass left unfinished, plus the removal of
   the last Concept 2 inner-page surfaces.
   ========================================================================== */

/* --- 22.1 Reusable Courier metadata label -------------------------------- */

.trr-site .trr-sc,
.trr-site .trr-eyebrow {
	display: block;
	margin: 0 0 22px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
}

/* Procedural suffixes, per page. Decorative metadata only — no claim, and the
   client's own eyebrow text stays editable in the block editor. */
.trr-site.trr-page-services  .trr-pagehero .trr-eyebrow::after { content: " / Index"; }
.trr-site.trr-page-book-a-deposition .trr-pagehero .trr-eyebrow::after { content: " / Request"; }
.trr-site.trr-page-request-a-service .trr-pagehero .trr-eyebrow::after { content: " / Request"; }
.trr-site.trr-page-contact   .trr-pagehero .trr-eyebrow::after { content: " / Record"; }
.trr-site.trr-page-privacy-policy   .trr-pagehero .trr-eyebrow::after { content: " / Notice"; }
.trr-site.trr-page-terms-of-service .trr-pagehero .trr-eyebrow::after { content: " / Notice"; }

/* --- 22.2 Inner-page hero: one component, six pages ---------------------- */

.trr-site .trr-pagehero {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y-compact);
	background: var(--trr-ivory);
	border-bottom: 1px solid var(--trr-doc-rule);
	position: relative;
	overflow: hidden;
}

.trr-site .trr-pagehero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	column-gap: clamp(40px, 5vw, 88px);
	align-items: end;
	padding-left: clamp(24px, 2.4vw, 40px);
	border-left: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-pagehero__title {
	grid-column: 1;
	margin: 0;
	font-size: clamp(34px, 3.6vw, 54px);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.026em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-pagehero .trr-eyebrow {
	grid-column: 1;
}

.trr-site .trr-pagehero__lede {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding-bottom: 6px;
	max-width: 42ch;
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-pagehero__actions {
	grid-column: 1 / -1;
	margin-top: clamp(26px, 2.6vw, 38px);
}

@media (max-width: 1024px) {
	.trr-site .trr-pagehero__inner { grid-template-columns: minmax(0, 1fr); }
	.trr-site .trr-pagehero__lede { grid-column: 1; grid-row: auto; margin-top: 20px; }
}

@media (max-width: 600px) {
	.trr-site .trr-pagehero__inner { padding-left: 16px; }
}

/* --- 22.3 Booking: a procedural index beside the record ------------------ */

.trr-site .trr-index {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-index li {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--trr-doc-rule);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-index li i {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-booking__note {
	margin-top: 20px !important;
}

/* --- 22.4 Docket: a formal procedural record ----------------------------- */


/* The rule beneath each record draws as it arrives. */
.trr-js 
/* --- 22.5 Reviews as client records -------------------------------------- */

.trr-site .trr-records {
	border-top: 1px solid var(--trr-doc-rule);
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-record {
	padding: clamp(30px, 3vw, 42px) clamp(20px, 2vw, 30px) clamp(30px, 3vw, 42px) 0;
	border-bottom: 0;
	border-right: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-records > .trr-record:last-child {
	border-right: 0;
	padding-right: 0;
}

.trr-site .trr-record__n {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--trr-doc-rule);
	font-size: 12.5px;
	letter-spacing: .12em;
}

.trr-site .trr-record__q {
	margin-top: 22px;
	font-size: clamp(21px, 1.6vw, 25px);
	line-height: 1.45;
}

.trr-site .trr-record__by {
	border-top: 0;
	padding-top: 0;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted, #5E736D);
}

@media (max-width: 1024px) {
	.trr-site .trr-record {
		border-right: 0;
		border-bottom: 1px solid var(--trr-doc-rule);
		padding-right: 0;
	}
	.trr-site .trr-records > .trr-record:last-child { border-bottom: 0; }
}

/* --- 22.6 "Prefer to speak to someone?" — one record component ----------- */

.trr-site .trr-bookhelp {
	width: 100%;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	background: var(--trr-ivory-2);
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-bookhelp__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(30px, 3.4vw, 56px);
	align-items: start;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.trr-site .trr-bookhelp__inner::before { display: none; }

.trr-site .trr-bookhelp__inner h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 400;
	letter-spacing: -.02em;
}

.trr-site .trr-bookhelp__inner .trr-deflist--light {
	border-top: 1px solid var(--trr-doc-rule);
	padding: 0;
	background: none;
	border-radius: 0;
	max-width: none;
}

.trr-site .trr-bookhelp__inner .trr-deflist--light > div {
	border-bottom: 1px solid var(--trr-doc-rule);
}

/* --- 22.7 Forms on paper, not floating cards ---------------------------- */

.trr-site .trr-bookpage__form,
.trr-site .trr-contactpage__form,
.trr-site .trr-booking__mount,
.trr-site .trr-contact__mount {
	padding: var(--trr-form-pad-y) var(--trr-form-pad-x);
	background: var(--trr-paper);
	border: 1px solid var(--trr-doc-rule);
	border-radius: var(--trr-r-md);
	box-shadow: none;
}

/* Fieldsets and legends carry no inline padding of their own, so every row —
   index, legend, fields, notice, submit — starts on the shell's content edge.
   (A <fieldset> has browser default padding; the reset below is the reason the
   grid and the legend agree.) */
.trr-site .trr-form__section,
.trr-site .trr-form__legend,
.trr-site .trr-form__foot {
	padding-inline: 0;
	margin-inline: 0;
}

.trr-site .trr-form__legend-n {
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-form__section {
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-bookpage__rail {
	background: none;
	border: 0;
	border-left: 1px solid var(--trr-doc-rule);
	border-radius: 0;
	padding: 0 0 0 clamp(20px, 2vw, 30px);
}

/* --- 22.8 Services page in the same system ------------------------------ */

.trr-site .trr-cat,
.trr-site .trr-faq,
.trr-site .trr-split {
	background: var(--trr-ivory);
}

.trr-site .trr-cat--tint {
	background: var(--trr-ivory-2);
}

.trr-site .trr-faq__item {
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-split__panel {
	border-radius: var(--trr-r-md);
}


/* --- 22.9 Contact page record panel --------------------------------------
   The deep-green card is gone. The contact details are a ruled record on
   paper, matching the "Prefer to speak to someone?" component. */

.trr-site .trr-contactpage {
	background: var(--trr-ivory);
}

.trr-site .trr-contactpage__panel {
	padding: 0 0 0 clamp(20px, 2vw, 30px);
	background: none;
	border: 0;
	border-left: 1px solid var(--trr-doc-rule);
	border-radius: 0;
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-contactpage__panel::after { display: none; }

.trr-site .trr-contactpage__paneltitle {
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-contactpage__panel > p {
	color: var(--wp--preset--color--body, #3C5149);
}

.trr-site .trr-contactpage__panel .trr-deflist--light {
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-contactpage__panel .trr-deflist--light > div {
	border-bottom: 1px solid var(--trr-doc-rule);
}


.trr-site .trr-contactpage__faq a {
	color: var(--wp--preset--color--primary-action, #118058);
	border-bottom-color: rgba(17, 128, 88, .4);
}


/* --- 22.10 Contact record on narrow screens ------------------------------
   The label/value grid has a fixed label column, which on a phone squeezed
   the value into a few characters per line. Below 600px the record stacks. */

@media (max-width: 600px) {
	.trr-site .trr-deflist > div,
	.trr-site .trr-deflist--light > div,
	.trr-site .trr-bookhelp__inner .trr-deflist--light > div,
	.trr-site .trr-contactpage__panel .trr-deflist--light > div,
	.trr-site .trr-legal__body .trr-deflist--light > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.trr-site .trr-deflist dd,
	.trr-site .trr-deflist dd a {
		overflow-wrap: anywhere;
	}

	.trr-site .trr-bookhelp__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ==========================================================================
   23. FINAL RUNTIME PASS — contact record contrast and composition
   ========================================================================== */

/* The footer is now the only dark surface on the site, so it states its own
   colours rather than relying on a shared "light" modifier. */
.trr-site .trr-footer .trr-deflist dt {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

.trr-site .trr-footer .trr-deflist dd,
.trr-site .trr-footer .trr-deflist dd a {
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* Contact values on paper: full ink, never faded. Applies wherever the
   shortcode is used — homepage, Contact page, Book, Request, legal pages. */
.trr-site .trr-deflist dd,
.trr-site .trr-deflist dd a,
.trr-site .trr-deflist--light dd,
.trr-site .trr-deflist--light dd a {
	color: var(--wp--preset--color--ink, #0B241C);
	opacity: 1;
}

.trr-site .trr-deflist dt,
.trr-site .trr-deflist--light dt {
	color: var(--wp--preset--color--muted, #5E736D);
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.trr-site .trr-footer .trr-deflist dt {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

/* Long addresses wrap on a word where one exists, and only break mid-token
   when the token itself cannot fit — which is what an email address in a
   narrow footer column needs. `anywhere` (unlike `break-all`) still prefers
   ordinary word boundaries. */
.trr-site .trr-deflist dd,
.trr-site .trr-deflist dd a {
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: none;
	min-width: 0;
}

/* --- 23.1 Contact page composition --------------------------------------
   40/60 at wide desktop, stacking in one step at 1100px. The previous
   breakpoint let the form widen into a full row while the record dropped
   beneath it, which is the composition break reported on the live site. */

.trr-site .trr-contactpage {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(32px, 3.6vw, 64px);
	align-items: start;
	background: var(--trr-ivory);
}

.trr-site .trr-contactpage__form,
.trr-site .trr-contactpage__panel {
	min-width: 0;
}

/* Record first, form second — the record is the page's editorial anchor. */
.trr-site .trr-contactpage__panel { order: 1; }
.trr-site .trr-contactpage__form  { order: 2; }

@media (max-width: 1100px) {
	.trr-site .trr-contactpage {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 3vw, 40px);
	}

	/* Stacked, the record keeps its rule but loses the side inset. */
	.trr-site .trr-contactpage__panel {
		padding-left: clamp(18px, 2vw, 26px);
	}
}

@media (max-width: 600px) {
	.trr-site .trr-contactpage__panel {
		padding-left: 14px;
	}
}


/* ==========================================================================
   24. DECORATIVE BUBBLE SYSTEM (§34)
   --------------------------------------------------------------------------
   One component with modifiers, rather than seven page-specific circle rules.
   Every bubble is a pseudo-element on an existing section — no markup, nothing
   focusable, nothing announced.

   Stacking (§35): bubbles sit on z-index -1 inside a section that carries
   `isolation: isolate`. Children are NEVER given position/z-index, because
   doing that once already reactivated a stale offset on the Services category
   head. Clipping (§36) happens on the section that owns the bubble — there is
   no page-level overflow mask anywhere in this stylesheet.
   ========================================================================== */

.trr-site .trr-bubbles-host {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.trr-site .trr-bubbles-host::before,
.trr-site .trr-bubbles-host::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

/* Mint, medium brand green, translucent, soft. */
.trr-site .trr-bubble-mint {
	background: radial-gradient(circle at 36% 30%,
		rgba(143, 217, 182, .42) 0%,
		rgba(143, 217, 182, .13) 58%,
		rgba(143, 217, 182, 0) 100%);
}

.trr-site .trr-bubble-green {
	background: radial-gradient(circle at 38% 32%,
		rgba(21, 156, 107, .26) 0%,
		rgba(21, 156, 107, .07) 60%,
		rgba(21, 156, 107, 0) 100%);
}

@keyframes trr-bub-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-6px, 8px, 0) scale(1.02); }
}

@keyframes trr-bub-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(7px, -6px, 0) scale(1.015); }
}

/* --- 24.1 Homepage: three restrained compositions (§3) ------------------- */

/* A. beside the certified-record rail — clear of copy, Q/A and the rail. */
.trr-site .trr-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.trr-site .trr-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -90px;
	bottom: -110px;
	top: auto;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 36% 30%,
		rgba(143, 217, 182, .38) 0%,
		rgba(143, 217, 182, .11) 58%,
		rgba(143, 217, 182, 0) 100%);
	animation: trr-bub-a 21s ease-in-out infinite;
}

/* B. the Services → Procedure transition, breaking the section edge. */


/* C. a small motif at the contact corner — never behind the form or values. */
.trr-site .trr-contact {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.trr-site .trr-contact::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -60px;
	bottom: -70px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 40% 34%,
		rgba(143, 217, 182, .34) 0%,
		rgba(143, 217, 182, .1) 60%,
		rgba(143, 217, 182, 0) 100%);
	animation: trr-bub-a 23s ease-in-out infinite;
}

/* NOTE: .trr-booking deliberately has NO bubble and NO overflow property —
   its intro column is sticky, and an overflow ancestor would disable it (§37). */

/* --- 24.2 Book, Request and Contact: one composition each (§5-7) --------- */

.trr-site.trr-page-book-a-deposition .trr-pagehero::after,
.trr-site.trr-page-request-a-service .trr-pagehero::after,
.trr-site.trr-page-contact .trr-pagehero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -70px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 36% 30%,
		rgba(143, 217, 182, .36) 0%,
		rgba(143, 217, 182, .1) 58%,
		rgba(143, 217, 182, 0) 100%);
	animation: trr-bub-a 22s ease-in-out infinite;
}

/* The lower help transition on Book and Request — away from the form. */
.trr-site .trr-bookhelp {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.trr-site .trr-bookhelp::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -80px;
	bottom: -80px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 58% 44%,
		rgba(21, 156, 107, .2) 0%,
		rgba(21, 156, 107, .055) 60%,
		rgba(21, 156, 107, 0) 100%);
	animation: trr-bub-b 25s ease-in-out infinite;
}

/* --- 24.3 Privacy and Terms: one very faint hero motif only (§8) --------- */

.trr-site.trr-page-privacy-policy .trr-pagehero::after,
.trr-site.trr-page-terms-of-service .trr-pagehero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -80px;
	top: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 38% 32%,
		rgba(143, 217, 182, .2) 0%,
		rgba(143, 217, 182, .05) 60%,
		rgba(143, 217, 182, 0) 100%);
	/* Static: legal reading should not have anything moving beside it. */
	animation: none;
}

/* --- 24.4 Mobile density (§13) ------------------------------------------ */

@media (max-width: 600px) {
	.trr-site .trr-how::before,
	.trr-site .trr-contact::after,
	.trr-site .trr-bookhelp::before {
		display: none;
	}

	.trr-site .trr-hero::after,
	.trr-site.trr-page-book-a-deposition .trr-pagehero::after,
	.trr-site.trr-page-request-a-service .trr-pagehero::after,
	.trr-site.trr-page-contact .trr-pagehero::after {
		width: 170px;
		height: 170px;
		animation: none;
	}
}

/* --- 24.5 Reduced motion (§12) ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.trr-site .trr-hero::after,
	.trr-site .trr-how::before,
	.trr-site .trr-contact::after,
	.trr-site .trr-bookhelp::before,
	.trr-site.trr-page-book-a-deposition .trr-pagehero::after,
	.trr-site.trr-page-request-a-service .trr-pagehero::after,
	.trr-site.trr-page-contact .trr-pagehero::after {
		animation: none;
	}
}


/* ==========================================================================
   25. PAGE BACKGROUND
   --------------------------------------------------------------------------
   theme.json sets the body background, but a stale WordPress global-styles
   cache can serve the previous value for a while after an update. Declaring it
   here too means the paper surface is correct immediately, and it also covers
   the area around the floating header where nothing else paints a background.
   ========================================================================== */

html,
body.trr-site {
	background-color: var(--wp--preset--color--ivory, #F6F5F1);
}


/* ==========================================================================
   26. HERO REVISION — CONCEPT 3 SPACING AND SEAL
   --------------------------------------------------------------------------
   Measured from concept-3-luxury-minimal.html rather than approximated:
     hero grid        64px 1fr 300px
     rail padding     88px 18px 88px 0, right-aligned, Courier
     body padding     88px 64px 88px 46px
     H1               clamp(44px, 5.4vw, 78px) / 1.02, em italic green
     Q/A              margin-top 44px, padding 28px 0 30px, rules top+bottom
     right rail       padding 88px 0 88px 44px, space-between, gap 40
     seal             150x150, opacity .9
   ========================================================================== */

.trr-site .trr-hero {
	padding-block: 0;
}

.trr-site .trr-rec {
	grid-template-columns: 64px minmax(0, 1fr) 300px;
}

.trr-site .trr-rec__rail {
	padding: 88px 18px 88px 0;
	line-height: 2.05;
	font-size: 13px;
}

.trr-site .trr-rec__body {
	padding: 88px clamp(28px, 3.4vw, 64px) 88px clamp(24px, 2.6vw, 46px);
}

.trr-site .trr-rec__title {
	margin: 26px 0 0;
	max-width: 16ch;
	font-size: clamp(44px, 5.4vw, 78px);
	line-height: 1.02;
	letter-spacing: -.03em;
}

/* §6/§47 — only "record" is green italic. */
.trr-site .trr-rec__title em {
	font-style: italic;
	color: var(--wp--preset--color--primary-action, #118058);
}

/* §8 — Q/A keeps its approved wording, presented Concept 3's way: hairlines
   above and below, generous breathing room. */
.trr-site .trr-qa__q {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-qa__a {
	margin-top: 12px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--trr-doc-rule);
	max-width: 62ch;
}

.trr-site .trr-rec__actions {
	margin-top: 40px;
	gap: 18px;
}

/* --- 26.1 The right rail and its seal ------------------------------------ */

.trr-site .trr-rec__meta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 88px 0 88px 44px;
	border-left: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-seal {
	display: block;
	width: 150px;
	height: 150px;
	opacity: .9;
	color: var(--wp--preset--color--deep-green, #0E5C43);
	overflow: visible;
}

.trr-site .trr-seal__ring {
	font-family: var(--wp--preset--font-family--ui, sans-serif);
}

.trr-site .trr-seal__mark {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	fill: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-seal__sub {
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
}

/* §61 — the seal breathes almost imperceptibly. It does not spin. */
@keyframes trr-seal-settle {
	0%, 100% { transform: scale(1); opacity: .9; }
	50%      { transform: scale(1.012); opacity: 1; }
}

.trr-site .trr-seal {
	transform-origin: 50% 50%;
	animation: trr-seal-settle 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.trr-site .trr-seal { animation: none; }
}

/* §60 — no bubble cluster behind the seal; the hero keeps one faint accent
   well clear of it, defined in the bubble system. */

/* --- 26.2 Responsive (§34) ----------------------------------------------- */

@media (max-width: 1180px) {
	.trr-site .trr-rec { grid-template-columns: 56px minmax(0, 1fr); }
	.trr-site .trr-rec__body { border-right: 0; padding-block: 64px; }
	.trr-site .trr-rec__rail { padding-block: 64px; }
	.trr-site .trr-rec__meta {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 40px;
		padding: 0 0 64px 56px;
		border-left: 0;
		border-top: 1px solid var(--trr-doc-rule);
		padding-top: 40px;
	}
	.trr-site .trr-meta { flex: 1; max-width: 320px; }
}

@media (max-width: 767px) {
	.trr-site .trr-rec { grid-template-columns: 38px minmax(0, 1fr); }
	.trr-site .trr-rec__rail { padding: 48px 12px 48px 0; font-size: 11px; }
	.trr-site .trr-rec__body { padding: 48px 0 48px 20px; }
	.trr-site .trr-rec__meta { padding: 32px 0 48px 38px; gap: 26px; }
	.trr-site .trr-seal { width: 104px; height: 104px; }
}

@media (max-width: 480px) {
	.trr-site .trr-rec { grid-template-columns: minmax(0, 1fr); }
	.trr-site .trr-rec__rail { display: none; }
	.trr-site .trr-rec__body,
	.trr-site .trr-rec__meta { padding-inline: 0; }
	.trr-site .trr-rec__meta { flex-direction: column; align-items: flex-start; }
}

/* --- 26.3 Compact homepage booking (§26, §36) ---------------------------- */

.trr-site .trr-booking__mount .trr-form__section:last-of-type {
	border-bottom: 0;
}

.trr-site .trr-booking__note a {
	color: var(--wp--preset--color--primary-action, #118058);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ==========================================================================
   27. FORMS ARE NEVER HIDDEN BY MOTION
   --------------------------------------------------------------------------
   A form is not decoration. Every fieldset, legend, label, helper line, input
   and button must be readable the moment the page renders — with JavaScript
   disabled, with IntersectionObserver missing, when the visitor jumps straight
   to the form, when the browser restores a scroll position, when LiteSpeed
   defers scripts, and in a full-page capture.

   The reveal script no longer marks form internals; this is the belt to that
   braces. If any form descendant is ever marked again, these rules keep it
   visible. The shell itself may still animate as a single element.
   ========================================================================== */

.trr-js .trr-site .trr-form .trr-reveal,
.trr-js .trr-site .trr-form__section,
.trr-js .trr-site .trr-form__legend,
.trr-js .trr-site .trr-form__foot,
.trr-js .trr-site .trr-field,
.trr-js .trr-site .trr-field__label,
.trr-js .trr-site .trr-field__input,
.trr-js .trr-site .trr-field__help,
.trr-js .trr-site .trr-form__note,
.trr-js .trr-site .trr-form__submit {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.trr-site .trr-form,
	.trr-site .trr-form * {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}

/* ==========================================================================
   28. COMPACT HOMEPAGE BOOKING — DENSITY
   --------------------------------------------------------------------------
   Tighter rhythm inside the homepage shell only. The dedicated Book page keeps
   its full spacing. The left rail is set as an editorial list rather than a
   second form index.
   ========================================================================== */

.trr-site .trr-booking__mount {
	--trr-form-pad-y: clamp(20px, 1.8vw, 28px);
	--trr-form-pad-x: clamp(20px, 2vw, 32px);
}

.trr-site .trr-booking__mount .trr-form__section {
	margin-bottom: 20px;
	padding-bottom: 18px;
}

.trr-site .trr-booking__mount .trr-form__section:last-of-type {
	margin-bottom: 14px;
	padding-bottom: 0;
}

.trr-site .trr-booking__mount .trr-form__legend {
	padding-bottom: 14px;
}

.trr-site .trr-booking__mount .trr-form__legend-t {
	font-size: 19px;
}

.trr-site .trr-booking__mount .trr-form__grid {
	gap: 14px 18px;
}

.trr-site .trr-booking__mount .trr-field__label {
	margin-bottom: 6px;
}

.trr-site .trr-booking__mount .trr-field__input {
	min-height: 46px;
	padding: 10px 14px;
}

.trr-site .trr-booking__mount textarea.trr-field__input {
	min-height: 84px;
}

.trr-site .trr-booking__mount .trr-choice {
	min-height: 46px;
	padding: 10px 14px;
}

.trr-site .trr-booking__mount .trr-field__help {
	margin-top: 5px;
	font-size: 13px;
}

.trr-site .trr-booking__mount .trr-form__foot {
	padding-top: 16px;
	gap: 14px;
}

.trr-site .trr-booking__mount .trr-form__submit {
	min-height: 48px;
	padding: 13px 28px;
}

/* The procedural rail reads as an editorial contents list, not a form index. */
.trr-site .trr-index {
	margin-top: 22px;
	border-top: 0;
}

.trr-site .trr-index li {
	grid-template-columns: 32px 1fr;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 0;
	font-size: 14.5px;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-index li i {
	font-size: 12px;
	opacity: .8;
}


/* ==========================================================================
   29. HEADER — CONCEPT 3 EDITORIAL BAR
   --------------------------------------------------------------------------
   Concept 3: a straight bar 92px tall on the paper surface, closed by a
   hairline, with compact uppercase navigation and an underlined editorial CTA.
   The rounded floating pill was a Concept 2 component kept only because it
   already existed; it is replaced rather than restyled.
   ========================================================================== */

.trr-site .trr-nav a,
.trr-site .trr-nav__link {
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #0B241C);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
}

.trr-site .trr-nav a:hover,
.trr-site .trr-nav a:focus,
.trr-site .trr-nav .current-menu-item > a {
	color: var(--wp--preset--color--primary-action, #118058);
	border-bottom-color: currentColor;
	background: none;
}

.trr-site .trr-nav ul {
	gap: 36px;
}

/* The header CTA is an editorial underlined link, not a filled pill. */
.trr-site .trr-navbar__acts .trr-btn,
.trr-site .trr-navbar__acts .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 0 6px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--primary-action, #118058);
	border-radius: 0;
	color: var(--wp--preset--color--primary-action, #118058);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: none;
}

.trr-site .trr-navbar__acts .trr-btn::after {
	content: "\2192";
	font-size: 15px;
}

.trr-site .trr-navbar__acts .trr-btn:hover,
.trr-site .trr-navbar__acts .trr-btn:focus {
	background: none;
	color: var(--wp--preset--color--deep-green, #0E5C43);
	transform: none;
}

.trr-site .trr-navbar .trr-brand--text .trr-brand__name {
	font-size: 17px;
}

@media (max-width: 1024px) {
	.trr-site .trr-navbar { height: 76px; gap: 20px; }
}

/* ==========================================================================
   30. HERO HEADLINE COMPOSITION (§2)
   --------------------------------------------------------------------------
   Concept 3 wraps naturally into three lines. Our markup previously forced the
   break with <br>, which pushed "Partnering" onto its own line. The measure now
   produces the intended composition:
        Protecting the
        record. Partnering
        with you.
   ========================================================================== */

.trr-site .trr-rec__title {
	/* 14ch produces Concept 3's three-line composition:
	   "Protecting the / record. Partnering / with you." */
	max-width: 14ch;
}

/* --- Right rail density (§4) --------------------------------------------- */

.trr-site .trr-rec__meta .trr-seal {
	margin-bottom: 8px;
}

.trr-site .trr-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-facts li {
	padding: 16px 0;
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-facts b {
	display: block;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-facts span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #5E736D);
}


/* ==========================================================================
   31. BUTTONS AND NAVIGATION — CONCEPT 3
   --------------------------------------------------------------------------
   Concept 3's button is a squared editorial block: 52px min-height,
   16px/34px padding, 13.5px uppercase at .1em, green fill with a matching
   border, outline variant on the rule colour. The rounded pill was a Concept 2
   component and is replaced site-wide.
   ========================================================================== */

.trr-site .trr-btn,
.trr-site .wp-block-button__link,
.trr-site .trr-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 16px 34px;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--primary-action, #118058);
	border: 1px solid var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: none;
}

.trr-site .trr-btn:hover,
.trr-site .wp-block-button__link:hover,
.trr-site .trr-form__submit:hover {
	background: var(--wp--preset--color--deep-green, #0E5C43);
	border-color: var(--wp--preset--color--deep-green, #0E5C43);
	transform: none;
}

/* Outline / secondary. */
.trr-site .is-style-outline .wp-block-button__link,
.trr-site .trr-btn-secondary .wp-block-button__link,
.trr-site .trr-btn--outline {
	background: transparent;
	color: var(--wp--preset--color--ink, #0B241C);
	border-color: var(--trr-doc-rule);
}

.trr-site .is-style-outline .wp-block-button__link:hover,
.trr-site .trr-btn-secondary .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--ink, #0B241C);
	color: var(--wp--preset--color--ink, #0B241C);
}

/* Navigation: the menu markup uses .trr-navbar__nav, not .trr-nav. */
.trr-site .trr-navbar__nav a {
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #0B241C);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
}

.trr-site .trr-navbar__nav a:hover,
.trr-site .trr-navbar__nav a:focus,
.trr-site .trr-navbar__nav .current-menu-item > a {
	color: var(--wp--preset--color--primary-action, #118058);
	border-bottom-color: currentColor;
	background: none;
}

.trr-site .trr-navbar__nav ul {
	gap: 36px;
}

/* The header CTA stays an underlined editorial link. */
.trr-site .trr-navbar__acts .trr-btn {
	min-height: 44px;
	padding: 0 0 6px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--primary-action, #118058);
	color: var(--wp--preset--color--primary-action, #118058);
	font-size: 13px;
}

@media (max-width: 767px) {
	.trr-site .trr-btn,
	.trr-site .wp-block-button__link,
	.trr-site .trr-form__submit { padding: 15px 26px; font-size: 12.5px; }
}


/* ==========================================================================
   32. HERO FIDELITY POLISH
   --------------------------------------------------------------------------
   Scale and breathing room only. Wording, line composition, structure, colours
   and type system are unchanged.
   ========================================================================== */

@media (min-width: 1025px) {
	/* Slightly stronger presence. The measure moves with the size so the
	   three-line composition is preserved exactly:
	     Protecting the / record. Partnering / with you. */
	.trr-site .trr-rec__title {
		font-size: clamp(46px, 5.8vw, 84px);
		max-width: 13.6ch;
	}

	/* More air around the Q&A block and the actions beneath it. */
	.trr-site .trr-qa__q {
		margin-top: 54px;
		padding-top: 34px;
	}

	.trr-site .trr-qa__a {
		padding-bottom: 36px;
	}

	.trr-site .trr-rec__actions {
		margin-top: 50px;
	}

	/* A larger seal, sitting further clear of the ruled entries below it. */
	.trr-site .trr-seal {
		width: 168px;
		height: 168px;
	}

	.trr-site .trr-rec__meta .trr-seal {
		margin-bottom: 34px;
	}

	.trr-site .trr-facts li {
		padding: 18px 0;
	}
}

/* --- 32.1 Tablet: the rail must not overpower the content ---------------- */

@media (max-width: 1180px) and (min-width: 768px) {
	.trr-site .trr-rec { grid-template-columns: 48px minmax(0, 1fr); }

	.trr-site .trr-rec__rail {
		font-size: 12px;
		opacity: .42;
		padding-right: 14px;
	}

	.trr-site .trr-rec__title {
		font-size: clamp(38px, 4.6vw, 54px);
		max-width: 15ch;
	}

	.trr-site .trr-qa__q { margin-top: 40px; padding-top: 28px; }
	.trr-site .trr-qa__a { padding-bottom: 30px; }
	.trr-site .trr-rec__actions { margin-top: 38px; }

	/* Seal and entries stack side by side, seal first. */
	.trr-site .trr-rec__meta { gap: 44px; align-items: flex-start; }
	.trr-site .trr-seal { width: 132px; height: 132px; }
	.trr-site .trr-facts { flex: 1; }
}

/* --- 32.2 Mobile: readable headline, uncramped Q&A ----------------------- */

@media (max-width: 767px) {
	.trr-site .trr-rec__rail {
		font-size: 10.5px;
		opacity: .38;
		line-height: 1.95;
	}

	.trr-site .trr-rec__title {
		font-size: clamp(32px, 8.6vw, 44px);
		max-width: 15ch;
		line-height: 1.06;
	}

	.trr-site .trr-qa__q { margin-top: 32px; padding-top: 24px; }
	.trr-site .trr-qa__a { padding-bottom: 26px; }
	.trr-site .trr-rec__actions { margin-top: 32px; gap: 12px; }

	.trr-site .trr-rec__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.trr-site .trr-seal { width: 116px; height: 116px; }
	.trr-site .trr-facts { width: 100%; }
	.trr-site .trr-facts li { padding: 14px 0; }
}

/* The rail was hidden entirely below 480px. At 390 a slim rail still reads as
   transcript language without crowding the copy, so it is kept — narrower,
   lighter and smaller rather than removed. */
@media (max-width: 480px) {
	.trr-site .trr-rec {
		grid-template-columns: 30px minmax(0, 1fr);
	}

	.trr-site .trr-rec__rail {
		display: block;
		padding: 44px 10px 44px 0;
		font-size: 10px;
		line-height: 1.9;
		opacity: .34;
	}

	.trr-site .trr-rec__body {
		padding: 44px 0 44px 16px;
	}

	.trr-site .trr-rec__meta {
		padding: 28px 0 44px 30px;
	}
}

/* The homepage booking and contact sections lost their stacking rule when the
   old homepage CSS was stripped: the 1180px block that held it was left empty,
   so both stayed two-column all the way down to 390px, squeezing the form into
   a ~188px column. Restored explicitly. */
@media (max-width: 1180px) {
	.trr-site .trr-booking,
	.trr-site .trr-contact {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 3vw, 44px);
	}

	.trr-site .trr-booking__intro {
		position: static;
	}
}




/* ==========================================================================
   33. RECORD STRIP + INDEX TREATMENT + SECTION TRANSITIONS
   ========================================================================== */

/* --- 33.1 The four-column ruled strip (§3) -------------------------------
   Concept 3's composition: equal columns, vertical hairlines, a serif value
   over smaller supporting copy, on paper. No cards, shadows or rounding — and
   no numbers, because none are verified for this client. */

.trr-site .trr-strip {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: max(var(--trr-gutter), calc((100% - var(--trr-max) + var(--trr-gutter) * 2) / 2));
	padding-block: var(--trr-section-y);
	background: var(--trr-ivory);
	border-bottom: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-strip__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-strip__cell {
	padding: 26px clamp(18px, 2vw, 32px) 4px;
	border-right: 1px solid var(--trr-doc-rule);
}

.trr-site .trr-strip__cell:first-child { padding-left: 0; }
.trr-site .trr-strip__cell:last-child  { border-right: 0; padding-right: 0; }

.trr-site .trr-strip__k {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-strip__v {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(22px, 1.9vw, 28px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.018em;
	color: var(--wp--preset--color--ink, #0B241C);
}

.trr-site .trr-strip__d {
	margin: 10px 0 0;
	max-width: 30ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #5E736D);
}

@media (max-width: 900px) {
	.trr-site .trr-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trr-site .trr-strip__cell:nth-child(2n) { border-right: 0; padding-right: 0; }
	.trr-site .trr-strip__cell:nth-child(2n+1) { padding-left: 0; }
	.trr-site .trr-strip__cell:nth-child(n+3) { border-top: 1px solid var(--trr-doc-rule); margin-top: 22px; }
}

@media (max-width: 560px) {
	.trr-site .trr-strip__row { grid-template-columns: minmax(0, 1fr); }
	.trr-site .trr-strip__cell {
		padding: 22px 0 4px;
		border-right: 0;
		border-top: 1px solid var(--trr-doc-rule);
		margin-top: 0;
	}
	.trr-site .trr-strip__cell:first-child { border-top: 0; padding-top: 4px; }
}

/* --- 33.2 Service index: a record number, not a floating numeral (§4) ---- */

.trr-site .trr-idxrow__n {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--mono, "Courier New", Courier, monospace);
	line-height: 1.2;
}

.trr-site .trr-idxrow__n b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--wp--preset--color--primary-action, #118058);
}

.trr-site .trr-idxrow__n i {
	font-style: normal;
	font-size: 11.5px;
	letter-spacing: .14em;
	color: var(--wp--preset--color--muted, #5E736D);
}

.trr-site .trr-idxrow {
	grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.05fr);
}

@media (max-width: 1024px) {
	.trr-site .trr-idxrow { grid-template-columns: 56px minmax(0, 1fr); }
}

/* --- 33.3 Right rail density (§2) ---------------------------------------- */

.trr-site .trr-facts b { font-size: 20px; }
.trr-site .trr-facts li { padding: 19px 0; }

/* --- 33.4 Deliberate section transitions (§5, §6, §7) --------------------
   Each major section closes on a hairline so the change of subject reads as
   editorial structure rather than a gap where something is missing. */

.trr-site .trr-services,
.trr-site .trr-booking,
.trr-site .trr-reviews {
	border-bottom: 1px solid var(--trr-doc-rule);
}

/* The services outro sits closer to the rows it belongs to. */
.trr-site .trr-sec-outro {
	margin-top: clamp(22px, 2vw, 30px);
}

/* The hero closes on the same rhythm as everything else; 88px top gives it
   presence, the shorter bottom hands over to the record strip cleanly. */
@media (min-width: 1025px) {
	.trr-site .trr-rec__rail,
	.trr-site .trr-rec__meta { padding-block: 104px 76px; }
	.trr-site .trr-rec__body { padding-block: 104px 76px; }
}


/* ==========================================================================
   34. INK SURFACE — #101512
   --------------------------------------------------------------------------
   A near-black editorial band, used sparingly so it punctuates the paper
   rhythm rather than competing with it. Applied to the record strip and the
   client records on the homepage, and to the closing CTA on Services.

   Every token the band needs is re-declared on the section itself, so any
   component placed inside inherits readable colours without a second set of
   per-component overrides.
   ========================================================================== */

.trr-site .trr-ink {
	--trr-ivory: var(--wp--preset--color--ink-deep, #101512);
	--trr-ivory-2: var(--wp--preset--color--ink-deep, #101512);
	--trr-doc-rule: rgba(255, 255, 255, .14);
	--trr-paper: rgba(255, 255, 255, .04);

	background: var(--wp--preset--color--ink-deep, #101512);
	color: rgba(255, 255, 255, .78);
	border-top: 0;
	border-bottom: 0;
}

/* Headings, values and serif quotes go to white; supporting copy sits just
   below it. Contrast is checked in QA, not assumed. */
.trr-site .trr-ink h2,
.trr-site .trr-ink h3,
.trr-site .trr-ink .trr-strip__v,
.trr-site .trr-ink .trr-record__q,
.trr-site .trr-ink .trr-idxhead__title,
.trr-site .trr-ink .trr-split__title {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-ink p,
.trr-site .trr-ink li,
.trr-site .trr-ink .trr-strip__d,
.trr-site .trr-ink .trr-idxhead__lede {
	color: rgba(255, 255, 255, .72);
}

/* Courier metadata keeps the brand green, lifted for a dark ground. */
.trr-site .trr-ink .trr-sc,
.trr-site .trr-ink .trr-strip__k,
.trr-site .trr-ink .trr-record__n,
.trr-site .trr-ink .trr-eyebrow {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

.trr-site .trr-ink .trr-record__by {
	color: rgba(255, 255, 255, .58);
}

.trr-site .trr-ink .trr-strip__row,
.trr-site .trr-ink .trr-strip__cell,
.trr-site .trr-ink .trr-records,
.trr-site .trr-ink .trr-record,
.trr-site .trr-ink .trr-record__n {
	border-color: rgba(255, 255, 255, .14);
}

/* Buttons on ink: the outline variant needs a visible edge. */
.trr-site .trr-ink .is-style-outline .wp-block-button__link,
.trr-site .trr-ink .trr-btn-secondary .wp-block-button__link {
	color: var(--wp--preset--color--white, #FFFFFF);
	border-color: rgba(255, 255, 255, .38);
}

.trr-site .trr-ink .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* Links and rules inside the band. */
.trr-site .trr-ink a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

/* The band is a full-bleed slab; nothing rounded, nothing raised. */
.trr-site .trr-strip.trr-ink,
.trr-site .trr-reviews.trr-ink,
.trr-site .trr-split.trr-ink {
	box-shadow: none;
	border-radius: 0;
}

/* On ink, the closing CTA drops its green card and rounding: two equal halves
   separated by a hairline, which is the Concept 3 treatment. Decorative
   bubbles are suppressed inside any ink band — on a near-black ground they
   read as a smudge rather than an accent. */

.trr-site .trr-split.trr-ink .trr-split__side,
.trr-site .trr-split.trr-ink .trr-split__side--deep,
.trr-site .trr-split.trr-ink .trr-split__side--light {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: clamp(30px, 3vw, 46px) clamp(24px, 3vw, 48px);
}

.trr-site .trr-split.trr-ink .trr-split__side:first-child {
	border-right: 1px solid rgba(255, 255, 255, .14);
	padding-left: 0;
}

.trr-site .trr-split.trr-ink .trr-split__side:last-child {
	padding-right: 0;
}

.trr-site .trr-split.trr-ink::before,
.trr-site .trr-split.trr-ink::after,
.trr-site .trr-ink::before,
.trr-site .trr-ink::after {
	display: none;
}

@media (max-width: 900px) {
	.trr-site .trr-split.trr-ink .trr-split__side:first-child {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
		padding-inline: 0;
	}
	.trr-site .trr-split.trr-ink .trr-split__side:last-child { padding-inline: 0; }
}

/* --- 34.1 FAQ on ink -----------------------------------------------------
   The accordion is rules and type only, so it needs the question, the answer,
   the index numeral and the open/close mark carried onto the dark ground. */

.trr-site .trr-faq.trr-ink .trr-faq__item {
	border-color: rgba(255, 255, 255, .14);
}

.trr-site .trr-faq.trr-ink .trr-faq__item summary {
	color: var(--wp--preset--color--white, #FFFFFF);
}

.trr-site .trr-faq.trr-ink .trr-faq__item summary::before {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

.trr-site .trr-faq.trr-ink .trr-faq__item summary::after {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}

.trr-site .trr-faq.trr-ink .trr-faq__item p {
	color: rgba(255, 255, 255, .72);
}

.trr-site .trr-faq.trr-ink .trr-faq__item summary:hover,
.trr-site .trr-faq.trr-ink .trr-faq__item summary:focus-visible {
	color: var(--wp--preset--color--soft-green, #8FD9B6);
}


/* ==========================================================================
   35. CLIENT ALIGNMENT CORRECTIONS
   ========================================================================== */

/* --- 35.1 Record strip aligns with the hero copy above it ----------------
   The hero's content sits inside the transcript rail, so its copy starts
   ~101px in while every section below started at the container edge. The
   "RECORD" label therefore sat left of the Book Now button directly above it.
   The strip now shares the hero's content edge. */

@media (min-width: 1025px) {
	.trr-site .trr-strip__row {
		margin-left: calc(64px + clamp(24px, 2.6vw, 46px));
	}
}

/* --- 35.2 Review attributions align across the three records -------------
   Quotes run to two or three lines, so the attributions sat at different
   heights. Each record is now a column with the attribution pushed to the
   bottom, which lines all three up regardless of quote length. */

.trr-site .trr-record {
	display: flex;
	flex-direction: column;
}

.trr-site .trr-record__q {
	flex: 1;
}

.trr-site .trr-record__by {
	margin-top: auto;
	padding-top: 24px;
}

/* --- 35.4 Inner-page hero header aligns with the sections below ----------
   The page hero indented its content 36px for a left rule, so the Services
   intro header sat right of the service rows underneath. The rule now sits in
   the gutter and the content starts on the same edge as everything else. */

.trr-site .trr-pagehero__inner {
	position: relative;
	padding-left: 0;
	border-left: 0;
}

.trr-site .trr-pagehero__inner::before {
	content: "";
	position: absolute;
	left: clamp(-40px, -2.4vw, -24px);
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--trr-doc-rule);
}

@media (max-width: 1024px) {
	.trr-site .trr-pagehero__inner::before { display: none; }
}


/* ==========================================================================
   36. CLIENT-MARKED SPACING CORRECTIONS
   ========================================================================== */

/* --- 36.1 Inner-page hero: no dead space above the lede ------------------
   The right column was bottom-aligned, so with a three-line heading the lede
   started 94px below the eyebrow with nothing in between. Both columns now
   start together and the actions sit under the lede. */

@media (min-width: 1025px) {
	.trr-site .trr-pagehero__inner {
		align-items: start;
	}

	/* The lede starts on the eyebrow line, not the heading line — otherwise the
	   whole eyebrow row is empty space in the right-hand column. */
	.trr-site .trr-pagehero__lede {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		padding-bottom: 0;
		margin-top: 0;
	}

	.trr-site .trr-pagehero__actions {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin-top: clamp(22px, 2.2vw, 32px);
	}
}

/* --- 36.2 Homepage hero: close the gap before the record strip -----------
   The hero's 76px bottom padding sat directly above the ink band with nothing
   in it. The band's own top padding provides the separation. */

@media (min-width: 1025px) {
	.trr-site .trr-rec__rail,
	.trr-site .trr-rec__meta,
	.trr-site .trr-rec__body {
		padding-block: 104px 40px;
	}
}

@media (max-width: 1024px) {
	.trr-site .trr-rec__body { padding-bottom: 46px; }
	.trr-site .trr-rec__rail { padding-bottom: 46px; }
}

/* --- 36.3 Client records arrive together ---------------------------------
   Belt to the braces in reveal.js: no transition delay on the records, so a
   partially-revealed row can never look misaligned. */

.trr-js .trr-site .trr-record {
	transition-delay: 0s !important;
}
.trr-site .trr-ink .trr-form__success-heading { color: var(--wp--preset--color--primary-action, #118058); }