/*
 * Source Sans 3 is bundled locally so the navigation does not contact an
 * external font service. The variable files cover all weights used by Helix.
 */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--mtc-red: #9b0810;
	--mtc-red-dark: #77060c;
	--mtc-red-soft: #b3121b;
	--mtc-ink: #20252a;
	--mtc-muted: #5e6872;
	--mtc-line: #d7dee4;
	--mtc-paper: #fff;
	--mtc-panel: #f2f5f7;
	--mtc-page: #e9eef2;
	--mtc-blog-surface: #f6f7f8;
	--mtc-blog-backdrop: #e3e7ea;
	--mtc-radius: .4rem;
	--mtc-header-radius: .72rem;
	--mtc-shadow: 0 8px 26px rgba(32, 45, 55, .08);
	--mtc-header-shadow: 0 7px 22px rgba(32, 45, 55, .1);
}

* {
	box-sizing: border-box;
}

html {
	height: auto;
	min-height: 100%;
	overflow-x: clip;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body.site {
	height: auto;
	min-height: 100%;
	max-height: none;
	margin: 0;
	/*
	 * "hidden visible" computes to "hidden auto" and turns body into a
	 * scroll container. "clip visible" keeps horizontal overflow contained
	 * without creating a second vertical scrollbar.
	 */
	overflow: clip visible;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(189, 204, 217, .3) 72rem),
		var(--mtc-page);
	color: var(--mtc-ink);
	font-family: Arial, "Arial Unicode MS", Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.58;
}

.body-wrapper,
.body-innerwrapper,
#sp-main {
	height: auto !important;
	min-height: 100%;
	max-height: none !important;
	/*
	 * Helix sets overflow-x:hidden on body-innerwrapper. Overriding only the
	 * y-axis with visible would still compute to auto. Set both axes together.
	 */
	overflow: clip visible !important;
}

/*
 * Keep the document content below the fixed MTC header without inserting a
 * separate, visible spacer element at the top of the page. The height is
 * updated by the header ResizeObserver in mtc-legacy-content.js.
 */
.body-wrapper {
	padding-top: var(--mtc-site-header-height, 0);
}

.mtc-site-header {
	position: fixed !important;
	z-index: 1020;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	background: rgba(239, 244, 247, .98);
	box-shadow: 0 3px 10px rgba(38, 48, 57, .05);
}

.mtc-site-header-spacer {
	display: none !important;
}

/*
 * The complete MTC masthead is fixed directly below body, outside Helix's
 * transformable content wrapper. Helix's separate fixed-menu behaviour would
 * otherwise detach only the navigation from this wrapper.
 */
.mtc-site-header #sp-header.header-sticky {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	max-width: none !important;
	animation: none;
}

.sticky-header-placeholder {
	display: none !important;
}

a {
	color: var(--mtc-red);
}

a:hover,
a:focus {
	color: var(--mtc-red-dark);
}

.container,
.sppb-row-container {
	width: min(calc(100% - 3rem), 1180px);
	max-width: 1180px !important;
	margin-inline: auto;
	padding-inline: 0;
}

.mtc-masthead {
	/* Keep the masthead compact at every width.  The old 1rem top inset in
	 * combination with the fixed 8rem brand row reserved visible empty space. */
	padding-top: .4rem;
	border-top: 1px solid #c3d0da;
	background: rgba(239, 244, 247, .97);
}

.mtc-brand-row {
	position: relative;
	z-index: 2;
	display: flex;
	/* The logo itself is 110px high, so an additional 128px minimum row is not
	 * needed.  Let the content determine the height and keep both columns on
	 * the same baseline directly above the red claim bar. */
	min-height: 0;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding: 0 .75rem;
}

.mtc-brand {
	position: relative;
	z-index: 3;
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-end;
	margin-bottom: -1.15rem;
}

.mtc-brand img {
	display: block;
	width: 240px;
	height: 110px;
	object-fit: contain;
	object-position: left center;
}

.mtc-services {
	align-self: center;
	margin: 0;
	color: #111;
	font-size: clamp(.95rem, 1.5vw, 1.18rem);
	font-weight: 700;
	line-height: 1.35;
	text-align: right;
}

.mtc-services span {
	display: block;
}

.mtc-claim {
	position: relative;
	z-index: 1;
	display: flex;
	min-height: 3.8rem;
	align-items: center;
	padding: .55rem 1rem;
	border-radius: var(--mtc-header-radius);
	background: var(--mtc-red);
	box-shadow: var(--mtc-header-shadow);
	color: #fff;
	font-size: clamp(1.45rem, 3vw, 2rem);
	font-weight: 750;
	letter-spacing: -.025em;
	line-height: 1.15;
}

.mtc-claim-mobile {
	display: none;
}

#sp-header.mtc-navigation {
	position: relative;
	z-index: 100;
	height: auto !important;
	min-height: 3rem;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
}

#sp-header.mtc-navigation.header-sticky {
	background: transparent;
}

.mtc-navigation .container-inner {
	margin: .4rem 0 .45rem;
	padding: 0 .35rem;
	border: 1px solid rgba(210, 218, 224, .9);
	border-radius: var(--mtc-header-radius);
	background: rgba(250, 251, 252, .98);
	box-shadow: 0 4px 14px rgba(32, 45, 55, .065);
}

.mtc-navigation .container-inner,
.mtc-navigation #sp-menu,
.mtc-navigation #sp-menu > .sp-column {
	min-height: 3rem;
}

.mtc-navigation #sp-menu > .sp-column {
	width: 100%;
}

.mtc-navigation .sp-megamenu-wrapper {
	flex: 1 1 auto;
}

.mtc-navigation .sp-megamenu-parent {
	display: flex !important;
	flex-flow: row wrap;
	align-items: center;
	gap: 0 .25rem;
	margin: 0;
	padding: .22rem 0;
}

.mtc-navigation .sp-megamenu-parent > li {
	position: relative;
	margin: 0;
}

.mtc-navigation .sp-megamenu-parent > li > a,
.mtc-navigation .sp-megamenu-parent > li > span {
	position: relative;
	display: flex;
	min-height: 2.5rem;
	align-items: center;
	padding: .55rem .62rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #1e2429;
	font-size: .925rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.1;
	text-decoration: none;
	transition: color 180ms ease;
}

.mtc-navigation .sp-megamenu-parent > li::before {
	position: absolute;
	z-index: 1;
	right: .62rem;
	bottom: 0;
	left: .62rem;
	height: 2px;
	border-radius: 999px;
	background: var(--mtc-red);
	content: "";
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.mtc-navigation .sp-megamenu-parent > li:hover > a,
.mtc-navigation .sp-megamenu-parent > li:hover > span,
.mtc-navigation .sp-megamenu-parent > li:focus-within > a,
.mtc-navigation .sp-megamenu-parent > li:focus-within > span {
	background: transparent;
	color: var(--mtc-red);
}

.mtc-navigation .sp-megamenu-parent > li:hover::before,
.mtc-navigation .sp-megamenu-parent > li:focus-within::before,
.mtc-navigation .sp-megamenu-parent > li.active::before,
.mtc-navigation .sp-megamenu-parent > li.current-item::before {
	transform: scaleX(1);
}

.mtc-navigation .sp-megamenu-parent > li.active > a,
.mtc-navigation .sp-megamenu-parent > li.active > span,
.mtc-navigation .sp-megamenu-parent > li.current-item > a {
	background: transparent;
	color: var(--mtc-red);
}

.mtc-navigation .sp-megamenu-parent > li.sp-has-child > a::after,
.mtc-navigation .sp-megamenu-parent > li.sp-has-child > span::after {
	display: inline-block;
	margin-left: .45rem;
	font-size: .72em;
	transition: transform 180ms ease;
}

.mtc-navigation .sp-megamenu-parent > li.sp-has-child:hover > a::after,
.mtc-navigation .sp-megamenu-parent > li.sp-has-child:hover > span::after,
.mtc-navigation .sp-megamenu-parent > li.sp-has-child:focus-within > a::after,
.mtc-navigation .sp-megamenu-parent > li.sp-has-child:focus-within > span::after {
	transform: rotate(180deg);
}

.mtc-navigation .sp-megamenu-parent li.sp-has-child:focus-within > .sp-dropdown {
	display: block;
}

.mtc-navigation .sp-dropdown.sp-dropdown-main {
	padding-top: .42rem;
}

.mtc-navigation .sp-dropdown .sp-dropdown-inner {
	padding: .55rem;
	border: 1px solid rgba(207, 216, 223, .9);
	border-radius: .72rem;
	background: rgba(255, 255, 255, .99);
	box-shadow: 0 16px 40px rgba(32, 45, 55, .16);
}

.mtc-navigation .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.mtc-navigation .sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
	display: block;
	width: 100%;
	padding: .5rem .62rem;
	border-radius: .48rem;
	color: var(--mtc-ink);
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .005em;
	line-height: 1.25;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

/*
 * The desktop navigation keeps the familiar separated MTC items, but softens
 * their geometry to match the rounded cards, pills and calls to action used in
 * the modernised articles.
 */
@media (min-width: 1024px) {
	.mtc-navigation .sp-megamenu-parent {
		gap: .42rem;
		padding: .42rem 0;
	}

	.mtc-navigation .sp-megamenu-parent > li > a,
	.mtc-navigation .sp-megamenu-parent > li > span {
		min-height: 2.35rem;
		padding: .5rem .88rem;
		border: 1px solid #d4dade;
		border-radius: .5rem;
		background: linear-gradient(180deg, #fff 0%, #f2f4f5 100%);
		box-shadow: 0 2px 5px rgba(32, 45, 55, .035);
		color: #20252a;
		font-size: .875rem;
		font-weight: 500;
		letter-spacing: .002em;
		line-height: 1;
		transition:
			background-color 160ms ease,
			border-color 160ms ease,
			box-shadow 160ms ease,
			color 160ms ease,
			transform 160ms ease;
	}

	.mtc-navigation .sp-megamenu-parent > li::before {
		display: none;
	}

	.mtc-navigation .sp-megamenu-parent > li:hover > a,
	.mtc-navigation .sp-megamenu-parent > li:hover > span,
	.mtc-navigation .sp-megamenu-parent > li:focus-within > a,
	.mtc-navigation .sp-megamenu-parent > li:focus-within > span {
		border-color: #c3cbd1;
		background: #fff;
		box-shadow: 0 5px 13px rgba(32, 45, 55, .09);
		color: var(--mtc-red);
		transform: translateY(-1px);
	}

	.mtc-navigation .sp-megamenu-parent > li.active > a,
	.mtc-navigation .sp-megamenu-parent > li.active > span,
	.mtc-navigation .sp-megamenu-parent > li.current-item > a,
	.mtc-navigation .sp-megamenu-parent > li.current-item > span {
		border-color: #8b9093;
		background: linear-gradient(180deg, #a9adaf 0%, #8d9194 100%);
		box-shadow: 0 4px 10px rgba(32, 45, 55, .12);
		color: #fff;
	}

	.mtc-navigation .sp-megamenu-parent > li.active:hover > a,
	.mtc-navigation .sp-megamenu-parent > li.active:hover > span,
	.mtc-navigation .sp-megamenu-parent > li.current-item:hover > a,
	.mtc-navigation .sp-megamenu-parent > li.current-item:hover > span {
		border-color: #7f8588;
		background: linear-gradient(180deg, #999ea1 0%, #7f8487 100%);
		color: #fff;
	}

	.mtc-navigation .sp-megamenu-parent > li.active.sp-has-child > a::after,
	.mtc-navigation .sp-megamenu-parent > li.active.sp-has-child > span::after,
	.mtc-navigation .sp-megamenu-parent > li.current-item.sp-has-child > a::after,
	.mtc-navigation .sp-megamenu-parent > li.current-item.sp-has-child > span::after {
		color: #fff;
	}

	.mtc-navigation .sp-megamenu-parent > li.sp-has-child > a::after,
	.mtc-navigation .sp-megamenu-parent > li.sp-has-child > span::after {
		margin-left: .5rem;
		font-size: .7em;
	}
}

.mtc-navigation .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.mtc-navigation .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.mtc-navigation .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus-visible {
	background: rgba(155, 8, 16, .07);
	color: var(--mtc-red);
	transform: translateX(2px);
}

/*
 * "Stützpunkte" is the second main item in the fixed MTC navigation. Its long
 * list is easier to scan as a compact two-column desktop dropdown.
 */
.mtc-navigation .sp-megamenu-parent > li:nth-child(2) > .sp-dropdown {
	width: min(34rem, calc(100vw - 2rem)) !important;
}

.mtc-navigation .sp-megamenu-parent > li:nth-child(2) > .sp-dropdown .sp-dropdown-inner {
	padding: .75rem;
}

.mtc-navigation .sp-megamenu-parent > li:nth-child(2) > .sp-dropdown .sp-dropdown-inner::before {
	display: block;
	margin: 0 .25rem .45rem;
	padding: 0 .35rem .55rem;
	border-bottom: 1px solid #e4e9ed;
	color: var(--mtc-muted);
	content: "Unsere Stützpunkte";
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mtc-navigation .sp-megamenu-parent > li:nth-child(2) > .sp-dropdown > .sp-dropdown-inner > .sp-dropdown-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .08rem .65rem;
}

.mtc-offcanvas-toggler {
	display: none !important;
	min-height: 2.55rem;
	align-items: center;
	gap: .55rem;
	margin-left: auto;
	padding: .45rem .7rem;
	border: 1px solid rgba(155, 8, 16, .32);
	border-radius: .3rem;
	background: #fff;
	color: var(--mtc-red) !important;
	box-shadow: 0 2px 8px rgba(32, 37, 42, .08);
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
}

.mtc-offcanvas-toggler .burger-icon {
	width: 1.3rem;
}

.mtc-offcanvas-toggler .burger-icon > span {
	height: 2px;
	background: currentColor;
}

#sp-main {
	padding-block: 1.25rem 2rem;
	min-height: calc(100vh - var(--mtc-site-header-height, 0px));
	display: flex;
	flex-direction: column;
}

#sp-main-body {
	padding: 0;
}

#sp-main-body > .container > .container-inner > .row {
	align-items: flex-start;
	--bs-gutter-x: 1.5rem;
}

#sp-component > .sp-column {
	min-width: 0;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	border: 1px solid var(--mtc-line);
	border-radius: var(--mtc-radius);
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--mtc-shadow);
}

#sp-sidebar-left > .sp-column,
#sp-left > .sp-column,
#sp-position-7 > .sp-column {
	min-width: 0;
}

#sp-sidebar-left .sp-module,
#sp-left .sp-module,
#sp-position-7 .sp-module {
	width: 100%;
	margin-bottom: .85rem;
	overflow: hidden;
	border: 1px solid var(--mtc-line);
	border-radius: var(--mtc-radius);
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--mtc-shadow);
}

#sp-sidebar-left .sp-module-title,
#sp-left .sp-module-title,
#sp-position-7 .sp-module-title {
	margin: 0;
	padding: .85rem 1rem;
	border: 0;
	background: var(--mtc-red);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

#sp-sidebar-left .sp-module-content,
#sp-left .sp-module-content,
#sp-position-7 .sp-module-content {
	padding: .75rem 1rem .9rem;
}

#sp-sidebar-left ul.menu,
#sp-left ul.menu,
#sp-position-7 ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sp-sidebar-left ul.menu > li,
#sp-left ul.menu > li,
#sp-position-7 ul.menu > li {
	position: relative;
	margin: 0;
	padding: 0 0 0 .9rem;
	border: 0;
	line-height: 1.2;
}

#sp-sidebar-left ul.menu > li::before,
#sp-left ul.menu > li::before,
#sp-position-7 ul.menu > li::before {
	position: absolute;
	top: .52rem;
	left: 0;
	width: .34rem;
	height: .34rem;
	border-radius: 50%;
	background: var(--mtc-red-soft);
	content: "";
}

#sp-sidebar-left ul.menu a,
#sp-left ul.menu a,
#sp-position-7 ul.menu a {
	display: block;
	margin: 0;
	padding: .15rem 0;
	color: var(--mtc-ink);
	font-size: .94rem;
	line-height: 1.22;
	text-decoration: none;
}

#sp-sidebar-left ul.menu a:hover,
#sp-left ul.menu a:hover,
#sp-position-7 ul.menu a:hover {
	color: var(--mtc-red);
	text-decoration: underline;
	text-underline-offset: .17em;
}

#sp-component h1,
#sp-component h2,
#sp-component h3,
#sp-component h4,
#sp-component h5,
#sp-component h6 {
	margin-top: 1.45em;
	margin-bottom: .55em;
	color: var(--mtc-red);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 750;
	line-height: 1.2;
}

#sp-component h1:first-child,
#sp-component h2:first-child,
#sp-component .page-header + h1,
#sp-component .page-header + h2 {
	margin-top: 0;
}

#sp-component h1 {
	font-size: clamp(1.75rem, 3vw, 2.4rem);
}

#sp-component h2 {
	font-size: clamp(1.45rem, 2.4vw, 2rem);
}

#sp-component h3 {
	font-size: clamp(1.18rem, 1.8vw, 1.5rem);
}

#sp-component h4,
#sp-component h5,
#sp-component h6 {
	color: var(--mtc-ink);
}

#sp-component img,
#sp-component iframe,
#sp-component video {
	max-width: 100%;
}

#sp-component img {
	height: auto;
}

/* Keep long editorial copy readable without restricting cards or embeds. */
#sp-component .com-content-article__body > :is(p, ul, ol, blockquote),
#sp-component .article-details > :is(p, ul, ol, blockquote),
#sp-component .item-page > :is(p, ul, ol, blockquote) {
	max-width: 850px;
}

#sp-component iframe {
	width: 100%;
	min-height: min(65vw, 32rem);
	border: 0;
}

/*
 * The MTC booking system reports the required content height via postMessage.
 * Do not apply the generic 512px iframe minimum to these compact group lists.
 * The inline height written by mtc-legacy-content.js replaces this fallback as
 * soon as the embedded list has finished rendering.
 */
#sp-component iframe[src*="buchen.mantrailing-company.de/gruppen"] {
	display: block;
	width: 100%;
	max-width: 46rem;
	height: 11.25rem;
	min-height: 0;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	border: 0;
	background: transparent;
	transition: height 160ms ease;
}

/*
 * Seminar lists use the same postMessage resize protocol as group lists.
 * Their old article markup may still contain height="4000"; JavaScript
 * replaces it first with a compact fallback and then with the exact height
 * reported by the booking application.
 */
#sp-component iframe[src*="buchen.mantrailing-company.de/veranstaltungen"] {
	display: block;
	width: 100%;
	height: 62.5rem;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	transition: height 160ms ease;
}

/*
 * Modern presentation for the legacy support-location tables. JavaScript adds
 * these classes only to recognised location blocks, so ordinary article tables
 * remain untouched.
 */
#sp-component .mtc-location-table {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0;
	overflow: hidden;
	border: 1px solid #d5dde3 !important;
	border-radius: .55rem;
	background: #f8fafb;
	box-shadow: 0 4px 14px rgba(32, 45, 55, .07);
}

#sp-component .mtc-location-table > tbody {
	display: block;
	width: 100%;
}

#sp-component .mtc-location-primary-row {
	display: grid;
	width: 100%;
	height: auto !important;
	grid-template-columns:
		minmax(9.5rem, .82fr)
		minmax(18rem, 2.2fr)
		minmax(9rem, 12rem);
	align-items: start;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1rem, 2vw, 1.4rem);
}

#sp-component .mtc-location-primary-row > td {
	display: block;
	width: auto !important;
	height: auto !important;
	padding: 0;
}

#sp-component .mtc-location-empty-cell,
#sp-component .mtc-location-spacer-row,
#sp-component .mtc-location-legacy-groups-row {
	display: none !important;
}

#sp-component .mtc-location-title-cell {
	padding: .8rem .9rem !important;
	border-left: .25rem solid var(--mtc-red) !important;
	border-radius: .25rem;
	background: rgba(155, 8, 16, .055);
	color: var(--mtc-red);
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
}

#sp-component .mtc-location-title-cell :is(p, span, strong) {
	margin: 0;
	color: inherit !important;
	font-size: inherit !important;
	line-height: inherit;
}

#sp-component .mtc-location-details-cell {
	color: #30373d;
	font-size: .94rem;
	line-height: 1.48;
}

#sp-component .mtc-location-details-cell p {
	margin: 0 0 .85rem;
}

#sp-component .mtc-location-details-cell p:last-child {
	margin-bottom: 0;
}

#sp-component .mtc-location-details-cell strong {
	color: var(--mtc-ink);
	font-weight: 700;
}

#sp-component .mtc-location-logo-cell {
	justify-self: end;
	text-align: center;
}

#sp-component .mtc-location-logo-cell img {
	display: block;
	float: none !important;
	width: min(100%, 11.5rem) !important;
	height: auto !important;
	margin: 0 !important;
}

#sp-component .mtc-location-meta-row {
	display: grid;
	width: 100%;
	height: auto !important;
	grid-template-columns: minmax(9.5rem, .82fr) minmax(18rem, 2.2fr) minmax(9rem, 12rem);
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: .8rem clamp(1rem, 2vw, 1.4rem);
	border-top: 1px solid #e1e6ea;
}

#sp-component .mtc-location-meta-row > td {
	display: block;
	width: auto !important;
	height: auto !important;
	padding: 0;
}

#sp-component .mtc-location-groups-heading {
	margin: .8rem 0 .35rem;
	padding: 0 .15rem;
	color: var(--mtc-ink);
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .01em;
}

#sp-component .mtc-location-groups {
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	border: 1px solid #d5dde3;
	border-radius: .45rem;
	background: #fff;
	box-shadow: 0 3px 10px rgba(32, 45, 55, .05);
}

#sp-component .mtc-location-groups > iframe {
	margin: 0;
}

.article-list .article,
.blog .article,
.blog-items .blog-item {
	margin-bottom: 1.15rem;
	padding: 0 0 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--mtc-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.article-list .article:last-child,
.blog .article:last-child,
.blog-items .blog-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * Category blogs frequently wrap every article in its own Joomla row. The
 * generic :last-child rule above therefore removed the spacing from every
 * item. Give block/category views a calm grey backdrop and restore a small,
 * consistent gap between their individual article cards.
 */
body.view-category #sp-component > .sp-column {
	background: var(--mtc-blog-backdrop);
}

body.view-category .article-list .article,
body.view-category .blog .article,
body.view-category .blog-items .blog-item {
	margin-bottom: .65rem;
	padding: .55rem;
	border: 1px solid #cfd6dc;
	border-radius: .2rem;
	background: var(--mtc-blog-surface);
	box-shadow: 0 1px 3px rgba(32, 45, 55, .05);
}

body.view-category .article-list .article:last-child,
body.view-category .blog .article:last-child,
body.view-category .blog-items .blog-item:last-child {
	margin-bottom: .65rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid #cfd6dc;
}

body.view-category .article-list .article-header,
body.view-category .blog .article-header,
body.view-category .blog-items .article-header {
	padding: .15rem .25rem .35rem;
}

/*
 * The homepage is a list of independent articles, not one large card holding
 * several smaller cards. Remove the component-level panel and give each
 * article the same usable width and inner spacing as a single article view.
 */
body.view-featured #sp-component > .sp-column {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

body.view-featured #sp-component .container-fluid.blog-featured {
	padding-right: 0;
	padding-left: 0;
}

body.view-featured .article-list .article,
body.view-featured .blog .article,
body.view-featured .blog-items .blog-item {
	margin-bottom: 1rem;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	border: 1px solid rgba(207, 214, 220, .82);
	border-radius: .45rem;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 5px 16px rgba(32, 45, 55, .085);
}

body.view-featured .article-list .article:last-child,
body.view-featured .blog .article:last-child,
body.view-featured .blog-items .blog-item:last-child {
	margin-bottom: 1rem;
	padding: clamp(1rem, 2.4vw, 1.75rem);
	border: 1px solid rgba(207, 214, 220, .82);
}

.mtc-article-edit {
	display: flex;
	clear: both;
	width: 100%;
	justify-content: flex-end;
	margin: 0 0 .45rem;
}

.mtc-article-edit .icons,
.mtc-article-edit .float-end {
	float: none !important;
}

.mtc-article-edit a {
	display: inline-flex;
	min-height: 0;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--mtc-red);
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	transform: none !important;
}

.mtc-article-edit a:hover,
.mtc-article-edit a:focus-visible {
	background: transparent !important;
	color: var(--mtc-red-dark);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.article-list .article .article-header h1,
.article-list .article .article-header h2,
.article-details .article-header h1,
.article-details .article-header h2 {
	font-size: clamp(1.45rem, 2.4vw, 2rem);
}

/* Helix adds this label to Joomla featured articles. The homepage relies on
 * featured articles, but the editorial status itself should not be visible. */
#sp-component .featured-article-badge,
.tags,
.article-info .category-name {
	display: none;
}

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: .65rem .75rem;
	border: 0 !important;
	text-align: left;
	vertical-align: top;
}

th {
	background: #edf1f4;
}

/*
 * Article tables use a dark header row with white labels.  The generic Helix
 * th background above previously replaced that dark background while leaving
 * the white text untouched, resulting in almost invisible column headings.
 * Keep the intended high-contrast treatment consistent with the editor view.
 */
#sp-component table thead th {
	background-color: #3d454d !important;
	color: #fff !important;
}

#sp-component table thead th a {
	color: inherit;
}

#sp-component table[style*="height: 100%"],
#sp-component table[style*="height:100%"] {
	height: auto !important;
}

/*
 * Global cleanup for migrated Joomla-3 content. Old editor tables frequently
 * contain fixed heights on rows and cells, producing very large blank areas.
 */
#sp-component .com-content-article__body :is(table, thead, tbody, tfoot, tr, th, td),
#sp-component .item-page :is(table, thead, tbody, tfoot, tr, th, td),
#sp-component .blog-item :is(table, thead, tbody, tfoot, tr, th, td) {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

#sp-component .com-content-article__body table,
#sp-component .item-page table,
#sp-component .blog-item table {
	border-spacing: 0 !important;
}

#sp-component td > :first-child,
#sp-component th > :first-child {
	margin-top: 0;
}

#sp-component td > :last-child,
#sp-component th > :last-child {
	margin-bottom: 0;
}

#sp-component p:empty {
	display: none;
}

.btn-primary,
.btn-secondary,
button[type="submit"],
input[type="submit"] {
	border-color: var(--mtc-red);
	background: var(--mtc-red);
	color: #fff;
}

.btn-primary:hover,
.btn-secondary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	border-color: var(--mtc-red-dark);
	background: var(--mtc-red-dark);
}

/*
 * Joomla renders the blog "Read more" action as a plain link. Give both the
 * current link markup and older Bootstrap-button variants the same MTC style.
 */
.readmore {
	margin: 1rem 0 0;
}

.readmore > a,
.readmore > .btn {
	display: inline-flex;
	min-height: 2.65rem;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .58rem 1rem;
	border: 1px solid var(--mtc-red);
	border-radius: .35rem;
	background: var(--mtc-red);
	box-shadow: 0 3px 10px rgba(119, 6, 12, .16);
	color: #fff !important;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition:
		transform 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.readmore > a::after,
.readmore > .btn::after {
	content: "\2192";
	font-size: 1.08em;
	line-height: 1;
	transition: transform 160ms ease;
}

.readmore > a:hover,
.readmore > a:focus-visible,
.readmore > .btn:hover,
.readmore > .btn:focus-visible {
	border-color: var(--mtc-red-dark);
	background: var(--mtc-red-dark);
	box-shadow: 0 5px 14px rgba(119, 6, 12, .24);
	color: #fff !important;
	transform: translateY(-1px);
}

.readmore > a:hover::after,
.readmore > a:focus-visible::after,
.readmore > .btn:hover::after,
.readmore > .btn:focus-visible::after {
	transform: translateX(.18rem);
}

#sp-footer,
#sp-bottom {
	width: 100%;
	background: #252b30;
	color: #e7ebee;
}

#sp-footer {
	margin-top: auto;
}

#sp-footer > .container,
#sp-bottom > .container {
	width: min(calc(100% - 3rem), 1180px);
	max-width: 1180px !important;
	padding-right: 0;
	padding-left: 0;
}

/*
 * Helix nests a Bootstrap row inside the already limited footer container.
 * Its negative gutter margins made the copyright and footer menu protrude
 * beyond the 1180px content line. Keep every inner footer layer inside the
 * same measured width while the dark section background remains full-bleed.
 */
#sp-footer .container-inner,
#sp-bottom .container-inner {
	width: 100%;
	max-width: 100%;
}

/*
 * The page component has its own inner padding, while the footer columns used
 * to start directly at the outer container edge.  Keep copyright and legal
 * navigation on the same visual content line as the articles above.
 */
#sp-footer .container-inner {
	padding-right: clamp(1rem, 2.4vw, 1.75rem);
	padding-left: clamp(1rem, 2.4vw, 1.75rem);
}

#sp-footer .container-inner > .row,
#sp-bottom .container-inner > .row {
	width: 100%;
	max-width: 100%;
	margin-right: 0;
	margin-left: 0;
	--bs-gutter-x: 0;
}

#sp-footer .container-inner > .row > [class*="col-"],
#sp-bottom .container-inner > .row > [class*="col-"] {
	min-width: 0;
	padding-right: 0;
	padding-left: 0;
}

#sp-bottom {
	padding-block: 2rem 1.6rem;
	border-top: .35rem solid var(--mtc-red);
}

#sp-footer {
	padding-block: 1rem;
	border-top: .35rem solid var(--mtc-red);
	font-size: .88rem;
}

#sp-bottom + #sp-footer,
#sp-bottom ~ #sp-footer {
	border-top: 1px solid rgba(255, 255, 255, .16);
}

#sp-footer a,
#sp-bottom a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, .42);
	text-underline-offset: .18em;
}

#sp-footer a:hover,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:focus {
	color: #fff;
	text-decoration-color: #fff;
}

#sp-bottom .sp-module,
#sp-footer .sp-module {
	margin: 0;
}

#sp-bottom .sp-module-title,
#sp-footer .sp-module-title {
	margin: 0 0 .7rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.25;
}

#sp-bottom .sp-module-content,
#sp-footer .sp-module-content {
	color: #e7ebee;
	font-size: .92rem;
	line-height: 1.5;
}

#sp-bottom p,
#sp-footer p {
	margin: 0 0 .55rem;
}

#sp-bottom p:last-child,
#sp-footer p:last-child {
	margin-bottom: 0;
}

#sp-bottom ul,
#sp-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sp-bottom ul li,
#sp-footer ul li {
	margin: 0;
	padding: .12rem 0;
	border: 0;
}

#sp-bottom ul.menu a,
#sp-footer ul.menu a {
	display: inline-block;
	padding: .08rem 0;
}

#sp-footer .container-inner > .row {
	align-items: center;
}

#sp-footer .sp-copyright {
	display: inline-block;
}

#sp-footer2 {
	text-align: center;
}

#sp-footer2 ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .35rem 1rem;
	width: 100%;
	max-width: 100%;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

#sp-footer2 ul.menu > li {
	margin: 0;
	padding: 0;
}

#sp-footer2 ul.menu > li > a {
	position: relative;
	padding: .2rem 0;
	color: rgba(255, 255, 255, .88);
	font-size: .88rem;
	font-weight: 550;
	line-height: 1.35;
	text-decoration: none;
	transition: color 160ms ease;
}

#sp-footer2 ul.menu > li > a::after {
	position: absolute;
	right: 0;
	bottom: .02rem;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	opacity: 0;
	transform: scaleX(.45);
	transition: opacity 160ms ease, transform 160ms ease;
}

#sp-footer2 ul.menu > li > a:hover,
#sp-footer2 ul.menu > li > a:focus-visible,
#sp-footer2 ul.menu > li.active > a {
	color: #fff;
}

#sp-footer2 ul.menu > li > a:hover::after,
#sp-footer2 ul.menu > li > a:focus-visible::after,
#sp-footer2 ul.menu > li.active > a::after {
	opacity: .9;
	transform: scaleX(1);
}

#sp-footer .social-icons,
#sp-bottom .social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

#sp-footer .social-icons > li,
#sp-bottom .social-icons > li {
	margin: 0;
}

.offcanvas-menu {
	background: #fff;
	font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
}

.offcanvas-menu .offcanvas-inner {
	padding: 1.25rem;
}

.offcanvas-menu .offcanvas-inner ul.menu > li {
	border-bottom: 1px solid var(--mtc-line);
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
	padding: .65rem .2rem;
	color: var(--mtc-ink);
	font-size: .98rem;
	font-weight: 650;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.active > span,
.offcanvas-menu .offcanvas-inner ul.menu a:hover {
	color: var(--mtc-red);
}

.offcanvas-menu .menu-toggler {
	color: var(--mtc-red) !important;
}

body.ltr.offcanvs-position-right.offcanvas-active .body-wrapper {
	transform: translateX(-320px);
}

:focus-visible {
	outline: 3px solid #f3b400;
	outline-offset: 3px;
}

@media (min-width: 992px) {
	#sp-sidebar-left {
		flex: 0 0 25%;
		width: 25%;
	}

	#sp-component {
		flex: 0 0 75%;
		width: 75%;
	}

	#sp-main-body .row:has(#sp-sidebar-left .sp-column:empty) #sp-sidebar-left {
		display: none;
	}

	#sp-main-body .row:has(#sp-sidebar-left .sp-column:empty) #sp-component {
		flex-basis: 100%;
		width: 100%;
	}

	/*
	 * Helix omits an unpublished module column completely. In that case the
	 * component is the row's only element and must not retain its 9/12 width.
	 */
	#sp-main-body .row > #sp-component:only-child,
	#sp-main-body .row > #sp-component:first-child:last-child {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 1023.98px) {
	.mtc-navigation .sp-megamenu-wrapper {
		display: none !important;
	}

	/*
	 * On mobile the navigation no longer occupies its own row. It overlays
	 * the right side of the red claim bar and only the burger remains
	 * interactive.
	 */
	.mtc-site-header #sp-header.mtc-navigation {
		position: absolute !important;
		right: 0;
		bottom: 0;
		left: 0 !important;
		width: 100%;
		min-height: 3.8rem;
		border: 0;
		background: transparent;
		box-shadow: none;
		pointer-events: none;
	}

	.mtc-navigation .container-inner {
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	#sp-header.mtc-navigation .container,
	#sp-header.mtc-navigation .container-inner,
	#sp-header.mtc-navigation .row,
	#sp-header.mtc-navigation #sp-menu,
	#sp-header.mtc-navigation #sp-menu > .sp-column {
		min-height: 3.8rem;
	}

	#sp-header.mtc-navigation .row {
		margin: 0;
	}

	#sp-header.mtc-navigation #sp-menu {
		padding: 0;
	}

	#sp-header.mtc-navigation .mtc-offcanvas-toggler {
		display: inline-flex !important;
		width: 3.5rem;
		min-width: 3.5rem;
		height: 3.8rem;
		min-height: 3.8rem;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		box-shadow: none;
		color: #fff;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto;
	}

	#sp-header.mtc-navigation .mtc-offcanvas-toggler:hover,
	#sp-header.mtc-navigation .mtc-offcanvas-toggler:focus-visible {
		background: rgba(255, 255, 255, .14);
		color: #fff;
	}

	#sp-header.mtc-navigation .mtc-offcanvas-toggler .burger-icon {
		width: 1.55rem;
	}

	#sp-header.mtc-navigation .mtc-offcanvas-toggler .burger-icon > span {
		height: 2px;
		background: #fff;
	}

	.mtc-menu-label {
		display: none;
	}

	.mtc-claim {
		padding-right: 4.25rem;
		border-radius: .58rem;
	}

	.mtc-navigation #sp-menu > .sp-column {
		justify-content: flex-end !important;
	}

}

@media (max-width: 991.98px) {

	#sp-sidebar-left,
	#sp-left,
	#sp-position-7,
	#sp-component {
		width: 100%;
	}

	#sp-sidebar-left,
	#sp-left,
	#sp-position-7 {
		order: 2;
		margin-top: 1rem;
	}

	#sp-component {
		order: 1;
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: .25rem;
		padding-left: .25rem;
	}

	/*
	 * The mobile free space came from four nested Bootstrap/Joomla layers.
	 * Reduce each layer as soon as the desktop menu changes to the burger.
	 */
	#sp-main-body > .container {
		width: min(calc(100% - 1rem), 1180px);
	}

	#sp-main-body > .container > .container-inner > .row {
		--bs-gutter-x: .5rem;
	}

	#sp-component > .sp-column {
		padding: .35rem;
	}

	#sp-component .container-fluid,
	#sp-component .blog-featured,
	#sp-component .blog,
	#sp-component .article-list {
		padding-right: 0;
		padding-left: 0;
	}

	body.view-featured #sp-component .blog-item.article,
	body.view-category #sp-component .blog-item.article,
	body.view-category #sp-component .article-list .article {
		padding: .4rem;
	}

	.article-list,
	.blog-items,
	.items-leading,
	.items-row {
		display: grid !important;
		width: 100%;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.article-list > *,
	.blog-items > *,
	.items-leading > *,
	.items-row > * {
		width: 100% !important;
		max-width: none !important;
		flex: 0 0 100% !important;
		grid-column: 1 / -1;
	}

	#sp-bottom {
		padding-block: 1.6rem 1.2rem;
	}

	#sp-bottom .sp-module {
		margin-bottom: 1.25rem;
	}

	#sp-bottom .row > div:nth-last-child(-n + 2) .sp-module {
		margin-bottom: 0;
	}
}

/*
 * MTC57: shared reading rail for editorial copy on every content page.
 * The selector is deliberately limited to direct text children of an article
 * section; card grids, media, buttons and full-width components retain their
 * own geometry and padding.
 */
@media (min-width: 992px) {
	#sp-component .article-details > div > article > section:has(> p):not([style*="background"]) {
		width: calc(100% - clamp(1.5rem, 3vw, 3rem));
		margin-right: auto !important;
		margin-left: clamp(1rem, 1.5vw, 1.5rem) !important;
	}
}

/* On tablets, align the claim bar with the outside edge of the article card.
 * Desktop already shares the same container; phones use their dedicated
 * edge-to-edge spacing below. */
@media (min-width: 426px) and (max-width: 768px) {
	.mtc-masthead > .container {
		width: calc(100% - .8rem);
		max-width: none !important;
	}
}

@media (max-width: 767.98px) {
	#sp-component .mtc-location-primary-row {
		grid-template-columns: max-content minmax(0, 1fr) minmax(6.5rem, 8rem);
		gap: 1rem;
	}

	#sp-component .mtc-location-title-cell {
		align-self: start;
		justify-self: start;
		width: max-content !important;
		inline-size: max-content !important;
		max-width: min(100%, 18rem);
		max-inline-size: min(100%, 18rem);
	}

	#sp-component .mtc-location-details-cell {
		grid-column: 1 / -1;
	}

	#sp-component .mtc-location-logo-cell {
		grid-column: 3;
		grid-row: 1;
	}

	#sp-component .mtc-location-meta-row {
		grid-template-columns: 1fr;
		gap: .45rem;
	}
}

@media (max-width: 479.98px) {
	#sp-component .mtc-location-primary-row {
		grid-template-columns: max-content minmax(0, 1fr) 5.75rem;
		padding: .85rem;
	}

	#sp-component .mtc-location-title-cell {
		padding: .65rem .7rem !important;
		max-width: min(100%, 15rem);
		max-inline-size: min(100%, 15rem);
		font-size: 1rem;
	}

	#sp-component .mtc-location-details-cell {
		font-size: .9rem;
	}
}

@media (max-width: 768px) {
	.container,
	.sppb-row-container {
		width: calc(100% - 1rem);
	}

	#sp-footer > .container,
	#sp-bottom > .container {
		width: calc(100% - 1rem);
	}

	/*
	 * Bootstrap keeps col-sm-6 active on most phones in landscape and in
	 * responsive previews wider than 576px.  That squeezed copyright and the
	 * complete legal menu into two half-width columns.  Long labels then pushed
	 * the first link outside the footer.  The compact footer is deliberately a
	 * single column throughout the same range in which the burger menu is used.
	 */
	#sp-footer1,
	#sp-footer2 {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	#sp-footer1 .sp-column,
	#sp-footer2 .sp-column,
	#sp-footer2 .sp-module,
	#sp-footer2 .sp-module-content,
	#sp-footer2 ul.menu {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	#sp-footer .container-inner {
		padding-right: .5rem;
		padding-left: .5rem;
	}

	/*
	 * On narrow screens every horizontal inset is expensive. Reduce both the
	 * Bootstrap column gutter and the component padding so the content uses the
	 * available width while retaining a slim, visible page frame.
	 */
	#sp-main-body > .container > .container-inner > .row {
		--bs-gutter-x: 0;
	}

	#sp-component {
		padding-right: 0;
		padding-left: 0;
		overflow: clip;
	}

	/*
	 * Inline grid declarations in modernised articles otherwise retain two
	 * columns on narrow phones. Stack them and let every child really shrink.
	 */
	#sp-component :is([style*="display: grid"], [style*="display:grid"]) {
		width: 100% !important;
		max-width: 100% !important;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	#sp-component :is([style*="display: grid"], [style*="display:grid"]) > * {
		min-width: 0 !important;
		max-width: 100% !important;
		grid-column: 1 / -1 !important;
	}

	#sp-component :is([style*="display: flex"], [style*="display:flex"]) {
		max-width: 100% !important;
		flex-wrap: wrap !important;
	}

	#sp-component :is(p, li, h1, h2, h3, h4, h5, h6, a, span, strong) {
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	#sp-component .com-content-article__body > :is(p, ul, ol, blockquote),
	#sp-component .article-details > :is(p, ul, ol, blockquote),
	#sp-component .item-page > :is(p, ul, ol, blockquote) {
		max-width: 100%;
	}

	.mtc-claim {
		font-size: clamp(1.08rem, 5vw, 1.4rem);
	}

	.mtc-claim-desktop {
		display: none;
	}

	.mtc-claim-mobile {
		display: inline;
	}

	.mtc-masthead {
		padding-top: .3rem;
	}

	.mtc-brand-row {
		min-height: auto;
		align-items: flex-end;
		gap: .75rem;
		padding: 0 .35rem;
	}

	.mtc-brand {
		margin-bottom: -.75rem;
	}

	.mtc-brand img {
		/* The replacement logo is almost square. Give the tablet version a
		 * smaller proportional box instead of letting its intrinsic width grow.
		 * mtc48: reduce the former 110 x 102 px tablet logo by exactly 25%. */
		width: 82.5px;
		height: 76.5px;
		object-fit: contain;
		object-position: left center;
	}

	.mtc-services {
		font-size: .82rem;
	}

	.mtc-claim {
		min-height: 3.1rem;
		padding: .5rem 4.25rem .5rem .75rem;
		font-size: 1.35rem;
	}

	/*
	 * The general off-canvas rules reserve 3.8rem while the tablet claim bar
	 * is only 3.1rem high.  Since the navigation overlays that bar, the unequal
	 * boxes pushed the burger towards its upper edge.  Use one shared height
	 * and centre every wrapper in the overlay chain.
	 */
	.mtc-site-header #sp-header.mtc-navigation,
	#sp-header.mtc-navigation .container,
	#sp-header.mtc-navigation .container-inner,
	#sp-header.mtc-navigation .row,
	#sp-header.mtc-navigation #sp-menu,
	#sp-header.mtc-navigation #sp-menu > .sp-column,
	#sp-header.mtc-navigation .mtc-offcanvas-toggler {
		min-height: 3.1rem;
		height: 3.1rem !important;
	}

	#sp-header.mtc-navigation .row,
	#sp-header.mtc-navigation #sp-menu,
	#sp-header.mtc-navigation #sp-menu > .sp-column,
	#sp-header.mtc-navigation .mtc-offcanvas-toggler {
		align-items: center;
	}

	#sp-component > .sp-column {
		padding: .2rem;
	}

	body.view-category #sp-component > .sp-column {
		padding: .2rem;
	}

	body.view-category .article-list .article,
	body.view-category .blog .article,
	body.view-category .blog-items .blog-item {
		margin-bottom: .5rem;
		padding: .4rem;
	}

	body.view-category .article-list .article:last-child,
	body.view-category .blog .article:last-child,
	body.view-category .blog-items .blog-item:last-child {
		margin-bottom: .5rem;
		padding-bottom: .4rem;
	}

	body.view-featured .article-list .article,
	body.view-featured .blog .article,
	body.view-featured .blog-items .blog-item,
	body.view-featured .article-list .article:last-child,
	body.view-featured .blog .article:last-child,
	body.view-featured .blog-items .blog-item:last-child {
		margin-bottom: .7rem;
		padding: .55rem;
	}

	.readmore > a,
	.readmore > .btn {
		width: 100%;
	}

	#sp-bottom {
		padding-block: 1.35rem .75rem;
	}

	#sp-bottom .sp-module,
	#sp-bottom .row > div:nth-last-child(-n + 2) .sp-module {
		margin-bottom: 1rem;
	}

	#sp-footer {
		padding-block: .85rem;
	}

	#sp-footer .row {
		row-gap: .5rem;
	}

	#sp-footer,
	#sp-footer2 {
		text-align: left;
	}

	#sp-footer2 ul.menu {
		justify-content: flex-start;
		gap: .3rem .8rem;
	}

	#sp-footer2 ul.menu > li,
	#sp-footer2 ul.menu > li > a {
		max-width: 100%;
	}

	.view-category .article-list table,
	.view-category .article-list tbody,
	.view-category .article-list tr,
	.view-category .blog-items table,
	.view-category .blog-items tbody,
	.view-category .blog-items tr {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.view-category .article-list td,
	.view-category .article-list th,
	.view-category .blog-items td,
	.view-category .blog-items th {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		padding: .35rem 0;
		overflow-wrap: anywhere;
	}

	.view-category .article-list td:empty,
	.view-category .article-list th:empty,
	.view-category .blog-items td:empty,
	.view-category .blog-items th:empty {
		display: none;
	}
}

@media (max-width: 425px) {
	/*
	 * Keep logo and service claim next to each other. The former block layout
	 * pushed the service text below the dog and therefore detached the dog from
	 * the red bar. Aligning the logo to the bottom restores the intended overlap.
	 */
	.mtc-brand-row {
		display: flex;
		min-height: 0;
		align-items: flex-end;
		gap: .35rem;
		padding: 0 .25rem;
	}

	.mtc-brand {
		align-self: flex-end;
		margin-bottom: -1rem;
	}

	.mtc-brand img {
		width: 71.25px;
		height: 66px;
	}

	.mtc-services {
		align-self: flex-end;
		min-width: 0;
		margin: 0 0 .75rem auto;
		font-size: .69rem;
		line-height: 1.2;
		text-align: right;
	}

	.mtc-services span {
		display: block;
	}

	.mtc-services span:not(:last-child)::after {
		content: none;
	}

	.mtc-claim {
		min-height: 2.65rem;
		padding: .35rem 3.5rem .35rem .45rem;
		font-size: 1.13rem;
		line-height: 1.1;
	}

	.mtc-masthead {
		padding-top: 0;
	}

	.mtc-site-header #sp-header.mtc-navigation {
		min-height: 2.65rem;
		height: 2.65rem !important;
	}

	#sp-header.mtc-navigation .container,
	#sp-header.mtc-navigation .container-inner,
	#sp-header.mtc-navigation .row,
	#sp-header.mtc-navigation #sp-menu,
	#sp-header.mtc-navigation #sp-menu > .sp-column,
	#sp-header.mtc-navigation .mtc-offcanvas-toggler {
		min-height: 2.65rem;
		height: 2.65rem;
	}

	/* Use almost the complete phone width while keeping a subtle page frame. */
	.container,
	.sppb-row-container {
		width: calc(100% - 1rem);
	}

	#sp-footer > .container,
	#sp-bottom > .container {
		width: calc(100% - .75rem);
	}

	#sp-footer2 ul.menu {
		column-gap: .7rem;
		row-gap: .25rem;
	}

	#sp-main-body > .container > .container-inner > .row {
		--bs-gutter-x: 0;
	}

	#sp-component > .sp-column,
	body.view-category #sp-component > .sp-column {
		padding: .2rem;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	body.view-featured .article-list .article,
	body.view-featured .blog .article,
	body.view-featured .blog-items .blog-item,
	body.view-featured .article-list .article:last-child,
	body.view-featured .blog .article:last-child,
	body.view-featured .blog-items .blog-item:last-child {
		padding: .45rem;
	}

	body.view-category .article-list .article,
	body.view-category .blog .article,
	body.view-category .blog-items .blog-item,
	body.view-category .article-list .article:last-child,
	body.view-category .blog .article:last-child,
	body.view-category .blog-items .blog-item:last-child {
		padding: .3rem;
	}

}

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

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/*
 * MTC55: one responsive content grid for all standard Joomla content views.
 * Keep header, footer and intentionally padded cards out of this normalisation.
 */
:root {
	--mtc-content-max-width: 1180px;
	--mtc-content-gutter: clamp(1rem, 2.4vw, 1.75rem);
}

#sp-main-body > .container {
	width: min(calc(100% - (2 * var(--mtc-content-gutter))), var(--mtc-content-max-width));
	max-width: var(--mtc-content-max-width) !important;
}

#sp-main-body > .container > .container-inner > .row {
	margin-right: 0;
	margin-left: 0;
	--bs-gutter-x: 0;
}

#sp-main-body #sp-component {
	padding-right: 0;
	padding-left: 0;
}

#sp-main-body #sp-component > .sp-column {
	padding-right: var(--mtc-content-gutter);
	padding-left: var(--mtc-content-gutter);
}

/* Remove only duplicated outer Joomla / Bootstrap insets. Card padding remains local. */
#sp-main-body #sp-component :is(.container-fluid, .blog-featured, .blog, .article-list) {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

@media (max-width: 991.98px) {
	#sp-main-body > .container {
		width: min(calc(100% - 1rem), var(--mtc-content-max-width));
	}

	#sp-main-body #sp-component > .sp-column {
		padding-right: .5rem;
		padding-left: .5rem;
	}
}