/* ==========================================================================
   Keystone Talent Bridge — component styles
   Colours, type and spacing come from theme.json. This file carries the
   components theme.json cannot express on its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accessibility floor
   -------------------------------------------------------------------------- */

.ktb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--wp--preset--color--ink);
	color: #fff;
	padding: 1rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
}
.ktb-skip-link:focus {
	left: 0;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* Visible focus on everything interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* 44px minimum tap targets. */
.wp-block-button__link,
.wp-block-navigation a,
button,
summary {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-block-navigation a { justify-content: flex-start; }

/* Never justify body copy; hurts readers with dyslexia. */
p, li { text-align: left; }

/* Comfortable measure. */
.wp-block-post-content p:not(.has-text-align-center),
.entry-content p:not(.has-text-align-center) {
	max-width: 68ch;
}

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

/* Bebas Neue is display-only. Never let it fall below 32px. */
h1, h2,
.has-display-font-family {
	font-size: max(2rem, 1em);
}

/* --------------------------------------------------------------------------
   2. Button variations
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: transform .12s ease, box-shadow .12s ease;
	text-align: center;
	gap: .5rem;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow);
}

/* Teal — white on #2E6066 = 7.04:1 */
.wp-block-button.is-style-ktb-teal .wp-block-button__link {
	background-color: var(--wp--preset--color--teal-deep);
	border-color: var(--wp--preset--color--teal-deep);
	color: #fff;
}
.wp-block-button.is-style-ktb-teal .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

/* Outline */
.wp-block-button.is-style-ktb-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--teal-deep);
	color: var(--wp--preset--color--teal-deep);
}
.wp-block-button.is-style-ktb-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--teal-deep);
	color: #fff;
}

/* White, for use on teal or ink bands */
.wp-block-button.is-style-ktb-white .wp-block-button__link {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   3. Group / card styles
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-ktb-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	padding: 1.7rem;
	height: 100%;
}
.wp-block-group.is-style-ktb-card p:last-child { margin-bottom: 0; }

/* Arch frame — echoes the bridge arch in the logo. */
.wp-block-group.is-style-ktb-arch,
.wp-block-group.is-style-ktb-arch img {
	border-radius: 999px 999px 14px 14px;
	overflow: hidden;
}

/* Pathway cards: coloured top rule, one per card. */
.ktb-paths .wp-block-column > .wp-block-group {
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 6px solid var(--wp--preset--color--teal);
	border-radius: 10px;
	padding: 2rem 1.6rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ktb-paths .wp-block-column:nth-child(2) > .wp-block-group { border-top-color: var(--wp--preset--color--gold); }
.ktb-paths .wp-block-column:nth-child(3) > .wp-block-group { border-top-color: var(--wp--preset--color--teal-light); }
.ktb-paths .wp-block-column > .wp-block-group:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow-lg);
}
.ktb-paths .wp-block-buttons { margin-top: auto; }

/* --------------------------------------------------------------------------
   4. Text utilities
   -------------------------------------------------------------------------- */

.is-style-ktb-eyebrow {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-deep);
	margin-bottom: .85rem;
}
.has-teal-deep-background-color .is-style-ktb-eyebrow,
.has-ink-background-color .is-style-ktb-eyebrow {
	color: var(--wp--preset--color--gold-on-dark);
}

/* Editor-only marker for outstanding content. Delete these blocks at launch. */
.is-style-ktb-flag {
	display: block;
	padding: .7rem 1rem;
	background: repeating-linear-gradient(45deg,#FFF7E0,#FFF7E0 9px,#FFFBF0 9px,#FFFBF0 18px);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 0 5px 5px 0;
	font-size: .83rem;
	line-height: 1.5;
	color: #5C4405;
	font-weight: 500;
}

/* Arch bullets, matching the logo motif. */
.wp-block-list.is-style-ktb-checks {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-ktb-checks li {
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: .8rem;
}
.wp-block-list.is-style-ktb-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42rem;
	width: 19px;
	height: 19px;
	border-radius: 50% 50% 3px 3px;
	background: var(--wp--preset--color--teal-light);
	border: 2px solid var(--wp--preset--color--teal-deep);
}

/* --------------------------------------------------------------------------
   5. Signature — the keystone span
   -------------------------------------------------------------------------- */

.ktb-span svg { width: 100%; height: auto; display: block; }
.ktb-span text { font-family: var(--wp--preset--font-family--body); }
.ktb-span .span-label { font-size: 15px; font-weight: 700; fill: var(--wp--preset--color--ink); }
.ktb-span .span-sub { font-size: 12.5px; font-weight: 700; fill: #907107; }
.ktb-span-mobile { display: none; }

.ktb-stage-row {
	display: flex;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	align-items: flex-start;
}
.ktb-stage-num {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-deep);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.ktb-stage-row.is-keystone .ktb-stage-num {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.ktb-stage-row h4 { margin: 0 0 .2rem; }
.ktb-stage-row p { margin: 0; font-size: .95rem; }

@media (max-width: 940px) {
	.ktb-span svg { display: none; }
	.ktb-span-mobile { display: block; }
}

/* --------------------------------------------------------------------------
   6. Accordion (core/details)
   -------------------------------------------------------------------------- */

.wp-block-details {
	background: #fff;
	margin-bottom: .8rem;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-size: 1.05rem;
	justify-content: flex-start;
	gap: .8rem;
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2.5px solid var(--wp--preset--color--teal-deep);
	border-bottom: 2.5px solid var(--wp--preset--color--teal-deep);
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex-shrink: 0;
}
.wp-block-details[open] summary::after { transform: rotate(-135deg); }
.wp-block-details[open] summary { margin-bottom: .8rem; }
.wp-block-details:hover { border-color: var(--wp--preset--color--teal-light); }

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

.wp-block-template-part header,
header.wp-block-template-part {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wp-block-navigation a {
	font-size: .88rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: .6rem .7rem;
	border-radius: 5px;
	border-bottom: 3px solid transparent;
}
.wp-block-navigation a:hover { background: var(--wp--preset--color--pale); }
.wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--teal-deep);
}
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.ktb-footer { background: var(--wp--preset--color--ink); color: #DCE8EA; }
.ktb-footer a { color: #DCE8EA; text-decoration: none; }
.ktb-footer a:hover { color: var(--wp--preset--color--gold-on-dark); text-decoration: underline; }
.ktb-footer h2, .ktb-footer h3, .ktb-footer h4 { color: #fff; }
.ktb-footer h4 {
	font-size: .79rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.ktb-footer .wp-block-list { list-style: none; padding-left: 0; }
.ktb-footer .wp-block-list li { margin-bottom: .55rem; }

/* --------------------------------------------------------------------------
   9. Dark bands — force legible text on teal / ink backgrounds
   -------------------------------------------------------------------------- */

/* Plain --teal (#48959D) is only 3.46:1 against white, so it is a
   decorative fill, never a background for body text. Use --teal-deep
   (#2E6066, 7.04:1) for any band that carries copy. */
.has-teal-deep-background-color,
.has-ink-background-color {
	color: #fff;
}
.has-teal-deep-background-color h1, .has-teal-deep-background-color h2,
.has-teal-deep-background-color h3, .has-teal-deep-background-color h4,
.has-teal-deep-background-color p,
.has-ink-background-color h1, .has-ink-background-color h2,
.has-ink-background-color h3, .has-ink-background-color h4,
.has-ink-background-color p {
	color: #fff;
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], select, textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: .8rem .9rem;
	min-height: 48px;
	border: 2px solid #C3D4D7;
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
}
input:focus, select:focus, textarea:focus { border-color: var(--wp--preset--color--teal-deep); }
label { display: block; font-weight: 600; font-size: .96rem; margin-bottom: .4rem; color: var(--wp--preset--color--ink); }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-button { width: 100%; }
	.wp-block-button__link { width: 100%; }
}

/* --------------------------------------------------------------------------
   12. Numbered process steps  (core/list -> style "Numbered steps")
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-ktb-steps {
	counter-reset: ktbstep;
	list-style: none;
	padding-left: 0;
	margin-top: 2rem;
}
.wp-block-list.is-style-ktb-steps > li {
	counter-increment: ktbstep;
	position: relative;
	padding: 0 0 1.9rem 4.2rem;
	border-left: 2px solid var(--wp--preset--color--teal-light);
	margin-left: 1.3rem;
}
.wp-block-list.is-style-ktb-steps > li:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}
.wp-block-list.is-style-ktb-steps > li::before {
	content: counter(ktbstep);
	position: absolute;
	left: -1.35rem;
	top: -0.25rem;
	width: 2.65rem;
	height: 2.65rem;
	border-radius: 50%;
	background: var(--wp--preset--color--teal-deep);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
}
.wp-block-list.is-style-ktb-steps > li strong { display: block; margin-bottom: .15rem; color: var(--wp--preset--color--ink); }

/* --------------------------------------------------------------------------
   13. Stat blocks (Impact page)
   -------------------------------------------------------------------------- */

.ktb-stat {
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 10px;
	padding: 1.5rem 1.1rem;
	text-align: center;
	height: 100%;
}
.ktb-stat .ktb-stat-n {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--gold-on-dark);
	margin: 0;
}
.ktb-stat .ktb-stat-l { font-size: .84rem; margin: .4rem 0 0; color: #fff; }

/* --------------------------------------------------------------------------
   14. Job board placeholder + empty state
   -------------------------------------------------------------------------- */

.ktb-empty {
	border: 2px dashed var(--wp--preset--color--teal-light);
	border-radius: 12px;
	padding: 3rem 2rem;
	text-align: center;
	background: var(--wp--preset--color--pale);
}
.ktb-empty p { margin-left: auto; margin-right: auto; }

.ktb-job {
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 5px solid var(--wp--preset--color--teal);
	border-radius: 8px;
	padding: 1.4rem 1.6rem;
	background: #fff;
	margin-bottom: 1rem;
}
.ktb-job h4 { margin: .5rem 0 .2rem; }
.ktb-job p { margin: 0; }
.ktb-badge {
	display: inline-block;
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .32rem .7rem;
	border-radius: 100px;
	background: var(--wp--preset--color--pale);
	color: var(--wp--preset--color--teal-deep);
	border: 1px solid var(--wp--preset--color--teal-light);
}

/* --------------------------------------------------------------------------
   15. Readable measure at wide layout
   Containers are wide, but running text stays inside a comfortable
   line length. Text in columns/cards is already narrow, so this only
   bites on full-width single-column sections.
   -------------------------------------------------------------------------- */

.wp-block-post-content > .wp-block-group > .wp-block-paragraph,
.wp-block-post-content > .wp-block-paragraph,
.wp-block-group > p:not(.has-text-align-center):not(.is-style-ktb-flag),
.wp-block-group > .wp-block-list:not(.is-style-ktb-steps):not(.is-style-ktb-checks) {
	max-width: 72ch;
}
.wp-block-group > .wp-block-list.is-style-ktb-checks,
.wp-block-group > .wp-block-list.is-style-ktb-steps {
	max-width: 80ch;
}

/* Header: keep the row on one line and let nav take the slack */
header .wp-block-group.alignwide { gap: 1.5rem; }
header .wp-block-navigation { flex-wrap: wrap; row-gap: .25rem; }

@media (max-width: 900px) {
	header .wp-block-group.alignwide { flex-wrap: wrap !important; }
}

/* ==========================================================================
   16. WP Job Manager — restyle the plugin to match the brand
   The plugin ships its own grey stylesheet. Everything below overrides it.
   ========================================================================== */

/* ---------- Filter panel ---------- */

.job_listings .job_filters {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

/* Search row — keywords, location and button on one line */
.job_listings .job_filters .search_jobs {
	padding: 1.1rem 1.3rem;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .7rem;
}
.job_listings .job_filters .search_jobs > div {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 200px;
	min-width: 0;
}
.job_listings .job_filters .search_jobs > .search_submit,
.job_listings .job_filters .search_jobs > div:has(input[type="submit"]) {
	flex: 0 0 auto;
}
/* the "remote positions only" checkbox shouldn't claim a whole row */
.job_listings .job_filters .search_jobs .filter_by_remote,
.job_listings .job_filters .search_jobs > div.filter_wide {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
}

.job_listings .job_filters label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: .95rem;
	color: var(--wp--preset--color--ink);
}

.job_listings .job_filters input[type="text"],
.job_listings .job_filters input[type="search"],
.job_listings .job_filters select {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: .8rem .9rem;
	min-height: 48px;
	border: 2px solid #C3D4D7;
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}
.job_listings .job_filters input:focus,
.job_listings .job_filters select:focus {
	border-color: var(--wp--preset--color--teal-deep);
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* "Search Jobs" submit — make it a real button */
.job_listings .job_filters input[type="submit"],
.job_listings .job_filters button[type="submit"],
.job_listings .search_submit input {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	padding: .85rem 1.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold);
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	cursor: pointer;
	box-shadow: none;
	transition: transform .12s ease;
}
.job_listings .job_filters input[type="submit"]:hover {
	background: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
	transform: translateY(-2px);
}

/* ---------- Job type checkboxes ---------- */

/* Job type pills — flow horizontally.
   Targets .job_types whether it is the <ul> itself or a wrapper around one. */
.job_listings .job_filters .job_types,
.job_listings .job_filters ul.job_types,
.job_listings .job_filters .job_types ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .3rem 1.6rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	float: none !important;
	width: auto !important;
}
.job_listings .job_filters .job_types {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: .85rem 1.3rem !important;
}
.job_listings .job_filters .job_types li {
	display: block !important;
	float: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1 !important;
}
.job_listings .job_filters .job_types li label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem .5rem .5rem .25rem;
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: .92rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	white-space: nowrap;
	border-radius: 5px;
	transition: color .12s ease;
}
.job_listings .job_filters .job_types li label:hover {
	color: var(--wp--preset--color--teal-deep);
	border-color: transparent;
}
.job_listings .job_filters .job_types li label:focus-within {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.job_listings .job_filters .job_types input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-height: 18px;
	accent-color: var(--wp--preset--color--teal-deep);
	margin: 0;
}

/* ---------- Results bar ---------- */

.job_listings .showing_jobs {
	background: var(--wp--preset--color--pale);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 0;
	padding: .6rem 1.3rem;
	font-size: .88rem;
	color: #4A6168;
}
.job_listings .showing_jobs a { color: var(--wp--preset--color--teal-deep); }

/* ---------- Listing cards ---------- */

ul.job_listings {
	border: 0;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

ul.job_listings li.job_listing,
ul.job_listings li.no_job_listings_found {
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 5px solid var(--wp--preset--color--teal);
	border-radius: 8px;
	background: #fff;
	margin-bottom: 1rem;
	padding: 0;
	transition: transform .12s ease, box-shadow .12s ease;
}
ul.job_listings li.job_listing:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow);
}
ul.job_listings li.job_listing a {
	padding: 1.4rem 1.6rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
	text-decoration: none;
	color: inherit;
}
ul.job_listings li.job_listing .position h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 .2rem;
	padding: 0;
}
ul.job_listings li.job_listing .position .company {
	color: var(--wp--preset--color--teal-deep);
	font-weight: 600;
	font-size: .95rem;
}
ul.job_listings li.job_listing .position .company .tagline { color: #5A6E73; font-weight: 400; }
ul.job_listings li.job_listing ul.meta {
	font-style: normal;
	font-size: .86rem;
	color: #5A6E73;
	padding: 0;
	margin: 0;
}
ul.job_listings li.job_listing ul.meta li { border: 0; padding: 0 0 .2rem; margin: 0; }
ul.job_listings li.job_listing ul.meta .job-type {
	display: inline-block;
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 100px;
	background: var(--wp--preset--color--pale);
	color: var(--wp--preset--color--teal-deep);
	border: 1px solid var(--wp--preset--color--teal-light);
}
ul.job_listings li.job_listing img.company_logo {
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--rule);
}

/* Empty state */
ul.job_listings li.no_job_listings_found {
	border: 2px dashed var(--wp--preset--color--teal-light);
	border-left-width: 2px;
	background: var(--wp--preset--color--pale);
	padding: 3rem 2rem;
	text-align: center;
	font-size: 1.05rem;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Load more */
.load_more_jobs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.8rem;
	background: var(--wp--preset--color--teal-deep);
	color: #fff;
	border: 2px solid var(--wp--preset--color--teal-deep);
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
}
.load_more_jobs:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color:#fff; }

/* ---------- Submission form ---------- */

.job-manager-form fieldset {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0 0 1.3rem;
	margin: 0 0 1.3rem;
	display: block;
}
.job-manager-form fieldset:last-of-type { border-bottom: 0; }
.job-manager-form fieldset label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: .96rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: .4rem;
	display: block;
}
.job-manager-form small.description { color: #5A6E73; font-size: .85rem; }
.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form input[type="tel"],
.job-manager-form input[type="password"],
.job-manager-form select,
.job-manager-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: .8rem .9rem;
	min-height: 48px;
	border: 2px solid #C3D4D7;
	border-radius: 6px;
	background: #fff;
}
.job-manager-form input:focus,
.job-manager-form select:focus,
.job-manager-form textarea:focus {
	border-color: var(--wp--preset--color--teal-deep);
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.job-manager-form input[type="submit"],
.job-manager-form button,
input.button, a.button, .job-manager-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--gold);
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}
.job-manager-form input[type="submit"]:hover,
input.button:hover, a.button:hover {
	background: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--ink);
}

/* Job dashboard table */
.job-manager-jobs table,
table.job-manager-jobs {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.job-manager-jobs th {
	background: var(--wp--preset--color--pale);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: .88rem;
	color: var(--wp--preset--color--ink);
	padding: .9rem 1rem;
	text-align: left;
}
.job-manager-jobs td { padding: .9rem 1rem; border-top: 1px solid var(--wp--preset--color--rule); }

/* Messages */
.job-manager-message, .job-manager-info, .job-manager-error {
	border-radius: 8px;
	padding: 1rem 1.2rem;
	border-left: 4px solid var(--wp--preset--color--teal-deep);
	background: var(--wp--preset--color--pale);
}
.job-manager-error { border-left-color: #B3261E; background: #FDECEA; }

@media (max-width: 600px) {
	ul.job_listings li.job_listing a { flex-direction: column; align-items: flex-start; }
	.job_listings .job_filters .job_types ul { flex-direction: column; }
	.job_listings .job_filters .job_types li label { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Job board — spacing corrections
   Appended last so these win over section 16 at equal specificity.
   -------------------------------------------------------------------------- */

/* The filter panel is now the whole block, so round the bottom too. */
.job_listings .job_filters {
	border-radius: 12px;
	overflow: hidden;
}

/* Put ALL horizontal padding on the list itself, so every wrapped row
   starts from the same left edge. The wrapper keeps none. */
.job_listings .job_filters .job_types {
	padding: 0 !important;
	border-top: 1px solid var(--wp--preset--color--rule);
	background: #fff;
}
.job_listings .job_filters .job_types,
.job_listings .job_filters ul.job_types,
.job_listings .job_filters .job_types ul {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	column-gap: 1.6rem !important;
	row-gap: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/* innermost list carries the padding */
.job_listings .job_filters ul.job_types,
.job_listings .job_filters .job_types ul {
	padding: .55rem 1.3rem !important;
}
/* if .job_types IS the ul, it needs the padding directly */
.job_listings .job_filters ul.job_types { padding: .55rem 1.3rem !important; }

.job_listings .job_filters .job_types li {
	display: flex !important;
	align-items: center !important;
	float: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: normal !important;
	min-height: 0 !important;
	height: auto !important;
}
.job_listings .job_filters .job_types li label {
	min-height: 40px !important;
	padding: .35rem .25rem !important;
	margin: 0 !important;
}

/* Results bar sits flush under the checkboxes, no gap, no double border. */
.job_listings .showing_jobs {
	border: 0 !important;
	border-top: 1px solid var(--wp--preset--color--rule) !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* Separate the listings/empty state from the filter panel. */
.job_listings ul.job_listings,
ul.job_listings {
	margin-top: 1.2rem !important;
	border: 0 !important;
	padding: 0 !important;
}

/* Empty state — complete border on all four sides, own breathing room. */
ul.job_listings li.no_job_listings_found {
	border: 2px dashed var(--wp--preset--color--teal-light) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--pale);
	padding: 2.6rem 2rem !important;
	margin: 0 !important;
	text-align: center;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	display: block !important;
	box-sizing: border-box !important;
}
ul.job_listings li.no_job_listings_found:hover {
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   18. Forminator — brand styling
   Presents the form as a distinct card so it doesn't blend into the page.
   ========================================================================== */

/* ---------- The card ---------- */

.forminator-ui.forminator-custom-form,
.forminator-custom-form {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 5px solid var(--wp--preset--color--gold);
	border-radius: 12px;
	padding: 2.2rem 2rem;
	max-width: 720px;
	box-shadow: var(--wp--custom--shadow);
}

/* ---------- Headline block (the HTML field) ---------- */

.forminator-custom-form .forminator-html h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 .6rem;
}
.forminator-custom-form .forminator-html p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1.6rem;
	max-width: 60ch;
}

/* ---------- Labels ---------- */

.forminator-custom-form .forminator-label {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink) !important;
	margin-bottom: .45rem !important;
	display: block;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Replace the bare red asterisk with readable text.
   A lone "*" means nothing to a screen reader without explanation. */
.forminator-custom-form .forminator-required {
	color: transparent !important;
	font-size: 0 !important;
	position: relative;
}
.forminator-custom-form .forminator-required::after {
	content: " (required)";
	color: #6A7C81;
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: 0;
}

.forminator-custom-form .forminator-description {
	font-size: .89rem !important;
	color: #5A6E73 !important;
	margin-bottom: .5rem !important;
	line-height: 1.5;
}

/* ---------- Inputs ---------- */

.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="url"],
.forminator-custom-form textarea,
.forminator-custom-form select {
	width: 100% !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1rem !important;
	padding: .8rem .9rem !important;
	min-height: 50px !important;
	border: 2px solid #C3D4D7 !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}
.forminator-custom-form .forminator-textarea,
.forminator-custom-form textarea {
	min-height: 120px !important;
	line-height: 1.6 !important;
}
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus,
.forminator-custom-form select:focus,
.forminator-custom-form textarea:focus {
	border-color: var(--wp--preset--color--teal-deep) !important;
	outline: 3px solid var(--wp--preset--color--gold) !important;
	outline-offset: 2px !important;
}

/* Select arrow */
.forminator-custom-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink) 50%),
	                  linear-gradient(135deg, var(--wp--preset--color--ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6rem !important;
}

/* ---------- Section divider ---------- */

.forminator-custom-form .forminator-section-title,
.forminator-custom-form .forminator-section h2,
.forminator-custom-form .forminator-section h3,
.forminator-custom-form .forminator-section h4 {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--teal-deep) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 2rem 0 .3rem !important;
	padding-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	line-height: 1.3 !important;
}

/* ---------- Radio and checkbox ---------- */

.forminator-custom-form .forminator-radio,
.forminator-custom-form .forminator-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: .65rem;
	min-height: 44px;
	padding: .35rem 0;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	line-height: 1.5;
}
.forminator-custom-form .forminator-radio input,
.forminator-custom-form .forminator-checkbox input {
	width: 20px;
	height: 20px;
	min-height: 20px;
	accent-color: var(--wp--preset--color--teal-deep);
	margin-top: .15rem;
	flex-shrink: 0;
}
.forminator-custom-form .forminator-radio:hover,
.forminator-custom-form .forminator-checkbox:hover {
	color: var(--wp--preset--color--teal-deep);
}

/* Consent sits apart from the questions above it */
.forminator-custom-form .forminator-field-consent {
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* ---------- Submit ---------- */

.forminator-custom-form .forminator-button-submit,
.forminator-custom-form button[type="submit"],
.forminator-custom-form .forminator-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 52px !important;
	padding: .9rem 2.2rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--ink) !important;
	background: var(--wp--preset--color--gold) !important;
	border: 2px solid var(--wp--preset--color--gold) !important;
	border-radius: 6px !important;
	cursor: pointer;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-top: 1.4rem;
	transition: transform .12s ease;
}
.forminator-custom-form .forminator-button-submit:hover,
.forminator-custom-form button[type="submit"]:hover {
	background: var(--wp--preset--color--gold-light) !important;
	border-color: var(--wp--preset--color--gold-light) !important;
	transform: translateY(-2px);
}
.forminator-custom-form .forminator-button-submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal-deep) !important;
	outline-offset: 3px;
}

/* ---------- Messages ---------- */

.forminator-response-message,
.forminator-custom-form .forminator-response-message {
	border-radius: 8px !important;
	padding: 1rem 1.2rem !important;
	border-left: 4px solid var(--wp--preset--color--teal-deep) !important;
	background: var(--wp--preset--color--pale) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 1rem;
}
.forminator-error-message,
.forminator-custom-form .forminator-error-message {
	color: #A3160F !important;
	font-size: .9rem !important;
	font-weight: 600;
	margin-top: .35rem !important;
}
.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-custom-form .forminator-has_error textarea,
.forminator-custom-form .forminator-has_error select {
	border-color: #A3160F !important;
}

/* character counter */
.forminator-custom-form .forminator-description[data-limit],
.forminator-custom-form .forminator-chars-counter {
	font-size: .8rem !important;
	color: #7A8B90 !important;
}

@media (max-width: 600px) {
	.forminator-ui.forminator-custom-form,
	.forminator-custom-form { padding: 1.5rem 1.2rem; }
	.forminator-custom-form .forminator-button-submit { width: 100%; }
}

/* ==========================================================================
   19. Forminator — override the plugin's own design system
   High specificity on purpose: Forminator ships opinionated CSS.
   ========================================================================== */

/* ---------- Card fills the content width ---------- */

.forminator-ui.forminator-custom-form,
.forminator-custom-form,
div[class*="forminator-custom-form"] {
	max-width: 100% !important;
	width: 100% !important;
	padding: 2.6rem 2.8rem !important;
	background: var(--wp--preset--color--cream) !important;
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-top: 5px solid var(--wp--preset--color--gold) !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
}

/* Two columns on wide screens so full-width fields don't stretch awkwardly */
@media (min-width: 900px) {
	.forminator-ui.forminator-custom-form .forminator-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 2rem;
	}
	/* long-form fields span both columns */
	.forminator-ui.forminator-custom-form .forminator-row:has(textarea),
	.forminator-ui.forminator-custom-form .forminator-row:has(.forminator-field-section),
	.forminator-ui.forminator-custom-form .forminator-row:has(.forminator-field-consent),
	.forminator-ui.forminator-custom-form .forminator-row:has(.forminator-html),
	.forminator-ui.forminator-custom-form .forminator-row:has(select),
	.forminator-ui.forminator-custom-form .forminator-row:has(button) {
		grid-template-columns: 1fr;
	}
}

/* ---------- Typography ---------- */

.forminator-ui.forminator-custom-form,
.forminator-ui.forminator-custom-form * {
	font-family: var(--wp--preset--font-family--body) !important;
}

.forminator-ui.forminator-custom-form .forminator-html h3,
.forminator-ui.forminator-custom-form .forminator-html h2 {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--ink) !important;
	line-height: 1.25 !important;
	margin: 0 0 .7rem !important;
}
.forminator-ui.forminator-custom-form .forminator-html p {
	font-size: 1.02rem !important;
	line-height: 1.6 !important;
	margin: 0 0 1.8rem !important;
	max-width: 62ch;
}

/* ---------- Section divider ---------- */

.forminator-ui.forminator-custom-form .forminator-field-section,
.forminator-ui.forminator-custom-form .forminator-section {
	margin: 1.8rem 0 .6rem !important;
	padding-top: 1.6rem !important;
	border-top: 1px solid var(--wp--preset--color--rule) !important;
}
.forminator-ui.forminator-custom-form .forminator-field-section h1,
.forminator-ui.forminator-custom-form .forminator-field-section h2,
.forminator-ui.forminator-custom-form .forminator-field-section h3,
.forminator-ui.forminator-custom-form .forminator-field-section h4,
.forminator-ui.forminator-custom-form .forminator-section-title,
.forminator-ui.forminator-custom-form .forminator-title {
	font-size: .95rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--teal-deep) !important;
	text-transform: uppercase !important;
	letter-spacing: .09em !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-section-description,
.forminator-ui.forminator-custom-form .forminator-subtitle { display: none !important; }

/* ---------- Native radios and checkboxes ----------
   Forminator replaces these with styled spans in its own palette.
   Show the real controls instead: they honour accent-color, they are
   fully keyboard accessible, and they match the brand. */

.forminator-ui.forminator-custom-form .forminator-radio > span[aria-hidden="true"],
.forminator-ui.forminator-custom-form .forminator-checkbox > span[aria-hidden="true"],
.forminator-ui.forminator-custom-form .forminator-radio-bullet,
.forminator-ui.forminator-custom-form .forminator-checkbox-box {
	display: none !important;
}
.forminator-ui.forminator-custom-form input[type="radio"],
.forminator-ui.forminator-custom-form input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: auto !important;
	opacity: 1 !important;
	position: static !important;
	width: 20px !important;
	height: 20px !important;
	min-height: 20px !important;
	margin: 0 !important;
	accent-color: var(--wp--preset--color--teal-deep) !important;
	flex-shrink: 0;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto !important;
}
.forminator-ui.forminator-custom-form .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: .7rem !important;
	min-height: 44px !important;
	padding: .3rem 0 !important;
	font-size: 1rem !important;
	color: var(--wp--preset--color--contrast) !important;
	cursor: pointer;
	font-weight: 400 !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox {
	align-items: flex-start !important;
	line-height: 1.5;
}
.forminator-ui.forminator-custom-form .forminator-checkbox input[type="checkbox"] {
	margin-top: .2rem !important;
}

/* ---------- Select ---------- */

.forminator-ui.forminator-custom-form select,
.forminator-ui.forminator-custom-form .forminator-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 2px solid #C3D4D7 !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	min-height: 50px !important;
	padding: .8rem 2.6rem .8rem .9rem !important;
	font-size: 1rem !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ---------- Inputs ---------- */

.forminator-ui.forminator-custom-form input[type="text"],
.forminator-ui.forminator-custom-form input[type="email"],
.forminator-ui.forminator-custom-form input[type="tel"],
.forminator-ui.forminator-custom-form textarea {
	border: 2px solid #C3D4D7 !important;
	border-radius: 6px !important;
	background: #fff !important;
	min-height: 50px !important;
	padding: .8rem .9rem !important;
	font-size: 1rem !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}
.forminator-ui.forminator-custom-form textarea { min-height: 130px !important; }

.forminator-ui.forminator-custom-form input:focus,
.forminator-ui.forminator-custom-form textarea:focus,
.forminator-ui.forminator-custom-form select:focus {
	border-color: var(--wp--preset--color--teal-deep) !important;
	outline: 3px solid var(--wp--preset--color--gold) !important;
	outline-offset: 2px !important;
}

/* ---------- Labels ---------- */

.forminator-ui.forminator-custom-form .forminator-label {
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: .4rem !important;
}

/* ---------- Submit ---------- */

.forminator-ui.forminator-custom-form button[type="submit"],
.forminator-ui.forminator-custom-form .forminator-button-submit {
	background: var(--wp--preset--color--gold) !important;
	border: 2px solid var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	min-height: 52px !important;
	padding: .9rem 2.2rem !important;
	border-radius: 6px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	margin-top: 1.2rem !important;
}

/* ==========================================================================
   20. Zeffy donate plugin — match the brand
   The plugin ships a blue default button. Everything else inside the
   donation form itself is Zeffy's iframe and cannot be restyled from here.
   ========================================================================== */

.zeffy-donate-button,
a.zeffy-donate-button,
button.zeffy-donate-button,
[class*="zeffy"] button,
[class*="zeffy-donate"] a,
.zeffy-btn,
#zeffy-donate-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 52px !important;
	padding: .9rem 2.2rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--ink) !important;
	background: var(--wp--preset--color--gold) !important;
	background-color: var(--wp--preset--color--gold) !important;
	border: 2px solid var(--wp--preset--color--gold) !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform .12s ease;
}
.zeffy-donate-button:hover,
[class*="zeffy"] button:hover,
[class*="zeffy-donate"] a:hover {
	background: var(--wp--preset--color--gold-light) !important;
	background-color: var(--wp--preset--color--gold-light) !important;
	border-color: var(--wp--preset--color--gold-light) !important;
	color: var(--wp--preset--color--ink) !important;
	transform: translateY(-2px);
}
.zeffy-donate-button:focus-visible,
[class*="zeffy"] button:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 3px !important;
}

/* On dark bands, a white button reads better than gold-on-teal */
.has-teal-deep-background-color .zeffy-donate-button,
.has-ink-background-color .zeffy-donate-button,
.has-teal-deep-background-color [class*="zeffy"] button,
.has-ink-background-color [class*="zeffy"] button {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Inline embedded form: give the iframe room and round its corners */
.zeffy-embed,
[data-zeffy-embed],
iframe[src*="zeffy.com"],
iframe[title*="Zeffy"],
iframe[title*="Donation form"] {
	width: 100% !important;
	max-width: 620px !important;
	min-height: 620px !important;
	border: 0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	display: block;
	margin: 0 auto !important;
	background: #fff;
}

/* Centre the shortcode output inside the CTA band */
.wp-block-shortcode:has(iframe[src*="zeffy.com"]),
.wp-block-shortcode:has([class*="zeffy"]) {
	text-align: center;
	margin-top: 1.6rem;
}

/* ==========================================================================
   21. monday.com WorkForms embed
   Only the frame is ours. Everything rendered inside the iframe is
   controlled from monday.com's Design tab.
   ========================================================================== */

iframe[src*="monday.com"],
iframe[src*="mondayforms"],
iframe[src*="forms.monday"],
.wp-block-html iframe[src*="monday"] {
	display: block !important;
	width: 100% !important;
	max-width: 860px !important;
	min-height: 1000px !important;
	margin: 0 auto !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent;
	box-shadow: none;
}

/* Keep the embed at a comfortable reading width, centred. */
.wp-block-html:has(iframe[src*="monday"]) {
	max-width: 900px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Avoid the double-box look: if the embed sits inside one of our cream or
   pale section bands, drop the band's inner padding so there is a single
   card on screen rather than a card inside a card. */
.has-cream-background-color:has(iframe[src*="monday"]),
.has-pale-background-color:has(iframe[src*="monday"]) {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Centre whatever wrapper the embed code puts around it */
.wp-block-html:has(iframe[src*="monday"]),
.wp-block-group:has(iframe[src*="monday"]) > div,
div:has(> iframe[src*="monday"]) {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

/* If the embed sits inside one of our cream section bands, give it
   breathing room rather than letting it butt against the edges */
.has-cream-background-color .wp-block-html:has(iframe[src*="monday"]),
.has-pale-background-color .wp-block-html:has(iframe[src*="monday"]) {
	padding: 1.5rem 0;
}

@media (max-width: 782px) {
	iframe[src*="monday.com"],
	iframe[src*="forms.monday"] {
		min-height: 1100px !important;
		border-radius: 8px !important;
	}
}

/* --------------------------------------------------------------------------
   21b. Remove the drop shadow around any section wrapping a monday embed
   -------------------------------------------------------------------------- */

.wp-block-group:has(iframe[src*="monday"]),
.wp-block-group:has(> .wp-block-html iframe[src*="monday"]),
.has-cream-background-color:has(iframe[src*="monday"]),
.has-pale-background-color:has(iframe[src*="monday"]),
.wp-block-html:has(iframe[src*="monday"]) {
	box-shadow: none !important;
	filter: none !important;
	border: 0 !important;
}

/* the iframe itself carries no shadow either */
iframe[src*="monday.com"],
iframe[src*="forms.monday"],
iframe[src*="mondayforms"] {
	box-shadow: none !important;
	filter: none !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   22. Pathway cards — consistent alignment and uniform buttons
   -------------------------------------------------------------------------- */

/* Everything left-aligned: mixing a centred heading with left-aligned body
   copy is what made these read as uneven. */
.ktb-paths .wp-block-column > .wp-block-group {
	text-align: left;
	padding: 2rem 1.7rem 1.7rem !important;
	gap: 0 !important;
}

.ktb-paths .wp-block-column h3 {
	text-align: left !important;
	font-size: 1.35rem !important;
	line-height: 1.25 !important;
	margin: 0 0 .7rem !important;
	/* two lines' worth, so a wrapped heading doesn't push its body copy
	   out of line with the neighbouring cards */
	min-height: 3.4rem;
	display: flex;
	align-items: flex-start;
}

.ktb-paths .wp-block-column p {
	text-align: left !important;
	font-size: .98rem !important;
	line-height: 1.6 !important;
	margin: 0 0 1.6rem !important;
	flex: 1 1 auto;
}

/* Buttons: same width in every card, pinned to the bottom */
.ktb-paths .wp-block-buttons {
	margin-top: auto !important;
	width: 100% !important;
	justify-content: stretch !important;
}
.ktb-paths .wp-block-button {
	width: 100% !important;
	margin: 0 !important;
}
.ktb-paths .wp-block-button__link {
	width: 100% !important;
	justify-content: center !important;
	text-align: center !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

@media (max-width: 940px) {
	.ktb-paths .wp-block-column h3 {
		min-height: 0;
	}
}


/* --------------------------------------------------------------------------
   23. Six Core Commitments — decorative icons

   Icons are real .svg files in assets/icons/, referenced by relative path.
   An earlier version inlined them as data URIs and the encoding kept
   breaking, so they are plain files now. Paths are relative to THIS
   stylesheet, which lives in assets/css/.

   Icons are decorative; the card headings carry the meaning.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) {
	padding-top: 1.5rem !important;
}
.wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4 {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .7rem !important;
}
.wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	content: "";
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--pale);
	border: 2px solid var(--wp--preset--color--teal-light);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	/* fallback so no card is ever left with an empty circle */
	background-image: url("../icons/commit-1.svg");
}

/* Row 1 */
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(1) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-1.svg");
}
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(2) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-2.svg");
}
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(3) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-3.svg");
}

/* Row 2 — the commitments columns block that follows another one */
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) + .wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(1) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-4.svg");
}
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) + .wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(2) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-5.svg");
}
.wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) + .wp-block-columns:has(.wp-block-group.is-style-ktb-card h4.has-teal-deep-color) .wp-block-column:nth-child(3) .wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before {
	background-image: url("../icons/commit-6.svg");
}

@media (max-width: 600px) {
	.wp-block-group.is-style-ktb-card:has(h4.has-teal-deep-color) h4::before { width: 38px; height: 38px; background-size: 19px 19px; }
}

/* --------------------------------------------------------------------------
   24. Photos inside the arch frame
   The arch is the logo's bridge shape reused as an image mask.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-ktb-arch {
	padding: 0 !important;
	overflow: hidden;
	border-radius: 999px 999px 14px 14px;
	background: var(--wp--preset--color--teal-light);
}

.wp-block-group.is-style-ktb-arch .wp-block-image,
.wp-block-group.is-style-ktb-arch figure {
	margin: 0 !important;
	height: 100%;
}

.wp-block-group.is-style-ktb-arch img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 55%;   /* slightly low, so hands and product stay in frame */
	border-radius: 999px 999px 14px 14px;
}

/* Wider arch for landscape crops, if you use the 3:2 version instead */
.wp-block-group.is-style-ktb-arch.is-wide img {
	aspect-ratio: 3 / 2;
	border-radius: 999px 999px 14px 14px;
}

@media (max-width: 940px) {
	.wp-block-group.is-style-ktb-arch img {
		aspect-ratio: 4 / 3;
		max-height: 420px;
	}
}

/* --------------------------------------------------------------------------
   25. Arch style applied directly to an Image block
   Select the image, then Styles > Arch.
   -------------------------------------------------------------------------- */

.wp-block-image.is-style-ktb-arch,
.wp-block-image.is-style-ktb-arch figure {
	margin: 0 !important;
}

.wp-block-image.is-style-ktb-arch img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: 540px;
	object-fit: cover;
	object-position: center 55%;
	border-radius: 999px 999px 14px 14px;
}

/* Any image dropped straight into a hero column gets the arch treatment too,
   so it never renders as a bare rectangle. */
.wp-block-columns .wp-block-column > .wp-block-image:not(.ktb-contact-photo) img {
	border-radius: 999px 999px 14px 14px;
}

@media (max-width: 940px) {
	.wp-block-image.is-style-ktb-arch img {
		aspect-ratio: 4 / 3;
		max-height: 380px;
	}
}

/* --------------------------------------------------------------------------
   26. Hero photo — simple rounded rectangle, height matched to the text
   Overrides the arch dome from sections 24 and 25 for images sitting in a
   hero column. The arch shape still exists as a style you can choose, but it
   is not the default for photographs.
   -------------------------------------------------------------------------- */

.wp-block-columns .wp-block-column > .wp-block-image:not(.ktb-contact-photo) img,
.wp-block-image.is-style-ktb-arch img,
.wp-block-group.is-style-ktb-arch img {
	border-radius: 16px !important;
	aspect-ratio: 3 / 2 !important;
	max-height: 330px !important;
	width: 100% !important;
	object-fit: cover !important;
	object-position: center 55% !important;
}

/* keep the columns vertically centred so the text sits level with the photo */
.wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

/* no leftover teal fill showing behind a photo */
.wp-block-group.is-style-ktb-arch:has(img) {
	background: transparent !important;
	border-radius: 16px !important;
	overflow: visible !important;
}

@media (max-width: 940px) {
	.wp-block-columns .wp-block-column > .wp-block-image img,
	.wp-block-image.is-style-ktb-arch img {
		aspect-ratio: 4 / 3 !important;
		max-height: 340px !important;
	}
}

/* --------------------------------------------------------------------------
   27. Content-gap flags stay readable on dark bands
   The dark-band rule was forcing white text onto the flag's cream stripe.
   -------------------------------------------------------------------------- */

.has-ink-background-color .is-style-ktb-flag,
.has-teal-deep-background-color .is-style-ktb-flag,
.has-ink-background-color p.is-style-ktb-flag,
.has-teal-deep-background-color p.is-style-ktb-flag {
	color: #5C4405 !important;
}
.has-ink-background-color .is-style-ktb-flag strong,
.has-teal-deep-background-color .is-style-ktb-flag strong {
	color: #4A3604 !important;
}

/* --------------------------------------------------------------------------
   28. Inline email capture
   A single-field form sitting on a dark band: field and button on one row.
   Add the CSS class  ktb-signup  to the block wrapping the form.
   -------------------------------------------------------------------------- */

.ktb-signup .forminator-ui.forminator-custom-form,
.ktb-signup .forminator-custom-form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: 520px !important;
}

.ktb-signup .forminator-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: flex-end;
	grid-template-columns: none !important;
}

.ktb-signup .forminator-field {
	flex: 1 1 240px;
	min-width: 0;
}

.ktb-signup .forminator-label {
	color: #fff !important;
	font-size: .92rem !important;
	margin-bottom: .35rem !important;
}
.ktb-signup .forminator-description {
	color: rgba(255,255,255,.8) !important;
}

.ktb-signup input[type="email"],
.ktb-signup input[type="text"] {
	background: #fff !important;
	border: 2px solid transparent !important;
	min-height: 50px !important;
}
.ktb-signup input:focus {
	border-color: var(--wp--preset--color--gold) !important;
	outline: 3px solid var(--wp--preset--color--gold) !important;
	outline-offset: 2px !important;
}

.ktb-signup button[type="submit"],
.ktb-signup .forminator-button-submit {
	flex: 0 0 auto;
	margin-top: 0 !important;
	white-space: nowrap;
}

/* confirmation message on a dark band */
.ktb-signup .forminator-response-message {
	background: rgba(255,255,255,.12) !important;
	color: #fff !important;
	border-left-color: var(--wp--preset--color--gold) !important;
}

@media (max-width: 600px) {
	.ktb-signup .forminator-row { flex-direction: column; align-items: stretch; }
	.ktb-signup button[type="submit"] { width: 100%; }
}

/* --------------------------------------------------------------------------
   27. Contact card — photo beside name and details
   -------------------------------------------------------------------------- */

.ktb-contact-card .wp-block-columns {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 5px solid var(--wp--preset--color--gold);
	border-radius: 12px;
	padding: 1.8rem 2rem;
	gap: 2rem;
	align-items: center;
}

/* Portrait photo, capped so a large upload can't dominate the card */
.ktb-contact-card .ktb-contact-photo img {
	width: 100% !important;
	max-width: 190px;
	aspect-ratio: 1 / 1 !important;
	max-height: 190px !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	border-radius: 12px !important;
	display: block;
	border: 3px solid #fff;
	box-shadow: var(--wp--custom--shadow);
}

.ktb-contact-card .ktb-contact-photo {
	margin: 0 !important;
}

.ktb-contact-card h3 {
	margin: 0 0 .2rem !important;
	font-size: 1.5rem !important;
}

.ktb-contact-card .ktb-contact-role {
	margin: 0 0 .9rem !important;
}

.ktb-contact-card .ktb-contact-details {
	margin: 0 !important;
	font-size: 1.05rem;
	line-height: 2;
}
.ktb-contact-card .ktb-contact-details a {
	color: var(--wp--preset--color--teal-deep);
	text-decoration: none;
	font-weight: 600;
	/* comfortable tap target on mobile */
	display: inline-block;
	min-height: 32px;
}
.ktb-contact-card .ktb-contact-details a:hover,
.ktb-contact-card .ktb-contact-details a:focus-visible {
	text-decoration: underline;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	.ktb-contact-card .wp-block-columns {
		padding: 1.5rem 1.3rem;
		gap: 1.2rem;
		text-align: center;
	}
	.ktb-contact-card .ktb-contact-photo img {
		margin-left: auto;
		margin-right: auto;
		max-width: 150px;
		max-height: 150px !important;
	}
	.ktb-contact-card .ktb-contact-details a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   28. Contact card nested inside a section
   The pattern carries its own vertical padding for standalone use. When it
   sits inside a section that is already padded, drop it so the two don't
   stack and leave dead space.
   -------------------------------------------------------------------------- */

.wp-block-group.has-background .ktb-contact-card,
.has-pale-background-color .ktb-contact-card,
.has-cream-background-color .ktb-contact-card,
.has-teal-deep-background-color .ktb-contact-card,
.has-ink-background-color .ktb-contact-card {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: var(--wp--preset--spacing--md);
	margin-bottom: 0;
}

/* Card keeps a sensible max width instead of stretching the full band */
.ktb-contact-card .wp-block-columns {
	max-width: 720px;
	margin-left: 0;
}

/* On a pale background the cream card needs a little more separation */
.has-pale-background-color .ktb-contact-card .wp-block-columns {
	box-shadow: var(--wp--custom--shadow);
}

/* --------------------------------------------------------------------------
   29. Left-align section content
   WordPress's constrained layout centres any child narrower than the
   container. Combined with the reading-width caps in section 15, that made
   headings, paragraphs and cards each start at a different left edge.
   Pin them all to the same edge instead.
   -------------------------------------------------------------------------- */

.wp-block-group > p:not(.has-text-align-center):not(.is-style-ktb-flag),
.wp-block-group > .wp-block-list,
.wp-block-post-content > p:not(.has-text-align-center) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.ktb-contact-card .wp-block-columns {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* centred sections keep their centring */
.wp-block-group > p.has-text-align-center,
.has-text-align-center .wp-block-columns {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   30. Circular portrait option for the contact card
   Add the CSS class  is-round  to the image, or use a pre-cropped circle.
   -------------------------------------------------------------------------- */

.ktb-contact-card .ktb-contact-photo img,
.ktb-contact-card .wp-block-image.ktb-contact-photo img {
	border-radius: 50% !important;
	aspect-ratio: 1 / 1 !important;
	width: 190px !important;
	height: 190px !important;
	max-width: 190px !important;
	max-height: 190px !important;
	object-fit: cover !important;
	object-position: center center !important;
	border: 4px solid #fff;
	box-shadow: var(--wp--custom--shadow);
	display: block;
}

@media (max-width: 781px) {
	.ktb-contact-card .ktb-contact-photo img {
		width: 150px !important;
		height: 150px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* --------------------------------------------------------------------------
   31. Focus industries graphic
   -------------------------------------------------------------------------- */

.ktb-industries {
	padding: 0;
}
.ktb-industries-svg {
	width: 100%;
	height: auto;
	max-width: 560px;
	display: block;
	margin: 0 auto;
}
.ktb-industries-svg .ktb-ind-label {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 21px;
	font-weight: 700;
	fill: var(--wp--preset--color--ink);
}
.ktb-industries-svg .ktb-ind-caption {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 19px;
	font-weight: 600;
	fill: #4A6168;
}

@media (max-width: 940px) {
	.ktb-industries-svg { max-width: 460px; }
}

/* --------------------------------------------------------------------------
   32. Pull quote — a single emphasised line inside body copy
   Used for the one instruction on the Referral Partners page that matters
   most. Add the class  ktb-pullquote  to a paragraph to apply it.
   -------------------------------------------------------------------------- */

.ktb-pullquote {
	border-left: 5px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--cream);
	padding: 1.2rem 1.5rem;
	border-radius: 0 8px 8px 0;
	margin: 1.8rem 0 !important;
	max-width: 62ch;
}

@media (max-width: 600px) {
	.ktb-pullquote { padding: 1rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   33. monday embed trapped inside a two-column section
   The Employers page places the Advisory Council heading and copy in a
   two-column block. Pasting the form into one of those columns squeezes it
   to half the page. Rather than requiring the live page to be rebuilt, any
   columns block containing a monday form unstacks into a single column so
   the embed gets the full content width. Harmless once the block has been
   moved out of the columns by hand: the selector simply stops matching.
   -------------------------------------------------------------------------- */

.wp-block-columns:has(iframe[src*="monday"]) {
	display: block !important;
}

.wp-block-columns:has(iframe[src*="monday"]) > .wp-block-column {
	width: 100% !important;
	flex-basis: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
}

/* Breathing room between the copy and the form once they are stacked. */
.wp-block-columns:has(iframe[src*="monday"]) .wp-block-html {
	margin-top: 2.5rem !important;
}

/* A monday embed sitting on a dark band gets a little more room around it,
   so the form card does not butt against the band edges on narrow screens. */
.has-ink-background-color:has(iframe[src*="monday"]) .wp-block-html,
.has-teal-deep-background-color:has(iframe[src*="monday"]) .wp-block-html {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 782px) {
	.wp-block-columns:has(iframe[src*="monday"]) .wp-block-html {
		margin-top: 1.8rem !important;
	}
}

/* --------------------------------------------------------------------------
   34. Form panel — a cream card holding an embedded form
   Add the class  ktb-form-panel  to a Group block wrapping a Custom HTML
   embed. The panel's own padding becomes the visible border, even on all
   four sides, and the embed fills the panel rather than carrying its own
   narrower width. The long selectors are deliberate: section 21 forces
   100% width on divs inside any group containing a monday iframe, and
   this has to outrank it.
   -------------------------------------------------------------------------- */

.ktb-form-panel,
.wp-block-group:has(iframe[src*="monday"]) > div.ktb-form-panel,
div.wp-block-group.ktb-form-panel {
	max-width: 940px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 16px;
	box-shadow: none !important;
}

/* The embed fills the panel, so the padding is the only inset. */
.ktb-form-panel iframe[src*="monday"],
.ktb-form-panel iframe[src*="forms.monday"],
.ktb-form-panel .wp-block-html iframe {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 10px !important;
}

.ktb-form-panel .wp-block-html {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 781px) {
	.ktb-form-panel {
		max-width: 100% !important;
		border-radius: 12px;
	}
}

/* --------------------------------------------------------------------------
   35. True full-bleed bands
   Every section pattern is set to Full width, but WordPress only lets an
   alignfull block break out by the root padding amount unless its direct
   parent carries the global-padding class. Inside post content it does not,
   so coloured bands stop short of the viewport edge. These rules push them
   the rest of the way.
   -------------------------------------------------------------------------- */

.wp-block-post-content > .alignfull,
.entry-content > .alignfull,
main#ktb-main > .alignfull,
main#ktb-main > .wp-block-group > .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Give every full-bleed band a content column exactly as wide as the site's
   1200px measure. Without this, WordPress centres headings and cards inside
   that column while section 29 pins paragraphs and eyebrows to the band edge,
   so the two land on different left edges once the band runs to the viewport.
   !important is needed to beat inline padding set on individual bands. */
.wp-block-post-content > .alignfull,
.entry-content > .alignfull,
main#ktb-main > .alignfull,
main#ktb-main > .wp-block-group > .alignfull {
	padding-left: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
	padding-right: max(1.5rem, calc((100vw - 1200px) / 2)) !important;
}

/* 100vw counts the scrollbar on Windows, which would otherwise add a
   horizontal scroll of a few pixels. clip stops that without creating a
   scroll container, so sticky and anchor links still behave. */
body {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	body { overflow-x: hidden; }
}

/* --------------------------------------------------------------------------
   36. Consistent eyebrow and heading alignment inside bands
   Section 29 pins paragraphs left with margin-left:0. Section 35 now sizes
   every band's content box to exactly the 1200px measure, so that pin lands
   on the same edge as the headings and cards. These rules remove the last
   two offsets: the default centring on section headings, and the extra
   left margin the eyebrow picks up from its own letter-spacing.
   -------------------------------------------------------------------------- */

.alignfull > h2:not(.has-text-align-center),
.alignfull > h3:not(.has-text-align-center),
.alignfull > .wp-block-heading:not(.has-text-align-center) {
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left;
}

.alignfull > .is-style-ktb-eyebrow,
.alignfull > .wp-block-columns,
.alignfull > .wp-block-buttons,
.alignfull > .wp-block-list {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Sections that are deliberately centred keep their centring. */
.alignfull.has-text-align-center > *,
.alignfull > .has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   37. No dead space above the first band
   The inner-page template wraps post content in a padded group, so pages
   whose content opens with a full-width hero get a strip of background
   colour above it while the front page, on a different template, does not.
   Collapse that padding whenever the first thing in the content is a band
   that supplies its own top spacing.
   -------------------------------------------------------------------------- */

main#ktb-main > .wp-block-group:has(> .wp-block-post-content > .alignfull:first-child),
main#ktb-main > .wp-block-group:has(> .entry-content > .alignfull:first-child) {
	padding-top: 0 !important;
}

.wp-block-post-content > .alignfull:first-child,
.entry-content > .alignfull:first-child,
main#ktb-main > .alignfull:first-child {
	margin-top: 0 !important;
}

/* An empty page-title band on templates that render one adds the same gap. */
main#ktb-main .wp-block-group:has(> .wp-block-post-title:empty) {
	display: none !important;
}

/* --------------------------------------------------------------------------
   38. Close the seam between header, content and footer
   WordPress gives every direct child of the site wrapper a top margin equal
   to blockGap (1.2rem here). That puts a strip of page background between
   the header's bottom border and the first coloured band, and again above
   the footer. Bands and the footer supply their own spacing, so the gap is
   pure dead space.
   -------------------------------------------------------------------------- */

.wp-site-blocks > main#ktb-main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0 !important;
}

.wp-site-blocks > header {
	margin-block-end: 0 !important;
}

/* --------------------------------------------------------------------------
   39. Phases accordion
   Summaries were centring while their body copy stayed left, so each card
   looked half empty. Pin the summary to the same left edge as the text it
   reveals, and give the band a cream ground so the white cards read as
   cards rather than as an unstyled list.
   -------------------------------------------------------------------------- */

.alignfull:has(> .wp-block-details) {
	background-color: var(--wp--preset--color--cream);
}

.wp-block-details summary {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	text-align: left !important;
}

.wp-block-details > *:not(summary) {
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* A quiet accent rail that turns gold on the open card, so the expanded
   phase is findable at a glance without relying on colour alone: the
   triangle marker still rotates, and the panel still opens. */
.wp-block-details {
	border-left: 3px solid var(--wp--preset--color--teal-light) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.wp-block-details[open] {
	border-left-color: var(--wp--preset--color--gold) !important;
	box-shadow: 0 2px 12px rgba(31, 61, 69, .07);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details { transition: none !important; }
}

/* --------------------------------------------------------------------------
   40. Section subheadings
   H2 is Bebas Neue; H3 falls to Montserrat, which is correct, but at
   1.6rem in teal it out-shouted the Bebas heading above it. Bring it down
   to a clear third level: same ink as every other heading, smaller, with
   room above so it reads as the start of a sub-point.
   Card titles keep their own styling; .ktb-paths, .ktb-contact-card, the
   job listings and Forminator all carry higher specificity than this.
   -------------------------------------------------------------------------- */

.wp-block-column > h3,
.wp-block-group > h3,
.alignfull > h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1.35rem;
	letter-spacing: .01em;
	margin-top: 2.2rem;
	margin-bottom: .6rem;
}

/* On dark bands the heading colour still needs to invert. */
.has-ink-background-color .wp-block-column > h3,
.has-ink-background-color .wp-block-group > h3,
.has-teal-deep-background-color .wp-block-column > h3,
.has-teal-deep-background-color .wp-block-group > h3 {
	color: #fff;
}

/* --------------------------------------------------------------------------
   41. Empty paragraphs and stacked margins
   Paragraph blocks left behind with no text render as a full blank line.
   They are invisible in the editor unless List View is open, so they tend
   to survive. Collapse them, and close the double margin between an open
   accordion summary and the first line it reveals.
   Deleting the empty blocks in the editor is still the real fix; this only
   stops them showing while that happens.
   -------------------------------------------------------------------------- */

.wp-block-post-content p:empty,
.entry-content p:empty,
.wp-block-post-content p:has(> br:only-child),
.entry-content p:has(> br:only-child) {
	display: none !important;
}

.wp-block-details[open] summary {
	margin-bottom: .25rem !important;
}

.wp-block-details summary + * {
	margin-top: .45rem !important;
}

.wp-block-details > *:last-child {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   42. Headings follow the body copy
   Section 3 forces paragraphs and list items left so body text is never
   justified. Headings and details summaries were left out, so any centred
   alignment sitting on an ancestor kept pulling them to the middle while
   the text beneath them stayed left. Same rule, same result, sitewide.
   A heading that is deliberately centred carries its own class and is
   excluded here, so the CTA band, the story pullquote and the job board
   headings keep their centring.
   -------------------------------------------------------------------------- */

:is(h1, h2, h3, h4, h5, h6, summary):not(.has-text-align-center):not(.has-text-align-right) {
	text-align: left;
}

/* The contact card stacks a photo beside a name, role and details. All of
   it shares one left edge. */
.ktb-contact-card :is(h2, h3, h4, p) {
	text-align: left !important;
}

/* --------------------------------------------------------------------------
   43. Body copy fills its column
   Two separate caps were holding text back: 68ch in section 3 and 72ch in
   section 15, the second more specific than the first. Both are lifted here
   so the 1200px content column is the only limit. Text now runs the full
   width of whatever holds it: full width in a single-column band, half in a
   two-column one.
   Form copy is re-capped below. Long lines inside a form are a different
   problem from long lines in a page section, and the form fields alongside
   them are fixed width.
   -------------------------------------------------------------------------- */

.wp-block-post-content :is(p, li, .wp-block-list):not(.has-text-align-center):not(.is-style-ktb-flag):not(.ktb-pullquote),
.entry-content :is(p, li, .wp-block-list):not(.has-text-align-center):not(.is-style-ktb-flag):not(.ktb-pullquote),
.wp-block-group > p:not(.has-text-align-center):not(.is-style-ktb-flag),
.wp-block-group > .wp-block-list,
.wp-block-column > p,
.wp-block-details p {
	max-width: none !important;
}

.forminator-custom-form .forminator-html p,
.forminator-ui.forminator-custom-form .forminator-html p {
	max-width: 62ch !important;
}

/* --------------------------------------------------------------------------
   44. Participant story
   The photo is a plain Image block so it can be swapped without touching
   the layout, and it rounds to match the other cards on the site. The
   read-more toggle sits below both columns at the full content width.
   It is a details block, so it is keyboard operable and announced as
   expandable with no script involved.
   -------------------------------------------------------------------------- */

.ktb-story-photo {
	min-height: 380px;
	background: rgba(134, 195, 202, .22);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Keeps the empty frame clickable in the editor before a photo is added. */
.ktb-story-photo:empty,
.ktb-story-photo > .block-editor-inner-blocks {
	min-height: 380px;
	width: 100%;
}

.ktb-story-photo figure {
	margin: 0 !important;
	width: 100%;
	height: 100%;
}

.ktb-story-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.ktb-story-more {
	margin-top: 2.2rem !important;
	margin-bottom: 1.4rem !important;
	background: #fff;
	border-left: 3px solid var(--wp--preset--color--teal-light) !important;
}

.ktb-story-more[open] {
	border-left-color: var(--wp--preset--color--gold) !important;
}

.ktb-story-more summary {
	color: var(--wp--preset--color--teal-deep) !important;
	font-size: 1.08rem;
}

.ktb-story-more h3 {
	margin-top: 1.6rem !important;
	font-size: 1.2rem !important;
}

.ktb-story-more > :first-of-type {
	margin-top: .6rem !important;
}

/* --------------------------------------------------------------------------
   45. Band rhythm and stat cards
   Three related fixes:
   a) Bands sat apart because WordPress gives sibling blocks a top margin
      from blockGap. Every band already carries its own generous padding,
      so the gap was pure page background showing through between them.
   b) A band's first heading added its own top margin on top of the band's
      padding, while the last element added none at the bottom. That made
      the top look deeper than the bottom even though the padding matched.
   c) The stat numbers were small relative to the cards holding them, which
      left a pool of empty navy under each label.
   -------------------------------------------------------------------------- */

/* a) Bands meet edge to edge. */
.wp-block-post-content > .alignfull,
.entry-content > .alignfull,
main#ktb-main > .alignfull,
main#ktb-main > .wp-block-group > .alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* b) Padding is the only vertical spacing at a band's edges. */
.alignfull > :first-child,
.alignfull > .wp-block-columns:first-child > .wp-block-column > :first-child {
	margin-top: 0 !important;
}

.alignfull > :last-child,
.alignfull > .wp-block-columns:last-child > .wp-block-column > :last-child {
	margin-bottom: 0 !important;
}

/* c) Numbers scale with the card and the content sits centred in it. */
.ktb-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.8rem 1.3rem;
}

.ktb-stat .ktb-stat-n {
	font-size: clamp(3.4rem, 5.5vw, 5rem) !important;
	letter-spacing: .01em;
}

.ktb-stat .ktb-stat-l {
	font-size: .95rem;
	margin-top: .55rem;
	line-height: 1.35;
}

@media (max-width: 781px) {
	.ktb-stat .ktb-stat-n {
		font-size: clamp(2.8rem, 12vw, 4rem) !important;
	}
}

/* --------------------------------------------------------------------------
   46. Focus industries centre caption
   The caption in the middle of the ring is removed from the pattern. This
   also hides it on any page where the graphic was inserted before that
   change, since the SVG lives in page content and a theme update does not
   rewrite it. The graphic still announces itself through its title and
   desc elements, so nothing is lost for screen reader users.
   -------------------------------------------------------------------------- */

.ktb-industries-svg .ktb-ind-caption {
	display: none;
}

/* --------------------------------------------------------------------------
   47. No dead space below the last band
   Mirror of section 37. The inner-page template wraps post content in a
   padded group, so a page whose content ends with a full-width band gets a
   strip of background colour between that band and the footer. Collapse it
   whenever the last thing in the content supplies its own bottom spacing.
   -------------------------------------------------------------------------- */

main#ktb-main > .wp-block-group:has(> .wp-block-post-content > .alignfull:last-child),
main#ktb-main > .wp-block-group:has(> .entry-content > .alignfull:last-child) {
	padding-bottom: 0 !important;
}

.wp-block-post-content > .alignfull:last-child,
.entry-content > .alignfull:last-child,
main#ktb-main > .alignfull:last-child {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   48. Story photo frame
   The frame used to take its height from the photo, so a tall portrait shot
   stretched the section to several times the height of the text beside it.
   It now holds a fixed 4:3 shape and the image crops to fill, which means
   the section keeps the same proportions whatever gets dropped in.
   -------------------------------------------------------------------------- */

.wp-block-column:has(> .ktb-story-photo) {
	display: block;
}

.ktb-story-photo {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0 !important;
	overflow: hidden;
	border-radius: 12px;
	display: block;
}

.ktb-story-photo figure,
.ktb-story-photo .wp-block-image {
	height: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	display: block;
}

.ktb-story-photo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 12px;
	display: block;
}

@media (max-width: 781px) {
	.ktb-story-photo {
		aspect-ratio: 3 / 2;
	}
}