/* ==========================================================================
   Trustber Ledger — main stylesheet
   --------------------------------------------------------------------------
   Every colour, radius, spacing and type value resolves from a CSS custom
   property emitted by inc/customizer-output.php. Nothing brand-specific is
   hard-coded here. The fallbacks in var() exist only so the stylesheet is
   still readable when opened outside WordPress.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token fallbacks and derived scale
   -------------------------------------------------------------------------- */

:root {
	--tbl-ink: #0a1428;
	--tbl-ink-soft: #142338;
	--tbl-ink-lift: #17233a;
	--tbl-accent: #0a9ade;
	--tbl-accent-deep: #087eb6;
	--tbl-accent-lift: #23a7e2;
	--tbl-accent-pale: #9dd7f2;
	--tbl-accent-text: #076692;
	--tbl-accent-wash: #e4f4fd;
	--tbl-accent2: #e9a23b;
	--tbl-accent2-wash: #fdf2e2;
	--tbl-accent2-deep: #79541f;
	--tbl-accent2-rgb: 233, 162, 59;
	--tbl-sky: #eaf6fe;
	--tbl-affirm-wash: #e6f6ef;
	--tbl-affirm-deep: #0b7350;
	--tbl-on-sky: #0a1428;
	--tbl-paper: #ffffff;
	--tbl-mist: #f2f7fb;
	--tbl-affirm: #0e9f6e;
	--tbl-line: #dde6ef;
	--tbl-muted: #566b84;

	--tbl-ink-rgb: 10, 20, 40;
	--tbl-accent-rgb: 10, 154, 222;
	--tbl-paper-rgb: 255, 255, 255;

	--tbl-on-ink: #ffffff;
	--tbl-on-mist: #0a1428;
	--tbl-on-accent: #0a1428;
	--tbl-on-paper: #0a1428;

	--tbl-cta-bg: #0a1428;
	--tbl-cta-fg: #ffffff;
	--tbl-cta-bg-hover: #17233a;

	--tbl-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
	--tbl-font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
	--tbl-scale: 1;
	--tbl-tracking: -0.02em;

	--tbl-radius: 20px;
	--tbl-radius-sm: 10px;
	--tbl-radius-lg: 32px;
	--tbl-radius-pill: 999px;
	--tbl-container: 1200px;
	--tbl-section: 84px;
	--tbl-curve-h: 64px;
	--tbl-adminbar: 0px;

	/* Fluid type scale, uniformly multiplied by the Customizer scale. */
	--tbl-fs-display: calc(clamp(2.1rem, 1.3rem + 3.3vw, 3.5rem) * var(--tbl-scale));
	--tbl-fs-h1: calc(clamp(1.95rem, 1.35rem + 2.4vw, 2.9rem) * var(--tbl-scale));
	--tbl-fs-h2: calc(clamp(1.65rem, 1.2rem + 1.8vw, 2.35rem) * var(--tbl-scale));
	--tbl-fs-h3: calc(clamp(1.2rem, 1.02rem + 0.72vw, 1.5rem) * var(--tbl-scale));
	--tbl-fs-lede: calc(clamp(1.06rem, 0.98rem + 0.4vw, 1.25rem) * var(--tbl-scale));
	--tbl-fs-body: calc(1rem * var(--tbl-scale));
	--tbl-fs-sm: calc(0.875rem * var(--tbl-scale));
	--tbl-fs-xs: calc(0.78rem * var(--tbl-scale));

	--tbl-gap: clamp(16px, 1.8vw, 26px);
	--tbl-pad-x: clamp(20px, 4vw, 40px);

	--tbl-shadow-sm: 0 1px 2px rgba(var(--tbl-ink-rgb), 0.05);
	--tbl-shadow: 0 10px 30px -12px rgba(var(--tbl-ink-rgb), 0.16);
	--tbl-shadow-lg: 0 28px 64px -28px rgba(var(--tbl-ink-rgb), 0.3);

	--tbl-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45 6.2 20.5l1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
	--tbl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tbl-header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

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

@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-color: var(--tbl-paper);
	color: var(--tbl-on-paper);
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.tbl-drawer-open {
	overflow: hidden;
}

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

a {
	color: var(--tbl-accent-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--tbl-ease);
}

a:hover {
	color: var(--tbl-accent);
}

button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--tbl-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tbl-font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--tbl-tracking);
	margin: 0 0 0.5em;
	color: inherit;
	text-wrap: balance;
}

p {
	margin: 0 0 1.1em;
}

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

.tbl-accent {
	color: var(--tbl-accent);
}

/* Newsreader is an optical-size serif — let it use the display cut. */
.tbl-hero__title,
.tbl-section__title,
.tbl-founder__name {
	font-variation-settings: "opsz" 48;
}

.tbl-eyebrow {
	display: inline-block;
	margin: 0 0 20px;
	padding: 7px 16px;
	border-radius: var(--tbl-radius-pill);
	background-color: var(--tbl-accent-wash);
	color: var(--tbl-accent-text);
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.tbl-section__title {
	font-size: var(--tbl-fs-h2);
	max-width: 22ch;
	margin-bottom: 0.6em;
}

.tbl-section__title--center {
	margin-inline: auto;
	text-align: center;
	max-width: 20ch;
}

.tbl-prose {
	font-size: var(--tbl-fs-lede);
}

.tbl-prose h2 {
	font-size: var(--tbl-fs-h2);
	margin-top: 1.6em;
}

.tbl-prose h3 {
	font-size: var(--tbl-fs-h3);
	margin-top: 1.4em;
}

.tbl-prose > :first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.tbl-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	isolation: isolate;
}

.tbl-main {
	flex: 1 0 auto;
}

.tbl-container {
	width: 100%;
	max-width: var(--tbl-container);
	margin-inline: auto;
	padding-inline: var(--tbl-pad-x);
}

.tbl-container--narrow {
	max-width: 780px;
}

.tbl-band {
	position: relative;
	padding-block: var(--tbl-section);
}

/* Reserve the full curve height plus a constant share of the section
   rhythm, so clearance between the curve and the first line of content
   stays the same whether the curve is 24px or 180px deep. */
.tbl-band--top-curve {
	padding-top: calc(var(--tbl-curve-h) + var(--tbl-section) * 0.7);
}

.tbl-band--bottom-curve {
	padding-bottom: calc(var(--tbl-curve-h) + var(--tbl-section) * 0.7);
}

.tbl-band--paper {
	background-color: var(--tbl-paper);
	color: var(--tbl-on-paper);
}

.tbl-band--mist {
	background-color: var(--tbl-mist);
	color: var(--tbl-on-mist);
}

.tbl-band--sky {
	background-color: var(--tbl-sky);
	color: var(--tbl-on-sky);
}

/* Azure: a solid, saturated blue for the homepage hero when the quiet paper
   treatment is not wanted. Deliberately built on the same band mechanics as
   every other section, so the curve, the spacing and the grid are unchanged —
   only the surface colour and what sits on it. */
.tbl-band--azure {
	background-color: var(--tbl-azure);
	color: var(--tbl-on-azure);
	position: relative;
	overflow: hidden;
}

/* Stops a large flat field of one colour reading as a printed block. */
.tbl-band--azure::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(60% 70% at 78% 12%, rgba(255, 255, 255, 0.16), transparent 62%),
		radial-gradient(52% 60% at 8% 92%, rgba(0, 0, 0, 0.14), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.tbl-band--azure > * {
	position: relative;
	z-index: 1;
}

/* The accent word is the whole point of the headline, and the standard accent
   is too near the background to carry here. Reversed to white with the warm
   accent underlining it instead. */
.tbl-band--azure .tbl-hero__title .tbl-accent,
.tbl-band--azure .tbl-hero__title em {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--tbl-accent2);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.tbl-band--azure .tbl-hero__lede {
	color: rgba(255, 255, 255, 0.92);
}

.tbl-band--azure .tbl-eyebrow {
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.tbl-band--azure .tbl-credstrip__item {
	color: rgba(255, 255, 255, 0.86);
	border-color: rgba(255, 255, 255, 0.24);
}

/* Primary action inverts: white block on blue reads louder than blue on blue,
   and keeps the contrast ratio comfortably clear. */
.tbl-band--azure .tbl-btn--primary {
	background-color: #fff;
	border-color: #fff;
	color: var(--tbl-ink);
}

.tbl-band--azure .tbl-btn--primary:hover,
.tbl-band--azure .tbl-btn--primary:focus-visible {
	background-color: var(--tbl-accent2);
	border-color: var(--tbl-accent2);
	color: var(--tbl-ink);
}

.tbl-band--azure .tbl-btn--ghost {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.tbl-band--azure .tbl-btn--ghost:hover,
.tbl-band--azure .tbl-btn--ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

/* --------------------------------------------------------------------------
   Azure hero, the loud treatment
   --------------------------------------------------------------------------
   Colour alone does not make a hero carry. What reads as "popping" is really
   three things working together: a saturated field, a clear focal object with
   depth behind it, and a decisive gap between the largest and smallest type on
   screen. The band supplies the field; the rules below supply the other two. */

.tbl-hero.tbl-band--azure {
	/* The paper wash is tuned for a white ground and muddies a saturated one. */
	background-image: none;
	padding-top: clamp(44px, 5.4vw, 84px);
	padding-bottom: clamp(56px, 6vw, 92px);
}

/* Type carries further on a dark ground, so the display size can go up and
   the tracking can come in without the headline feeling cramped. */
.tbl-band--azure .tbl-hero__title {
	font-size: clamp(2.6rem, 6.2vw, 4.6rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.tbl-band--azure .tbl-hero__lede {
	max-width: 46ch;
	font-size: clamp(1.05rem, 1.35vw, 1.2rem);
}

/* Depth, restrained.
   The first attempt put a full offset slab behind the image. At that size it
   stops reading as depth and starts reading as a second rectangle arguing with
   the photograph. What actually lifts an image off a saturated field is a
   crisp edge and a soft shadow; the warm accent then does more work as a short
   anchoring bar than as a block, and it echoes the underline already carrying
   the accent word in the headline. */
.tbl-band--azure .tbl-hero__figure {
	position: relative;
	box-shadow:
		0 22px 50px -20px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.22);
}

.tbl-band--azure .tbl-hero__media {
	position: relative;
}

/* A short bar anchored under the lower left corner. Deliberately narrower than
   the image and only a few pixels deep, so it reads as a mark rather than a
   shape. */
.tbl-band--azure .tbl-hero__media::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -14px;
	width: clamp(88px, 34%, 190px);
	height: 6px;
	border-radius: 3px;
	background-color: var(--tbl-accent2);
	z-index: 0;
}

.tbl-band--azure .tbl-hero__media > * {
	position: relative;
	z-index: 1;
}

.tbl-band--azure .tbl-hero__inset {
	box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45);
	border: 2px solid rgba(255, 255, 255, 0.85);
}

/* The eyebrow becomes a marker rather than a whisper. */
.tbl-band--azure .tbl-eyebrow {
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* A primary action on a saturated field needs weight, not just contrast. */
.tbl-band--azure .tbl-btn--primary {
	box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.55);
	font-weight: 650;
}

.tbl-band--azure .tbl-btn--primary:hover,
.tbl-band--azure .tbl-btn--primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Credentials are the quietest thing on the screen and should stay that way,
   but they still have to clear contrast. A hairline separates them. */
.tbl-band--azure .tbl-credstrip {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: 18px;
	margin-top: 30px;
}

@media (max-width: 860px) {
	.tbl-band--azure .tbl-hero__media::after {
		bottom: -10px;
		width: clamp(72px, 30%, 140px);
		height: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbl-band--azure .tbl-btn--primary:hover,
	.tbl-band--azure .tbl-btn--primary:focus-visible {
		transform: none;
	}
}

.tbl-band--ink {
	background-color: var(--tbl-ink);
	color: var(--tbl-on-ink);
	position: relative;
	overflow: hidden;
}

/* A soft azure bloom keeps the dark bands from reading as flat black. */
.tbl-band--ink::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tbl-wash-ink);
	pointer-events: none;
	z-index: 0;
}

.tbl-band--ink .tbl-eyebrow {
	background-color: rgba(var(--tbl-accent-rgb), 0.18);
	color: var(--tbl-accent-pale);
}

.tbl-grid {
	display: grid;
	gap: var(--tbl-gap);
}

.tbl-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.tbl-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.tbl-split {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.tbl-split {
		grid-template-columns: 1.05fr 1fr;
		align-items: start;
	}
}

.tbl-split__lead .tbl-section__title {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Curves
   -------------------------------------------------------------------------- */

.tbl-curve {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--tbl-curve-h);
	line-height: 0;
	pointer-events: none;
	z-index: 0;
}

.tbl-curve svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tbl-curve--top {
	top: -1px;
	height: calc(var(--tbl-curve-h) + 1px);
}

.tbl-curve--bottom {
	bottom: -1px;
	height: calc(var(--tbl-curve-h) + 1px);
	transform: scaleY(-1);
}

.tbl-curve.is-flipped svg {
	transform: scaleX(-1);
}

/* Content must sit above the curve fill. */
.tbl-band > .tbl-container,
.tbl-footer > .tbl-container {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.tbl-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--tbl-radius-pill);
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--tbl-ease),
		color 0.2s var(--tbl-ease),
		border-color 0.2s var(--tbl-ease),
		transform 0.2s var(--tbl-ease);
}

.tbl-btn:hover {
	transform: translateY(-1px);
}

.tbl-btn .tbl-icon {
	width: 17px;
	height: 17px;
	flex: none;
	transition: transform 0.2s var(--tbl-ease);
}

.tbl-btn:hover .tbl-icon {
	transform: translateX(3px);
}

.tbl-btn--accent {
	background-color: var(--tbl-accent);
	border-color: var(--tbl-accent);
	color: var(--tbl-on-accent);
}

.tbl-btn--accent:hover {
	background-color: var(--tbl-accent-deep);
	border-color: var(--tbl-accent-deep);
	color: var(--tbl-on-accent);
}

.tbl-btn--ink {
	background-color: var(--tbl-ink);
	border-color: var(--tbl-ink);
	color: var(--tbl-on-ink);
}

.tbl-btn--ghost {
	background-color: transparent;
	border-color: var(--tbl-line);
	color: currentColor;
}

.tbl-btn--ghost:hover {
	border-color: currentColor;
	color: currentColor;
}

.tbl-band--ink .tbl-btn--ghost {
	border-color: rgba(var(--tbl-paper-rgb), 0.28);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.tbl-header {
	position: relative;
	z-index: 60;
	padding-block: 16px;
}

.tbl-header.is-sticky {
	position: sticky;
	top: var(--tbl-adminbar);
}

.tbl-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	width: 100%;
	max-width: var(--tbl-container);
	margin-inline: auto;
	padding: 10px var(--tbl-pad-x);
	min-height: var(--tbl-header-h);
	background-color: rgba(var(--tbl-paper-rgb), 0.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	transition: box-shadow 0.25s var(--tbl-ease), background-color 0.25s var(--tbl-ease);
}

.tbl-header.is-floating .tbl-header__inner {
	max-width: calc(var(--tbl-container) - 24px);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-pill);
	padding-inline: clamp(16px, 2.4vw, 28px);
}

.tbl-header.is-scrolled .tbl-header__inner {
	background-color: rgba(var(--tbl-paper-rgb), 0.96);
	box-shadow: var(--tbl-shadow);
}

.tbl-brand {
	flex: none;
	display: flex;
	align-items: center;
}

.tbl-brand img,
.tbl-brand .custom-logo {
	max-height: 40px;
	width: auto;
}

.tbl-brand__wordmark {
	font-family: var(--tbl-font-display);
	font-size: calc(1.3rem * var(--tbl-scale));
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--tbl-ink);
	text-decoration: none;
}

.tbl-nav {
	flex: 1 1 auto;
	display: none;
	justify-content: center;
	min-width: 0;
}

.tbl-nav__list,
.tbl-nav__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbl-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 1.8vw, 30px);
}

.tbl-nav__list li {
	position: relative;
}

.tbl-nav__list a {
	display: block;
	padding: 8px 2px;
	color: var(--tbl-ink);
	font-size: var(--tbl-fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.tbl-nav__list a:hover,
.tbl-nav__list .current-menu-item > a,
.tbl-nav__list .current-menu-ancestor > a,
.tbl-nav__list .current_page_item > a,
.tbl-nav__list .current_page_ancestor > a {
	color: var(--tbl-accent-text);
}

/* Dropdowns */
.tbl-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	/* Wide enough that the three service names sit on one line each.
	   max-width keeps a long future item from stretching the panel. */
	min-width: 284px;
	max-width: 360px;
	padding: 10px;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
	box-shadow: var(--tbl-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.18s var(--tbl-ease), transform 0.18s var(--tbl-ease), visibility 0.18s;
}

.tbl-nav__list li:hover > .sub-menu,
.tbl-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.tbl-nav__list .sub-menu a {
	padding: 10px 14px;
	border-radius: var(--tbl-radius-sm);
	white-space: normal;
	line-height: 1.35;
}

.tbl-nav__list .sub-menu a:hover {
	background-color: var(--tbl-mist);
}

.tbl-nav__empty a {
	font-size: var(--tbl-fs-xs);
	color: var(--tbl-muted);
}

.tbl-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-left: auto;
}

.tbl-header__search-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid var(--tbl-line);
	border-radius: 50%;
	color: var(--tbl-ink);
}

.tbl-header__search-toggle:hover {
	border-color: var(--tbl-accent);
	color: var(--tbl-accent);
}

.tbl-header__search {
	padding-block: 18px;
	border-top: 1px solid var(--tbl-line);
	background-color: var(--tbl-paper);
}

.tbl-portal {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: var(--tbl-fs-sm);
	font-weight: 500;
	color: var(--tbl-ink);
	text-decoration: none;
}

.tbl-portal:hover {
	color: var(--tbl-accent);
}

.tbl-portal .tbl-icon {
	width: 14px;
	height: 14px;
}

.tbl-header__cta {
	display: none;
}

/* Burger */
.tbl-burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--tbl-line);
	border-radius: 50%;
	color: var(--tbl-ink);
}

.tbl-burger__box {
	display: grid;
	gap: 4px;
	width: 18px;
}

.tbl-burger__bar {
	display: block;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform 0.22s var(--tbl-ease), opacity 0.16s var(--tbl-ease);
}

.tbl-burger[aria-expanded="true"] .tbl-burger__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.tbl-burger[aria-expanded="true"] .tbl-burger__bar:nth-child(2) {
	opacity: 0;
}

.tbl-burger[aria-expanded="true"] .tbl-burger__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Responsive switch.
   These rules must come after every base rule they override — a later
   declaration of equal specificity wins, so declaring .tbl-burger's
   display below this block silently re-enables it on desktop. */
@media (min-width: 1040px) {
	.tbl-nav,
	.tbl-portal--header,
	.tbl-header__cta {
		display: flex;
	}

	.tbl-burger {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   8. Mobile drawer
   -------------------------------------------------------------------------- */

.tbl-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.tbl-drawer[hidden] {
	display: none;
}

.tbl-drawer__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background-color: rgba(var(--tbl-ink-rgb), 0.5);
	border: 0;
	opacity: 0;
	transition: opacity 0.26s var(--tbl-ease);
}

.tbl-drawer.is-open .tbl-drawer__scrim {
	opacity: 1;
}

.tbl-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 26px;
	width: min(400px, 88vw);
	padding: 24px var(--tbl-pad-x) 40px;
	background-color: var(--tbl-paper);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.3s var(--tbl-ease);
}

.tbl-drawer.is-open .tbl-drawer__panel {
	transform: translateX(0);
}

.tbl-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tbl-drawer__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--tbl-line);
	border-radius: 50%;
	color: var(--tbl-ink);
}

.tbl-drawer__list,
.tbl-drawer__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbl-drawer__list > li,
.tbl-drawer__list > .page_item {
	border-bottom: 1px solid var(--tbl-line);
}

.tbl-drawer__list a {
	display: block;
	padding: 15px 0;
	color: var(--tbl-ink);
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
	text-decoration: none;
}

.tbl-drawer__list .sub-menu {
	padding: 0 0 12px 14px;
	border-left: 2px solid var(--tbl-line);
	margin-bottom: 10px;
}

.tbl-drawer__list .sub-menu a {
	padding: 8px 0;
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-body);
	font-weight: 500;
	color: var(--tbl-muted);
}

.tbl-drawer__actions {
	display: grid;
	gap: 12px;
	justify-items: start;
}

.tbl-drawer__actions .tbl-btn {
	width: 100%;
	justify-content: center;
}

.tbl-portal--drawer {
	display: inline-flex;
}

.tbl-drawer__meta {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--tbl-line);
}

.tbl-drawer__contact {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
	text-decoration: none;
}

.tbl-drawer__contact:hover {
	color: var(--tbl-accent);
}

.tbl-drawer__contact .tbl-icon {
	width: 17px;
	height: 17px;
	flex: none;
}

/* --------------------------------------------------------------------------
   9. Hero and page heads
   -------------------------------------------------------------------------- */

.tbl-hero {
	position: relative;
	padding-top: clamp(34px, 4.4vw, 68px);
	padding-bottom: clamp(48px, 5vw, 76px);
	background-image: var(--tbl-wash-hero);
	overflow: hidden;
}

.tbl-hero__inner {
	max-width: 900px;
}

.tbl-hero__title {
	font-size: var(--tbl-fs-display);
	margin-bottom: 0.3em;
	line-height: 1.05;
}

.tbl-hero__lede {
	max-width: 52ch;
	font-size: var(--tbl-fs-lede);
	color: var(--tbl-muted);
}

.tbl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
	margin-bottom: 0;
}

.tbl-hero__actions--center {
	justify-content: center;
}

.tbl-pagehead {
	padding-block: clamp(48px, 6vw, 84px) clamp(28px, 3vw, 44px);
}

.tbl-pagehead__title {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 0;
}

.tbl-pagehead__intro {
	margin-top: 16px;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.tbl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
	transition: transform 0.24s var(--tbl-ease), box-shadow 0.24s var(--tbl-ease), border-color 0.24s var(--tbl-ease);
}

.tbl-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--tbl-shadow-lg);
}

.tbl-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--tbl-mist);
}

.tbl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--tbl-ease);
}

.tbl-card:hover .tbl-card__media img {
	transform: scale(1.04);
}

.tbl-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: clamp(18px, 2.1vw, 26px);
}

.tbl-card__meta {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tbl-card__title {
	font-size: var(--tbl-fs-h3);
	margin: 0;
}

.tbl-card__title a {
	color: inherit;
	text-decoration: none;
}

.tbl-card__title a:hover {
	color: var(--tbl-accent);
}

.tbl-card__excerpt {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* The whole card is the target. "Learn more" reads as a control, so it has
   to behave like one — but adding a second anchor would give every card two
   links to the same place. Stretching the title's link over the card keeps
   one link per card and makes the entire surface clickable. */
.tbl-card__title a::after,
.tbl-nextcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tbl-card__body,
.tbl-nextcard {
	position: relative;
}

.tbl-card__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
}

.tbl-card__more .tbl-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--tbl-ease);
}

.tbl-card:hover .tbl-card__more .tbl-icon {
	transform: translate(3px, -3px);
}

.tbl-card__more .tbl-icon--arrow {
	transition: transform 0.2s var(--tbl-ease);
}

.tbl-card:hover .tbl-card__more .tbl-icon--arrow {
	transform: translate(4px, 0);
}

/* --------------------------------------------------------------------------
   11. Lists and misc components
   -------------------------------------------------------------------------- */

.tbl-ticks {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.tbl-ticks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--tbl-fs-body);
}

.tbl-ticks .tbl-icon {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 3px;
	color: var(--tbl-affirm);
}

.tbl-band--ink .tbl-ticks .tbl-icon {
	color: var(--tbl-affirm);
}

.tbl-cta__lede {
	max-width: 56ch;
	margin-inline: auto;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
	text-align: center;
}

.tbl-search {
	display: flex;
	gap: 8px;
	align-items: center;
}

.tbl-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 18px;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-ink);
	font: inherit;
	font-size: var(--tbl-fs-sm);
}

.tbl-search__field:focus {
	border-color: var(--tbl-accent);
	outline: none;
}

.tbl-search__submit {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	padding: 0;
	background-color: var(--tbl-accent);
	border: 0;
	border-radius: 50%;
	color: var(--tbl-on-accent);
}

.tbl-search__submit:hover {
	background-color: var(--tbl-accent-deep);
}

.tbl-empty {
	padding-block: clamp(40px, 6vw, 80px);
	text-align: center;
}

.tbl-empty .tbl-search {
	max-width: 420px;
	margin: 24px auto 0;
}

.tbl-404 {
	padding-block: clamp(60px, 8vw, 120px);
	text-align: center;
}

.tbl-404__title {
	font-size: var(--tbl-fs-h1);
}

.tbl-404__body {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-404 .tbl-search {
	max-width: 420px;
	margin: 28px auto 0;
}

.tbl-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

.tbl-article__media {
	margin: 0 0 clamp(28px, 4vw, 48px);
	overflow: hidden;
	border-radius: var(--tbl-radius-lg);
}

.tbl-pagination {
	margin-top: clamp(36px, 5vw, 64px);
}

.tbl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.tbl-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-ink);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.tbl-pagination .page-numbers:hover,
.tbl-pagination .page-numbers.current {
	background-color: var(--tbl-ink);
	border-color: var(--tbl-ink);
	color: var(--tbl-on-ink);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.tbl-footer {
	position: relative;
	overflow: hidden;
	flex: none;
	padding-block: calc(var(--tbl-section) * 0.9) 40px;
	background-color: var(--tbl-ink);
	color: var(--tbl-on-ink);
	font-size: var(--tbl-fs-sm);
}

.tbl-footer.tbl-band--top-curve {
	padding-top: calc(var(--tbl-curve-h) + var(--tbl-section) * 0.62);
}

.tbl-footer a {
	color: rgba(var(--tbl-paper-rgb), 0.78);
	text-decoration: none;
}

.tbl-footer a:hover {
	color: var(--tbl-paper);
}

.tbl-footer__top {
	display: grid;
	gap: clamp(32px, 4vw, 56px);
	grid-template-columns: 1fr;
	padding-bottom: clamp(32px, 4vw, 52px);
}

@media (min-width: 720px) {
	.tbl-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.tbl-footer__top {
		grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
	}
}

.tbl-brand--footer .tbl-brand__wordmark,
.tbl-brand--drawer .tbl-brand__wordmark {
	color: inherit;
}

.tbl-brand--footer .tbl-brand__wordmark {
	color: var(--tbl-on-ink);
}

.tbl-footer__tagline {
	margin: 14px 0 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.tbl-footer__blurb {
	margin: 12px 0 0;
	max-width: 42ch;
	color: rgba(var(--tbl-paper-rgb), 0.62);
}

.tbl-footer__heading {
	margin: 0 0 16px;
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: rgba(var(--tbl-paper-rgb), 0.5);
}

.tbl-footer__list,
.tbl-footer__contact,
.tbl-footer__legal,
.tbl-footer__credentials,
.tbl-social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbl-footer__list li + li {
	margin-top: 10px;
}

.tbl-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: rgba(var(--tbl-paper-rgb), 0.68);
}

.tbl-footer__contact li + li {
	margin-top: 14px;
}

.tbl-footer__contact .tbl-icon {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 4px;
	color: var(--tbl-accent-lift);
}

.tbl-portal--footer {
	display: inline-flex;
	margin-top: 20px;
	padding: 11px 20px;
	border: 1px solid rgba(var(--tbl-paper-rgb), 0.24);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-on-ink);
	font-weight: 600;
}

.tbl-portal--footer:hover {
	border-color: var(--tbl-accent);
	background-color: var(--tbl-accent);
}

.tbl-social {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.tbl-social__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(var(--tbl-paper-rgb), 0.2);
	border-radius: 50%;
	color: rgba(var(--tbl-paper-rgb), 0.78);
}

.tbl-social__link:hover {
	background-color: var(--tbl-accent);
	border-color: var(--tbl-accent);
	color: var(--tbl-on-accent);
}

.tbl-social .tbl-icon {
	width: 18px;
	height: 18px;
}

.tbl-footer__credentials {
	display: grid;
	gap: 8px;
	padding-block: clamp(24px, 3vw, 34px);
	border-top: 1px solid rgba(var(--tbl-paper-rgb), 0.12);
	color: rgba(var(--tbl-paper-rgb), 0.52);
	font-size: var(--tbl-fs-xs);
}

@media (min-width: 900px) {
	.tbl-footer__credentials {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

.tbl-footer__disclosure {
	padding-block: 20px;
	border-top: 1px solid rgba(var(--tbl-paper-rgb), 0.12);
	color: rgba(var(--tbl-paper-rgb), 0.52);
	font-size: var(--tbl-fs-xs);
}

.tbl-footer__widget-title {
	font-size: var(--tbl-fs-xs);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: rgba(var(--tbl-paper-rgb), 0.5);
}

.tbl-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-top: clamp(20px, 2.5vw, 30px);
	border-top: 1px solid rgba(var(--tbl-paper-rgb), 0.12);
	color: rgba(var(--tbl-paper-rgb), 0.5);
	font-size: var(--tbl-fs-xs);
}

.tbl-footer__bar p {
	margin: 0;
}

.tbl-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   13. Accessibility utilities
   -------------------------------------------------------------------------- */

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

.tbl-skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: calc(var(--tbl-adminbar) + 12px);
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 12px 22px;
	clip: auto;
	clip-path: none;
	background-color: var(--tbl-ink);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-on-ink);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.tbl-main:focus {
	outline: none;
}

.tbl-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
	.tbl-header,
	.tbl-drawer,
	.tbl-curve,
	.tbl-social,
	.tbl-btn {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* ==========================================================================
   LAYER 2 — homepage modules
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. Buttons (Layer 2 variants)
   -------------------------------------------------------------------------- */

.tbl-btn--primary {
	background-color: var(--tbl-cta-bg);
	border-color: var(--tbl-cta-bg);
	color: var(--tbl-cta-fg);
}

.tbl-btn--primary:hover {
	background-color: var(--tbl-cta-bg-hover);
	border-color: var(--tbl-cta-bg-hover);
	color: var(--tbl-cta-fg);
}

.tbl-btn--accent {
	background-color: var(--tbl-accent);
	border-color: var(--tbl-accent);
	color: var(--tbl-on-accent);
}

.tbl-btn--accent:hover {
	background-color: var(--tbl-accent-deep);
	border-color: var(--tbl-accent-deep);
	color: #fff;
}

/* On the ink band: paper button, ink text. */
.tbl-btn--onink {
	background-color: var(--tbl-paper);
	border-color: var(--tbl-paper);
	color: var(--tbl-ink);
}

.tbl-btn--onink:hover {
	background-color: var(--tbl-accent);
	border-color: var(--tbl-accent);
	color: var(--tbl-on-accent);
}

.tbl-quietlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.tbl-quietlink .tbl-icon {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   16. Image slots and placeholders
   -------------------------------------------------------------------------- */

.tbl-img {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--tbl-radius);
	background-color: var(--tbl-mist);
	aspect-ratio: var(--tbl-img-ratio, 4 / 3);
}

.tbl-img__el,
.tbl-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tbl-img.is-placeholder {
	display: grid;
	place-items: center;
	background-color: var(--tbl-mist);
	border: 1px dashed var(--tbl-line);
	box-shadow: inset 0 0 0 1px rgba(var(--tbl-paper-rgb), 0.6);
}

.tbl-img__ph {
	display: grid;
	gap: 6px;
	padding: 16px;
	text-align: center;
	color: var(--tbl-muted);
}

.tbl-img__ph-label {
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
}

.tbl-img__ph-size {
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--tbl-accent-text);
}

.tbl-band--ink .tbl-img.is-placeholder {
	background-color: var(--tbl-ink-soft);
	border-color: rgba(var(--tbl-paper-rgb), 0.18);
	box-shadow: none;
}

.tbl-band--ink .tbl-img__ph {
	color: rgba(var(--tbl-paper-rgb), 0.6);
}

.tbl-band--ink .tbl-img__ph-size {
	color: var(--tbl-accent-pale);
}

/* --------------------------------------------------------------------------
   17. Hero
   -------------------------------------------------------------------------- */

.tbl-hero__grid {
	display: grid;
	gap: clamp(36px, 5vw, 64px);
	grid-template-columns: 1fr;
	/* Not centre. Centring the copy against a tall portrait image is what
	   pushed the headline and call to action down the page. Capping the
	   image fixed that but left the image small. Aligning to the top
	   decouples the two: the image runs at full height and the copy stays
	   exactly where it is. */
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-hero__grid {
		grid-template-columns: 1fr 1.04fr;
	}

	.tbl-hero__media {
		margin-top: 6px;
	}
}

.tbl-hero__media {
	transform: translateY(var(--tbl-parallax, 0));
	transition: transform 0.1s linear;
}

.tbl-hero__copy {
	max-width: 40rem;
	align-self: start;
}

.tbl-eyebrow--dot::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: var(--tbl-accent);
	vertical-align: 0.12em;
}

.tbl-credstrip {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--tbl-line);
}

.tbl-credstrip__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--tbl-muted);
	text-transform: uppercase;
}

.tbl-credstrip .tbl-icon {
	width: 16px;
	height: 16px;
	color: var(--tbl-accent);
}

.tbl-hero__media {
	position: relative;
}

.tbl-hero__figure {
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow-lg);
}

.tbl-hero__inset {
	position: absolute;
	left: -6%;
	/* Kept shallow so the overlap always clears the band's bottom padding.
	   The hero has overflow:hidden for the gradient wash, so anything that
	   hangs further than the padding gets clipped rather than overlapping. */
	bottom: -4%;
	width: 52%;
	max-width: 300px;
	border: 6px solid var(--tbl-paper);
	border-radius: var(--tbl-radius);
	box-shadow: var(--tbl-shadow);
}

@media (max-width: 599px) {
	.tbl-hero__inset {
		position: static;
		width: 100%;
		max-width: none;
		margin-top: 16px;
		border-width: 0;
	}
}

/* --------------------------------------------------------------------------
   18. Trust bar
   -------------------------------------------------------------------------- */

.tbl-trustbar {
	padding-block: 0 var(--tbl-section);
}

.tbl-trustbar__list {
	list-style: none;
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--tbl-line);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
}

@media (min-width: 760px) {
	.tbl-trustbar__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.tbl-trustbar__item {
	display: grid;
	gap: 6px;
	padding: clamp(22px, 3vw, 34px) clamp(16px, 2vw, 28px);
	background-color: var(--tbl-paper);
	text-align: center;
}

.tbl-trustbar__value {
	font-family: var(--tbl-font-display);
	font-size: calc(clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem) * var(--tbl-scale));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--tbl-tracking);
	color: var(--tbl-ink);
}

.tbl-trustbar__label {
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tbl-muted);
}

/* --------------------------------------------------------------------------
   19. Section headings
   -------------------------------------------------------------------------- */

.tbl-sechead {
	margin-bottom: clamp(24px, 3vw, 38px);
}

.tbl-sechead__intro {
	max-width: 52ch;
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-sechead--center {
	text-align: center;
}

.tbl-sechead--center .tbl-section__title {
	margin-inline: auto;
}

.tbl-sechead--center .tbl-sechead__intro {
	margin-inline: auto;
}

@media (min-width: 900px) {
	.tbl-sechead--split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(28px, 4vw, 56px);
		align-items: end;
	}

	.tbl-sechead--split .tbl-eyebrow {
		grid-column: 1;
	}

	.tbl-sechead--split .tbl-section__title {
		grid-column: 1;
		margin-bottom: 0;
	}

	.tbl-sechead--split .tbl-sechead__intro {
		grid-column: 2;
		grid-row: 2;
	}
}

/* --------------------------------------------------------------------------
   20. Service cards
   -------------------------------------------------------------------------- */

.tbl-card--service .tbl-card__media {
	aspect-ratio: auto;
	background: none;
}

.tbl-card--service .tbl-img {
	border-radius: 0;
}

.tbl-ticks--tight {
	margin-top: 4px;
	gap: 8px;
}

.tbl-ticks--tight li {
	font-size: var(--tbl-fs-sm);
	color: var(--tbl-muted);
}

.tbl-ticks--tight .tbl-icon {
	width: 17px;
	height: 17px;
	margin-top: 2px;
}

/* Two by two, declared rather than negotiated.
   Four across was tried and abandoned. The row count has to follow what is in
   the card, not the number of items: these carry a photograph, a heading, a
   sentence and three ticked bullets, and at roughly 240px the photo becomes a
   thumbnail, the heading wraps three times and a bullet like "Multi-state and
   military residence" breaks mid-phrase. At two across each card is around
   550px and every one of those problems disappears.
   Four services is not so many that a second row costs anything, and both rows
   sit above the fold on a normal screen.
   minmax(0, 1fr) rather than 1fr: a grid track's default minimum is its
   content, so a long word or a wide image would otherwise push the row past
   the container instead of shrinking inside it. */
.tbl-grid--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
	.tbl-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.tbl-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(14px, 1.4vw, 20px);
	}

	/* At roughly 250px a card is legible but unforgiving, so padding and type
	   come in rather than letting text crowd the edges. */
	.tbl-grid--4 .tbl-card__body {
		padding: 20px 18px 22px;
	}

	.tbl-grid--4 .tbl-card__title {
		font-size: 1.12rem;
		line-height: 1.25;
	}

	.tbl-grid--4 .tbl-card__excerpt,
	.tbl-grid--4 .tbl-ticks {
		font-size: 0.94rem;
	}
}

/* --------------------------------------------------------------------------
   21. Advantage band
   -------------------------------------------------------------------------- */

.tbl-advantage__grid {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 940px) {
	.tbl-advantage__grid {
		grid-template-columns: 0.85fr 1.15fr;
	}
}

.tbl-advantage__media .tbl-img {
	border-radius: var(--tbl-radius-lg);
}

.tbl-advantage__body {
	max-width: 56ch;
	color: rgba(var(--tbl-paper-rgb), 0.76);
	font-size: var(--tbl-fs-lede);
}

.tbl-advantage__actions {
	margin: 30px 0 0;
}

.tbl-band--ink .tbl-ticks li {
	color: rgba(var(--tbl-paper-rgb), 0.9);
}

/* --------------------------------------------------------------------------
   22. Founder
   -------------------------------------------------------------------------- */

.tbl-founder__grid {
	display: grid;
	gap: clamp(32px, 5vw, 68px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-founder__grid {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

.tbl-founder__portrait {
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

.tbl-founder__name {
	font-size: var(--tbl-fs-h2);
	margin-bottom: 6px;
}

.tbl-founder__role {
	margin: 0 0 20px;
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tbl-founder__bio {
	max-width: 60ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

/* Placeholder copy is visibly marked so it cannot ship unnoticed. */
.tbl-founder__bio.is-placeholder-copy {
	position: relative;
	padding: 20px 22px;
	background-color: var(--tbl-accent-wash);
	border-left: 3px solid var(--tbl-accent);
	border-radius: var(--tbl-radius-sm);
	font-size: var(--tbl-fs-body);
	font-style: italic;
}

.tbl-founder__facts {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
}

.tbl-founder__facts li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: var(--tbl-fs-sm);
}

.tbl-founder__facts .tbl-icon {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 3px;
	color: var(--tbl-affirm);
}

.tbl-founder__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin: 30px 0 0;
}

/* --------------------------------------------------------------------------
   23. Feature cards
   -------------------------------------------------------------------------- */

.tbl-feature {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: clamp(22px, 2.6vw, 30px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
}

.tbl-feature__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background-color: var(--tbl-accent-wash);
	border-radius: 50%;
	color: var(--tbl-accent-text);
}

.tbl-feature__title {
	margin: 4px 0 0;
	font-size: var(--tbl-fs-h3);
}

.tbl-feature__body {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   24. Testimonials
   -------------------------------------------------------------------------- */

.tbl-quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: clamp(24px, 3vw, 34px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
}

.tbl-quote__mark {
	font-family: var(--tbl-font-display);
	font-size: 3.4rem;
	line-height: 0.6;
	color: var(--tbl-accent);
	opacity: 0.45;
}

.tbl-quote__body {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--tbl-fs-body);
}

.tbl-quote__body p {
	margin: 0;
}

.tbl-quote__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--tbl-line);
}

.tbl-quote__monogram {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	background-color: var(--tbl-ink);
	border-radius: 50%;
	color: var(--tbl-on-ink);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tbl-quote__who {
	display: grid;
	min-width: 0;
}

.tbl-quote__name {
	font-weight: 600;
	font-size: var(--tbl-fs-sm);
}

.tbl-quote__role {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
}

.tbl-quote__chip {
	margin-left: auto;
	padding: 5px 12px;
	background-color: var(--tbl-accent-wash);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   25. Press strip
   -------------------------------------------------------------------------- */

.tbl-press {
	padding-block: 0 var(--tbl-section);
}

.tbl-press__panel {
	display: grid;
	gap: 10px;
	padding: clamp(26px, 3.4vw, 40px);
	background-color: var(--tbl-mist);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
}

/* The press card is a link that did not look like one.
   The headline carries the anchor and the pseudo element stretches it over the
   whole panel, so the target is the card rather than a few words of small grey
   text at the bottom. */
.tbl-press__panel {
	position: relative;
	transition: border-color 0.2s var(--tbl-ease), box-shadow 0.2s var(--tbl-ease), transform 0.2s var(--tbl-ease);
}

.tbl-press__link {
	color: inherit;
	text-decoration: none;
}

.tbl-press__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Hover and keyboard focus are handled on the panel, so the whole card
   responds rather than only the words under the cursor. */
.tbl-press__panel:hover,
.tbl-press__panel:focus-within {
	border-color: var(--tbl-azure);
	box-shadow: 0 14px 32px -18px rgba(10, 20, 40, 0.35);
	transform: translateY(-2px);
}

.tbl-press__panel:hover .tbl-press__link,
.tbl-press__panel:focus-within .tbl-press__link {
	text-decoration: underline;
	text-decoration-color: var(--tbl-accent2);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Focus has to be visible on the card, not on a zero size pseudo element. */
.tbl-press__panel:focus-within {
	outline: 2px solid var(--tbl-azure);
	outline-offset: 3px;
}

.tbl-press__link:focus-visible {
	outline: none;
}

/* The cue that says this is a link at all. Accent coloured and underlined,
   because a bare label in the meta colour reads as text. */
.tbl-press__cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tbl-azure);
	font-size: var(--tbl-fs-sm);
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.tbl-press__cue .tbl-icon {
	width: 15px;
	height: 15px;
	transition: transform 0.2s var(--tbl-ease);
}

.tbl-press__panel:hover .tbl-press__cue .tbl-icon {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.tbl-press__panel,
	.tbl-press__cue .tbl-icon {
		transition: none;
	}

	.tbl-press__panel:hover {
		transform: none;
	}
}

.tbl-press__kicker {
	margin: 0;
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tbl-press__headline {
	max-width: 46ch;
	margin: 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: var(--tbl-tracking);
}

.tbl-press__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 6px 0 0;
	font-size: var(--tbl-fs-sm);
}

.tbl-press__source {
	color: var(--tbl-muted);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   26. FAQ
   -------------------------------------------------------------------------- */

.tbl-faq__grid {
	display: grid;
	gap: clamp(28px, 4vw, 60px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.tbl-faq__grid {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

.tbl-faq__lead .tbl-section__title {
	margin-bottom: 0;
}

.tbl-faq__item {
	border-bottom: 1px solid var(--tbl-line);
}

.tbl-faq__item:first-child {
	border-top: 1px solid var(--tbl-line);
}

.tbl-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	cursor: pointer;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
	list-style: none;
}

.tbl-faq__q::-webkit-details-marker {
	display: none;
}

.tbl-faq__q:hover {
	color: var(--tbl-accent-text);
}

.tbl-faq__sign {
	position: relative;
	width: 34px;
	height: 34px;
	flex: none;
	border: 1px solid var(--tbl-line);
	border-radius: 50%;
	background-color: var(--tbl-paper);
}

.tbl-faq__sign::before,
.tbl-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.22s var(--tbl-ease), opacity 0.22s var(--tbl-ease);
}

.tbl-faq__sign::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.tbl-faq__item[open] .tbl-faq__sign::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

.tbl-faq__a {
	padding: 0 0 22px;
	max-width: 62ch;
	color: var(--tbl-muted);
}

.tbl-faq__a p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   27. Closing CTA
   -------------------------------------------------------------------------- */

.tbl-closing {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.tbl-closing.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tbl-closing-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	pointer-events: none;
}

.tbl-closing__lede {
	max-width: 54ch;
	margin: 0 auto;
	color: rgba(var(--tbl-paper-rgb), 0.76);
	font-size: var(--tbl-fs-lede);
}

.tbl-closing__actions {
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
}

.tbl-closing__note {
	margin: 16px 0 0;
	color: rgba(var(--tbl-paper-rgb), 0.55);
	font-size: var(--tbl-fs-xs);
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   28. Bundled logo sizing
   -------------------------------------------------------------------------- */

.tbl-brand__link {
	display: block;
	line-height: 0;
}

.tbl-brand__img {
	width: auto;
	height: 38px;
}

.tbl-brand--footer .tbl-brand__img {
	height: 42px;
}

.tbl-brand--drawer .tbl-brand__img {
	height: 34px;
}

/* ==========================================================================
   LAYER 3 — service pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   29. Breadcrumbs
   -------------------------------------------------------------------------- */

.tbl-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(24px, 3vw, 40px);
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
	font-weight: 500;
}

.tbl-crumbs a {
	color: var(--tbl-muted);
	text-decoration: none;
}

.tbl-crumbs a:hover {
	color: var(--tbl-accent-text);
}

.tbl-crumbs [aria-current="page"] {
	color: var(--tbl-ink);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   30. Service hero
   -------------------------------------------------------------------------- */

.tbl-svchero {
	padding-top: clamp(32px, 4vw, 56px);
}

.tbl-svchero__grid {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 940px) {
	.tbl-svchero__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.tbl-svchero__title {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 0.35em;
	max-width: 16ch;
}

.tbl-svchero__lede {
	max-width: 52ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-svchero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.tbl-svchero__figure {
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow-lg);
}

.tbl-svcarchive__head {
	max-width: 46rem;
}

/* --------------------------------------------------------------------------
   31. Audience cards
   -------------------------------------------------------------------------- */

.tbl-audience {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: clamp(20px, 2.4vw, 28px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
}

.tbl-audience__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	background-color: var(--tbl-accent-wash);
	border-radius: 50%;
	color: var(--tbl-accent-text);
}

.tbl-audience__icon .tbl-icon {
	width: 20px;
	height: 20px;
}

.tbl-audience__title {
	margin: 2px 0 6px;
	font-size: var(--tbl-fs-h3);
}

.tbl-audience__body {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   32. Inclusions
   -------------------------------------------------------------------------- */

.tbl-included {
	list-style: none;
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--tbl-line);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
}

@media (min-width: 720px) {
	.tbl-included {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.tbl-included {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tbl-included__item {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: clamp(22px, 2.6vw, 30px);
	background-color: var(--tbl-paper);
}

.tbl-included__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background-color: var(--tbl-accent-wash);
	border-radius: 50%;
	color: var(--tbl-affirm);
}

.tbl-included__mark .tbl-icon {
	width: 17px;
	height: 17px;
}

.tbl-included__title {
	margin: 4px 0 0;
	font-size: calc(1.05rem * var(--tbl-scale));
	font-family: var(--tbl-font-body);
	font-weight: 600;
	letter-spacing: 0;
}

.tbl-included__body {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   33. Process steps
   -------------------------------------------------------------------------- */

.tbl-steps {
	list-style: none;
	display: grid;
	gap: clamp(20px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	margin: 0;
	padding: 0;
	counter-reset: tblstep;
}

.tbl-steps__item {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: clamp(20px, 2.4vw, 28px);
	background-color: var(--tbl-ink-soft);
	border: 1px solid rgba(var(--tbl-paper-rgb), 0.1);
	border-radius: var(--tbl-radius);
}

.tbl-steps__num {
	font-family: var(--tbl-font-display);
	font-size: calc(1.7rem * var(--tbl-scale));
	font-weight: 700;
	line-height: 1;
	color: var(--tbl-accent-pale);
}

.tbl-steps__title {
	margin: 0;
	font-size: var(--tbl-fs-h3);
	color: var(--tbl-on-ink);
}

.tbl-steps__body {
	margin: 0;
	color: rgba(var(--tbl-paper-rgb), 0.72);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   34. Depth sections
   -------------------------------------------------------------------------- */

.tbl-depth__grid {
	display: grid;
	gap: clamp(30px, 5vw, 68px);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 940px) {
	.tbl-depth__grid {
		grid-template-columns: 1fr 1fr;
	}

	.tbl-depth.is-flipped .tbl-depth__media {
		order: 2;
	}
}

.tbl-depth__media .tbl-img {
	border-radius: var(--tbl-radius-lg);
}

.tbl-depth__body {
	max-width: 54ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

/* --------------------------------------------------------------------------
   35. How fees work
   -------------------------------------------------------------------------- */

.tbl-fees__panel {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: start;
	padding: clamp(28px, 3.6vw, 48px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

@media (min-width: 900px) {
	.tbl-fees__panel {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

.tbl-fees__lead .tbl-section__title {
	margin-bottom: 0.5em;
	max-width: 18ch;
}

.tbl-fees__body {
	max-width: 52ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-body);
}

.tbl-fees__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 26px 0 0;
}

.tbl-fees__note {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
}

.tbl-fees__factors {
	padding: clamp(20px, 2.6vw, 28px);
	background-color: var(--tbl-mist);
	border-radius: var(--tbl-radius);
}

.tbl-fees__subtitle {
	margin: 0 0 14px;
	font-family: var(--tbl-font-body);
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--tbl-muted);
}

.tbl-fees__list {
	list-style: none;
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
}

.tbl-fees__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: var(--tbl-fs-sm);
}

.tbl-fees__list .tbl-icon {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 3px;
	color: var(--tbl-affirm);
}

/* --------------------------------------------------------------------------
   36. Other services
   -------------------------------------------------------------------------- */

.tbl-nextcard {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	padding: clamp(24px, 3vw, 34px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
	transition: transform 0.24s var(--tbl-ease), box-shadow 0.24s var(--tbl-ease), border-color 0.24s var(--tbl-ease);
}

.tbl-nextcard:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--tbl-shadow-lg);
}

.tbl-nextcard__title {
	margin: 0;
	font-size: var(--tbl-fs-h3);
}

.tbl-nextcard__title a {
	color: inherit;
	text-decoration: none;
}

.tbl-nextcard__title a:hover {
	color: var(--tbl-accent-text);
}

.tbl-nextcard__body {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

.tbl-nextcard .tbl-card__more {
	padding-top: 4px;
}

/* ==========================================================================
   LAYER 4 — founder page
   ========================================================================== */

/* --------------------------------------------------------------------------
   38. Founder introduction
   -------------------------------------------------------------------------- */

.tbl-fdrintro {
	padding-top: clamp(32px, 4vw, 56px);
}

.tbl-fdrintro__grid {
	display: grid;
	gap: clamp(32px, 5vw, 68px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-fdrintro__grid {
		grid-template-columns: 0.78fr 1.22fr;
	}
}

.tbl-fdrintro__portrait {
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow-lg);
}

.tbl-fdrintro__name {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 8px;
}

.tbl-fdrintro__role {
	margin: 0 0 24px;
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tbl-fdrintro__lede {
	max-width: 58ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-fdrchips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
}

.tbl-fdrchips__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background-color: var(--tbl-accent-wash);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-accent-text);
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.tbl-fdrchips .tbl-icon {
	width: 15px;
	height: 15px;
}

.tbl-fdrintro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin: 30px 0 0;
}

/* --------------------------------------------------------------------------
   39. Career timeline
   -------------------------------------------------------------------------- */

.tbl-timeline__grid {
	display: grid;
	gap: clamp(32px, 5vw, 68px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-timeline__grid {
		grid-template-columns: 0.92fr 1.08fr;
	}
}

.tbl-timeline__lead .tbl-section__title {
	margin-bottom: 0.5em;
}

.tbl-timeline__intro {
	max-width: 46ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-body);
}

.tbl-timeline__figure {
	margin-top: 28px;
	border-radius: var(--tbl-radius-lg);
}

.tbl-timeline {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
}

.tbl-timeline::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 5px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--tbl-accent) 0%,
		var(--tbl-line) 100%
	);
	border-radius: 2px;
}

.tbl-timeline__item {
	position: relative;
	padding-bottom: clamp(26px, 3vw, 38px);
}

.tbl-timeline__item:last-child {
	padding-bottom: 0;
}

.tbl-timeline__item::before {
	content: "";
	position: absolute;
	top: 7px;
	left: -30px;
	width: 12px;
	height: 12px;
	background-color: var(--tbl-paper);
	border: 2px solid var(--tbl-accent);
	border-radius: 50%;
}

.tbl-timeline__period {
	display: inline-block;
	margin-bottom: 6px;
	font-size: var(--tbl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tbl-accent-text);
}

.tbl-timeline__role {
	margin: 0 0 2px;
	font-size: var(--tbl-fs-h3);
}

.tbl-timeline__org {
	margin: 0 0 8px;
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	color: var(--tbl-ink);
}

.tbl-timeline__detail {
	max-width: 52ch;
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   40. Placeholder marking
   --------------------------------------------------------------------------
   Seeded copy is visibly flagged until it is replaced. Shipping a founder
   biography that still reads PLACEHOLDER would be worse than shipping none,
   so it is made impossible to miss rather than left to a checklist.
   -------------------------------------------------------------------------- */

.is-placeholder-copy {
	position: relative;
	padding: 20px 22px;
	background-color: var(--tbl-accent-wash);
	border-left: 3px solid var(--tbl-accent);
	border-radius: var(--tbl-radius-sm);
	font-size: var(--tbl-fs-body);
	font-style: italic;
}

.is-placeholder-copy--dark {
	background-color: rgba(var(--tbl-accent-rgb), 0.14);
	border-left-color: var(--tbl-accent-pale);
	color: rgba(var(--tbl-paper-rgb), 0.86);
}

.is-placeholder-row {
	position: relative;
}

.is-placeholder-row::after {
	content: "PLACEHOLDER";
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 3px 9px;
	background-color: var(--tbl-accent-wash);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-accent-text);
	font-family: var(--tbl-font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.tbl-timeline__item.is-placeholder-row::after {
	top: 0;
	right: auto;
	left: 0;
	position: static;
	display: inline-block;
	margin-bottom: 8px;
}

/* ==========================================================================
   LAYER 5 — contact page
   ========================================================================== */

/* --------------------------------------------------------------------------
   41. Contact introduction
   -------------------------------------------------------------------------- */

.tbl-ctintro {
	padding-top: clamp(32px, 4vw, 56px);
}

.tbl-ctintro__inner {
	max-width: 44rem;
}

.tbl-ctintro__title {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 0.35em;
}

.tbl-ctintro__lede {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-ctquick {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin: 30px 0 0;
	padding: 0;
}

.tbl-ctquick a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	background-color: var(--tbl-mist);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-pill);
	color: var(--tbl-ink);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.tbl-ctquick a:hover {
	border-color: var(--tbl-accent);
	color: var(--tbl-accent-text);
}

.tbl-ctquick .tbl-icon {
	width: 17px;
	height: 17px;
	color: var(--tbl-accent);
}

/* --------------------------------------------------------------------------
   42. Booking
   -------------------------------------------------------------------------- */

.tbl-booking__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
	padding: clamp(24px, 3vw, 36px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

.tbl-booking__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	background-color: var(--tbl-accent-wash);
	border-radius: 50%;
	color: var(--tbl-accent-text);
}

.tbl-booking__icon .tbl-icon {
	width: 24px;
	height: 24px;
}

.tbl-booking__lead {
	margin: 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
}

.tbl-booking__sub {
	margin: 2px 0 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

.tbl-booking__panel .tbl-btn {
	margin-left: auto;
}

.tbl-booking__frame {
	overflow: hidden;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
}

.tbl-booking__frame iframe {
	display: block;
	width: 100%;
	border: 0;
}

.tbl-booking__fallback {
	margin: 14px 0 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
	text-align: center;
}

/* --------------------------------------------------------------------------
   43. Enquiry form
   -------------------------------------------------------------------------- */

.tbl-formband__grid {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1000px) {
	.tbl-formband__grid {
		grid-template-columns: 0.72fr 1.28fr;
	}

	.tbl-formband__lead {
		position: sticky;
		top: calc(var(--tbl-header-h) + var(--tbl-adminbar) + 28px);
	}
}

.tbl-formband__note {
	max-width: 40ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-body);
}

.tbl-form {
	padding: clamp(24px, 3vw, 40px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

.tbl-form__row {
	display: grid;
	gap: 0 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.tbl-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.tbl-field {
	display: grid;
	gap: 7px;
	margin: 0 0 20px;
}

.tbl-field label,
.tbl-fieldset legend {
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	color: var(--tbl-ink);
}

.tbl-req {
	color: var(--tbl-accent-text);
}

.tbl-field input,
.tbl-field select,
.tbl-field textarea {
	width: 100%;
	padding: 13px 16px;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-sm);
	color: var(--tbl-ink);
	font: inherit;
	font-size: var(--tbl-fs-body);
	transition: border-color 0.18s var(--tbl-ease), box-shadow 0.18s var(--tbl-ease);
}

.tbl-field textarea {
	resize: vertical;
	min-height: 120px;
}

.tbl-field input:focus,
.tbl-field select:focus,
.tbl-field textarea:focus {
	border-color: var(--tbl-accent);
	box-shadow: 0 0 0 3px rgba(var(--tbl-accent-rgb), 0.18);
	outline: none;
}

.tbl-fieldset {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.tbl-fieldset legend {
	margin-bottom: 12px;
	padding: 0;
}

.tbl-choices {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.tbl-choices {
		grid-template-columns: 1fr 1fr;
	}

	.tbl-choices--inline {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	}
}

.tbl-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.tbl-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tbl-choice__box {
	display: grid;
	gap: 3px;
	height: 100%;
	padding: 13px 16px;
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-sm);
	transition: border-color 0.16s var(--tbl-ease), background-color 0.16s var(--tbl-ease);
}

.tbl-choice--compact .tbl-choice__box {
	padding: 11px 15px;
}

.tbl-choice:hover .tbl-choice__box {
	border-color: var(--tbl-accent);
}

.tbl-choice input:checked + .tbl-choice__box {
	background-color: var(--tbl-accent-wash);
	border-color: var(--tbl-accent);
	box-shadow: inset 0 0 0 1px var(--tbl-accent);
}

.tbl-choice input:focus-visible + .tbl-choice__box {
	outline: 3px solid var(--tbl-accent);
	outline-offset: 2px;
}

.tbl-choice__title {
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
	color: var(--tbl-ink);
}

.tbl-choice__hint {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
	line-height: 1.4;
}

.tbl-check {
	margin: 0 0 14px;
}

.tbl-check label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: var(--tbl-fs-sm);
	color: var(--tbl-muted);
}

.tbl-check input {
	width: 19px;
	height: 19px;
	flex: none;
	margin-top: 2px;
	accent-color: var(--tbl-accent);
}

/* Honeypot: removed from view and from the accessibility tree, but not
   display:none — some bots skip fields that are display:none. */
.tbl-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tbl-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 26px 0 0;
}

.tbl-form__required {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
}

.tbl-form__status {
	margin: 0 0 22px;
	padding: 16px 20px;
	border-radius: var(--tbl-radius-sm);
	font-size: var(--tbl-fs-body);
}

.tbl-form__status.is-success {
	background-color: var(--tbl-accent-wash);
	border-left: 3px solid var(--tbl-affirm);
	color: var(--tbl-ink);
}

.tbl-form__status.is-error {
	background-color: var(--tbl-mist);
	border-left: 3px solid var(--tbl-accent);
	color: var(--tbl-ink);
}

.tbl-form button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ==========================================================================
   LAYER 6 — social proof
   ========================================================================== */

/* --------------------------------------------------------------------------
   44. Star rating
   -------------------------------------------------------------------------- */

.tbl-stars {
	display: inline-flex;
	gap: 3px;
	line-height: 1;
}

.tbl-stars__star {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	background-color: var(--tbl-line);
	-webkit-mask: var(--tbl-star-mask) center / contain no-repeat;
	mask: var(--tbl-star-mask) center / contain no-repeat;
}

.tbl-stars__star.is-full {
	background-color: var(--tbl-accent);
}

.tbl-stars__star.is-half {
	background-image: linear-gradient(
		to right,
		var(--tbl-accent) 0 50%,
		var(--tbl-line) 50% 100%
	);
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   45. Reviews summary
   -------------------------------------------------------------------------- */

.tbl-reviews__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: clamp(26px, 3.4vw, 40px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
	text-align: center;
}

.tbl-reviews__score {
	margin: 0;
	font-family: var(--tbl-font-display);
	font-size: calc(clamp(2.4rem, 1.7rem + 2.4vw, 3.4rem) * var(--tbl-scale));
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--tbl-tracking);
	color: var(--tbl-ink);
}

.tbl-reviews__count {
	margin: 4px 0 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
}

.tbl-reviews__summary .tbl-btn {
	margin-top: 8px;
}

.tbl-reviews__list {
	margin-top: clamp(24px, 3vw, 36px);
}

.tbl-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: clamp(22px, 2.8vw, 30px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius);
}

.tbl-review__body {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--tbl-fs-sm);
}

.tbl-review__body p {
	margin: 0;
}

.tbl-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding-top: 14px;
	border-top: 1px solid var(--tbl-line);
}

.tbl-review__author {
	font-size: var(--tbl-fs-sm);
	font-weight: 600;
}

.tbl-review__when {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
}

.tbl-reviews__attribution {
	margin: 18px 0 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
	text-align: center;
}

/* --------------------------------------------------------------------------
   46. Press list
   -------------------------------------------------------------------------- */

.tbl-press__list {
	display: grid;
	gap: var(--tbl-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	margin-top: 16px;
}

.tbl-press__excerpt {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

.tbl-press__date {
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
}

.tbl-press .tbl-press__kicker {
	margin-bottom: 4px;
}

/* ==========================================================================
   LAYER 7 — blog and resources
   ========================================================================== */

/* --------------------------------------------------------------------------
   47. Blog index and archives
   -------------------------------------------------------------------------- */

.tbl-bloghead {
	max-width: 44rem;
}

.tbl-bloghead__search {
	max-width: 420px;
	margin-top: 26px;
}

.tbl-card__cat {
	color: var(--tbl-accent-text);
}

.tbl-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
}

.tbl-card__read::before {
	content: "·";
	margin-right: 12px;
}

/* --------------------------------------------------------------------------
   48. Article
   -------------------------------------------------------------------------- */

.tbl-artihead {
	padding-top: clamp(32px, 4vw, 56px);
}

.tbl-artihead__title {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 0.3em;
	max-width: 20ch;
}

.tbl-artihead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(28px, 4vw, 44px);
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
	font-weight: 500;
}

.tbl-article__media {
	margin: 0 0 clamp(30px, 4vw, 52px);
	border-radius: var(--tbl-radius-lg);
}

.tbl-prose > h2,
.tbl-prose > h3 {
	max-width: 26ch;
}

.tbl-prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--tbl-accent);
	font-family: var(--tbl-font-display);
	font-size: calc(1.2rem * var(--tbl-scale));
	font-style: italic;
	color: var(--tbl-ink);
}

.tbl-prose ul,
.tbl-prose ol {
	padding-left: 1.3em;
}

.tbl-prose li {
	margin-bottom: 0.5em;
}

.tbl-prose img,
.tbl-prose figure {
	border-radius: var(--tbl-radius);
}

.tbl-prose figcaption {
	margin-top: 10px;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
	text-align: center;
}

.tbl-prose code {
	padding: 2px 6px;
	background-color: var(--tbl-mist);
	border-radius: 4px;
	font-size: 0.92em;
}

.tbl-prose hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--tbl-line);
}

/* --------------------------------------------------------------------------
   49. Inline call to action
   -------------------------------------------------------------------------- */

.tbl-inlinecta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
	margin: clamp(36px, 5vw, 56px) 0;
	padding: clamp(24px, 3vw, 32px);
	background-color: var(--tbl-mist);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
}

.tbl-inlinecta__title {
	margin: 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
	max-width: 26ch;
}

.tbl-inlinecta__sub {
	margin: 4px 0 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

.tbl-inlinecta .tbl-btn {
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   50. Author card
   -------------------------------------------------------------------------- */

.tbl-authorcard {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin: clamp(36px, 5vw, 56px) 0 0;
	padding-top: clamp(26px, 3vw, 36px);
	border-top: 1px solid var(--tbl-line);
}

.tbl-authorcard__mono {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	background-color: var(--tbl-ink);
	border-radius: 50%;
	color: var(--tbl-on-ink);
	font-size: var(--tbl-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tbl-authorcard__label {
	margin: 0;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tbl-authorcard__name {
	margin: 4px 0 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
}

.tbl-authorcard__bio {
	margin: 6px 0 10px;
	max-width: 52ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

/* --------------------------------------------------------------------------
   51. Resources
   -------------------------------------------------------------------------- */

.tbl-resource {
	padding-top: clamp(32px, 4vw, 56px);
}

.tbl-resource__grid {
	display: grid;
	gap: clamp(32px, 5vw, 64px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-resource__grid {
		grid-template-columns: 1.15fr 0.85fr;
	}

	.tbl-resource__aside {
		position: sticky;
		top: calc(var(--tbl-header-h) + var(--tbl-adminbar) + 28px);
	}
}

.tbl-resource__cover {
	margin-bottom: 20px;
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

.tbl-resource__body {
	margin-top: 28px;
	font-size: var(--tbl-fs-body);
}

.tbl-gate {
	padding: clamp(24px, 3vw, 32px);
	background-color: var(--tbl-paper);
	border: 1px solid var(--tbl-line);
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow);
}

.tbl-gate__title {
	margin: 0;
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
}

.tbl-gate__note {
	margin: 6px 0 20px;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-sm);
}

.tbl-gate .tbl-field {
	margin-bottom: 16px;
}

.tbl-gate .tbl-form__actions {
	margin-top: 20px;
}

.tbl-gate .tbl-btn {
	width: 100%;
	justify-content: center;
}

.tbl-gate__download {
	margin: 4px 0 0;
}

/* ==========================================================================
   LAYER 9 — colour, shield, motion, mobile alignment
   ========================================================================== */

/* --------------------------------------------------------------------------
   52. Secondary accent
   --------------------------------------------------------------------------
   An all-blue palette on a white page reads cold and, at length, bland. The
   warm accent appears in small, deliberate places — statistics, alternating
   icons, a rule under centred headings — rather than as a second brand
   colour competing with the azure.
   -------------------------------------------------------------------------- */

.tbl-trustbar__item:nth-child(even) .tbl-trustbar__value {
	color: var(--tbl-accent2-deep);
}

.tbl-trustbar__item {
	position: relative;
}

.tbl-trustbar__item::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 34px;
	height: 3px;
	background-color: var(--tbl-accent);
	border-radius: 3px 3px 0 0;
	transform: translateX(-50%);
	opacity: 0.85;
}

.tbl-trustbar__item:nth-child(even)::after {
	background-color: var(--tbl-accent2);
}

/* Feature and audience icons cycle, so a grid of four is not four identical
   blue circles. */
.tbl-feature:nth-child(4n+2) .tbl-feature__icon,
.tbl-audience:nth-child(4n+2) .tbl-audience__icon {
	background-color: var(--tbl-accent2-wash);
	color: var(--tbl-accent2-deep);
}

.tbl-feature:nth-child(4n+3) .tbl-feature__icon,
.tbl-audience:nth-child(4n+3) .tbl-audience__icon {
	background-color: var(--tbl-affirm-wash);
	color: var(--tbl-affirm-deep);
}

.tbl-feature:nth-child(4n+4) .tbl-feature__icon,
.tbl-audience:nth-child(4n+4) .tbl-audience__icon {
	background-color: var(--tbl-sky);
	color: var(--tbl-accent-text);
}

.tbl-included__item:nth-child(even) .tbl-included__mark {
	background-color: var(--tbl-accent2-wash);
	color: var(--tbl-accent2-deep);
}

.tbl-steps__item:nth-child(even) .tbl-steps__num {
	color: var(--tbl-accent2);
}

.tbl-quote__mark {
	color: var(--tbl-accent2);
	opacity: 0.6;
}

/* Cards lift toward the accent rather than just casting a shadow. */
.tbl-card:hover,
.tbl-nextcard:hover {
	border-color: rgba(var(--tbl-accent-rgb), 0.35);
	box-shadow: 0 22px 48px -26px rgba(var(--tbl-accent-rgb), 0.45);
}

.tbl-feature {
	transition: transform 0.24s var(--tbl-ease), box-shadow 0.24s var(--tbl-ease), border-color 0.24s var(--tbl-ease);
}

.tbl-feature:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--tbl-accent-rgb), 0.32);
	box-shadow: 0 18px 40px -24px rgba(var(--tbl-accent-rgb), 0.4);
}

/* --------------------------------------------------------------------------
   53. Shield ornament and watermark
   -------------------------------------------------------------------------- */

.tbl-shieldmark {
	position: absolute;
	pointer-events: none;
	color: currentColor;
	opacity: 0.055;
	z-index: 0;
	line-height: 0;
}

.tbl-shieldmark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tbl-shieldmark--right {
	top: -6%;
	right: -4%;
	width: clamp(240px, 30vw, 460px);
	height: clamp(240px, 30vw, 460px);
}

.tbl-shieldmark--centre {
	top: 50%;
	left: 50%;
	width: clamp(280px, 34vw, 520px);
	height: clamp(280px, 34vw, 520px);
	transform: translate(-50%, -50%);
	opacity: 0.05;
}

.tbl-shieldmark--footer {
	bottom: -14%;
	right: 2%;
	width: clamp(200px, 22vw, 340px);
	height: clamp(200px, 22vw, 340px);
	opacity: 0.045;
}

@media (max-width: 767px) {
	.tbl-shieldmark--right,
	.tbl-shieldmark--footer {
		width: 200px;
		height: 200px;
	}
}

/* The small rule under centred headings. */
.tbl-shieldrule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--tbl-accent);
}

.tbl-shieldrule i {
	display: block;
	width: clamp(28px, 6vw, 54px);
	height: 1px;
	background: linear-gradient(to right, transparent, var(--tbl-line));
}

.tbl-shieldrule i:last-child {
	background: linear-gradient(to left, transparent, var(--tbl-line));
}

.tbl-shieldrule svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.tbl-band--ink .tbl-shieldrule {
	color: var(--tbl-accent-pale);
}

.tbl-band--ink .tbl-shieldrule i {
	background: linear-gradient(to right, transparent, rgba(var(--tbl-paper-rgb), 0.28));
}

.tbl-band--ink .tbl-shieldrule i:last-child {
	background: linear-gradient(to left, transparent, rgba(var(--tbl-paper-rgb), 0.28));
}

/* Content must sit above both the bloom and the watermark. */
.tbl-band > .tbl-container,
.tbl-footer > .tbl-container {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   54. Scroll reveals
   --------------------------------------------------------------------------
   Only active while html.tbl-motion is present. That class is added before
   first paint and removed by a failsafe if the script never boots, so a
   scripting failure can never leave the page blank.
   -------------------------------------------------------------------------- */

.tbl-motion .tbl-reveal {
	opacity: 0;
	transform: translateY(16px);
	will-change: opacity, transform;
	transition:
		opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tbl-motion .tbl-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Sideways entrance for the paired media/copy blocks. */
.tbl-motion .tbl-advantage__media.tbl-reveal,
.tbl-motion .tbl-depth__media.tbl-reveal,
.tbl-motion .tbl-founder__media.tbl-reveal,
.tbl-motion .tbl-fdrintro__media.tbl-reveal {
	transform: translateY(16px) translateX(-14px);
}

.tbl-motion .tbl-advantage__copy.tbl-reveal,
.tbl-motion .tbl-depth__copy.tbl-reveal,
.tbl-motion .tbl-founder__copy.tbl-reveal,
.tbl-motion .tbl-fdrintro__copy.tbl-reveal {
	transform: translateY(16px) translateX(14px);
}

.tbl-motion .tbl-advantage__media.is-in,
.tbl-motion .tbl-depth__media.is-in,
.tbl-motion .tbl-founder__media.is-in,
.tbl-motion .tbl-fdrintro__media.is-in,
.tbl-motion .tbl-advantage__copy.is-in,
.tbl-motion .tbl-depth__copy.is-in,
.tbl-motion .tbl-founder__copy.is-in,
.tbl-motion .tbl-fdrintro__copy.is-in {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tbl-motion .tbl-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   55. Mobile alignment
   --------------------------------------------------------------------------
   Everything centres below the tablet breakpoint. Lists centre as a block
   while their items stay left-aligned internally — a centred tick list with
   ragged left edges is harder to read, not easier.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.tbl-hero__copy,
	.tbl-hero__inner,
	.tbl-sechead,
	.tbl-ctintro__inner,
	.tbl-bloghead,
	.tbl-svcarchive__head,
	.tbl-svchero__copy,
	.tbl-fdrintro__copy,
	.tbl-advantage__copy,
	.tbl-depth__copy,
	.tbl-founder__copy,
	.tbl-timeline__lead,
	.tbl-faq__lead,
	.tbl-formband__lead,
	.tbl-fees__lead,
	.tbl-resource__copy,
	.tbl-feature,
	.tbl-audience,
	.tbl-included__item,
	.tbl-steps__item,
	.tbl-quote,
	.tbl-review,
	.tbl-press__panel,
	.tbl-gate,
	.tbl-card__body,
	.tbl-nextcard,
	.tbl-inlinecta,
	.tbl-authorcard,
	.tbl-booking__panel,
	.tbl-artihead,
	.tbl-404 {
		text-align: center;
	}

	.tbl-hero__title,
	.tbl-section__title,
	.tbl-svchero__title,
	.tbl-ctintro__title,
	.tbl-fdrintro__name,
	.tbl-artihead__title,
	.tbl-founder__name,
	.tbl-hero__lede,
	.tbl-svchero__lede,
	.tbl-ctintro__lede,
	.tbl-sechead__intro,
	.tbl-advantage__body,
	.tbl-depth__body,
	.tbl-founder__bio,
	.tbl-fees__body,
	.tbl-formband__note,
	.tbl-timeline__intro,
	.tbl-press__headline,
	.tbl-inlinecta__title,
	.tbl-authorcard__bio,
	.tbl-faq__a {
		margin-left: auto;
		margin-right: auto;
		max-width: none;
	}

	/* Buttons and action rows. */
	.tbl-hero__actions,
	.tbl-svchero__actions,
	.tbl-fdrintro__actions,
	.tbl-founder__actions,
	.tbl-advantage__actions,
	.tbl-fees__actions,
	.tbl-form__actions,
	.tbl-closing__actions,
	.tbl-404__actions,
	.tbl-press__meta,
	.tbl-artihead__meta,
	.tbl-crumbs,
	.tbl-credstrip,
	.tbl-fdrchips,
	.tbl-ctquick,
	.tbl-social,
	.tbl-quote__foot,
	.tbl-review__foot {
		justify-content: center;
	}

	.tbl-hero__actions .tbl-btn,
	.tbl-svchero__actions .tbl-btn,
	.tbl-fdrintro__actions .tbl-btn,
	.tbl-founder__actions .tbl-btn,
	.tbl-fees__actions .tbl-btn,
	.tbl-form__actions .tbl-btn,
	.tbl-404__actions .tbl-btn {
		flex: 1 1 240px;
		justify-content: center;
	}

	.tbl-inlinecta,
	.tbl-booking__panel,
	.tbl-authorcard {
		flex-direction: column;
		align-items: center;
	}

	.tbl-inlinecta .tbl-btn,
	.tbl-booking__panel .tbl-btn {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

	/* Lists: centre the block, keep the text left-aligned inside it. */
	.tbl-ticks,
	.tbl-founder__facts,
	.tbl-fees__list {
		width: fit-content;
		margin-inline: auto;
		text-align: left;
	}

	.tbl-feature__icon,
	.tbl-audience__icon,
	.tbl-included__mark,
	.tbl-booking__icon,
	.tbl-authorcard__mono,
	.tbl-quote__monogram {
		margin-inline: auto;
	}

	.tbl-audience {
		flex-direction: column;
		align-items: center;
	}

	.tbl-quote__chip {
		margin-left: 0;
	}

	.tbl-quote__who {
		text-align: center;
	}

	.tbl-timeline {
		padding-left: 0;
		text-align: center;
	}

	.tbl-timeline::before,
	.tbl-timeline__item::before {
		display: none;
	}

	.tbl-timeline__item {
		padding-bottom: 26px;
		border-bottom: 1px solid var(--tbl-line);
		margin-bottom: 26px;
	}

	.tbl-timeline__item:last-child {
		border-bottom: 0;
		margin-bottom: 0;
	}

	.tbl-faq__q {
		text-align: left;
	}

	.tbl-footer__top,
	.tbl-footer__bar,
	.tbl-footer__credentials {
		text-align: center;
	}

	.tbl-footer__contact li {
		justify-content: center;
	}

	.tbl-footer__legal {
		margin-inline: auto;
		justify-content: center;
	}

	.tbl-portal--footer {
		margin-inline: auto;
	}
}

/* ==========================================================================
   LAYER 10 — page heroes and additional motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   56. Shared page hero
   -------------------------------------------------------------------------- */

.tbl-pagehero {
	padding-top: clamp(20px, 2.6vw, 40px);
	padding-bottom: clamp(40px, 4.4vw, 68px);
	background-image: var(--tbl-wash-hero);
	overflow: hidden;
}

.tbl-pagehero__grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 940px) {
	.tbl-pagehero__grid {
		grid-template-columns: 1fr 1.02fr;
	}

	.tbl-pagehero__media {
		margin-top: 6px;
	}
}

.tbl-pagehero__title {
	font-size: var(--tbl-fs-h1);
	margin-bottom: 0.34em;
	max-width: 18ch;
}

.tbl-pagehero__lede {
	max-width: 50ch;
	color: var(--tbl-muted);
	font-size: var(--tbl-fs-lede);
}

.tbl-pagehero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.tbl-pagehero__figure {
	border-radius: var(--tbl-radius-lg);
	box-shadow: var(--tbl-shadow-lg);
}

/* The contact intro reuses the hero grid. */
.tbl-ctintro.tbl-pagehero .tbl-ctintro__inner {
	max-width: none;
}

/* --------------------------------------------------------------------------
   57. Image wipe on reveal
   -------------------------------------------------------------------------- */

.tbl-motion .tbl-reveal .tbl-img,
.tbl-motion .tbl-img.tbl-reveal {
	clip-path: inset(0 0 12% 0);
	transition: clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tbl-motion .tbl-reveal.is-in .tbl-img,
.tbl-motion .tbl-img.tbl-reveal.is-in {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   58. Button sheen
   -------------------------------------------------------------------------- */

.tbl-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tbl-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -140%;
	width: 60%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left 0.55s var(--tbl-ease);
}

.tbl-btn:hover::after {
	left: 140%;
}

.tbl-btn--ghost::after {
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(var(--tbl-accent-rgb), 0.14) 50%,
		transparent 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.tbl-btn::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   59. Scroll progress
   -------------------------------------------------------------------------- */

.tbl-progress {
	position: fixed;
	top: var(--tbl-adminbar, 0);
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 120;
	pointer-events: none;
	background: transparent;
}

.tbl-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(to right, var(--tbl-accent), var(--tbl-accent2));
	transform-origin: left;
	transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   60. Compact header on scroll
   -------------------------------------------------------------------------- */

.tbl-header.is-compact .tbl-header__inner {
	min-height: 62px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.tbl-header.is-compact .tbl-brand__img {
	height: 32px;
	transition: height 0.24s var(--tbl-ease);
}

.tbl-brand__img {
	transition: height 0.24s var(--tbl-ease);
}

.tbl-header__inner {
	transition:
		box-shadow 0.25s var(--tbl-ease),
		background-color 0.25s var(--tbl-ease),
		min-height 0.24s var(--tbl-ease),
		padding 0.24s var(--tbl-ease);
}

/* --------------------------------------------------------------------------
   61. Back to top
   -------------------------------------------------------------------------- */

.tbl-totop {
	position: fixed;
	right: clamp(16px, 2.5vw, 30px);
	bottom: clamp(16px, 2.5vw, 30px);
	z-index: 80;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: var(--tbl-ink);
	border: 0;
	border-radius: 50%;
	color: var(--tbl-on-ink);
	box-shadow: var(--tbl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.28s var(--tbl-ease), transform 0.28s var(--tbl-ease), visibility 0.28s, background-color 0.2s var(--tbl-ease);
}

.tbl-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.tbl-totop:hover {
	background-color: var(--tbl-accent);
	color: var(--tbl-on-accent);
}

.tbl-totop svg {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   62. Smooth FAQ expand
   -------------------------------------------------------------------------- */

.tbl-faq__item .tbl-faq__a {
	overflow: hidden;
}

.tbl-motion .tbl-faq__item:not([open]) .tbl-faq__a {
	height: 0;
	padding-bottom: 0;
}

.tbl-motion .tbl-faq__item .tbl-faq__a {
	transition: height 0.32s var(--tbl-ease), padding-bottom 0.32s var(--tbl-ease);
}

@media (prefers-reduced-motion: reduce) {
	.tbl-motion .tbl-faq__item .tbl-faq__a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   63. Empty states
   -------------------------------------------------------------------------- */

.tbl-empty__title {
	font-family: var(--tbl-font-display);
	font-size: var(--tbl-fs-h3);
	font-weight: 600;
	letter-spacing: var(--tbl-tracking);
	color: var(--tbl-ink);
	margin-bottom: 6px;
}

.tbl-empty p {
	color: var(--tbl-muted);
	max-width: 52ch;
	margin-inline: auto;
}

.tbl-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 22px;
}

/* --------------------------------------------------------------------------
   64. Interior hero overlay
   --------------------------------------------------------------------------
   Every page except the home page carries a wash across its hero image,
   heaviest on the side the copy sits and clearing toward the far edge. It
   softens the join between text and photograph, and it means a busy image
   never competes with the headline beside it.

   The home page is excluded deliberately: its hero is a portrait with an
   overlapping inset, and a scrim there would flatten the composition.
   -------------------------------------------------------------------------- */

.tbl-pagehero__figure,
.tbl-svchero__figure {
	position: relative;
}

.tbl-pagehero__figure::after,
.tbl-svchero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image: linear-gradient(
		to right,
		rgba(var(--tbl-paper-rgb), var(--tbl-hero-overlay, 0.46)) 0%,
		rgba(var(--tbl-paper-rgb), calc(var(--tbl-hero-overlay, 0.46) * 0.55)) 34%,
		rgba(var(--tbl-paper-rgb), calc(var(--tbl-hero-overlay, 0.46) * 0.16)) 66%,
		rgba(var(--tbl-paper-rgb), 0) 100%
	);
}

/* The copy sits above the image on small screens, so the wash comes from
   the top instead of the left. */
@media (max-width: 939px) {
	.tbl-pagehero__figure::after,
	.tbl-svchero__figure::after {
		background-image: linear-gradient(
			to bottom,
			rgba(var(--tbl-paper-rgb), var(--tbl-hero-overlay, 0.46)) 0%,
			rgba(var(--tbl-paper-rgb), calc(var(--tbl-hero-overlay, 0.46) * 0.4)) 45%,
			rgba(var(--tbl-paper-rgb), 0) 100%
		);
	}
}

/* Placeholders are already pale — a wash on top makes the label unreadable. */
.tbl-pagehero__figure.is-placeholder::after,
.tbl-svchero__figure.is-placeholder::after {
	display: none;
}

/* --------------------------------------------------------------------------
   65. No hero inset on mobile
   --------------------------------------------------------------------------
   Stacked under the main image it stopped being an overlapping detail and
   became a second, unexplained photograph.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Both selectors are needed: .tbl-img.is-placeholder sets display:grid
	   at the same specificity, so a lone .tbl-hero__inset rule loses. */
	.tbl-hero__inset,
	.tbl-hero__inset.is-placeholder {
		display: none;
	}
}

/* ==========================================================================
   LAYER 12 — hero blending and footer masthead
   ========================================================================== */

/* --------------------------------------------------------------------------
   66. Blended interior hero
   --------------------------------------------------------------------------
   A rounded, shadowed rectangle reads as a photograph placed ON the page.
   Masking the image with a soft radial dissolves its edges into the paper
   instead, so there is no boundary between picture and background — the
   image simply becomes part of the page.

   The focal point sits off to the far side, which means the fade is
   heaviest on the side the copy sits and the photograph is at full strength
   where there is nothing competing with it.
   -------------------------------------------------------------------------- */

.is-hero-blend .tbl-pagehero__figure,
.is-hero-blend .tbl-svchero__figure {
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	-webkit-mask-image: radial-gradient(
		118% 122% at 74% 44%,
		#000 34%,
		rgba(0, 0, 0, 0.86) 54%,
		rgba(0, 0, 0, 0.42) 74%,
		transparent 93%
	);
	mask-image: radial-gradient(
		118% 122% at 74% 44%,
		#000 34%,
		rgba(0, 0, 0, 0.86) 54%,
		rgba(0, 0, 0, 0.42) 74%,
		transparent 93%
	);
}

/* Once the layout stacks, the copy is above rather than beside, so the
   focal point moves with it. */
@media (max-width: 939px) {
	.is-hero-blend .tbl-pagehero__figure,
	.is-hero-blend .tbl-svchero__figure {
		-webkit-mask-image: radial-gradient(
			125% 130% at 50% 62%,
			#000 36%,
			rgba(0, 0, 0, 0.82) 58%,
			transparent 94%
		);
		mask-image: radial-gradient(
			125% 130% at 50% 62%,
			#000 36%,
			rgba(0, 0, 0, 0.82) 58%,
			transparent 94%
		);
	}
}

/* The wash sits inside the mask, so it fades out with the image rather than
   ending in a hard rectangle of its own. */
.is-hero-blend .tbl-pagehero__figure::after,
.is-hero-blend .tbl-svchero__figure::after {
	border-radius: 0;
}

/* A blended hero needs no band boundary under it either. */
.is-hero-blend {
	padding-bottom: clamp(24px, 3vw, 44px);
}

/* Placeholders keep their frame — an unfilled slot that faded away would
   look like a rendering fault rather than a slot waiting for an image. */
.is-hero-blend .tbl-pagehero__figure.is-placeholder,
.is-hero-blend .tbl-svchero__figure.is-placeholder {
	border-radius: var(--tbl-radius-lg);
	-webkit-mask-image: none;
	mask-image: none;
	background-color: var(--tbl-mist);
}

/* Some older engines support neither mask-image nor its prefixed form. The
   image then simply keeps a soft rounded edge rather than disappearing. */
@supports not ((mask-image: radial-gradient(#000, transparent)) or (-webkit-mask-image: radial-gradient(#000, transparent))) {
	.is-hero-blend .tbl-pagehero__figure,
	.is-hero-blend .tbl-svchero__figure {
		border-radius: var(--tbl-radius-lg);
	}
}

/* --------------------------------------------------------------------------
   67. Footer masthead
   -------------------------------------------------------------------------- */

.tbl-footer__masthead {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding-bottom: clamp(28px, 3.4vw, 44px);
	margin-bottom: clamp(28px, 3.4vw, 44px);
	border-bottom: 1px solid rgba(var(--tbl-paper-rgb), 0.12);
	text-align: center;
}

.tbl-footer__masthead .tbl-brand__img {
	height: 52px;
}

.tbl-footer__masthead .tbl-footer__tagline {
	margin: 0;
}

@media (max-width: 767px) {
	.tbl-footer__masthead .tbl-brand__img {
		height: 42px;
	}
}

/* ==========================================================================
   LAYER 13 — full-width banner hero
   --------------------------------------------------------------------------
   The image is not placed on the band; it IS the band. Edge-to-edge, with
   the heading over it and a wash between the two. There is no boundary to
   blend because there is no boundary.
   ========================================================================== */

.tbl-pagehero.is-hero-banner,
.tbl-svchero.is-hero-banner,
.tbl-ctintro.is-hero-banner {
	position: relative;
	overflow: hidden;
	background-image: none;
	background-color: var(--tbl-ink);
	color: var(--tbl-on-ink);
	padding-top: clamp(52px, 6vw, 92px);
	padding-bottom: clamp(52px, 6vw, 92px);
	min-height: clamp(300px, 34vw, 440px);
	display: flex;
	align-items: center;
}

.tbl-pagehero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tbl-pagehero__bgimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 42%;
	display: block;
}

/* The wash. Heaviest where the words are and easing across, so the
   photograph is legible on the far side without ever putting text on a
   light patch. */
.tbl-pagehero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(
			to right,
			rgba(var(--tbl-ink-rgb), var(--tbl-hero-overlay, 0.78)) 0%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.96)) 46%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.74)) 78%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.62)) 100%
		),
		linear-gradient(
			to bottom,
			rgba(var(--tbl-ink-rgb), 0.18) 0%,
			rgba(var(--tbl-ink-rgb), 0) 40%,
			rgba(var(--tbl-ink-rgb), 0.3) 100%
		);
}

/* Once stacked there is no far side, so the wash is even. */
@media (max-width: 767px) {
	.tbl-pagehero__scrim {
		background-image: linear-gradient(
			to bottom,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.94)) 0%,
			rgba(var(--tbl-ink-rgb), var(--tbl-hero-overlay, 0.78)) 100%
		);
	}

	.tbl-pagehero__bgimg {
		object-position: 50% 40%;
	}
}

.is-hero-banner > .tbl-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Text on the band. */
.is-hero-banner .tbl-pagehero__title,
.is-hero-banner .tbl-svchero__title,
.is-hero-banner .tbl-ctintro__title {
	color: var(--tbl-on-ink);
	max-width: 20ch;
}

.is-hero-banner .tbl-pagehero__lede,
.is-hero-banner .tbl-svchero__lede,
.is-hero-banner .tbl-ctintro__lede {
	color: rgba(var(--tbl-paper-rgb), 0.86);
	max-width: 46ch;
}

.is-hero-banner .tbl-eyebrow {
	color: var(--tbl-accent-pale);
}

.is-hero-banner .tbl-eyebrow--dot::before {
	background-color: var(--tbl-accent-pale);
}

.is-hero-banner .tbl-crumbs,
.is-hero-banner .tbl-crumbs a {
	color: rgba(var(--tbl-paper-rgb), 0.72);
}

.is-hero-banner .tbl-crumbs a:hover {
	color: var(--tbl-on-ink);
}

.is-hero-banner .tbl-pagehero__grid,
.is-hero-banner .tbl-svchero__grid {
	display: block;
}

.is-hero-banner .tbl-svchero__meta {
	color: rgba(var(--tbl-paper-rgb), 0.8);
}

/* Ghost buttons need a light outline on a dark band. */
.is-hero-banner .tbl-btn--ghost {
	border-color: rgba(var(--tbl-paper-rgb), 0.4);
	color: var(--tbl-on-ink);
}

.is-hero-banner .tbl-btn--ghost:hover {
	border-color: var(--tbl-on-ink);
	background-color: rgba(var(--tbl-paper-rgb), 0.08);
}

/* Contact quick links. */
.is-hero-banner .tbl-ctquick a {
	background-color: rgba(var(--tbl-paper-rgb), 0.1);
	border-color: rgba(var(--tbl-paper-rgb), 0.24);
	color: var(--tbl-on-ink);
}

.is-hero-banner .tbl-ctquick a:hover {
	background-color: rgba(var(--tbl-paper-rgb), 0.18);
	border-color: rgba(var(--tbl-paper-rgb), 0.5);
	color: var(--tbl-on-ink);
}

.is-hero-banner .tbl-ctquick .tbl-icon {
	color: var(--tbl-accent-pale);
}

/* With no image uploaded the band is simply the brand navy, which is a
   reasonable page opening rather than an obvious gap. */
.is-hero-banner .tbl-pagehero__bg:empty + .tbl-pagehero__scrim {
	background-image: var(--tbl-wash-ink);
}

/* ==========================================================================
   LAYER 14 — centred banner heroes
   --------------------------------------------------------------------------
   The heading, lede and buttons sit centred on the image at every width, so
   the wash has to change with them. It was weighted left, where the text
   used to be; it is now weighted to the centre, where the text is.
   ========================================================================== */

.is-hero-banner > .tbl-container {
	text-align: center;
}

.is-hero-banner .tbl-pagehero__copy,
.is-hero-banner .tbl-svchero__copy,
.is-hero-banner .tbl-ctintro__inner {
	max-width: 62rem;
	margin-inline: auto;
}

.is-hero-banner .tbl-pagehero__title,
.is-hero-banner .tbl-svchero__title,
.is-hero-banner .tbl-ctintro__title {
	max-width: 22ch;
	margin-inline: auto;
}

.is-hero-banner .tbl-pagehero__lede,
.is-hero-banner .tbl-svchero__lede,
.is-hero-banner .tbl-ctintro__lede {
	max-width: 52ch;
	margin-inline: auto;
}

.is-hero-banner .tbl-crumbs,
.is-hero-banner .tbl-pagehero__actions,
.is-hero-banner .tbl-svchero__actions,
.is-hero-banner .tbl-ctquick,
.is-hero-banner .tbl-svchero__meta {
	justify-content: center;
}

.is-hero-banner .tbl-eyebrow {
	justify-content: center;
}

.is-hero-banner .tbl-eyebrow--dot {
	display: inline-flex;
	align-items: center;
}

/* Centre-weighted wash, replacing the left-weighted one. Strongest where
   the words are, easing toward the edges so the photograph still shows. */
.is-hero-banner .tbl-pagehero__scrim {
	background-image:
		radial-gradient(
			120% 135% at 50% 50%,
			rgba(var(--tbl-ink-rgb), var(--tbl-hero-overlay, 0.78)) 0%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.95)) 42%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.78)) 78%,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.66)) 100%
		),
		linear-gradient(
			to bottom,
			rgba(var(--tbl-ink-rgb), 0.16) 0%,
			rgba(var(--tbl-ink-rgb), 0) 42%,
			rgba(var(--tbl-ink-rgb), 0.28) 100%
		);
}

@media (max-width: 767px) {
	.is-hero-banner .tbl-pagehero__scrim {
		background-image: linear-gradient(
			to bottom,
			rgba(var(--tbl-ink-rgb), calc(var(--tbl-hero-overlay, 0.78) * 0.94)) 0%,
			rgba(var(--tbl-ink-rgb), var(--tbl-hero-overlay, 0.78)) 100%
		);
	}
}

/* The image is now read from the centre, so the crop should favour it. */
.is-hero-banner .tbl-pagehero__bgimg {
	object-position: 50% 42%;
}

/* ==========================================================================
   LAYER 15 — entrance and richer motion
   --------------------------------------------------------------------------
   Everything here is gated on .tbl-motion, which JavaScript adds. Without
   JavaScript none of it applies and the page renders as static content, so
   nothing is ever hidden behind an animation that never runs.

   The home page carries .tbl-anim-rich, every other page .tbl-anim-calm:
   the same vocabulary, shorter distances and less delay.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Line masks on the hero headline
   -------------------------------------------------------------------------- */

.tbl-line {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Descenders would be clipped by the mask without this. */
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.tbl-line__in {
	display: inline-block;
}

.tbl-motion .tbl-hero[data-enter="pending"] .tbl-line__in {
	transform: translateY(105%);
	opacity: 0;
}

.tbl-motion .tbl-hero[data-enter="in"] .tbl-line__in {
	transform: none;
	opacity: 1;
	transition:
		transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
		opacity 0.6s ease var(--d, 0ms);
}

/* --------------------------------------------------------------------------
   The rest of the hero, in sequence
   -------------------------------------------------------------------------- */

.tbl-motion .tbl-hero[data-enter="pending"] .tbl-eyebrow,
.tbl-motion .tbl-hero[data-enter="pending"] .tbl-hero__lede,
.tbl-motion .tbl-hero[data-enter="pending"] .tbl-hero__actions,
.tbl-motion .tbl-hero[data-enter="pending"] .tbl-credstrip {
	opacity: 0;
	transform: translateY(14px);
}

.tbl-motion .tbl-hero[data-enter="in"] .tbl-eyebrow,
.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__lede,
.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__actions,
.tbl-motion .tbl-hero[data-enter="in"] .tbl-credstrip {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease var(--d, 0ms),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

.tbl-motion .tbl-hero[data-enter="in"] .tbl-eyebrow      { --d: 40ms; }
.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__lede   { --d: 320ms; }
.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__actions { --d: 420ms; }
.tbl-motion .tbl-hero[data-enter="in"] .tbl-credstrip    { --d: 520ms; }

/* The image arrives with a wipe rather than a fade — it reads as the page
   settling rather than something loading late. */
.tbl-motion .tbl-hero[data-enter="pending"] .tbl-hero__figure {
	opacity: 0;
	transform: translateY(20px) scale(0.985);
}

.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__figure {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.8s ease 180ms,
		transform 1s cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

.tbl-motion .tbl-hero[data-enter="pending"] .tbl-hero__inset {
	opacity: 0;
	transform: translateY(16px) scale(0.96);
}

.tbl-motion .tbl-hero[data-enter="in"] .tbl-hero__inset {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s ease 700ms,
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 700ms;
}

/* --------------------------------------------------------------------------
   Media wipe on reveal
   -------------------------------------------------------------------------- */

/* .tbl-motion sits on <html> and .tbl-anim-rich on <body>, so these must be
   DESCENDANT selectors. Writing the uncovering rule as a compound selector
   (.tbl-motion.tbl-anim-rich) meant it never matched, and every wiped image
   stayed clipped to nothing while keeping its layout box — the page looked
   correct and the pictures were simply absent. */
.tbl-motion .tbl-anim-rich .tbl-wipe.tbl-reveal .tbl-img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.tbl-motion .tbl-anim-rich .tbl-wipe.tbl-reveal.is-in .tbl-img {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   Section headings: the rule draws itself
   -------------------------------------------------------------------------- */

.tbl-motion .tbl-sechead.tbl-reveal::after,
.tbl-motion .tbl-sechead--c.tbl-reveal::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

.tbl-motion .tbl-sechead--c.tbl-reveal::after {
	transform-origin: center;
}

.tbl-motion .tbl-sechead.tbl-reveal.is-in::after,
.tbl-motion .tbl-sechead--c.tbl-reveal.is-in::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Cards lift a little further on the home page
   -------------------------------------------------------------------------- */

.tbl-anim-rich .tbl-card,
.tbl-anim-rich .tbl-svc {
	transition:
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s ease,
		border-color 0.4s ease;
}

.tbl-anim-rich .tbl-card:hover,
.tbl-anim-rich .tbl-svc:hover {
	transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Calm pages: same idea, less of it
   -------------------------------------------------------------------------- */

.tbl-motion .tbl-anim-calm .tbl-reveal {
	transform: translateY(10px);
	transition:
		opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tbl-motion .tbl-anim-calm .tbl-reveal.is-in {
	transform: none;
}

/* --------------------------------------------------------------------------
   Nothing above runs when the reader has asked for less
   -------------------------------------------------------------------------- */

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

	.tbl-motion .tbl-hero[data-enter] .tbl-line__in,
	.tbl-motion .tbl-hero[data-enter] .tbl-eyebrow,
	.tbl-motion .tbl-hero[data-enter] .tbl-hero__lede,
	.tbl-motion .tbl-hero[data-enter] .tbl-hero__actions,
	.tbl-motion .tbl-hero[data-enter] .tbl-credstrip,
	.tbl-motion .tbl-hero[data-enter] .tbl-hero__figure,
	.tbl-motion .tbl-hero[data-enter] .tbl-hero__inset {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.tbl-motion .tbl-wipe.tbl-reveal .tbl-img,
	.tbl-motion .tbl-anim-rich .tbl-wipe.tbl-reveal .tbl-img {
		clip-path: none !important;
		transition: none !important;
	}

	.tbl-motion .tbl-sechead.tbl-reveal::after,
	.tbl-motion .tbl-sechead--c.tbl-reveal::after {
		transform: none !important;
		transition: none !important;
	}

	.tbl-anim-rich .tbl-card,
	.tbl-anim-rich .tbl-svc,
	.tbl-anim-rich .tbl-card:hover,
	.tbl-anim-rich .tbl-svc:hover {
		transform: none !important;
		transition: none !important;
	}
}