/* ============================================================================
   MedTech skin — the visual language of https://bencsikpeter.hu/medtechnew/
   applied on top of the existing layout.

   This file only changes *appearance*: colour tokens, typography, accents,
   focus states. It deliberately does not move, resize or restructure any
   block — medtech-header.css keeps owning the layout.

   Load order: bootstrap-css -> obudai-style -> medtech-header -> medtech-skin
   ========================================================================= */

/* =========================================================================
   1) DESIGN TOKENS
   ========================================================================= */
:root {
	/* brand */
	--mtr-navy:         #0E1B2A;
	--mtr-blue:         #36B3EF;
	--mtr-blue-bright:  #54C9FA;
	--mtr-blue-deep:    #0E5E8A;
	--mtr-blue-darker:  #062F4A;
	--mtr-blue-pale:    #D3E7F2;

	/* surfaces */
	--mtr-paper:        #FFFFFF;
	--mtr-paper-2:      #F6F4EE;
	--mtr-paper-3:      #ECE7DA;

	/* text */
	--mtr-gray:         #6B7785;
	--mtr-gray-2:       #B8BDC4;

	/* lines */
	--mtr-line:         rgba(14, 27, 42, 0.10);
	--mtr-line-on-blue: rgba(255, 255, 255, 0.18);

	/* type */
	--mtr-display: 'Archivo', 'Inter', system-ui, sans-serif;
	--mtr-serif:   'Instrument Serif', Georgia, serif;
	--mtr-body:    'Sora', 'Inter', system-ui, sans-serif;
	--mtr-mono:    'JetBrains Mono', ui-monospace, monospace;

	/* keep Bootstrap in step with the palette */
	--bs-primary:          #0E5E8A;
	--bs-primary-rgb:      14, 94, 138;
	--bs-link-color:       #0E5E8A;
	--bs-link-color-rgb:   14, 94, 138;
	--bs-link-hover-color: #fcaf17;
	--bs-body-color:       #6B7785;
	--bs-heading-color:    #0E1B2A;
	--bs-border-color:     rgba(14, 27, 42, 0.10);
}

/* =========================================================================
   2) BASE TYPOGRAPHY — Sora for running text
   ========================================================================= */
body {
	font-family: var(--mtr-body);
	color: var(--mtr-gray);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--mtr-blue);
	color: #fff;
}

/* Visible keyboard focus everywhere — the old theme relied on the browser
   default, which disappears against the blue surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--mtr-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================================
   3) DISPLAY HEADINGS — Archivo, heavy, uppercase, tight tracking
   ========================================================================= */
.mt-brand-title,
.mt-hero-title,
.mt-about-heading,
.mt-projects-heading,
.mt-news-heading,
.mt-projects-list-heading,
.mt-news-list-heading,
.mt-tmhero-title,
.mt-tmlist-title,
.mt-contact-heading,
.mt-rolunk-h1,
.mt-rolunk-h2,
.mt-lab-h1,
.mt-lab-h2,
.mt-project-hero-title,
.mt-pl-page > h1,
.single-post .post-title,
.single-post-more-title,
.page-title {
	font-family: var(--mtr-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--mtr-navy);
}

/* Sub-headings stay sentence case — uppercase on long clinical wording
   hurts legibility, so only the section titles above get it. */
.mt-rolunk-h3,
.mt-lab-h3,
.mt-rolunk-unit-title,
.mt-project-name,
.mt-projects-list-title,
.mt-news-title,
.mt-news-list-title,
.mt-tm-name,
.mt-pl-name,
.mt-info-title {
	font-family: var(--mtr-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mtr-navy);
}

/* Emphasis inside a display heading picks up the editorial serif, as on the
   reference site ("About us <em>in brief</em>"). */
.mt-about-heading em,
.mt-projects-heading em,
.mt-news-heading em,
.mt-rolunk-h1 em,
.mt-rolunk-h2 em,
.mt-lab-h1 em,
.mt-lab-h2 em,
.mt-tmhero-title em,
.mt-contact-heading em {
	font-family: var(--mtr-serif);
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mtr-blue-deep);
}

/* Lede paragraphs */
.mt-brand-sub,
.mt-hero-sub,
.mt-projects-desc,
.mt-projects-list-lede,
.mt-news-list-lede,
.mt-tmhero-sub,
.mt-contact-lede,
.mt-rolunk-lede,
.mt-lab-lede {
	color: var(--mtr-gray);
}

/* =========================================================================
   4) EYEBROWS & META — JetBrains Mono, uppercase, wide tracking
   ========================================================================= */
.mt-project-hero-eyebrow,
.mt-pl-block-label,
.mt-form-section-title,
.mt-info-label,
.mt-rolunk-unit-code,
.mt-rolunk-cap-sublabel,
.mt-rolunk-leader-label,
.mt-rolunk-statement-label,
.mt-lab-unit-code,
.mt-lab-sublabel,
.mt-lab-equipment-label,
.mt-tm-h-skills,
.mt-tm-h-contact,
.mt-news-date,
.mt-news-list-date,
.mt-pf-label,
.mt-tm-role {
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mtr-blue-deep);
}

.mt-news-date,
.mt-news-list-date,
.mt-tm-role {
	color: var(--mtr-gray);
}

/* =========================================================================
   5) HEADER & NAVIGATION
   ========================================================================= */
.mt-brand-card,
.mt-nav-card,
.mt-hero-card {
	border: 1px solid var(--mtr-line);
	box-shadow: 0 10px 30px rgba(14, 27, 42, 0.06);
}

.mt-brand-title {
	color: var(--mtr-navy);
}

.mt-nav-list > li > a {
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mtr-navy);
}

.mt-nav-list > li > a:hover,
.mt-nav-list > li > a:focus-visible,
.mt-nav-list > li.current-menu-item > a,
.mt-nav-list > li.current-menu-parent > a,
.mt-nav-list > li.current-menu-ancestor > a {
	background: rgba(54, 179, 239, 0.14);
	color: var(--mtr-blue-deep);
}

.mt-nav-icon svg {
	color: var(--mtr-blue);
}

.mt-nav-toggle-bar {
	background: var(--mtr-navy);
}

/* =========================================================================
   6) BUTTONS — solid brand-blue pill as the primary call to action
   ========================================================================= */
.wp-block-button__link,
.mt-projects-btn .wp-block-button__link,
.mt-news-allbtn .wp-block-button__link,
.mt-tmhero-btn .wp-block-button__link,
.mt-hero-btn,
.wpcf7-submit,
.mt-btn-submit,
.oe-404-btn {
	background: var(--mtr-blue);
	border: 1px solid var(--mtr-blue);
	color: #fff;
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 999px;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.mt-hero-btn:hover,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible,
.mt-btn-submit:hover,
.oe-404-btn:hover {
	background: var(--mtr-blue-deep);
	border-color: var(--mtr-blue-deep);
	color: #fff;
}

/* "Read more" style text links keep the understated treatment. */
.mt-news-more,
.mt-projects-list-excerpt a,
.mt-news-list-excerpt a,
.mt-project-back-link {
	font-family: var(--mtr-mono);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mtr-blue-deep);
}

.mt-news-more:hover,
.mt-project-back-link:hover {
	/* --mtr-blue is only ~2.4:1 on white, so hovers darken instead. */
	color: var(--mtr-navy);
}

/* =========================================================================
   7) CARDS, PILLS & CAROUSEL ACCENTS
   ========================================================================= */
.mt-project-card,
.mt-projects-list-card,
.mt-news-item,
.mt-news-list-card,
.mt-tm-card,
.mt-pl-card,
.mt-rolunk-card,
.mt-lab-card {
	border: 1px solid var(--mtr-line);
	border-radius: 14px;
}

.mt-news-pill,
.mt-news-list-cat,
.mt-pl-cat,
.mt-pl-tag,
.mt-tm-tags li {
	background: rgba(54, 179, 239, 0.12);
	color: var(--mtr-blue-deep);
	font-family: var(--mtr-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.mt-carousel-arrow {
	background: #fff;
	border: 1px solid var(--mtr-line);
	color: var(--mtr-navy);
}

.mt-carousel-arrow:hover {
	background: var(--mtr-blue);
	border-color: var(--mtr-blue);
	color: #fff;
}

.mt-carousel-dot {
	background: var(--mtr-gray-2);
}

.mt-carousel-dot.is-active {
	background: var(--mtr-blue);
}

/* =========================================================================
   8) PROJECT FILTER (API listing)
   ========================================================================= */
.mt-pf-pill.is-active,
.mt-pf-switch button.is-active {
	background: var(--mtr-blue);
	border-color: var(--mtr-blue);
	color: #fff;
}

.mt-pf-chip {
	background: rgba(54, 179, 239, 0.12);
	border: 1px solid var(--mtr-blue-pale);
	color: var(--mtr-blue-deep);
}

.mt-pl-status--futo {
	background: rgba(54, 179, 239, 0.16);
	color: var(--mtr-blue-deep);
}

/* =========================================================================
   9) FOOTER — flat navy, as on the reference site
   ========================================================================= */
footer.dark-blue-bg,
.dark-blue-bg {
	background: var(--mtr-navy);
}

footer.dark-blue-bg .widget-title,
footer.dark-blue-bg h5 {
	font-family: var(--mtr-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.72);
}

footer.dark-blue-bg a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

footer.dark-blue-bg a:hover,
footer.dark-blue-bg a:focus-visible {
	color: var(--mtr-blue-bright);
	text-decoration: underline;
}

.oe-last-updated {
	font-family: var(--mtr-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mtr-gray-2);
}

/* =========================================================================
   10) FORMS
   ========================================================================= */
.mt-field input,
.mt-field textarea,
.mt-field select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
	border: 1px solid var(--mtr-line);
	border-radius: 10px;
	font-family: var(--mtr-body);
	color: var(--mtr-navy);
}

.mt-field input:focus,
.mt-field textarea:focus,
.mt-field select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--mtr-blue);
	box-shadow: 0 0 0 3px rgba(54, 179, 239, 0.18);
	outline: none;
}

/* =========================================================================
   11) LINKS IN RUNNING TEXT
   ========================================================================= */
.page-content a:not([class]),
.mt-rolunk-body a,
.mt-lab-body a,
.post-content a {
	color: var(--mtr-blue-deep);
	text-underline-offset: 0.18em;
}

.page-content a:not([class]):hover,
.mt-rolunk-body a:hover,
.mt-lab-body a:hover,
.post-content a:hover {
	color: var(--mtr-navy);
}

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

/* =========================================================================
   13) SPECIFICITY BRIDGE

   medtech-header.css / style.css target these headings with two-class
   selectors, so the single-class rules in section 3 lose on weight. These
   repeat only the type properties at matching specificity — no !important.
   ========================================================================= */
.mt-brand-card .mt-brand-title,
.mt-hero-card .mt-hero-title,
.mt-about-card .mt-about-heading,
.mt-projects-card .mt-projects-heading,
.mt-news-card .mt-news-heading,
.mt-rolunk-page .mt-rolunk-h1,
.mt-rolunk-page .mt-rolunk-h2,
.mt-lab-page .mt-lab-h1,
.mt-lab-page .mt-lab-h2,
.mt-projects-list-page .mt-projects-list-heading,
.mt-pl-page .mt-projects-list-heading,
.mt-news-list-page .mt-news-list-heading,
.mt-tmhero .mt-tmhero-title,
.mt-tmlist .mt-tmlist-title,
.mt-contact-card .mt-contact-heading,
.mt-project-single .mt-project-hero-title {
	font-family: var(--mtr-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--mtr-navy);
}

.mt-project-card .mt-project-name.wp-block-post-title,
.mt-projects-list-card .mt-projects-list-title,
.mt-news-card .mt-news-title.wp-block-post-title,
.mt-news-list-card .mt-news-list-title,
.mt-tm-card .mt-tm-name,
.mt-pl-page .mt-pl-name,
.mt-rolunk-page .mt-rolunk-unit-title,
.mt-lab-page .mt-lab-h3 {
	font-family: var(--mtr-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mtr-navy);
}

.mt-rolunk-page .mt-rolunk-unit-code,
.mt-lab-page .mt-lab-unit-code,
.mt-contact-card .mt-info-label,
.mt-pl-page .mt-pl-block-label {
	font-family: var(--mtr-mono);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mtr-blue-deep);
}

/* =========================================================================
   14) HERO PANEL — the reference site's signature blue surface

   Same grid, same size; only the fill and the text colour change, so the
   home page opens on the brand blue instead of a pale tint.
   ========================================================================= */
.mt-hero-card {
	background: linear-gradient(135deg, #36B3EF 0%, #0E5E8A 58%, #062F4A 100%);
	border-color: transparent;
}

.mt-hero-card .mt-hero-title {
	color: #fff;
}

.mt-hero-card .mt-hero-sub,
.mt-hero-card .mt-hero-empty {
	color: rgba(255, 255, 255, 0.82);
}

.mt-hero-card .mt-hero-media--empty {
	background: rgba(255, 255, 255, 0.06);
	border-left: 1px solid var(--mtr-line-on-blue);
}

.mt-hero-card .mt-hero-btn {
	background: #fff;
	border-color: #fff;
	color: var(--mtr-blue-darker);
}

.mt-hero-card .mt-hero-btn:hover,
.mt-hero-card .mt-hero-btn:focus-visible {
	background: var(--mtr-blue-pale);
	border-color: var(--mtr-blue-pale);
	color: var(--mtr-blue-darker);
}

/* =========================================================================
   15) CAROUSEL DOTS — brand blue for the active page
   ========================================================================= */
.mt-projects-carousel-wrap .mt-carousel-dot.is-active {
	background: var(--mtr-blue);
}

.mt-projects-carousel-wrap .mt-carousel-dot:hover {
	background: var(--mtr-blue-deep);
}

/* =========================================================================
   16) FULL-WIDTH PAGE SHELL

   Bootstrap caps .container at 1320px, which left roughly 300px of empty
   white on each side of a 1920px screen. The cards now run the full width of
   the viewport with a fluid gutter, capped only so the layout does not
   stretch absurdly on ultra-wide displays.

   .container doubles as the card element on the content blocks (for example
   .mt-about-card.container), so the gutter is applied to the outer shells
   only and explicitly reset on nested containers.
   ========================================================================= */
:root {
	--mt-page-max: 1760px;
	--mt-gutter: clamp(16px, 2.6vw, 48px);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
	width: 100%;
	max-width: var(--mt-page-max);
	margin-inline: auto;
}

.oe-header > .container,
.mt-hero-slider-wrap,
.page-content.container,
footer > .container {
	padding-inline: var(--mt-gutter);
}

/* Cards that happen to carry .container must not inherit the page gutter. */
.page-content .container {
	padding-inline: 0;
}

/* =========================================================================
   17) STICKY HEADER CARD
   ========================================================================= */
.mt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--mtr-navy);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 10px 0;
	font-family: var(--mtr-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.mt-skip-link:focus {
	left: 0;
}

.oe-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-top: 14px;
	padding-bottom: 14px;
	background: linear-gradient(to bottom, #fff 62%, rgba(255, 255, 255, 0));
}

.oe-header .mt-brand-card {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
}

/* =========================================================================
   18) HEADER CARD + NAVIGATION

   One card on every page: brand on the left, menu on the right.
   ========================================================================= */
.mt-brand-card--with-nav {
	gap: 20px;
	padding-block: 12px;
}

.mt-brand-text {
	min-width: 0;
}

.mt-brand-card--with-nav .mt-brand-title {
	display: block;
	font-size: clamp(13px, 1.1vw, 17px);
	line-height: 1.2;
}

.mt-brand-card--with-nav .mt-nav-list > li > a,
.mt-brand-card--with-nav .mt-nav-list > li > .nav-link {
	font-family: var(--mtr-mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	padding: 10px;
	border-bottom: 0;
	border-radius: 8px;
}

.mt-brand-card--with-nav .mt-nav-list > li > a:hover,
.mt-brand-card--with-nav .mt-nav-list > li > a:focus-visible,
.mt-brand-card--with-nav .mt-nav-list .current-menu-item > a,
.mt-brand-card--with-nav .mt-nav-list .current_page_item > a,
.mt-brand-card--with-nav .mt-nav-list .current-menu-parent > a,
.mt-brand-card--with-nav .mt-nav-list .current-menu-ancestor > a {
	background: rgba(54, 179, 239, 0.14);
	color: var(--mtr-blue-deep);
	border-bottom-color: transparent;
}

/* --- hamburger: hidden on desktop, the only control below 992px --------- */
.mt-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--mtr-line);
	border-radius: 10px;
	cursor: pointer;
}

.mt-nav-toggle-bar {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--mtr-navy);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.mt-nav-toggle[aria-expanded="true"] .mt-nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mt-nav-toggle[aria-expanded="true"] .mt-nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.mt-nav-toggle[aria-expanded="true"] .mt-nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991.98px) {
	.mt-nav-toggle {
		display: flex;
	}

	.mt-brand-card--with-nav {
		flex-wrap: wrap;
	}

	/* Collapsed by default; .is-open comes from the header script. */
	.mt-brand-card--with-nav .mt-header-nav {
		display: none;
		width: 100%;
		margin-left: 0;
		border-top: 1px solid var(--mtr-line);
		padding-top: 8px;
	}

	.mt-brand-card--with-nav .mt-header-nav.is-open {
		display: block;
	}

	.mt-brand-card--with-nav .mt-nav-inner,
	.mt-brand-card--with-nav .mt-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: 100%;
	}

	.mt-brand-card--with-nav .mt-nav-list > li > a,
	.mt-brand-card--with-nav .mt-nav-list > li > .nav-link {
		display: block;
		padding: 12px 14px;
	}
}

/* =========================================================================
   19) HERO SLIDESHOW
   ========================================================================= */
.mt-hero-slider-wrap {
	margin-top: 4px;
}

.mt-hero-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--mt-radius, 20px);
	background: linear-gradient(135deg, #36B3EF 0%, #0E5E8A 58%, #062F4A 100%);
	box-shadow: 0 10px 34px rgba(14, 27, 42, 0.10);
	height: clamp(340px, 52vh, 600px);
	isolation: isolate;
}

.mt-hero-slider-track,
.mt-hero-slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.mt-hero-slide {
	opacity: 0;
	transition: opacity .7s ease;
	pointer-events: none;
}

.mt-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.mt-hero-slide a {
	display: block;
	height: 100%;
}

.mt-hero-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mt-hero-slide-caption {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;
	max-width: 42%;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(14, 27, 42, 0.6);
	color: #fff;
	font-family: var(--mtr-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Scrim so the overlay text stays readable over any photo. */
.mt-hero-slider-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	pointer-events: none;
	background: linear-gradient(100deg,
		rgba(6, 47, 74, 0.94) 0%,
		rgba(6, 47, 74, 0.86) 38%,
		rgba(6, 47, 74, 0.42) 62%,
		rgba(6, 47, 74, 0.10) 88%);
}

.mt-hero-slider-text {
	pointer-events: auto;
	max-width: min(52ch, 46%);
	padding: 0 clamp(24px, 4vw, 64px);
	color: #fff;
}

.mt-hero-slider .mt-hero-title {
	font-family: var(--mtr-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: clamp(30px, 4vw, 62px);
	line-height: 1.02;
	color: #fff;
	margin: 0 0 14px;
}

.mt-hero-slider .mt-hero-sub {
	font-family: var(--mtr-body);
	font-size: clamp(14px, 1.1vw, 17px);
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 22px;
}

.mt-hero-slider .mt-hero-btn {
	display: inline-block;
	background: #fff;
	border: 1px solid #fff;
	color: var(--mtr-blue-darker);
	font-family: var(--mtr-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 12px 24px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.mt-hero-slider .mt-hero-btn:hover,
.mt-hero-slider .mt-hero-btn:focus-visible {
	background: var(--mtr-blue-pale);
	border-color: var(--mtr-blue-pale);
	color: var(--mtr-blue-darker);
}

/* --- controls ----------------------------------------------------------- */
.mt-hero-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	translate: 0 -50%;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(14, 27, 42, 0.35);
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.mt-hero-slider-arrow svg {
	width: 16px;
	height: 16px;
}

.mt-hero-slider-arrow:hover,
.mt-hero-slider-arrow:focus-visible {
	background: var(--mtr-blue);
	border-color: var(--mtr-blue);
}

.mt-hero-slider-prev { left: 18px; }
.mt-hero-slider-next { right: 18px; }

.mt-hero-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 4;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mt-hero-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: width .2s ease, border-radius .2s ease, background-color .2s ease;
}

.mt-hero-slider-dot.is-active {
	width: 26px;
	border-radius: 5px;
	background: #fff;
}

@media (max-width: 767.98px) {
	.mt-hero-slider {
		height: clamp(300px, 62vh, 460px);
	}

	.mt-hero-slider-text {
		max-width: 100%;
	}

	.mt-hero-slider-overlay {
		align-items: flex-end;
		padding-bottom: 54px;
		background: linear-gradient(180deg,
			rgba(6, 47, 74, 0.38) 0%,
			rgba(6, 47, 74, 0.78) 58%,
			rgba(6, 47, 74, 0.92) 100%);
	}

	.mt-hero-slider-arrow {
		width: 38px;
		height: 38px;
	}

	.mt-hero-slide-caption {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-hero-slide {
		transition: none;
	}
}

/* --- compact brand block on small screens ------------------------------- */
@media (max-width: 575.98px) {
	.mt-brand-card--with-nav {
		gap: 12px;
		padding: 10px 14px;
	}

	.mt-brand-card--with-nav .mt-brand-logo img {
		height: 34px;
	}

	.mt-brand-text {
		flex: 1 1 auto;
	}

	.mt-brand-card--with-nav .mt-brand-title {
		font-size: 11.5px;
		letter-spacing: 0;
	}

	.mt-nav-toggle {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
	}
}

/* Keep the arrows clear of the bottom-aligned hero text on phones. */
@media (max-width: 767.98px) {
	.mt-hero-slider-arrow {
		top: 28%;
	}
}

/* =========================================================================
   20) SECTION SURFACES & RHYTHM

   Two things were wrong with the block seams:

   1. `.home .page-content .container` (in style.css) forced the home page
      section blocks to `background: transparent; border-radius: 0; margin: 0`,
      overriding their own card styling. So they were invisible surfaces
      stacked edge to edge, with only two overlapping shadows marking the
      joint.
   2. A later rule pinned them to a 10px radius while every other card on the
      site uses 20px.

   Both are re-established here at higher specificity, and each section gets
   a distinct surface from the reference palette so the blocks read apart:

      page          #F6F6F6  (reference --bs-body-bg)
      About         #FFFFFF  (--mtr-paper)
      Projects      #D3E7F2  (--mtr-blue-pale)
      News          #0E1B2A  (--mtr-navy, inverted text)
   ========================================================================= */
:root {
	--mt-page-bg:     #F6F6F6;
	--mt-section-gap: clamp(20px, 2.4vw, 34px);
	--mt-card-radius: 20px;
}

body,
.page-content {
	background: var(--mt-page-bg);
}

/* The page shell is only a wrapper — the cards inside carry the surfaces. */
.page-content > .container {
	background: transparent;
	border-radius: 0;
}

.page-content.container {
	padding-top: var(--mt-section-gap);
	padding-bottom: var(--mt-section-gap);
}

/* Header fade must end in the page colour, not white. */
.oe-header {
	background: linear-gradient(to bottom, var(--mt-page-bg) 62%, rgba(246, 246, 246, 0));
}

/* --- home page section cards ------------------------------------------- */
.home .page-content .wp-block-group.mt-about-card.container,
.home .page-content .wp-block-group.mt-projects-card.container,
.home .page-content .wp-block-group.mt-news-card.container {
	border-radius: var(--mt-card-radius);
	padding: clamp(28px, 3vw, 52px);
	margin: 0 0 var(--mt-section-gap);
	box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04), 0 8px 30px rgba(14, 27, 42, 0.07);
	overflow: hidden;
}

.home .page-content .wp-block-group.mt-about-card.container {
	background: var(--mtr-paper);
	border: 1px solid var(--mtr-line);
}

.home .page-content .wp-block-group.mt-projects-card.container {
	background: var(--mtr-blue-pale);
	border: 1px solid rgba(14, 94, 138, 0.14);
}

.home .page-content .wp-block-group.mt-news-card.container {
	background: var(--mtr-navy);
	border: 1px solid var(--mtr-navy);
}

/* --- news section on navy ---------------------------------------------- */
/* The post cards inside (.mt-news-item) stay white, so only the chrome that
   sits directly on the navy is inverted. */
.mt-news-card .mt-news-heading {
	color: #fff;
}

.mt-news-card .mt-news-empty {
	color: rgba(255, 255, 255, 0.72);
}

.mt-news-card .mt-news-allbtn .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--mtr-blue-darker);
}

.mt-news-card .mt-news-allbtn .wp-block-button__link:hover,
.mt-news-card .mt-news-allbtn .wp-block-button__link:focus-visible {
	background: var(--mtr-blue-pale);
	border-color: var(--mtr-blue-pale);
	color: var(--mtr-blue-darker);
}

.mt-news-card .mt-news-item {
	border-radius: 14px;
	overflow: hidden;
}

.mt-news-card .wp-block-query-pagination .page-numbers {
	color: rgba(255, 255, 255, 0.78);
}

/* --- projects section on pale blue -------------------------------------- */
.mt-projects-card .mt-project-card {
	background: #fff;
	border-color: rgba(14, 94, 138, 0.12);
}

.mt-projects-card .mt-carousel-arrow {
	background: #fff;
	border-color: rgba(14, 94, 138, 0.18);
}

.mt-projects-carousel-wrap .mt-carousel-dot {
	background: rgba(14, 94, 138, 0.28);
}

/* --- subpage stacks: alternate the surface so the cards read apart ------ */
.mt-rolunk-page .mt-rolunk-card:nth-child(even),
.mt-lab-page .mt-lab-card:nth-child(even) {
	background: var(--mtr-blue-pale);
	border: 1px solid rgba(14, 94, 138, 0.14);
}

.mt-rolunk-page .mt-rolunk-card,
.mt-lab-page .mt-lab-card,
.page-content .mt-contact-card.container,
.page-content .mt-tmhero.container,
.page-content .mt-tmlist.container,
.page-content .mt-projects-list-page.container,
.page-content .mt-news-list-page.container,
.page-content .mt-pl-page.container {
	border-radius: var(--mt-card-radius);
}

/* --- footer joins the last card cleanly --------------------------------- */
footer.dark-blue-bg {
	margin-top: 0;
}

/* --- subpage wrappers are wrappers, not surfaces ------------------------ */
/* style.css paints every .container inside .page-content white, which also
   hits the two pages that are only a stack of cards. Letting the page colour
   through is what makes those cards read as separate blocks. */
.page-content .mt-rolunk-page.container,
.page-content .mt-lab-page.container {
	background: transparent;
	border-radius: 0;
}

html {
	background: var(--mt-page-bg);
}

/* The "last updated" bar is printed after </footer> and still carried the old
   blue gradient, so the page ended in two different dark bands. */
.oe-last-updated {
	background: var(--mtr-navy);
	color: rgba(255, 255, 255, 0.5);
	padding-bottom: 18px;
}

/* style.css paints the home page white through `.home` and
   `.home .page-content`, which outranks the plain `body` / `.page-content`
   rules above. Repeated here at matching specificity so the page colour is
   the same on the home page as everywhere else. */
html,
body.home,
.home .page-content {
	background: var(--mt-page-bg);
}

/* =========================================================================
   21) HERO ACTIONS + QUOTE REQUEST DIALOG
   ========================================================================= */
.mt-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.mt-hero-slider .mt-hero-btn--quote {
	background: var(--mtr-blue);
	border-color: var(--mtr-blue);
	color: #fff;
	cursor: pointer;
}

.mt-hero-slider .mt-hero-btn--quote:hover,
.mt-hero-slider .mt-hero-btn--quote:focus-visible {
	background: var(--mtr-blue-bright);
	border-color: var(--mtr-blue-bright);
	color: var(--mtr-blue-darker);
}

.mt-hero-slider .mt-hero-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.mt-hero-slider .mt-hero-btn--ghost:hover,
.mt-hero-slider .mt-hero-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* --- the dialog --------------------------------------------------------- */
.mt-quote-modal {
	width: min(920px, calc(100vw - 32px));
	max-width: none;
	max-height: min(88vh, 900px);
	padding: 0;
	border: 0;
	border-radius: var(--mt-card-radius, 20px);
	background: var(--mtr-paper);
	color: var(--mtr-gray);
	box-shadow: 0 30px 80px rgba(14, 27, 42, 0.32);
	overflow: hidden;
}

.mt-quote-modal::backdrop {
	background: rgba(6, 47, 74, 0.62);
	backdrop-filter: blur(3px);
}

.mt-quote-modal-inner {
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 900px);
}

.mt-quote-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 26px clamp(20px, 3vw, 40px) 18px;
	background: var(--mtr-navy);
	color: #fff;
}

.mt-quote-modal-title {
	margin: 0;
	font-family: var(--mtr-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: clamp(20px, 2.2vw, 30px);
	color: #fff;
}

.mt-quote-modal-lede {
	margin: 6px 0 0;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.72);
}

.mt-quote-modal-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 26px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease;
}

.mt-quote-modal-close:hover,
.mt-quote-modal-close:focus-visible {
	background: var(--mtr-blue);
	border-color: var(--mtr-blue);
}

.mt-quote-modal-body {
	padding: clamp(20px, 3vw, 36px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The form inside the dialog reuses the contact page styling. */
.mt-quote-modal-body .mt-form-section-title {
	margin-top: 22px;
}

.mt-quote-modal-body .mt-form-section-title:first-child {
	margin-top: 0;
}

.mt-quote-modal-body .mt-form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 4px;
}

.mt-quote-modal-body .mt-form-row--single {
	grid-template-columns: 1fr;
}

.mt-quote-modal-body .mt-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.88rem;
	color: var(--mtr-navy);
}

@media (max-width: 767.98px) {
	.mt-quote-modal {
		width: 100vw;
		max-height: 100dvh;
		border-radius: 0;
	}

	.mt-quote-modal-inner {
		max-height: 100dvh;
	}

	.mt-quote-modal-body .mt-form-row {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   22) LISTING PAGES — breathing room

   The three listing wrappers were set to `padding: 48px 0 64px`, so the card
   grid ran flush into the left and right edges of the white panel, and with
   white cards on a white panel the 32px gap read as a hairline. They now get
   a side gutter, and the cards get a real edge so each one reads on its own.
   ========================================================================= */
.mt-projects-list-page.wp-block-group,
.mt-news-list-page.wp-block-group,
.page-content .mt-pl-page {
	padding-inline: clamp(20px, 2.6vw, 44px);
}

.mt-projects-list-card,
.mt-news-list-card,
.mt-pl-card {
	background: var(--mtr-paper);
	border: 1px solid var(--mtr-line);
	box-shadow: 0 2px 10px rgba(14, 27, 42, 0.05);
}

/* The thumbnail sits at the top of the card, so it has to follow the radius. */
.mt-projects-list-card .mt-projects-list-thumb img,
.mt-news-list-card .mt-news-list-thumb img {
	border-start-start-radius: inherit;
	border-start-end-radius: inherit;
}

/* =========================================================================
   23) FOOTER
   ========================================================================= */
.mt-footer {
	background: var(--mtr-navy);
	color: rgba(255, 255, 255, 0.72);
	margin-top: var(--mt-section-gap);
	padding-block: clamp(40px, 4.5vw, 72px) clamp(24px, 2vw, 32px);
	font-family: var(--mtr-body);
}

.mt-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color .18s ease;
}

.mt-footer a:hover,
.mt-footer a:focus-visible {
	color: var(--mtr-blue-bright);
}

/* --- optional widget row ------------------------------------------------ */
.mt-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding-bottom: clamp(28px, 3vw, 44px);
	margin-bottom: clamp(28px, 3vw, 44px);
	border-bottom: 1px solid var(--mtr-line-on-blue);
}

/* --- main columns ------------------------------------------------------- */
.mt-footer-main {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr 1.1fr;
	gap: clamp(28px, 3vw, 56px);
	align-items: start;
}

.mt-footer-logo {
	display: inline-block;
	margin-bottom: 18px;
}

.mt-footer-logo img {
	height: auto;
	width: 180px;
	max-width: 100%;
	/* The logo artwork is dark on transparent, so it needs lifting on navy. */
	background: #fff;
	border-radius: 10px;
	padding: 8px 12px;
}

.mt-footer-name {
	margin: 0 0 10px;
	font-family: var(--mtr-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.25;
	color: #fff;
}

.mt-footer-tagline {
	margin: 0;
	max-width: 42ch;
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
}

.mt-footer-col-title {
	margin: 0 0 16px;
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mtr-blue-bright);
}

.mt-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.mt-footer-list li {
	margin: 0;
	padding: 0;
}

/* The menu walker adds the nav icons; they are noise at this size. */
.mt-footer-list .mt-nav-icon {
	display: none;
}

.mt-footer-more {
	font-family: var(--mtr-mono);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mtr-blue-bright);
}

/* --- contact column ----------------------------------------------------- */
.mt-footer-contact-list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mt-footer-label {
	font-family: var(--mtr-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.48);
}

.mt-footer-cta {
	display: inline-block;
	white-space: nowrap;
	margin-top: 18px;
	padding: 11px 22px;
	background: var(--mtr-blue);
	border: 1px solid var(--mtr-blue);
	border-radius: 999px;
	color: #fff;
	font-family: var(--mtr-mono);
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mt-footer-cta:hover,
.mt-footer-cta:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--mtr-blue-darker);
}

/* --- legal bar ---------------------------------------------------------- */
.mt-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 26px;
	margin-top: clamp(32px, 3.5vw, 56px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid var(--mtr-line-on-blue);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.52);
}

.mt-footer-copy,
.mt-footer-legal {
	margin: 0;
}

.mt-footer-legal {
	flex: 1 1 320px;
}

.mt-footer-privacy {
	font-family: var(--mtr-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-left: auto;
}

@media (max-width: 991.98px) {
	.mt-footer-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mt-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575.98px) {
	.mt-footer-main {
		grid-template-columns: 1fr;
	}

	.mt-footer-privacy {
		margin-left: 0;
	}
}

.mt-footer-blurb {
	margin: 0 0 4px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

/* =========================================================================
   24) HEADER BRAND — one row, never two

   Before: logo, site name and nav were three siblings in a wrapping flex
   row. Together they were wider than the card, so the menu wrapped onto a
   second line and the header grew to 136px. Now the logo and the name are a
   single, shrinkable flex item and the row does not wrap on desktop, so the
   menu always sits beside the brand on one line.
   ========================================================================= */
.mt-brand-id {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 0 1 auto;
	text-decoration: none;
}

.mt-brand-logo {
	display: block;
	flex: 0 0 auto;
}

.mt-brand-logo img {
	display: block;
	/* The wordmark needs height to stay legible, so the logo is taller than
	   a mark-only lockup would be. */
	height: clamp(38px, 3.6vw, 56px);
	width: auto;
	max-width: none;
}

.mt-brand-card--with-nav .mt-brand-text {
	display: block;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid var(--mtr-line);
}

.mt-brand-card--with-nav .mt-brand-title {
	display: block;
	max-width: 24ch;
	font-size: clamp(11.5px, 0.82vw, 13.5px);
	line-height: 1.22;
	text-wrap: balance;
}

.mt-brand-card--with-nav .mt-brand-sub {
	display: block;
	margin: 2px 0 0;
	font-size: 0.72rem;
	color: var(--mtr-gray);
}

@media (min-width: 992px) {
	/* The row must not wrap: the nav keeps its place next to the brand. */
	.mt-brand-card--with-nav {
		flex-wrap: nowrap;
		align-items: center;
	}

	.mt-brand-card--with-nav .mt-header-nav {
		margin-left: auto;
		flex: 0 0 auto;
	}

	/* Slightly tighter menu so brand + menu fit comfortably side by side. */
	.mt-brand-card--with-nav .mt-nav-list {
		gap: 2px;
	}

	.mt-brand-card--with-nav .mt-nav-list > li > a,
	.mt-brand-card--with-nav .mt-nav-list > li > .nav-link {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
		padding: 9px;
	}
}

/* Between 992px and 1299px the wordmark alone carries the branding; the long
   centre name would force the menu to wrap again. */
@media (min-width: 992px) and (max-width: 1299.98px) {
	.mt-brand-card--with-nav .mt-brand-text {
		display: none;
	}
}

@media (max-width: 991.98px) {
	/* flex-basis 0 keeps the hamburger on the brand row: with an auto basis
	   the brand measures its full content width first and the button wraps. */
	.mt-brand-id {
		flex: 1 1 0;
		min-width: 0;
	}

	.mt-brand-card--with-nav .mt-brand-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mt-brand-card--with-nav .mt-brand-title {
		max-width: none;
	}

	.mt-nav-toggle {
		flex: 0 0 auto;
	}
}

@media (max-width: 575.98px) {
	.mt-brand-id {
		gap: 10px;
	}

	.mt-brand-card--with-nav .mt-brand-text {
		padding-left: 10px;
	}
}

/* --- footer logo: the new wordmark is wide, so cap it by width ----------- */
.mt-footer-logo img {
	width: clamp(190px, 16vw, 240px);
	height: auto;
	background: #fff;
	border-radius: 10px;
	padding: 10px 14px;
}

/* Between 992px and 1199px only the wordmark is shown, but the menu still has
   to fit beside it, so it is compacted further. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.mt-brand-card--with-nav .mt-nav-list > li > a,
	.mt-brand-card--with-nav .mt-nav-list > li > .nav-link {
		font-size: 0.62rem;
		letter-spacing: 0.08em;
		padding: 8px 7px;
	}

	.mt-brand-card--with-nav .mt-nav-icon {
		display: none;
	}
}

/* =========================================================================
   25) PAGE BACKDROP — no hard edge under the hero

   style.css forced `html, body { background: #fff !important }` and
   `.home { background-color: #fff !important }`, so everything above and
   around the hero was white while .page-content below it was #F6F6F6. The
   result was a full-width white-to-grey step landing exactly on the bottom
   edge of the hero card. Those two declarations are gone; the page colour is
   set here, once, for every element that paints the backdrop.

   On top of the flat colour sits a soft blue haze behind the header and the
   hero, fading out below it, so the hero card sits in a halo instead of on a
   flat field.
   ========================================================================= */
html,
body,
body.home {
	background-color: var(--mt-page-bg);
}

body,
body.home {
	background-image: linear-gradient(
		to bottom,
		rgba(54, 179, 239, 0.10) 0,
		rgba(54, 179, 239, 0.06) 38%,
		rgba(54, 179, 239, 0) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% clamp(520px, 78vh, 920px);
	background-attachment: scroll;
}

/* The page shell must not paint over the haze - html and body carry the
   page colour, so the tint stays continuous from the header downwards. */
.page-content,
.home .page-content {
	background-color: transparent;
}

/* The header fade now blends into the haze rather than into flat grey. */
.oe-header {
	background: linear-gradient(to bottom, rgba(236, 244, 250, 0.96) 55%, rgba(236, 244, 250, 0));
}

/* A deeper, softer shadow lets the dark hero melt into the page instead of
   ending on a crisp line. */
.mt-hero-slider {
	box-shadow:
		0 2px 6px rgba(14, 27, 42, 0.06),
		0 18px 50px -12px rgba(14, 27, 42, 0.30),
		0 40px 90px -40px rgba(14, 94, 138, 0.45);
}

@media (prefers-reduced-transparency: reduce) {
	body,
	body.home {
		background-image: none;
	}
}

/* =========================================================================
   26) TEAM — profile cards

   The page used to be a stack of full-width accordion rows: an 88px avatar,
   a name and a chevron, with everything else hidden until the row was
   clicked. That is now a responsive grid of profile cards where the whole
   profile is visible, so the page reads at a glance.

   The accordion script was removed from the page content, so every
   `.mt-tm-card.is-open` rule in medtech-header.css is inert; only the two
   collapsed-state rules below need overriding.
   ========================================================================= */
.mt-tmquery .mt-tmtpl {
	/* The base rule is display:flex !important, hence the matching weight. */
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(20px, 2vw, 30px);
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-tmquery .mt-tmtpl > li {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.mt-tmlist .mt-tm-card.wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--mtr-paper);
	border: 1px solid var(--mtr-line);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(14, 27, 42, 0.05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mt-tmlist .mt-tm-card.wp-block-group:hover {
	transform: translateY(-3px);
	border-color: rgba(14, 94, 138, 0.22);
	box-shadow: 0 10px 28px rgba(14, 27, 42, 0.12);
}

/* The chevron belonged to the accordion. */
.mt-tm-card::after {
	content: none;
}

/* --- photo + name ------------------------------------------------------- */
.mt-tmlist .mt-tm-card .mt-tm-head.wp-block-group {
	display: block !important;
	padding: 0 !important;
	text-align: left;
}

.mt-tmlist .mt-tm-card .mt-tm-photo {
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
}

.mt-tmlist .mt-tm-card .mt-tm-photo img {
	display: block;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
}

/* Placeholder when a member has no photo yet. */
.mt-tmlist .mt-tm-card .mt-tm-head:not(:has(.mt-tm-photo))::before {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 0;
	box-shadow: none;
	background-size: 84px 84px;
}

.mt-tmlist .mt-tm-card .mt-tm-name {
	font-family: var(--mtr-display) !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: var(--mtr-navy) !important;
	margin: 0 !important;
	padding: 22px 22px 0 !important;
}

/* --- profile body ------------------------------------------------------- */
.mt-tmlist .mt-tm-card .mt-tm-body.wp-block-group {
	display: block !important;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 6px 22px 22px !important;
}

.mt-tmlist .mt-tm-card .mt-tm-role {
	margin: 0 0 10px;
}

.mt-tmlist .mt-tm-card .mt-tm-spec {
	margin: 0 0 12px;
	font-size: 0.9rem;
	color: var(--mtr-gray);
}

.mt-tmlist .mt-tm-card .mt-tm-bio {
	margin: 0 0 14px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--mtr-gray);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mt-tmlist .mt-tm-card .mt-tm-h-skills,
.mt-tmlist .mt-tm-card .mt-tm-h-contact {
	/* base rule is margin: 0 0 12px !important */
	margin: 18px 0 8px !important;
}

.mt-tmlist .mt-tm-card .mt-tm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-tmlist .mt-tm-card .mt-tm-tags li {
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(54, 179, 239, 0.12);
	color: var(--mtr-blue-deep);
	font-family: var(--mtr-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mt-tmlist .mt-tm-card .mt-tm-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mt-tmlist .mt-tm-card .mt-tm-links li {
	margin: 0;
	padding: 0;
}

.mt-tmlist .mt-tm-card .mt-tm-links a {
	/* The icon links keep their row layout, just flush with the card text. */
	padding-inline: 0;
	font-size: 0.86rem;
	color: var(--mtr-blue-deep);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mt-tmlist .mt-tm-card .mt-tm-links a:hover,
.mt-tmlist .mt-tm-card .mt-tm-links a:focus-visible {
	color: var(--mtr-navy);
	border-bottom-color: currentColor;
}

@media (max-width: 575.98px) {
	.mt-tmquery .mt-tmtpl {
		grid-template-columns: 1fr;
	}
}

/* The "Our services" section heading is now a link to the Services page; it
   must still read as a heading, not as body copy. */
.mt-projects-heading a,
.mt-projects-card .mt-projects-heading a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}

.mt-projects-heading a:hover,
.mt-projects-heading a:focus-visible {
	color: var(--mtr-blue-deep);
	border-bottom-color: var(--mtr-blue);
}

/* Card image and title link to the service itself. */
.mt-project-card .mt-project-name a,
.mt-project-card .mt-project-name.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.mt-project-card:hover .mt-project-name a,
.mt-project-card .mt-project-name a:hover,
.mt-project-card .mt-project-name a:focus-visible {
	color: var(--mtr-blue-deep);
}

.mt-project-card .mt-project-img a {
	display: block;
	overflow: hidden;
}

.mt-project-card .mt-project-img img {
	transition: transform .35s ease;
}

.mt-project-card:hover .mt-project-img img {
	transform: scale(1.04);
}

/* =========================================================================
   27) SUBPAGE OPENING IMAGE — About us / About the lab

   The photo used to sit in the middle of the card: a flex box 1222px wide
   holding a 1024px image, so it had ~100px of dead space on each side, and
   it ran 688px tall — taller than the heading, lede and body text together.

   It now opens the card as a full-bleed banner: pulled out to the card's
   edges with negative margins, cropped to a cinematic ratio, and reordered
   above the heading. The padding is driven by custom properties so the
   negative margin always matches it at every breakpoint.
   ========================================================================= */
/* .wp-block-group is needed to match the weight of the base card rule,
   otherwise the padding stays 48/44 and the negative margin no longer
   lines up with it. */
.mt-rolunk-page .mt-rolunk-hero-card.wp-block-group,
.mt-lab-page .mt-lab-hero-card.wp-block-group {
	--mt-hero-pad-x: clamp(20px, 3vw, 44px);
	--mt-hero-pad-y: clamp(24px, 3vw, 48px);
	padding: var(--mt-hero-pad-y) var(--mt-hero-pad-x);
	overflow: hidden;
}

.mt-rolunk-page .mt-rolunk-hero-card > .wp-block-group__inner-container,
.mt-lab-page .mt-lab-hero-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
}

.mt-rolunk-page .mt-rolunk-hero-card .mt-rolunk-hero-img,
.mt-lab-page .mt-lab-hero-card .mt-lab-hero-img {
	order: -1;
	display: block;
	width: auto;
	margin: calc(var(--mt-hero-pad-y) * -1)
	        calc(var(--mt-hero-pad-x) * -1)
	        clamp(24px, 2.6vw, 38px);
	aspect-ratio: 2.8 / 1;
	max-height: 460px;
	border-radius: 0;
	overflow: hidden;
	background: var(--mtr-blue-pale);
}

/* WordPress wraps the image in a figure.aligncenter, which core styles as
   display:table - that is why the photo kept its intrinsic 1024px width
   inside a full-width banner. */
.mt-rolunk-page .mt-rolunk-hero-card .mt-rolunk-hero-img > *,
.mt-lab-page .mt-lab-hero-card .mt-lab-hero-img > * {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}

.mt-rolunk-page .mt-rolunk-hero-card .mt-rolunk-hero-img img,
.mt-lab-page .mt-lab-hero-card .mt-lab-hero-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* The heading sits right under the banner, so it needs a touch less air. */
.mt-rolunk-page .mt-rolunk-hero-card .mt-rolunk-h1,
.mt-lab-page .mt-lab-hero-card .mt-lab-h1 {
	margin-top: 0;
}

@media (max-width: 767.98px) {
	.mt-rolunk-page .mt-rolunk-hero-card .mt-rolunk-hero-img,
	.mt-lab-page .mt-lab-hero-card .mt-lab-hero-img {
		aspect-ratio: 16 / 9;
		max-height: none;
	}
}

/* =========================================================================
   25) SERVICES PAGE - QUOTE REQUEST BAND
   -------------------------------------------------------------------------
   The enquiry CTA was moved off the home page hero: it now sits between the
   Services lede and the services grid, where a visitor is already looking at
   what we offer.
   ========================================================================= */
.mt-services-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* The lede above has no bottom margin of its own, so without a top margin
	   the band sits right on the text. The grid below adds ~31px to the
	   bottom margin, so the top is set to match that total. */
	margin: clamp(30px, 3.6vw, 56px) 0 var(--mt-section-gap);
	padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 40px);
	border-radius: var(--mt-card-radius);
	background: linear-gradient(100deg, var(--mtr-blue-darker), var(--mtr-blue-deep));
	color: #fff;
}

.mt-services-cta-text {
	flex: 1 1 320px;
	min-width: 0;
}

.mt-services-cta-title {
	margin: 0;
	font-family: 'Archivo', sans-serif;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mt-services-cta-lede {
	margin: 6px 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.mt-services-cta-btn {
	flex: 0 0 auto;
	padding: 14px 28px;
	border: 1px solid var(--mtr-blue);
	border-radius: 999px;
	background: var(--mtr-blue);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mt-services-cta-btn:hover,
.mt-services-cta-btn:focus-visible {
	background: var(--mtr-blue-bright);
	border-color: var(--mtr-blue-bright);
	color: var(--mtr-blue-darker);
}

@media (max-width: 600px) {
	.mt-services-cta-btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   "Units and capabilities" tiles now link through to the About the lab page.
   The title keeps the heading colour so the tile still reads as a heading;
   the arrow and the underline carry the affordance.
   ------------------------------------------------------------------------- */
.mt-rolunk-page .mt-rolunk-unit-title a {
	color: inherit;
	text-decoration: none;
}

.mt-rolunk-page .mt-rolunk-unit-title a::after {
	content: ' →';
	color: var(--mtr-blue-deep);
	font-weight: 600;
	white-space: nowrap;
}

.mt-rolunk-page .mt-rolunk-unit-title a:hover,
.mt-rolunk-page .mt-rolunk-unit-title a:focus-visible {
	color: var(--mtr-blue-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Anchor targets on the About the lab page: leave room above the heading so
   the section's eyebrow label is not cut off when arriving from a tile link. */
.mt-lab-page .mt-lab-h2[id] {
	scroll-margin-top: clamp(24px, 6vh, 72px);
}

/* =========================================================================
   26) ABOUT US - STATEMENT FROM THE HEAD OF THE CENTRE
   -------------------------------------------------------------------------
   Sits under the institutional paragraphs in the leadership card. The rule
   on the left and the warmer surface mark it as someone speaking, rather
   than another block of organisational copy.
   ========================================================================= */
.mt-rolunk-page .mt-rolunk-statement {
	margin-top: clamp(24px, 3vw, 40px);
	padding: clamp(22px, 2.8vw, 36px) clamp(20px, 3vw, 40px);
	border-left: 3px solid var(--mtr-blue);
	border-radius: 0 var(--mt-card-radius) var(--mt-card-radius) 0;
	background: var(--mtr-paper-2);
}

.mt-rolunk-page .mt-rolunk-statement-label {
	margin: 0 0 14px;
}

.mt-rolunk-page .mt-rolunk-statement-text {
	margin: 0 0 1em;
	/* The card runs the full page width; cap the measure so the statement
	   stays readable instead of spanning 140 characters a line. */
	max-width: 78ch;
	font-family: var(--mtr-body);
	font-size: clamp(0.97rem, 1.05vw, 1.06rem);
	line-height: 1.72;
	color: var(--mtr-navy);
}

.mt-rolunk-page .mt-rolunk-statement-text:last-of-type {
	margin-bottom: 0;
}

.mt-rolunk-page .mt-rolunk-statement-by {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--mtr-line);
	font-family: var(--mtr-display);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--mtr-gray);
}

.mt-rolunk-page .mt-rolunk-statement-by strong {
	display: block;
	font-weight: 700;
	color: var(--mtr-navy);
}

/* -------------------------------------------------------------------------
   Privacy notice in the footer legal bar. Until the university's URL is set
   in the Customizer the label is printed as plain text, so it must not look
   clickable.
   ------------------------------------------------------------------------- */
.mt-footer-privacy--nolink {
	cursor: default;
	color: rgba(255, 255, 255, 0.52);
}

/* =========================================================================
   27) ABOUT THE LAB - PARTNER FILM
   -------------------------------------------------------------------------
   Its own card between the hero banner and the unit cards. The player keeps
   16:9 rather than being cropped into the 2.8:1 hero slot, and the poster
   frame carries the card until the visitor presses play (preload="none").
   ========================================================================= */
.mt-lab-page .mt-lab-film-lede {
	max-width: 62ch;
	margin-inline: auto;
}

.mt-lab-page .mt-lab-film {
	margin: clamp(22px, 2.6vw, 34px) auto 0;
	max-width: 1100px;
}

.mt-lab-page .mt-lab-film video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--mt-card-radius);
	background: var(--mtr-navy);
	box-shadow: 0 18px 48px rgba(14, 27, 42, 0.18);
	object-fit: cover;
}

.mt-lab-page .mt-lab-film figcaption {
	/* style.css styles every figcaption as an overlay strip pulled 75px up
	   over its image. That must not sit on the video's control bar. */
	position: static;
	bottom: auto;
	padding: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	margin-top: 14px;
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	color: var(--mtr-blue-deep);
}

@media (max-width: 767.98px) {
	.mt-lab-page .mt-lab-film video {
		border-radius: 14px;
		box-shadow: 0 10px 26px rgba(14, 27, 42, 0.16);
	}
}

/* =========================================================================
   28) ABOUT THE LAB - WHO LEADS THE CENTRE
   -------------------------------------------------------------------------
   Closing card: after the units, the equipment and the film, the page ends
   on a person and a way to reach them. Portrait beside the text on desktop,
   stacked and centred on a phone.
   ========================================================================= */
/* The editor wraps a group's contents in .wp-block-group__inner-container,
   so the row has to be laid out there; the second selector keeps it working
   if the block is ever re-saved without that wrapper. */
.mt-lab-page .mt-lab-lead-card > .wp-block-group__inner-container,
.mt-lab-page .mt-lab-lead-card:not(:has(> .wp-block-group__inner-container)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(22px, 3vw, 40px);
}

.mt-lab-page .mt-lab-lead-img {
	flex: 0 0 auto;
	width: 150px;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--mtr-blue-pale);
}

.mt-lab-page .mt-lab-lead-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 0;
}

.mt-lab-page .mt-lab-lead-text {
	flex: 1 1 280px;
	min-width: 0;
}

.mt-lab-page .mt-lab-lead-label {
	margin: 0 0 8px;
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mtr-blue-deep);
}

.mt-lab-page .mt-lab-lead-name {
	margin: 0 0 6px;
	font-family: var(--mtr-display);
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mtr-navy);
}

.mt-lab-page .mt-lab-lead-pos {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--mtr-gray);
}

.mt-lab-page .mt-lab-lead-body {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--mtr-line);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mtr-navy);
}

@media (max-width: 575.98px) {
	.mt-lab-page .mt-lab-lead-card > .wp-block-group__inner-container,
	.mt-lab-page .mt-lab-lead-card:not(:has(> .wp-block-group__inner-container)) {
		flex-direction: column;
		text-align: center;
	}

	.mt-lab-page .mt-lab-lead-img {
		width: 132px;
	}
}

/* =========================================================================
   29) ENQUIRY FORM OFF NOTICE
   -------------------------------------------------------------------------
   Shown in place of the form while it is switched off (no privacy notice
   yet). Styled as a calm statement, not an error.
   ========================================================================= */
.mt-form-off {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--mtr-line);
	border-left: 3px solid var(--mtr-blue);
	border-radius: var(--mt-card-radius);
	background: var(--mtr-paper-2);
}

.mt-form-off-title {
	margin: 0 0 10px;
	font-family: var(--mtr-display);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	font-weight: 700;
	color: var(--mtr-navy);
}

.mt-form-off-text {
	margin: 0;
	max-width: 62ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mtr-navy);
}

.mt-form-off-contact {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--mtr-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
}

.mt-form-off-contact li {
	margin: 0;
}

.mt-form-off-label {
	display: block;
	margin-bottom: 2px;
	font-family: var(--mtr-mono);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mtr-blue-deep);
}

.mt-form-off-contact a {
	font-family: var(--mtr-display);
	font-weight: 600;
	color: var(--mtr-navy);
	text-decoration: none;
}

.mt-form-off-contact a:hover,
.mt-form-off-contact a:focus-visible {
	color: var(--mtr-blue-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The Services band while the form is off: the button becomes a mailto. */
.mt-services-cta--off .mt-services-cta-btn {
	text-decoration: none;
	display: inline-block;
}

/* Shown above the enquiry form while it is switched off and only an editor
   can see it. Deliberately loud: it must not be mistaken for page content. */
.mt-form-preview-note {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px dashed var(--mtr-blue-deep);
	border-radius: 10px;
	background: #FFF8E1;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--mtr-navy);
}

.mt-form-preview-note strong {
	color: var(--mtr-blue-deep);
}