/* Components — BEM, tokens only, matched to the v7 mockup.
   Square corners, hairline rules, Russo One display type, yellow used sparingly. */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tsh-btn {
	position: relative;
	z-index: 1;
	overflow: hidden;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 112px;
	min-height: 60px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: var(--tsh-radius);
	font-family: var(--tsh-font-head);
	font-size: var(--tsh-fs-btn);
	letter-spacing: 0.03em;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s linear, border-color 0.2s linear;
}
/* The fill: a panel parked below the button that slides up on hover/focus. */
.tsh-btn::before {
	content: "";
	position: absolute;
	inset: 100% 0 auto 0;
	z-index: -1;
	height: 100%;
	background: var(--tsh-fill, var(--tsh-yellow));
	transition: top 0.2s linear;
}
.tsh-btn:hover::before,
.tsh-btn:focus-visible::before { top: 0; }

/* Hover fill follows the surface: yellow on light, white on dark. */
.tsh-bar, .tsh-utility, .tsh-nav[popover], .tsh-hero, .tsh-pillar, .tsh-enquiry-panel, .tsh-cta-band,
.tsh-footer, .tsh-page-header, .tsh-banner-link, .tsh-modal { --tsh-fill: var(--tsh-white); }

.tsh-btn:hover,
.tsh-btn:focus-visible { border-color: var(--tsh-fill, var(--tsh-yellow)); color: var(--tsh-black); }
.tsh-btn--primary { background: var(--tsh-yellow); border-color: var(--tsh-yellow); color: var(--tsh-black); }
.tsh-btn--dark,
.tsh-btn--outline {
	font-family: var(--tsh-font-body);
	font-size: var(--tsh-fs-base);
	font-weight: 600;
	letter-spacing: 0;
}
.tsh-btn--dark { background: var(--tsh-black); border-color: var(--tsh-black); color: var(--tsh-white); }
.tsh-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
@media (prefers-reduced-motion: reduce) {
	.tsh-btn, .tsh-btn::before { transition: none; }
}
.tsh-btn .tsh-icon { width: 18px; height: 18px; }

.tsh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tsh-space-3); margin-top: var(--tsh-space-6); }
.tsh-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Canada badge — the maple leaf beside "Proudly Canadian" ─────────────── */
.tsh-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--tsh-space-2);
	font-size: var(--tsh-fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.tsh-badge__leaf { width: 14px; height: 14px; color: var(--tsh-canada-red); flex: none; }
.tsh-badge--dark { color: var(--tsh-on-dark-2); }

/* ── Header: utility bar + nav ───────────────────────────────────────────── */
/* The nav bar pins to the top while the phones-and-socials bar above it scrolls away.
   Sticking .tsh-bar itself cannot work: its containing block is the header, which is
   only as tall as the header, so it would unstick immediately. Sticking the header and
   pulling it up by the height of the bar above leaves the nav bar at the top. */
.tsh-header {
	position: sticky; top: calc(var(--tsh-utility-h) * -1); z-index: 40;
}
.tsh-utility {
	background: var(--tsh-black);
	color: var(--tsh-on-dark-2);
	font-size: var(--tsh-fs-sm);
	padding: 0 var(--tsh-gutter);
	/* Both bars are black, so a hairline is what separates them. Border-box keeps it
	   inside the declared height, so the sticky offset above still lines up. */
	border-bottom: var(--tsh-hairline) solid var(--tsh-border-dark);
	/* Its height is what the sticky header is pulled up by, so it is declared rather
	   than left to font metrics — otherwise the offset and the real bar disagree and
	   the pinned nav loses a sliver off its top. */
	min-height: var(--tsh-utility-h);
	display: flex; align-items: center;
}
.tsh-utility__inner { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--tsh-space-4); flex-wrap: wrap; max-width: none; padding: 0; }
.tsh-utility__phones { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; font-weight: 500; }
.tsh-utility__right { display: flex; align-items: center; gap: 18px; }
.tsh-socials { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.tsh-socials__link { font-weight: 500; }
.tsh-utility .tsh-socials { gap: var(--tsh-space-3); }
.tsh-utility .tsh-socials li + li::before { content: "|"; margin-right: var(--tsh-space-3); color: var(--tsh-border-dark); }
.tsh-utility .tsh-socials li { display: flex; align-items: center; }
.tsh-socials__link:hover { color: var(--tsh-white); text-decoration: underline; text-underline-offset: 3px; }
.tsh-socials__label { font-size: var(--tsh-fs-sm); }
.tsh-socials .tsh-icon { display: none; }

.tsh-bar { background: var(--tsh-black); color: var(--tsh-white); }
.tsh-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--tsh-space-5);
	max-width: none;
	padding-inline: var(--tsh-gutter);
	min-height: var(--tsh-nav-h);
}
/* Wordmark and descriptor sit on one line, divided by a hairline rather than by more
   space, so the pair reads as a single lockup and the bar stays shallow. */
.tsh-logo {
	display: flex; align-items: center; gap: var(--tsh-space-3);
	padding: var(--tsh-space-2) 0; flex: none;
}
.tsh-logo__word { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-logo); letter-spacing: 0.02em; line-height: 1; color: var(--tsh-white); }
.tsh-logo__sub {
	font-size: var(--tsh-fs-logo-sub); font-weight: 500; letter-spacing: var(--tsh-track-logo);
	line-height: 1.9; color: var(--tsh-grey-mid); text-transform: uppercase; white-space: nowrap;
	border-left: 1px solid var(--tsh-border-dark); padding-left: var(--tsh-space-3);
}
/* Narrow phones: the wordmark alone, so it never crowds the menu button. */
@media (max-width: 430px) {
	.tsh-logo__sub { display: none; }
}
.tsh-logo__img { max-height: 40px; width: auto; }
.tsh-bar__slogan { font-size: var(--tsh-fs-xs); color: var(--tsh-grey-mid); letter-spacing: 0.08em; text-transform: uppercase; }

.tsh-bar__toggle, .tsh-nav__close { display: none; margin-left: auto; background: none; border: 0; color: inherit; padding: var(--tsh-space-2); cursor: pointer; }
.tsh-bar__toggle .tsh-icon, .tsh-nav__close .tsh-icon { width: 26px; height: 26px; }

.tsh-nav[popover] {
	display: flex; align-items: center; gap: var(--tsh-space-5);
	position: static; inset: auto; margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: inherit;
	overflow: visible; width: auto; height: auto;
}
.tsh-nav__list { display: flex; list-style: none; margin: 0; padding: 0; }
.tsh-nav__link {
	display: flex; align-items: center; height: 44px; padding-inline: var(--tsh-space-4);
	font-size: var(--tsh-fs-xs); font-weight: 500; letter-spacing: var(--tsh-track-nav);
	text-transform: uppercase; color: var(--tsh-grey-mid);
	border-bottom: var(--tsh-rule) solid transparent;
	transition: color var(--tsh-dur);
}
.tsh-nav__link:hover { color: var(--tsh-white); }
.tsh-nav__item--current .tsh-nav__link { color: var(--tsh-yellow); border-bottom-color: var(--tsh-yellow); }
.tsh-nav .tsh-btn { min-height: 46px; padding: 12px 22px; font-size: var(--tsh-fs-13); gap: var(--tsh-space-2); }

@media (max-width: 1180px) {
	.tsh-bar__toggle, .tsh-nav__close { display: inline-grid; }
	.tsh-nav[popover] {
		display: none;
		position: fixed; inset: 0 0 0 auto; width: min(22rem, 88vw); height: 100dvh; margin: 0;
		flex-direction: column; align-items: stretch; gap: var(--tsh-space-5);
		padding: var(--tsh-space-5); background: var(--tsh-black); color: var(--tsh-white); overflow-y: auto;
	}
	.tsh-nav[popover]:popover-open { display: flex; }
	.tsh-nav::backdrop { background: rgb(var(--tsh-black-rgb) / 0.6); }
	.tsh-nav__close { align-self: flex-end; margin: 0; }
	.tsh-nav__list { flex-direction: column; }
	.tsh-nav__link { height: 48px; border-bottom: 0; border-left: var(--tsh-rule) solid transparent; font-size: var(--tsh-fs-sm); }
	.tsh-nav__item--current .tsh-nav__link { border-left-color: var(--tsh-yellow); }
}
@media (max-width: 700px) {
	.tsh-utility__right .tsh-socials { display: none; }
}

/* ── Flyer: split, headline left, hazard-striped flyer panel right ───────── */
.tsh-flyer { display: grid; grid-template-columns: 1fr 1fr; max-height: 100vh; }
.tsh-flyer__text {
	display: flex; flex-direction: column; justify-content: center; gap: 28px;
	padding: clamp(32px, 4vw, 56px) var(--tsh-gutter);
}
.tsh-flyer__title { font-size: var(--tsh-fs-display); line-height: var(--tsh-leading-tight); letter-spacing: -0.01em; margin: 0 0 20px; }
.tsh-flyer__lede { font-size: var(--tsh-fs-lg); line-height: 1.5; max-width: 30ch; margin: 0; color: var(--tsh-text); }
.tsh-flyer__art {
	display: grid; place-items: center; padding: clamp(32px, 4vw, 56px);
	background: repeating-linear-gradient(
		-58deg,
		var(--tsh-grey-mid) 0 var(--tsh-stripe-w),
		var(--tsh-surface) var(--tsh-stripe-w) calc(var(--tsh-stripe-w) * 2)
	);
	min-height: 0;
	perspective: 1400px;
}
/* Height-driven so the cover shrinks when the section is capped at the viewport;
   the ratio then supplies the width. */
.tsh-flyer__cover {
	/* The uploaded cover's own shape; the mockup's portrait box is the fallback
	   for the placeholder. */
	height: min(347px, 100%); width: auto; max-width: 100%;
	aspect-ratio: var(--tsh-flyer-ratio, 263 / 347);
	position: relative; display: grid; place-items: center;
	background: var(--tsh-surface); overflow: hidden;
	/* Hinged at the spine, so hovering lifts the outer edge the way a magazine cover
	   gives when you pick it up. */
	transform-origin: left center;
	transition: transform 700ms var(--tsh-ease), box-shadow 700ms var(--tsh-ease);
}
.tsh-flyer__cover:hover {
	transform: rotateY(-13deg);
	box-shadow: -22px 20px 46px rgb(var(--tsh-black-rgb) / 0.3);
}
/* The crease down the spine and the sheen across the bend — what makes the turn read
   as paper rather than a flat panel swinging. Absolute, so it stays out of the grid. */
.tsh-flyer__cover::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(
		to right,
		rgb(var(--tsh-black-rgb) / 0.32) 0%,
		rgb(var(--tsh-black-rgb) / 0) 15%,
		rgb(var(--tsh-white-rgb) / 0.13) 52%,
		rgb(var(--tsh-black-rgb) / 0.08) 100%
	);
	opacity: 0; transition: opacity 700ms var(--tsh-ease);
}
.tsh-flyer__cover:hover::before { opacity: 1; }
/* A page turning is a lot of movement; the reveal below still does the explaining. */
@media (prefers-reduced-motion: reduce) {
	.tsh-flyer__cover:hover { transform: none; }
	.tsh-flyer__cover::before { display: none; }
}
.tsh-flyer__cover .tsh-flyer__img { width: 100%; height: 100%; object-fit: cover; }
/* Hovering the cover says what clicking it does: the sheet eases in, a scrim drops
   over it and the label rises into place. Keyboard focus gets the same treatment. */
.tsh-flyer__open {
	position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
	gap: var(--tsh-space-3); padding: var(--tsh-space-4); text-align: center;
	background: rgb(var(--tsh-black-rgb) / 0.74); color: var(--tsh-white); z-index: 2;
	opacity: 0; transition: opacity var(--tsh-dur) var(--tsh-ease);
}
/* Icon and words share one solid block: a white icon on the scrim had the flyer's own
   artwork behind it and disappeared into it. */
.tsh-flyer__open-chip {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	max-width: 100%; padding: 9px 14px;
	background: var(--tsh-yellow); color: var(--tsh-black);
	transform: translateY(6px); transition: transform var(--tsh-dur) var(--tsh-ease);
}
.tsh-flyer__open-icon { width: 20px; height: 20px; flex: none; }
.tsh-flyer__open-label {
	font-size: var(--tsh-fs-sm); font-weight: 600; letter-spacing: var(--tsh-track-nav);
	text-transform: uppercase;
}
.tsh-flyer__cover:hover .tsh-flyer__open,
.tsh-flyer__open:focus-visible { opacity: 1; text-decoration: none; }
.tsh-flyer__cover:hover .tsh-flyer__open-chip,
.tsh-flyer__open:focus-visible .tsh-flyer__open-chip { transform: translateY(0); }
.tsh-flyer__ph {
	font-family: var(--tsh-font-mono); font-size: var(--tsh-fs-xs);
	letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--tsh-white); border: 1px solid var(--tsh-black); padding: 4px 8px;
}
@media (max-width: 820px) {
	.tsh-flyer { grid-template-columns: 1fr; max-height: none; }
	.tsh-flyer__art { min-height: 20rem; }
	.tsh-flyer__cover { height: auto; width: min(263px, 100%); }
}

/* ── Hero: photo, shade, faint grid, headline bottom-left ───────────────── */
.tsh-hero {
	position: relative; display: flex; align-items: flex-end;
	min-height: clamp(22rem, 38vw, 34rem); background: var(--tsh-black); color: var(--tsh-white); overflow: hidden;
}
.tsh-hero__media { position: absolute; inset: 0; }
/* Elementor ships `.elementor img { height: auto }`, so these need the extra class to win. */
.tsh-hero .tsh-hero__img, .tsh-hero .tsh-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; object-fit: cover;
}
.tsh-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--tsh-shade-hero); }
.tsh-hero__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 88px; height: 88px; display: grid; place-items: center;
	border: 2px solid var(--tsh-white); border-radius: 50%;
	background: rgb(var(--tsh-black-rgb) / 0.3);
	transition: background-color var(--tsh-dur) var(--tsh-ease), border-color var(--tsh-dur) var(--tsh-ease);
}
a.tsh-hero__play:hover { background: var(--tsh-yellow); border-color: var(--tsh-yellow); }
.tsh-hero__play-mark {
	width: 0; height: 0; margin-left: 6px;
	border-top: 13px solid transparent; border-bottom: 13px solid transparent;
	border-left: 22px solid var(--tsh-white);
}
a.tsh-hero__play:hover .tsh-hero__play-mark { border-left-color: var(--tsh-black); }
@media (max-width: 700px) { .tsh-hero__play { width: 64px; height: 64px; } .tsh-hero__play-mark { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; } }

.tsh-hero__content { position: relative; padding: clamp(24px, 4vw, 56px) var(--tsh-gutter); max-width: none; }
.tsh-hero__title { font-size: var(--tsh-fs-hero); line-height: 1; letter-spacing: 0.02em; color: var(--tsh-white); margin: 0; }
.tsh-hero__sub { margin: var(--tsh-space-4) 0 0; max-width: 52ch; color: var(--tsh-on-dark-2); font-size: var(--tsh-fs-16); }
.tsh-hero .tsh-eyebrow { color: var(--tsh-yellow); }

/* ── Promotion strip ───────────────────────────────────────────────────────
   One slim row under the hero: label, title, one line of description, and the button
   pushed to the far edge. Wraps onto more lines on narrow screens. */
.tsh-flyer--strip {
	display: flex; flex-wrap: wrap; align-items: center;
	column-gap: clamp(20px, 2.2vw, 36px); row-gap: var(--tsh-space-3);
	padding: var(--tsh-space-5) var(--tsh-gutter);
	background: var(--tsh-surface); color: var(--tsh-black);
}
.tsh-flyer--strip .tsh-eyebrow { margin: 0; }
.tsh-flyer--strip .tsh-flyer__title { font-size: var(--tsh-fs-strip); line-height: 1.1; letter-spacing: 0; margin: 0; }
.tsh-flyer--strip .tsh-flyer__lede { font-size: var(--tsh-fs-16); line-height: 1.45; max-width: 34ch; margin: 0; }
.tsh-flyer--strip .tsh-btn { margin-left: auto; }

/* ── Homepage first screen ───────────────────────────────────────────────────
   The nav bar, the hero and the promotion strip share one viewport. The homepage is
   Elementor-built, so they cannot sit in a common wrapper and the hero cannot simply be
   told to "fill the rest" — instead the strip takes a definite height and the hero is
   given what the viewport has left over. Below 821px the strip wraps onto several
   lines and the page just flows. */
@media (min-width: 821px) {
	.home .tsh-flyer--strip { min-height: var(--tsh-promo-h); }
	.home .tsh-hero {
		height: calc(100dvh - var(--tsh-header-h) - var(--tsh-promo-h));
		min-height: 22rem;
	}
}

/* ── Business lines: three photo panels, 2px grey seams ─────────────────── */
.tsh-pillars {
	--tsh-chevron: 34px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
	background: var(--tsh-grey-mid);
}
/* Each panel ends in a point and begins with a matching notch. The panels after the
   first are pulled back by the chevron depth so a notch sits over the point before it;
   what is left between the two clip edges is the grid's 2px gap, in chevron form. */
.tsh-pillar {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 420px; background: var(--tsh-black); color: var(--tsh-white); overflow: hidden;
	clip-path: polygon(
		0 0,
		calc(100% - var(--tsh-chevron)) 0,
		100% 50%,
		calc(100% - var(--tsh-chevron)) 100%,
		0 100%,
		var(--tsh-chevron) 50%
	);
}
.tsh-pillar:first-child {
	clip-path: polygon(
		0 0,
		calc(100% - var(--tsh-chevron)) 0,
		100% 50%,
		calc(100% - var(--tsh-chevron)) 100%,
		0 100%
	);
}
.tsh-pillar:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tsh-chevron) 50%);
}
.tsh-pillar + .tsh-pillar { margin-left: calc(var(--tsh-chevron) * -1); }
.tsh-pillar .tsh-pillar__img {
	position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; object-fit: cover;
	transition: transform 600ms var(--tsh-ease);
}
.tsh-pillar:hover .tsh-pillar__img { transform: scale(1.03); }
.tsh-pillar__shade { position: absolute; inset: 0; background: var(--tsh-shade-card); }
.tsh-pillar__content { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--tsh-space-7); }
/* The notched panels sit a chevron's depth further left, so their copy needs that
   depth back to keep the same gap from the seam as the first panel has from the edge. */
.tsh-pillar + .tsh-pillar .tsh-pillar__content {
	padding-left: calc(var(--tsh-space-7) + var(--tsh-chevron));
}
.tsh-pillar__tag { font-size: var(--tsh-fs-xs); font-weight: 600; letter-spacing: var(--tsh-track-label); text-transform: uppercase; color: var(--tsh-yellow); }
.tsh-pillar__title { font-size: var(--tsh-fs-pillar); line-height: 1; margin: 0; color: var(--tsh-white); }
.tsh-pillar__text { font-size: var(--tsh-fs-base); line-height: 1.55; color: var(--tsh-grey-mid); max-width: 34ch; }
.tsh-pillar__link { display: inline-flex; align-items: center; gap: 10px; font-size: var(--tsh-fs-13); font-weight: 600; color: var(--tsh-white); }
.tsh-pillar__link .tsh-icon { width: 16px; height: 16px; transition: transform var(--tsh-dur); }
.tsh-pillar:hover .tsh-pillar__link .tsh-icon { transform: translateX(4px); }
@media (max-width: 980px) {
	.tsh-pillars { grid-template-columns: 1fr; }
	/* Stacked, the panels sit above one another and the content hugs the bottom edge,
	   so a downward point would cut into it. Straight seams instead. */
	.tsh-pillar, .tsh-pillar:first-child, .tsh-pillar:last-child { clip-path: none; min-height: 320px; }
	.tsh-pillar + .tsh-pillar { margin-left: 0; }
	.tsh-pillar + .tsh-pillar .tsh-pillar__content { padding-left: var(--tsh-space-7); }
}

/* ── Enquiry panel: lattice ground, black panel, underlined fields ──────── */
.tsh-enquiry-section {
	padding: var(--tsh-section-y-lg) var(--tsh-gutter);
	background-color: var(--tsh-grey-mid);
	/* brand-literal: a data URI cannot hold a var() — ground --tsh-grey-mid, diamonds --tsh-surface. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='180'%3E%3Crect width='150' height='180' fill='%23cdcccc'/%3E%3Cg fill='%23f4f4f4'%3E%3Crect x='-55' y='-55' width='110' height='110' rx='20' transform='translate(75 90) scale(0.82 1) rotate(45)'/%3E%3Crect x='-55' y='-55' width='110' height='110' rx='20' transform='translate(0 0) scale(0.82 1) rotate(45)'/%3E%3Crect x='-55' y='-55' width='110' height='110' rx='20' transform='translate(150 0) scale(0.82 1) rotate(45)'/%3E%3Crect x='-55' y='-55' width='110' height='110' rx='20' transform='translate(0 180) scale(0.82 1) rotate(45)'/%3E%3Crect x='-55' y='-55' width='110' height='110' rx='20' transform='translate(150 180) scale(0.82 1) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 150px 180px;
}
.tsh-enquiry-panel {
	display: grid; grid-template-columns: 1fr 1fr;
	max-width: var(--tsh-width-panel); margin-inline: auto;
	background: var(--tsh-black); color: var(--tsh-white);
}
.tsh-enquiry-panel__intro { display: flex; flex-direction: column; justify-content: center; gap: var(--tsh-space-6); padding: var(--tsh-panel-pad); }
.tsh-enquiry-panel__title { font-size: var(--tsh-fs-band); line-height: var(--tsh-leading-tight); color: var(--tsh-white); margin: 0 0 var(--tsh-space-4); }
.tsh-enquiry-panel__intro p { margin: 0; font-size: var(--tsh-fs-16); line-height: 1.55; color: var(--tsh-grey-mid); max-width: 30ch; }
.tsh-enquiry-panel__note {
	align-self: flex-start; font-size: var(--tsh-fs-xs);
	font-family: var(--tsh-font-mono);
	border: 1px dashed var(--tsh-border-dark); padding: 6px 10px; color: var(--tsh-grey-mid);
}
.tsh-enquiry-panel__form { padding: var(--tsh-panel-pad); }
@media (max-width: 900px) { .tsh-enquiry-panel { grid-template-columns: 1fr; } }

/* Fluent Forms inside the black panel and the pop-up: underlined fields. */
.tsh-enquiry-panel .fluentform .ff-el-group,
.tsh-modal .fluentform .ff-el-group { margin-bottom: 14px; }
.tsh-enquiry-panel .fluentform .ff-el-input--label label,
.tsh-modal .fluentform .ff-el-input--label label { color: var(--tsh-grey-mid); font-size: var(--tsh-fs-sm); font-weight: 500; letter-spacing: 0.04em; }
.tsh-enquiry-panel .fluentform .ff-el-form-control,
.tsh-modal .fluentform .ff-el-form-control {
	background: transparent; border: 0; border-bottom: 1px solid var(--tsh-border-dark);
	border-radius: 0; color: var(--tsh-white); font-size: var(--tsh-fs-base); padding: 14px 0;
}
.tsh-enquiry-panel .fluentform .ff-el-form-control:focus,
.tsh-modal .fluentform .ff-el-form-control:focus { border-bottom-color: var(--tsh-yellow); box-shadow: none; outline: none; }
.tsh-enquiry-panel .fluentform .ff-el-form-control::placeholder,
.tsh-modal .fluentform .ff-el-form-control::placeholder { color: var(--tsh-text-placeholder); }
.tsh-enquiry-panel .fluentform select.ff-el-form-control option,
.tsh-modal .fluentform select.ff-el-form-control option { color: var(--tsh-black); }
.fluentform .ff-btn-submit {
	background: var(--tsh-yellow) !important; color: var(--tsh-black) !important;
	font-family: var(--tsh-font-head) !important; font-size: var(--tsh-fs-btn) !important; letter-spacing: 0.03em;
	border-radius: 0 !important; padding: 18px 28px !important; width: 100%; margin-top: var(--tsh-space-3);
}
.tsh-enquiry-panel .ff-message-success { background: transparent; border: 1px solid var(--tsh-yellow); color: var(--tsh-white); }

/* ── Partner wall + memberships ─────────────────────────────────────────── */
.tsh-partners { max-width: var(--tsh-width-wide); margin-inline: auto; padding: var(--tsh-section-y) var(--tsh-gutter); }
.tsh-partners__block { display: flex; flex-direction: column; gap: var(--tsh-space-5); }
.tsh-logo-wall {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
	list-style: none; margin: 0; padding: 0;
	background: var(--tsh-white); border: 1px solid var(--tsh-border);
}
.tsh-logo-wall__item {
	min-height: 64px; display: flex; align-items: center; justify-content: center;
	padding: 12px 14px; text-align: center; background: var(--tsh-white);
	outline: 1px solid var(--tsh-border);
}
.tsh-logo-wall__word { font-family: var(--tsh-font-head); font-size: clamp(13px, 1vw, 15px); line-height: 1.2; }
.tsh-logo-wall__img { max-height: 40px; width: auto; }
.tsh-partners__rule { height: 1px; background: var(--tsh-border); margin: 48px 0; }
.tsh-members { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tsh-space-3); list-style: none; margin: 0; padding: 0; }
.tsh-member {
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--tsh-border); padding: 14px 24px;
	font-family: var(--tsh-font-head); font-size: var(--tsh-fs-16);
}
.tsh-member__img { max-height: 24px; width: auto; }
.tsh-members .tsh-badge { margin-left: var(--tsh-space-2); font-size: var(--tsh-fs-13); }

/* ── Call-to-action band ────────────────────────────────────────────────── */
.tsh-cta-band { background: var(--tsh-black); color: var(--tsh-white); }
.tsh-cta-band__stripe { height: 14px; background: var(--tsh-stripes); }
.tsh-cta-band__inner {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--tsh-space-6);
	padding: var(--tsh-section-y-lg) var(--tsh-gutter);
	max-width: none;
}
.tsh-cta-band__text {
	margin: 0; font-family: var(--tsh-font-head); line-height: 1.02;
	/* Sized so the sentence and the phone number stay on one line. */
	font-size: clamp(18px, 2.6vw, 40px);
	white-space: nowrap;
}
@media (max-width: 900px) { .tsh-cta-band__text { white-space: normal; } }
.tsh-cta-band__phone { color: var(--tsh-yellow); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.tsh-footer {
	background: var(--tsh-black); color: var(--tsh-grey-mid);
	padding: 0 var(--tsh-gutter) 28px;
}
.tsh-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--tsh-space-5) 0; }
.tsh-footer__col { display: flex; flex-direction: column; gap: 28px; padding: 0 clamp(20px, 2.5vw, 40px) var(--tsh-space-5) 0; }
.tsh-footer__links { display: flex; flex-direction: column; gap: var(--tsh-space-3); list-style: none; margin: 0; padding: 0; }
.tsh-footer__links a { color: var(--tsh-white); font-size: var(--tsh-fs-sm); font-weight: 600; letter-spacing: var(--tsh-track-nav); text-transform: uppercase; }
.tsh-footer__links a:hover { color: var(--tsh-yellow); }
.tsh-socials--footer { gap: 10px; }
.tsh-socials--footer .tsh-socials__link {
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 1px solid var(--tsh-border-dark); color: var(--tsh-grey-mid);
}
.tsh-socials--footer .tsh-socials__link:hover { border-color: var(--tsh-yellow); color: var(--tsh-yellow); text-decoration: none; }
.tsh-socials--footer .tsh-icon { display: block; width: 16px; height: 16px; }
.tsh-socials--footer .tsh-socials__label { position: absolute; left: -9999px; }
.tsh-footer__location { display: flex; flex-direction: column; gap: 14px; padding: 0 clamp(20px, 2.5vw, 40px) var(--tsh-space-5); }
.tsh-footer__num { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-13); color: var(--tsh-yellow); }
.tsh-footer__heading { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-h3); line-height: 1.15; color: var(--tsh-white); margin: 0; }
.tsh-footer__location p { margin: 0; font-size: var(--tsh-fs-base); line-height: 1.7; color: var(--tsh-grey-mid); }
.tsh-footer__tbc { font-family: var(--tsh-font-mono); font-size: var(--tsh-fs-xs); border: 1px dashed var(--tsh-border-dark); padding: 2px 6px; }
.tsh-footer__members {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--tsh-space-3);
	list-style: none; margin: 0; padding: var(--tsh-space-6) 0 0;
}
.tsh-footer__members .tsh-member { border-color: var(--tsh-border-dark); color: var(--tsh-white); padding: 10px 18px; font-size: var(--tsh-fs-base); }
.tsh-footer__members-title { margin: 0 var(--tsh-space-2) 0 0; color: var(--tsh-grey-mid); }
.tsh-footer__bottom {
	margin-top: var(--tsh-space-6); padding-top: var(--tsh-space-5);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--tsh-space-4);
	font-size: var(--tsh-fs-sm); color: var(--tsh-grey-mid);
}
.tsh-footer__legal { display: flex; gap: var(--tsh-space-4); }
.tsh-footer__bottom a:hover { color: var(--tsh-yellow); }

/* ── Page header (inner pages) ──────────────────────────────────────────── */
.tsh-page-header { background: var(--tsh-black); color: var(--tsh-white); padding-block: var(--tsh-section-y); position: relative; isolation: isolate; overflow: hidden; border-bottom: var(--tsh-rule) solid var(--tsh-yellow); }
/* Header grid: two hairline grids at 28px, the second knocked half a cell off, each shown
   only inside three rectangles. Each pattern moves the rectangles (x y w h, in %). */
.tsh-page-header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tsh-grid-left);
	width: calc(var(--tsh-grid-w) + 1px);
	z-index: -1;
	pointer-events: none;
	background:
		repeating-linear-gradient(180deg, var(--tsh-grid-line) 0 1px, transparent 1px var(--tsh-grid-cell)),
		repeating-linear-gradient(90deg, var(--tsh-grid-line) 0 1px, transparent 1px var(--tsh-grid-cell));
	-webkit-mask-image: var(--tsh-mask-solid), var(--tsh-mask-solid);
	mask-image: var(--tsh-mask-solid), var(--tsh-mask-solid);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: var(--tsh-grid-pos);
	mask-position: var(--tsh-grid-pos);
	-webkit-mask-size: var(--tsh-grid-size);
	mask-size: var(--tsh-grid-size);
}
.tsh-page-header__inner { position: relative; }
.tsh-page-header {
	--tsh-grid-line: rgb(var(--tsh-white-rgb) / 0.14);
	/* Same box as .tsh-bar__inner's content: starts at the wordmark, ends at the Get a Quote button. */
	--tsh-grid-w: calc(100cqw - 2 * var(--tsh-gutter));
	--tsh-grid-left: var(--tsh-gutter);
	--tsh-grid-cell: calc(var(--tsh-grid-w) / 48);
	container-type: inline-size;
}
/* Two areas per page, in whole cells of a 48-column grid (x y w h): the first starts at the
   wordmark, the second ends at the button, and every cut lands on an intersection (+1px keeps
   the closing line). */
.tsh-page-header--p1 {
	--tsh-grid-pos: 0 0, calc(34 * var(--tsh-grid-cell)) calc(4 * var(--tsh-grid-cell));
	--tsh-grid-size: calc(26 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px), calc(14 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 0; --tsh-a1-w: 26;
	--tsh-a2-x: 34; --tsh-a2-y: 4; --tsh-a2-w: 14;
}
.tsh-page-header--p2 {
	--tsh-grid-pos: 0 calc(3 * var(--tsh-grid-cell)), calc(28 * var(--tsh-grid-cell)) 0;
	--tsh-grid-size: calc(20 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px), calc(20 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 3; --tsh-a1-w: 20;
	--tsh-a2-x: 28; --tsh-a2-y: 0; --tsh-a2-w: 20;
}
.tsh-page-header--p3 {
	--tsh-grid-pos: 0 0, calc(22 * var(--tsh-grid-cell)) calc(2 * var(--tsh-grid-cell));
	--tsh-grid-size: calc(14 * var(--tsh-grid-cell) + 1px) calc(8 * var(--tsh-grid-cell) + 1px), calc(26 * var(--tsh-grid-cell) + 1px) calc(6 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 0; --tsh-a1-w: 14;
	--tsh-a2-x: 22; --tsh-a2-y: 2; --tsh-a2-w: 26;
}
.tsh-page-header--p4 {
	--tsh-grid-pos: 0 calc(4 * var(--tsh-grid-cell)), calc(36 * var(--tsh-grid-cell)) 0;
	--tsh-grid-size: calc(30 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px), calc(12 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 4; --tsh-a1-w: 30;
	--tsh-a2-x: 36; --tsh-a2-y: 0; --tsh-a2-w: 12;
}
.tsh-page-header--p5 {
	--tsh-grid-pos: 0 0, calc(26 * var(--tsh-grid-cell)) calc(3 * var(--tsh-grid-cell));
	--tsh-grid-size: calc(20 * var(--tsh-grid-cell) + 1px) calc(3 * var(--tsh-grid-cell) + 1px), calc(22 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 0; --tsh-a1-w: 20;
	--tsh-a2-x: 26; --tsh-a2-y: 3; --tsh-a2-w: 22;
}
.tsh-page-header--p6 {
	--tsh-grid-pos: 0 calc(2 * var(--tsh-grid-cell)), calc(40 * var(--tsh-grid-cell)) 0;
	--tsh-grid-size: calc(34 * var(--tsh-grid-cell) + 1px) calc(6 * var(--tsh-grid-cell) + 1px), calc(8 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 2; --tsh-a1-w: 34;
	--tsh-a2-x: 40; --tsh-a2-y: 0; --tsh-a2-w: 8;
}
.tsh-page-header--p7 {
	--tsh-grid-pos: 0 0, calc(16 * var(--tsh-grid-cell)) calc(4 * var(--tsh-grid-cell));
	--tsh-grid-size: calc(10 * var(--tsh-grid-cell) + 1px) calc(5 * var(--tsh-grid-cell) + 1px), calc(32 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 0; --tsh-a1-w: 10;
	--tsh-a2-x: 16; --tsh-a2-y: 4; --tsh-a2-w: 32;
}
.tsh-page-header--p8 {
	--tsh-grid-pos: 0 calc(4 * var(--tsh-grid-cell)), calc(24 * var(--tsh-grid-cell)) 0;
	--tsh-grid-size: calc(18 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px), calc(24 * var(--tsh-grid-cell) + 1px) calc(4 * var(--tsh-grid-cell) + 1px);
	--tsh-a1-x: 0; --tsh-a1-y: 4; --tsh-a1-w: 18;
	--tsh-a2-x: 24; --tsh-a2-y: 0; --tsh-a2-w: 24;
}

/* Page-load reveal: a diagonal pixel wave in both areas at once. Each row of each area has a
   header-black cover that retreats one cell at a time from the area's left edge, each row a step
   behind the one above, so the revealed edge is a staircase moving from the area's top-left. The offsets are registered
   numbers; with no animation they sit past the right edge, so nothing is covered. */
@property --tsh-row-0 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-1 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-2 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-3 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-4 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-5 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-6 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-7 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-8 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-9 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-10 { syntax: "<number>"; inherits: false; initial-value: 49; }
@property --tsh-row-11 { syntax: "<number>"; inherits: false; initial-value: 49; }
@keyframes tsh-row-0 { from { --tsh-row-0: 0; } to { --tsh-row-0: 49; } }
@keyframes tsh-row-1 { from { --tsh-row-1: 0; } to { --tsh-row-1: 49; } }
@keyframes tsh-row-2 { from { --tsh-row-2: 0; } to { --tsh-row-2: 49; } }
@keyframes tsh-row-3 { from { --tsh-row-3: 0; } to { --tsh-row-3: 49; } }
@keyframes tsh-row-4 { from { --tsh-row-4: 0; } to { --tsh-row-4: 49; } }
@keyframes tsh-row-5 { from { --tsh-row-5: 0; } to { --tsh-row-5: 49; } }
@keyframes tsh-row-6 { from { --tsh-row-6: 0; } to { --tsh-row-6: 49; } }
@keyframes tsh-row-7 { from { --tsh-row-7: 0; } to { --tsh-row-7: 49; } }
@keyframes tsh-row-8 { from { --tsh-row-8: 0; } to { --tsh-row-8: 49; } }
@keyframes tsh-row-9 { from { --tsh-row-9: 0; } to { --tsh-row-9: 49; } }
@keyframes tsh-row-10 { from { --tsh-row-10: 0; } to { --tsh-row-10: 49; } }
@keyframes tsh-row-11 { from { --tsh-row-11: 0; } to { --tsh-row-11: 49; } }
.tsh-page-header::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--tsh-grid-left);
	width: calc(var(--tsh-grid-w) + 1px);
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-0)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 0) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-0)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-1)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 1) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-1)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-2)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 2) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-2)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-3)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 3) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-3)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-4)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 4) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-4)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-5)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 5) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-5)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-6)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 6) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-6)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-7)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 7) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-7)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-8)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 8) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-8)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-9)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 9) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-9)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-10)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 10) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-10)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a1-x) + var(--tsh-row-11)) * var(--tsh-grid-cell)) calc((var(--tsh-a1-y) + 11) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a1-w) - var(--tsh-row-11)) * var(--tsh-grid-cell) + 1px)) 100% no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-0)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 0) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-0)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-1)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 1) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-1)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-2)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 2) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-2)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-3)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 3) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-3)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-4)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 4) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-4)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-5)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 5) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-5)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-6)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 6) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-6)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-7)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 7) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-7)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-8)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 8) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-8)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-9)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 9) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-9)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-10)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 10) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-10)) * var(--tsh-grid-cell) + 1px)) calc(var(--tsh-grid-cell) + 1px) no-repeat,
		linear-gradient(var(--tsh-black), var(--tsh-black)) calc((var(--tsh-a2-x) + var(--tsh-row-11)) * var(--tsh-grid-cell)) calc((var(--tsh-a2-y) + 11) * var(--tsh-grid-cell)) / max(0px, calc((var(--tsh-a2-w) - var(--tsh-row-11)) * var(--tsh-grid-cell) + 1px)) 100% no-repeat;
	animation:
		tsh-row-0 1960ms steps(49, end) 150ms both,
		tsh-row-1 1960ms steps(49, end) 190ms both,
		tsh-row-2 1960ms steps(49, end) 230ms both,
		tsh-row-3 1960ms steps(49, end) 270ms both,
		tsh-row-4 1960ms steps(49, end) 310ms both,
		tsh-row-5 1960ms steps(49, end) 350ms both,
		tsh-row-6 1960ms steps(49, end) 390ms both,
		tsh-row-7 1960ms steps(49, end) 430ms both,
		tsh-row-8 1960ms steps(49, end) 470ms both,
		tsh-row-9 1960ms steps(49, end) 510ms both,
		tsh-row-10 1960ms steps(49, end) 550ms both,
		tsh-row-11 1960ms steps(49, end) 590ms both;
}
@media (prefers-reduced-motion: reduce) {
	.tsh-page-header::after { animation: none; }
}

.tsh-page-header__inner { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--tsh-space-5); flex-wrap: wrap; }
.tsh-page-header__title { font-size: var(--tsh-fs-band); margin: 0; }
.tsh-page-header__intro { color: var(--tsh-grey-mid); margin: var(--tsh-space-3) 0 0; max-width: 60ch; font-size: var(--tsh-fs-16); }
.tsh-page-header .tsh-eyebrow { color: var(--tsh-yellow); }
.tsh-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--tsh-space-2); list-style: none; margin: 0 0 var(--tsh-space-3); padding: 0; font-size: var(--tsh-fs-sm); letter-spacing: 0.04em; }
.tsh-breadcrumb li + li::before { content: "/"; margin-right: var(--tsh-space-2); opacity: 0.5; }
.tsh-breadcrumb a:hover { color: var(--tsh-yellow); }
.tsh-page-header .tsh-breadcrumb { color: var(--tsh-grey-mid); }

.tsh-section__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-pillar); margin: 0 0 var(--tsh-space-6); }

/* ── Catalogue grids ────────────────────────────────────────────────────── */
.tsh-brand-grid, .tsh-cat-grid, .tsh-item-grid, .tsh-promo-grid, .tsh-parts-grid { list-style: none; margin: 0; padding: 0; display: grid; }
.tsh-brand-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--tsh-border); border: 1px solid var(--tsh-border); }
.tsh-brand-card {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tsh-space-2);
	height: 100%; min-height: 150px; padding: var(--tsh-space-6) var(--tsh-space-4); background: var(--tsh-white); text-align: center;
	transition: background-color var(--tsh-dur);
}
.tsh-brand-card:hover { background: var(--tsh-surface); }
.tsh-brand-card__num { position: absolute; top: 12px; left: 12px; font-family: var(--tsh-font-head); font-size: var(--tsh-fs-xs); color: var(--tsh-grey-mid); }
.tsh-brand-card__logo { display: grid; place-items: center; min-height: 48px; }
.tsh-brand-card__img { max-height: 48px; width: auto; }
.tsh-brand-card__word, .tsh-brand-card__name { font-family: var(--tsh-font-head); font-size: clamp(14px, 1.1vw, 17px); }
.tsh-brand-card__cat { font-size: var(--tsh-fs-sm); color: var(--tsh-text-3); }

.tsh-cat-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--tsh-border); border: 1px solid var(--tsh-border); }
.tsh-cat-card { display: flex; flex-direction: column; height: 100%; background: var(--tsh-white); transition: background-color var(--tsh-dur); }
.tsh-cat-card:hover { background: var(--tsh-surface); }
.tsh-cat-card--featured { background: var(--tsh-yellow); }
.tsh-cat-card--featured:hover { background: var(--tsh-yellow-hover); }
.tsh-cat-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.tsh-cat-card .tsh-cat-card__img { width: 100%; height: 100%; object-fit: cover; }
.tsh-cat-card__body { display: flex; flex-direction: column; gap: var(--tsh-space-3); padding: var(--tsh-space-6); flex: 1; }
.tsh-cat-card__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-h3); }
.tsh-cat-card__text { font-size: var(--tsh-fs-base); line-height: 1.6; color: var(--tsh-text-2); }
.tsh-cat-card--featured .tsh-cat-card__text { color: var(--tsh-black); }
.tsh-cat-card__more { margin-top: auto; font-size: var(--tsh-fs-13); font-weight: 600; letter-spacing: 0.04em; }

.tsh-item-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--tsh-border); border: 1px solid var(--tsh-border); }
.tsh-item-card { display: flex; flex-direction: column; height: 100%; background: var(--tsh-white); }
.tsh-item-card:hover { background: var(--tsh-surface); }
.tsh-item-card__media { aspect-ratio: 4 / 3; background: var(--tsh-surface); display: grid; place-items: center; }
.tsh-item-card__img { width: 100%; height: 100%; object-fit: contain; padding: var(--tsh-space-4); }
.tsh-item-card__body { display: flex; flex-direction: column; gap: var(--tsh-space-1); padding: var(--tsh-space-5); }
.tsh-item-card__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-16); }
.tsh-item-card__sku { font-size: var(--tsh-fs-xs); letter-spacing: 0.08em; color: var(--tsh-text-3); text-transform: uppercase; }

.tsh-placeholder { width: 100%; min-height: 8rem; display: grid; place-items: center; background: var(--tsh-surface); border: 1.5px dashed var(--tsh-border); color: var(--tsh-text-3); font-family: var(--tsh-font-mono); font-size: var(--tsh-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.tsh-placeholder--large { aspect-ratio: 4 / 3; }

.tsh-promo-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--tsh-space-5); }
.tsh-promo-card { display: flex; flex-direction: column; border: 1px solid var(--tsh-border); background: var(--tsh-white); }
/* Its own width, so the flyer block's slider cannot reach the Promotions page. */
.tsh-promo-card__media {
	--tsh-stripe-w: 56px;
	aspect-ratio: 8.5 / 11; display: grid; place-items: center;
	background: repeating-linear-gradient(
		-58deg,
		var(--tsh-yellow) 0 var(--tsh-stripe-w),
		var(--tsh-surface) var(--tsh-stripe-w) calc(var(--tsh-stripe-w) * 2)
	);
}
.tsh-promo-card .tsh-promo-card__img { width: 100%; height: 100%; object-fit: cover; }
.tsh-promo-card__body { padding: var(--tsh-space-6); display: flex; flex-direction: column; gap: var(--tsh-space-4); align-items: flex-start; }
.tsh-promo-card__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-h3); margin: 0; }

.tsh-parts-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--tsh-border); border: 1px solid var(--tsh-border); }
.tsh-parts-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tsh-space-3); padding: var(--tsh-space-6); background: var(--tsh-white); }
.tsh-parts-card__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-h3); margin: 0; }
.tsh-parts-card p { font-size: var(--tsh-fs-base); line-height: 1.6; color: var(--tsh-text-2); margin: 0; }
.tsh-parts-card .tsh-btn { margin-top: auto; }

/* ── Banner link + callout ──────────────────────────────────────────────── */
.tsh-banner-link {
	display: flex; justify-content: space-between; align-items: center; gap: var(--tsh-space-4); flex-wrap: wrap;
	margin-top: var(--tsh-space-7); padding: var(--tsh-space-7) var(--tsh-space-8);
	background: var(--tsh-black); color: var(--tsh-white);
}
.tsh-banner-link strong { font-family: var(--tsh-font-head); font-weight: 400; font-size: var(--tsh-fs-h3); }
.tsh-banner-link span { display: inline-flex; align-items: center; gap: var(--tsh-space-2); color: var(--tsh-yellow); font-size: var(--tsh-fs-13); font-weight: 600; letter-spacing: 0.04em; }
.tsh-banner-link .tsh-icon { width: 16px; height: 16px; }
.tsh-callout { display: flex; justify-content: space-between; align-items: center; gap: var(--tsh-space-4); flex-wrap: wrap; margin-top: var(--tsh-space-7); padding-top: var(--tsh-space-6); border-top: 1px solid var(--tsh-border); }
.tsh-callout p { margin: 0; font-size: var(--tsh-fs-16); color: var(--tsh-text-2); max-width: 60ch; }

/* ── Item detail ────────────────────────────────────────────────────────── */
.tsh-detail { padding-block: var(--tsh-section-y); }
.tsh-detail__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.tsh-detail__media { position: sticky; top: 96px; background: var(--tsh-surface); }
.tsh-detail__img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--tsh-space-6); }
.tsh-detail__title { font-size: var(--tsh-fs-pillar); margin-bottom: var(--tsh-space-2); }
.tsh-detail__sku { font-size: var(--tsh-fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tsh-text-3); }
.tsh-detail__actions { display: flex; flex-wrap: wrap; gap: var(--tsh-space-3); margin: var(--tsh-space-6) 0; padding-bottom: var(--tsh-space-6); border-bottom: 1px solid var(--tsh-border); }
.tsh-specs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tsh-border); }
.tsh-specs li { padding: var(--tsh-space-3) 0; border-bottom: 1px solid var(--tsh-border); font-size: var(--tsh-fs-base); }
.tsh-downloads { list-style: none; padding: 0; margin: var(--tsh-space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--tsh-space-3); }
.tsh-download { display: inline-flex; align-items: center; gap: var(--tsh-space-2); padding: 14px 20px; border: 1px solid var(--tsh-border); font-size: var(--tsh-fs-base); font-weight: 600; }
.tsh-download:hover { border-color: var(--tsh-black); }
.tsh-download .tsh-icon { width: 16px; height: 16px; }
@media (max-width: 900px) {
	.tsh-detail__inner { grid-template-columns: 1fr; }
	.tsh-detail__media { position: static; }
}

/* ── Brand page ─────────────────────────────────────────────────────────── */
.tsh-brand-page__intro { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: var(--tsh-section-y); }
.tsh-brand-page__logo { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--tsh-surface); border: 1px solid var(--tsh-border); padding: var(--tsh-space-5); }
.tsh-brand-page__img { max-height: 100%; object-fit: contain; }
@media (max-width: 760px) { .tsh-brand-page__intro { grid-template-columns: 1fr; } .tsh-brand-page__logo { max-width: 240px; } }

/* ── Contact + locations ────────────────────────────────────────────────── */
.tsh-contact { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.tsh-contact .tsh-enquiry-panel { grid-template-columns: 1fr; }
@media (max-width: 980px) { .tsh-contact { grid-template-columns: 1fr; } }
.tsh-locations { display: grid; gap: var(--tsh-space-4); }
.tsh-locations__map { width: 100%; aspect-ratio: 4 / 3; border: 0; background: var(--tsh-surface); }
.tsh-location { padding: var(--tsh-space-5); background: var(--tsh-surface); border-left: var(--tsh-rule) solid var(--tsh-yellow); }
.tsh-location__title { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-16); margin-bottom: var(--tsh-space-2); }
.tsh-location p { margin: 0; font-size: var(--tsh-fs-base); line-height: 1.7; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.tsh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--tsh-border); border: 1px solid var(--tsh-border); list-style: none; margin: 0; padding: 0; }
.tsh-stat { display: flex; flex-direction: column; gap: var(--tsh-space-2); padding: var(--tsh-space-7); background: var(--tsh-white); }
.tsh-stat__num { font-family: var(--tsh-font-head); font-size: var(--tsh-fs-pillar); line-height: 1; }
.tsh-stat__label { font-size: var(--tsh-fs-sm); letter-spacing: var(--tsh-track-nav); text-transform: uppercase; color: var(--tsh-text-3); }

/* ── Enquiry pop-up ─────────────────────────────────────────────────────── */
.tsh-modal { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 0; background: var(--tsh-black); color: var(--tsh-white); }
.tsh-modal::backdrop { background: rgb(var(--tsh-black-rgb) / 0.72); }
.tsh-modal__panel { position: relative; padding: var(--tsh-panel-pad); border-top: 3px solid var(--tsh-yellow); }
.tsh-modal__close { position: absolute; top: var(--tsh-space-3); right: var(--tsh-space-3); background: none; border: 0; color: var(--tsh-grey-mid); cursor: pointer; padding: var(--tsh-space-2); }
.tsh-modal__close .tsh-icon { width: 24px; height: 24px; }
.tsh-modal__title { font-size: var(--tsh-fs-pillar); line-height: var(--tsh-leading-tight); margin-bottom: var(--tsh-space-6); }
.tsh-modal .tsh-eyebrow { color: var(--tsh-yellow); }
.tsh-modal__alt { font-size: var(--tsh-fs-sm); color: var(--tsh-grey-mid); margin: var(--tsh-space-5) 0 0; }
.tsh-modal__alt a { color: var(--tsh-yellow); text-decoration: underline; text-underline-offset: 3px; }

.tsh-notice { padding: var(--tsh-space-5); border: 1px dashed var(--tsh-border-dark); color: var(--tsh-grey-mid); }
.tsh-notice a { color: var(--tsh-yellow); }

/* The mockup's fields carry no visible labels — the placeholder names them. Labels stay
   in the markup for screen readers. */
.tsh-enquiry-panel .fluentform .ff-el-input--label,
.tsh-modal .fluentform .ff-el-input--label {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Fluent's fields in two columns, as in the mockup: name/company, email/phone,
   then the subject, timing and message across the full width. */
.tsh-enquiry-panel .fluentform form > fieldset,
.tsh-modal .fluentform form > fieldset {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
	border: 0; margin: 0; padding: 0; min-inline-size: 0;
}
.tsh-enquiry-panel .fluentform .ff-el-group,
.tsh-modal .fluentform .ff-el-group { margin-bottom: 14px; }
.tsh-enquiry-panel .fluentform .ff-el-group:has(textarea),
.tsh-enquiry-panel .fluentform .ff_submit_btn_wrapper,
.tsh-enquiry-panel .fluentform .ff-el-group.ff-custom_html,
.tsh-modal .fluentform .ff-el-group:has(textarea),
.tsh-modal .fluentform .ff_submit_btn_wrapper { grid-column: 1 / -1; }
.tsh-enquiry-panel .fluentform .ff-message-success,
.tsh-modal .fluentform .ff-message-success { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.tsh-enquiry-panel .fluentform form > fieldset,
	.tsh-modal .fluentform form > fieldset { grid-template-columns: 1fr; }
}

/* On the lattice ground the panel is a quick enquiry, as in the mockup: name, company,
   email, phone, request type and timing. The longer message box stays on the Contact
   page and in the pop-up. */
.tsh-enquiry-section .fluentform .ff-el-group:has(textarea) { display: none; }

/* ── Branding system (draft reference page) ─────────────────────────────── */
.tsh-brand__intro { font-size: var(--tsh-fs-16); line-height: 1.6; max-width: 62ch; margin: 0 0 var(--tsh-space-8); }
.tsh-brand__group { margin-bottom: var(--tsh-space-8); }
.tsh-brand__heading {
	font-family: var(--tsh-font-head); font-size: var(--tsh-fs-h3); margin: 0;
	padding-bottom: var(--tsh-space-3); border-bottom: var(--tsh-rule) solid var(--tsh-yellow);
}
.tsh-brand__note { margin: var(--tsh-space-4) 0 var(--tsh-space-6); max-width: 68ch; color: var(--tsh-text-2); font-size: var(--tsh-fs-base); line-height: 1.6; }
.tsh-brand__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tsh-space-5); }
.tsh-brand__grid--swatches { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tsh-brand__grid--surfaces { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tsh-brand__grid--rows { grid-template-columns: 1fr; gap: var(--tsh-space-4); }
.tsh-brand__item { display: flex; flex-direction: column; gap: var(--tsh-space-2); min-width: 0; }
.tsh-brand__grid--rows .tsh-brand__item {
	display: grid; grid-template-columns: minmax(0, 1fr) 22rem; align-items: center;
	gap: var(--tsh-space-5); padding-bottom: var(--tsh-space-4);
	border-bottom: var(--tsh-hairline) solid var(--tsh-border);
}
.tsh-brand__label { font-size: var(--tsh-fs-base); font-weight: 600; }
.tsh-brand__meta {
	font-family: var(--tsh-font-mono);
	font-size: var(--tsh-fs-sm); color: var(--tsh-text-3); word-break: break-word;
}
.tsh-brand__grid--rows .tsh-brand__label { grid-column: 2; align-self: end; margin-top: 0; }
.tsh-brand__grid--rows .tsh-brand__meta { grid-column: 2; align-self: start; }
.tsh-brand__grid--rows .tsh-brand__preview { grid-column: 1; grid-row: 1 / span 2; }
.tsh-brand__swatch { height: 96px; border: var(--tsh-hairline) solid var(--tsh-border); }
.tsh-brand__surface { height: 150px; border: var(--tsh-hairline) solid var(--tsh-border); }
.tsh-brand__type { color: var(--tsh-text); overflow-wrap: anywhere; }
.tsh-brand__space { height: 20px; background: var(--tsh-yellow); border: var(--tsh-hairline) solid var(--tsh-black); }
.tsh-brand__shape { height: 56px; width: 96px; }
.tsh-brand__rule { height: 0; }
.tsh-brand__chevron {
	height: 56px; width: 96px;
	clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 34px 50%);
}
.tsh-brand__motion {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding-inline: var(--tsh-space-5); width: max-content;
	background: var(--tsh-black); color: var(--tsh-white); font-size: var(--tsh-fs-13);
}
.tsh-brand__motion:hover { transform: translateX(var(--tsh-space-3)); }
@media (max-width: 720px) {
	.tsh-brand__grid--rows .tsh-brand__item { grid-template-columns: 1fr; }
	.tsh-brand__grid--rows .tsh-brand__label,
	.tsh-brand__grid--rows .tsh-brand__meta,
	.tsh-brand__grid--rows .tsh-brand__preview { grid-column: 1; grid-row: auto; }
}