/**
 * MAXMEDIA — supplemental styles.
 *
 * theme.json carries the design tokens (palette, type scale, spacing, buttons).
 * This file carries what theme.json cannot express: the sticky header, the
 * logo marquee, card hover states, the icon-pattern section textures from
 * Styleguide.pdf p.41, and the floating WhatsApp button.
 *
 * Every colour below resolves to a theme.json preset. The brand guidelines
 * forbid off-brand colour, so there are no raw hex values here.
 */

:root {
	--mm-yellow: var(--wp--preset--color--maximum-yellow);
	--mm-black: var(--wp--preset--color--black);
	--mm-ink: var(--wp--preset--color--ink);
	--mm-ink-900: var(--wp--preset--color--ink-900);
	--mm-white: var(--wp--preset--color--white);
	--mm-stone: var(--wp--preset--color--stone-grey);
	--mm-stone-50: var(--wp--preset--color--stone-50);
	--mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mm-header-h: 76px;
}

/* ---------------------------------------------------------------- basics */

html {
	scroll-behavior: smooth;
}

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

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

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Headings run at display sizes, so a single long word — an archive title
 * like "Telecommunications" — is wider than a phone viewport and pushes the
 * whole page sideways. Break it rather than let it overflow.
 */
:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

:where(a, button, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--mm-yellow);
	outline-offset: 3px;
	border-radius: 2px;
}

/* On yellow surfaces the yellow focus ring is invisible — switch to black. */
.has-maximum-yellow-background-color :where(a, button, .wp-block-button__link):focus-visible {
	outline-color: var(--mm-black);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------- sections */

.mm-section {
	position: relative;
	isolation: isolate;
}

/* Icon-pattern texture (Styleguide.pdf p.41). Sits behind content, never over. */
.mm-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: repeat;
	background-size: 460px 460px;
	pointer-events: none;
}

.mm-pattern--black::before {
	background-image: url("../img/pattern-on-black.svg");
}

.mm-pattern--yellow::before {
	background-image: url("../img/pattern-on-yellow.svg");
}

.mm-pattern--white::before {
	background-image: url("../img/pattern-on-white.svg");
}

/* Behind dense copy (footer columns, the CTA band) the texture needs backing off. */
.mm-pattern--subtle::before {
	opacity: 0.45;
}

/* Fade the texture out toward the bottom so type stays clean. */
.mm-pattern--fade::before {
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}

/* Small uppercase section label. */
.mm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mm-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--mm-yellow);
}

.has-maximum-yellow-background-color .mm-eyebrow::before {
	background: var(--mm-black);
}

/* Inline accent for a word or two inside an otherwise plain heading. */
.mm-highlight {
	color: var(--mm-yellow);
}

/* Arrow link — "View Project →", "Learn More About Us" etc. */
.mm-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
	transition: gap 0.25s var(--mm-ease), color 0.2s var(--mm-ease);
}

.mm-arrow::after {
	content: "→";
	transition: transform 0.25s var(--mm-ease);
}

.mm-arrow:hover {
	gap: 0.85rem;
	color: var(--mm-yellow);
}

.has-maximum-yellow-background-color .mm-arrow:hover,
.mm-card:hover .mm-arrow {
	color: inherit;
}

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

/*
 * The stickiness lives on the template-part wrapper, not on .mm-header.
 * WordPress wraps every template part in its own <div>, and a sticky element
 * can only travel within its parent's box — a wrapper exactly as tall as the
 * header leaves zero room to stick, so the bar just scrolled away with the
 * page. Sticking the wrapper itself gives it the whole document to move in.
 */
.wp-block-template-part:has( > .mm-header ) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Global styles put `margin-block-start: 1.5rem` on every top-level block,
 * which lands on the <main> right below the header and reads as a white band
 * under the bar. The header sits flush against the content below it.
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.mm-header {
	background: var(--mm-black);
	border-bottom: 1px solid transparent;
	transition: transform 0.3s var(--mm-ease), box-shadow 0.3s var(--mm-ease),
		border-color 0.3s var(--mm-ease);
}

.mm-header.is-scrolled {
	border-bottom-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/*
 * Scrolling down tucks the bar away; scrolling up brings it straight back,
 * anywhere on the page (see stickyHeader() in theme.js). The extra pixel of
 * travel hides the border/shadow along with the bar.
 */
.mm-header.is-tucked {
	transform: translateY(calc(-100% - 1px));
}

/*
 * A transform makes the header the containing block for any fixed-position
 * descendant — which would drag the mobile menu's full-screen overlay along
 * with it. While that overlay is open, the bar stays put.
 */
.has-modal-open .mm-header {
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.mm-header {
		transition: box-shadow 0.3s var(--mm-ease), border-color 0.3s var(--mm-ease);
	}
}

.mm-logo {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.mm-logo svg {
	display: block;
	width: auto;
	height: 38px;
}

@media (max-width: 600px) {
	.mm-logo svg {
		height: 32px;
	}
}

.mm-footer .mm-logo svg {
	height: 44px;
}

/* Nav links: yellow underline that grows in, no layout shift. */
.mm-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 4px;
}

.mm-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--mm-yellow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--mm-ease);
}

.mm-nav .wp-block-navigation-item__content:hover::after,
.mm-nav .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* The core Navigation block's mobile overlay, on brand. */
.mm-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mm-black);
	color: var(--mm-white);
	padding: 1.5rem clamp(1.25rem, 5vw, 3rem) 3rem;
}

.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ hero */

.mm-hero {
	min-height: min(86vh, 900px);
	display: flex;
	align-items: center;
	/*
	 * Optional background photo, set under Appearance → Customize → MAXMEDIA.
	 * --mm-hero-layers is emitted server-side and already carries the darkening
	 * scrim ahead of the image URL; with nothing set it resolves to `none` and
	 * the section falls back to flat black plus the icon texture.
	 *
	 * The photo lives on the element's own background, which paints *below*
	 * the .mm-pattern ::before texture — so the texture, the fade mask and the
	 * black base all keep working over the top of it.
	 */
	background-image: var(--mm-hero-layers, none);
	background-size: cover;
	background-position: var(--mm-hero-position, center);
	background-repeat: no-repeat;
}

/* Dial the icon texture back when a photo is behind it, so the two don't
   compete. Falls back to full strength when there is no photo. */
.mm-hero.mm-pattern::before {
	opacity: var(--mm-hero-texture, 1);
}

.mm-hero h1 .mm-hl {
	color: var(--mm-yellow);
}

/* ------------------------------------------------------- single post hero */

/*
 * The title band on single.html / single-service.html, with the post's own
 * featured image behind it. --mm-post-hero-layers is emitted server-side by
 * maxmedia_post_hero_background_css() and already carries the scrim ahead of
 * the image URL; with no featured image it resolves to `none` and the band is
 * flat black plus the icon texture. Same layering as .mm-hero: the photo sits
 * on the element's own background, below the .mm-pattern ::before texture.
 *
 * The height is unconditional so a post without a photo still gets a title
 * band of the same weight.
 */
.mm-post-hero {
	min-height: min(58vh, 640px);
	display: flex;
	/* Column, so the constrained-layout child still stretches to full width
	   while the block itself is pushed to the bottom of the band. */
	flex-direction: column;
	justify-content: flex-end;
	background-image: var(--mm-post-hero-layers, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Dial the icon texture back when a photo is behind it. */
.mm-post-hero.mm-pattern::before {
	opacity: var(--mm-post-hero-texture, 1);
}

/* ------------------------------------------------------------ trust bar */

.mm-stats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: rgba(0, 0, 0, 0.18);
	border-block: 1px solid rgba(0, 0, 0, 0.18);
}

.mm-stat {
	background: var(--mm-yellow);
	padding: clamp(1.5rem, 3vw, 2.25rem) 1rem;
	text-align: center;
}

.mm-stat__num {
	display: block;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--mm-black);
}

.mm-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-black);
	opacity: 0.72;
}

/*
 * The About Us band carries five figures, not the homepage's six. Only the
 * widest track needs overriding — below 900px the rules that follow take it
 * to 3+2, then 2+2+1, which lands evenly either way.
 */
@media (min-width: 901px) {
	.mm-stats--about {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 900px) {
	.mm-stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 520px) {
	.mm-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------- logo marquee */

.mm-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mm-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	animation: mm-scroll 42s linear infinite;
}

.mm-marquee:hover .mm-marquee__track {
	animation-play-state: paused;
}

.mm-marquee img {
	height: 42px;
	width: auto;
	flex: none;
	opacity: 0.7;
	transition: opacity 0.25s var(--mm-ease);
}

.mm-marquee img:hover {
	opacity: 1;
}

@keyframes mm-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* With reduced motion the track stops and simply wraps instead. */
@media (prefers-reduced-motion: reduce) {
	.mm-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mm-marquee__track {
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
		row-gap: 2rem;
		animation: none;
	}
}

/* ------------------------------------------------------------- cards */

.mm-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.mm-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

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

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

@media (max-width: 640px) {
	.mm-grid--3,
	.mm-grid--2 {
		grid-template-columns: 1fr;
	}
}

/* Service card — black outline, fills yellow on hover. */
.mm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	border: 2px solid var(--mm-ink);
	border-radius: 18px;
	background: var(--mm-white);
	color: var(--mm-ink);
	text-decoration: none;
	transition: background 0.3s var(--mm-ease), transform 0.3s var(--mm-ease), color 0.3s var(--mm-ease);
}

/* Anchor-scoped: the Why Choose Us cards are plain <div>s, and a card that
 * fills on hover but goes nowhere reads as a broken link. */
a.mm-card:hover,
a.mm-card:focus-within {
	background: var(--mm-yellow);
	color: var(--mm-black);
	transform: translateY(-4px);
}

.mm-card__icon {
	width: 44px;
	height: 44px;
	margin-bottom: 0.35rem;
	color: currentColor;
}

.mm-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.mm-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.mm-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/*
 * Five services in a three-across grid leaves a two-card orphan row. A
 * six-column track with each card spanning two lets the last row start at
 * column 2, so it centres under the row above.
 */
@media (min-width: 901px) {
	.mm-grid--center-last {
		grid-template-columns: repeat(6, 1fr);
	}

	.mm-grid--center-last > * {
		grid-column: span 2;
	}

	.mm-grid--center-last > :nth-child(4) {
		grid-column: 2 / span 2;
	}

	.mm-grid--center-last > :nth-child(5) {
		grid-column: 4 / span 2;
	}
}

/* ------------------------------------------------ beyond client work cards */

/*
 * Same photo-over-copy shape as .mm-project, but these are not links, so the
 * hover lift and image scale are deliberately left off — nothing here is
 * clickable and the card should not pretend otherwise.
 */
.mm-initiative {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	border: 2px solid var(--mm-ink);
	background: var(--mm-white);
	color: var(--mm-ink);
}

.mm-initiative__media {
	display: block;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.mm-initiative__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mm-initiative__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.2vw, 1.9rem);
}

.mm-initiative h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.mm-initiative p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ---------------------------------------------------------- project cards */

/*
 * One card design, two hosts: the homepage carousel builds it by hand as a
 * single <a>, while the Our Work grid is a core Query Loop whose <li> holds
 * separate links for the image, title and read-more. Selectors below are
 * paired so both stay identical — the split-link version is also the more
 * accessible of the two, so the grid is not a compromise.
 */
.mm-project,
.mm-projects-grid > li {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	/* Ink 900 on a black section needs a hairline to read as a surface. */
	background: var(--mm-ink-900);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--mm-white);
	text-decoration: none;
	isolation: isolate;
	transition: border-color 0.3s var(--mm-ease);
}

.mm-project:hover,
.mm-projects-grid > li:hover {
	border-color: var(--mm-yellow);
}

.mm-project__media,
.mm-projects-grid > li > .wp-block-post-featured-image {
	display: block;
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.mm-project__media img,
.mm-projects-grid > li > .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--mm-ease);
}

.mm-project:hover .mm-project__media img,
.mm-projects-grid > li:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.mm-project__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.2vw, 1.9rem);
}

/* Push the arrow to the bottom so cards of unequal copy length line up. */
.mm-project__body .mm-arrow {
	margin-top: auto;
}

.mm-project h3,
.mm-projects-grid .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.mm-projects-grid .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.mm-projects-grid > li:hover .wp-block-post-title a {
	color: var(--mm-yellow);
}

.mm-project p,
.mm-projects-grid .wp-block-post-excerpt,
.mm-projects-grid .wp-block-post-excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.74);
}

/* ------------------------------------------------------ our work grid */

.mm-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1000px) {
	.mm-projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.mm-projects-grid {
		grid-template-columns: 1fr;
	}
}

/* core/post-terms renders the taxonomy links inside the pill wrapper. */
.mm-projects-grid .wp-block-post-terms.mm-pill a {
	color: inherit;
	text-decoration: none;
}

.mm-projects-grid .wp-block-post-terms__separator {
	margin-inline: 0.25rem;
}

.mm-projects-grid .wp-block-read-more {
	margin-top: auto;
}

/* Pagination under the grid. */
.mm-pagination {
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.mm-pagination a,
.mm-pagination span {
	text-decoration: none;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
}

.mm-pagination a:hover {
	background: var(--mm-yellow);
	color: var(--mm-black);
}

.mm-pagination .current {
	background: var(--mm-yellow);
	color: var(--mm-black);
}

/*
 * Services on a card. Deliberately quieter than the yellow field pill: the
 * field is the one-word category, the services are the supporting detail.
 */
.mm-service-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.mm-service-tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s var(--mm-ease), color 0.2s var(--mm-ease);
}

a.mm-service-tag:hover {
	border-color: var(--mm-yellow);
	color: var(--mm-yellow);
}

.mm-pill {
	align-self: flex-start;
	display: inline-block;
	padding: 0.32rem 0.8rem;
	border-radius: 999px;
	background: var(--mm-yellow);
	color: var(--mm-black);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/*
 * Service card — image on the side, icon badge + title + short description
 * on the other. Same white/ink/yellow family as .mm-card, but with a photo
 * slot for the Featured Image, since a service is a page of its own rather
 * than just a pop-up link.
 */
.mm-service-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 100%;
	min-height: clamp(300px, 26vw, 380px);
	overflow: hidden;
	border: 2px solid var(--mm-ink);
	border-radius: 18px;
	background: linear-gradient(135deg, var(--mm-white) 0%, var(--mm-stone-50) 60%, color-mix(in srgb, var(--mm-yellow) 20%, var(--mm-white)) 100%);
	color: var(--mm-ink);
	text-decoration: none;
	transition: border-color 0.3s var(--mm-ease), transform 0.3s var(--mm-ease);
}

.mm-service-card:hover,
.mm-service-card:focus-within {
	border-color: var(--mm-yellow);
	transform: translateY(-4px);
}

.mm-service-card__media {
	position: relative;
	flex: 0 0 42%;
	overflow: hidden;
}

.mm-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--mm-ease);
}

.mm-service-card:hover .mm-service-card__media img {
	transform: scale(1.04);
}

.mm-service-card__icon {
	width: 44px;
	height: 44px;
	margin-bottom: 0.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: var(--mm-yellow);
	border: 2px solid var(--mm-ink);
	border-radius: 12px;
	color: var(--mm-ink);
}

.mm-service-card__icon svg {
	width: 24px;
	height: 24px;
}

.mm-service-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.5rem;
	min-width: 0;
}

.mm-service-card__body .mm-arrow {
	margin-top: auto;
	padding-top: 0.5rem;
}

.mm-service-card:hover .mm-arrow {
	color: var(--mm-yellow);
}

.mm-service-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.mm-service-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* Cards get cramped stacking image-beside-text below ~480px; fall back to
   image-on-top there, same as before. */
@media (max-width: 480px) {
	.mm-service-card {
		flex-direction: column;
	}

	.mm-service-card__media {
		flex: 0 0 auto;
		aspect-ratio: 3 / 2;
	}
}

/* Icon badge in the single-service hero — no card around it, just the chip. */
.mm-service-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	background: var(--mm-yellow);
	border-radius: 14px;
	color: var(--mm-black);
}

.mm-service-hero__icon svg {
	width: 30px;
	height: 30px;
}

/* -------------------------------------------------------------- carousel */

/*
 * The viewport is a genuine scroll container with scroll-snap, so swipe,
 * trackpad and keyboard panning come from the browser. The buttons and dots
 * only set scrollLeft, which keeps the whole thing working without JS.
 */
.mm-carousel {
	--mm-carousel-gap: clamp(1rem, 2vw, 1.5rem);
	--mm-carousel-per-view: 3;
	position: relative;
}

.mm-carousel__viewport {
	display: flex;
	gap: var(--mm-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/*
	 * Proximity, not mandatory: 7 cards over 3-across leaves a partial last
	 * page whose snap point sits past the maximum scroll. Mandatory snapping
	 * would refuse to rest there and drag the carousel back, making the final
	 * card unreachable. Proximity still snaps on a free swipe.
	 */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* Room for card focus rings and the hover lift, which would otherwise clip. */
	padding: 6px;
	margin: -6px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mm-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.mm-carousel__viewport:focus-visible {
	outline: 3px solid var(--mm-yellow);
	outline-offset: 2px;
	border-radius: 22px;
}

.mm-carousel__slide {
	flex: 0 0 calc(
		(100% - (var(--mm-carousel-per-view) - 1) * var(--mm-carousel-gap)) /
		var(--mm-carousel-per-view)
	);
	scroll-snap-align: start;
	display: flex;
}

.mm-carousel__slide > .mm-project,
.mm-carousel__slide > .mm-service-card {
	width: 100%;
}

/* Side-image service cards need more width per card than the 3-across
   project carousel to avoid squeezing the image and copy. */
.mm-carousel--services {
	--mm-carousel-per-view: 2;
}

@media (max-width: 1000px) {
	.mm-carousel {
		--mm-carousel-per-view: 2;
	}

	.mm-carousel--services {
		--mm-carousel-per-view: 1;
	}
}

@media (max-width: 640px) {
	.mm-carousel {
		--mm-carousel-per-view: 1;
	}
}

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

.mm-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
}

.mm-carousel__controls[hidden] {
	display: none;
}

.mm-carousel__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	padding: 0;
	border-radius: 999px;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.25s var(--mm-ease), color 0.25s var(--mm-ease),
		border-color 0.25s var(--mm-ease), opacity 0.25s var(--mm-ease);
}

.mm-carousel__btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.mm-carousel__btn:hover:not(:disabled) {
	background: var(--mm-yellow);
	border-color: var(--mm-yellow);
	color: var(--mm-black);
}

.mm-carousel__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.mm-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mm-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	/* Buttons do not inherit colour from their parent — without this,
	   currentColor falls back to the UA default black and the inactive dots
	   vanish against the black section. */
	color: inherit;
	background: currentColor;
	/* The projects section sits on the icon pattern; below ~0.45 the inactive
	   dots disappear into it. */
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.25s var(--mm-ease), width 0.25s var(--mm-ease),
		background 0.25s var(--mm-ease);
}

.mm-carousel__dot:hover {
	opacity: 0.75;
}

.mm-carousel__dot[aria-current="true"] {
	width: 28px;
	opacity: 1;
	background: var(--mm-yellow);
}

/* Core sets the border radius on the figure, so the image needs clipping to
   follow it — otherwise a single project's hero image has square corners
   while every other surface on the site is rounded. */
.wp-block-post-featured-image {
	overflow: hidden;
}

/* --------------------------------------------------- single project meta */

.mm-project-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin: clamp(2rem, 4vw, 3rem) 0;
	padding: clamp(1.5rem, 3vw, 2rem) 0;
	border-block: 1px solid rgba(35, 31, 32, 0.12);
}

.mm-project-meta__row {
	margin: 0;
}

.mm-project-meta dt {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-stone);
}

.mm-project-meta dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.55;
}

.mm-project-meta__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mm-project-meta__tags a {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(35, 31, 32, 0.2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s var(--mm-ease), border-color 0.2s var(--mm-ease);
}

.mm-project-meta__tags a:hover {
	background: var(--mm-yellow);
	border-color: var(--mm-yellow);
	color: var(--mm-black);
}

/* The industry pill sits on the black hero of a single project. */
.wp-block-post-terms.mm-pill {
	display: inline-block;
}

.wp-block-post-terms.mm-pill a {
	color: inherit;
	text-decoration: none;
}

/* ----------------------------------------------------------- testimonials */

.mm-quote {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	/* <figure> carries a UA margin that would push the card out of its cell. */
	margin: 0;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	border-radius: 18px;
	background: var(--mm-white);
	border: 1px solid rgba(35, 31, 32, 0.1);
	/*
	 * No height: 100% here. These are grid items, so they already stretch to
	 * the row. A percentage height resolves against an auto-sized row, which
	 * is indefinite while the row is still being measured — the row ends up
	 * shorter than the card and the card spills past the section.
	 */
}

.mm-quote__mark {
	font-size: 4.5rem;
	line-height: 0.6;
	height: 2rem;
	font-weight: 900;
	color: var(--mm-yellow);
	user-select: none;
}

.mm-quote blockquote {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	letter-spacing: -0.015em;
	font-weight: 500;
}

.mm-quote figcaption {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mm-ink);
}

.mm-quote figcaption strong {
	display: block;
	font-weight: 700;
}

.mm-quote figcaption span {
	color: var(--mm-stone);
}

/* ---------------------------------------------------------------- footer */

.mm-footer a {
	text-decoration: none;
}

.mm-footer a:hover {
	color: var(--mm-yellow);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mm-footer__cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
	.mm-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.mm-footer__cols {
		grid-template-columns: 1fr;
	}
}

.mm-footer h2 {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mm-yellow);
	margin: 0 0 1.1rem;
}

.mm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}

.mm-social {
	display: flex;
	gap: 0.6rem;
}

.mm-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--mm-white);
	transition: background 0.25s var(--mm-ease), color 0.25s var(--mm-ease), border-color 0.25s var(--mm-ease);
}

.mm-social a:hover {
	background: var(--mm-yellow);
	border-color: var(--mm-yellow);
	color: var(--mm-black);
	text-decoration: none;
}

.mm-social svg {
	width: 18px;
	height: 18px;
	display: block;
}

.mm-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	font-size: var(--wp--preset--font-size--x-small);
	color: rgba(255, 255, 255, 0.55);
}

/* Placeholders the content brief leaves blank, e.g. [Email], [Phone]. */
.mm-todo {
	color: var(--mm-stone);
	font-style: normal;
}

/* -------------------------------------------------------- whatsapp float */

.mm-whatsapp {
	position: fixed;
	inset-inline-end: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 200;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--mm-yellow);
	color: var(--mm-black);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s var(--mm-ease);
}

.mm-whatsapp:hover {
	transform: translateY(-3px) scale(1.05);
}

/* ---------------------------------------------------------------- editor */

/* Keep the sticky header from covering blocks inside the Site Editor canvas. */
.editor-styles-wrapper .mm-header,
.editor-styles-wrapper .wp-block-template-part:has( > .mm-header ) {
	position: relative;
}