/*
 * Global brand layer - sits on top of Bootstrap.
 *
 * Bootstrap owns layout and responsive behaviour: grid, containers, spacing
 * utilities, breakpoints, and the base styling of buttons, forms, cards,
 * tables and navs. This file does not reimplement any of that.
 *
 * What lives here, and nothing else:
 *   1. Brand typography - Bootstrap's heading scale is replaced with the
 *      brand scale from tokens.css.
 *   2. Overrides for the handful of places Bootstrap hardcodes a colour
 *      instead of reading a `--bs-*` variable (the .btn-* variants and the
 *      form focus ring). Everything else is branded by remapping tokens in
 *      tokens.css.
 *   3. WordPress integration that Bootstrap has no opinion on - alignment
 *      classes, .screen-reader-text, the content measure.
 *   4. A few genuinely brand-specific components.
 *
 * Deliberately NOT here, because Bootstrap already provides it:
 *   box-sizing / margin resets, img max-width, containers and the grid,
 *   spacing + display + flex utilities, .fw-medium / .fw-semibold,
 *   .text-* / .bg-* / .border-* colour utilities, .table, .card, .nav,
 *   .form-control, .visually-hidden.
 *
 * Loads after bootstrap.min.css (enforced by dependency in inc/enqueue.php),
 * so equal-specificity rules win on order.
 */

/* =========================================================================
   1. Brand typography
   =========================================================================
   Bootstrap sizes headings with calc(...vw) and weight 500. The brand scale
   replaces both. Sizes come from tokens, so the responsive steps defined
   there apply automatically.
   ------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.tp-h1, .tp-h2, .tp-h3 {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	text-wrap: balance;
}

h1, .h1, .tp-h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

h2, .h2, .tp-h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

h3, .h3, .tp-h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

h4, .h4 {
	font-size: var(--fs-p1);
	line-height: var(--lh-tight);
}

h5, .h5 {
	font-size: var(--fs-p2);
	line-height: var(--lh-tight);
}

h6, .h6 {
	font-size: var(--fs-p3);
	line-height: var(--lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/*
 * Brand paragraph steps. `body` already carries Paragraph 2 (18px) via
 * --bs-body-font-size, so a plain <p> needs nothing. Use .tp-p1 for lead and
 * intro copy, .tp-p3 for captions, meta and fine print. Bootstrap's .fs-*
 * utilities are its own scale - prefer these so type stays on the brand grid.
 */
.tp-p1,
.tp-p2,
.tp-p3 {
	font-family: var(--font-body);
	line-height: var(--lh-body);
}

.tp-p1 { font-size: var(--fs-p1); }
.tp-p2 { font-size: var(--fs-p2); }
.tp-p3 { font-size: var(--fs-p3); }

/*
 * Section heading.
 *
 * Every section on the page opens with the same setting, taken from the hero
 * and the section below it: near-black rather than brand navy, the design's
 * looser 119% leading, and tracking opened out instead of the global h2's
 * -0.015em. The size is three quarters of the h2 step - measured against the
 * card rows, the design sets a section heading at roughly 38px where the
 * global h2 is 50 - and it scales the token rather than replacing it, so the
 * responsive steps in tokens.css still apply.
 *
 * The highlighted phrase inside it is italic brand blue. tp_highlight_phrase()
 * emits an <em>, so the treatment rides on the element rather than needing a
 * class of its own in each block.
 *
 * Each block still owns its heading's measure (max-width) - that is layout,
 * and it differs per section.
 */
.tp-section-heading {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);           /* 50px */
	font-weight: var(--fw-semibold);   /* 600 */
	line-height: 1.3;                  /* 65px at 50px, and it scales */
	letter-spacing: 0.01em;            /* 0.5px at 50px */
	text-align: center;
	color: var(--color-black);
	/* The measure the design hugs a section heading to, and what decides where
	   it breaks: 898px holds "The right view for everyone involved." on one
	   line and turns the longer headings two deep, exactly as the comp does.
	   The sections carried narrower ones tuned to the smaller size this
	   heading used to be set at, which broke the short ones a line early. */
	max-width: 56rem;
	margin-inline: auto;
}

/*
 * The highlighted phrase: a lighter weight, italic, in brand blue. Size,
 * leading and tracking are the heading's own and inherit - the design sets
 * them the same, unlike the hero, where the highlight is a size step larger.
 */
.tp-section-heading em {
	font-style: italic;
	font-weight: var(--fw-medium);     /* 500 */
	color: var(--color-accent);
}

/*
 * The line under a section heading. Body face, one step up from the small
 * print it used to be set in, on its own slightly tighter leading.
 */
.tp-section-description {
	font-family: var(--font-body);
	font-size: var(--fs-p2);           /* 18px */
	font-weight: var(--fw-regular);    /* 400 */
	line-height: 1.45;                 /* 145% */
	letter-spacing: 0.01em;            /* 1% */
	text-align: center;
	/* The measure the design hugs this text to: 898px, which is what puts it
	   on two lines. The sections carried their own, narrower ones while this
	   was set in small print; at 18px those wrapped it three and four deep. */
	max-width: 56rem;
	margin-inline: auto;
}

/* Readable line length. Bootstrap has no measure utility. */
.tp-measure { max-width: var(--measure); }

/* Brand blockquote. Bootstrap's .blockquote is opt-in and sets only margin
   and size; editor content emits a bare <blockquote>. */
blockquote {
	margin-bottom: 1rem;
	padding-left: var(--tp-space-lg);
	border-left: 3px solid var(--color-accent);
	font-size: var(--fs-p1);
	color: var(--color-text-muted);
}

/* Reboot styles code/pre typographically; the brand surface is an addition. */
code {
	padding: 0.15em 0.4em;
	background-color: var(--color-light);
	border-radius: var(--bs-border-radius-sm);
}

pre {
	padding: var(--tp-space-md);
	overflow-x: auto;
	background-color: var(--color-light);
	border-radius: var(--bs-border-radius);
}

pre code {
	padding: 0;
	background: none;
}

/* =========================================================================
   2. Buttons
   =========================================================================
   Bootstrap's .btn base reads --bs-btn-* variables, so the brand font and
   shape are set by reassigning them. The .btn-* variants, however, compile
   static hex values, so each brand variant restates its own --bs-btn-* set.
   No Bootstrap button rule is overridden - only its variables.
   ------------------------------------------------------------------------- */

/*
 * Buttons, from the design: 16/32 padding on a 16px radius, 12px between a
 * label and its arrow chip, and a 24px line box - which is what makes the
 * primary CTA hug to exactly 188x56.
 *
 * The border is zeroed so those numbers hold. Bootstrap adds 1px top and
 * bottom, and every brand variant paints that border the same colour as its
 * own background, so it contributes nothing but two pixels of height.
 */
.btn {
	--bs-btn-font-family: var(--font-heading);
	--bs-btn-font-size: var(--fs-p2);
	--bs-btn-font-weight: var(--fw-medium);
	--bs-btn-line-height: 1.3333;
	--bs-btn-padding-x: 2rem;
	--bs-btn-padding-y: 1rem;
	--bs-btn-border-width: 0;
	--bs-btn-border-radius: var(--tp-radius-lg);
	letter-spacing: 0.01em;
}

.btn-lg {
	--bs-btn-padding-x: 2.5rem;
	--bs-btn-padding-y: 1.125rem;
	--bs-btn-font-size: var(--fs-p1);
}

.btn-sm {
	--bs-btn-padding-x: 1rem;
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-font-size: var(--fs-p3);
}

/* Primary - brand navy. */
.btn-primary {
	--bs-btn-color: var(--color-on-primary);
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-color: var(--color-on-accent);
	--bs-btn-hover-bg: var(--color-accent);
	--bs-btn-hover-border-color: var(--color-accent);
	--bs-btn-active-color: var(--color-on-accent);
	--bs-btn-active-bg: var(--color-accent-hover);
	--bs-btn-active-border-color: var(--color-accent-hover);
	--bs-btn-disabled-color: var(--color-on-primary);
	--bs-btn-disabled-bg: var(--color-primary);
	--bs-btn-disabled-border-color: var(--color-primary);
	--bs-btn-focus-shadow-rgb: 3, 39, 66;
}

/*
 * Accent - brand blue. Bootstrap has no "accent" slot; this is the one button
 * variant the framework does not provide, so it is defined rather than
 * duplicated. Use it for the primary call to action.
 */
.btn-accent {
	--bs-btn-color: var(--color-on-accent);
	--bs-btn-bg: var(--color-accent);
	--bs-btn-border-color: var(--color-accent);
	--bs-btn-hover-color: var(--color-on-accent);
	--bs-btn-hover-bg: var(--color-accent-hover);
	--bs-btn-hover-border-color: var(--color-accent-hover);
	--bs-btn-active-color: var(--color-on-accent);
	--bs-btn-active-bg: var(--color-accent-hover);
	--bs-btn-active-border-color: var(--color-accent-hover);
	--bs-btn-disabled-color: var(--color-on-accent);
	--bs-btn-disabled-bg: var(--color-accent);
	--bs-btn-disabled-border-color: var(--color-accent);
	--bs-btn-focus-shadow-rgb: 45, 127, 193;
}

.btn-outline-primary {
	--bs-btn-border-width: 1px;
	--bs-btn-color: var(--color-primary);
	--bs-btn-border-color: var(--color-border);
	--bs-btn-hover-color: var(--color-accent);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--color-accent);
	--bs-btn-active-color: var(--color-accent);
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: var(--color-accent);
	--bs-btn-disabled-color: var(--color-text-muted);
	--bs-btn-disabled-border-color: var(--color-border);
	--bs-btn-focus-shadow-rgb: 45, 127, 193;
}

.btn-outline-accent {
	--bs-btn-border-width: 1px;
	--bs-btn-color: var(--color-accent);
	--bs-btn-border-color: var(--color-accent);
	--bs-btn-hover-color: var(--color-on-accent);
	--bs-btn-hover-bg: var(--color-accent);
	--bs-btn-hover-border-color: var(--color-accent);
	--bs-btn-active-color: var(--color-on-accent);
	--bs-btn-active-bg: var(--color-accent-hover);
	--bs-btn-active-border-color: var(--color-accent-hover);
	--bs-btn-focus-shadow-rgb: 45, 127, 193;
}

/* White - secondary action on tinted or image backgrounds. */
.btn-white {
	--bs-btn-color: var(--color-primary);
	--bs-btn-bg: var(--color-white);
	--bs-btn-border-color: var(--color-white);
	--bs-btn-hover-color: var(--color-accent);
	--bs-btn-hover-bg: var(--color-white);
	--bs-btn-hover-border-color: var(--color-white);
	--bs-btn-active-color: var(--color-accent);
	--bs-btn-active-bg: var(--color-white);
	--bs-btn-active-border-color: var(--color-tint-line);
	--bs-btn-disabled-color: var(--color-text-muted);
	--bs-btn-disabled-bg: var(--color-white);
	--bs-btn-disabled-border-color: var(--color-white);
	--bs-btn-focus-shadow-rgb: 45, 127, 193;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* Link-style button, brand accent. */
.btn-link {
	--bs-btn-color: var(--color-link);
	--bs-btn-hover-color: var(--color-link-hover);
	--bs-btn-font-weight: var(--fw-medium);
	--bs-btn-padding-x: 0;
	--bs-btn-border-radius: 0;
	text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
	text-decoration: underline;
}

/* =========================================================================
   3. Forms
   =========================================================================
   Bootstrap's form controls read --bs-* for colour, background and radius, so
   they are already on brand. Only the focus state hardcodes Bootstrap blue.
   ------------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-check-input:checked {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.form-label {
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

/*
 * Bootstrap sizes form controls at a flat 1rem. Pointing them at the brand
 * body step keeps inputs consistent with surrounding copy, and because that
 * token resolves to 16px on mobile it still avoids the iOS focus zoom.
 */
.form-control,
.form-select {
	font-size: var(--fs-p2);
}

.form-control::placeholder {
	color: var(--color-gray);
	opacity: 1;
}

/* =========================================================================
   4. Accessibility
   =========================================================================
   Bootstrap ships .visually-hidden, but WordPress core markup and plugins
   emit .screen-reader-text, so that class has to exist under its own name.
   ------------------------------------------------------------------------- */

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

.tp-skip-link:focus {
	position: fixed !important;
	top: var(--tp-space-sm);
	left: var(--tp-space-sm);
	z-index: 1080;
	width: auto;
	height: auto;
	padding: var(--tp-space-sm) var(--tp-space-md);
	clip-path: none;
	color: var(--color-primary);
	background-color: var(--color-white);
	border-radius: var(--bs-border-radius-sm);
	box-shadow: var(--tp-shadow-md);
}

/* Bootstrap only rings form controls and buttons; this covers the rest. */
:where(a, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Breathing room for a section arrived at from a menu link.
 *
 * The header scrolls away with the page rather than sticking, so this is not
 * clearance for it - without the offset a section simply lands hard against
 * the top of the viewport, which reads as a cut-off rather than an arrival.
 * The admin bar variable is WordPress' own, and resolves to 0 for logged-out
 * visitors, so no separate `.admin-bar` rule is needed.
 */
:target {
	scroll-margin-top: calc(var(--tp-space-xl) + var(--wp-admin--admin-bar--height, 0px));
}

/* =========================================================================
   5. WordPress integration
   =========================================================================
   Alignment classes and the content measure. Bootstrap has no opinion on
   these - they exist because the editor emits them.
   ------------------------------------------------------------------------- */

.alignwide {
	max-width: var(--tp-container-max);
	margin-inline: auto;
}

.alignfull {
	max-width: none;
	margin-inline: 0;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0 var(--tp-space-lg) var(--tp-space-md) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--tp-space-md) var(--tp-space-lg);
}

/*
 * Editorial content flow: the_content() output gets a readable column, while
 * wide and full alignments break out. Applied to long-form templates only -
 * block-composed pages use the Blocks Canvas template and let each block
 * manage its own Bootstrap container.
 */
.tp-content-flow > * {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: var(--bs-gutter-x, 1.5rem);
}

.tp-content-flow > .alignwide {
	max-width: var(--tp-container-max);
}

.tp-content-flow > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.wp-caption,
figcaption,
.wp-element-caption {
	font-size: var(--fs-p3);
	color: var(--color-text-muted);
}

/* =========================================================================
   6. Brand components
   =========================================================================
   Only what Bootstrap genuinely does not provide. Layout for these lives in
   the templates as Bootstrap grid and utility classes.
   ------------------------------------------------------------------------- */

.tp-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-primary);
}

.tp-logo img {
	display: block;
	width: auto;
	height: 2.5rem;
	max-width: 100%;
}

.tp-logo__text {
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-h3);
}

/* Small uppercase label used for footer column headings and eyebrows. */
.tp-eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Brand treatment for Bootstrap's .nav in the site header and footer. */
.tp-nav .nav-link {
	padding-inline: 0;
	font-size: var(--fs-p3);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	text-decoration: none;
}

.tp-nav .nav-link:hover,
.tp-nav .nav-link:focus,
.tp-nav .nav-link.active {
	color: var(--color-accent);
}

/* Cards: Bootstrap .card provides the component; this is the brand skin. */
.card {
	--bs-card-border-color: var(--color-border-subtle);
	--bs-card-border-radius: var(--tp-radius-lg);
	--bs-card-cap-bg: var(--color-surface);
}

.tp-card-link {
	color: inherit;
	text-decoration: none;
}

.tp-card-link:hover,
.tp-card-link:focus {
	color: var(--color-accent);
}

.tp-cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* =========================================================================
   7. Brand extensions to Bootstrap's scales
   =========================================================================
   Bootstrap's spacing scale stops at `5` (3rem). Section rhythm in this brand
   is looser, so step 6 is added following Bootstrap's own naming so blocks can
   write `py-6` / `py-lg-6` alongside the built-in utilities.

   These live here, not in a block stylesheet: a utility must be available to
   every block, and per-block CSS only loads when that block is on the page.
   ------------------------------------------------------------------------- */

/*
 * !important, like every Bootstrap spacing utility. Without it `py-5 py-lg-6`
 * resolves to Bootstrap's 48px at every width - .py-5 is !important and this
 * step was not - so the lg value never landed and every section on the page
 * sat at half the space it reads as asking for.
 */
.py-6 { padding-top: var(--tp-space-3xl) !important; padding-bottom: var(--tp-space-3xl) !important; }
.pt-6 { padding-top: var(--tp-space-3xl) !important; }
.pb-6 { padding-bottom: var(--tp-space-3xl) !important; }
.mt-6 { margin-top: var(--tp-space-3xl) !important; }
.mb-6 { margin-bottom: var(--tp-space-3xl) !important; }

@media (min-width: 992px) {
	.py-lg-6 { padding-top: var(--tp-space-3xl) !important; padding-bottom: var(--tp-space-3xl) !important; }
	.pt-lg-6 { padding-top: var(--tp-space-3xl) !important; }
	.pb-lg-6 { padding-bottom: var(--tp-space-3xl) !important; }
	.mt-lg-6 { margin-top: var(--tp-space-3xl) !important; }
	.mb-lg-6 { margin-bottom: var(--tp-space-3xl) !important; }
}

/* =========================================================================
   8. Site shell
   =========================================================================
   A wider measure than Bootstrap's .container, used by the footer columns.
   Only max-width changes; Bootstrap still owns the gutters.

   The header card does *not* use it: the comp draws that card on the same
   1440 column as every section, so it sits in a plain .container alongside
   the hero and the blocks.
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.tp-shell {
		max-width: var(--tp-shell-max);
	}
}

/* =========================================================================
   9. Site header
   ========================================================================= */

/*
 * The header never paints a background of its own - the floating card is the
 * only surface. On a page that opens with a hero-style block (body gets
 * .tp-has-hero from inc/blocks.php) it is lifted out of the flow so it sits on
 * top of that block's background. Elsewhere it stays in the flow on the page.
 * .tp-site is position-relative, so the overlay starts below the admin bar.
 */
.tp-header {
	position: relative;
	z-index: 1030;
	/* The comp floats the card 40px down from the top of the page. */
	padding-block: 2.5rem;
	background: transparent;
}

.tp-has-hero .tp-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

/* The hero sets its own top space; page.php's padding would open a gap. */
.tp-has-hero .tp-page {
	padding-top: 0;
}

/* The floating white navigation card. Bootstrap's .navbar handles layout. */
/*
 * The card, from the design: 1440x84 on a 16px radius, 14px of padding with
 * 24px on the logo side, and a 4px ring.
 *
 * 84 = 14 + 56 + 14, so the row inside is 56px - the height of the menu
 * items, the logo and the CTA alike. The ring is a spread box-shadow rather
 * than a border, which is what keeps that sum exact: a border would add its
 * width to the height, and the design draws the stroke outside the frame.
 */
.tp-header__card {
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0;
	--tp-header-ring: rgb(255 255 255 / 55%);

	/*
	 * A floor on the space between the logo and the menu frame. At the design
	 * width the frame's auto margin leaves far more than this; the gap only
	 * matters once the frame has shrunk to the space available, where
	 * space-between would otherwise push the first link onto the wordmark.
	 */
	column-gap: 2rem;

	padding: 0.875rem 0.875rem 0.875rem 1.5rem;
	background-color: var(--color-white);
	border: 0;
	border-radius: var(--tp-radius-lg);
	box-shadow:
		0 0 0 4px var(--tp-header-ring),
		0 10px 30px rgb(45 127 193 / 12%);
}

/* On a plain white page the card needs an edge; over a hero it does not. The
   ring carries it, since the card has no border to colour. */
body:not(.tp-has-hero) .tp-header__card {
	--tp-header-ring: var(--color-border-subtle);
}

/* The logo does not fill the 56px row - the design sets the mark at 50px and
   lets it centre in it. */
.tp-header__logo {
	/* A flex item by default, so between lg and xl the card squeezed the
	   wordmark narrower without shortening it - the mark came out distorted. */
	flex: 0 0 auto;
}

.tp-header__logo img {
	width: auto;
	height: 3.125rem;
}

/*
 * The menu frame: 929px wide, holding the links and the CTA with the space
 * between them, pushed to the CTA side of the card. That is what sets the gap
 * between the logo and the first link - it is slack in the card, not padding
 * on the list.
 *
 * max-width rather than width, so below the design size the frame gives way
 * instead of forcing the card wider than the viewport.
 */
@media (min-width: 992px) {
	.tp-header__card .navbar-collapse {
		flex-grow: 1;
		max-width: 58.0625rem;   /* 929px */
		margin-left: auto;
		justify-content: space-between;
	}
}

.tp-header__toggler {
	border: 0;
	padding: 0.5rem;
}

/* Bootstrap rings the toggler on :focus, so a tap leaves a heavy dark ring.
   Keep the ring for keyboard users only, in the brand focus colour. */
.tp-header__toggler:focus {
	box-shadow: none;
}

.tp-header__toggler:focus-visible {
	box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* The design sets the menu at body size in a 56px row, with 40px between
   items - half of that on each link, so the gap survives the links being
   centred as a group. The vertical padding is what makes the row 56px
   (16 + 24 + 16), matching the logo and the CTA beside it. */
.tp-nav--header {
	--bs-nav-link-padding-x: 1.25rem;
	--bs-nav-link-padding-y: 1rem;
}

/*
 * One line per link. Left to wrap, "How It Works" breaks in two between 992
 * and 1200 and takes the whole card from 84px to 114px, which then runs into
 * the hero below it.
 */
.tp-nav--header .nav-link {
	font-size: var(--fs-p2);
	font-weight: var(--fw-regular);
	white-space: nowrap;
	color: var(--color-text-muted);
}

/*
 * The 24px between the links is the second half of the design's spacing, on
 * top of the padding above. It lives here rather than on a .gap-lg-4 utility
 * because the two have to come down together below the design width, and a
 * utility is !important - nothing in a media query can walk it back.
 *
 * Below 1400 the container steps down faster than the header's contents do.
 * The logo (199px) and the CTA (148px) are fixed, and every link is
 * white-space: nowrap, so the row has a hard minimum width: once the links'
 * padding plus these gaps push that minimum past the card, the row cannot
 * shrink or wrap and the CTA is simply laid outside the card's right edge.
 * That is what these steps buy back - at 992-1200 (a 960px container, e.g.
 * iPad Pro landscape) the full-size row overflows the card by 45px.
 */
@media (min-width: 992px) {
	.tp-nav--header {
		column-gap: 0.5rem;
	}
}

@media (min-width: 1200px) {
	.tp-nav--header {
		column-gap: 1rem;
	}
}

@media (min-width: 1400px) {
	.tp-nav--header {
		column-gap: 1.5rem;
	}
}

/*
 * Between lg and xl the menu frame is narrower than the links laid out at
 * their full padding, so the padding closes up rather than the links wrapping.
 * The card gives up some of its own slack in the same breath: the 32px floor
 * beside the logo and 8px of the left padding are the cheapest space to find,
 * since neither the logo nor the CTA can give any.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.tp-nav--header {
		--bs-nav-link-padding-x: 0.5rem;
	}

	.tp-header__card {
		column-gap: 1rem;
		padding-left: 1rem;
	}
}

.tp-nav--header .nav-link:hover,
.tp-nav--header .nav-link:focus,
.tp-nav--header .nav-link.active,
.tp-nav--header .tp-nav-emphasis > .nav-link {
	color: var(--color-primary);
}

/* Set per item from Appearance > Menus > CSS Classes. */
.tp-nav--header .tp-nav-emphasis > .nav-link {
	font-weight: var(--fw-medium);
}

/*
 * Narrowest phones: at 50px the wordmark is 199px wide, which together with
 * the toggler no longer fits the card and pushes the toggler onto a second
 * row - doubling the card's height right where there is least room for it.
 */
@media (max-width: 400px) {
	.tp-header__logo img {
		height: 2.5rem;
	}
}

@media (max-width: 991.98px) {
	.tp-header__card {
		/* The 2rem floor is a desktop measurement; on a phone it is the last
		   32px the toggler needs to stay on the logo's line. */
		column-gap: 1rem;
		padding: 0.5rem 0.75rem;
	}

	.tp-nav--header .nav-link {
		padding-block: 0.625rem;
		font-size: var(--fs-p2);
		border-bottom: 1px solid var(--color-border-subtle);
	}
}

/* Button with a trailing arrow chip. Padding and radius come from .btn; the
   12px gap is the design's. */
/*
 * Inline-flex, so Bootstrap's text-align on .btn no longer centres the label:
 * the flex line has to be centred instead. It makes no difference to a button
 * sized by its content, and is what keeps a full-width one (the featured
 * pricing plan, the pricing callout) from packing its label to the left edge.
 */
.tp-btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/* White chip holding assets/images/button-arrow.svg. The SVG is 20x20 with
   its own padding and stroke colour, so it simply fills the chip. */
.tp-btn-arrow__icon {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-white);
	border-radius: var(--tp-radius-sm);
}

.tp-btn-arrow__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================================
   10. Site footer
   ========================================================================= */

.tp-footer {
	position: relative;
	overflow: hidden;
	padding-top: var(--tp-space-3xl);
	background-color: var(--color-white);
}

.tp-footer__logo img {
	height: 3.25rem;
}

/*
 * Footer body copy - the brand description, the newsletter note, the menu
 * links and the copyright line all share it: 18px on 145% with 1% tracking,
 * in the body face. Set in one place so the columns read as one block.
 */
.tp-footer__text,
.tp-nav--footer .nav-link,
.tp-footer__legal {
	font-family: var(--font-body);
	font-size: var(--fs-p2);       /* 18px */
	font-weight: var(--fw-regular);
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.tp-footer__text {
	max-width: 32ch;
	color: var(--color-text-muted);
}

.tp-footer__text > :last-child {
	margin-bottom: 0;
}

.tp-footer__heading {
	margin-bottom: 1.25rem;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);       /* 24px */
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: 0.021em;       /* 0.5px at 24px */
	color: var(--color-heading);
}

.tp-nav--footer {
	--bs-nav-link-padding-y: 0;
	gap: 0.75rem;
}

.tp-nav--footer .nav-link {
	color: var(--color-text-muted);
}

.tp-nav--footer .nav-link:hover,
.tp-nav--footer .nav-link:focus {
	color: var(--color-accent);
}

/* Newsletter - Bootstrap form-control and btn, compact footer skin.
   The row is a Contact Form 7 form (inc/contact-forms.php) carrying this
   markup in its template, so the skin is unchanged; CF7 only adds a wrapper
   span around each control and a response line under the row. */
.tp-newsletter {
	position: relative;
	align-items: flex-start;
	max-width: 20rem;
}

/* CF7's wrapper is the flex item, not the input inside it. */
.tp-newsletter .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.tp-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	background-color: var(--color-light);
	border-color: var(--color-light);
	border-radius: var(--tp-radius-md);
}

.tp-newsletter__input:focus {
	background-color: var(--color-white);
}

.tp-newsletter__submit {
	--bs-btn-padding-x: 0.875rem;
	--bs-btn-padding-y: 0.375rem;
	--bs-btn-font-size: 0.8125rem;
	--bs-btn-font-weight: var(--fw-medium);
	--bs-btn-border-radius: var(--tp-radius-md);
	flex-shrink: 0;
}

/* CF7 injects its spinner as a third item in the row, and it reserves 24px
   plus 48px of margin even while hidden - the grey dot beside the button in
   the design. Lifted out of flow and dropped just under the row instead, so
   the row is the design's two items and the wait appears where the answer
   will. Scaled rather than resized: CF7 orbits the inner dot around a fixed
   8px origin, which only stays centred if the whole box scales with it, and
   0.667 lands it inside the 1rem gap above the supporting line. */
.tp-newsletter .wpcf7-spinner {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	transform: scale(0.667);
	transform-origin: top left;
	background-color: var(--color-primary);
}

/* Validation tip and the submit response, both from CF7. They sit below the
   row rather than in it, so the input and the button keep their line. */
.tp-newsletter .wpcf7-not-valid-tip,
.tp-footer .wpcf7 form .wpcf7-response-output {
	margin: var(--tp-space-xs) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--fs-p3);
	line-height: var(--lh-body);
}

.tp-newsletter .wpcf7-not-valid-tip,
.tp-footer .wpcf7 form.failed .wpcf7-response-output,
.tp-footer .wpcf7 form.aborted .wpcf7-response-output,
.tp-footer .wpcf7 form.spam .wpcf7-response-output,
.tp-footer .wpcf7 form.unaccepted .wpcf7-response-output {
	color: var(--bs-danger);
}

.tp-footer .wpcf7 form.sent .wpcf7-response-output {
	color: var(--color-accent);
}

/* On this form "One or more fields have an error" only repeats the tip under
   the input, so the banner is dropped for that one state; sent, failed and
   spam still speak, and the screen-reader response is untouched either way. */
.tp-footer .wpcf7 form.invalid .wpcf7-response-output {
	display: none;
}
/*
 * Decorative wordmark. Sized in vw so it spans the viewport at every width;
 * flex centring lets the edge letters bleed off both sides equally, and the
 * wrapper (plus .tp-footer) clips them so the page never scrolls sideways.
 */
.tp-footer__watermark {
	display: flex;
	justify-content: center;
	margin-top: var(--tp-space-2xl);
	padding-bottom: var(--tp-space-2xl);
	overflow: hidden;
	line-height: 0.8;
	pointer-events: none;
	user-select: none;
}

.tp-footer__watermark span {
	flex: none;
	font-family: var(--font-heading);
	font-size: 19vw;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-watermark);
}

.tp-footer__legal {
	color: var(--color-text);
	border-top: 1px solid var(--color-border-subtle);
}

/* =========================================================================
   11. Back to top
   =========================================================================
   Fixed to the bottom-right corner. Bootstrap has no such component, and the
   treatment is the brand's: the same navy pill as the header's Login button,
   turning accent blue on hover like every other interactive element.

   Only the visible state is a class - the button is printed with `hidden` and
   app.js removes it, so without JavaScript there is no control at all rather
   than one that does nothing.
   ------------------------------------------------------------------------- */

.tp-to-top {
	position: fixed;
	inset-block-end: var(--tp-space-lg);
	inset-inline-end: var(--tp-space-lg);
	/* Under the skip link (1080) and the site header (1030). */
	z-index: 1020;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--color-on-primary);
	background-color: var(--color-primary);
	border: 0;
	border-radius: var(--tp-radius-pill);
	box-shadow: var(--tp-shadow-md);
	cursor: pointer;
	/* Out of the way until scrolled: no pointer target, no tab stop. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0.25s,
		background-color 0.2s ease;
}

.tp-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0s,
		background-color 0.2s ease;
}

.tp-to-top:hover,
.tp-to-top:focus-visible {
	background-color: var(--color-accent);
}

.tp-to-top:focus {
	outline: none;
}

.tp-to-top:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.tp-to-top__icon {
	display: block;
	flex: none;
}

@media (min-width: 992px) {
	.tp-to-top {
		inset-block-end: var(--tp-space-xl);
		inset-inline-end: var(--tp-space-xl);
		width: 3rem;
		height: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp-to-top {
		transition: none;
		transform: none;
	}
}