/* ==========================================================================
   LAYOUT
   --------------------------------------------------------------------------
   Bootstrap owns the grid — container, row and col-* come straight from it and
   are not redefined anywhere in this theme. What is left is section rhythm and
   the few section-level pieces Bootstrap has no component for.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/*
 * Every band in the frames is separated from the one above it by a single
 * #E2E8F0 hairline — checked across both pages, at every boundary. Without
 * it two white sections in a row read as one long undifferentiated gap.
 */
.mtfs-section {
	/*
	 * A block formatting context, so the first child's top margin stays
	 * INSIDE the band. A joined section has no padding to stop it, so the
	 * list heading's 48px was collapsing out and showing as a white strip
	 * between two tinted sections.
	 */
	display: flow-root;

	padding-top: var(--mtfs-section-space);
	padding-bottom: var(--mtfs-section-space);
	border-top: 1px solid var(--mtfs-color-border);
}

/*
 * Two exceptions, both in the frames:
 *
 *   after a hero  the gradient runs straight into the band below it
 *   joined         two halves of one band need no line down the middle
 *
 * The breadcrumb strip lives outside <main> and draws the line itself, so
 * the first section inside stands down rather than the two stacking into
 * a 2px rule.
 */
.mtfs-hero + .mtfs-section,
.mtfs-main > .mtfs-section:first-child,
.mtfs-section--no-space-top {
	border-top: 0;
}

/* The trailing "View All" / "Read All Blogs" button. The design gives it the
   same 60px gap the heading block has above the content, so the two edges of
   a section's body sit symmetrically. */
.mtfs-section__actions {
	margin-top: var(--mtfs-heading-space);
}

/* Backgrounds, chosen per section in the Page Sections metabox. */
.mtfs-section--muted {
	background: var(--mtfs-color-surface);
}

.mtfs-section--dark {
	background: var(--mtfs-black-2);
	color: var(--mtfs-on-dark);
}

.mtfs-section--dark h1,
.mtfs-section--dark h2,
.mtfs-section--dark h3,
.mtfs-section--dark h4,
.mtfs-section--dark .h2,
.mtfs-section--dark .h5 {
	color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Section heading
   --------------------------------------------------------------------------
   One block for every section title in the design. Four pieces, always in this
   order, with only alignment and tone changing between sections:

     eyebrow   pill with an orange dot and a small uppercase label
     title     the heading
     text      optional description
     rule      short dashed orange rule, always last

   Modifiers: --center / --start, and --light / --dark.
   -------------------------------------------------------------------------- */

.mtfs-heading {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--mtfs-heading-space);
}

/* How close the block sits to what follows. Measured per frame: the home
   page leaves 60, the inner pages 40, and a statement whose copy reads as
   part of the heading only 16. */
.mtfs-section--heading-tight .mtfs-heading {
	margin-bottom: var(--mtfs-heading-space-tight);
}

.mtfs-section--heading-snug .mtfs-heading {
	margin-bottom: var(--mtfs-heading-space-snug);
}

.mtfs-section--heading-close .mtfs-heading {
	margin-bottom: var(--mtfs-heading-space-close);
}

.mtfs-heading--center {
	align-items: center;
	text-align: center;
}

.mtfs-heading--start {
	align-items: flex-start;
	text-align: left;
}


/* Eyebrow pill ------------------------------------------------------------ */

.mtfs-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mtfs-space-2);
	height: var(--mtfs-eyebrow-h);
	margin: 0 0 var(--mtfs-space-4);
	padding-inline: var(--mtfs-space-4);
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
	color: var(--mtfs-color-primary);
	font-size: var(--mtfs-size-body-3);
	font-weight: 500;
	letter-spacing: var(--mtfs-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
}

.mtfs-heading__dot {
	width: var(--mtfs-eyebrow-dot);
	height: var(--mtfs-eyebrow-dot);
	border-radius: var(--mtfs-radius-pill);
	background: var(--mtfs-theme-1);
}

/* The plain alternative: the resources intro sets its label as a line of
   heading-coloured text over the title rather than inside the pill. */
.mtfs-heading__kicker {
	margin: 0 0 var(--mtfs-space-4);
	font-size: var(--mtfs-size-h4);
	line-height: var(--mtfs-line-height-card);
	color: var(--mtfs-color-heading);
}


/* Title and description --------------------------------------------------- */

/* Fills each line rather than balancing them: the frames break the
   manufacturing intro at 1177 / 812, where balance gives 1000 / 948. */
.mtfs-heading__title {
	margin: 0;
	text-wrap: wrap;

	/* A heading like "Classification/Manufacturing Processes" is one word to
	   the browser, and at 32px it is wider than a phone. The heading block is
	   a flex column, and a flex item will not shrink under its own content
	   unless it is told it may — so min-width goes with the break. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	font-size: var(--mtfs-size-h2);
	font-weight: var(--mtfs-weight-h2);
	color: var(--mtfs-color-heading);
}

.mtfs-heading__text {
	margin: var(--mtfs-space-4) 0 0;
	color: var(--mtfs-color-body);
}

/* Only a centred description gets a measure. Left-aligned, the frames run
   it the full width of the container — capping it there turned a two-line
   paragraph into four. */
.mtfs-heading--center .mtfs-heading__text {
	max-width: 620px;
}

/* Some frames run the centred description almost the full container — the
   manufacturing bands measure 1209-1261 against the home page's 389-414.
   The section says which it is rather than one guess covering both. */
.mtfs-heading--text-wide .mtfs-heading__text {
	max-width: none;
}

/* A centred heading caps its measure so long titles wrap sensibly. */
.mtfs-heading--center .mtfs-heading__title {
	max-width: min(760px, 100%);
}

/*
 * A heading sharing its row with a picture wraps a little short of its
 * column — measured at 580-586 inside a ~605 column on About us. A heading
 * that owns the full container does not: the manufacturing intro runs its
 * two lines to 1177px. So the measure belongs to the column, not to every
 * left-aligned heading.
 */
.mtfs-text-media__body .mtfs-heading__title {
	max-width: var(--mtfs-heading-measure);
}

/* Set above the row rather than beside the picture, the description runs the
   container and reads as body copy — so it takes the space a section leaves
   under its heading, not the 16 a subtitle takes. */
.mtfs-text-media--heading-above > .container > .mtfs-heading .mtfs-heading__text {
	margin-top: var(--mtfs-heading-space);
}


/* Dashed rule -------------------------------------------------------------- */

/*
 * A repeating gradient rather than `border-bottom: dashed`, because the browser
 * picks its own dash length for a dashed border — this way the 11px dash and
 * 5px gap from the design are exact.
 */
.mtfs-heading__rule {
	display: block;
	width: var(--mtfs-rule-w);
	height: var(--mtfs-rule-h);
	margin-top: var(--mtfs-space-3);
	background-image: repeating-linear-gradient(
		to right,
		var(--mtfs-theme-1) 0,
		var(--mtfs-theme-1) var(--mtfs-rule-dash),
		transparent var(--mtfs-rule-dash),
		transparent calc(var(--mtfs-rule-dash) + var(--mtfs-rule-gap))
	);
}


/* Dark tone ----------------------------------------------------------------
   Only the title and the description change colour. The pill keeps its light
   fill — that is how the design draws it on the dark "Why Choose Us" band, and
   the white chip against the dark background is the point.
   -------------------------------------------------------------------------- */

.mtfs-heading--dark .mtfs-heading__title {
	color: var(--mtfs-white);
}

.mtfs-heading--dark .mtfs-heading__text {
	color: var(--mtfs-on-dark);
}

/* The one place the pill does invert: sitting on a coloured card, as in the
   "Request a Custom Quote" block. Opt in with the --pill-outline modifier. */
.mtfs-heading--pill-outline .mtfs-heading__eyebrow {
	border-color: var(--mtfs-border-on-dark);
	background: var(--mtfs-surface-on-dark);
	color: var(--mtfs-white);
}


/* Responsive --------------------------------------------------------------- */

/* The block's own bottom margin steps down with --mtfs-heading-space in
   01-tokens.css, so there is nothing to override here. */
@media (max-width: 767.98px) {

	.mtfs-heading__eyebrow {
		margin-bottom: var(--mtfs-space-3);
	}
}


/* --------------------------------------------------------------------------
   Section: hero banner
   --------------------------------------------------------------------------
   The same peach-to-pale-blue gradient as the inner-page title band, so the
   two read as one family. Measured from the design: 698px tall, with the
   selling-point strip overlapping the bottom of the band.
   -------------------------------------------------------------------------- */

.mtfs-hero {
	/* The same 80 every other band uses. It was 96, which pushed the row
	   down and left the hero 16px taller than the frame. */
	padding-top: var(--mtfs-section-space);
	padding-bottom: var(--mtfs-section-space);
	background: linear-gradient(180deg, var(--mtfs-hero-from) 0%, var(--mtfs-hero-to) 100%);
}

.mtfs-hero__title {
	margin-bottom: var(--mtfs-space-5);
	color: var(--mtfs-color-heading);
}

.mtfs-hero__text {
	max-width: var(--mtfs-hero-measure);
	margin-bottom: var(--mtfs-space-6);
	color: var(--mtfs-color-body);
}

.mtfs-hero__text > *:last-child {
	margin-bottom: 0;
}

.mtfs-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--mtfs-radius);
	object-fit: cover;
}


/* Selling-point strip ------------------------------------------------------
   Equal columns divided by hairlines, as one bordered card. Grid rather than
   Bootstrap columns because the divider has to fall between cells, and the
   column count follows however many entries were filled in. */

.mtfs-hero__strip {
	display: grid;

	/*
	 * The dividers are the grid gaps: the container colour shows through a 1px
	 * gap between opaque cells, which draws both the vertical rules and the
	 * horizontal one between wrapped rows.
	 *
	 * Column counts are explicit rather than auto-fit. auto-fit picked three
	 * columns at tablet width, which left the fourth item alone on a second
	 * row with two empty cells showing as grey blocks. Stepping 1 -> 2 -> 4 on
	 * Bootstrap's own breakpoints divides the design's four items evenly at
	 * every size.
	 */
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--mtfs-color-border);

	margin: var(--mtfs-space-5) 0 0;
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius-sm);
	overflow: hidden;

	/* The hero centres itself below lg, but this strip is a list of facts and
	   stays left-aligned — the title is a flex row and would not centre with
	   its text anyway, which reads as a mistake. */
	text-align: left;
}

/* sm */
@media (min-width: 576px) {

	.mtfs-hero__strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* lg */
@media (min-width: 992px) {

	.mtfs-hero__strip {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mtfs-hero__strip-item {
	padding: var(--mtfs-space-5);
	background: var(--mtfs-color-surface);
}

.mtfs-hero__strip-title {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-2);
	margin: 0 0 var(--mtfs-space-2);
	color: var(--mtfs-color-primary);
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-h4);
	font-weight: 500;
	line-height: var(--mtfs-line-height-card);
}

.mtfs-hero__strip-text {
	margin: 0;
	font-size: var(--mtfs-size-body-1);
	color: var(--mtfs-color-heading);
}


@media (max-width: 991.98px) {

	.mtfs-hero {
		padding-top: var(--mtfs-space-7);
		padding-bottom: var(--mtfs-space-7);
		text-align: center;
	}

	.mtfs-hero__text {
		margin-inline: auto;
	}

	.mtfs-hero__actions {
		justify-content: center;
	}
}


/* --------------------------------------------------------------------------
   Section: call to action
   -------------------------------------------------------------------------- */

.mtfs-cta {
	position: relative;
	overflow: hidden;
}

.mtfs-cta--image {
	color: var(--mtfs-on-dark);
}

.mtfs-cta__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Scrim, so white text stays readable over any photograph. */
.mtfs-cta--image .mtfs-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mtfs-overlay);
}

.mtfs-cta--image .mtfs-heading__title {
	color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Section: contact
   -------------------------------------------------------------------------- */

.mtfs-contact-section__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}


/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.mtfs-page-header {
	background: var(--mtfs-color-surface);
}

.mtfs-page-header--image {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--mtfs-on-dark);
}

.mtfs-page-header--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mtfs-overlay-soft);
}

/* Lift the text above the scrim. */
.mtfs-page-header--image .container {
	position: relative;
}

.mtfs-page-header--image .mtfs-page-header__title {
	color: var(--mtfs-white);
}

.mtfs-page-header__subtitle {
	font-size: var(--mtfs-size-h6);
}/* --------------------------------------------------------------------------
   Section: text + image
   -------------------------------------------------------------------------- */

/*
 * The picture is as tall as the copy beside it, not as tall as its own
 * file — that is how every text-and-image band in the frames is drawn, and
 * it is what keeps the two columns squared off at the bottom. Stretching
 * the row and giving the figure the full height is what does it.
 */
/*
 * Left alone, the picture keeps the proportions it was uploaded at and the
 * copy centres against it. That is what the frames draw: every unboxed band
 * on services and order services is exactly as tall as its 420px photograph,
 * whether the copy beside it runs to two paragraphs or four.
 *
 * Only the bleeding card overrides this, because there the picture has to
 * reach both edges of the card whatever the copy does.
 */
.mtfs-text-media .row {
	align-items: center;
}

/*
 * Only once the two columns are side by side, and set on the container too:
 * a container's padding reads the same variable the row's negative margins
 * do, so a row told about the wider gutter on its own hangs 18px past the
 * container. The max-width above adds the gutter back, so the content edge
 * stays where the frames put it.
 *
 * The wide gutter pulls the row
 * 30 past the container on each side, which a centred container absorbs and a
 * full-width phone one does not.
 */
@media (min-width: 992px) {

	.mtfs-text-media > .container,
	.mtfs-text-media .row {
		--bs-gutter-x: var(--mtfs-gutter-wide);
	}
}

/*
 * The picture fills its column and keeps its own proportions. With the wide
 * gutter above, half the container is exactly the 610 the frames export their
 * pictures at, so a band comes out 420 tall without anything being cropped.
 */
.mtfs-text-media__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mtfs-radius);
}

/* The prose sits tight against the buttons otherwise — the heading block
   already carries its own bottom margin, this is for the gap below the copy. */
.mtfs-text-media__body .mtfs-prose > *:last-child {
	margin-bottom: 0;
}

/* Both frames put 40 between the copy and the button it closes on, and 24
   between the copy and a tinted qualifier — so the space belongs to whatever
   follows the prose rather than to the prose itself. */
.mtfs-text-media__actions {
	margin-top: var(--mtfs-heading-space-tight);
}

.mtfs-text-media__body .mtfs-note {
	margin-top: var(--mtfs-space-5);
}

.mtfs-text-media__body .mtfs-note + .mtfs-text-media__actions {
	margin-top: var(--mtfs-heading-space-tight);
}


/* Boxed variants ----------------------------------------------------------
   Both columns sit inside a tinted card. Which of the two the card is comes
   down to the picture: "to the edge" runs it to the card's own corners, as
   the home page does, and "inset" leaves it inside the card's padding with
   corners of its own, as the services frames do. */

.mtfs-text-media--boxed .mtfs-text-media__box {
	background: var(--mtfs-color-surface);
	border-radius: var(--mtfs-radius);
	overflow: hidden;
}

/* Cropped to the copy ------------------------------------------------------
   The other way round: the copy sets the band's height and the picture is
   cropped to it. Taking the picture out of flow is what stops its own height
   driving the row. A card that bleeds to its own edges always works this way,
   or the picture would stop short of a corner. */

.mtfs-text-media--cover .row {
	align-items: stretch;
}

.mtfs-text-media--cover .mtfs-text-media__media {
	position: relative;

	/* The picture is out of flow, so the figure has no content to be as tall
	   as — it takes the column's stretched height instead. */
	height: 100%;
	min-height: var(--mtfs-text-media-min);
}

.mtfs-text-media--cover .mtfs-text-media__media img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}


/* To the edge -------------------------------------------------------------
   Measured at 1279x573 with a 560px image column, the copy 40 clear of the
   card's edges on all four sides. */

/*
 * No gutter on the row — the wider one the band sets further up is undone
 * here only: the picture has to meet the copy with nothing between them, and
 * the negative margins a gutter brings would carry it past the card's own
 * corners. The container keeps its gutter, which is what holds the card to
 * the 1280 the frame draws it at.
 */
.mtfs-text-media--bleed .row {
	--bs-gutter-x: 0;
}

.mtfs-text-media--bleed .mtfs-text-media__body {
	padding: var(--mtfs-inset-pad);
}

.mtfs-text-media--bleed .mtfs-text-media__media img {
	border-radius: 0;
}

@media (min-width: 992px) {

	/* 720 and 560 of the card's 1280 — see the tokens for why not twelfths. */
	.mtfs-text-media--bleed .mtfs-text-media__col--text {
		flex: 0 0 auto;
		width: var(--mtfs-bleed-text-w);
	}

	.mtfs-text-media--bleed .mtfs-text-media__col--media {
		flex: 0 0 auto;
		width: var(--mtfs-bleed-media-w);
	}
}

/* Inset -------------------------------------------------------------------
   The card carries the padding instead of the copy, so the picture is spaced
   away from its edges by the same 48 on every side. */

.mtfs-text-media--inset .mtfs-text-media__box {
	padding: var(--mtfs-inset-pad);
}


@media (max-width: 991.98px) {

	.mtfs-text-media--bleed .mtfs-text-media__body {
		padding: var(--mtfs-space-6);
	}

	.mtfs-text-media--inset .mtfs-text-media__box {
		padding: var(--mtfs-space-6);
	}

	/* Stacked, the picture sits under the copy and needs a sane height. */
	.mtfs-text-media--cover .mtfs-text-media__media {
		min-height: 260px;
	}
}




/* --------------------------------------------------------------------------
   Section: numbered points on a dark band  —  "Why Choose Us"
   --------------------------------------------------------------------------
   Two columns of cards, each an orange number chip beside a single line of
   copy. Five points is an odd number and the design centres the last one on
   its own row — which justify-content-center on the row does by itself, so
   the count is never written down anywhere.
   -------------------------------------------------------------------------- */

.mtfs-why {
	position: relative;
	overflow: hidden;
}

/* Optional mesh photograph behind the band. Almost fully scrimmed, so it
   reads as a texture rather than as a picture with text on top of it. */
.mtfs-why__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.mtfs-why__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mtfs-overlay-texture);
}

/* Lift the content above the texture. */
.mtfs-why > .container {
	position: relative;
}

.mtfs-why__item {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-5);
	height: 100%;
	padding: var(--mtfs-space-5);
	border-radius: var(--mtfs-radius-sm);

	/* Solid, so the card stays legible wherever the texture is lightest. */
	background: var(--mtfs-black-2);
}

.mtfs-why__num {
	flex: 0 0 var(--mtfs-num-chip);
	display: grid;
	place-items: center;
	width: var(--mtfs-num-chip);
	height: var(--mtfs-num-chip);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-theme-1);
	color: var(--mtfs-white);
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-h4);
	font-weight: var(--mtfs-weight-h2);
	line-height: 1;
}

.mtfs-why__text {
	margin: 0;
	color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   Section: wide case cards  —  "Customer Case"
   --------------------------------------------------------------------------
   One card per view. The design lets the next card show past the right-hand
   edge of the container so the reader can see the list continues: the slider
   is allowed to overflow and the section clips it, which keeps the first card
   aligned to the container while the peek runs out to the window edge.
   -------------------------------------------------------------------------- */

/* Stops the right-hand bleed below from widening the page. */
.mtfs-case {
	overflow: hidden;
}

/*
 * The bleed is one-sided.
 *
 * Letting the slider overflow shows the next card past the right-hand edge of
 * the container, which is what the design draws — but it also let the
 * PREVIOUS card spill out to the left once the slider had been advanced, and
 * the design keeps that edge clean: the active card always starts flush with
 * the container.
 *
 * clip-path does what `overflow` cannot, because its insets take negative
 * values: 0 on the left clips exactly at the container edge, while a large
 * negative right inset lets the paint run on out to the window. The vertical
 * insets are negative too, so a card's hover lift is never sliced off.
 */
.mtfs-case__slider {
	overflow: visible;
	clip-path: inset(
		calc(var(--mtfs-space-5) * -1)
		calc(var(--mtfs-slider-bleed) * -1)
		calc(var(--mtfs-space-5) * -1)
		0
	);
}

.mtfs-case-card {
	display: grid;
	grid-template-columns: 1fr;
	height: 100%;
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-white);
	overflow: hidden;
}

/* md — the image takes the left half, as in the design. */
@media (min-width: 768px) {

	.mtfs-case-card {
		grid-template-columns: 1fr 1fr;
	}
}

.mtfs-case-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--mtfs-case-media-h);
	object-fit: cover;
}

.mtfs-case-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--mtfs-space-5);
}

.mtfs-case-card__title {
	margin: 0 0 var(--mtfs-space-4);
	font-size: var(--mtfs-size-h3);
	font-weight: var(--mtfs-weight-h3);
	color: var(--mtfs-color-heading);
}

/* Takes the slack, so the Learn More link sits on the bottom edge of every
   card however long the write-up is. */
.mtfs-case-card__text {
	flex: 1 1 auto;
	/* Card copy is set at body-1 in black-2, not the smaller grey the page
	   uses for prose — measured off the frame at 16px on a 26px pitch. */
	font-size: var(--mtfs-size-body-1);
	color: var(--mtfs-color-heading);
}

.mtfs-case-card__text > *:last-child {
	margin-bottom: 0;
}

.mtfs-case-card__more {
	margin-top: var(--mtfs-space-5);
}


/* --------------------------------------------------------------------------
   Section: customer reviews
   --------------------------------------------------------------------------
   The design staggers the cards — each is only as tall as its own quote, and
   the next one in that column starts directly beneath it. That is a masonry
   flow, which CSS multi-column does natively. A Bootstrap row would stretch
   every card in a row to match the tallest, which is the one thing the design
   deliberately does not do.
   -------------------------------------------------------------------------- */

.mtfs-reviews__grid {
	columns: 1;
	column-gap: var(--mtfs-space-5);
}

/* sm */
@media (min-width: 576px) {

	.mtfs-reviews__grid {
		columns: 2;
	}
}

/* lg — whatever the section's Columns control asked for. */
@media (min-width: 992px) {

	.mtfs-reviews__grid--2 {
		columns: 2;
	}

	.mtfs-reviews__grid--3 {
		columns: 3;
	}

	.mtfs-reviews__grid--4 {
		columns: 4;
	}
}

.mtfs-review {
	/*
	 * A block-level child, not inline-block: as inline-block the whole run
	 * became one line-box sequence and Chrome balanced every card into the
	 * first column instead of flowing them across. break-inside on a block
	 * child is what actually keeps a card whole.
	 */
	display: block;
	width: 100%;
	margin: 0 0 var(--mtfs-space-5);
	padding: var(--mtfs-space-5);
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-color-surface);
	break-inside: avoid;
}

/* A blockquote, but not the pull-quote the base sheet draws — the card is
   already the quote, so the bar, the fill and the italics all come off. */
.mtfs-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--mtfs-size-body-1);
	font-style: normal;
	color: var(--mtfs-color-body);
}

/* An uploaded flag sits on the text baseline beside the name. */
.mtfs-review__flag img {
	display: block;
	width: auto;
	height: var(--mtfs-flag-h);
	border-radius: var(--mtfs-radius-sm);
}

.mtfs-review__foot {
	margin-top: var(--mtfs-space-5);
	padding-top: var(--mtfs-space-5);
	border-top: 1px solid var(--mtfs-color-border);
}

.mtfs-review__name {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-2);
	margin: 0;
	font-family: var(--mtfs-font-heading);
	font-size: var(--mtfs-size-h4);
	font-weight: var(--mtfs-weight-h3);
	color: var(--mtfs-color-heading);
}

.mtfs-review__role {
	margin: var(--mtfs-space-2) 0 0;
	font-size: var(--mtfs-size-body-3);
	color: var(--mtfs-color-muted);
}


/* --------------------------------------------------------------------------
   Section: "Request a Custom Quote"
   --------------------------------------------------------------------------
   A dark card on the muted section background: the pitch on the left, the
   Contact Form 7 form on the right.
   -------------------------------------------------------------------------- */

.mtfs-quote__card {
	border-radius: var(--mtfs-radius);
	overflow: hidden;

	/*
	 * Not flat black: an orange glow out of the top-left corner and a blue one
	 * out of the bottom-right, both over black-2. Both are mixed from the
	 * brand channels, so recolouring the palette recolours the card.
	 */
	background:
		radial-gradient(120% 130% at 0% 0%, var(--mtfs-glow-accent) 0%, transparent 45%),
		radial-gradient(110% 120% at 100% 100%, var(--mtfs-glow-primary) 0%, transparent 55%),
		var(--mtfs-black-2);
}

/* The card is not split down the middle: the pitch gets 600 of the 1280 and
   the form the remaining 680, each padded 40 from the card's edge. */
@media (min-width: 992px) {

	.mtfs-quote__card > .row > :first-child {
		flex: 0 0 auto;
		width: var(--mtfs-quote-intro-w);
	}

	.mtfs-quote__card > .row > :last-child {
		flex: 0 0 auto;
		width: calc(100% - var(--mtfs-quote-intro-w));
	}
}

.mtfs-quote__intro,
.mtfs-quote__form {
	padding: var(--mtfs-inset-pad);
}

/* A flex stack, so the contact chips can be pushed to the bottom edge of the
   column — level with the foot of the form beside them. */
.mtfs-quote__intro {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The heading block already carries the 60 the frame puts under it. */
.mtfs-quote__points {
	margin: 0;
}

.mtfs-quote__point:last-child {
	margin-bottom: 0;
}

.mtfs-quote__point {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-3);
	margin-bottom: var(--mtfs-space-4);
	color: var(--mtfs-on-dark);
}

.mtfs-quote__point .mtfs-icon {
	flex: none;
	color: var(--mtfs-theme-2);
}

.mtfs-quote__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--mtfs-space-3);

	/*
	 * Follows the selling points at a fixed distance rather than being pushed
	 * to the foot of the card. Measured on the frames at 48 under the last
	 * point, with the column simply ending below the last row — pushed down,
	 * the two blocks were 150 apart with the rows jammed against the corner.
	 */
	margin-top: var(--mtfs-space-7);
	padding-top: var(--mtfs-inset-pad);
}

.mtfs-quote__chip {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-3);
	padding: var(--mtfs-chip-pad) var(--mtfs-space-4);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-surface-on-dark);
	color: var(--mtfs-white);
	font-size: var(--mtfs-size-body-2);
	text-decoration: none;
	transition: background var(--mtfs-transition);
}

.mtfs-quote__chip:hover,
.mtfs-quote__chip:focus {
	background: var(--mtfs-border-on-dark);
	color: var(--mtfs-white);
}

.mtfs-quote__chip .mtfs-icon {
	flex: none;
	color: var(--mtfs-white);
}

.mtfs-quote__note {
	margin: var(--mtfs-space-3) 0 0;
	font-size: var(--mtfs-size-body-3);
	color: var(--mtfs-on-dark-muted);
}


@media (max-width: 991.98px) {

	.mtfs-quote__intro,
	.mtfs-quote__form {
		padding: var(--mtfs-space-6);
	}

	/* Stacked, there is no form beside the chips to line up with. */
	.mtfs-quote__contacts {
		padding-top: var(--mtfs-space-6);
	}
}


/* --------------------------------------------------------------------------
   Section: blog cards  —  "Technical Resources & Insights"
   -------------------------------------------------------------------------- */

.mtfs-bcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-white);
	overflow: hidden;
	transition: transform var(--mtfs-transition), box-shadow var(--mtfs-transition);
}

.mtfs-bcard:hover {
	transform: translateY(calc(var(--mtfs-space-1) * -1));
	box-shadow: var(--mtfs-shadow);
}

.mtfs-bcard__media img {
	display: block;
	width: 100%;

	/* 410x246 in the design. */
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

.mtfs-bcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--mtfs-space-5);
}

/* Date on the left, reading time on the right. */
.mtfs-bcard__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--mtfs-space-3);
	margin-bottom: var(--mtfs-space-4);
	font-size: var(--mtfs-size-body-3);
	letter-spacing: var(--mtfs-tracking-label);
	text-transform: uppercase;
	color: var(--mtfs-color-body);
}

.mtfs-bcard__title {
	margin: 0 0 var(--mtfs-space-3);
	/* 03-base.css balances heading line lengths. On a card that evens a
	   two-line title out into three shorter ones, which is 26 the frame does
	   not have — these fill each line and wrap where they run out. */
	text-wrap: wrap;
	font-size: var(--mtfs-size-h4);
	/* The weight that goes with the size. Measured off the frame: its two
	   lines come to 322 and 344 of the 361 a card gives them, which is the
	   medium — at bold they are 338 and 365 and the second one wraps again. */
	font-weight: var(--mtfs-weight-h4);
	line-height: var(--mtfs-line-height-card);
}

.mtfs-bcard__title a {
	color: var(--mtfs-color-heading);
	text-decoration: none;
}

.mtfs-bcard__title a:hover,
.mtfs-bcard__title a:focus {
	color: var(--mtfs-color-primary);
}

/* Takes the slack, so Read More sits on the bottom edge of every card
   whatever length the excerpts happen to be.

   Two lines and no more: the frame cuts every one of these off and closes it
   with an ellipsis, and a word count alone let a third and fourth line
   through that made the band 82 taller than the design. The trim in
   posts.php supplies the ellipsis; this caps the depth whatever it returns.

   A height rather than -webkit-line-clamp, which needs display:-webkit-box —
   a flex item is blockified to flow-root, so the clamp never applied here. */
.mtfs-bcard__text {
	flex: 1 1 auto;
	max-height: calc(var(--mtfs-bcard-lines) * var(--mtfs-size-body-1) * var(--mtfs-line-height));
	margin: 0;
	overflow: hidden;
	/* Same card-copy style as the case cards. */
	font-size: var(--mtfs-size-body-1);
	color: var(--mtfs-color-heading);
}

.mtfs-bcard__more {
	margin-top: var(--mtfs-space-4);
}


/* --------------------------------------------------------------------------
   Joined sections
   --------------------------------------------------------------------------
   The inner-page frames draw a grid, a split band and a tick list as one long
   band inside a single 80px of padding. Keeping them as separate sections is
   what makes each one editable on its own; dropping the padding on the facing
   edges is what stops two of them putting 160px of dead space between.
   -------------------------------------------------------------------------- */

.mtfs-section--no-space-top {
	padding-top: 0;
}

.mtfs-section--no-space-bottom {
	padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   List heading
   --------------------------------------------------------------------------
   The short line introducing whatever list follows. Measured off About us:
   48px of air above it, 24 below, on the same 26px pitch as everything else.
   -------------------------------------------------------------------------- */

.mtfs-section__list-heading {
	margin: var(--mtfs-space-7) 0 var(--mtfs-space-5);
	font-size: var(--mtfs-size-h3);
	font-weight: var(--mtfs-weight-h3);
	line-height: var(--mtfs-line-height-card);
	color: var(--mtfs-color-heading);
}

/* Opening a band it has nothing above it to clear, so the 48 comes off. A
   joined band is a continuation of the one above, and there the frames give
   the sub-heading more room than it would have inside a section, not less. */
.mtfs-section:not(.mtfs-section--no-space-top) > .container > .mtfs-section__list-heading:first-child {
	margin-top: 0;
}

.mtfs-section--no-space-top > .container > .mtfs-section__list-heading:first-child {
	margin-top: var(--mtfs-space-8);
}

/* Straight under a heading block there is already a 60px gap, so the
   heading's own space above would double up. */
.mtfs-heading + .mtfs-section__list-heading {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   Note panel
   --------------------------------------------------------------------------
   Tinted band closing a section — a sentence or two of qualification. 100px
   tall across the 1280 container in the frames, which is 24px of padding
   around two lines on the 26px pitch.
   -------------------------------------------------------------------------- */

/* Qualifying text, so it is set a size down on its own 22px pitch — the same
   as a card's body copy and a FAQ answer. The resources frames keep it at
   reading size, because there it is a paragraph rather than a footnote. */
.mtfs-note {
	margin-top: var(--mtfs-note-space);
	padding: var(--mtfs-space-5);
	border: var(--mtfs-hairline) solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
	font-size: var(--mtfs-size-body-2);
	line-height: var(--mtfs-line-height-answer);
	color: var(--mtfs-color-body);
}

/*
 * On a tinted band the panel is the page's own white instead. Measured on the
 * manufacturing and about frames: the fill under a note is #FFFFFF on every
 * muted band and #F8FAFF on every white one — which is the same panel either
 * way, since a tinted panel on a tinted band is only its border.
 */
.mtfs-section--muted .mtfs-note {
	background: var(--mtfs-white);
}

.mtfs-note--reading {
	font-size: var(--mtfs-size-body-1);
	line-height: var(--mtfs-line-height);
}

/* With the button beside it the panel becomes a row: the copy takes what it
   needs and the button keeps to its own width at the far end. */
.mtfs-note--with-button {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mtfs-space-5);
}

.mtfs-note--with-button .mtfs-note__text {
	flex: 1 1 var(--mtfs-note-measure);
}

.mtfs-note--with-button .btn {
	flex: none;
}

.mtfs-note > *:last-child {
	margin-bottom: 0;
}

/* In the split band the panel is a column rather than a closing strip, so it
   fills the height beside the card instead of carrying a top margin. */
.mtfs-note--fill {
	height: 100%;
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   Section: tick list
   --------------------------------------------------------------------------
   Two columns of short statements, each opened by a blue tick. Measured off
   About us: the tick is 20px of blue, the label starts 40px in from the
   section edge, and rows sit 50px apart.
   -------------------------------------------------------------------------- */

/*
 * A multi-column flow, not a grid. The browser balances the columns by
 * height, which is what produces the uneven groupings the frames draw —
 * ten items falling 5 / 4 / 1 because the last one runs five lines.
 *
 * Each row pads itself so the columns keep an even rhythm; pulling the
 * list up by that padding stops it doubling the gap under the list heading.
 */
.mtfs-checklist__list {
	columns: 1;
	column-gap: var(--mtfs-list-gap);
	margin-block: calc(var(--mtfs-space-3) * -1);
}

/* md */
@media (min-width: 768px) {

	.mtfs-checklist__list--2 { columns: 2; }
	.mtfs-checklist__list--3 { columns: 3; }
	.mtfs-checklist__list--4 { columns: 4; }
}

/* Keeps a multi-line statement whole instead of splitting it across the
   column break; inline-block is what makes Safari honour it. */
.mtfs-checklist__item {
	display: inline-flex;
	width: 100%;
	break-inside: avoid;
}

/* The side layout puts the heading in its own column, so the list starts
   level with it rather than under it. The frames split that row down the
   middle with a wider gutter than a card grid uses: two 610px halves. */
.mtfs-checklist--side .mtfs-heading {
	margin-bottom: 0;
}

@media (min-width: 992px) {

	.mtfs-checklist--side > .container,
	.mtfs-checklist--side > .container > .row {
		--bs-gutter-x: var(--mtfs-gutter-wide);
	}
}

/* The line closing a tick list carries no tick, so it aligns with the column
   edge rather than with the statements above it. */
.mtfs-checklist__footnote {
	font-size: var(--mtfs-size-body-2);
	line-height: var(--mtfs-line-height-answer);
}

.mtfs-checklist__actions {
	margin-top: var(--mtfs-heading-space-tight);
}

/* Kept inside the list's own column the panel sits closer than it does when
   it runs the full width under both. */
.mtfs-checklist--side .row .mtfs-note {
	margin-top: var(--mtfs-space-5);
}

/* The picture beside a tick list keeps the card radius the frames give it. */
.mtfs-checklist__media {
	margin: 0;
}

.mtfs-checklist__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mtfs-radius);
}

.mtfs-checklist__item {
	align-items: flex-start;
	gap: var(--mtfs-space-3);
	padding-block: var(--mtfs-space-3);
	color: var(--mtfs-color-body);
}

.mtfs-checklist__item .mtfs-icon {
	flex: none;

	/* Nudged onto the first line's optical centre rather than its box top. */
	margin-top: calc((var(--mtfs-line-height) * 1em - 20px) / 2);
	color: var(--mtfs-color-primary);
}


/* --------------------------------------------------------------------------
   Section: split band
   --------------------------------------------------------------------------
   A picture card beside a panel of prose. The card puts the image and the
   copy side by side, so the whole band is one row tall.
   -------------------------------------------------------------------------- */

/* Joined under a card grid, the split band reads as one more row of it —
   so it keeps the grid's own 24px gutter rather than butting straight up. */
.mtfs-split.mtfs-section--no-space-top {
	padding-top: var(--mtfs-space-5);
}

.mtfs-split__card {
	display: grid;
	grid-template-columns: 1fr;
	height: 100%;
	border: 1px solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
	overflow: hidden;
}

/* sm — the image takes a fixed share and the copy the rest. */
@media (min-width: 576px) {

	.mtfs-split__card {
		grid-template-columns: var(--mtfs-split-media) 1fr;
	}
}

.mtfs-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--mtfs-split-media);
	object-fit: cover;
}

.mtfs-split__body {
	display: flex;
	flex-direction: column;
	padding: var(--mtfs-space-5);
}

.mtfs-split__title {
	margin: 0 0 var(--mtfs-space-3);
	font-size: var(--mtfs-size-h4);
	font-weight: var(--mtfs-weight-h3);
	line-height: var(--mtfs-line-height-card);
	color: var(--mtfs-color-heading);
}

.mtfs-split__text {
	flex: 1 1 auto;
	color: var(--mtfs-color-body);
}

.mtfs-split__text > *:last-child {
	margin-bottom: 0;
}

.mtfs-split__more {
	margin-top: var(--mtfs-space-4);
}


/* --------------------------------------------------------------------------
   Section: statement + wide image
   -------------------------------------------------------------------------- */

/*
 * Centred, the copy sits on a shorter measure than the picture below it.
 * Left-aligned it runs the full container, which is how the manufacturing
 * intro is drawn — so the measure follows the heading's alignment rather
 * than being fixed to the block.
 */
.mtfs-media__text {
	color: var(--mtfs-color-body);
}

.mtfs-media--center .mtfs-media__text {
	max-width: var(--mtfs-media-measure);
	margin-inline: auto;
	text-align: center;
}

/* Same control as the heading description: some frames run the statement
   the full width of the container instead of on a reading measure. */
.mtfs-section--text-wide .mtfs-media__text {
	max-width: none;
}

.mtfs-media__text > *:last-child {
	margin-bottom: 0;
}

.mtfs-media__figure {
	margin: var(--mtfs-space-8) 0 0;
}

.mtfs-media__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mtfs-radius);
}

/* With no copy between them the picture sits straight under the heading. */
.mtfs-heading + .mtfs-media__figure {
	margin-top: 0;
}


@media (max-width: 767.98px) {

	.mtfs-media__figure {
		margin-top: var(--mtfs-space-6);
	}
}

/* --------------------------------------------------------------------------
   Section: contact cards
   --------------------------------------------------------------------------
   Phone, e-mail, address, opening hours. Measured off the Contact frame:
   302px cards on 24px gutters, 126 tall, filled on the surface colour with
   no border, 24px of padding, the label above the value.
   -------------------------------------------------------------------------- */

.mtfs-contact-card {
	height: 100%;
	padding: var(--mtfs-space-5);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
}

.mtfs-contact-card__label {
	display: flex;
	align-items: center;
	gap: var(--mtfs-space-2);
	margin: 0 0 var(--mtfs-space-3);
	font-size: var(--mtfs-size-body-2);
	color: var(--mtfs-color-body);
}

.mtfs-contact-card__label .mtfs-icon {
	flex: none;
	color: var(--mtfs-color-primary);
}

.mtfs-contact-card__value {
	margin: 0;
	font-size: var(--mtfs-size-h4);
	line-height: var(--mtfs-line-height-card);
	color: var(--mtfs-color-heading);
}

.mtfs-contact-card__value a {
	color: inherit;
	text-decoration: none;
}

.mtfs-contact-card__value a:hover,
.mtfs-contact-card__value a:focus {
	color: var(--mtfs-color-primary);
}


/* --------------------------------------------------------------------------
   Section: reference table
   --------------------------------------------------------------------------
   Measured off the resources frames: a 50px blue header row, 50px body rows
   banded white / surface, a hairline round the whole table and no rules
   between the columns at all. Square corners — the only object in the design
   that is not rounded.
   -------------------------------------------------------------------------- */

/* Below the breakpoint the table keeps its width and scrolls inside this,
   rather than squeezing eleven columns into a phone. */
.mtfs-table__scroll {
	overflow-x: auto;
}

.mtfs-table {
	width: 100%;
	margin: 0;
	border: var(--mtfs-hairline) solid var(--mtfs-color-border);
	border-collapse: collapse;
	color: var(--mtfs-color-body);
}

.mtfs-table th,
.mtfs-table td {
	padding: var(--mtfs-space-3) var(--mtfs-space-5);
	line-height: var(--mtfs-line-height);
}

.mtfs-table thead th {
	background: var(--mtfs-color-primary);
	color: var(--mtfs-white);
	font-weight: 600;
	white-space: nowrap;
}

.mtfs-table tbody tr:nth-child(even) {
	background: var(--mtfs-color-surface);
}

.mtfs-table--center th,
.mtfs-table--center td {
	text-align: center;
}

.mtfs-table--start th,
.mtfs-table--start td {
	text-align: left;
}

/* Five and six columns of prose are set a size down, on the same 22px pitch
   the small copy uses everywhere else. The column widths are left to the
   browser: sharing the table evenly between six columns of prose reads worse
   than letting each take what its content needs, which is what the frames
   draw. */
.mtfs-table--text-small th,
.mtfs-table--text-small td {
	font-size: var(--mtfs-size-body-2);
	line-height: var(--mtfs-line-height-answer);
}

/* Held to the container ----------------------------------------------------
   The one table the paragraph above does not describe: the materials
   comparison is six columns of prose that the frame draws at the container's
   own 1280. Six headings kept on one line each is what made it 1582 wide
   instead, which pushed the last column off the end of the scroller — so here
   a heading wraps, and the browser is left to share what it saves between the
   columns that carry the most prose, which is what the frame does too.

   The cells then read from the top of their row rather than floating in the
   middle of a twelve-line neighbour, and a long word breaks instead of
   widening its column. Both belong to this table only: without the class
   nothing above changes. */
.mtfs-table--contain thead th {
	white-space: normal;

	/* No column narrower than a two-line heading. Left to itself the browser
	   hands a column of short grade codes one word's width and stacks its
	   heading four deep; with a floor under every column the slack still goes
	   where the prose is, which is how the frame arrives at its
	   200 / 280 / 202 / 202 / 202 / 193. */
	min-width: var(--mtfs-table-col-min);
}

.mtfs-table--contain th,
.mtfs-table--contain td {
	overflow-wrap: break-word;
	vertical-align: top;
}

/* The line naming a table sits closer to it than a section heading would, and
   carries no space above it even where the table continues the band above —
   the picture or table it follows has already left the gap. */
.mtfs-table-section .mtfs-section__list-heading {
	margin-bottom: var(--mtfs-space-5);
}

.mtfs-table-section.mtfs-section > .container > .mtfs-section__list-heading:first-child {
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   Pills
   --------------------------------------------------------------------------
   A wrapping row of outlined chips, each opened by a small orange tick. Used
   wherever the resources frames list items of two or three words.
   -------------------------------------------------------------------------- */

.mtfs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mtfs-space-4);
	margin: 0;
}

/* Measured at 42 tall: reading-size text on control leading, 8 above and
   below it, 16 either side, and the tick 8 clear of the label. */
.mtfs-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--mtfs-space-2);
	padding: var(--mtfs-chip-y) var(--mtfs-space-4);
	border: var(--mtfs-hairline) solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-white);
	line-height: var(--mtfs-line-height-control);
	color: var(--mtfs-color-body);
}

.mtfs-chip .mtfs-icon {
	flex: none;
	color: var(--mtfs-color-accent);
}

/* Inside a card the pills follow a rule and the line naming them. */
.mtfs-card__scenarios {
	margin-top: var(--mtfs-space-5);
	padding-top: var(--mtfs-space-5);
	border-top: var(--mtfs-hairline) solid var(--mtfs-color-border);
}

/* Packed tighter inside a card than they are running across a band. */
.mtfs-card__scenarios .mtfs-chips {
	gap: var(--mtfs-space-2);
}

.mtfs-card__scenarios-title {
	margin-bottom: var(--mtfs-space-4);
	color: var(--mtfs-color-heading);
	font-weight: 500;
}


/* --------------------------------------------------------------------------
   Section: product gallery
   --------------------------------------------------------------------------
   A column of thumbnails beside the picture they choose. Measured off the
   product frame: 96px thumbnails, 16 between them, the stage taking the rest
   of the half.
   -------------------------------------------------------------------------- */

/* The frame splits this band the same way as every other pair of columns —
   two 610px halves with 60 between them — not on the 24 a card grid uses. */
@media (min-width: 992px) {

	.mtfs-gallery > .container,
	.mtfs-gallery > .container > .row {
		--bs-gutter-x: var(--mtfs-gutter-wide);
	}
}

.mtfs-gallery__viewer {
	display: flex;
	gap: var(--mtfs-thumb-gap);
	align-items: stretch;
}

/* The strip is as tall as the picture beside it and divides that height
   between however many thumbnails there are, so adding a fifth shortens them
   rather than making the band taller. */
.mtfs-gallery__thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--mtfs-space-2);
	width: var(--mtfs-thumb-w);
	margin: 0;
}

.mtfs-gallery__thumbs > li {
	flex: 1 1 0;
	min-height: 0;
}

.mtfs-gallery__thumbs > li,
.mtfs-gallery__thumb,
.mtfs-gallery__thumb img {
	height: 100%;
}

.mtfs-gallery__thumb {
	display: block;
	overflow: hidden;
	/*
	 * Every thumbnail is outlined, not just the chosen one: the frame draws the
	 * unchosen ones on the page's own hairline so the strip reads as a set of
	 * tiles, and rings the chosen one in the accent orange. Same width on all
	 * of them, so picking a different picture does not shift the strip.
	 */
	border: var(--mtfs-thumb-border) solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius-sm);
	transition: border-color var(--mtfs-transition);
}

.mtfs-gallery__thumb.is-current,
.mtfs-gallery__thumb:hover,
.mtfs-gallery__thumb:focus-visible {
	border-color: var(--mtfs-color-accent);
}

.mtfs-gallery__thumb img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.mtfs-gallery__stage {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.mtfs-gallery__stage img {
	display: block;
	width: 100%;
	aspect-ratio: var(--mtfs-stage-ratio);
	border-radius: var(--mtfs-radius);
	object-fit: cover;
}

.mtfs-gallery__actions {
	margin-top: var(--mtfs-heading-space-tight);
}

/* The copy sits level with the foot of the picture, as the frame draws it. */
@media (min-width: 992px) {

	.mtfs-gallery__body {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.mtfs-gallery__actions {
		margin-top: auto;
	}
}


/* A tick list set inside a panel — the notes closing the materials page. Its
   marks are the accent colour rather than the blue the ticks use, and the two
   columns are spaced like every other pair on that page. */
.mtfs-checklist--panel .mtfs-checklist__list {
	column-gap: var(--mtfs-gutter-wide);
	margin-block: 0;
	padding: var(--mtfs-inset-pad);
	border: var(--mtfs-hairline) solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
}

.mtfs-checklist--panel .mtfs-checklist__item {
	padding-block: 0;
	margin-bottom: var(--mtfs-para-space);
}

.mtfs-checklist--panel .mtfs-checklist__item .mtfs-icon {
	color: var(--mtfs-color-accent);
}


/* --------------------------------------------------------------------------
   Gallery lightbox
   --------------------------------------------------------------------------
   Bootstrap's modal with its panel taken away: the picture is the content, so
   the frame is transparent and only the picture, the close button and the two
   arrows are drawn.
   -------------------------------------------------------------------------- */

/* The stage says it can be opened: a magnifier appears over the corner. */
.mtfs-gallery__zoom {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mtfs-radius);
}

.mtfs-gallery__zoom-icon {
	position: absolute;
	right: var(--mtfs-space-4);
	bottom: var(--mtfs-space-4);
	box-sizing: content-box;
	padding: var(--mtfs-space-3);
	border-radius: var(--mtfs-radius-sm);
	background: var(--mtfs-overlay);
	color: var(--mtfs-white);
	opacity: 0;
	transition: opacity var(--mtfs-transition);
}

.mtfs-gallery__zoom:hover .mtfs-gallery__zoom-icon,
.mtfs-gallery__zoom:focus-visible .mtfs-gallery__zoom-icon {
	opacity: 1;
}

/* Touch has no hover to reveal it, so it is always there. */
@media (hover: none) {

	.mtfs-gallery__zoom-icon {
		opacity: 1;
	}
}

/* Nearly opaque: the point of a lightbox is that the page behind it stops
   competing with the picture. Bootstrap appends the backdrop to the body
   rather than inside the modal, so the page has to say which modal is open —
   the search overlay keeps its lighter default. */
body:has(.mtfs-lightbox.show) .modal-backdrop {
	--bs-backdrop-opacity: 0.9;
}

.mtfs-lightbox__frame {
	position: relative;
	border: 0;
	background: transparent;
}

.mtfs-lightbox__img {
	display: block;
	width: 100%;
	max-height: 80vh;
	border-radius: var(--mtfs-radius);
	object-fit: contain;
}

/* Inside the picture's corner rather than above it, where at some window
   heights it would land on the site header. */
.mtfs-lightbox__close {
	position: absolute;
	z-index: 1;
	top: var(--mtfs-space-4);
	right: var(--mtfs-space-4);
	padding: var(--mtfs-space-3);
	border-radius: var(--mtfs-radius-sm);
	background-color: var(--mtfs-white);
	opacity: 1;
}

.mtfs-lightbox__nav {
	position: absolute;
	z-index: 1;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mtfs-lightbox-nav);
	height: var(--mtfs-lightbox-nav);
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: var(--mtfs-radius-pill);
	background: var(--mtfs-white);
	color: var(--mtfs-color-heading);
	transition: background-color var(--mtfs-transition), color var(--mtfs-transition);
}

.mtfs-lightbox__nav:hover,
.mtfs-lightbox__nav:focus-visible {
	background: var(--mtfs-color-primary);
	color: var(--mtfs-white);
}

.mtfs-lightbox__nav--prev {
	left: calc(var(--mtfs-lightbox-nav) / -2);
}

.mtfs-lightbox__nav--next {
	right: calc(var(--mtfs-lightbox-nav) / -2);
}

/* On a phone there is no room outside the picture for the arrows. */
@media (max-width: 767.98px) {

	.mtfs-lightbox__nav--prev {
		left: var(--mtfs-space-3);
	}

	.mtfs-lightbox__nav--next {
		right: var(--mtfs-space-3);
	}
}


/* --------------------------------------------------------------------------
   Section: customer gallery  —  "Meet our customers"
   --------------------------------------------------------------------------
   A wall of photographs on a four-column grid, with two of every ten drawn at
   double size. Measured from the frame at 1920: the grid fills the 1280
   container on the theme's usual 24px gutter, which puts a single tile at 302
   wide and a double one at 628, and every tile is cropped to the same shape.

   Only the two wide tiles are placed by hand — the rest flow into the gaps
   they leave, which is what puts four small pictures beside the first big one
   and four beside the second. Because the wide ones are picked by position
   rather than marked in the markup, the pattern repeats itself every ten
   pictures and a longer gallery is simply more of the same wall.

   The single tiles carry the aspect ratio, so they are what give each grid row
   its height; a double tile has no ratio of its own and stretches across the
   two rows beside it. Every row holds at least one single tile, so every row
   is measured.
   -------------------------------------------------------------------------- */

.mtfs-gallery-wall__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mtfs-gallery-gap);
}

.mtfs-gallery-wall__tile {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mtfs-radius);
	aspect-ratio: var(--mtfs-gallery-tile);
}

/*
 * Only where there are four columns to double across. At two a double tile
 * takes the whole row, which leaves the two rows it spans with no single tile
 * to measure them by — they collapse, and the picture comes out the height of
 * the gutter. Below the four-column step every tile is an ordinary one.
 */
@media (min-width: 992px) {

	.mtfs-gallery-wall__tile:nth-child(10n + 1),
	.mtfs-gallery-wall__tile:nth-child(10n + 8) {
		grid-column: span 2;
		grid-row: span 2;

		/* Height comes from the two rows it spans, not from its own shape. */
		aspect-ratio: auto;
	}
}

/* Cropped to the tile rather than letterboxed: the frame's pictures are all
   different shapes and the wall only reads as a wall if they are not. */
.mtfs-gallery-wall__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Two columns on a tablet, one on a phone. */
@media (max-width: 991.98px) {

	.mtfs-gallery-wall__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {

	.mtfs-gallery-wall__grid {
		grid-template-columns: 1fr;
	}
}


/* --------------------------------------------------------------------------
   Article header
   --------------------------------------------------------------------------
   The blog frame opens an article on its picture, then the title, then the
   date and the reading time on one line, and closes the block on a hairline
   before the copy starts. No band above it — the breadcrumbs run straight
   into the picture.
   -------------------------------------------------------------------------- */

.mtfs-entry__header {
	padding-bottom: var(--mtfs-space-5);
	margin-bottom: var(--mtfs-space-6);
	border-bottom: var(--mtfs-hairline) solid var(--mtfs-color-border);
}

/* Set at heading size rather than the page title's display size: inside the
   column it wraps to two lines, which at 48px would swamp the picture. */
.mtfs-entry__title {
	margin: 0 0 var(--mtfs-space-5);
	font-size: var(--mtfs-size-h2);
	font-weight: var(--mtfs-weight-h2);
	line-height: var(--mtfs-line-height-heading);
	color: var(--mtfs-color-heading);
}

/* The meta row is the card's, so it needs no margin of its own here. */
.mtfs-entry__header .mtfs-bcard__meta {
	margin-bottom: 0;
}

/* The frame runs the picture the full width of the column and crops it — the
   uploads are smaller than that, and left to their natural size they sat at
   half the column with the title stranded beside them. */
.mtfs-entry__media {
	margin-bottom: var(--mtfs-space-6);
	overflow: hidden;
	border-radius: var(--mtfs-radius);
}

.mtfs-entry__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mtfs-ratio-landscape);
	object-fit: cover;
}


/* --------------------------------------------------------------------------
   Section: "Why Contact Us?"
   --------------------------------------------------------------------------
   The band the contact frame closes on: the reasons ticked down the left half,
   and in the right half a tinted card that asks a question and offers a button.
   Its own block, so nothing else on the site reads any of these rules.
   -------------------------------------------------------------------------- */

.mtfs-contact-why__list {
	display: grid;
	gap: var(--mtfs-space-5);
	margin: 0;
}

.mtfs-contact-why__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mtfs-space-3);
	color: var(--mtfs-color-body);
}

/* The tick keeps its size against a wrapping line, and sits on the first one
   rather than centring itself against two. */
.mtfs-contact-why__item svg {
	flex: none;
	margin-top: var(--mtfs-space-1);
	color: var(--mtfs-color-accent);
}

.mtfs-contact-why__card {
	padding: var(--mtfs-inset-pad);
	border: var(--mtfs-hairline) solid var(--mtfs-color-border);
	border-radius: var(--mtfs-radius);
	background: var(--mtfs-color-surface);
}

.mtfs-contact-why__title {
	margin: 0 0 var(--mtfs-space-4);
	font-size: var(--mtfs-size-h3);
	font-weight: var(--mtfs-weight-h3);
	line-height: var(--mtfs-line-height-card);
	color: var(--mtfs-color-heading);
}

.mtfs-contact-why__text {
	margin: 0;
	color: var(--mtfs-color-body);
}

.mtfs-contact-why__actions {
	margin-top: var(--mtfs-space-5);
}

/* Stacked, the card follows the reasons rather than sitting beside them. */
@media (max-width: 991.98px) {

	.mtfs-contact-why__card {
		padding: var(--mtfs-space-5);
	}
}