/**
 * Tyre Service — theme styles.
 *
 * The world is UK Worboys road signage. Everything below is derived from how a
 * real direction sign is built: a coloured ground, a border inset from the panel
 * edge with the ground still visible outside it, generous corner radii, one
 * typeface, destinations left and distances right, and a tapered stub arrow.
 *
 * Sign classes carry meaning and are not decorative:
 *   blue   the network — where we go, the opening statement
 *   white  non-primary — local detail, the reference material
 *   green  primary route — what is confirmed and included
 *   yellow roadworks — the urgent act, reserved for the phone
 *   red    prohibition — what we refuse to do
 *
 * Structure: tokens, reset and browser surfaces, sign primitives, then one block
 * per section. Plain CSS with custom properties, no build step.
 */

/* ========================================================= Typefaces */

/* Self-hosted variable woff2, 68KB for the pair. The whole page is set in one
   family, so the face is the design rather than an enhancement that may arrive
   late on a roadside connection. */
@font-face {
	font-family: 'Overpass';
	src: url('../fonts/overpass-var.woff2') format('woff2-variations'),
	     url('../fonts/overpass-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Overpass Mono';
	src: url('../fonts/overpass-mono-var.woff2') format('woff2-variations'),
	     url('../fonts/overpass-mono-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================================== Tokens */

:root {
	/* Sign faces. */
	--ts-blue:       #0b4da2;
	--ts-blue-deep:  #073a7c;
	--ts-blue-hi:    #1560bd;
	--ts-green:      #00693e;
	--ts-green-deep: #005232;
	--ts-yellow:     #ffc20e;
	--ts-yellow-hi:  #ffd043;
	--ts-red:        #c8102e;
	--ts-white:      #ffffff;
	--ts-black:      #1a1a18;

	/* Ground between signs: road surface, not paper. */
	--ts-grey:       #e7e9ec;
	--ts-grey-deep:  #d3d7dd;
	--ts-deep:       #073a7c;

	/* Secondary text is tinted from its own ground, never neutral grey. */
	--ts-on-blue:    #cfdff2;
	--ts-on-white:   #3f5a76;
	--ts-on-green:   #cdeadd;
	--ts-on-deep:    #a9c4e4;

	/* Sign geometry. Radii and border widths are the system's constants. */
	--ts-r-lg:       22px;
	--ts-r:          14px;
	--ts-r-sm:       8px;
	--ts-border:     4px;
	--ts-inset:      10px;

	--ts-face:       'Overpass', 'Helvetica Neue', Arial, sans-serif;
	--ts-mono:       'Overpass Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--ts-gutter:     clamp(1.15rem, 4vw, 2.75rem);
	--ts-section-y:  clamp(4rem, 8.5vw, 7.5rem);
	--ts-header-h:   68px;

	/* Signs do not animate. The only authored motion is the hero's one-time
	   read, plus the physical press of a control. Everything is exponential
	   ease-out from an already-visible default. */
	--ts-ease:       cubic-bezier(0.16, 1, 0.3, 1);
	--ts-fast:       0.14s;
	--ts-med:        0.34s;

	--ts-shadow:     0 10px 24px -14px rgba(3, 26, 54, 0.55);
	--ts-shadow-lg:  0 22px 48px -22px rgba(3, 26, 54, 0.68);
}

/* =============================================================== Reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ts-header-h) + 14px);
}

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

body {
	margin: 0;
	background: var(--ts-grey);
	color: var(--ts-black);
	font-family: var(--ts-face);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.ts-nav-open { overflow: hidden; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--ts-face);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.022em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

/* ------------------------------------------------- Browser surfaces */
/* The parts of the page nobody draws still belong to the design system. */

::selection { background: var(--ts-yellow); color: var(--ts-black); }

html { scrollbar-color: var(--ts-blue) var(--ts-grey-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ts-grey-deep); }
::-webkit-scrollbar-thumb { background: var(--ts-blue); border: 3px solid var(--ts-grey-deep); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ts-blue-hi); }

input, textarea { caret-color: var(--ts-blue); }

/* A focus ring that survives every ground the page uses: yellow core, dark halo.
   On blue the halo disappears and the yellow reads; on yellow the halo reads. */
:focus-visible {
	outline: 3px solid var(--ts-yellow);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(7, 34, 66, 0.75);
	/* No border-radius here: it would override the real corner of whatever is
	   focused, snapping 22px sign panels down to 8px the moment a keyboard
	   reaches them. The outline follows the element's own radius. */
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 2px; }

/* Measurements are set as measurements: tabular, mono, never re-flowing. */
.ts-mono {
	font-family: var(--ts-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

.ts-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.85rem 1.25rem;
	background: var(--ts-yellow);
	color: var(--ts-black);
	font-weight: 900;
	border-radius: 0 0 var(--ts-r-sm) 0;
}
.ts-skip:focus { left: 0; top: 0; }

/* ======================================================= Sign primitives */

.ts-container {
	width: min(1200px, 100%);
	margin-inline: auto;
	padding-inline: var(--ts-gutter);
}
.ts-container--narrow { width: min(850px, 100%); }

.ts-pic { width: 26px; height: 26px; flex: none; }
.ts-pic--sm { width: 19px; height: 19px; }
.ts-pic--lg { width: 40px; height: 40px; }

.ts-arrow { width: 34px; height: 26px; flex: none; }
.ts-arrow--sm { width: 25px; height: 19px; }

.ts-accent { color: var(--ts-yellow); }
.ts-section--white .ts-accent,
.ts-section--grey .ts-accent { color: var(--ts-blue); }
/* The hero heading gives up the accent so the only yellow above the fold is the
   answer column and the plate you are meant to press. */
.ts-hero .ts-accent { color: inherit; }

.ts-stars { display: inline-flex; gap: 3px; color: var(--ts-blue); }
.ts-stars svg { width: 17px; height: 17px; }
.ts-section--blue .ts-stars,
.ts-section--deep .ts-stars { color: var(--ts-yellow); }

/**
 * The sign panel.
 *
 * A real sign is a coloured plate with a border set in from its edge, so a band
 * of the plate colour shows outside the border. That inset is the single detail
 * that makes this read as signage rather than as a card with a border, so it is
 * built into the primitive rather than left to each section.
 */
.ts-sign {
	position: relative;
	padding: var(--ts-inset);
	border-radius: var(--ts-r-lg);
	background: var(--ts-blue);
	color: var(--ts-white);
}
.ts-sign__face {
	border: var(--ts-border) solid currentColor;
	border-radius: var(--ts-r);
	padding: clamp(1.2rem, 3vw, 2.1rem);
}
.ts-sign--white { background: var(--ts-white); color: var(--ts-black); }
.ts-sign--green { background: var(--ts-green); color: var(--ts-white); }
.ts-sign--yellow { background: var(--ts-yellow); color: var(--ts-black); }

/* Route patch: the small rounded plate carrying a road number. */
.ts-patch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.1em;
	padding: 0.18em 0.5em;
	border-radius: var(--ts-r-sm);
	background: var(--ts-white);
	color: var(--ts-blue);
	font-family: var(--ts-mono);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.4;
}
.ts-patch--yellow { background: var(--ts-yellow); color: var(--ts-black); }
.ts-patch--green { background: var(--ts-green); color: var(--ts-white); }
.ts-patch--outline {
	background: transparent;
	color: currentColor;
	box-shadow: inset 0 0 0 2px currentColor;
}

/**
 * The destination stack.
 *
 * The core composition of every direction sign: destination left, distance
 * right, hairline rule between. Prices, response times and coverage all reduce
 * to this shape, which is why the page needs almost no cards.
 */
.ts-stack { display: grid; }
.ts-stack__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.6rem 1.4rem;
	padding: 0.82rem 0;
	border-top: 2px solid currentColor;
}
.ts-stack__row:first-child { border-top: 0; padding-top: 0; }
.ts-stack__row:last-child { padding-bottom: 0; }
.ts-stack__dest {
	font-size: clamp(1.06rem, 2.1vw, 1.32rem);
	font-weight: 600;
	letter-spacing: -0.012em;
}
.ts-stack__dist {
	font-family: var(--ts-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.06rem, 2.1vw, 1.32rem);
	font-weight: 700;
	white-space: nowrap;
}
.ts-stack__note {
	grid-column: 1 / -1;
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	opacity: 0.82;
}

/* Controls, built as sign plates. Every button is a plate that presses. */

.ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 0.9rem 1.5rem;
	border: 3px solid transparent;
	border-radius: var(--ts-r);
	background: var(--ts-white);
	color: var(--ts-blue);
	font-family: var(--ts-face);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -0.012em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--ts-shadow);
	transition:
		transform var(--ts-fast) var(--ts-ease),
		box-shadow var(--ts-fast) var(--ts-ease),
		background-color var(--ts-fast) var(--ts-ease),
		color var(--ts-fast) var(--ts-ease);
}
.ts-btn:hover { transform: translateY(-2px); box-shadow: var(--ts-shadow-lg); }
.ts-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px -8px rgba(3, 26, 54, 0.6); transition-duration: 0.06s; }
.ts-btn[disabled] { opacity: 0.55; pointer-events: none; }
.ts-btn--block { display: flex; width: 100%; }

/* The urgent act. Roadworks yellow appears nowhere else on the page. */
.ts-btn--call {
	background: var(--ts-yellow);
	color: var(--ts-black);
	font-weight: 900;
	font-size: clamp(1.3rem, 3.2vw, 2.15rem);
	padding: 1.05rem 1.9rem;
	letter-spacing: -0.03em;
}
.ts-btn--call:hover { background: var(--ts-yellow-hi); }
.ts-btn--call .ts-pic { width: 34px; height: 34px; }

.ts-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
	box-shadow: none;
}
.ts-btn--outline:hover { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
.ts-section--white .ts-btn--outline,
.ts-section--grey .ts-btn--outline { border-color: var(--ts-blue); color: var(--ts-blue); }
.ts-section--white .ts-btn--outline:hover,
.ts-section--grey .ts-btn--outline:hover { background: rgba(11, 77, 162, 0.09); }

/* Section grounds. */

.ts-section { padding-block: var(--ts-section-y); }
.ts-section--grey { background: var(--ts-grey); }
.ts-section--white { background: var(--ts-white); }
.ts-section--blue { background: var(--ts-blue); color: var(--ts-white); }
.ts-section--green { background: var(--ts-green); color: var(--ts-white); }
.ts-section--yellow { background: var(--ts-yellow); color: var(--ts-black); }
.ts-section--deep { background: var(--ts-deep); color: var(--ts-white); }

/* Section heads. No kicker: the heading carries its own weight. */

.ts-head { margin-bottom: clamp(2rem, 4.5vw, 3.2rem); max-width: 40rem; }
.ts-head--center { margin-inline: auto; text-align: center; }

.ts-h2 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
}

.ts-sub {
	margin: 0.9rem 0 0;
	font-size: clamp(1.02rem, 1.7vw, 1.16rem);
	max-width: 34em;
	color: var(--ts-on-white);
}
.ts-section--blue .ts-sub { color: var(--ts-on-blue); }
.ts-section--green .ts-sub { color: var(--ts-on-green); }
.ts-section--deep .ts-sub { color: var(--ts-on-deep); }
.ts-section--yellow .ts-sub { color: #4a3a00; }

.ts-prose { max-width: 68ch; color: var(--ts-on-white); }
.ts-prose p { margin-bottom: 1.05rem; }
.ts-prose a { color: var(--ts-blue); font-weight: 600; }

/* The plus/minus marker on every <details>. */

.ts-plus { position: relative; flex: none; width: 20px; height: 20px; }
.ts-plus::before,
.ts-plus::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform var(--ts-med) var(--ts-ease), opacity var(--ts-fast) var(--ts-ease);
}
.ts-plus::after { transform: translateY(-50%) rotate(90deg); }
details[open] .ts-plus::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* =============================================================== Header */

/* The gantry: an overhead blue panel the page passes under. */
.ts-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ts-blue);
	color: var(--ts-white);
	border-bottom: 4px solid var(--ts-blue-deep);
	transition: box-shadow var(--ts-med) var(--ts-ease);
}
.ts-header.is-stuck { box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.85); }

.ts-header__inner {
	width: min(1200px, 100%);
	margin-inline: auto;
	padding: 0 var(--ts-gutter);
	min-height: var(--ts-header-h);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.4rem);
}

.ts-brand { text-decoration: none; flex: none; }

.ts-logo { display: inline-flex; align-items: baseline; gap: 0.34rem; }
.ts-logo__first,
.ts-logo__last {
	font-family: var(--ts-face);
	font-size: 1.34rem;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	text-transform: uppercase;
}
.ts-logo__last { color: var(--ts-yellow); }
.ts-section--yellow .ts-logo__last { color: var(--ts-blue); }

.ts-nav {
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 2vw, 1.7rem);
	margin-right: auto;
	font-size: 1.01rem;
	font-weight: 600;
}
.ts-nav a {
	position: relative;
	color: var(--ts-white);
	text-decoration: none;
	padding: 0.35rem 0;
	transition: color var(--ts-fast) var(--ts-ease);
}
.ts-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: var(--ts-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ts-med) var(--ts-ease);
}
.ts-nav a:hover::after { transform: scaleX(1); }

.ts-header__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	padding: 0.42rem 0.95rem 0.42rem 0.7rem;
	border-radius: var(--ts-r-sm);
	background: var(--ts-yellow);
	color: var(--ts-black);
	text-decoration: none;
	transition: background-color var(--ts-fast) var(--ts-ease), transform var(--ts-fast) var(--ts-ease);
}
.ts-header__tel:hover { background: var(--ts-yellow-hi); transform: translateY(-1px); }
.ts-header__tel:active { transform: translateY(1px); }
.ts-header__tel span { display: flex; flex-direction: column; line-height: 1.15; }
.ts-header__tel small {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #5a4400;
}
.ts-header__tel strong {
	font-family: var(--ts-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.02rem;
	font-weight: 700;
}

.ts-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 44px;
	padding: 0 10px;
	border: 3px solid var(--ts-white);
	border-radius: var(--ts-r-sm);
	background: transparent;
	cursor: pointer;
}
.ts-burger span {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--ts-white);
	transition: transform var(--ts-med) var(--ts-ease), opacity var(--ts-fast) var(--ts-ease);
}
.ts-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ts-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ts-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.ts-mobile {
	border-top: 4px solid var(--ts-blue-deep);
	background: var(--ts-blue);
	padding: 0.6rem var(--ts-gutter) 1.5rem;
}
.ts-mobile__nav { display: flex; flex-direction: column; font-size: 1.2rem; font-weight: 700; }
.ts-mobile__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95rem 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.28);
	color: var(--ts-white);
	text-decoration: none;
}
.ts-mobile__actions { display: grid; gap: 0.7rem; margin-top: 1.3rem; }

@media (max-width: 940px) {
	.ts-nav { display: none; }
	.ts-burger { display: flex; }
}
@media (max-width: 560px) {
	.ts-header__tel span { display: none; }
	.ts-header__tel { padding: 0.6rem; }
}
@media (min-width: 941px) {
	.ts-mobile { display: none !important; }
}

/* ================================================================= Hero */

.ts-hero {
	position: relative;
	background: var(--ts-blue);
	color: var(--ts-white);
	padding-block: clamp(1.5rem, 3vw, 2.4rem) clamp(2.4rem, 4.5vw, 3.4rem);
	overflow: hidden;
}
.ts-hero--photo .ts-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
}

.ts-hero__inner { position: relative; }

/* The sign face itself. */
.ts-hero__sign {
	padding: var(--ts-inset);
	border-radius: clamp(var(--ts-r), 2.2vw, 30px);
	background: var(--ts-blue);
	box-shadow: var(--ts-shadow-lg);
}
.ts-hero__face {
	border: clamp(4px, 0.6vw, 7px) solid var(--ts-white);
	border-radius: clamp(10px, 1.6vw, 22px);
	padding: clamp(1.25rem, 2.6vw, 2.1rem);
}

.ts-hero__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
}
.ts-hero__routes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }

.ts-hero__title {
	font-size: clamp(2.5rem, 7.4vw, 4.8rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	margin: 0;
}
.ts-hero__sub {
	margin: clamp(0.8rem, 1.5vw, 1.1rem) 0 0;
	max-width: 30em;
	font-size: clamp(1.06rem, 2vw, 1.3rem);
	color: var(--ts-on-blue);
}

/* Destination stack inside the hero sign. */
.ts-hero__stack {
	margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
	padding-top: clamp(0.9rem, 1.8vw, 1.3rem);
	border-top: 3px solid var(--ts-white);
}
.ts-hero__stack .ts-stack__row { border-top-width: 2px; padding-block: 0.6rem; }
.ts-hero__stack .ts-stack__row:first-child { border-top: 0; }
.ts-hero__stack .ts-stack__dest { font-weight: 600; }
.ts-hero__stack .ts-stack__dist { color: var(--ts-yellow); font-size: clamp(1.2rem, 2.6vw, 1.7rem); }

.ts-hero__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
}
.ts-hero__act .ts-arrow { color: var(--ts-yellow); width: 42px; height: 32px; }

@media (max-width: 620px) {
	.ts-hero__act { flex-direction: column; align-items: stretch; gap: 0.5rem; }
	.ts-hero__act .ts-arrow { align-self: center; transform: rotate(90deg); }
	.ts-hero__act .ts-btn { width: 100%; }
}

.ts-hero__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.6rem;
	margin-top: clamp(0.9rem, 1.8vw, 1.3rem);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ts-on-blue);
}
.ts-hero__ticks li { display: flex; align-items: center; gap: 0.5rem; }
.ts-hero__ticks .ts-pic { color: var(--ts-white); }

/* The one authored moment: the sign is read on arrival — rules draw left to
   right, then the arrow and the yellow plate arrive. Content is visible by
   default; only the reveal of the rules and the arrow's travel are animated. */
@media (prefers-reduced-motion: no-preference) {
	.ts-hero__stack .ts-stack__row { animation: ts-rule 0.62s var(--ts-ease) backwards; }
	.ts-hero__stack .ts-stack__row:nth-child(1) { animation-delay: 0.10s; }
	.ts-hero__stack .ts-stack__row:nth-child(2) { animation-delay: 0.20s; }
	.ts-hero__stack .ts-stack__row:nth-child(3) { animation-delay: 0.30s; }
	.ts-hero__stack .ts-stack__row:nth-child(4) { animation-delay: 0.40s; }
	.ts-hero__act { animation: ts-arrive 0.7s var(--ts-ease) 0.5s backwards; }
}
@keyframes ts-rule {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}
@keyframes ts-arrive {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ======================================================== Trust plates */

.ts-trust { background: var(--ts-blue); color: var(--ts-white); padding-bottom: var(--ts-section-y); }
.ts-trust__list {
	display: grid;
	/* Two explicit columns, never auto-fit: four items across three tracks
	   leaves a stub rule under the fourth, and rules that follow each item's own
	   box land at different heights. Two columns pair the items into equal-height
	   grid rows, so every rule aligns and the block closes. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 4vw, 3rem);
	border-top: 2px solid rgba(255, 255, 255, 0.45);
}
.ts-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
}
.ts-trust__item .ts-pic { color: var(--ts-white); margin-top: 0.15rem; }
.ts-trust__copy { display: flex; flex-direction: column; line-height: 1.32; }
.ts-trust__copy strong { font-size: 1.08rem; font-weight: 700; }

@media (max-width: 700px) {
	.ts-trust__list { grid-template-columns: 1fr; }
}
.ts-trust__copy small { font-size: 0.93rem; color: var(--ts-on-blue); margin-top: 0.15rem; }

/* Prohibition plates: what we refuse, stated as loudly as what we sell. */
.ts-trust__refuse {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.9rem;
	margin-top: 0.9rem;
}
.ts-refuse {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.2rem;
	border-radius: var(--ts-r);
	background: var(--ts-white);
	color: var(--ts-black);
}
.ts-refuse .ts-pic { color: var(--ts-red); flex: none; }
.ts-refuse strong { display: block; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.ts-refuse small { display: block; font-size: 0.92rem; color: var(--ts-on-white); margin-top: 0.1rem; }

/* ============================================================= Process */

.ts-process__steps { border-top: 3px solid var(--ts-blue); }
.ts-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.2rem 1.3rem;
	padding: clamp(1rem, 2.2vw, 1.5rem) 0;
	border-bottom: 3px solid var(--ts-blue);
}
.ts-step .ts-pic { grid-row: 1 / 3; grid-column: 1; color: var(--ts-blue); }
.ts-step__title { grid-column: 2; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; }
.ts-step__text { grid-column: 2; margin: 0; font-size: 1rem; color: var(--ts-on-white); max-width: 60ch; }
/* The stub arrow finally does navigational work: it points from each stage to
   the next, and the last stage has nothing left to point at. */
.ts-step .ts-arrow { grid-row: 1 / 3; grid-column: 3; color: var(--ts-blue); }

/* ============================================================ Services */

.ts-services__stack { border-top: 3px solid var(--ts-blue); }
.ts-svc {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 0.9rem 1.3rem;
	padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
	border-bottom: 3px solid var(--ts-blue);
}
.ts-svc__pic { color: var(--ts-blue); }
.ts-svc__body { min-width: 0; }
.ts-svc__title { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 700; }
.ts-svc__text { margin: 0.4rem 0 0; color: var(--ts-on-white); max-width: 52ch; }
.ts-svc__bullets { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 0.85rem; }
.ts-svc__bullets li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.24rem 0.6rem;
	border-radius: var(--ts-r-sm);
	background: rgba(11, 77, 162, 0.09);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ts-blue);
}
.ts-svc__act { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.ts-svc__media { grid-column: 1 / -1; border-radius: var(--ts-r); overflow: hidden; }
.ts-svc__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

@media (max-width: 700px) {
	.ts-svc { grid-template-columns: auto 1fr; }
	.ts-svc__act { grid-column: 1 / -1; align-items: stretch; }
}

/* Smaller jobs: a plain destination stack, not a card grid. */
.ts-services__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0 2rem;
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.ts-tile {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.75rem;
	padding: 0.95rem 0;
	border-top: 2px solid var(--ts-grey-deep);
}
.ts-tile .ts-pic { grid-row: 1 / 3; color: var(--ts-blue); margin-top: 0.15rem; }
.ts-tile__title { font-size: 1.05rem; font-weight: 700; }
.ts-tile__text { margin: 0; font-size: 0.95rem; color: var(--ts-on-white); }

/* ============================================================= Pricing */

/* Primary-route green: this section is the confirmation of what is included. */
.ts-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
	gap: 1rem;
}
.ts-price {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.5rem 1.6rem;
	border: 3px solid var(--ts-white);
	border-radius: var(--ts-r);
}
.ts-price--featured { background: var(--ts-white); color: var(--ts-green); border-color: var(--ts-white); }
.ts-price__name { font-size: 1.24rem; font-weight: 700; }
.ts-price__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0; }
/* Solid type is a published price we will honour; hairline is an estimate that
   depends on the tyre. The honesty is legible in the weight. */
.ts-price__figure strong {
	font-family: var(--ts-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 4.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	word-spacing: -0.2em;
}
.ts-price--estimate .ts-price__figure strong { font-weight: 400; }
.ts-price__figure small { font-size: 0.92rem; opacity: 0.85; }
.ts-price__text { margin: 0.35rem 0 0; font-size: 0.98rem; color: var(--ts-on-green); }
.ts-price--featured .ts-price__text { color: var(--ts-on-white); }
.ts-price__features { display: grid; gap: 0.45rem; margin: 0.9rem 0 1.2rem; padding-top: 1rem; border-top: 2px solid currentColor; }
.ts-price__features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.97rem; }
.ts-price__features .ts-pic { margin-top: 0.16rem; }
.ts-price .ts-btn { margin-top: auto; }
.ts-pricing__note {
	max-width: 62ch;
	margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
	font-size: 0.95rem;
	color: var(--ts-on-green);
}

/* ==================================================== About / sidewall */

.ts-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 980px) { .ts-about__grid { grid-template-columns: 1fr; } }

.ts-about__points { display: grid; gap: 0; margin-top: 2rem; border-top: 2px solid var(--ts-grey-deep); }
.ts-about__point {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.85rem;
	padding: 1rem 0;
	border-bottom: 2px solid var(--ts-grey-deep);
}
.ts-about__point .ts-pic { grid-row: 1 / 3; color: var(--ts-blue); margin-top: 0.15rem; }
.ts-about__point-title { font-size: 1.08rem; font-weight: 700; }
.ts-about__point p { margin: 0; font-size: 0.97rem; color: var(--ts-on-white); }

/* The sidewall decoder, built as a sign that explains its own notation. */
.ts-sidewall {
	position: sticky;
	top: calc(var(--ts-header-h) + 22px);
	padding: var(--ts-inset);
	border-radius: var(--ts-r-lg);
	background: var(--ts-blue);
	color: var(--ts-white);
	box-shadow: var(--ts-shadow);
}
@media (max-width: 980px) { .ts-sidewall { position: static; } }
.ts-sidewall__face { border: 3px solid var(--ts-white); border-radius: var(--ts-r); padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.ts-sidewall__title { font-size: 1.32rem; font-weight: 700; }
.ts-sidewall__intro { margin: 0.55rem 0 0; font-size: 0.98rem; color: var(--ts-on-blue); }

.ts-sidewall__code {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 1.2rem 0 1.1rem;
	padding: 0.75rem 0.85rem;
	border-radius: var(--ts-r-sm);
	background: var(--ts-white);
	font-family: var(--ts-mono);
	font-size: clamp(1.1rem, 2.8vw, 1.5rem);
	font-weight: 700;
	color: var(--ts-blue);
}
.ts-sidewall__seg {
	padding: 0.06rem 0.3rem;
	border-radius: 5px;
	transition: background-color var(--ts-fast) var(--ts-ease), color var(--ts-fast) var(--ts-ease);
}
.ts-sidewall__seg.is-lit { background: var(--ts-yellow); color: var(--ts-black); }

.ts-sidewall__key { display: grid; }
.ts-sidewall__row {
	display: grid;
	grid-template-columns: 4.2rem 1fr;
	gap: 0.15rem 0.8rem;
	padding: 0.6rem 0;
	border-top: 2px solid rgba(255, 255, 255, 0.35);
}
.ts-sidewall__row dt { display: contents; }
.ts-sidewall__chip {
	grid-row: 1 / 3;
	align-self: start;
	padding: 0.1rem 0.35rem;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.16);
	color: var(--ts-yellow);
	font-family: var(--ts-mono);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
}
.ts-sidewall__label { font-weight: 700; font-size: 1rem; }
.ts-sidewall__row dd { margin: 0; font-size: 0.93rem; color: var(--ts-on-blue); }

.ts-sidewall__note {
	display: flex;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 2px solid rgba(255, 255, 255, 0.35);
	font-size: 0.94rem;
	color: var(--ts-on-blue);
}
.ts-sidewall__note .ts-pic { flex: none; color: var(--ts-white); }

/* ============================================================ Coverage */

.ts-coverage__body { max-width: 44em; margin: 0 0 1.8rem; color: var(--ts-on-blue); }

/* Popular towns as route patches on the blue field. */
.ts-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ts-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.32rem 0.75rem;
	border-radius: var(--ts-r-sm);
	background: var(--ts-white);
	color: var(--ts-blue);
	font-size: 0.97rem;
	font-weight: 700;
}
.ts-chips--brands .ts-chip { background: rgba(11, 77, 162, 0.09); color: var(--ts-blue); }

.ts-coverage__regions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 0.7rem;
	align-items: start;
	margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}
.ts-region { border: 3px solid var(--ts-white); border-radius: var(--ts-r); overflow: hidden; }
.ts-region summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 1.1rem;
	cursor: pointer;
	font-size: 1.06rem;
	font-weight: 700;
	list-style: none;
}
.ts-region summary::-webkit-details-marker { display: none; }
.ts-region[open] summary { background: var(--ts-white); color: var(--ts-blue); }
.ts-region__areas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 0.3rem 1rem;
	padding: 0.9rem 1.1rem 1.1rem;
	font-size: 0.95rem;
	color: var(--ts-on-blue);
}

.ts-coverage__foot { margin-top: 1.8rem; color: var(--ts-on-blue); }
.ts-coverage__foot a { color: var(--ts-yellow); font-weight: 700; }

/* ============================================================== Brands */

.ts-brands__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 1rem; }
.ts-tier { padding: 1.4rem 1.4rem 1.5rem; border: 3px solid var(--ts-blue); border-radius: var(--ts-r); }
.ts-tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--ts-grey-deep); }
.ts-tier__name { font-size: 1.2rem; font-weight: 700; }
.ts-tier__price { margin: 0; font-family: var(--ts-mono); font-size: 0.92rem; font-weight: 700; color: var(--ts-blue); white-space: nowrap; }
.ts-tier__text { margin: 0.8rem 0 1rem; font-size: 0.96rem; color: var(--ts-on-white); }
.ts-brands__note { max-width: 62ch; margin: 1.8rem 0 0; font-size: 0.95rem; color: var(--ts-on-white); }

/* ============================================================= Reviews */

.ts-reviews__badge { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 2rem; font-size: 1.02rem; color: var(--ts-on-white); }
.ts-reviews__badge strong { font-family: var(--ts-mono); font-size: 1.4rem; font-weight: 700; color: var(--ts-black); }

.ts-reviews__grid { border-top: 2px solid var(--ts-grey-deep); }
.ts-review {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
	border-bottom: 2px solid var(--ts-grey-deep);
}
.ts-review .ts-stars { grid-column: 1; align-self: center; }
.ts-review blockquote { grid-column: 1; margin: 0; max-width: 68ch; font-size: 1.02rem; }
/* The attribution sits in the right column like a distance on a sign. */
.ts-review figcaption {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	align-self: start;
}
.ts-review__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--ts-r-sm);
	background: var(--ts-blue);
	color: var(--ts-white);
	font-weight: 900;
}
.ts-review__who { display: flex; flex-direction: column; line-height: 1.3; }
.ts-review__who strong { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.ts-review__who small { font-size: 0.86rem; color: var(--ts-on-white); white-space: nowrap; }

@media (max-width: 620px) {
	.ts-review { grid-template-columns: 1fr; }
	.ts-review figcaption { grid-column: 1; grid-row: auto; }
}

/* ================================================================= FAQ */

.ts-faq__list { display: grid; gap: 0.6rem; }
.ts-faq__item { border: 3px solid var(--ts-grey-deep); border-radius: var(--ts-r); background: var(--ts-white); transition: border-color var(--ts-med) var(--ts-ease); }
.ts-faq__item[open] { border-color: var(--ts-blue); }
.ts-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.05rem 1.25rem;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 700;
	list-style: none;
}
.ts-faq__item summary::-webkit-details-marker { display: none; }
.ts-faq__item summary:hover { color: var(--ts-blue); }
.ts-faq__answer { padding: 0 1.25rem 1.2rem; color: var(--ts-on-white); max-width: 70ch; }
.ts-faq__foot { margin-top: 1.8rem; color: var(--ts-on-white); }
.ts-faq__foot a { color: var(--ts-blue); font-weight: 700; }

/* =========================================================== CTA band */

/* Roadworks yellow: the page's one urgent register. */
.ts-band { padding-block: clamp(2.6rem, 6vw, 4.2rem); background: var(--ts-yellow); color: var(--ts-black); }
.ts-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.ts-band__copy { max-width: 36rem; }
.ts-band__title { font-size: clamp(1.8rem, 4.4vw, 2.8rem); font-weight: 900; letter-spacing: -0.035em; text-transform: uppercase; }
.ts-band__text { margin: 0.7rem 0 0; color: #4a3a00; }
.ts-band__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ts-band .ts-btn--call { background: var(--ts-black); color: var(--ts-yellow); }
.ts-band .ts-btn--call:hover { background: #000; }
.ts-band .ts-btn--outline { border-color: var(--ts-black); }
.ts-band .ts-btn--outline:hover { background: rgba(0, 0, 0, 0.09); }

/* ========================================================= Quote form */

.ts-contact__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .ts-contact__grid { grid-template-columns: 1fr; } }

.ts-form { padding: clamp(1.3rem, 3vw, 2rem); border: 3px solid var(--ts-white); border-radius: var(--ts-r); }
.ts-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .ts-form__row { grid-template-columns: 1fr; } }

.ts-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.05rem; }
.ts-field label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.98rem; font-weight: 700; }
.ts-req { color: var(--ts-yellow); }
.ts-opt { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-on-deep); }

.ts-field input,
.ts-field textarea {
	width: 100%;
	padding: 0.78rem 0.9rem;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--ts-r-sm);
	background: rgba(255, 255, 255, 0.06);
	color: var(--ts-white);
	transition: border-color var(--ts-fast) var(--ts-ease), background-color var(--ts-fast) var(--ts-ease);
}
.ts-field input::placeholder,
.ts-field textarea::placeholder { color: #b8c3d1; }
.ts-field input:focus,
.ts-field textarea:focus { border-color: var(--ts-yellow); background: rgba(255, 255, 255, 0.11); outline: none; }
.ts-field textarea { resize: vertical; min-height: 6.5rem; }

.ts-field__error:empty { display: none; }
.ts-field__error { font-size: 0.88rem; font-weight: 600; color: #ffb3a7; }
.ts-field--invalid input,
.ts-field--invalid textarea { border-color: #ff7a63; }

.ts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ts-form.is-sending { opacity: 0.7; }
.ts-form.is-sent .ts-field,
.ts-form.is-sent button[type="submit"] { display: none; }

.ts-form__status { margin: 1rem 0 0; padding: 0.9rem 1rem; border-radius: var(--ts-r-sm); font-size: 0.98rem; font-weight: 600; }
.ts-form__status.is-ok { background: var(--ts-green); color: var(--ts-white); }
.ts-form__status.is-bad { background: var(--ts-red); color: var(--ts-white); }
.ts-form__privacy { margin: 1rem 0 0; font-size: 0.88rem; color: var(--ts-on-deep); }

.ts-contact__side { display: grid; gap: 0.9rem; }
.ts-contact__call {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.3rem 1.4rem;
	border-radius: var(--ts-r);
	background: var(--ts-yellow);
	color: var(--ts-black);
	text-decoration: none;
	transition: transform var(--ts-fast) var(--ts-ease), background-color var(--ts-fast) var(--ts-ease);
}
.ts-contact__call:hover { transform: translateY(-2px); background: var(--ts-yellow-hi); }
.ts-contact__call:active { transform: translateY(1px); }
.ts-contact__call .ts-pic { flex: none; }
.ts-contact__call span { display: flex; flex-direction: column; line-height: 1.2; }
.ts-contact__call small { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5a4400; }
.ts-contact__call strong { font-family: var(--ts-mono); font-variant-numeric: tabular-nums; font-size: 1.36rem; font-weight: 700; }

.ts-contact__details { display: grid; }
.ts-contact__details li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.8rem;
	padding: 0.85rem 0;
	border-top: 2px solid rgba(255, 255, 255, 0.28);
}
.ts-contact__details .ts-pic { grid-row: 1 / 3; color: var(--ts-white); margin-top: 0.2rem; }
.ts-contact__details small { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ts-on-deep); }
.ts-contact__details strong { font-size: 1.04rem; font-weight: 700; }

/* ============================================================== Footer */

.ts-footer { padding-block: clamp(3rem, 6vw, 4.2rem) 2rem; background: var(--ts-deep); color: var(--ts-on-deep); font-size: 0.97rem; }
.ts-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 900px) { .ts-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ts-footer__grid { grid-template-columns: 1fr; } }

.ts-footer__about .ts-logo { color: var(--ts-white); margin-bottom: 1.1rem; }
.ts-footer__about p { margin-bottom: 0.7rem; }
.ts-footer__rating { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-size: 0.92rem; }

.ts-footer__title { margin-bottom: 0.85rem; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ts-white); }
.ts-footer__links { display: grid; gap: 0.5rem; }
.ts-footer__links a { text-decoration: none; transition: color var(--ts-fast) var(--ts-ease); }
.ts-footer__links a:hover { color: var(--ts-yellow); }
.ts-footer__address { margin-top: 1rem; font-style: normal; font-size: 0.92rem; }

.ts-footer__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.4rem;
	border-top: 2px solid rgba(255, 255, 255, 0.16);
	font-size: 0.86rem;
}
.ts-footer__bar p { margin: 0; }

/* ================================================ Mobile gantry + top */

/* The overhead gantry: fixed at the bottom where thumbs are, built as a blue
   panel carrying a yellow plate, the same grammar as the header. */
.ts-gantry {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 70;
	display: none;
	gap: 0.5rem;
	padding: 0.5rem;
	background: var(--ts-blue);
	border-top: 4px solid var(--ts-blue-deep);
	/* Hidden by default. A visible default duplicates the hero's own call plate
	   for the frame before the observer runs, and the first viewport is the one
	   frame on this site that has to be right. */
	transform: translateY(115%);
	transition: transform var(--ts-med) var(--ts-ease);
}
.ts-gantry.is-shown { transform: none; }
.ts-gantry a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 0.6rem;
	border-radius: var(--ts-r-sm);
	font-weight: 900;
	text-decoration: none;
}
.ts-gantry__tel { flex: 1; background: var(--ts-yellow); color: var(--ts-black); font-family: var(--ts-mono); font-variant-numeric: tabular-nums; }
.ts-gantry__quote { flex: 0 0 34%; background: transparent; color: var(--ts-white); box-shadow: inset 0 0 0 3px var(--ts-white); }

@media (max-width: 780px) {
	.ts-gantry { display: flex; }
	body { padding-bottom: 4.2rem; }
}

.ts-totop {
	position: fixed;
	right: clamp(0.9rem, 3vw, 1.8rem);
	bottom: clamp(0.9rem, 3vw, 1.8rem);
	z-index: 65;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ts-r-sm);
	background: var(--ts-blue);
	color: var(--ts-white);
	box-shadow: var(--ts-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--ts-med) var(--ts-ease), transform var(--ts-med) var(--ts-ease), visibility var(--ts-med);
}
.ts-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ts-totop .ts-arrow { width: 24px; height: 19px; }

@media (max-width: 780px) { .ts-totop { bottom: 5rem; } }

/* ============================================== Block editor previews */

/* Each block renders alone in the editor, without the section above or below
   it, so the trust plates lose the hero they normally sit against. */
.block-editor-block-list__layout .ts-trust { padding-top: 2rem; }