/**
 * Mahmoudi Group — core stylesheet.
 *
 * Contents
 *   1. Tokens
 *   2. Reset and base
 *   3. Typography
 *   4. Layout primitives
 *   5. Buttons, links, forms
 *   6. Header and navigation
 *   7. Footer
 *   8. Editorial content
 *   9. Utilities and motion
 */

/* ==========================================================================
   1. Tokens
   The primary, accent, ink, radius and shell values are injected from the
   theme options as inline CSS, so the fallbacks here only matter before
   those load or in a child theme that drops them.
   ========================================================================== */

@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--mg-primary: #7a1028;
	--mg-primary-rgb: 122, 16, 40;
	--mg-accent: #b08a4a;
	--mg-accent-rgb: 176, 138, 74;
	--mg-ink: #161314;
	--mg-ink-rgb: 22, 19, 20;
	--mg-radius: 14px;
	--mg-shell: 1240px;

	/* Surfaces. A stone-tinted neutral rather than a warm cream: it sits
	   under photographs of concrete and marble without yellowing them. */
	--mg-bg: #ffffff;
	--mg-bg-rgb: 255, 255, 255;
	--mg-surface: #f4f2f0;
	--mg-surface-2: #eae6e3;
	--mg-line: rgba(var(--mg-ink-rgb), 0.12);
	--mg-line-strong: rgba(var(--mg-ink-rgb), 0.22);

	--mg-text: rgba(var(--mg-ink-rgb), 0.92);
	--mg-muted: rgba(var(--mg-ink-rgb), 0.62);
	--mg-faint: rgba(var(--mg-ink-rgb), 0.42);
	--mg-inverse: #ffffff;

	/* Links are the brand burgundy on light surfaces. On a near-black
	   background that reads as muddy, so night mode swaps it for the brass
	   accent, which clears contrast comfortably. */
	--mg-link: var(--mg-primary);

	/* Type scale: 1.22 ratio, fluid between 420px and 1240px. */
	--mg-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--mg-step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
	--mg-step-1: clamp(1.12rem, 1.05rem + 0.34vw, 1.35rem);
	--mg-step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.85rem);
	--mg-step-3: clamp(1.7rem, 1.4rem + 1.3vw, 2.6rem);
	--mg-step-4: clamp(2.1rem, 1.55rem + 2.4vw, 3.8rem);

	--mg-space-1: 0.5rem;
	--mg-space-2: 0.85rem;
	--mg-space-3: 1.35rem;
	--mg-space-4: 2rem;
	--mg-space-5: 3rem;
	--mg-space-6: 4.5rem;
	--mg-section: clamp(3.5rem, 2rem + 6vw, 7rem);

	--mg-shadow-sm: 0 1px 2px rgba(var(--mg-ink-rgb), 0.05), 0 4px 14px rgba(var(--mg-ink-rgb), 0.05);
	--mg-shadow-md: 0 12px 36px rgba(var(--mg-ink-rgb), 0.1);
	--mg-shadow-lg: 0 28px 70px rgba(var(--mg-ink-rgb), 0.18);

	--mg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mg-header-h: 78px;
}

/* Night mode is an override layer on the same variables, so a custom
   palette set in the admin survives the switch. */
[data-theme="dark"] {
	--mg-bg: #121011;
	--mg-bg-rgb: 18, 16, 17;
	--mg-surface: #1a1718;
	--mg-surface-2: #232021;
	--mg-line: rgba(255, 255, 255, 0.1);
	--mg-line-strong: rgba(255, 255, 255, 0.2);

	--mg-text: rgba(255, 255, 255, 0.9);
	--mg-muted: rgba(255, 255, 255, 0.62);
	--mg-faint: rgba(255, 255, 255, 0.4);
	--mg-inverse: #121011;
	--mg-link: var(--mg-accent);

	--mg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--mg-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.5);
	--mg-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);

	color-scheme: dark;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mg-header-h) + 1rem);
}

body {
	font-family: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
	font-size: var(--mg-step-0);
	line-height: 1.85;
	color: var(--mg-text);
	background: var(--mg-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.mg-nav-open {
	overflow: hidden;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--mg-link);
	text-decoration: none;
	transition: color 0.2s var(--mg-ease);
}

a:hover {
	color: var(--mg-accent);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--mg-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: rgba(var(--mg-primary-rgb), 0.9);
	color: #fff;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--mg-text);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Latin numerals and codes read better slightly tracked out and lighter
   than the surrounding Persian text. */
code,
kbd,
samp,
[dir="ltr"] {
	font-variant-numeric: tabular-nums;
}

.mg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--mg-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mg-link);
	margin-bottom: var(--mg-space-2);
}

/* The brass seam: a short rule that opens every section label. It is the
   one repeated ornament in the design, borrowed from the metal inlay used
   in the stonework these projects are known for. */
.mg-eyebrow__rule {
	display: block;
	width: 32px;
	height: 2px;
	background: linear-gradient(90deg, var(--mg-accent), rgba(var(--mg-accent-rgb), 0.15));
	border-radius: 2px;
}

.mg-eyebrow--light {
	color: rgba(255, 255, 255, 0.86);
}

.mg-section__title {
	font-size: var(--mg-step-3);
	margin-bottom: var(--mg-space-2);
}

.mg-section__lead {
	color: var(--mg-muted);
	max-width: 46ch;
}

.mg-section__head {
	margin-bottom: var(--mg-space-5);
}

.mg-section__head--center {
	text-align: center;
}

.mg-section__head--center .mg-eyebrow {
	justify-content: center;
}

.mg-section__head--split {
	display: grid;
	gap: var(--mg-space-3);
	align-items: end;
}

@media (min-width: 900px) {
	.mg-section__head--split {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--mg-space-5);
	}
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.mg-shell {
	width: min(100% - 2.5rem, var(--mg-shell));
	margin-inline: auto;
}

.mg-section {
	padding-block: var(--mg-section);
}

.mg-main {
	padding-bottom: var(--mg-space-6);
}

.mg-layout {
	display: grid;
	gap: var(--mg-space-5);
	padding-top: var(--mg-space-5);
}

@media (min-width: 1000px) {
	.mg-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	body.mg-no-sidebar .mg-layout,
	.mg-layout--narrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.mg-layout--narrow .mg-layout__content {
		max-width: 76ch;
		margin-inline: auto;
	}

	.mg-layout--project {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

.mg-grid {
	display: grid;
	gap: var(--mg-space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

@media (min-width: 1000px) {
	.mg-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.mg-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mg-grid__empty {
	text-align: center;
	color: var(--mg-muted);
	padding-block: var(--mg-space-5);
}

/* ==========================================================================
   5. Buttons, links, forms
   ========================================================================== */

.mg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--mg-step--1);
	line-height: 1.4;
	border: 1px solid transparent;
	transition: transform 0.2s var(--mg-ease), background-color 0.2s var(--mg-ease),
		color 0.2s var(--mg-ease), border-color 0.2s var(--mg-ease), box-shadow 0.2s var(--mg-ease);
}

.mg-button:hover {
	transform: translateY(-2px);
}

.mg-button:active {
	transform: translateY(0);
}

.mg-button--solid {
	background: var(--mg-primary);
	color: #fff;
	box-shadow: 0 8px 24px rgba(var(--mg-primary-rgb), 0.28);
}

.mg-button--solid:hover {
	background: var(--mg-primary);
	filter: brightness(0.88);
	color: #fff;
}

.mg-button--outline {
	border-color: var(--mg-line-strong);
	color: var(--mg-text);
	background: transparent;
}

.mg-button--outline:hover {
	border-color: var(--mg-primary);
	color: var(--mg-primary);
}

.mg-button--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.08);
}

.mg-button--ghost:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border-color: #fff;
}

.mg-text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: var(--mg-step--1);
	color: var(--mg-link);
}

.mg-text-link .mg-icon {
	transition: transform 0.2s var(--mg-ease);
}

.mg-text-link:hover .mg-icon {
	transform: translateX(var(--mg-nudge, -4px));
}

[dir="ltr"] .mg-text-link:hover .mg-icon {
	--mg-nudge: 4px;
}

.mg-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
	transition: border-color 0.2s var(--mg-ease), background-color 0.2s var(--mg-ease);
}

.mg-icon-button:hover {
	border-color: var(--mg-primary);
	background: rgba(var(--mg-primary-rgb), 0.06);
}

/* Forms */

.mg-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--mg-space-2);
}

.mg-field label {
	font-size: var(--mg-step--1);
	font-weight: 700;
	color: var(--mg-muted);
}

.mg-field input[type="text"],
.mg-field input[type="tel"],
.mg-field input[type="email"],
.mg-field input[type="url"],
.mg-field input[type="search"],
.mg-field input[type="number"],
.mg-field select,
.mg-field textarea,
.mg-form input:not([type="checkbox"]):not([type="submit"]),
.mg-form textarea,
.mg-form select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--mg-line);
	border-radius: calc(var(--mg-radius) * 0.7);
	background: var(--mg-bg);
	color: var(--mg-text);
	transition: border-color 0.2s var(--mg-ease), box-shadow 0.2s var(--mg-ease);
}

.mg-field textarea,
.mg-form textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.8;
}

.mg-field input:focus,
.mg-field select:focus,
.mg-field textarea:focus,
.mg-form input:focus,
.mg-form textarea:focus,
.mg-form select:focus {
	outline: none;
	border-color: var(--mg-primary);
	box-shadow: 0 0 0 3px rgba(var(--mg-primary-rgb), 0.14);
}

.mg-field--check label {
	flex-direction: row;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 500;
	color: var(--mg-muted);
	font-size: var(--mg-step--1);
	cursor: pointer;
}

.mg-field--check input {
	margin-top: 0.45rem;
	accent-color: var(--mg-primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* The honeypot must be reachable by a bot parsing the DOM and invisible to
   everyone else. It is clipped rather than pushed off-canvas: a negative
   offset widens the scrollable area, which in an RTL document shifts the
   whole page sideways. */
.mg-field--trap {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	pointer-events: none;
}

.mg-field__error {
	font-size: var(--mg-step--1);
	color: #c0392b;
	min-height: 0;
}

.mg-field.is-invalid input,
.mg-field.is-invalid textarea,
.mg-field.is-invalid select {
	border-color: #c0392b;
}

.mg-form__row {
	display: grid;
	gap: var(--mg-space-2);
}

@media (min-width: 600px) {
	.mg-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mg-form__submit {
	width: 100%;
	margin-top: var(--mg-space-2);
}

.mg-form__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mg-form__notice {
	margin-top: var(--mg-space-2);
	padding: 0;
	border-radius: calc(var(--mg-radius) * 0.7);
	font-size: var(--mg-step--1);
}

.mg-form__notice.is-success,
.mg-form__notice.is-error {
	padding: 0.9rem 1.1rem;
}

.mg-form__notice.is-success {
	background: rgba(46, 125, 50, 0.1);
	color: #2e7d32;
}

.mg-form__notice.is-error {
	background: rgba(192, 57, 43, 0.1);
	color: #c0392b;
}

/* The notice colours were picked against a white card. On the night palette the
   same green and red sit at roughly 3.3:1 against their own tinted background,
   so both are lightened and the tint is strengthened. */
[data-theme="dark"] .mg-form__notice.is-success {
	background: rgba(46, 125, 50, 0.16);
	color: #7fd486;
}

[data-theme="dark"] .mg-form__notice.is-error {
	background: rgba(192, 57, 43, 0.16);
	color: #ff8a80;
}

.mg-form__code {
	display: block;
	margin-top: 0.4rem;
}

.mg-form__code code {
	background: rgba(var(--mg-ink-rgb), 0.08);
	padding: 0.1rem 0.45rem;
	border-radius: 5px;
	letter-spacing: 0.06em;
}

.mg-search {
	display: flex;
	gap: 0.5rem;
	max-width: 420px;
}

.mg-search input {
	flex: 1;
	padding: 0.7rem 1rem;
	border: 1px solid var(--mg-line);
	border-radius: 999px;
	background: var(--mg-bg);
	color: var(--mg-text);
}

.mg-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mg-primary);
	color: #fff;
	flex-shrink: 0;
}

/* ==========================================================================
   6. Header and navigation
   ========================================================================== */

.mg-skip-link {
	position: absolute;
	top: -100px;
	inset-inline-start: 1rem;
	z-index: 200;
	padding: 0.7rem 1.2rem;
	background: var(--mg-primary);
	color: #fff;
	border-radius: 0 0 8px 8px;
	transition: top 0.2s var(--mg-ease);
}

.mg-skip-link:focus {
	top: 0;
	color: #fff;
}

.mg-header {
	position: relative;
	z-index: 100;
	color: var(--mg-header-solid-text, var(--mg-text));
	background: var(--mg-header-solid-bg, var(--mg-bg));
	border-bottom: 1px solid var(--mg-line);
	transition: background-color 0.3s var(--mg-ease), box-shadow 0.3s var(--mg-ease),
		border-color 0.3s var(--mg-ease);
}

body.mg-header-sticky .mg-header {
	position: sticky;
	top: 0;
}

/* On the front page the header floats over the hero photograph until the
   first scroll, then settles into a solid bar. */
body.mg-header-overlay .mg-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-color: transparent;
}

body.mg-header-overlay.mg-header-sticky .mg-header {
	position: fixed;
}

body.mg-header-overlay .mg-header:not(.is-stuck) .mg-brand__text strong,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-brand__text small,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-nav__list > li > a,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-icon-button,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-langs__trigger,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-burger__box i {
	color: var(--mg-header-overlay-text, #fff);
}

body.mg-header-overlay .mg-header:not(.is-stuck) .mg-burger__box i {
	background: var(--mg-header-overlay-text, #fff);
}

body.mg-header-overlay .mg-header:not(.is-stuck) .mg-icon-button,
body.mg-header-overlay .mg-header:not(.is-stuck) .mg-langs__trigger {
	border-color: var(--mg-header-overlay-text, rgba(255, 255, 255, .4));
}

/* This has to out-specify the overlay rule above, which also targets the
   header through a body class. */
body .mg-header.is-stuck {
	color: var(--mg-header-solid-text, var(--mg-text));
	background: rgba(var(--mg-header-solid-bg-rgb, var(--mg-bg-rgb)), var(--mg-header-stuck-opacity, .88));
	backdrop-filter: blur(14px);
	box-shadow: var(--mg-shadow-sm);
	border-color: var(--mg-line);
}

body:not(.mg-header-overlay) .mg-header .mg-brand__text strong,
body:not(.mg-header-overlay) .mg-header .mg-brand__text small,
body:not(.mg-header-overlay) .mg-header .mg-nav__list > li > a,
body:not(.mg-header-overlay) .mg-header .mg-icon-button,
body:not(.mg-header-overlay) .mg-header .mg-langs__trigger,
body .mg-header.is-stuck .mg-brand__text strong,
body .mg-header.is-stuck .mg-brand__text small,
body .mg-header.is-stuck .mg-nav__list > li > a,
body .mg-header.is-stuck .mg-icon-button,
body .mg-header.is-stuck .mg-langs__trigger {
	color: var(--mg-header-solid-text, var(--mg-text));
}

.mg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mg-space-3);
	min-height: var(--mg-header-h);
	/* The bar carries a brand, nine menu items and a button, which needs
	   more room than the 1240px reading measure the page content uses.
	   Letting the header run wider keeps everything on one line without
	   shrinking the type. */
	width: min(100% - 2.5rem, var(--mg-header-width, 1480px));
}

.mg-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--mg-header-brand-gap, .7rem);
	color: var(--mg-text);
	flex-shrink: 0;
	/* Keep the symbol physically to the left of the Latin MAHMOUDI wordmark,
	   regardless of the active Persian, Arabic or English page direction. */
	direction: ltr;
}

.mg-brand:hover {
	color: var(--mg-text);
}

.mg-brand__mark {
	width: var(--mg-header-logo, 44px);
	height: var(--mg-header-logo, 44px);
	border-radius: 0;
	object-fit: contain;
	background: transparent !important;
	filter: brightness(0);
	mix-blend-mode: normal;
	transition: filter 0.25s var(--mg-ease);
}

/* The bundled WebP has a real alpha channel, so these filters recolour only
   the logo pixels and can never create a rectangular background. */
body.mg-header-overlay.mg-overlay-logo-white .mg-header:not(.is-stuck) .mg-brand--header .mg-brand__mark {
	filter: brightness(0) invert(1);
}

body.mg-header-overlay.mg-overlay-logo-black .mg-header:not(.is-stuck) .mg-brand--header .mg-brand__mark {
	filter: brightness(0);
}

body.mg-solid-logo-black .mg-header.is-stuck .mg-brand--header .mg-brand__mark,
body.mg-solid-logo-black:not(.mg-header-overlay) .mg-brand--header .mg-brand__mark {
	filter: brightness(0);
}

body.mg-solid-logo-white .mg-header.is-stuck .mg-brand--header .mg-brand__mark,
body.mg-solid-logo-white:not(.mg-header-overlay) .mg-brand--header .mg-brand__mark {
	filter: brightness(0) invert(1);
}

.mg-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	direction: ltr;
	text-align: left;
}

.mg-brand__text strong {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.mg-brand__text small {
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	color: var(--mg-faint);
	font-weight: 600;
}

.mg-nav__list {
	display: flex;
	align-items: center;
	gap: var(--mg-header-nav-gap, .35rem);
}

.mg-nav__list > li > a {
	display: block;
	padding: 0.5rem 0.7rem;
	font-size: var(--mg-header-menu-font, var(--mg-step--1));
	font-weight: 600;
	color: var(--mg-text);
	border-radius: 999px;
	position: relative;
	/* English labels ("Testimonials & Awards") are far longer than their
	   Persian equivalents and would otherwise wrap the bar onto two lines. */
	white-space: nowrap;
	transition: color 0.2s var(--mg-ease);
}

.mg-nav__list > li > a:hover,
.mg-nav__list > li.current-menu-item > a,
.mg-nav__list > li > a.is-current {
	color: var(--mg-header-nav-hover, var(--mg-link));
}

/* Submenus */
.mg-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 200px;
	padding: 0.5rem;
	background: var(--mg-bg);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--mg-ease), transform 0.2s var(--mg-ease), visibility 0.2s;
}

.mg-nav__list > li {
	position: relative;
}

.mg-nav__list > li:hover > .sub-menu,
.mg-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mg-nav__list .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: var(--mg-step--1);
	color: var(--mg-text);
}

.mg-nav__list .sub-menu a:hover {
	background: var(--mg-surface);
	color: var(--mg-primary);
}

.mg-nav__foot {
	display: none;
}

.mg-header__tools {
	display: flex;
	align-items: center;
	gap: var(--mg-header-tools-gap, .6rem);
	flex-shrink: 0;
}

.mg-header .mg-button--solid {
	color: var(--mg-header-cta-text, #fff);
	background: var(--mg-header-cta-bg, var(--mg-primary));
	border-color: var(--mg-header-cta-bg, var(--mg-primary));
}

.mg-header .mg-button--solid:hover {
	color: var(--mg-header-cta-text, #fff);
	background: var(--mg-header-cta-bg, var(--mg-primary));
}

/* Header layouts
   ------------------------------------------------------------------------ */

/* Logo and navigation sit together, tools pushed to the far side. */
body.mg-header-inline .mg-header__inner {
	justify-content: flex-start;
	gap: var(--mg-space-4);
}

body.mg-header-inline .mg-header__tools {
	margin-inline-start: auto;
}

/* Logo centred, navigation on the row beneath it. */
@media (min-width: 1024px) {
	body.mg-header-center .mg-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			"tools brand spacer"
			"nav nav nav";
		row-gap: 0.4rem;
		padding-block: 0.75rem;
	}

	body.mg-header-center .mg-brand {
		grid-area: brand;
	}

	body.mg-header-center .mg-header__tools {
		grid-area: tools;
	}

	body.mg-header-center .mg-nav {
		grid-area: nav;
	}

	body.mg-header-center .mg-nav__list {
		justify-content: center;
		border-top: 1px solid var(--mg-line);
		padding-top: 0.35rem;
	}
}

/* The burger can be pinned to the start of the bar instead of sitting with
   the other tools. */
@media (max-width: 1023px) {
	body.mg-burger-start .mg-header__inner {
		flex-direction: row-reverse;
	}

	body.mg-burger-start .mg-header__tools {
		flex-direction: row-reverse;
	}
}

/* Language switcher */

.mg-langs {
	position: relative;
}

.mg-langs__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--mg-line);
	border-radius: 999px;
	font-size: var(--mg-step--1);
	font-weight: 600;
	color: var(--mg-text);
	transition: border-color 0.2s var(--mg-ease);
}

.mg-langs__trigger:hover {
	border-color: var(--mg-primary);
}

.mg-langs__trigger img {
	border-radius: 2px;
}

.mg-langs__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	inset-inline-end: 0;
	min-width: 160px;
	padding: 0.4rem;
	background: var(--mg-bg);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--mg-ease), transform 0.2s var(--mg-ease), visibility 0.2s;
	z-index: 20;
}

.mg-langs.is-open .mg-langs__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mg-langs__menu a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	font-size: var(--mg-step--1);
	color: var(--mg-text);
}

.mg-langs__menu a:hover {
	background: var(--mg-surface);
}

.mg-langs__menu a.is-current {
	color: var(--mg-link);
	font-weight: 700;
}

.mg-theme-toggle__moon {
	display: none;
}

[data-theme="dark"] .mg-theme-toggle__sun {
	display: none;
}

[data-theme="dark"] .mg-theme-toggle__moon {
	display: block;
}

/* Burger */

.mg-burger {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mg-line);
	border-radius: 12px;
}

.mg-burger__box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 20px;
}

.mg-burger__box i {
	display: block;
	height: 2px;
	background: var(--mg-header-burger, var(--mg-text));
	border-radius: 2px;
	transition: transform 0.28s var(--mg-ease), opacity 0.2s var(--mg-ease);
}

.mg-burger[aria-expanded="true"] .mg-burger__box i:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mg-burger[aria-expanded="true"] .mg-burger__box i:nth-child(2) {
	opacity: 0;
}

.mg-burger[aria-expanded="true"] .mg-burger__box i:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mg-nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(var(--mg-ink-rgb), 0.55);
	backdrop-filter: blur(3px);
	z-index: 98;
	opacity: 0;
	transition: opacity 0.3s var(--mg-ease);
}

.mg-nav-scrim.is-visible {
	opacity: 1;
}

@media (max-width: 1399px) {
	/* Below this the English navigation and the call to action cannot both
	   fit on one line. The button gives way first: it is repeated in the
	   hero and again in the contact section, so nothing is lost. */
	.mg-header__cta {
		display: none;
	}
}

@media (max-width: 1319px) {
	/* Tighter still: claw back a little padding rather than wrap the bar. */
	.mg-nav__list > li > a {
		padding-inline: 0.5rem;
	}

}

@media (max-width: 1199px) {
	/* The transparent-header rules above paint the navigation white so it
	   reads over the hero photograph. The mobile drawer has a solid
	   background of its own, so those colours have to be undone once it is
	   open, or the menu is white on white. The closed burger keeps the
	   white treatment, because it still sits over the photograph. */
	body.mg-header-overlay .mg-header:not(.is-stuck) .mg-nav.is-open .mg-nav__list > li > a,
	body.mg-header-overlay .mg-header:not(.is-stuck) .mg-nav.is-open .mg-langs__trigger,
	body.mg-header-overlay .mg-header:not(.is-stuck) .mg-nav.is-open .mg-langs__menu a {
		color: var(--mg-header-solid-text, var(--mg-text));
	}

	body.mg-header-overlay .mg-header:not(.is-stuck) .mg-burger[aria-expanded="true"] .mg-burger__box i {
		background: var(--mg-header-burger, var(--mg-text));
	}

	body.mg-header-overlay .mg-header:not(.is-stuck) .mg-burger[aria-expanded="true"] {
		border-color: var(--mg-line-strong);
	}

	.mg-burger {
		display: inline-flex;
		/* The drawer is fixed at z-index 99 and opens on the same side as
		   this button, so the button has to stay above it or the close
		   affordance ends up underneath the panel it controls. */
		position: relative;
		z-index: 101;
	}

	.mg-header__cta,
	.mg-header__tools .mg-langs--inline {
		display: none;
	}

	.mg-nav {
		position: fixed;
		inset-block: 0;
		width: min(88vw, 360px);
		padding: calc(var(--mg-header-h) + 1.5rem) 1.75rem 2rem;
		color: var(--mg-header-solid-text, var(--mg-text));
		background: var(--mg-header-solid-bg, var(--mg-bg));
		box-shadow: var(--mg-shadow-lg);
		/* Both the anchoring and the hidden offset are physical, and they must
		   agree: a drawer pinned left has to hide to the left. Mixing a
		   logical anchor with a physical transform throws the panel across
		   the viewport and drags the page sideways with it. */
		right: var(--mg-drawer-right, auto);
		left: var(--mg-drawer-left, 0);
		transform: translateX(var(--mg-nav-offset, -105%));
		transition: transform 0.35s var(--mg-ease);
		overflow-y: auto;
		z-index: 99;
		display: flex;
		flex-direction: column;
		gap: var(--mg-space-3);
	}

	/* Opens from the left. */
	body.mg-drawer-left {
		--mg-drawer-left: 0;
		--mg-drawer-right: auto;
		--mg-nav-offset: -105%;
	}

	/* Opens from the right. */
	body.mg-drawer-right {
		--mg-drawer-left: auto;
		--mg-drawer-right: 0;
		--mg-nav-offset: 105%;
	}

	.mg-nav.is-open {
		transform: translateX(0);
	}

	.mg-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mg-nav__list > li > a {
		padding: 0.9rem 0;
		border-bottom: 1px solid var(--mg-line);
		font-size: var(--mg-step-0);
		border-radius: 0;
	}

	.mg-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0.5rem;
		background: transparent;
	}

	.mg-nav__foot {
		display: flex;
		flex-direction: column;
		gap: var(--mg-space-2);
		margin-top: auto;
		padding-top: var(--mg-space-3);
	}

	.mg-langs--list .mg-langs__menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 1px solid var(--mg-line);
		display: flex;
		gap: 0.25rem;
	}

	.mg-langs--list .mg-langs__trigger {
		display: none;
	}

	.mg-langs--list .mg-langs__menu li {
		flex: 1;
	}

	.mg-langs--list .mg-langs__menu a {
		justify-content: center;
		padding: 0.45rem 0.3rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 1200px) {
	.mg-nav-scrim {
		display: none;
	}
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.mg-footer {
	background: var(--mg-surface);
	border-top: 1px solid var(--mg-line);
	padding-top: var(--mg-space-6);
	margin-top: var(--mg-space-6);
}

.mg-footer__grid {
	display: grid;
	gap: var(--mg-space-4);
	padding-bottom: var(--mg-space-5);
}

@media (min-width: 760px) {
	.mg-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mg-footer__grid {
		grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
		gap: var(--mg-space-5);
	}
}

.mg-footer__text {
	color: var(--mg-muted);
	font-size: var(--mg-step--1);
	margin-top: var(--mg-space-2);
	max-width: 40ch;
}

.mg-brand--footer {
	margin-bottom: 0.25rem;
}

[data-theme="dark"] .mg-brand--footer .mg-brand__mark {
	filter: brightness(0) invert(1);
}

[data-theme="light"] .mg-brand--footer .mg-brand__mark,
html:not([data-theme]) .mg-brand--footer .mg-brand__mark {
	filter: brightness(0);
}

.mg-social {
	display: flex;
	gap: 0.5rem;
	margin-top: var(--mg-space-3);
}

.mg-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--mg-line-strong);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mg-muted);
	transition: all 0.2s var(--mg-ease);
}

.mg-social a:hover {
	background: var(--mg-primary);
	border-color: var(--mg-primary);
	color: #fff;
}

.mg-footer__title {
	font-size: var(--mg-step--1);
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: var(--mg-space-2);
}

.mg-footer__title button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: inherit;
	font: inherit;
	text-align: start;
}

.mg-footer__title i {
	display: none;
	width: 10px;
	height: 10px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s var(--mg-ease);
	flex-shrink: 0;
}

.mg-footer__links li a,
.mg-contact-list li,
.mg-contact-list a {
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
	line-height: 2.4;
}

.mg-footer__links li a:hover,
.mg-contact-list a:hover {
	color: var(--mg-link);
}

.mg-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	line-height: 1.9;
	margin-bottom: 0.6rem;
}

.mg-contact-list .mg-icon {
	flex-shrink: 0;
	margin-top: 0.35rem;
	color: var(--mg-accent);
}

.mg-licenses {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mg-licenses li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.8rem;
	border: 1px dashed var(--mg-line-strong);
	border-radius: calc(var(--mg-radius) * 0.7);
	font-size: 0.78rem;
	color: var(--mg-muted);
}

.mg-footer__bar {
	border-top: 1px solid var(--mg-line);
	padding-block: var(--mg-space-3);
}

.mg-footer__bar .mg-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mg-space-2);
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
}

.mg-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
}

@media (max-width: 759px) {
	.mg-footer__title i {
		display: block;
	}

	.mg-footer__panel[data-mg-panel] .mg-footer__body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s var(--mg-ease);
		overflow: hidden;
	}

	.mg-footer__panel[data-mg-panel] .mg-footer__body > * {
		min-height: 0;
	}

	.mg-footer__panel.is-open .mg-footer__body {
		grid-template-rows: 1fr;
	}

	.mg-footer__panel.is-open .mg-footer__title i {
		transform: rotate(-135deg);
	}

	.mg-footer__panel {
		border-bottom: 1px solid var(--mg-line);
		padding-bottom: var(--mg-space-2);
	}
}

/* ==========================================================================
   8. Editorial content
   ========================================================================== */

.mg-page-header {
	padding-block: calc(var(--mg-header-h) * 0.5 + 2.5rem) var(--mg-space-4);
	background: var(--mg-surface);
	border-bottom: 1px solid var(--mg-line);
}

.mg-page-header__title {
	font-size: var(--mg-step-3);
}

.mg-page-header__lead {
	color: var(--mg-muted);
	margin-top: var(--mg-space-1);
	max-width: 60ch;
}

.mg-entries {
	display: grid;
	gap: var(--mg-space-4);
}

.mg-entry {
	display: grid;
	gap: var(--mg-space-3);
}

@media (min-width: 640px) {
	.mg-entries .mg-entry {
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	.mg-entries .mg-entry:not(:has(.mg-entry__media)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mg-entry__media {
	display: block;
	overflow: hidden;
	border-radius: var(--mg-radius);
	background: var(--mg-surface);
}

.mg-entry__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s var(--mg-ease);
}

.mg-entry__media:hover img {
	transform: scale(1.05);
}

.mg-entry__title {
	font-size: var(--mg-step-2);
	margin-bottom: var(--mg-space-1);
}

.mg-entry__title a {
	color: var(--mg-text);
}

.mg-entry__title a:hover {
	color: var(--mg-link);
}

.mg-entry__excerpt {
	color: var(--mg-muted);
	margin-bottom: var(--mg-space-2);
}

.mg-entry__hero {
	margin-block: var(--mg-space-3);
	border-radius: var(--mg-radius);
	overflow: hidden;
}

.mg-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: var(--mg-step--1);
	color: var(--mg-faint);
	margin-bottom: var(--mg-space-1);
}

.mg-post-meta a {
	color: var(--mg-faint);
}

.mg-post-meta a:hover {
	color: var(--mg-primary);
}

.mg-prose > * + * {
	margin-top: var(--mg-space-3);
}

.mg-prose h2 {
	font-size: var(--mg-step-2);
	margin-top: var(--mg-space-4);
}

.mg-prose h3 {
	font-size: var(--mg-step-1);
	margin-top: var(--mg-space-3);
}

.mg-prose ul,
.mg-prose ol {
	padding-inline-start: 1.4rem;
	list-style: revert;
}

.mg-prose li + li {
	margin-top: 0.35rem;
}

.mg-prose img,
.mg-prose figure {
	border-radius: var(--mg-radius);
	overflow: hidden;
}

.mg-prose blockquote {
	padding: var(--mg-space-3);
	border-inline-start: 3px solid var(--mg-accent);
	background: var(--mg-surface);
	border-radius: calc(var(--mg-radius) * 0.6);
	color: var(--mg-muted);
	font-style: italic;
}

.mg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mg-step--1);
}

.mg-prose th,
.mg-prose td {
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--mg-line);
	text-align: start;
}

.mg-prose th {
	background: var(--mg-surface);
	font-weight: 700;
}

.mg-prose code {
	background: var(--mg-surface-2);
	padding: 0.1rem 0.4rem;
	border-radius: 5px;
	font-size: 0.9em;
}

.mg-prose pre {
	background: var(--mg-surface-2);
	padding: var(--mg-space-3);
	border-radius: var(--mg-radius);
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}

.mg-entry__tags a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	margin: 0.2rem 0.2rem 0 0;
	border: 1px solid var(--mg-line);
	border-radius: 999px;
	font-size: 0.78rem;
	color: var(--mg-muted);
}

/* Widgets */

.mg-widget {
	padding: var(--mg-space-3);
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
}

.mg-widget + .mg-widget {
	margin-top: var(--mg-space-3);
}

.mg-widget__title {
	font-size: var(--mg-step-0);
	margin-bottom: var(--mg-space-2);
	padding-bottom: var(--mg-space-1);
	border-bottom: 2px solid var(--mg-accent);
	display: inline-block;
}

.mg-widget ul li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--mg-line);
	font-size: var(--mg-step--1);
}

.mg-widget ul li:last-child {
	border-bottom: 0;
}

.mg-widget a {
	color: var(--mg-muted);
}

.mg-widget a:hover {
	color: var(--mg-link);
}

/* Pagination and post navigation */

.mg-pagination {
	margin-top: var(--mg-space-5);
}

.mg-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.mg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.5rem;
	border: 1px solid var(--mg-line);
	border-radius: 10px;
	font-size: var(--mg-step--1);
	font-weight: 600;
	color: var(--mg-muted);
	transition: all 0.2s var(--mg-ease);
}

.mg-pagination .page-numbers:hover {
	border-color: var(--mg-primary);
	color: var(--mg-primary);
}

.mg-pagination .page-numbers.current {
	background: var(--mg-primary);
	border-color: var(--mg-primary);
	color: #fff;
}

.mg-post-nav {
	display: grid;
	gap: var(--mg-space-2);
	margin-top: var(--mg-space-5);
	padding-top: var(--mg-space-3);
	border-top: 1px solid var(--mg-line);
}

@media (min-width: 640px) {
	.mg-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mg-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--mg-space-2);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
	color: var(--mg-text);
}

.mg-post-nav a:hover {
	border-color: var(--mg-primary);
}

.mg-post-nav small {
	font-size: 0.72rem;
	color: var(--mg-faint);
}

.mg-post-nav span {
	font-weight: 700;
	font-size: var(--mg-step--1);
}

/* Comments */

.mg-comments {
	margin-top: var(--mg-space-5);
	padding-top: var(--mg-space-4);
	border-top: 1px solid var(--mg-line);
}

.mg-comments__title {
	font-size: var(--mg-step-1);
	margin-bottom: var(--mg-space-3);
}

.mg-comments__list,
.mg-comments__list .children {
	list-style: none;
	padding: 0;
}

.mg-comments__list .children {
	padding-inline-start: var(--mg-space-3);
	border-inline-start: 2px solid var(--mg-line);
	margin-top: var(--mg-space-2);
}

.mg-comments__list .comment-body {
	padding: var(--mg-space-3);
	background: var(--mg-surface);
	border-radius: var(--mg-radius);
	margin-bottom: var(--mg-space-2);
}

.mg-comments__list .comment-author img {
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-inline-end: 0.5rem;
}

.mg-comments__list .comment-meta {
	font-size: var(--mg-step--1);
	color: var(--mg-faint);
	margin-bottom: var(--mg-space-1);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.comment-form input[type="submit"] {
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	background: var(--mg-primary);
	color: #fff;
	border: 0;
	font-weight: 700;
	cursor: pointer;
}

/* Empty states and 404 */

.mg-empty {
	text-align: center;
	padding-block: var(--mg-space-6);
	display: grid;
	justify-items: center;
	gap: var(--mg-space-2);
}

.mg-empty__title {
	font-size: var(--mg-step-2);
}

.mg-empty__text {
	color: var(--mg-muted);
}

.mg-404 {
	text-align: center;
	padding-block: var(--mg-space-6);
	display: grid;
	justify-items: center;
	gap: var(--mg-space-2);
}

.mg-404__code {
	font-size: clamp(5rem, 18vw, 11rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(160deg, var(--mg-primary), var(--mg-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mg-404__title {
	font-size: var(--mg-step-2);
}

.mg-404__text {
	color: var(--mg-muted);
	max-width: 46ch;
}

/* ==========================================================================
   9. Utilities and motion
   ========================================================================== */

.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;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	inset-inline-start: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.7rem 1.2rem;
	background: var(--mg-primary);
	color: #fff;
	border-radius: 8px;
	z-index: 200;
}

.mg-icon {
	flex-shrink: 0;
}

.alignwide {
	width: min(100%, calc(var(--mg-shell) + 8rem));
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: none;
}

.alignleft {
	float: inline-start;
	margin-inline-end: var(--mg-space-3);
	margin-bottom: var(--mg-space-2);
}

.alignright {
	float: inline-end;
	margin-inline-start: var(--mg-space-3);
	margin-bottom: var(--mg-space-2);
}

.aligncenter {
	margin-inline: auto;
}

/* Scroll reveal. The end state is the default, so anything that never gets
   observed — a crawler, a printed page, a browser without IO — still sees
   the finished layout. */
.mg-reveal {
	opacity: 1;
}

body.mg-animate .mg-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s var(--mg-ease), transform 0.6s var(--mg-ease);
}

body.mg-animate .mg-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@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.mg-animate .mg-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Floating contact button
   ========================================================================== */

.mg-float {
	position: fixed;
	bottom: 1.25rem;
	z-index: 120;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 10px 28px rgba(var(--mg-ink-rgb), 0.28);
	transition: transform 0.25s var(--mg-ease), box-shadow 0.25s var(--mg-ease);
}

.mg-float--end {
	inset-inline-end: 1.25rem;
}

.mg-float--start {
	inset-inline-start: 1.25rem;
}

.mg-float:hover {
	transform: translateY(-3px) scale(1.04);
	color: #fff;
	box-shadow: 0 14px 34px rgba(var(--mg-ink-rgb), 0.34);
}

.mg-float--whatsapp {
	background: #25d366;
}

.mg-float--telegram {
	background: #2aabee;
}

.mg-float--phone {
	background: var(--mg-primary);
}

/* A slow halo, so the button reads as live without demanding attention. */
.mg-float::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	opacity: 0.45;
	animation: mg-halo 2.8s ease-out infinite;
	z-index: -1;
}

@keyframes mg-halo {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}

	70% {
		transform: scale(1.6);
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-float::before {
		animation: none;
		opacity: 0;
	}
}

/* The scroll-to-top link and the floating button share a corner on phones. */
@media (max-width: 600px) {
	.mg-float {
		width: 50px;
		height: 50px;
		bottom: 1rem;
	}
}

/* ==========================================================================
   Contact form file field
   ========================================================================== */

.mg-field--file input[type="file"] {
	padding: 0.6rem;
	border: 1px dashed var(--mg-line-strong);
	border-radius: calc(var(--mg-radius) * 0.7);
	background: var(--mg-surface);
	width: 100%;
	font-size: var(--mg-step--1);
	cursor: pointer;
}

.mg-field--file input[type="file"]:hover {
	border-color: var(--mg-primary);
}

.mg-field__hint {
	font-size: 0.74rem;
	color: var(--mg-faint);
}

@media print {
	.mg-header,
	.mg-footer,
	.mg-nav,
	.mg-burger,
	.mg-to-top,
	.mg-float,
	.mg-modal {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* ==========================================================================
   Content protection (opt-in, see Mahmoudi → Settings → Content protection)
   ========================================================================== */

/* Text selection is blocked on project copy only. Blocking it site-wide stops
   visitors copying a phone number or address, which costs real enquiries. */
.mg-protect-select .mg-project__body,
.mg-protect-select .mg-modal__body,
.mg-protect-select .mg-card__content {
	-webkit-user-select: none;
	user-select: none;
}

/* Form fields must stay selectable or the contact form becomes unusable. */
.mg-protect-select input,
.mg-protect-select textarea,
.mg-protect-select select,
.mg-protect-select [contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
}

.mg-protected img,
.mg-protected video {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* A transparent layer above the image means "save image as" targets the layer
   rather than the file. Pointer events stay off so galleries and links below
   still respond normally. */
.mg-protect-overlay .mg-card__media,
.mg-protect-overlay .mg-gallery__slide,
.mg-protect-overlay .mg-modal__hero {
	position: relative;
}

.mg-protect-overlay .mg-card__media::after,
.mg-protect-overlay .mg-gallery__slide::after,
.mg-protect-overlay .mg-modal__hero::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
	pointer-events: none;
	content: "";
}