/*
Theme Name: TJS Platforms
Theme URI: https://tjsplatforms.com
Author: TJS Platforms, Inc.
Author URI: https://tjsplatforms.com
Description: Custom block theme for TJS Platforms, Inc. — a digital platform company building marketplaces, business management systems, and industry-specific software. Editorial layout, warm neutral palette, inline SVG illustrations, no third-party dependencies.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tjs-platforms
Tags: block-theme, business, full-site-editing, custom-colors, custom-logo, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv05" 1, "ss01" 1;
	overflow-x: hidden;
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(.wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip link */
.skip-link:focus {
	background: var(--wp--preset--color--ink);
	color: #fff;
	z-index: 100000;
}

/* ==========================================================================
   2. Header — black bar
   ========================================================================== */

.tjs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.tjs-header a,
.tjs-header .wp-block-site-title a {
	color: #fff;
	text-decoration: none;
}

.tjs-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--gold);
}

/* Logo — the wordmark ships white, so it sits on the dark header and footer */
.tjs-logo {
	display: flex;
	align-items: center;
	margin: 0;
}

.tjs-logo img,
.tjs-logo .custom-logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 30px;
}

.tjs-footer .tjs-logo img,
.tjs-footer .tjs-logo .custom-logo {
	height: 32px;
}

@media (max-width: 600px) {
	.tjs-logo img,
	.tjs-logo .custom-logo {
		height: 26px;
	}
}

.tjs-header .wp-block-navigation {
	--wp--preset--color--ink: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.tjs-header .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.15s ease;
}

.tjs-header .wp-block-navigation a:hover,
.tjs-header .wp-block-navigation .current-menu-item > a {
	color: #fff;
}

/* Gold underline on hover */
.tjs-header .wp-block-navigation .wp-block-navigation-item {
	position: relative;
}

.tjs-header .wp-block-navigation .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.tjs-header .wp-block-navigation .wp-block-navigation-item:hover > a::after {
	transform: scaleX(1);
}

/* Mobile overlay menu */
.tjs-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--ink);
	padding-top: 4.5rem;
}

.tjs-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
}

.tjs-header .wp-block-navigation__responsive-container-open,
.tjs-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Header CTA button — inverted (white on black) */
.tjs-header-cta .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
	padding: 0.65rem 1.2rem;
	font-size: 0.9375rem;
}

.tjs-header-cta .wp-block-button__link:hover,
.tjs-header-cta .wp-block-button__link:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   3. Eyebrow — gold dash + label
   ========================================================================== */

.tjs-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 1.25rem;
}

.tjs-eyebrow::before {
	content: "";
	width: 32px;
	height: 3px;
	flex: none;
	background: var(--wp--preset--color--gold);
	border-radius: 2px;
}

.tjs-eyebrow.is-centered {
	justify-content: center;
}

/* Uppercase section label variant */
.tjs-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 0.85rem;
}

/* ==========================================================================
   4. Buttons — ghost / underlined text link
   ========================================================================== */

.tjs-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: 0.9rem 0.25rem;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--ink);
}

.tjs-btn-ghost .wp-block-button__link:hover,
.tjs-btn-ghost .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--rust);
	text-decoration-color: var(--wp--preset--color--rust);
}

/* Outline button on dark backgrounds */
.tjs-btn-ondark .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.38);
}

.tjs-btn-ondark .wp-block-button__link:hover,
.tjs-btn-ondark .wp-block-button__link:focus {
	background: #fff;
	color: var(--wp--preset--color--ink);
	border-color: #fff;
}

.tjs-btn-light .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--ink);
}

.tjs-btn-light .wp-block-button__link:hover,
.tjs-btn-light .wp-block-button__link:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   5. Cards
   ========================================================================== */

.tjs-card {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.75rem;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tjs-card:hover {
	transform: translateY(-3px);
	border-color: #d3c9b4;
	box-shadow: var(--wp--preset--shadow--soft);
}

.tjs-card h3 {
	margin-top: 0.25rem;
	margin-bottom: 0.6rem;
}

.tjs-card p {
	color: var(--wp--preset--color--ink-soft);
	font-size: 1rem;
	margin: 0;
}

/* Insights listing card */
.tjs-post-card {
	display: flex;
	flex-direction: column;
	padding: 1.1rem;
}

/* The constrained layout inside the card applies auto side margins, which
   visually centres short single-line titles and dates. Pin them left. */
.tjs-post-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	text-align: left;
}

.tjs-post-thumb {
	margin: 0 !important;
	line-height: 0;
}

.tjs-post-card .wp-block-post-excerpt {
	margin-top: 0.7rem;
}

.tjs-post-card .wp-block-post-excerpt p {
	margin: 0;
}

.tjs-post-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 7px;
}

.tjs-post-card .wp-block-post-title {
	line-height: 1.28;
	letter-spacing: -0.022em;
}

.tjs-post-card .wp-block-post-title a {
	text-decoration: none;
}

.tjs-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--rust);
}

.tjs-post-card .wp-block-post-excerpt__excerpt {
	font-size: 1rem;
	color: var(--wp--preset--color--ink-soft);
}

.tjs-post-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-underline-offset: 4px;
}

/* Platform card — white, with badge + footer link */
.tjs-platform-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tjs-platform-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.tjs-platform-card__art {
	background: var(--wp--preset--color--sand);
	padding: 1.6rem 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.tjs-platform-card__art img {
	display: block;
	width: 100%;
	height: auto;
}

.tjs-platform-card__body {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex: 1;
}

.tjs-platform-card__body p {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: 1rem;
}

.tjs-platform-card__body h3 {
	margin: 0;
}

/* ==========================================================================
   6. Status badges
   ========================================================================== */

.tjs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.34rem 0.7rem;
	border-radius: 999px;
	border: 1px solid transparent;
	width: fit-content;
	line-height: 1;
}

.tjs-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.tjs-badge--available {
	background: #E8F3EC;
	border-color: #BEDCC9;
	color: #1E6B3F;
}

.tjs-badge--beta {
	background: #EAF0F8;
	border-color: #C3D3E8;
	color: var(--wp--preset--color--navy);
}

.tjs-badge--development {
	background: #FBF1DE;
	border-color: #EBD5A5;
	color: #8A5D0C;
}

.tjs-badge--soon {
	background: #F3F1EE;
	border-color: #DCD6CC;
	color: #5F5A52;
}

/* ==========================================================================
   7. Checklist (Why TJS)
   ========================================================================== */

.tjs-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.tjs-checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.tjs-checklist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tjs-checklist li {
	position: relative;
	padding-left: 2.15rem;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	line-height: 1.45;
}

.tjs-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Security controls list — on dark */
.tjs-controls {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.tjs-controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tjs-controls li {
	position: relative;
	padding-left: 1.85rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: 1rem;
	line-height: 1.45;
}

.tjs-controls li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}

/* ==========================================================================
   8. Illustrations
   ========================================================================== */

.tjs-illus {
	display: block;
	width: 100%;
	height: auto;
}

.tjs-illus-frame {
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.tjs-icon {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 1.15rem;
}

/* ==========================================================================
   9. Sections
   ========================================================================== */

.tjs-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.tjs-section--tight {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tjs-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0;
	height: 0;
}

.tjs-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.tjs-kicker {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}

/* Two-column media/text rows keep art from stretching oddly */
.tjs-split .wp-block-column {
	min-width: 0;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.tjs-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.72);
}

.tjs-footer h2,
.tjs-footer h3,
.tjs-footer h4,
.tjs-footer .wp-block-site-title a {
	color: #fff;
}

.tjs-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

.tjs-footer a:hover,
.tjs-footer a:focus {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tjs-footer-heading {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 1.1rem;
}

.tjs-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 0.9375rem;
}

/* Standalone links need a comfortable touch target on phones. Inline links
   inside a sentence are deliberately left alone — enlarging those would break
   the line box. */
@media (max-width: 781px) {
	.tjs-footer-list {
		gap: 0.2rem;
	}

	.tjs-footer-list a {
		display: inline-block;
		padding: 0.55rem 0;
	}

	.tjs-post-card .wp-block-post-excerpt__more-link {
		padding: 0.5rem 0;
	}
}

.tjs-footer-legal {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

.tjs-footer-rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	margin: 0;
}

.tjs-footer-tagline {
	color: var(--wp--preset--color--gold);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   11. Dark section utility
   ========================================================================== */

.tjs-dark {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.82);
}

.tjs-dark h1,
.tjs-dark h2,
.tjs-dark h3,
.tjs-dark h4 {
	color: #fff;
}

.tjs-dark .tjs-eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

.tjs-dark .tjs-lead {
	color: rgba(255, 255, 255, 0.78);
}

/* Navy section variant */
.tjs-navy {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.85);
}

.tjs-navy h1,
.tjs-navy h2,
.tjs-navy h3 {
	color: #fff;
}

.tjs-navy .tjs-eyebrow {
	color: rgba(255, 255, 255, 0.65);
}

.tjs-navy .tjs-lead {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   12. Content defaults (single / page)
   ========================================================================== */

/* Landing sections carry display-scale headings because they sit alone on a
   full-bleed band. Inside running prose that ratio is far too heavy against
   17px body copy, so editorial pages get their own, calmer scale. */
.tjs-prose h2 {
	font-size: clamp(1.5rem, 1.28rem + 0.85vw, 1.9375rem);
	letter-spacing: -0.022em;
	line-height: 1.2;
	margin-top: 2.6rem;
	margin-bottom: 0.85rem;
}

.tjs-prose h3 {
	font-size: clamp(1.1875rem, 1.1rem + 0.32vw, 1.375rem);
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin-top: 1.9rem;
	margin-bottom: 0.55rem;
}

.tjs-prose h4 {
	font-size: 1.0625rem;
	margin-top: 1.6rem;
	margin-bottom: 0.45rem;
}

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

.tjs-prose li + li {
	margin-top: 0.5rem;
}

/* Page and article titles — one step down from the homepage hero. */
.tjs-page-head .wp-block-post-title {
	font-size: clamp(2rem, 1.55rem + 2.1vw, 3rem);
	letter-spacing: -0.03em;
}

/* Editorial pages sit on the same left edge as the logo and footer columns.
   Without this the reading column is centred in the viewport while the header
   is centred in the 1240px grid, so the two never line up on wide screens. */
.tjs-page-head > *,
.tjs-prose > *,
.tjs-prose .wp-block-post-content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.tjs-prose .wp-block-post-content > .alignwide,
.tjs-prose .wp-block-post-content > .wp-block-columns {
	max-width: 100% !important;
}

/* ==========================================================================
   12b. Forms — contact and careers
   ========================================================================== */

.tjs-form-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	box-shadow: var(--wp--preset--shadow--soft);
}

.tjs-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

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

.tjs-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-bottom: 1.1rem;
}

.tjs-form-row .tjs-field {
	margin-bottom: 0;
}

.tjs-form-row + .tjs-form-row,
.tjs-form-row + .tjs-field {
	margin-top: 1.1rem;
}

.tjs-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.005em;
}

.tjs-req {
	color: var(--wp--preset--color--rust);
}

.tjs-field input,
.tjs-field select,
.tjs-field textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 7px;
	padding: 0.78rem 0.9rem;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tjs-field textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.6;
}

.tjs-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 16px;
	padding-right: 2.4rem;
}

.tjs-field input:hover,
.tjs-field select:hover,
.tjs-field textarea:hover {
	border-color: #d3c9b4;
}

.tjs-field input:focus,
.tjs-field select:focus,
.tjs-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 3px rgba(224, 160, 40, 0.28);
}

/* Honeypot — hidden from people, reachable by bots. Uses the clip technique
   rather than a negative offset so it never sits outside the viewport. */
.tjs-hp {
	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;
}

/* Collapse the field itself too, so it never reports a box wider than the
   viewport on narrow screens. */
.tjs-hp input,
.tjs-hp label {
	width: 1px;
	height: 1px;
	min-width: 0;
	padding: 0;
	border: 0;
}

.tjs-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
	margin-top: 1.5rem;
}

.tjs-submit {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 5px;
	padding: 0.95rem 1.9rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.tjs-submit:hover,
.tjs-submit:focus-visible {
	background: var(--wp--preset--color--rust);
}

.tjs-submit:active {
	transform: translateY(1px);
}

.tjs-form-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted);
	flex: 1 1 240px;
	line-height: 1.5;
}

.tjs-notice {
	border-radius: 8px;
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	border: 1px solid transparent;
}

.tjs-notice strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--wp--preset--color--ink);
}

.tjs-notice--ok {
	background: #E8F3EC;
	border-color: #BEDCC9;
	color: #1E6B3F;
}

.tjs-notice--error {
	background: #FBECEA;
	border-color: #EEC4BE;
	color: #8E2C21;
}

/* Routing list — reuses the dashed-connector language from the illustrations.
   The column tells people who picks their message up and when, so it carries
   information instead of padding out the width. */
.tjs-routes {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tjs-routes::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.6rem;
	bottom: 1.6rem;
	width: 2px;
	background-image: linear-gradient(
		to bottom,
		var(--wp--preset--color--gold) 0 5px,
		transparent 5px 13px
	);
	background-size: 2px 13px;
}

.tjs-routes li {
	position: relative;
	padding-left: 2.1rem;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.tjs-routes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 12px;
	height: 12px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
}

.tjs-route__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.3rem;
}

.tjs-route__desc {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

.tjs-note {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.tjs-note strong {
	display: block;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.2rem;
}

/* Contact details list beside the form */
.tjs-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.tjs-contact-list li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.tjs-contact-list dt,
.tjs-contact-list .tjs-contact-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.tjs-contact-list .tjs-contact-value {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ==========================================================================
   13. Motion
   ========================================================================== */

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

	.tjs-card:hover,
	.tjs-platform-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   14. Small screens
   ========================================================================== */

/* Header must stay on a single row down to the smallest phones. The logo,
   the menu toggle and the CTA otherwise wrap onto a second line around 380px. */
@media (max-width: 781px) {
	.tjs-header .alignwide {
		flex-wrap: nowrap !important;
		gap: 0.75rem !important;
	}

	.tjs-header .alignwide > .wp-block-group {
		gap: 0.85rem !important;
		flex: 0 0 auto;
	}

	.tjs-logo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.tjs-logo img,
	.tjs-logo .custom-logo {
		height: 24px;
	}

	.tjs-header-cta .wp-block-button__link {
		padding: 0.55rem 0.95rem;
		font-size: 0.875rem;
		white-space: nowrap;
	}
}

/* Below this the CTA is dropped — Contact lives in the overlay menu instead. */
@media (max-width: 400px) {
	.tjs-logo img,
	.tjs-logo .custom-logo {
		height: 22px;
	}

	.tjs-header-cta {
		display: none;
	}
}

/* The Contact link is only for the mobile overlay; the header button covers it
   on desktop. */
@media (min-width: 782px) {
	.tjs-header .tjs-nav-contact {
		display: none;
	}
}

@media (max-width: 781px) {
	.tjs-platform-card__art {
		padding: 1.25rem;
	}

	.tjs-platform-card__body {
		padding: 1.25rem;
	}

	.tjs-card {
		padding: 1.4rem;
	}

	.tjs-checklist {
		gap: 0.95rem;
	}
}