/* =========================================================================
   MHKOLOR 2026 — presentation layer

   Written once, in one generation. The previous file grew in layers until a
   class from a deleted design could break a live grid; this one is ordered so
   that never happens again:

     01 TOKENS      the only place a value is decided
     02 FONTS       self-hosted, split per unicode range
     03 BASE        reset, canvas, atmosphere
     04 TYPE        five sizes, one meta style
     05 LAYOUT      shell, grid, section rhythm
     06 PRIMITIVES  button, chip, card, media frame, list, field
     07 CHROME      header, menu, footer
     08 SECTIONS    one block per section, in page order
     09 RTL         what mirroring alone cannot fix
     10 MOBILE      one column, shorter rhythm
     11 MOTION      four behaviours, all optional

   Rules that hold everywhere in this file:
     - No `border` is ever used as a divider. Layers separate through depth:
       colour, blur, transparency, shadow and space.
     - Every section reads correctly with JavaScript and motion switched off.
     - Nothing is styled by element alone; every rule starts at a `mhk-` class.
   ========================================================================= */

/* ------------------------------------------------------------- 01 TOKENS */

:root {
	/* Identity — measured from the logo files. There is no second blue. */
	--brand-primary: #05044a;
	--brand-secondary: #57ee7b;
	--brand-white: #ffffff;

	--primary-deep: #02011b;
	--primary-dark: #03022e;
	--primary-80: #070561;
	--primary-90: #08077b;
	--primary-100: #0a089b;
	--primary-line: #232160;

	--ink: #04040e;
	--paper: #e8e8f3;
	--muted: #a5a5c0;

	/*
	 * The one colour outside the brand. A form error cannot be drawn in the
	 * accent — green is what this system uses to mean "yes, go on" — so it gets
	 * a warm tint instead. 10.9:1 on the navy ground.
	 */
	--alert: #ffb4a2;

	--bg: var(--brand-primary);
	--fg: var(--paper);
	--accent: var(--brand-secondary);

	/* Glass — the middle layer between canvas and media. */
	--glass: color-mix(in srgb, var(--brand-white) 6%, transparent);
	--glass-strong: color-mix(in srgb, var(--brand-white) 11%, transparent);
	--glass-edge: inset 0 1px 0 color-mix(in srgb, var(--brand-white) 16%, transparent);
	--lift: 0 40px 90px -36px rgba(1, 0, 14, 0.8);
	--lift-high: 0 60px 130px -40px rgba(1, 0, 14, 0.9);
	--glow: 0 0 90px -20px color-mix(in srgb, var(--accent) 45%, transparent);

	/* Type — two families, five sizes. Quicksand is the face of the brand. */
	--font-latin: "Quicksand", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
	--font-arabic: "Rubik", "Quicksand", "Noto Sans Arabic", "Geeza Pro", sans-serif;
	--font: var(--font-latin);

	--display: clamp(2.25rem, 4.6vw, 4.75rem);
	--h1: clamp(2.5rem, 5vw, 5.5rem);
	--h2: clamp(1.875rem, 3.4vw, 3.75rem);
	--h3: clamp(1.25rem, 1.7vw, 1.75rem);
	--body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--small: 0.8125rem;

	/* Space — one ladder: 8 16 24 32 48 64 96 128 160. */
	--s1: 0.5rem;
	--s2: 1rem;
	--s3: 1.5rem;
	--s4: 2rem;
	--s5: 3rem;
	--s6: 4rem;
	--s7: 6rem;
	--s8: 8rem;
	--s9: 10rem;

	--section: clamp(var(--s6), 6.5vw, var(--s8));
	--margin: clamp(1.25rem, 5vw, 5rem);
	--gutter: clamp(0.75rem, 1.6vw, 1.75rem);
	--max: 1440px;
	--measure: 46rem;

	/* Curvature — a section change is a curve, never a line. */
	--r-ui: 18px;
	--r-panel: 32px;
	--r-media: clamp(1.75rem, 3vw, 3.25rem);
	--r-large: clamp(3rem, 6vw, 6.875rem);
	--r-pill: 999px;

	/* Depth of field. */
	--blur-glass: 22px;
	--blur-near: 24px;
	--blur-far: 40px;
	--blur-back: 90px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fast: 0.35s;
	--slow: 0.9s;

	/* Set per project by the render layer; falls back to the brand green. */
	--project-color: var(--accent);
}

/* Arabic swaps the family and loosens the line — never the colour system. */
.script-arabic {
	--font: var(--font-arabic);
}

/* --------------------------------------------------------------- 02 FONTS */

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-400-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-500-ext.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-600-ext.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Quicksand";
	src: url("../fonts/Quicksand-700-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-500-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "Rubik";
	src: url("../fonts/Rubik-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ---------------------------------------------------------------- 03 BASE */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: var(--body);
	font-weight: 500;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * The atmosphere: three very light radial shapes fixed to the viewport, so the
 * navy never reads as flat paint. Fixed rather than per-section, because the
 * canvas belongs to the site and not to any one block.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--primary-100) 55%, transparent), transparent 70%),
		radial-gradient(45% 45% at 92% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
		radial-gradient(70% 60% at 50% 108%, color-mix(in srgb, var(--primary-90) 45%, transparent), transparent 70%);
}

body > * {
	position: relative;
	z-index: 1;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

ul,
ol,
dl,
dd {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

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

::selection {
	background: var(--accent);
	color: var(--ink);
}

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

.mhk-skip {
	position: absolute;
	inset-inline-start: var(--s2);
	top: -100%;
	z-index: 100;
	padding: var(--s2) var(--s3);
	background: var(--accent);
	color: var(--ink);
	border-radius: var(--r-pill);
	font-weight: 700;
}

.mhk-skip:focus {
	top: var(--s2);
}

/* ---------------------------------------------------------------- 04 TYPE */

.mhk-h1,
.mhk-h2,
.mhk-h3 {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-wrap: balance;
}

.mhk-h1 {
	font-size: var(--h1);
}

.mhk-h2 {
	font-size: var(--h2);
	line-height: 1.06;
}

.mhk-h3 {
	font-size: var(--h3);
	line-height: 1.18;
	letter-spacing: -0.01em;
}

/* Arabic never takes negative tracking or uppercase; it takes more air. */
.script-arabic .mhk-h1,
.script-arabic .mhk-h2,
.script-arabic .mhk-h3 {
	letter-spacing: 0;
	line-height: 1.28;
}

/* One meta style for every label on the site. */
.mhk-meta {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.script-arabic .mhk-meta {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.875rem;
	line-height: 1.7;
}

.mhk-body {
	font-size: var(--body);
	color: color-mix(in srgb, var(--paper) 82%, transparent);
	max-width: var(--measure);
	line-height: 1.65;
}

.script-arabic .mhk-body {
	line-height: 1.9;
}

.mhk-lead {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--paper) 88%, transparent);
	max-width: var(--measure);
	font-weight: 500;
}

.script-arabic .mhk-lead {
	line-height: 1.85;
}

.mhk-prose {
	max-width: var(--measure);
	color: color-mix(in srgb, var(--paper) 82%, transparent);
}

.mhk-prose > * + * {
	margin-block-start: var(--s3);
}

.mhk-prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Accent word inside a heading — the one typographic emphasis in the system. */
.mhk-accent {
	color: var(--accent);
	font-style: normal;
}

/* -------------------------------------------------------------- 05 LAYOUT */

.mhk-shell {
	width: 100%;
	max-width: calc(var(--max) + var(--margin) * 2);
	margin-inline: auto;
	padding-inline: var(--margin);
}

.mhk-main {
	display: block;
}

/* Every section owns its own rhythm; nothing relies on a neighbour's margin. */
.mhk-section {
	padding-block: var(--section);
}

.mhk-section--tight {
	padding-block: var(--s7);
}

.mhk-section__head {
	display: grid;
	gap: var(--s3);
	margin-block-end: var(--s5);
	max-width: 60rem;
}

.mhk-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
}

/* ---------------------------------------------------------- 06 PRIMITIVES */

/* -- Button ------------------------------------------------------------- */

.mhk-button {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	padding: 0.9em 1.6em;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: var(--ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

.mhk-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--glow);
}

.mhk-button .mhk-icon {
	width: 1.15em;
	height: 1.15em;
}

.mhk-button--small {
	padding: 0.7em 1.2em;
	font-size: 0.9375rem;
}

/* -- Chip --------------------------------------------------------------- */

.mhk-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	padding: 0.55em 1.1em;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	color: color-mix(in srgb, var(--paper) 90%, transparent);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	-webkit-backdrop-filter: blur(var(--blur-glass));
	backdrop-filter: blur(var(--blur-glass));
}

.mhk-chip--action {
	cursor: pointer;
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-chip--action:hover {
	background: var(--glass-strong);
	transform: translateY(-2px);
}

.mhk-chip--action[aria-pressed="true"] {
	background: var(--accent);
	color: var(--ink);
}

.mhk-chip .mhk-icon {
	width: 1.05em;
	height: 1.05em;
}

/* -- Text link ---------------------------------------------------------- */

.mhk-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	font-weight: 700;
	color: var(--accent);
	transition: gap var(--fast) var(--ease);
}

.mhk-textlink:hover {
	gap: calc(var(--s1) * 1.75);
}

.mhk-textlink .mhk-icon {
	width: 1.1em;
	height: 1.1em;
}

/* -- Icons -------------------------------------------------------------- */

.mhk-icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	stroke: currentColor;
	fill: none;
	vertical-align: middle;
}

/* -- Media frame -------------------------------------------------------- */

/*
 * Every image on the site sits in one of these. The frame owns the curve, the
 * aspect and the lift; the image only fills it.
 */
.mhk-frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-media);
	background: var(--primary-80);
	box-shadow: var(--lift);
	aspect-ratio: var(--ratio, 16 / 10);
	isolation: isolate;
}

.mhk-frame img,
.mhk-frame svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--slow) var(--ease);
}

.mhk-frame--wide {
	--ratio: 21 / 9;
}

a.mhk-frame:hover img,
.mhk-card:hover .mhk-frame img {
	transform: scale(1.03);
}

/* -- Card --------------------------------------------------------------- */

/*
 * Not a box: a media surface with its text underneath. There is no outline and
 * no background — the curve of the media and the space around it do the work.
 */
.mhk-card {
	display: grid;
	gap: var(--s3);
	align-content: start;
}

.mhk-card__title {
	font-size: var(--h3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.script-arabic .mhk-card__title {
	letter-spacing: 0;
	line-height: 1.4;
}

.mhk-card__title a {
	transition: color var(--fast) var(--ease);
}

.mhk-card:hover .mhk-card__title a {
	color: var(--accent);
}

/* The separator between facts is the dot, so the row carries no column gap. */
.mhk-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) 0;
	font-size: 0.9375rem;
	color: var(--muted);
}

/* -- Panel (glass surface) ---------------------------------------------- */

.mhk-panel {
	background: var(--glass);
	box-shadow: var(--glass-edge), var(--lift);
	-webkit-backdrop-filter: blur(var(--blur-glass));
	backdrop-filter: blur(var(--blur-glass));
	border-radius: var(--r-panel);
	padding: clamp(var(--s4), 4vw, var(--s6));
}

.mhk-panel--large {
	border-radius: var(--r-large);
}

/*
 * Anything an "on this page" index jumps to has to clear the sticky header bar,
 * or the heading it lands on arrives underneath it.
 */
.mhk-section[id],
.mhk-row[id],
.mhk-panel[id] {
	scroll-margin-block-start: 7rem;
}

/* -- Definition list (facts) -------------------------------------------- */

.mhk-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

.mhk-facts > div {
	display: grid;
	gap: 0.35em;
	padding: 0.85em 1.35em;
	border-radius: var(--r-ui);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	-webkit-backdrop-filter: blur(var(--blur-glass));
	backdrop-filter: blur(var(--blur-glass));
}

.mhk-facts dt {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.script-arabic .mhk-facts dt {
	letter-spacing: 0;
	text-transform: none;
}

.mhk-facts dd {
	font-weight: 600;
}

/*
 * Plain: no glass. Used where the page already spends its glass budget on a
 * panel and a row of chips, and three more frosted boxes would be one layer of
 * furniture too many.
 */
.mhk-facts--plain {
	gap: var(--s5);
}

.mhk-facts--plain > div {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Without a box around it the number has to carry the emphasis itself. */
.mhk-facts--plain dd {
	font-size: var(--h3);
	font-weight: 700;
}

/* -- Marker list -------------------------------------------------------- */

.mhk-list {
	display: grid;
	gap: var(--s2);
}

.mhk-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--s2);
	color: color-mix(in srgb, var(--paper) 85%, transparent);
}

.mhk-list li::before {
	content: "";
	width: 0.5em;
	height: 0.6em;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateY(0.05em);
}

.is-rtl .mhk-list li::before {
	transform: translateY(0.05em) scaleX(-1);
}

/* -- Form field --------------------------------------------------------- */

.mhk-form {
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mhk-form__field {
	display: grid;
	gap: var(--s1);
}

.mhk-form__field--textarea,
.mhk-form__field--select:last-of-type {
	grid-column: 1 / -1;
}

.mhk-form label {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.script-arabic .mhk-form label {
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.9375rem;
}

.mhk-form label span {
	color: var(--accent);
}

.mhk-form input,
.mhk-form select,
.mhk-form textarea {
	width: 100%;
	padding: 0.9em 1.1em;
	border: 0;
	border-radius: var(--r-ui);
	background: rgba(2, 1, 27, 0.45);
	background: color-mix(in srgb, var(--primary-deep) 45%, transparent);
	box-shadow: var(--glass-edge);
	color: var(--paper);
	font: inherit;
	font-size: 1rem;
	transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.mhk-form textarea {
	resize: vertical;
	min-height: 9rem;
}

.mhk-form input::placeholder,
.mhk-form textarea::placeholder {
	color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.mhk-form input:focus,
.mhk-form select:focus,
.mhk-form textarea:focus {
	outline: none;
	background: rgba(2, 1, 27, 0.65);
	background: color-mix(in srgb, var(--primary-deep) 65%, transparent);
	box-shadow: var(--glass-edge), 0 0 0 2px var(--accent);
}

/*
 * The validation message. assets/js/form.js creates this element on a failed
 * field, and until now nothing styled it: the message arrived in body colour at
 * body size and read as an extra line of copy rather than as a problem.
 */
.mhk-form__error {
	color: var(--alert);
	font-size: 0.9375rem;
	font-weight: 600;
}

.mhk-form input[aria-invalid="true"],
.mhk-form select[aria-invalid="true"],
.mhk-form textarea[aria-invalid="true"] {
	box-shadow: var(--glass-edge), 0 0 0 2px color-mix(in srgb, var(--alert) 75%, transparent);
}

.mhk-form input[aria-invalid="true"]:focus,
.mhk-form select[aria-invalid="true"]:focus,
.mhk-form textarea[aria-invalid="true"]:focus {
	box-shadow: var(--glass-edge), 0 0 0 2px var(--alert);
}

.mhk-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: right 1.35em top 55%, right 1.05em top 55%;
	background-size: 0.4em 0.4em, 0.4em 0.4em;
	background-repeat: no-repeat;
}

.is-rtl .mhk-form select {
	background-position: left 1.05em top 55%, left 1.35em top 55%;
	background-image: linear-gradient(45deg, var(--muted) 50%, transparent 50%), linear-gradient(135deg, transparent 50%, var(--muted) 50%);
}

.mhk-form option {
	background: var(--primary-dark);
	color: var(--paper);
}

.mhk-form button[type="submit"] {
	grid-column: 1 / -1;
	justify-self: start;
}

.mhk-form__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.mhk-form__status {
	grid-column: 1 / -1;
	padding: var(--s2) var(--s3);
	border-radius: var(--r-ui);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	font-weight: 600;
}

.mhk-form__status.is-ok {
	background: rgba(87, 238, 123, 0.18);
	background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.mhk-form__status.is-error {
	background: color-mix(in srgb, #ff6b6b 18%, transparent);
}

/* --------------------------------------------------------------- 07 CHROME */

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

.mhk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-block: var(--s3);
	transition: padding var(--fast) var(--ease);
}

.mhk-header.is-stuck {
	padding-block: var(--s2);
}

.mhk-header__bar {
	display: flex;
	align-items: center;
	gap: var(--s4);
	padding: 0.6rem 0.6rem 0.6rem 1.4rem;
	border-radius: var(--r-pill);
	background: rgba(2, 1, 27, 0.55);
	background: color-mix(in srgb, var(--primary-deep) 55%, transparent);
	box-shadow: var(--glass-edge);
	-webkit-backdrop-filter: blur(var(--blur-glass));
	backdrop-filter: blur(var(--blur-glass));
	transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.is-rtl .mhk-header__bar {
	padding: 0.6rem 1.4rem 0.6rem 0.6rem;
}

.mhk-header.is-stuck .mhk-header__bar {
	background: rgba(2, 1, 27, 0.82);
	background: color-mix(in srgb, var(--primary-deep) 82%, transparent);
	box-shadow: var(--glass-edge), var(--lift);
}

.mhk-header__logo {
	display: flex;
	align-items: center;
	flex: none;
}

.mhk-header__logo img {
	height: 2rem;
	width: auto;
}

.mhk-nav {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-inline-end: auto;
}

.mhk-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-block: 0.4em;
	font-size: 1rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--paper) 85%, transparent);
	transition: color var(--fast) var(--ease);
}

.mhk-nav__link:hover {
	color: var(--paper);
}

/* The brand triangle is the navigation indicator — no underline anywhere. */
.mhk-nav__tri {
	width: 0.45em;
	height: 0.55em;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	opacity: 0;
	transform: translateX(-0.3em);
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.is-rtl .mhk-nav__tri {
	transform: translateX(0.3em) scaleX(-1);
}

.mhk-nav__link:hover .mhk-nav__tri,
.mhk-nav__link[aria-current] .mhk-nav__tri {
	opacity: 1;
	transform: translateX(0);
}

.is-rtl .mhk-nav__link:hover .mhk-nav__tri,
.is-rtl .mhk-nav__link[aria-current] .mhk-nav__tri {
	transform: translateX(0) scaleX(-1);
}

.mhk-header__end {
	display: flex;
	align-items: center;
	gap: var(--s2);
	flex: none;
}

/* -- Language switcher --------------------------------------------------- */

.mhk-lang ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--glass-edge);
}

.mhk-lang__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.35em 0.7em;
	border-radius: var(--r-pill);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--muted);
	transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.mhk-lang__item:hover {
	color: var(--paper);
}

.mhk-lang__item.is-current {
	background: var(--accent);
	color: var(--ink);
}

/* -- Burger + mobile menu ------------------------------------------------ */

.mhk-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	color: var(--paper);
	cursor: pointer;
}

.mhk-burger__close {
	display: none;
}

.mhk-burger[aria-expanded="true"] .mhk-burger__open {
	display: none;
}

.mhk-burger[aria-expanded="true"] .mhk-burger__close {
	display: block;
}

.mhk-menu {
	position: fixed;
	inset: 0;
	z-index: 49;
	display: grid;
	align-content: center;
	background: rgba(2, 1, 27, 0.94);
	background: color-mix(in srgb, var(--primary-deep) 94%, transparent);
	-webkit-backdrop-filter: blur(var(--blur-far));
	backdrop-filter: blur(var(--blur-far));
	overflow-y: auto;
	padding-block: 6rem var(--s6);
}

.mhk-menu[hidden] {
	display: none;
}

.mhk-menu__nav ul {
	display: grid;
	gap: var(--s2);
}

.mhk-menu__nav a {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--s3);
	padding-block: var(--s2);
	font-size: clamp(2rem, 8vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.script-arabic .mhk-menu__nav a {
	letter-spacing: 0;
	line-height: 1.4;
}

.mhk-menu__foot {
	display: grid;
	gap: var(--s3);
	justify-items: start;
	margin-block-start: var(--s5);
}

.mhk-menu__contact {
	display: grid;
	gap: var(--s2);
}

.mhk-menu__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	color: var(--muted);
	font-weight: 600;
}

/* -- Footer -------------------------------------------------------------- */

.mhk-footer {
	position: relative;
	margin-block-start: var(--section);
	padding-block: var(--s7) var(--s5);
	background: var(--primary-deep);
	border-start-start-radius: var(--r-large);
	border-start-end-radius: var(--r-large);
	overflow: hidden;
}

.mhk-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -30%;
	height: 90%;
	pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}

.mhk-footer__pitch {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--s3);
	text-align: center;
	padding-block-end: var(--s7);
}

.mhk-footer__logo {
	width: 4rem;
	height: auto;
}

.mhk-footer__lead {
	margin-inline: auto;
}

.mhk-footer__map {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s5) var(--gutter);
}

.mhk-footer__col ul {
	display: grid;
	gap: var(--s1);
	margin-block-start: var(--s2);
}

.mhk-footer__col a {
	color: color-mix(in srgb, var(--paper) 78%, transparent);
	transition: color var(--fast) var(--ease);
}

.mhk-footer__col a:hover {
	color: var(--accent);
}

.mhk-footer__channels a {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
}

.mhk-footer__channels .mhk-icon {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--muted);
}

.mhk-footer__base {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	margin-block-start: var(--s6);
	font-size: 0.9375rem;
	color: var(--muted);
}

.mhk-footer__base .mhk-lang {
	margin-inline-end: auto;
}

/* -- Player -------------------------------------------------------------- */

.mhk-player {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: var(--margin);
	background: rgba(2, 1, 27, 0.92);
	background: color-mix(in srgb, var(--primary-deep) 92%, transparent);
	-webkit-backdrop-filter: blur(var(--blur-far));
	backdrop-filter: blur(var(--blur-far));
}

.mhk-player[hidden] {
	display: none;
}

.mhk-player__frame {
	width: min(100%, 1200px);
	aspect-ratio: 16 / 9;
	border-radius: var(--r-media);
	overflow: hidden;
	box-shadow: var(--lift-high);
	background: var(--ink);
}

.mhk-player__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.mhk-player__close {
	position: absolute;
	top: var(--margin);
	inset-inline-end: var(--margin);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	color: var(--paper);
	cursor: pointer;
}

/* ------------------------------------------------------------ 08 SECTIONS */

/* -- Shared section grounds --------------------------------------------- */

/* -- 01 Hero ------------------------------------------------------------- */

/*
 * The first screen is one curved stage with the light inside it, not a gradient
 * washing over the whole browser. Three rows: who this is, open light, then the
 * claim with the index of disciplines. The middle row is empty on purpose.
 * See inc/render/hero.php for why there is no illustration.
 */
.mhk-hero {
	padding-block: var(--s3) var(--s5);
}

.mhk-hero__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr;
	gap: var(--s5) var(--s7);
	min-height: min(78svh, 44rem);
	padding: clamp(var(--s4), 4.4vw, var(--s7));
	border-radius: var(--r-large);
	background: var(--primary-dark);
	box-shadow: var(--lift-high);
	overflow: hidden;
}

.mhk-hero__sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The wide band of light across the upper half, clipped by the stage. */
.mhk-hero__aurora {
	position: absolute;
	inset-inline: -25%;
	top: -45%;
	height: 130%;
	background:
		radial-gradient(42% 40% at 22% 48%, color-mix(in srgb, var(--primary-100) 90%, transparent), transparent 70%),
		radial-gradient(30% 32% at 58% 28%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
		radial-gradient(46% 44% at 84% 58%, color-mix(in srgb, var(--primary-90) 80%, transparent), transparent 72%);
	filter: blur(60px);
}

/* A low glow that lifts the type off the ground. */
.mhk-hero__horizon {
	position: absolute;
	inset-inline: 0;
	bottom: -35%;
	height: 75%;
	background: radial-gradient(58% 100% at 50% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
	filter: blur(70px);
}

/* Grain: one repeating SVG, no image request, no visible pattern. */
.mhk-hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.2;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/*
 * Two columns. The claim sits at the bottom of the left one, so the light gets
 * the room above it; the index runs down the right from the very top, which is
 * what keeps that corner from reading as a hole.
 */
.mhk-hero__eyebrow {
	position: relative;
	grid-column: 1;
	grid-row: 1;
}

.mhk-hero__say {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	display: grid;
	justify-items: start;
	gap: var(--s3);
}

.mhk-hero__index {
	position: relative;
	grid-column: 2;
	grid-row: 1 / span 2;
}

/*
 * The display size exists for exactly this screen. It is set so the claim
 * breaks into three composed lines inside the stage rather than running as one
 * wide banner across the browser.
 */
.mhk-hero__title {
	font-size: var(--display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
}

.mhk-hero__line {
	display: block;
	text-wrap: balance;
}

/*
 * The accent line is not filled flat green — at this size a solid block of it
 * vibrates against the navy and stops being an accent. It travels from paper
 * into the brand green instead, which reads as light on the type. Browsers
 * without background-clip keep the paper colour underneath.
 */
.mhk-hero__line.mhk-accent {
	color: var(--paper);
	background: linear-gradient(100deg, var(--paper) 8%, var(--accent) 62%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.script-arabic .mhk-hero__title {
	letter-spacing: 0;
	line-height: 1.28;
}

.script-arabic .mhk-hero__line.mhk-accent {
	background: linear-gradient(260deg, var(--paper) 8%, var(--accent) 62%);
	-webkit-background-clip: text;
	background-clip: text;
}

.mhk-hero__lead {
	max-width: 34rem;
}

.mhk-hero__actions {
	margin-block-start: var(--s1);
}

/* The six disciplines, numbered, as the quiet column beside the claim. */
.mhk-hero__index ul {
	display: grid;
	gap: var(--s1);
	margin-block-start: var(--s2);
}

.mhk-hero__index a {
	display: grid;
	grid-template-columns: 1.75rem auto;
	align-items: baseline;
	gap: var(--s2);
	padding-block: 0.1875rem;
}

.mhk-hero__number {
	font-size: var(--small);
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--accent) 65%, transparent);
	transition: color var(--fast) var(--ease);
}

.mhk-hero__discipline {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--paper);
	transition: color var(--fast) var(--ease);
}

.mhk-hero__index a:hover .mhk-hero__discipline,
.mhk-hero__index a:focus-visible .mhk-hero__discipline {
	color: var(--accent);
}

.mhk-hero__index a:hover .mhk-hero__number,
.mhk-hero__index a:focus-visible .mhk-hero__number {
	color: var(--accent);
}

/* -- 02 Services --------------------------------------------------------- */

.mhk-services__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--s6);
	align-items: start;
}

.mhk-services__list {
	display: grid;
}

.mhk-services__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s2) var(--s3);
	padding: var(--s3) var(--s4);
	border-radius: var(--r-panel);
	transition: background var(--fast) var(--ease), border-radius var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-services__item.is-active .mhk-services__link,
.mhk-services__link:hover {
	background: var(--glass);
	border-radius: var(--r-pill);
	box-shadow: var(--glass-edge);
}

.mhk-services__number {
	color: var(--accent);
}

.mhk-services__name {
	font-size: var(--h3);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.script-arabic .mhk-services__name {
	letter-spacing: 0;
}

.mhk-services__line {
	grid-column: 2;
	font-size: 0.9375rem;
	color: var(--muted);
	max-width: 34rem;
}

.mhk-services__go {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-pill);
	background: var(--glass);
	color: var(--paper);
	opacity: 0;
	transform: translateX(-0.4rem);
	transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-services__item.is-active .mhk-services__go,
.mhk-services__link:hover .mhk-services__go {
	opacity: 1;
	transform: translateX(0);
}

/* The stage: every drawing stacked, only the active one in focus. */
.mhk-services__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--primary-80);
	box-shadow: var(--lift), var(--glass-edge);
	position: sticky;
	top: 7rem;
}

.mhk-services__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	filter: blur(var(--blur-near));
	transform: scale(1.06);
	transition: opacity var(--slow) var(--ease), filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.mhk-services__slide.is-active {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

.mhk-services__slide svg {
	width: 100%;
	height: 100%;
}

.mhk-services__actions {
	margin-block-start: var(--s5);
}

/* -- 03 Selected work ---------------------------------------------------- */

.mhk-rows {
	display: grid;
	gap: var(--s7);
}

/* Eight columns of media, four of information — only the side alternates. */
.mhk-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s4) var(--gutter);
	align-items: center;
}

.mhk-row__media {
	grid-column: 1 / span 8;
}

.mhk-row__info {
	grid-column: 9 / span 4;
	display: grid;
	gap: var(--s2);
	justify-items: start;
}

.mhk-row--flip .mhk-row__media {
	grid-column: 5 / span 8;
	grid-row: 1;
}

.mhk-row--flip .mhk-row__info {
	grid-column: 1 / span 4;
	grid-row: 1;
}

.mhk-row__title a {
	transition: color var(--fast) var(--ease);
}

.mhk-row__title a:hover {
	color: var(--accent);
}

.mhk-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
}

.mhk-row__tags .mhk-chip {
	font-size: 0.8125rem;
	padding: 0.4em 0.9em;
}

.mhk-selected__actions {
	margin-block-start: var(--s6);
}

/* -- 04 Featured case ---------------------------------------------------- */

.mhk-featured {
	position: relative;
	margin-inline: var(--gutter);
	border-radius: var(--r-large);
	background: var(--primary-dark);
	overflow: hidden;
}

.mhk-featured__glow {
	position: absolute;
	inset-inline-start: 50%;
	top: -30%;
	width: 80%;
	height: 80%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--project-color) 22%, transparent), transparent 68%);
	filter: blur(var(--blur-back));
	pointer-events: none;
}

.mhk-featured__inner {
	position: relative;
	display: grid;
	gap: var(--s5);
}

.mhk-featured__head {
	display: grid;
	gap: var(--s2);
	max-width: 40rem;
}

.mhk-featured__title a {
	transition: color var(--fast) var(--ease);
}

.mhk-featured__title a:hover {
	color: var(--project-color);
}

.mhk-featured__media {
	box-shadow: var(--lift-high);
}

.mhk-featured__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
}

/* -- 05 Showreel + film -------------------------------------------------- */

.mhk-film {
	position: relative;
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--ink);
	aspect-ratio: var(--ratio, 16 / 9);
	box-shadow: var(--lift);
	isolation: isolate;
}

.mhk-film--portrait {
	--ratio: 9 / 16;
}

/*
 * A self-hosted film has no thumbnail to show. Rather than fake one, the frame
 * carries the brand depth and the play button is the whole subject.
 */
.mhk-film--file {
	background:
		radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--primary-100) 70%, transparent), transparent 70%),
		var(--primary-dark);
}

/* The blurred copy behind the poster is what makes it a cinema surface. */
.mhk-film__back {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	object-fit: cover;
	filter: blur(var(--blur-near)) saturate(1.3);
	opacity: 0.65;
	z-index: -1;
}

.mhk-film__play {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mhk-film__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--slow) var(--ease);
}

.mhk-film__play:hover .mhk-film__poster {
	transform: scale(1.03);
}

.mhk-film__button {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(4rem, 7vw, 6rem);
	height: clamp(4rem, 7vw, 6rem);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.16);
	background: color-mix(in srgb, var(--brand-white) 16%, transparent);
	box-shadow: var(--glass-edge), var(--lift);
	-webkit-backdrop-filter: blur(var(--blur-glass));
	backdrop-filter: blur(var(--blur-glass));
	color: var(--brand-white);
	transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}

.mhk-film__button .mhk-icon {
	width: 40%;
	height: 40%;
	margin-inline-start: 8%;
}

/*
 * The play triangle is not mirrored in Arabic. Bullets and navigation markers
 * point into the text and do flip, but playback direction is universal — an
 * Arabic video player still points right — so only its optical offset moves.
 */
.is-rtl .mhk-film__button .mhk-icon {
	margin-inline-start: 0;
	margin-inline-end: 8%;
}

.mhk-film__play:hover .mhk-film__button {
	transform: scale(1.06);
	background: rgba(87, 238, 123, 0.85);
	background: color-mix(in srgb, var(--accent) 85%, transparent);
	color: var(--ink);
}

.mhk-reel__label {
	margin-block: var(--s5) var(--s3);
}

.mhk-reel__cuts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
}

.mhk-reel__more {
	margin-block-start: var(--s4);
}

/* -- 06 Studio ----------------------------------------------------------- */

.mhk-studio__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--s6);
	align-items: start;
}

.mhk-studio__text {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

.mhk-studio__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-block-start: var(--s3);
}

.mhk-studio__list li {
	padding: 0.6em 1.2em;
	border-radius: var(--r-pill);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	font-weight: 600;
	font-size: 0.9375rem;
}

/* -- Page opening -------------------------------------------------------- */

.mhk-open {
	position: relative;
	padding-block: var(--s7) var(--s6);
	overflow: hidden;
}

.mhk-open__glow {
	position: absolute;
	inset-inline-start: 20%;
	top: -60%;
	width: 60vw;
	height: 60vw;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--primary-100) 55%, transparent), transparent 66%);
	filter: blur(var(--blur-back));
	pointer-events: none;
}

.mhk-open__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: var(--s5);
	align-items: end;
}

/* No index to place beside it, so the opening takes the whole measure. */
.mhk-open__inner--solo {
	grid-template-columns: minmax(0, 1fr);
}

.mhk-open__inner--solo .mhk-lead {
	max-width: 46rem;
}

.mhk-open__text {
	display: grid;
	gap: var(--s3);
}

.mhk-open__index ul {
	display: grid;
	gap: var(--s1);
	margin-block-start: var(--s2);
}

.mhk-open__index li a,
.mhk-open__index li span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	padding: 0.7em 1.1em;
	border-radius: var(--r-ui);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background var(--fast) var(--ease);
}

.mhk-open__index li a:hover {
	background: var(--glass-strong);
	color: var(--accent);
}

.mhk-open__index .mhk-icon {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
}

/* -- Filters ------------------------------------------------------------- */

.mhk-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	margin-block-end: var(--s5);
}

/* -- Tiles (work archive, service work, insights) ------------------------ */

.mhk-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s6) var(--gutter);
}

.mhk-tiles--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s5) var(--gutter);
}

/* One full-width moment per page, and only for a real case. */
.mhk-tile--wide {
	grid-column: 1 / -1;
}

.mhk-card__body {
	display: grid;
	gap: var(--s1);
}

.mhk-card__meta span + span::before {
	content: "·";
	margin-inline: 0.5em;
	color: var(--muted);
}

.mhk-work__empty {
	padding-block: var(--s6);
	color: var(--muted);
}

.mhk-work.is-empty .mhk-work__empty {
	display: block;
}

/* -- Case ---------------------------------------------------------------- */

.mhk-case__open {
	position: relative;
	padding-block: var(--s7) 0;
	overflow: hidden;
}

.mhk-case__glow {
	position: absolute;
	inset-inline-start: 30%;
	top: -50%;
	width: 70vw;
	height: 70vw;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--project-color) 20%, transparent), transparent 66%);
	filter: blur(var(--blur-back));
	pointer-events: none;
}

.mhk-case__head {
	position: relative;
	display: grid;
	gap: var(--s3);
	justify-items: start;
	margin-block-end: var(--s5);
	max-width: 56rem;
}

.mhk-case__poster {
	box-shadow: var(--lift-high);
}

.mhk-case__label {
	margin-block-end: var(--s4);
}

.mhk-case__prose {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--paper) 90%, transparent);
}

.script-arabic .mhk-case__prose {
	line-height: 1.9;
}

/* The composition: one large, two equal, one wide. Never a media dump. */
.mhk-wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
}

.mhk-wall__large,
.mhk-wall__wide {
	grid-column: 1 / -1;
}

.mhk-wall__large {
	--ratio: 16 / 10;
}

.mhk-wall__wide {
	--ratio: 21 / 9;
}

.mhk-wall__small {
	--ratio: 4 / 3;
}

.mhk-wall__extra {
	display: none;
}

.mhk-wall.is-open .mhk-wall__extra {
	display: block;
}

.mhk-wall__more {
	margin-block-start: var(--s4);
}

/*
 * Auto-fit, not a fixed three: a project with one cut left a single small
 * frame stranded in a third of the row with nothing beside it. One cut now
 * fills the row, two share it, three sit in thirds.
 */
.mhk-cuts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--gutter);
	margin-block-start: var(--gutter);
}

.mhk-case__services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--gutter);
}

.mhk-case__service {
	display: grid;
	gap: var(--s2);
	padding: var(--s3);
	border-radius: var(--r-panel);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-case__service:hover {
	background: var(--glass-strong);
	transform: translateY(-3px);
}

.mhk-case__cover {
	display: block;
	overflow: hidden;
	border-radius: var(--r-ui);
	aspect-ratio: 16 / 9;
}

.mhk-case__cover svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mhk-case__name {
	font-weight: 700;
	font-size: 1.0625rem;
}

.mhk-case__line {
	font-size: 0.9375rem;
	color: var(--muted);
}

/* -- Next project -------------------------------------------------------- */

.mhk-next__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--s5);
	align-items: center;
}

.mhk-next__text {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

.mhk-next__title a {
	transition: color var(--fast) var(--ease);
}

.mhk-next__title a:hover {
	color: var(--project-color);
}

/* -- Service page -------------------------------------------------------- */

.mhk-service__cover {
	margin-block-end: var(--s6);
}

.mhk-list--columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--s5);
}

.mhk-list--columns a:hover {
	color: var(--accent);
}

/* -- FAQ ----------------------------------------------------------------- */

.mhk-faq {
	display: grid;
	gap: var(--s1);
	max-width: 56rem;
}

.mhk-faq__q {
	margin: 0;
	font-size: inherit;
}

.mhk-faq__q button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	width: 100%;
	padding: var(--s3);
	border: 0;
	border-radius: var(--r-panel);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	color: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
	transition: background var(--fast) var(--ease), border-radius var(--fast) var(--ease);
}

.mhk-faq__q button:hover,
.mhk-faq__q button[aria-expanded="true"] {
	background: var(--glass-strong);
}

.mhk-faq__sign {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: var(--r-pill);
	color: var(--accent);
}

.mhk-faq__minus,
.mhk-faq__q button[aria-expanded="true"] .mhk-faq__plus {
	display: none;
}

.mhk-faq__q button[aria-expanded="true"] .mhk-faq__minus {
	display: block;
}

.mhk-faq__a {
	padding: var(--s2) var(--s3) var(--s4);
}

.mhk-faq__a[hidden] {
	display: none;
}

/* -- Process ------------------------------------------------------------- */

/*
 * One path rather than six boxes: the dots sit on a single line that runs the
 * length of the list, so the steps read as a sequence.
 */
.mhk-flow {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s5) var(--gutter);
}

.mhk-flow__step {
	display: grid;
	gap: var(--s1);
	align-content: start;
	padding-block-start: var(--s3);
	position: relative;
}

.mhk-flow__dot {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 0.6rem;
	height: 0.7rem;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.is-rtl .mhk-flow__dot {
	transform: scaleX(-1);
}

.mhk-flow__number {
	color: var(--muted);
}

.mhk-process__actions {
	margin-block-start: var(--s5);
}

/* -- Contact ------------------------------------------------------------- */

.mhk-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--s5);
	align-items: start;
}

.mhk-contact__list {
	display: grid;
	gap: var(--s2);
}

.mhk-contact__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 var(--s3);
	padding: var(--s3);
	border-radius: var(--r-panel);
	background: var(--glass);
	box-shadow: var(--glass-edge);
	transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-contact__item:hover {
	background: var(--glass-strong);
	transform: translateY(-2px);
}

.mhk-contact__icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--r-pill);
	background: rgba(87, 238, 123, 0.16);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
}

.mhk-contact__value {
	font-size: 1.125rem;
	font-weight: 700;
}

.mhk-contact__note {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

/* -- Start a project ----------------------------------------------------- */

.mhk-start__aside {
	margin-block-start: var(--s4);
	color: var(--muted);
}

.mhk-start__aside a {
	color: var(--accent);
	font-weight: 700;
}

/* -- Search -------------------------------------------------------------- */

.mhk-search__list a {
	font-size: var(--h3);
	font-weight: 700;
	transition: color var(--fast) var(--ease);
}

.mhk-search__list a:hover {
	color: var(--accent);
}

/* -- About --------------------------------------------------------------- */

/*
 * The history and the person who wrote it sit beside each other. Apart they
 * were two short blocks with a screen of empty navy between them; together they
 * are one answer to "who is this".
 */
.mhk-about__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	align-items: start;
	gap: var(--s6);
}

.mhk-about__story {
	margin-block-start: var(--s3);
}

.mhk-about__story p {
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
}

.mhk-about__top .mhk-facts {
	margin-block-start: var(--s4);
}

.mhk-founder {
	display: grid;
	gap: var(--s3);
	justify-items: start;
}

/*
 * The six disciplines as rows: number, name, and the one line that says what
 * the discipline is for. It was a bare list of links, which told a visitor who
 * had not met the studio nothing at all.
 */
.mhk-about__disciplines {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3) var(--s6);
	margin-block-start: var(--s5);
}

.mhk-about__disciplines a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--s2);
	padding-block: var(--s2);
}

.mhk-about__number {
	font-size: var(--small);
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--accent) 65%, transparent);
	transform: translateY(0.35em);
}

.mhk-about__text {
	display: grid;
	gap: 0.35em;
}

.mhk-about__name {
	font-size: var(--h3);
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: color var(--fast) var(--ease);
}

.mhk-about__line {
	color: var(--muted);
}

.mhk-about__go {
	color: var(--muted);
	transform: translateY(0.35em);
	transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.mhk-about__disciplines a:hover .mhk-about__name,
.mhk-about__disciplines a:focus-visible .mhk-about__name {
	color: var(--accent);
}

.mhk-about__disciplines a:hover .mhk-about__go,
.mhk-about__disciplines a:focus-visible .mhk-about__go {
	color: var(--accent);
	transform: translate(0.2em, 0.15em);
}

.is-rtl .mhk-about__disciplines a:hover .mhk-about__go,
.is-rtl .mhk-about__disciplines a:focus-visible .mhk-about__go {
	transform: translate(-0.2em, 0.15em);
}

.mhk-about__clients {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-block-start: var(--s3);
}

/* What holds in every project, next to the way in to the steps themselves. */
.mhk-about__work {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	align-items: center;
	gap: var(--s5) var(--s6);
}

.mhk-about__work .mhk-actions {
	margin-block-start: var(--s4);
}

/* ----------------------------------------------------------------- 09 RTL */

/*
 * Logical properties carry almost all of the mirroring. What is left here is
 * the handful of things direction alone cannot fix: glyphs that point, and
 * transforms written in physical pixels.
 *
 * Arabic is a second execution, not a flipped translation — so it also gets its
 * own line height and drops the uppercase tracking, which is set with the type
 * rules further up rather than here.
 */

/* The diagonal arrow points somewhere; in Arabic it has to point the other way.
   The down arrow does not, so it is deliberately not in this list. */
.is-rtl .mhk-icon--arrow {
	transform: scaleX(-1);
}

.is-rtl .mhk-services__go {
	transform: translateX(0.4rem);
}

.is-rtl .mhk-services__item.is-active .mhk-services__go,
.is-rtl .mhk-services__link:hover .mhk-services__go {
	transform: translateX(0);
}

/* A phone number is always read left to right, in either language. */
.mhk-contact__value[dir="ltr"],
.mhk-footer__channels [dir="ltr"] {
	unicode-bidi: isolate;
}

/* -------------------------------------------------------------- 10 MOBILE */

@media (max-width: 1080px) {
	.mhk-hero__stage,
	.mhk-services__body,
	.mhk-studio__inner,
	.mhk-contact,
	.mhk-next__inner,
	.mhk-open__inner,
	.mhk-about__top,
	.mhk-about__work {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * One column. The three parts stack and settle against the bottom of the
	 * stage, so the light still gets the space above them.
	 */
	.mhk-hero__stage {
		grid-template-rows: auto;
		align-content: end;
		gap: var(--s4);
	}

	.mhk-hero__eyebrow,
	.mhk-hero__say,
	.mhk-hero__index {
		grid-column: 1;
		grid-row: auto;
	}

	/*
	 * The index stops being a column beside the claim and becomes the line that
	 * closes it — same links, less furniture.
	 */
	.mhk-hero__index {
		position: relative;
		padding-block-start: var(--s3);
	}

	/* The only hairline in the system, and it fades out rather than ruling a box. */
	.mhk-hero__index::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		height: 1px;
		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--paper) 22%, transparent),
			transparent 65%
		);
	}

	.is-rtl .mhk-hero__index::before {
		background: linear-gradient(
			to left,
			color-mix(in srgb, var(--paper) 22%, transparent),
			transparent 65%
		);
	}

	.mhk-hero__index ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2) var(--s4);
	}

	.mhk-hero__index a {
		grid-template-columns: auto auto;
		gap: var(--s1);
	}

	.mhk-services__stage {
		position: relative;
		top: auto;
		order: -1;
	}

	.mhk-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mhk-footer__map {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mhk-row__media,
	.mhk-row--flip .mhk-row__media {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.mhk-row__info,
	.mhk-row--flip .mhk-row__info {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 860px) {
	:root {
		/* The ladder shortens rather than changing shape. */
		--section: var(--s6);
		--r-large: 2.5rem;
	}

	.mhk-nav {
		display: none;
	}

	.mhk-burger {
		display: grid;
	}

	.mhk-header__end .mhk-button {
		display: none;
	}

	.mhk-header__bar {
		justify-content: space-between;
		padding: 0.5rem 0.5rem 0.5rem 1rem;
	}

	.is-rtl .mhk-header__bar {
		padding: 0.5rem 1rem 0.5rem 0.5rem;
	}

	.mhk-hero__stage {
		min-height: auto;
		gap: var(--s4);
	}

	.mhk-tiles,
	.mhk-tiles--three,
	.mhk-reel__cuts,
	.mhk-cuts,
	.mhk-list--columns,
	.mhk-about__disciplines,
	.mhk-wall {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A 21:9 frame is 167px tall on a phone — the image stops being an image. */
	.mhk-frame--wide,
	.mhk-wall__wide {
		--ratio: 16 / 10;
	}

	.mhk-rows {
		gap: var(--s6);
	}

	.mhk-services__link {
		grid-template-columns: auto 1fr;
		padding: var(--s2) var(--s3);
	}

	.mhk-services__go {
		display: none;
	}

	.mhk-services__line {
		grid-column: 1 / -1;
	}

	.mhk-featured__foot {
		align-items: flex-start;
		flex-direction: column;
	}

	.mhk-footer__base {
		gap: var(--s2);
	}

	/*
	 * The atmospheric glows are radial gradients that then get a 90px blur pass
	 * over a very large surface. On a phone that is an expensive composite for
	 * something the gradient already does on its own, so the blur comes off and
	 * the gradient stays. Backdrop-filter is left alone — it only runs on a
	 * handful of small UI surfaces.
	 */
	.mhk-hero__aurora,
	.mhk-hero__horizon,
	.mhk-open__glow,
	.mhk-case__glow,
	.mhk-featured__glow {
		filter: none;
	}

	/* Grain is a full-page overlay with a blend mode; not worth it on mobile. */
	.mhk-hero__grain {
		display: none;
	}

	/* The switcher takes its own line, but the pill still hugs its two labels. */
	.mhk-footer__base .mhk-lang {
		flex-basis: 100%;
		margin-inline-end: 0;
	}

	.mhk-footer__base .mhk-lang ul {
		width: max-content;
	}
}

@media (max-width: 560px) {
	.mhk-flow,
	.mhk-footer__map,
	.mhk-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.mhk-facts > div {
		flex: 1 1 100%;
	}

	/*
	 * Only the boxed facts want a line each. The plain ones are three short
	 * label/number pairs; stacked they took a third of a phone screen to say
	 * "6", "NL / AR" and "4".
	 */
	.mhk-facts--plain {
		gap: var(--s3) var(--s4);
	}

	.mhk-facts--plain > div {
		flex: 0 1 auto;
	}

	.mhk-actions {
		width: 100%;
	}

	.mhk-hero__title,
	.mhk-open__title {
		text-wrap: pretty;
	}
}

/* -------------------------------------------------------------- 11 MOTION */

/*
 * Four behaviours, and every one of them reveals something that is already in
 * its final position. Without JavaScript `.no-js` shows everything at once, so
 * the design is finished before a single frame animates.
 */

@media (prefers-reduced-motion: no-preference) {
	.no-js [data-motion] {
		opacity: 1;
		transform: none;
	}

	html:not(.no-js) [data-motion="type"] {
		opacity: 0;
		transform: translateY(0.4em);
		transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
	}

	html:not(.no-js) [data-motion="expand"] {
		clip-path: inset(6% 6% 6% 6% round var(--r-media));
		transition: clip-path 1.1s var(--ease);
	}

	html:not(.no-js) [data-motion="reveal"] {
		opacity: 0;
		transform: scale(0.985);
		transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
	}

	html:not(.no-js) [data-motion="wipe"] {
		clip-path: ellipse(120% 0% at 50% 0%);
		transition: clip-path 1.2s var(--ease);
	}

	/*
	 * These have to carry the same `html:not(.no-js)` prefix as the start
	 * states above. Without it they are one specificity point lighter, lose
	 * every time, and the section stays at opacity 0 for good — which is
	 * exactly how the Arabic hero came out blank.
	 */
	html:not(.no-js) [data-motion].is-in {
		opacity: 1;
		transform: none;
		clip-path: inset(0 round var(--r-media));
	}

	html:not(.no-js) [data-motion="wipe"].is-in {
		clip-path: ellipse(150% 150% at 50% 0%);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-motion] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}