/* ===========================================================================
 * Pages.
 * The parts a page other than the homepage needs: the page header band, a
 * readable text column, a plain card grid and a two-column split. Everything
 * else on a new page reuses the homepage sections, so a page built from the
 * patterns in patterns/ matches the site without new CSS.
 *
 * Loaded after design-v2.css on the homepage and on any page using the
 * "Mechatronics page" template, and inside the editor.
 * ======================================================================== */

/* --- Page header band. ---------------------------------------------------- */

.mc-home .mc-pagehero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 92px 0 84px;
	background: var(--mc-navy);
	color: #fff;
}

.mc-home .mc-pagehero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.mc-home .mc-pagehero .mc-eyebrow {
	color: var(--mc-rust-bright);
	margin-bottom: 18px;
}

.mc-home .mc-pagehero h1 {
	max-width: 15ch;
	font-family: var(--mc-display);
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: #fff;
}

.mc-home .mc-pagehero h1 em {
	font-style: normal;
	color: var(--mc-rust-bright);
}

.mc-home .mc-pagehero-lead {
	max-width: 58ch;
	margin-top: 22px;
	color: #cdd9e0;
	font-size: var(--mc-text-lg);
	line-height: 1.8;
}

.mc-home .mc-pagehero .mc-actions {
	margin-top: 30px;
}

/* --- A readable column of text. ------------------------------------------- */

.mc-home .mc-prose {
	max-width: 74ch;
}

.mc-home .mc-prose > * + * {
	margin-top: 20px;
}

.mc-home .mc-prose p,
.mc-home .mc-prose li {
	color: var(--mc-muted);
	font-size: var(--mc-text-base);
	line-height: 1.85;
}

.mc-home .mc-prose h2 {
	margin-top: 46px;
}

.mc-home .mc-prose h3 {
	margin-top: 34px;
	font-size: var(--mc-text-lg);
}

.mc-home .mc-prose ul,
.mc-home .mc-prose ol {
	padding-left: 22px;
}

.mc-home .mc-prose li + li {
	margin-top: 10px;
}

.mc-home .mc-prose li::marker {
	color: var(--mc-rust);
}

/* --- A plain card grid, three or four across. ----------------------------- */

.mc-home .mc-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.mc-home .mc-card-grid.mc-card-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.mc-home .mc-card-grid.mc-card-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.mc-home .mc-card {
	display: flex;
	flex-direction: column;
	padding: 30px 28px 28px;
	border: 1px solid var(--mc-line);
	border-radius: var(--v2-radius, 16px);
	background: #fff;
	box-shadow: var(--v2-shadow);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.mc-home .mc-card:hover {
	transform: translateY(-6px);
	border-color: rgb(0 120 168 / 26%);
	box-shadow: var(--v2-shadow-lift);
}

.mc-home .mc-card > h3 {
	font-size: var(--mc-text-lg);
	line-height: 1.3;
}

.mc-home .mc-card > p {
	margin-top: 12px;
	color: var(--mc-muted);
	font-size: var(--mc-text-sm);
	line-height: 1.8;
}

.mc-home .mc-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 20px;
}

/* The card title carries the icon, the same picker as everywhere else. */
.mc-home .mc-card > .mc-card-title.mc-ico {
	position: relative;
}

.mc-home .mc-card > .mc-card-title.mc-ico::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--v2-tint, rgb(0 120 168 / 8%));
}

.mc-home .mc-card > .mc-card-title.mc-ico::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	width: 26px;
	height: 26px;
	background-color: var(--mc-rust, #1677a8);
	-webkit-mask: var(--mc-ico-src) center / contain no-repeat;
	mask: var(--mc-ico-src) center / contain no-repeat;
}

.mc-home .mc-card-title.mc-ico[class*="mc-ico-tone-"]::after {
	background-color: var(--mc-ico-tone) !important;
}

/* --- Two columns: words beside a picture. --------------------------------- */

.mc-home .mc-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6vw;
	align-items: center;
}

.mc-home .mc-split.mc-split-flip > :first-child {
	order: 2;
}

.mc-home .mc-split .wp-block-image img {
	width: 100%;
	border-radius: var(--v2-radius, 16px);
	box-shadow: var(--v2-shadow);
}

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

@media (max-width: 1050px) {
	.mc-home .mc-card-grid,
	.mc-home .mc-card-grid.mc-card-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px){
	.mc-home .mc-pagehero {
		padding: 60px 0 54px;
	}

	.mc-home .mc-card-grid,
	.mc-home .mc-card-grid.mc-card-grid-4,
	.mc-home .mc-card-grid.mc-card-grid-2,
	.mc-home .mc-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mc-home .mc-split.mc-split-flip > :first-child {
		order: 0;
	}

	.mc-home .mc-card {
		padding: 24px 22px;
	}
}

/* About page sections: airy industry cards and a structured presence band. */
.mc-home .mc-about-industries{background:#fff}
.mc-home .mc-about-industries .mc-card-grid{margin-top:8px}
.mc-home .mc-global-presence{background:#f6f9fb;border-top:1px solid var(--mc-line);border-bottom:1px solid var(--mc-line)}
.mc-home .mc-presence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--mc-line);border-bottom:1px solid var(--mc-line)}
.mc-home .mc-presence-item{min-height:178px;padding:27px 24px 24px;border-right:1px solid var(--mc-line);background:#fff;transition:background .25s ease,transform .25s ease}
.mc-home .mc-presence-item:last-child{border-right:0}
.mc-home .mc-presence-item:hover{background:#eef7fb;transform:translateY(-4px)}
.mc-home .mc-presence-item .mc-eyebrow{margin:0 0 22px;color:var(--mc-brand)}
.mc-home .mc-presence-item h3{font-size:20px;margin:0 0 10px;color:var(--mc-ink)}
.mc-home .mc-presence-item>p:last-child{font-size:13px;line-height:1.65;color:var(--mc-muted);margin:0}
@media(max-width:900px){.mc-home .mc-presence-grid{grid-template-columns:repeat(2,1fr)}.mc-home .mc-presence-item:nth-child(2){border-right:0}.mc-home .mc-presence-item:nth-child(-n+2){border-bottom:1px solid var(--mc-line)}}
@media(max-width:700px){.mc-home .mc-presence-grid{grid-template-columns:1fr}.mc-home .mc-presence-item{border-right:0;border-bottom:1px solid var(--mc-line)}.mc-home .mc-presence-item:last-child{border-bottom:0}}

/* Polished CTA shape for inner-page hero buttons. */
.mc-home .mc-pagehero .mc-button > .wp-block-button__link,
.mc-home .mc-pagehero a.mc-button{min-height:54px;box-shadow:0 7px 16px rgba(7,64,91,.18)}/* Polished CTA shape for inner-page hero buttons. */
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:not([style*="radius"]),.mc-home .mc-pagehero a.mc-button:not([style*="radius"]){border-radius:10px !important}/* Polished CTA shape for inner-page hero buttons. */
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:not([style*="padding"]),.mc-home .mc-pagehero a.mc-button:not([style*="padding"]){padding:16px 24px !important}
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:hover,
.mc-home .mc-pagehero a.mc-button:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(7,64,91,.26)}

/* Keep the CTA fill flat: remove the animated background sweep. */
.mc-home .mc-pagehero .mc-button > .wp-block-button__link::before,
.mc-home .mc-pagehero a.mc-button::before{display:none !important}
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:not(.has-background),.mc-home .mc-pagehero a.mc-button:not(.has-background){background-image:none !important}

/* CTA stays clean without the offset square shadow. */
.mc-home .mc-pagehero .mc-button > .wp-block-button__link,
.mc-home .mc-pagehero a.mc-button{box-shadow:none !important}
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:hover,
.mc-home .mc-pagehero a.mc-button:hover{box-shadow:0 8px 18px rgba(13,93,120,.18) !important}

/* Full About directory and contact details. */
.mc-home .mc-industry-card{min-height:245px;align-items:flex-start}
.mc-home .mc-industry-image{width:56px;height:56px;margin:0 0 18px;padding:10px;border-radius:12px;background:#eef7fb;display:grid;place-items:center}
.mc-home .mc-industry-image img{width:100%;height:100%;object-fit:contain}
.mc-home .mc-industry-card h3{font-size:17px;margin:0;color:var(--mc-ink)}
.mc-home .mc-industry-card p{font-size:12px;margin-top:8px}
.mc-home .mc-about-contact{background:#fff;border-top:1px solid var(--mc-line)}
.mc-home .mc-about-contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.mc-home .mc-about-contact-copy h2,.mc-home .mc-about-contact-grid h2{margin-top:14px}
.mc-home .mc-about-contact-grid>div>p:last-child{color:var(--mc-muted);font-size:15px;line-height:1.9;margin-top:20px}
.mc-home .mc-about-contact-card{padding:34px;background:#f6f9fb;border:1px solid var(--mc-line);border-top:3px solid var(--mc-brand);border-radius:12px}
.mc-home .mc-about-contact-card h3{font-size:22px;line-height:1.55;margin:12px 0 16px;color:var(--mc-ink)}
.mc-home .mc-about-contact-card p:last-child{font-size:14px;line-height:1.9;color:var(--mc-muted)}
@media(max-width:700px){.mc-home .mc-about-contact-grid{grid-template-columns:1fr;gap:30px}.mc-home .mc-industry-card{min-height:0}}

/* About page visual polish. */
.mc-home .mc-pagehero{min-height:430px;display:flex;align-items:center}
.mc-home .mc-pagehero-lead{max-width:690px;font-size:17px;line-height:1.75}
.mc-home .mc-split-copy>p{font-size:16px;line-height:1.85}
.mc-home .mc-split-copy h2{max-width:16ch}
.mc-home .mc-card-grid .mc-card{min-height:290px}
.mc-home .mc-about-card-image{width:100%;height:118px;margin:0 0 18px;padding:14px;border-radius:12px;background:#f2f8fb;display:grid;place-items:center;overflow:hidden}
.mc-home .mc-about-card-image img{width:100%;height:100%;object-fit:contain}
.mc-home .mc-about-card-image + .mc-card-title::before,
.mc-home .mc-about-card-image + .mc-card-title::after{display:none}
.mc-home .mc-card:has(.mc-about-card-image){padding-top:20px}
.mc-home .mc-industry-directory{background:#f8fafb;border-top:1px solid var(--mc-line);border-bottom:1px solid var(--mc-line)}
.mc-home .mc-industry-directory .mc-card-grid{gap:16px}
.mc-home .mc-industry-directory .mc-card{min-height:190px;padding:20px}
.mc-home .mc-industry-directory .mc-industry-image{margin-bottom:14px}
.mc-home .mc-industry-directory .mc-card h3{font-size:16px}
.mc-home .mc-industry-directory .mc-card p{font-size:12px;line-height:1.6}
.mc-home .mc-global-presence .mc-section-heading,.mc-home .mc-industry-directory .mc-section-heading{margin-bottom:42px}
.mc-home .mc-global-presence .mc-presence-image{height:92px;margin:-27px -24px 20px;overflow:hidden;background:#eef5f8}
.mc-home .mc-global-presence .mc-presence-image img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.mc-home .mc-pagehero{min-height:0}.mc-home .mc-pagehero-lead{font-size:15px}.mc-home .mc-card-grid .mc-card{min-height:0}.mc-home .mc-about-card-image{height:110px}}

.mc-home .mc-about-belief:not([style*="margin"]){margin-top:24px !important}.mc-home .mc-about-belief:not(.has-text-color){color:var(--mc-ink) !important}.mc-home .mc-about-belief:not([class*="-font-size"]):not([style*="font-size"]){font-size:16px !important}.mc-home .mc-about-belief:not([style*="line-height"]){line-height:1.6 !important}
.mc-home .mc-about-belief strong{font-weight:700}

/* About CTA: clean solid button with no offset strip. */
.mc-home .mc-pagehero .mc-button,
.mc-home .mc-pagehero .mc-button > .wp-block-button__link,
.mc-home .mc-pagehero a.mc-button{box-shadow:none !important;transform:none}/* About CTA: clean solid button with no offset strip. */
.mc-home .mc-pagehero .mc-button:not([style*="radius"]),.mc-home .mc-pagehero .mc-button > .wp-block-button__link:not([style*="radius"]),.mc-home .mc-pagehero a.mc-button:not([style*="radius"]){border-radius:9px !important}
.mc-home .mc-pagehero .mc-button > .wp-block-button__link:hover,
.mc-home .mc-pagehero a.mc-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(13,93,120,.2) !important}

/* Global presence map and location directory. */
.mc-home .mc-global-presence{background:#f5f9fb;position:relative;overflow:hidden}
.mc-home .mc-global-presence::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(22,119,168,.05),transparent 42%,rgba(11,36,48,.03))}
.mc-home .mc-global-presence>.mc-container{position:relative;z-index:1}
.mc-home .mc-presence-map{margin:0 auto 42px;max-width:1080px;height:210px;padding:18px 28px;border:1px solid var(--mc-line);border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(11,36,48,.07);overflow:hidden}
.mc-home .mc-presence-map img{width:100%;height:100%;object-fit:contain;opacity:.95}
.mc-home .mc-global-presence .mc-presence-grid{background:#fff;border:1px solid var(--mc-line);border-radius:16px;overflow:hidden;box-shadow:0 12px 28px rgba(11,36,48,.06)}
.mc-home .mc-global-presence .mc-presence-item{min-height:220px;padding:24px;border-right:1px solid var(--mc-line);border-bottom:1px solid var(--mc-line)}
.mc-home .mc-global-presence .mc-presence-item:nth-child(4n){border-right:0}
.mc-home .mc-global-presence .mc-presence-item:nth-last-child(-n+4){border-bottom:0}
@media(max-width:900px){.mc-home .mc-presence-map{height:160px}.mc-home .mc-global-presence .mc-presence-item:nth-child(2n){border-right:0}.mc-home .mc-global-presence .mc-presence-item:nth-last-child(-n+4){border-bottom:1px solid var(--mc-line)}.mc-home .mc-global-presence .mc-presence-item:nth-last-child(-n+2){border-bottom:0}}

/* --- Product cards built from blocks. ------------------------------------
 * A converted catalogue page uses the ordinary card grid, with the picture as
 * an image block. These rules give that picture the same contained, padded box
 * the migrated markup had, so a converted page matches the rest of the
 * catalogue while staying editable in the sidebar. */

.mc-home .mc-card > .mc-card-shot {
	margin: -30px -28px 0;
	padding: 22px;
	border-bottom: 1px solid #edf1f3;
	background: #fff;
}

.mc-home .mc-card > .mc-card-shot img {
	width: 100%;
	height: 190px;
	margin: 0 auto;
	object-fit: contain;
}

.mc-home .mc-card > .mc-card-shot + .mc-card-title {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.5;
}

/* The picture already carries the icon slot, so no disc is drawn here. */
.mc-home .mc-card > .mc-card-shot + .mc-card-title.mc-ico::before,
.mc-home .mc-card > .mc-card-shot + .mc-card-title.mc-ico::after {
	content: none;
}

@media (max-width: 700px) {
	.mc-home .mc-card > .mc-card-shot {
		margin: -24px -22px 0;
	}
}

/* --- Catalogue pictures that stand on their own. --------------------------
 * The block stylesheet stretches every image block to the column width, which
 * blows up the small brand logos the catalogue pages open with: a 250px logo
 * was being drawn at 945px and looked blurred. A picture outside a card now
 * keeps its own size. Card pictures are sized by the rule above, which is more
 * specific, so they are unaffected. */

.mc-home .mc-catalogue-content > .wp-block-image img,
.mc-home .mc-catalogue-content > .wp-block-group > .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* --- Brand banners in the page header. ------------------------------------
 * The banner artwork is much wider than the 16:9 box the header reserves, so
 * cropping it to fill cut the machinery off the right-hand side. The box now
 * takes the shape of the picture and shows all of it, as the old site does. */

.mc-home .mc-catalogue-hero-media-carousel,
.mc-home .mc-catalogue-hero-media-wide,
.mc-home .mc-catalogue-hero-media-effebi {
	aspect-ratio: auto;
	min-height: 0;
}

.mc-home .mc-catalogue-hero-media-carousel > img,
.mc-home .mc-catalogue-hero-media-wide > img,
.mc-home .mc-catalogue-hero-media-effebi > img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --- The corner mark on a project photo. ---------------------------------
 * It used to be an SVG pasted into a Custom HTML block on each card, which the
 * client cannot edit and which the editor wraps in its own box. It is pure
 * decoration, so the photo draws it instead and every card gets it for free. */

/* The disc is drawn on the picture itself. The photo's own ::after already
 * carries the gradient wash the cards have always had; borrowing it here put a
 * grey ball in the corner of every project card. */
.mc-home .mc-project-photo .mc-project-shot::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 18px;
	left: auto;
	bottom: auto;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 94%);
	background-image: none;
	box-shadow: 0 6px 18px rgb(11 36 48 / 16%);
	transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1), background-color 0.3s ease;
}

.mc-home .mc-project-photo::before {
	content: "";
	position: absolute;
	top: 29px;
	right: 29px;
	z-index: 4;
	width: 18px;
	height: 18px;
	background-color: var(--mc-ink, #0b2430);
	-webkit-mask: var(--ico-arrow-up-right) center / contain no-repeat;
	mask: var(--ico-arrow-up-right) center / contain no-repeat;
	transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1), background-color 0.3s ease;
}

.mc-home .mc-project:hover .mc-project-photo .mc-project-shot::after {
	background-color: #0078a8;
	transform: rotate(45deg);
}

.mc-home .mc-project:hover .mc-project-photo::before {
	background-color: #fff;
	transform: rotate(45deg);
}

@media (max-width: 700px) {
	.mc-home .mc-project-photo .mc-project-shot::after {
		width: 34px;
		height: 34px;
	}

	.mc-home .mc-project-photo::before {
		top: 26px;
		right: 26px;
		width: 16px;
		height: 16px;
	}
}

/* --- The group's UAE projects. --------------------------------------------
 * Their own section below the India projects, shown as a carousel because
 * there are 28 of them. The artwork is a wide banner that often carries its
 * own lettering, so each picture is shown whole rather than cropped to fill,
 * and the title panel sits below it instead of overlapping it.
 *
 * Without JavaScript the cards stay a plain grid, which still reads correctly.
 * carousel-projects.js adds the track and the arrows. */

.mc-home .mc-ae-projects {
	padding-top: 0;
}

.mc-home .mc-ae-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.mc-home .mc-ae-project .mc-project-photo {
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--v2-radius, 16px) var(--v2-radius, 16px) 0 0;
	background: #fff;
}

/* The project photos elsewhere are cropped to fill and zoomed slightly; these
 * banners must be shown whole, so this matches the specificity of those rules
 * and undoes both. */
.mc-home .mc-ae-project .mc-project-photo .wp-block-image img,
.mc-home .mc-ae-project .mc-project-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	transform: none;
}

.mc-home .mc-ae-project:hover .mc-project-photo .wp-block-image img {
	transform: none;
}

.mc-home .mc-ae-project .mc-project-body {
	margin: 0;
	padding: 16px 18px 18px;
	border-top: 1px solid var(--mc-line);
	border-radius: 0 0 var(--v2-radius, 16px) var(--v2-radius, 16px);
}

.mc-home .mc-ae-project .mc-project-body h3 {
	font-size: 16px;
	line-height: 1.35;
}

.mc-home .mc-ae-projects .mc-ae-project > .mc-project-label {
	top: 14px;
	left: 14px;
	padding: 6px 12px 6px 6px;
	font-size: 10px;
}

.mc-home .mc-ae-projects .mc-ae-project > .mc-project-label.mc-ico::after {
	left: 6px;
	top: 50%;
	width: 18px;
	height: 18px;
	translate: 0 -50%;
	-webkit-mask-size: 55%;
	mask-size: 55%;
}

.mc-home .mc-ae-projects .mc-ae-project > .mc-project-label.mc-ico::before {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

/* --- Carousel, once the script has set it up. ----------------------------
 * The class names deliberately avoid mc-carousel-*: those belong to the hero
 * slider, whose script binds to them, and sharing them made each set of arrows
 * drive the other section. */

.mc-home .mc-ae-grid.mc-projects-track {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.mc-home .mc-ae-grid.mc-projects-track::-webkit-scrollbar {
	display: none;
}

.mc-home .mc-ae-grid.mc-projects-track > .mc-ae-project {
	flex: 0 0 calc((100% - 66px) / 4);
}

.mc-home .mc-ae-projects .mc-section-heading {
	position: relative;
	align-items: center;
}

/* The arrows sit at the end of the heading row, as on the site this came from. */
.mc-home .mc-projects-nav {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 10px;
}

/* A plain left and right arrow for the controls, rather than the diagonal mark
 * the cards use. */
.mc-home .mc-projects-nav {
	--ico-nav-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}

.mc-home .mc-projects-nav button {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	/* The theme gives buttons generous padding, which left almost no content box
	 * in a 44px circle and pushed the arrow off centre. */
	padding: 0;
	min-height: 0;
	line-height: 1;
	border: 1px solid var(--mc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mc-ink);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.mc-home .mc-projects-nav button:hover:not(:disabled) {
	background: var(--mc-gradient);
	border-color: transparent;
	color: #fff;
}

.mc-home .mc-projects-nav button:disabled {
	opacity: 0.35;
	cursor: default;
}

.mc-home .mc-projects-nav button::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ico-nav-arrow) center / contain no-repeat;
	mask: var(--ico-nav-arrow) center / contain no-repeat;
}

.mc-home .mc-projects-nav .mc-projects-prev::before {
	transform: scaleX(-1);
}

@media (max-width: 1150px) {
	.mc-home .mc-ae-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mc-home .mc-ae-grid.mc-projects-track > .mc-ae-project {
		flex-basis: calc((100% - 44px) / 3);
	}
}

@media (max-width: 900px) {
	.mc-home .mc-ae-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mc-home .mc-ae-grid.mc-projects-track > .mc-ae-project {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media (max-width: 600px) {
	.mc-home .mc-ae-grid {
		grid-template-columns: 1fr;
	}

	.mc-home .mc-ae-grid.mc-projects-track > .mc-ae-project {
		flex-basis: 100%;
	}
}

@media (max-width: 700px) {
	.mc-home .mc-projects-nav {
		position: static;
		margin-top: 18px;
	}
}

/* ---------------------------------------------------------------------
 * Certifications, Clients, Gallery, Contact and Career.
 * The legacy inner pages, brought in from the old site in September 2026.
 * --------------------------------------------------------------------- */
/* ===========================================================================
 * Pages.
 * The parts a page other than the homepage needs: the page header band, a
 * readable text column, a plain card grid and a two-column split. Everything
 * else on a new page reuses the homepage sections, so a page built from the
 * patterns in patterns/ matches the site without new CSS.
 *
 * Loaded after design-v2.css on the homepage and on any page using the
 * "Mechatronics page" template, and inside the editor.
 * ======================================================================== */

/* --- Page header band. ---------------------------------------------------- */

/* Imported company pages: original media, ordinary editable image blocks. */
.mc-home.mc-inner-page .mc-legacy-hero{padding:54px 0 48px;min-height:0}
.mc-home .mc-inner-breadcrumb{margin:0 0 20px;font-size:13px;color:#c4d9e4}
.mc-home .mc-inner-breadcrumb a{color:inherit}
.mc-home .mc-contact-page-hero{min-height:360px;padding-top:64px;padding-bottom:58px}
.mc-home .mc-contact-page-hero .mc-contact-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:28px}
.mc-home .mc-contact-section{padding:64px 0;background:#fff}
.mc-home .mc-contact-overview-section,.mc-home .mc-contact-form-section{background:#f4f7f9}
.mc-home .mc-contact-section-heading{margin-bottom:28px}
.mc-home .mc-contact-section-heading .mc-eyebrow,.mc-home .mc-contact-location-heading .mc-eyebrow{margin-bottom:12px;color:#1677a8}
.mc-home .mc-contact-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mc-home .mc-contact-department-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mc-home .mc-contact-region-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mc-home .mc-contact-card{min-width:0;padding:24px;border:1px solid #dce6eb;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgb(13 37 55 / 4%)}
.mc-home .mc-contact-card h3{margin:0 0 13px;color:#163746;font-size:18px;line-height:1.3}
.mc-home .mc-contact-card-details{margin:0;color:#526975;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.mc-home .mc-contact-card-details a{color:#1677a8;text-decoration:none}
.mc-home .mc-contact-card-details a:hover{text-decoration:underline}
.mc-home .mc-contact-form-layout{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:40px;align-items:start}
.mc-home .mc-contact-form-copy{padding-top:20px}
.mc-home .mc-contact-form-copy .mc-eyebrow{margin-bottom:12px;color:#1677a8}
.mc-home .mc-contact-form-copy h2,.mc-home .mc-contact-location-heading h2{margin-bottom:18px;color:#163746}
.mc-home .mc-contact-form-copy>p:not(.mc-eyebrow){color:#526975;font-size:15px;line-height:1.75}
.mc-home .mc-contact-form-frame{min-width:0;overflow:hidden;border:1px solid #dce6eb;border-radius:14px;background:#fff;box-shadow:0 12px 32px rgb(13 37 55 / 7%)}
.mc-home .mc-contact-form-embed{display:block;width:100%;height:1200px;border:0;background:#fff}
.mc-home .mc-contact-location-heading{margin-bottom:24px}
.mc-home .mc-contact-location-address{color:#526975;line-height:1.8}
.mc-home .mc-contact-map-frame{overflow:hidden;border:1px solid #dce6eb;border-radius:14px;background:#eaf0f2}
.mc-home .mc-contact-map-embed{display:block;width:100%;height:450px;border:0}
@media(max-width:1000px){.mc-home .mc-contact-department-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mc-home .mc-contact-region-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mc-home .mc-contact-form-layout{grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:26px}}
.mc-home .mc-legacy-section{padding:48px 0;background:#f6f8f9}
.mc-home .mc-legacy-section+.mc-legacy-section{padding-top:0}
.mc-home .mc-legacy-section h2{margin:0 0 26px;font-size:30px;color:#153545}
.mc-home .mc-legacy-grid{display:grid;gap:22px;align-items:start}
.mc-home .mc-certificates-grid,.mc-home .mc-clients-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mc-home .mc-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mc-home .mc-legacy-grid>.wp-block-image{margin:0;min-width:0;width:100%;background:#fff;border:1px solid #dce6eb;border-radius:10px;overflow:hidden;box-shadow:0 3px 14px rgb(14 43 57 / 4%)}
.mc-home .mc-legacy-grid .wp-block-image img{display:block;width:100%;object-fit:contain;background:#fff}
.mc-home .mc-certificate-image img{aspect-ratio:3/4;padding:12px;box-sizing:border-box}
.mc-home .mc-client-image img{aspect-ratio:2.4/1;padding:14px;box-sizing:border-box}
.mc-home .mc-gallery-image img{aspect-ratio:4/3}
.mc-home .mc-gallery-image figcaption{margin:0;padding:18px 16px;font-size:16px;font-weight:600;color:#244755;text-align:center}
.mc-home .mc-legacy-grid .wp-block-image a{display:block}
@media(max-width:1000px){.mc-home .mc-certificates-grid,.mc-home .mc-clients-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mc-home .mc-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Legacy inner page banners are replaceable Gutenberg image blocks layered
 * behind the title, using the same artwork as the original site. */
.mc-home .mc-pagehero-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}
.mc-home .mc-pagehero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.mc-home .mc-pagehero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgb(7 25 38 / 94%) 0%, rgb(7 25 38 / 82%) 45%, rgb(7 25 38 / 42%) 100%);
	pointer-events: none;
}
.mc-home .mc-pagehero > .mc-container {
	position: relative;
	z-index: 2;
}
/* Contact page: clearer paths to the right person and the enquiry form. */
.mc-home .mc-contact-page-hero{min-height:425px;padding-top:70px;padding-bottom:70px}
.mc-home .mc-contact-page-hero h1{max-width:18ch}
.mc-home .mc-contact-overview-section{background:linear-gradient(180deg,#eff6f9,#f8fbfc);padding-top:74px;padding-bottom:78px}
.mc-home .mc-contact-section-heading{margin-bottom:34px}
.mc-home .mc-contact-section-heading h2{max-width:24ch;letter-spacing:-.035em}
.mc-home .mc-contact-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.mc-home .mc-contact-card:hover{transform:translateY(-4px);border-color:#9ac7d9;box-shadow:0 18px 38px rgb(12 52 76 / 11%)}
.mc-home .mc-contact-overview-grid{gap:20px}
.mc-home .mc-contact-overview-grid>.mc-contact-card{min-height:262px;padding:28px 30px;border-top:3px solid #1688b7;border-radius:16px;box-shadow:0 15px 36px rgb(12 52 76 / 8%),0 3px 8px rgb(12 52 76 / 3%)}
.mc-home .mc-contact-overview-grid>.mc-contact-email-card{border-top-color:#148b9b}
.mc-home .mc-contact-overview-grid>.mc-contact-address-card{border-top-color:#0d5d78}
.mc-home .mc-contact-overview-grid .mc-card-title.mc-ico{position:relative;padding-top:66px;margin-bottom:14px}
.mc-home .mc-contact-overview-grid .mc-card-title.mc-ico::before{content:"";position:absolute;left:0;top:0;width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--mc-ico-tone,#1677a8) 11%,white)}
.mc-home .mc-contact-overview-grid .mc-card-title.mc-ico::after{content:"";position:absolute;left:12px;top:12px;width:26px;height:26px;background:var(--mc-ico-tone,#1677a8);-webkit-mask:var(--mc-ico-src) center / contain no-repeat;mask:var(--mc-ico-src) center / contain no-repeat}
.mc-home .mc-contact-overview-grid .mc-contact-card-details{font-size:15px;line-height:1.85}
.mc-home .mc-contact-overview-grid .mc-contact-card-details a{display:inline-block;padding:2px 0}
.mc-home .mc-contact-departments-section{padding-top:82px;padding-bottom:82px}
.mc-home .mc-contact-department-grid{gap:16px}
.mc-home .mc-contact-department-grid>.mc-contact-card{min-height:142px;padding:24px;border-top:2px solid #c6e2ee;border-radius:14px;box-shadow:0 9px 26px rgb(12 52 76 / 5%)}
.mc-home .mc-contact-department-grid h3{font-size:18px}
.mc-home .mc-contact-department-grid .mc-contact-card-details a{display:inline-block;padding:2px 0}
.mc-home .mc-contact-form-section{padding-top:82px;padding-bottom:82px;background:#f3f8fa}
.mc-home .mc-contact-form-layout{grid-template-columns:minmax(260px,.76fr) minmax(0,1.24fr);gap:26px;align-items:stretch}
.mc-home .mc-contact-form-copy{min-width:0;padding:40px 38px;border:1px solid #23516a;border-radius:18px;background:radial-gradient(circle at 100% 0%,rgb(54 156 196 / 32%),transparent 48%),linear-gradient(145deg,#0d2c3d,#164359);box-shadow:0 16px 38px rgb(10 45 64 / 13%)}
.mc-home .mc-contact-form-copy .mc-eyebrow{color:#8ad4ed}
.mc-home .mc-contact-form-copy h2:not(.has-text-color){color:#fff;font-size:clamp(28px,2.5vw,38px);line-height:1.15}
.mc-home .mc-contact-form-copy>p:not(.mc-eyebrow):not(.has-text-color){color:#d7e5ec;font-size:16px;line-height:1.85}
.mc-home .mc-contact-form-copy .mc-contact-card-details{margin-top:26px;padding-top:20px;border-top:1px solid rgb(255 255 255 / 20%)}
.mc-home .mc-contact-form-copy .mc-contact-card-details a{display:block;width:fit-content;max-width:100%;padding:6px 0;color:#b5e7fa;font-weight:600;overflow-wrap:anywhere;text-decoration:none}
.mc-home .mc-contact-form-copy .mc-contact-card-details a:hover{text-decoration:underline;color:#fff}
.mc-home .mc-contact-form-frame{border-radius:18px;box-shadow:0 16px 38px rgb(12 52 76 / 10%)}
.mc-home .mc-contact-regions-section{padding-top:82px;padding-bottom:86px;background:#eef5f8}
.mc-home .mc-contact-region-grid{gap:16px}
.mc-home .mc-contact-region-grid>.mc-contact-card{min-height:144px;padding:22px;border-top:2px solid #c6e2ee;border-radius:14px;box-shadow:0 9px 26px rgb(12 52 76 / 5%)}
.mc-home .mc-contact-region-grid h3{font-size:17px}
.mc-home .mc-contact-region-grid .mc-contact-card-details a{display:inline-block;padding:2px 0}
.mc-home .mc-contact-location-section{padding-top:84px;padding-bottom:84px;background:#fff}
.mc-home .mc-contact-location-section>.mc-container{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);gap:26px;align-items:stretch}
.mc-home .mc-contact-location-heading{min-width:0;margin:0;padding:38px 36px;border:1px solid #d6e6ed;border-radius:18px;background:linear-gradient(145deg,#e9f3f7,#f8fbfc);box-shadow:0 12px 30px rgb(12 52 76 / 6%)}
.mc-home .mc-contact-location-heading h2{font-size:clamp(28px,2.5vw,36px);line-height:1.15}
.mc-home .mc-contact-location-address{font-size:15px;line-height:1.9}
.mc-home .mc-contact-directions-button{margin-top:27px}
.mc-home .mc-contact-directions-button>.wp-block-button__link{display:inline-flex;align-items:center;padding:13px 20px;border-radius:9px;background:#176f9a;color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 9px 19px rgb(18 98 137 / 17%)}
.mc-home .mc-contact-directions-button>.wp-block-button__link:hover{background:#0d5d78;transform:translateY(-2px)}
.mc-home .mc-contact-map-frame{min-height:450px;border-radius:18px;box-shadow:0 12px 30px rgb(12 52 76 / 7%)}
.mc-home .mc-contact-map-embed{height:100%;min-height:450px}
@media(max-width:850px){.mc-home .mc-contact-form-layout,.mc-home .mc-contact-location-section>.mc-container{grid-template-columns:1fr}.mc-home .mc-contact-form-copy{padding:30px}.mc-home .mc-contact-map-frame,.mc-home .mc-contact-map-embed{min-height:380px}}
@media(prefers-reduced-motion:reduce){.mc-home .mc-contact-card{transition:none}.mc-home .mc-contact-card:hover{transform:none}}

/* The company's social profiles, in the footer bottom bar. Ordinary buttons, so
 * the client can edit them; styled as quiet text links rather than filled ones. */
.mc-home .mc-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

.mc-home .mc-footer-social .wp-block-button__link:not(.has-background) {
	background: transparent !important;
}

.mc-home .mc-footer-social .wp-block-button__link:not(.has-text-color) {
	color: #c0cbd2 !important;
}

.mc-home .mc-footer-social .wp-block-button__link:not([style*="padding"]) {
	padding: 0 !important;
}

.mc-home .mc-footer-social .wp-block-button__link:not([style*="font-size"]) {
	font-size: 12px !important;
}

.mc-home .mc-footer-social .wp-block-button__link:not([style*="border"]) {
	border: 0 !important;
}

.mc-home .mc-footer-social .wp-block-button__link:hover:not(.has-text-color) {
	color: #55b7e5 !important;
}

/* The bottom bar's "↑" belongs to Back to top; on a profile link it pointed
 * visitors up the page instead of out to the network. */
.mc-home .mc-footer-social .wp-block-button__link::after {
	content: none;
}

@media (max-width: 700px) {
	.mc-home .mc-footer-social {
		gap: 14px;
	}
}

/* Footer layout. Eleven Explore links in one column stood twice as tall as the
 * columns beside it and left a dead block under them. A long link list now
 * flows into two balanced columns and the rows sit closer, so the four columns
 * end near one line. Keyed on the list's length rather than its position, so
 * the client can add, drop or reorder columns and the three contact links are
 * never split. */
.mc-home .mc-footer .mc-footer-grid {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.12fr);
	gap: 40px;
	align-items: start;
}

.mc-home .mc-footer-column .mc-footer-links:has(> .wp-block-button:nth-child(7)) {
	display: block;
	columns: 2;
	column-gap: 32px;
}

.mc-home .mc-footer-column .mc-footer-links:has(> .wp-block-button:nth-child(7)) > .wp-block-button {
	display: block;
	break-inside: avoid;
}

.mc-home .mc-footer-column .mc-footer-link > .wp-block-button__link:not([style*="margin"]) {
	margin-top: 0;
}

.mc-home .mc-footer-column .mc-footer-link > .wp-block-button__link:not([style*="padding"]) {
	padding: 4px 0 !important;
}

.mc-home .mc-footer-column .mc-footer-link > .wp-block-button__link:not([style*="line-height"]) {
	line-height: 1.55;
}

.mc-home .mc-footer-column h3.wp-block-heading:not([style*="margin"]) {
	margin-bottom: 16px;
}

/* "Back to top" broke over two lines once the social links took the middle. */
.mc-home .mc-footer-top > .wp-block-button__link {
	white-space: nowrap;
}

/* Two by two: brand and Explore, then the ways to reach the company. Below
 * this width four columns cannot hold the tagline and the address lines. */
@media (max-width: 1200px) {
	.mc-home .mc-footer .mc-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

/* One column on a phone. The older layout put the address beside Explore in
 * half the width, where it broke a word per line and ran off the screen. */
@media (max-width: 700px) {
	.mc-home .mc-footer .mc-footer-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.mc-home .mc-footer .mc-footer-grid > div {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* Logo size. The client asked for a larger logo in the header (review, 25 Sep
 * 2026). It grows where the header has room: desktop and phones. Between 700
 * and 1150px the nine navigation links need every pixel, so it stays as it was.
 * The header still shrinks it a little once the page scrolls. `.mc-header` in the selector
 * outranks catalogue.css, which loads after this file. */
.mc-home .mc-header .mc-logo {
	width: 310px;
}

.mc-home.mc-scrolled .mc-header .mc-logo {
	width: 260px;
}

@media (max-width: 1150px) {
	.mc-home .mc-header .mc-logo,
	.mc-home.mc-scrolled .mc-header .mc-logo {
		width: 215px;
	}
}

@media (max-width: 900px) {
	.mc-home .mc-header .mc-logo,
	.mc-home.mc-scrolled .mc-header .mc-logo {
		width: 190px;
	}
}

@media (max-width: 700px) {
	.mc-home .mc-header .mc-logo,
	.mc-home.mc-scrolled .mc-header .mc-logo {
		width: 240px;
	}
}

@media (max-width: 380px) {
	.mc-home .mc-header .mc-logo,
	.mc-home.mc-scrolled .mc-header .mc-logo {
		width: 220px;
	}
}

/* Exhibition dates. The year was brand blue on the darkest part of a photo and
 * all but disappeared (client review, 25 Sep 2026); it now sits on a light chip
 * that reads over any picture. Each property yields to a sidebar choice. */
.mc-home .mc-exhibition .mc-exhibition-year {
	margin-bottom: 8px;
	font-weight: 600;
}

.mc-home .mc-exhibition .mc-exhibition-year:not(.has-text-color) {
	color: #0b202e;
}

.mc-home .mc-exhibition .mc-exhibition-year:not(.has-background) {
	background: rgb(255 255 255 / 92%);
}

.mc-home .mc-exhibition .mc-exhibition-year:not([style*="padding"]) {
	padding: 5px 10px;
}

.mc-home .mc-exhibition .mc-exhibition-year:not([style*="radius"]) {
	border-radius: 999px;
}

/* Facts band movement. The client asked for subtle motion in the band under
 * the banner (review, 25 Sep 2026): the grid drifts, a soft light passes over
 * the band every few seconds, and home.js counts the figures up and fades them
 * in once the band scrolls into view. Decoration only: the words and numbers
 * stay in their blocks, and reduced-motion visitors get the still band. */
@keyframes mc-statband-drift {
	to {
		background-position: 74px 74px, 74px 74px;
	}
}

@keyframes mc-statband-sweep {
	0% {
		transform: translateX(-100%);
	}

	55%,
	100% {
		transform: translateX(100%);
	}
}

.mc-home .mc-statband::before {
	animation: mc-statband-drift 16s linear infinite;
}

.mc-home .mc-statband::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 11%) 50%, transparent 65%);
	transform: translateX(-100%);
	animation: mc-statband-sweep 8s ease-in-out 1s infinite;
}

.mc-home .mc-statband > .mc-container {
	position: relative;
	z-index: 1;
}

/* Set by home.js only once it is ready to count, so the figures never stay
 * hidden if the script does not run. */
.mc-home .mc-statband.mc-stat-armed .mc-stat {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mc-home .mc-statband.mc-stat-live .mc-stat {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mc-home .mc-statband::before {
		animation: none;
	}

	.mc-home .mc-statband::after {
		display: none;
	}
}

/* --- Sliders. Any group with the class mc-slider becomes a track with arrows
 * under it once carousel-projects.js runs; without the script (and in the
 * editor canvas) it is a plain grid, so every card stays in view and editable.
 * --mc-slider-per-view says how many cards show at once. */
.mc-home .mc-slider {
	--mc-slider-per-view: 4;
	--mc-slider-gap: 22px;
	display: grid;
	grid-template-columns: repeat(var(--mc-slider-per-view), minmax(0, 1fr));
	gap: var(--mc-slider-gap);
}

.mc-home .mc-slider.mc-projects-track {
	display: flex;
	/* Restated here so a section's own grid gap (about.css loads later) cannot
	 * put the card widths out of step with the space between them. */
	gap: var(--mc-slider-gap);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.mc-home .mc-slider.mc-projects-track::-webkit-scrollbar {
	display: none;
}

.mc-home .mc-slider.mc-projects-track > * {
	flex: 0 0 calc((100% - (var(--mc-slider-per-view) - 1) * var(--mc-slider-gap)) / var(--mc-slider-per-view));
	margin: 0;
}

.mc-home .mc-projects-nav[hidden] {
	display: none;
}

.mc-home .mc-projects-nav.mc-slider-nav {
	position: static;
	justify-content: flex-end;
	margin-top: 22px;
}

/* --- About: the certificates, as a slider (client review, 25 Sep 2026). Each
 * one is the same image block as on the Certifications page, lightbox and all.
 * A border rather than a shadow: a scrolling track clips anything outside it,
 * and a clipped shadow shows as a hard grey edge. */
.mc-home .mc-certificate-slider {
	--mc-slider-per-view: 5;
}

.mc-home .mc-certificate-slider > .wp-block-image {
	padding: 10px;
	border: 1px solid var(--mc-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.25s ease;
}

.mc-home .mc-certificate-slider > .wp-block-image:hover {
	border-color: var(--mc-blue, #1677a8);
}

.mc-home .mc-certificate-slider > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1087 / 1536;
	object-fit: contain;
}

.mc-home .mc-certificate-slider > .wp-block-image img:not([style*="radius"]) {
	border-radius: 6px;
}

.mc-home .mc-about-certificates .mc-about-heading .wp-block-buttons {
	margin-top: 14px;
}

@media (max-width: 1150px) {
	.mc-home .mc-slider {
		--mc-slider-per-view: 3;
	}

	.mc-home .mc-certificate-slider {
		--mc-slider-per-view: 4;
	}
}

@media (max-width: 900px) {
	.mc-home .mc-slider {
		--mc-slider-per-view: 2;
	}

	.mc-home .mc-certificate-slider {
		--mc-slider-per-view: 3;
	}
}

@media (max-width: 600px) {
	.mc-home .mc-slider {
		--mc-slider-per-view: 1;
		--mc-slider-gap: 14px;
	}

	.mc-home .mc-certificate-slider {
		--mc-slider-per-view: 2;
	}
}

.mc-home .mc-about-intro:not(.has-link-color) a {
	color: var(--mc-blue, #1677a8);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tablet navigation, 701-900px. Nine links do not fit one row here: they ran
 * off the right edge of the screen. This range now uses the phone's menu
 * button and drop-down panel, rule for rule, with the About and Career
 * dropdowns and the Products menu stacked inside it. The #mc-navigation id
 * outranks nav.css and catalogue.css, which load after this file; home.js and
 * nav.js treat 900px as the edge too. */
@media (min-width: 701px) and (max-width: 900px) {
	.mc-home .mc-topbar-tagline {
		display: none;
	}

	.mc-home .mc-topbar > .mc-container {
		justify-content: center;
	}

	.mc-home .mc-header .mc-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 43px;
		height: 40px;
		padding: 10px;
		border: 1px solid #dbe0e2;
		background: transparent;
	}

	.mc-home .mc-header .mc-menu-toggle span {
		display: block;
		width: 21px;
		height: 2px;
		background: var(--mc-ink);
		transition: transform 0.2s;
	}

	.mc-home .mc-header .mc-menu-toggle[aria-expanded="true"] span:first-child {
		transform: translateY(4px) rotate(45deg);
	}

	.mc-home .mc-header .mc-menu-toggle[aria-expanded="true"] span:last-child {
		transform: translateY(-4px) rotate(-45deg);
	}

	.mc-home .mc-header #mc-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100dvh - 80px);
		overflow: auto;
		gap: 0;
		padding: 14px 32px 24px;
		border-top: 1px solid var(--mc-line);
		background: #fff;
		box-shadow: 0 15px 20px #0001;
		align-items: stretch;
		font-size: 15px;
	}

	.mc-home .mc-header #mc-navigation.mc-open {
		display: flex;
		flex-direction: column;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-links {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link > .wp-block-button__link {
		display: block;
		padding: 12px 0;
		font-size: 14px;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link > .wp-block-button__link::after {
		display: none;
	}

	.mc-home .mc-header #mc-navigation .mc-button {
		margin-top: 10px;
		margin-left: 0;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-menu {
		position: static;
		flex-basis: 100%;
		width: 100%;
		margin: 6px 0 12px;
		box-shadow: none;
		transform: none;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-products {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu {
		position: static;
		flex-basis: 100%;
		max-height: none;
		overflow: visible;
		margin: 6px 0 14px;
		padding: 16px 10px;
		border-radius: 10px;
		box-shadow: none;
		transform: none;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Social icons (client review, 25 Sep 2026). In the picker like any other
 * icon; tools/add-social-icons.php gives each social button its network's icon
 * and puts the same links in the top bar. The network's name stays in the
 * button for screen readers and for editing; only the icon shows. */
.mc-home {
	--ico-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.5 3h15A1.5 1.5 0 0 1 21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3zM7 10v7h2.4v-7zm1.2-4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM11 10v7h2.4v-3.7c0-1 .5-1.7 1.4-1.7.8 0 1.2.6 1.2 1.7V17h2.4v-4.3c0-2.1-1.1-2.9-2.6-2.9-1 0-1.8.5-2.3 1.2V10z'/%3E%3C/svg%3E");
	--ico-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4a2.5 2.5 0 0 0-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8c1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3z'/%3E%3C/svg%3E");
	--ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.6 21v-7.6h2.6l.4-3h-3V8.5c0-.9.3-1.5 1.5-1.5h1.6V4.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9v2.3H8v3h2.6V21z'/%3E%3C/svg%3E");
	--ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E");
	--ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.8 3h3.1l-6.8 7.8 8 10.2h-6.3l-4.9-6.4L5.3 21H2.2l7.3-8.3L1.9 3h6.4l4.4 5.9zm-1.1 16.2h1.7L7.4 4.7H5.6z'/%3E%3C/svg%3E");
	--ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round' d='M3.6 20.4l1.2-4.3A8.6 8.6 0 1 1 8 19.3z'/%3E%3Cpath fill='black' d='M9.1 7.7c.2-.4.4-.4.7-.4h.5c.2 0 .4 0 .6.4l.8 1.9c.1.2.1.4 0 .6l-.5.7c-.1.2-.2.3 0 .6.5.9 1.3 1.7 2.3 2.2.3.1.4.1.6-.1l.6-.8c.2-.2.4-.2.6-.1l1.8.9c.2.1.4.2.4.3.1.3 0 1-.4 1.4-.4.5-1.2.9-2 .9-.7 0-2.1-.3-3.8-1.8-1.4-1.3-2.2-2.8-2.4-3.5-.3-.9 0-1.9.2-2.2z'/%3E%3C/svg%3E");
}

.mc-home .mc-ico-linkedin { --mc-ico-src: var(--ico-linkedin); }
.mc-home .mc-ico-youtube { --mc-ico-src: var(--ico-youtube); }
.mc-home .mc-ico-facebook { --mc-ico-src: var(--ico-facebook); }
.mc-home .mc-ico-instagram { --mc-ico-src: var(--ico-instagram); }
.mc-home .mc-ico-x { --mc-ico-src: var(--ico-x); }
.mc-home .mc-ico-whatsapp { --mc-ico-src: var(--ico-whatsapp); }

.mc-home .mc-topbar-links {
	align-items: center;
}

.mc-home .mc-topbar-social,
.mc-home .mc-footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mc-home .mc-topbar-social {
	margin: 0 0 0 10px;
	padding-left: 18px;
	border-left: 1px solid rgb(255 255 255 / 18%);
}

/* Icon-only round buttons. The name is kept but set to zero size; a size the
 * client picks in the sidebar brings it back. */
.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link,
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link {
	/* Flex, not grid: the hidden name would take a grid row of its own and push
	 * the icon up; as a flex item at zero size it takes no room. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	letter-spacing: 0;
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
	line-height: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="font-size"]),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="font-size"]) {
	font-size: 0 !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="padding"]),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="padding"]) {
	padding: 0 !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="radius"]),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="radius"]) {
	border-radius: 50% !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not(.has-background),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not(.has-background) {
	background: rgb(255 255 255 / 6%) !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not(.has-text-color),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not(.has-text-color) {
	color: #cfe3ec !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="border"]),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:not([style*="border"]) {
	border: 1px solid rgb(255 255 255 / 16%) !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link {
	width: 26px;
	height: 26px;
}

.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link {
	width: 36px;
	height: 36px;
}

/* The icon, in the button's text colour unless a tone is picked. */
.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link::before,
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--mc-ico-tone, currentColor);
	-webkit-mask: var(--mc-ico-src) center / contain no-repeat;
	mask: var(--mc-ico-src) center / contain no-repeat;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link::after,
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link::after {
	content: none;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:hover:not(.has-background),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:hover:not(.has-background) {
	background: var(--mc-blue, #1677a8) !important;
	border-color: transparent !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:hover:not(.has-text-color),
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:hover:not(.has-text-color) {
	color: #fff !important;
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:hover,
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link:focus-visible,
.mc-home .mc-footer-social .wp-block-button.mc-ico > .wp-block-button__link:focus-visible {
	outline: 2px solid #55b7e5;
	outline-offset: 2px;
}

/* A fixed size: a percentage height has nothing to resolve against here. */
.mc-home .mc-topbar-social .wp-block-button.mc-ico > .wp-block-button__link::before {
	width: 13px;
	height: 13px;
}

/* A phone shows the number alone in the top bar; the icons are in the footer. */
@media (max-width: 700px) {
	.mc-home .mc-topbar-social {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Homepage banner, in the old site's style (client review, 25 Sep 2026).
 * Each slide's picture fills the banner edge to edge, as the old site's banners
 * did (they are the same 1920x900 photographs), with the words over its left
 * side on a dark wash. Same block, same markup and same carousel.js: only the
 * layout changes. The product card around the picture goes: its spotlight
 * label and caption line are hidden, and the feature chips move under the
 * button. The picture stays inside its slide, so it cross-fades with it.
 * ------------------------------------------------------------------------ */
.mc-home .mc-carousel {
	isolation: isolate;
	overflow: hidden;
}

.mc-home .mc-carousel .mc-carousel-stage {
	padding: 72px 0 40px;
}

.mc-home .mc-carousel .mc-slide {
	grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
	grid-template-rows: auto auto;
	/* The column gap stays; between the words and their feature chips there is
	 * none, or the chips drift to the foot of the banner. */
	row-gap: 0;
	align-content: center;
	min-height: 440px;
}

.mc-home .mc-carousel .mc-slide-copy {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 1;
	/* The split layout stretched the words to the product card's height; on
	 * the banner they take only their own. */
	min-height: 0;
	height: auto;
	align-self: end;
}

/* The card goes; its parts join the slide's own grid. */
.mc-home .mc-carousel .mc-slide-art {
	display: contents;
}

.mc-home .mc-carousel .mc-product-label,
.mc-home .mc-carousel .mc-product-caption {
	display: none;
}

/* The picture: the whole banner, behind everything. The height and ratio the
 * card gave it are released, or it stops short of the banner's foot. */
.mc-home .mc-carousel .mc-slide .mc-product-image {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	max-height: none;
	aspect-ratio: auto;
	z-index: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #0b202e;
	box-shadow: none;
	overflow: hidden;
}

.mc-home .mc-carousel .mc-slide .mc-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

/* The wash that keeps the words readable, on dark photographs and on the white
 * studio shots alike. */
.mc-home .mc-carousel .mc-slide .mc-slide-art .mc-product-image::after {
	content: "";
	display: block;
	z-index: 1;
	position: absolute;
	inset: 0;
	/* carousel.css draws a 42px corner mark on this same layer. */
	width: auto;
	height: auto;
	border: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgb(8 26 38 / 90%) 0%, rgb(8 26 38 / 74%) 30%, rgb(8 26 38 / 28%) 48%, rgb(8 26 38 / 0%) 62%),
		linear-gradient(0deg, rgb(8 26 38 / 62%) 0%, rgb(8 26 38 / 0%) 24%);
}

.mc-home .mc-carousel .mc-product-features {
	position: relative;
	z-index: 2;
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	justify-content: flex-start;
	gap: 10px 22px;
	margin-top: 26px;
	padding-top: 0;
}

.mc-home .mc-carousel .mc-slide-copy h2,
.mc-home .mc-carousel .mc-slide-description {
	text-shadow: 0 2px 18px rgb(0 0 0 / 35%);
}

.mc-home .mc-carousel .mc-carousel-toolbar,
.mc-home .mc-carousel .mc-carousel-selector {
	position: relative;
	z-index: 3;
}

.mc-home .mc-carousel .mc-carousel-selector {
	background: rgb(9 33 49 / 88%);
	backdrop-filter: blur(6px);
}

@media (max-width: 1150px) {
	.mc-home .mc-carousel .mc-slide {
		grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	}

	/* The words take more of the width here, so the wash reaches further. */
	.mc-home .mc-carousel .mc-slide .mc-slide-art .mc-product-image::after {
		background:
			linear-gradient(90deg, rgb(8 26 38 / 90%) 0%, rgb(8 26 38 / 78%) 40%, rgb(8 26 38 / 36%) 62%, rgb(8 26 38 / 0%) 80%),
			linear-gradient(0deg, rgb(8 26 38 / 62%) 0%, rgb(8 26 38 / 0%) 24%);
	}

	/* With the social icons beside them, the email and phone need the tagline's room. */
	.mc-home .mc-topbar-tagline {
		display: none;
	}

	.mc-home .mc-topbar > .mc-container {
		justify-content: flex-end;
	}
}

/* Phones and small tablets: the words take the width, so the whole picture
 * is washed rather than just its left side. */
@media (max-width: 900px) {
	.mc-home .mc-carousel .mc-carousel-stage {
		padding: 64px 0 40px;
	}

	.mc-home .mc-carousel .mc-slide {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.mc-home .mc-carousel .mc-slide .mc-slide-art .mc-product-image::after {
		background:
			linear-gradient(90deg, rgb(8 26 38 / 88%) 0%, rgb(8 26 38 / 62%) 100%),
			linear-gradient(0deg, rgb(8 26 38 / 70%) 0%, rgb(8 26 38 / 0%) 40%);
	}
}

/* A phone's top bar is meant to show the number alone (blocks.css), but an
 * older home.css rule hid every first link in the bar, the number included,
 * and the bar showed nothing. */
@media (max-width: 700px) {
	.mc-home .mc-topbar .mc-topbar-phone a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.mc-home .mc-topbar > .mc-container {
		justify-content: center;
	}
}

/* Banner height. At full size the banner stood 820px tall at 1440px wide and
 * its brand strip fell below a laptop's fold; it now fits under the header on
 * a 1440x900 screen. The same words, set a little smaller and closer. */
.mc-home .mc-carousel .mc-carousel-stage {
	padding: 40px 0 16px;
}

.mc-home .mc-carousel .mc-slide {
	min-height: 0;
}

.mc-home .mc-carousel .mc-slide-copy h2 {
	font-size: clamp(36px, 3.75vw, 54px);
}

.mc-home .mc-carousel .mc-slide-eyebrow {
	margin-bottom: 14px;
}

.mc-home .mc-carousel .mc-slide-description {
	margin-top: 18px;
}

.mc-home .mc-carousel .mc-slide-copy .mc-actions {
	margin-top: 24px;
}

.mc-home .mc-carousel .mc-slide-assurance {
	margin-top: 18px;
}

.mc-home .mc-carousel .mc-slide .mc-product-features {
	margin-top: 16px;
}

.mc-home .mc-carousel .mc-carousel-toolbar {
	padding-bottom: 14px;
}

@media (max-width: 900px) {
	.mc-home .mc-carousel .mc-carousel-stage {
		padding: 40px 0 16px;
	}
}

/* About: 25+ years (client review, 25 Sep 2026: "prominently highlight 25+
 * Years of Experience"). The old site's graphic beside the heading, in place of
 * the photo card: its background is transparent, so it sits straight on the
 * navy, with its line under it. about.css loads later, hence .mc-about-page. */
.mc-about-page .mc-about-hero-visual.mc-about-experience {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
}

.mc-about-page .mc-about-experience .mc-about-experience-figure {
	width: 100%;
	max-width: 520px;
	margin: 0;
}

.mc-about-page .mc-about-experience .mc-about-experience-figure img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 40px rgb(0 0 0 / 35%));
}

.mc-about-page .mc-about-experience .mc-about-experience-label {
	margin: 10px 0 0;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mc-about-page .mc-about-experience .mc-about-experience-label:not(.has-text-color) {
	color: #eaf4f8;
}

.mc-about-page .mc-about-experience .mc-about-experience-label:not([style*="font-size"]) {
	font-size: clamp(18px, 1.6vw, 24px);
}

@media (max-width: 700px) {
	.mc-about-page .mc-about-experience .mc-about-experience-figure {
		max-width: 340px;
	}
}

/* Catalogue page bodies: room between the brand logo, each section heading and
 * its cards (client, 28 Sep 2026: "no space, very congested"). The converted
 * product pages are a flat run of image, heading, card grid, heading, card grid,
 * and every block sat flush against the next. A margin set in the sidebar wins. */
.mc-catalogue-content > * + *:not([style*="margin-top"]) {
	margin-top: 28px !important;
}

.mc-catalogue-content > :is(h2, h3, h4, h5):not(:first-child):not([style*="margin-top"]) {
	margin-top: 64px !important;
}

.mc-catalogue-content > figure + :is(h2, h3, h4, h5):not([style*="margin-top"]) {
	margin-top: 24px !important;
}

.mc-catalogue-content > :is(h2, h3, h4, h5) + *:not([style*="margin-top"]) {
	margin-top: 22px !important;
}

@media (max-width: 700px) {
	.mc-catalogue-content > :is(h2, h3, h4, h5):not(:first-child):not([style*="margin-top"]) {
		margin-top: 44px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Projects (inc/projects.php, client request 28 Sep 2026).
 * ------------------------------------------------------------------------ */

/* The homepage carousel scrolled up and down a little as well as sideways. As
 * the cards slide up into view (the reveal animation moves them 38px), they
 * stuck out below the track, which then scrolled vertically; a scroll at that
 * moment left the row shifted. The track now only slides sideways, with room
 * kept above and below for a card's hover lift. */
.mc-home .mc-ae-grid.mc-projects-track,
.mc-home .mc-slider.mc-projects-track {
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	padding-top: 10px;
	padding-bottom: 14px;
	margin-top: -10px;
	margin-bottom: -14px;
}

/* A card opens its project: the title is the link, stretched over the card. */
.mc-home .mc-project-card {
	position: relative;
}

.mc-home .mc-project-card .mc-project-link {
	color: inherit;
	text-decoration: none;
}

.mc-home .mc-project-card .mc-project-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.mc-home .mc-project-card:focus-within {
	outline: 3px solid #55b7e5;
	outline-offset: 3px;
}

.mc-home .mc-project-card[hidden] {
	display: none;
}

/* The Projects page: category tabs over a grid of three, as on mechatronics.ae. */
.mc-home .mc-project-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 36px;
}

.mc-home .mc-project-filter {
	min-height: 0;
	padding: 10px 18px;
	border: 1px solid var(--mc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mc-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mc-home .mc-project-filter:hover {
	border-color: var(--mc-blue, #1677a8);
	color: var(--mc-blue, #1677a8);
}

.mc-home .mc-project-filter.is-active {
	border-color: var(--mc-blue, #1677a8);
	background: var(--mc-blue, #1677a8);
	color: #fff;
}

.mc-home .mc-project-index-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 900px) {
	.mc-home .mc-project-index-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.mc-home .mc-project-index-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A project's own page: picture and description beside the info box. */
.mc-home .mc-project-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.mc-home .mc-project-detail-image {
	margin: 0 0 32px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--mc-line);
}

.mc-home .mc-project-detail-image img {
	display: block;
	width: 100%;
	height: auto;
}

.mc-home .mc-project-description > * + * {
	margin-top: 18px;
}

.mc-home .mc-project-info {
	position: sticky;
	top: 120px;
	padding: 28px;
	border: 1px solid var(--mc-line);
	border-top: 3px solid var(--mc-blue, #1677a8);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 14px 34px rgb(12 52 76 / 7%);
}

.mc-home .mc-project-info h2 {
	margin: 0 0 18px;
	font-size: 22px;
}

.mc-home .mc-project-info dl {
	margin: 0;
}

.mc-home .mc-project-info dt {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6a7f8b;
}

.mc-home .mc-project-info dd {
	margin: 6px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--mc-ink);
}

.mc-home .mc-project-info .mc-project-label.mc-ico {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mc-home .mc-project-info .mc-project-label.mc-ico::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--mc-blue, #1677a8);
	-webkit-mask: var(--mc-ico-src) center / contain no-repeat;
	mask: var(--mc-ico-src) center / contain no-repeat;
}

.mc-home .mc-project-cta {
	display: block;
	margin-top: 26px;
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--mc-blue, #1677a8);
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mc-home .mc-project-cta:hover {
	background: #0d5d78;
	color: #fff;
}

.mc-home .mc-project-pager {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 20px;
	align-items: center;
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--mc-line);
}

.mc-home .mc-project-pager a {
	color: var(--mc-ink);
	text-decoration: none;
}

.mc-home .mc-project-pager small {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6a7f8b;
}

.mc-home .mc-project-pager strong {
	font-size: 17px;
}

.mc-home .mc-project-pager-next {
	text-align: right;
}

.mc-home .mc-project-pager-all {
	padding: 10px 18px;
	border: 1px solid var(--mc-line);
	border-radius: 999px;
	font-weight: 600;
}

.mc-home .mc-project-pager a:hover strong,
.mc-home .mc-project-pager-all:hover {
	color: var(--mc-blue, #1677a8);
}

@media (max-width: 900px) {
	.mc-home .mc-project-detail-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.mc-home .mc-project-info {
		position: static;
	}

	.mc-home .mc-project-pager {
		grid-template-columns: 1fr 1fr;
	}

	.mc-home .mc-project-pager-all {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
}

/* Project cards on hover. The lifted card's shadow was drawn by a square box
 * (only its parts were rounded) and cut off flat by the carousel, which clips
 * anything below it: a grey block showed behind the card (client, 28 Sep
 * 2026). The card is rounded as a whole, and the track keeps room below for
 * the shadow to fade out. */
.mc-home .mc-project.mc-project-card {
	border-radius: var(--v2-radius, 16px);
	background: #fff;
	isolation: isolate;
}

.mc-home .mc-project.mc-project-card:hover {
	box-shadow: 0 14px 28px rgb(13 37 55 / 11%);
}

.mc-home .mc-ae-grid.mc-projects-track {
	padding-bottom: 40px;
	margin-bottom: -40px;
}

/* Section spacing, tightened (client, 28 Sep 2026: "reduce space between
 * sections"). Sections stood 224px apart on desktop; now 144px, and less on
 * smaller screens. Padding set on a section in the sidebar still wins. The media
 * section keeps the extra 46px it reserves for the band that overlaps it. */
.mc-home .mc-section:not([style*="padding"]),
.mc-home .mc-testimonials:not([style*="padding"]) {
	padding-top: 72px;
	padding-bottom: 72px;
}

.mc-home .mc-media:not([style*="padding"]) {
	padding-top: 118px;
	padding-bottom: 72px;
}

.mc-home .mc-brandband:not([style*="padding"]) {
	padding-bottom: 56px;
}

.mc-home .mc-promo:not([style*="padding"]) {
	padding-top: 80px;
	padding-bottom: 80px;
}

.mc-about-page .mc-main > .mc-section:not([style*="padding"]) {
	padding-top: 64px;
	padding-bottom: 64px;
}

@media (max-width: 900px) {
	.mc-home .mc-section:not([style*="padding"]),
	.mc-home .mc-testimonials:not([style*="padding"]),
	.mc-about-page .mc-main > .mc-section:not([style*="padding"]) {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.mc-home .mc-media:not([style*="padding"]) {
		padding-top: 102px;
		padding-bottom: 56px;
	}

	.mc-home .mc-promo:not([style*="padding"]) {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 600px) {
	.mc-home .mc-section:not([style*="padding"]),
	.mc-home .mc-testimonials:not([style*="padding"]),
	.mc-about-page .mc-main > .mc-section:not([style*="padding"]) {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.mc-home .mc-media:not([style*="padding"]) {
		padding-top: 64px;
		padding-bottom: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Phone and tablet menu, redesigned (client, 28 Sep 2026: "not looking good,
 * dropdown icon comes below link"). Each item is one row: the link fills it and
 * the arrow sits at its right as a 44px button; a thin line parts the rows. An
 * open dropdown is an indented, tinted list; Products opens as a grid of brand
 * logos. The #mc-navigation id outranks the older phone rules.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.mc-home .mc-header #mc-navigation.mc-open {
		padding: 8px 20px 20px;
		gap: 0;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-links {
		gap: 0;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #e8edef;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link:last-child {
		border-bottom: 0;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link > .wp-block-button__link {
		flex: 1 1 0;
		min-width: 0;
		display: block;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link > .wp-block-button__link:not([style*="padding"]) {
		padding: 15px 0 !important;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link > .wp-block-button__link {
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
	}

	.mc-home .mc-header #mc-navigation .mc-nav-link.mc-active > .wp-block-button__link:not(.has-text-color) {
		color: var(--mc-blue, #1677a8) !important;
	}

	/* The arrow: a square button at the row's end, turning when open. */
	.mc-home .mc-header #mc-navigation .mc-subnav-toggle,
	.mc-home .mc-header #mc-navigation .mc-products-toggle {
		flex: 0 0 44px;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		min-height: 0;
		margin: 0 -10px 0 8px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--mc-ink);
		cursor: pointer;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-toggle:hover,
	.mc-home .mc-header #mc-navigation .mc-products-toggle:hover {
		background: #f1f5f7;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-toggle svg,
	.mc-home .mc-header #mc-navigation .mc-products-toggle svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.2s ease;
	}

	.mc-home .mc-header #mc-navigation [aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* An open dropdown: an indented list with a line down its left. */
	.mc-home .mc-header #mc-navigation .mc-subnav-menu {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		margin: 0 0 12px;
		padding: 6px 0 6px 14px;
		border: 0;
		border-left: 2px solid var(--mc-blue, #1677a8);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-menu[hidden] {
		display: none;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-menu a {
		display: block;
		padding: 10px 12px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		color: #3c5462;
		text-decoration: none;
	}

	.mc-home .mc-header #mc-navigation .mc-subnav-menu a:hover,
	.mc-home .mc-header #mc-navigation .mc-subnav-menu a[aria-current="page"] {
		background: #f1f5f7;
		color: var(--mc-blue, #1677a8);
	}

	/* Products: a heading line, then the brands as logo tiles. */
	.mc-home .mc-header #mc-navigation .mc-product-menu {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		max-height: none;
		margin: 0 0 14px;
		padding: 14px;
		border: 0;
		border-radius: 12px;
		background: #f4f7f8;
		box-shadow: none;
		transform: none;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu[hidden] {
		display: none;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 12px;
		font-size: 13px;
		font-weight: 600;
		color: #5a707c;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-heading a {
		font-size: 13px;
		font-weight: 700;
		color: var(--mc-blue, #1677a8);
		white-space: nowrap;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 74px;
		padding: 10px 8px;
		border: 1px solid #e3e9ec;
		border-radius: 10px;
		background: #fff;
		text-align: center;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-brand img {
		width: auto;
		max-width: 100%;
		height: 26px;
		object-fit: contain;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-brand span {
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		color: #3c5462;
	}
}

@media (max-width: 600px) {
	.mc-home .mc-header #mc-navigation .mc-product-menu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mc-home .mc-header #mc-navigation.mc-open {
		border-radius: 0 0 16px 16px;
		box-shadow: 0 24px 48px rgb(11 32 46 / 18%);
	}
}

/* Products menu: logos only (client, 29 Sep 2026: "no need text, just logo").
 * With the name gone the logo gets the tile: larger, centred. */
/* .mc-product-menu in the selector: catalogue.css loads after this file. */
.mc-home .mc-product-menu .mc-product-menu-brand {
	min-height: 76px;
	padding: 10px 18px;
}

.mc-home .mc-product-menu .mc-product-menu-brand img {
	width: 100%;
	max-width: 200px;
	height: 52px;
}

@media (max-width: 900px) {
	.mc-home .mc-header #mc-navigation .mc-product-menu-brand {
		min-height: 60px;
	}

	.mc-home .mc-header #mc-navigation .mc-product-menu-brand img {
		width: min(120px, 100%);
		height: 30px;
	}
}

/* Two phone numbers in the top bar (client, 29 Sep 2026): one line, one phone
 * icon. Each link drew its own icon and stacked under the other. */
.mc-home .mc-topbar .mc-topbar-phone {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.mc-home .mc-topbar .mc-topbar-phone a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.mc-home .mc-topbar .mc-topbar-phone a ~ a::before {
	display: none;
}

/* Tablets: the email, both numbers and six icons do not fit one line, so the
 * icons (also in the footer) give way to the numbers. */
@media (min-width: 701px) and (max-width: 900px) {
	.mc-home .mc-topbar .mc-topbar-social {
		display: none;
	}
}

/* Training & Development video (client, 29 Sep 2026: "video is not loading").
 * A card like the homepage's: the thumbnail, the play badge, and the button
 * (which opens the player) laid over it as a caption. The picture and caption
 * share one grid cell; the button's click area stretches over the whole card. */
.mc-home .mc-career-video {
	position: relative;
	isolation: isolate;
	display: grid;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgb(12 52 76 / 14%);
}

.mc-home .mc-career-video > * {
	grid-area: 1 / 1;
}

.mc-home .mc-career-video .mc-career-video-shot {
	margin: 0;
}

.mc-home .mc-career-video .mc-career-video-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.mc-home .mc-career-video:hover .mc-career-video-shot img {
	transform: scale(1.03);
}

.mc-home .mc-career-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, rgb(8 26 38 / 72%) 0%, rgb(8 26 38 / 0%) 45%);
}

.mc-home .mc-career-video .mc-play {
	z-index: 2;
	pointer-events: none;
}

.mc-home .mc-career-video .mc-media-actions {
	z-index: 3;
	align-self: end;
	justify-self: start;
	margin: 0;
	padding: 0 28px 24px;
}

.mc-home .mc-career-video .mc-media-actions .wp-block-button,
.mc-home .mc-career-video .mc-media-actions .wp-block-button__link {
	position: static;
}

.mc-home .mc-career-video .mc-media-actions .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
}

.mc-home .mc-career-video .mc-media-actions .wp-block-button__link:not(.has-text-color) {
	color: #fff !important;
}

.mc-home .mc-career-video .mc-media-actions .wp-block-button__link:not([style*="font-size"]) {
	font-size: 16px !important;
}

/* Certificates (client, 29 Sep 2026: "when we click any certificate it's full
 * white, give a border for the unopened and opened state").
 * Unopened: each one a framed card. Opened: the lightbox's backdrop was the
 * page's white, so a white document on it had no edge; it is dark now, and the
 * document sits on it with a frame and a shadow. Applies to every enlarged
 * picture on the site (the gallery albums use the same viewer). */
.mc-home .mc-certificate-image:not(.has-border-color) {
	border: 1px solid #d6e2e8;
}

.mc-home .mc-certificate-image {
	padding: 10px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 6px 18px rgb(12 52 76 / 6%);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mc-home .mc-certificate-image:not(.has-border-color):hover {
	border-color: var(--mc-blue, #1677a8);
}

.mc-home .mc-certificate-image:hover {
	box-shadow: 0 12px 26px rgb(12 52 76 / 12%);
	transform: translateY(-3px);
}

.mc-home .mc-certificate-image img {
	border-radius: 6px;
}

.wp-lightbox-overlay .scrim {
	background-color: rgb(8 26 38 / 92%) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button {
	fill: #fff !important;
	color: #fff;
}

.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay .wp-block-image img {
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 6px;
	box-shadow: 0 24px 60px rgb(0 0 0 / 45%);
	background: #fff;
}

/* Video player close button (client, 29 Sep 2026: "congested, two icons, the
 * circle is not a circle, the icon is not aligned"). It sat inside the video,
 * over YouTube's own top-right controls, and the theme's button padding
 * stretched it into an oval. It now sits just outside the video's top-right
 * corner: a true 44px circle with a centred drawn cross. */
.mc-video-modal .mc-video-frame {
	overflow: visible;
}

.mc-video-modal .mc-video-frame iframe {
	border-radius: 16px;
}

.mc-video-modal .mc-video-close {
	top: -56px;
	right: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	box-shadow: none;
	color: #fff;
	line-height: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mc-video-modal .mc-video-close:hover,
.mc-video-modal .mc-video-close:focus-visible {
	background: #fff;
	color: #0b2430;
	transform: rotate(90deg);
}

.mc-video-modal .mc-video-close svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* The video first, then the text (client, 29 Sep 2026): its gap goes below it. */
.mc-home .mc-career-section .mc-container > .mc-career-video:first-child {
	margin-top: 0;
	margin-bottom: 56px;
}

@media (max-width: 700px) {
	.mc-home .mc-career-section .mc-container > .mc-career-video:first-child {
		margin-bottom: 36px;
	}
}

/* Footer contact column (client, 30 Sep 2026: "on a smaller desktop the email
 * breaks"). Between 1200 and 1370px the column was narrower than an address
 * like sales2@mechatronicscontrol.com, which then broke mid-word and centred.
 * The column now takes the width of its longest line; the others share the
 * rest. Contact lines never break inside, and sit to the left. */
@media (min-width: 1201px) {
	.mc-home .mc-footer .mc-footer-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) max-content minmax(0, 1fr);
	}
}

.mc-home .mc-footer .mc-footer-link.mc-ico > .wp-block-button__link {
	overflow-wrap: normal;
	white-space: nowrap;
	text-align: left;
	justify-content: flex-start;
}

/* Certificates: no long-press "Save image" on phones (home.js stops the
 * right-click menu and dragging). */
.mc-home .mc-certificate-image img,
.wp-lightbox-overlay img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ---------------------------------------------------------------------------
 * The site's own forms (inc/forms.php) and job openings (inc/jobs.php),
 * client review 7 Oct 2026. They sit in the frames that held the Zoho embeds.
 * ------------------------------------------------------------------------ */
.mc-home .mc-contact-form-frame,
.mc-home .mc-career-form-frame {
	overflow: visible;
}

.mc-home .mc-form {
	padding: 32px;
}

.mc-home .mc-form-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin: 0;
}

.mc-home .mc-form-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
}

.mc-home .mc-form-wide,
.mc-home .mc-form-submit {
	grid-column: 1 / -1;
}

.mc-home .mc-form-field label {
	font-size: 14px;
	font-weight: 600;
	color: #183846;
}

.mc-home .mc-form-field label span {
	color: #c0392b;
}

.mc-home .mc-form-field input,
.mc-home .mc-form-field select,
.mc-home .mc-form-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #cfdce3;
	border-radius: 10px;
	background: #fbfdfe;
	color: #183846;
	font: inherit;
	font-size: 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-home .mc-form-field textarea {
	resize: vertical;
	min-height: 120px;
}

.mc-home .mc-form-field input[type="file"] {
	padding: 10px;
	background: #fff;
}

.mc-home .mc-form-field input:focus,
.mc-home .mc-form-field select:focus,
.mc-home .mc-form-field textarea:focus {
	outline: none;
	border-color: var(--mc-blue, #1677a8);
	box-shadow: 0 0 0 3px rgb(22 119 168 / 15%);
}

.mc-home .mc-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mc-home .mc-form-submit {
	margin: 4px 0 0;
}

.mc-home .mc-form-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 15px 30px;
	border: 0;
	border-radius: 10px;
	background: var(--mc-blue, #1677a8);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mc-home .mc-form-button:hover {
	background: #0d5d78;
	transform: translateY(-1px);
}

.mc-home .mc-form-notice {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 10px;
}

.mc-home .mc-form-notice p {
	margin: 4px 0 0;
}

.mc-home .mc-form-success {
	margin: 0;
	padding: 28px;
	border: 1px solid #b7e1c8;
	background: #eefaf2;
	color: #1d5b37;
}

.mc-home .mc-form-success strong {
	font-size: 20px;
}

.mc-home .mc-form-error {
	border: 1px solid #f1c3bd;
	background: #fdf1ef;
	color: #8a2a1f;
}

@media (max-width: 700px) {
	.mc-home .mc-form {
		padding: 20px;
	}

	.mc-home .mc-form-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Job openings: title and location on the closed row; the details as a list. */
.mc-home .mc-jobs .mc-career-job summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
}

.mc-home .mc-job-location {
	font-size: 14px;
	font-weight: 500;
	color: #5a707c;
}

.mc-home .mc-job-facts {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
}

.mc-home .mc-job-facts > div {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 12px;
}

.mc-home .mc-job-facts dt {
	font-weight: 700;
	color: #183846;
}

.mc-home .mc-job-facts dd {
	margin: 0;
	color: #526975;
}

.mc-home .mc-job-more p {
	margin: 6px 0;
}

.mc-home .mc-job-apply {
	margin: 6px 0 22px;
}

.mc-home .mc-job-apply-link {
	font-weight: 700;
	color: var(--mc-blue, #1677a8);
	text-decoration: none;
}

.mc-home .mc-jobs-empty {
	padding: 20px 24px;
	border: 1px dashed #cfdce3;
	border-radius: 11px;
}

@media (max-width: 600px) {
	.mc-home .mc-job-facts > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}

/* Jump links on the Career page scroll to their section below the sticky header. */
.mc-home .mc-career-section[id] {
	scroll-margin-top: 110px;
}

.mc-home .mc-jobs .mc-career-job[open] .mc-job-location {
	display: none;
}