/*
 * Homepage presentation layer, adopted style.
 *
 * Loads after design.css and carries the treatment the client chose: softened
 * corners and layered shadows in place of hard squares, a gradient facts band
 * instead of pale tiles, eyebrow labels as tinted pills, a lit hero, and
 * movement across the cards. The behaviour that goes with it, the counting
 * figures and the condensing header, lives in assets/js/style-v2.js.
 *
 * Nothing here changes the markup, so the homepage stays editable as blocks.
 */

.mc-home {
	--v2-radius: 16px;
	--v2-radius-sm: 10px;
	--v2-tint: rgb(0 120 168 / 8%);
	--v2-tint-rust: rgb(198 83 36 / 10%);
	--v2-shadow: 0 1px 2px rgb(11 36 48 / 4%), 0 10px 24px rgb(11 36 48 / 6%);
	--v2-shadow-lift: 0 2px 6px rgb(11 36 48 / 8%), 0 26px 52px rgb(11 36 48 / 14%);
	--v2-glow: 0 18px 40px rgb(0 120 168 / 28%);
}

/* ---------------------------------------------------------------------------
 * 1. Eyebrow labels become tinted pills.
 * ------------------------------------------------------------------------ */

.mc-home .mc-section-heading .mc-eyebrow {
	display: inline-flex;
	background: var(--v2-tint-rust);
	color: var(--mc-rust);
	padding: 9px 20px;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.14em;
	margin-bottom: 22px;
}

.mc-home .mc-section-heading .mc-eyebrow::before,
.mc-home .mc-section-heading .mc-eyebrow::after {
	content: none;
}

.mc-home .mc-media .mc-section-heading .mc-eyebrow {
	background: rgb(255 255 255 / 10%);
	color: var(--mc-rust-bright);
}

/* ---------------------------------------------------------------------------
 * 2. A lit hero.
 * ------------------------------------------------------------------------ */

.mc-home .mc-carousel {
	position: relative;
	isolation: isolate;
}

.mc-home .mc-carousel::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20% -10% 40% -30%;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 20% 35%, rgb(0 162 216 / 22%) 0, transparent 58%),
		radial-gradient(ellipse at 70% 10%, rgb(198 83 36 / 12%) 0, transparent 52%);
}

.mc-home .mc-product-image {
	border-radius: var(--v2-radius);
	border: 1px solid rgb(255 255 255 / 26%);
	box-shadow: 0 30px 70px rgb(3 18 26 / 46%);
}

.mc-home .mc-brand-selector.mc-selected {
	box-shadow: inset 0 2px 0 var(--mc-rust-bright);
}

/* ---------------------------------------------------------------------------
 * 3. One rounded, lifted card system.
 * ------------------------------------------------------------------------ */

.mc-home .mc-division,
.mc-home .mc-brochure-card,
.mc-home .mc-brand-tile,
.mc-home .mc-media-frame,
.mc-home .mc-project-photo,
.mc-home .mc-exhibition,
.mc-home .mc-quote,
.mc-home .mc-about-visual .wp-block-image img {
	border-radius: var(--v2-radius);
	overflow: hidden;
}

.mc-home .mc-division,
.mc-home .mc-brochure-card,
.mc-home .mc-brand-tile {
	box-shadow: var(--v2-shadow);
	border-color: transparent;
}

.mc-home .mc-division:hover,
.mc-home .mc-brochure-card:hover,
.mc-home .mc-brand-tile:hover {
	box-shadow: var(--v2-shadow-lift);
	transform: translateY(-8px);
}

/* A gradient edge arrives on hover, rather than a border colour change. */
.mc-home .mc-division {
	position: relative;
}

.mc-home .mc-division::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: var(--mc-gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.mc-home .mc-division:hover::after {
	transform: scaleX(1);
}

.mc-home .mc-division-photo img,
.mc-home .mc-project-photo img,
.mc-home .mc-exhibition .wp-block-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.mc-home .mc-division:hover .mc-division-photo img,
.mc-home .mc-project:hover .mc-project-photo img,
.mc-home .mc-exhibition:hover .wp-block-image img {
	transform: scale(1.07);
}

/* The division icon sits in a tinted disc. */
.mc-home .mc-division-icon {
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	padding: 12px;
	border-radius: 50%;
	background: var(--v2-tint);
	margin-bottom: 20px;
}

.mc-home .mc-division-number {
	border-radius: 999px;
	padding: 6px 14px;
	background: rgb(11 36 48 / 72%);
	backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------------
 * 4. The facts band becomes one gradient surface.
 * ------------------------------------------------------------------------ */

.mc-home .mc-statband {
	background: var(--mc-gradient);
	border: 0;
	padding-block: 68px;
	position: relative;
	overflow: hidden;
}

.mc-home .mc-statband::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
	background-size: 74px 74px;
	mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.mc-home .mc-stat {
	position: relative;
	background: transparent;
	border: 0;
	padding: 8px 14px;
}

.mc-home .mc-stat:hover {
	background: transparent;
	transform: none;
}

.mc-home .mc-stat + .mc-stat::before {
	display: block;
	content: "";
	position: absolute;
	left: -10px;
	top: 10%;
	bottom: 10%;
	width: 1px;
	background: rgb(255 255 255 / 22%);
}

.mc-home .mc-stat-value {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #fff;
}

.mc-home .mc-stat-value em {
	color: var(--mc-rust-bright);
}

.mc-home .mc-stat-label {
	color: rgb(255 255 255 / 82%);
}

/* ---------------------------------------------------------------------------
 * 5. Buttons gain a glow and a moving arrow.
 * ------------------------------------------------------------------------ */

.mc-home .wp-block-button.mc-button > .wp-block-button__link,
.mc-home a.mc-button {
	border-radius: var(--v2-radius-sm);
	box-shadow: var(--v2-glow);
}

.mc-home .wp-block-button.mc-button-dark > .wp-block-button__link {
	border-radius: var(--v2-radius-sm);
	box-shadow: 0 16px 34px rgb(11 36 48 / 26%);
}

.mc-home .wp-block-button > .wp-block-button__link::after,
.mc-home a.mc-button .mc-icon {
	transition: transform 0.3s ease;
}

.mc-home .wp-block-button > .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

.mc-home .mc-menu-toggle {
	border-radius: var(--v2-radius-sm);
}

/* ---------------------------------------------------------------------------
 * 6. Dark bands get depth instead of flat fill.
 * ------------------------------------------------------------------------ */

.mc-home .mc-media,
.mc-home .mc-industries {
	position: relative;
	overflow: hidden;
}

.mc-home .mc-media::before,
.mc-home .mc-industries::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 12% 0%, rgb(0 162 216 / 20%) 0, transparent 55%),
		radial-gradient(ellipse at 88% 100%, rgb(198 83 36 / 14%) 0, transparent 55%);
}

.mc-home .mc-media > .mc-container,
.mc-home .mc-industries > .mc-container {
	position: relative;
	z-index: 1;
}

.mc-home .mc-industry {
	border-radius: 999px;
	border-color: rgb(255 255 255 / 22%);
	background: rgb(255 255 255 / 5%);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.mc-home .mc-industry:hover {
	background: rgb(255 255 255 / 12%);
	border-color: rgb(255 255 255 / 40%);
}

/* ---------------------------------------------------------------------------
 * 7. Brands, quotes and the closing band.
 * ------------------------------------------------------------------------ */

.mc-home .mc-brand-tile img {
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.mc-home .mc-brand-tile:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.04);
}

.mc-home .mc-quote-stage {
	border-radius: var(--v2-radius);
}

.mc-home .mc-quote-controls button {
	border-radius: 50%;
	border-color: rgb(11 36 48 / 18%);
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.mc-home .mc-quote-controls button:hover {
	background: var(--mc-brand);
	border-color: var(--mc-brand);
	color: #fff;
	transform: translateY(-2px);
}

.mc-home .mc-contact {
	position: relative;
	overflow: hidden;
}

.mc-home .mc-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 8% 120%, rgb(255 255 255 / 18%) 0, transparent 55%),
		radial-gradient(ellipse at 92% -20%, rgb(11 36 48 / 22%) 0, transparent 60%);
}

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

.mc-home .mc-contact .wp-block-button.mc-button-dark > .wp-block-button__link {
	border-radius: var(--v2-radius-sm);
	box-shadow: 0 18px 38px rgb(3 18 26 / 28%);
}

/* A hairline of brand colour where the footer begins. */
.mc-home .mc-footer {
	position: relative;
}

.mc-home .mc-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--mc-gradient);
}

.mc-home .mc-footer-logo {
	border-radius: var(--v2-radius-sm);
}

/* ---------------------------------------------------------------------------
 * 8. Reduced motion and small screens.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mc-home *,
	.mc-home *::before,
	.mc-home *::after {
		transition: none !important;
	}
}

@media (max-width: 700px) {
	.mc-home {
		--v2-radius: 12px;
	}

	.mc-home .mc-statband {
		padding-block: 48px;
	}

	.mc-home .mc-stat + .mc-stat::before {
		display: none;
	}

	.mc-home .mc-section-heading .mc-eyebrow {
		font-size: 12px;
		padding: 8px 16px;
	}
}

/* ===========================================================================
 * 9. Movement and depth.
 * The behaviour that drives the counting figures, the condensing header and
 * the staggered reveals lives in assets/js/style-v2.js. Everything below is
 * the visual half, and every piece is disabled under reduced motion.
 * ======================================================================== */

/* --- The header condenses after the first scroll. ----------------------- */

.mc-home .mc-header {
	transition: box-shadow 0.35s ease, background 0.35s ease;
}

.mc-home .mc-nav-wrap {
	transition: min-height 0.35s ease;
}

.mc-home .mc-logo {
	transition: width 0.35s ease;
}

.mc-home.mc-scrolled .mc-nav-wrap {
	min-height: 74px;
}

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

.mc-home.mc-scrolled .mc-header {
	box-shadow: 0 10px 30px rgb(11 36 48 / 10%);
}

.mc-home.mc-scrolled .mc-nav-link > .wp-block-button__link {
	padding-block: 24px;
}

/* --- Grid items arrive one after another. ------------------------------- */

.mc-home .mc-division,
.mc-home .mc-brand-tile,
.mc-home .mc-media-card,
.mc-home .mc-project,
.mc-home .mc-exhibition,
.mc-home .mc-stat {
	transition-delay: calc(var(--mc-stagger, 0) * 70ms);
}

/* --- Photo cards reveal their caption on hover. ------------------------- */

.mc-home .mc-project-photo,
.mc-home .mc-exhibition {
	position: relative;
}

.mc-home .mc-project-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgb(11 36 48 / 70%), transparent 58%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.mc-home .mc-project:hover .mc-project-photo::after {
	opacity: 1;
}

.mc-home .mc-project-mark {
	border-radius: 50%;
	transition: transform 0.4s ease, background 0.3s ease, color 0.3s ease;
}

.mc-home .mc-project:hover .mc-project-mark {
	transform: rotate(45deg);
}

.mc-home .mc-exhibition-meta {
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mc-home .mc-exhibition:hover .mc-exhibition-meta {
	transform: translateY(-6px);
}

/* --- A light sweeps across a primary button on hover. ------------------- */

.mc-home .wp-block-button.mc-button > .wp-block-button__link,
.mc-home a.mc-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.mc-home .wp-block-button.mc-button > .wp-block-button__link::before,
.mc-home a.mc-button::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	transform: skewX(-18deg);
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 26%), transparent);
	transition: left 0.55s ease;
}

.mc-home .wp-block-button.mc-button > .wp-block-button__link:hover::before,
.mc-home a.mc-button:hover::before {
	left: 120%;
}

/* --- The dark video band meets the facts band on an angle. -------------- */

.mc-home .mc-media {
	clip-path: polygon(0 0, 100% 3.2vw, 100% 100%, 0 100%);
	margin-top: -3.2vw;
	padding-top: calc(var(--mc-space-section) + 3.2vw);
}

/* --- Counting figures need a stable width so the layout cannot jump. ---- */

.mc-home .mc-stat-value {
	font-variant-numeric: tabular-nums;
}

/* --- The brand strip gets a gradient underline on hover. ---------------- */

.mc-home .mc-brand-tile::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--mc-gradient);
	transform: scaleX(0);
	transition: transform 0.4s ease;
}

.mc-home .mc-brand-tile:hover::after {
	transform: scaleX(1);
}

/* --- Quote cards carry a brand edge. ------------------------------------ */

.mc-home .mc-quote-stage {
	position: relative;
}

.mc-home .mc-quote-stage::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--mc-gradient);
	border-radius: var(--v2-radius) 0 0 var(--v2-radius);
}

@media (prefers-reduced-motion: reduce) {
	.mc-home .mc-media {
		clip-path: none;
		margin-top: 0;
		padding-top: var(--mc-space-section);
	}

	.mc-home .mc-division,
	.mc-home .mc-brand-tile,
	.mc-home .mc-media-card,
	.mc-home .mc-project,
	.mc-home .mc-exhibition,
	.mc-home .mc-stat {
		transition-delay: 0s;
	}
}

@media (max-width: 700px) {
	.mc-home .mc-media {
		clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
		margin-top: -5vw;
		padding-top: calc(var(--mc-space-section) + 5vw);
	}

	.mc-home.mc-scrolled .mc-nav-wrap {
		min-height: 68px;
	}
}