@charset "UTF-8";
/* ==========================================================================
   MERAAS MENA Intellectual Property
   Design system and stylesheet.

   The palette, the geometry and the typographic weight all come from the
   client company profile: a warm off-white ground, a deep sage-green family,
   a heavy geometric display face and a 45-degree square used as a marker.

   Contents
     01  Fonts
     02  Tokens
     03  Reset and base
     04  Typography
     05  Layout primitives
     06  Marks and rules
     07  Buttons and links
     08  Header and navigation
     09  Footer
     10  Hero
     11  Home sections
     12  Page furniture
     13  Practice
     14  Leadership
     15  Memberships
     16  News
     17  Contact and forms
     18  Motion
     19  Print
   ========================================================================== */

/* 01  Fonts ================================================================ */

/* Outfit stands in for Garet, the display face used throughout the profile:
   the same geometric skeleton, a comparable heavy weight, and a licence that
   allows self-hosting. Montserrat is the profile's own text face. */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 02  Tokens =============================================================== */

:root {
	/* Ground and ink */
	--paper:        #f2f2f0;
	--paper-raised: #ffffff;
	--paper-sunk:   #e8e9e5;
	--ink:          #111512;
	--ink-soft:     #43514a;
	--ink-faint:    #56635d;

	/* Brand greens, taken from the company profile */
	--green:        #2f6c57;
	--green-deep:   #1d4636;
	--green-mid:    #4f826f;
	--sage:         #94b8ab;
	/* The sage reads as disabled against the dark bands; this lifted value
	   clears 6.8:1 there and is used for every label and link on dark. */
	--sage-bright:  #b7d0c6;
	--sage-wash:    #dde7e2;
	--stone:        #a3a49f;

	/* Lines */
	--line:         rgba(17, 21, 18, 0.14);
	--line-strong:  rgba(17, 21, 18, 0.28);
	--line-onDark:  rgba(242, 242, 240, 0.22);

	/* Type */
	--font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-text:    "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

	--fs-hero:    clamp(2.6rem, 1.05rem + 5.4vw, 5.75rem);
	--fs-title:   clamp(2.1rem, 1.25rem + 3.1vw, 4rem);
	--fs-section: clamp(1.7rem, 1.2rem + 1.9vw, 2.85rem);
	--fs-sub:     clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
	--fs-lede:    clamp(1.075rem, 0.99rem + 0.42vw, 1.35rem);
	--fs-body:    clamp(1rem, 0.965rem + 0.15vw, 1.0938rem);
	--fs-small:   0.875rem;
	--fs-eyebrow: 0.75rem;

	--lh-tight:   1.04;
	--lh-snug:    1.16;
	--lh-body:    1.72;

	--tracking-eyebrow: 0.19em;
	--tracking-display: -0.022em;

	/* Space */
	--gutter:     clamp(1.25rem, 4vw, 3rem);
	--gap:        clamp(1.5rem, 2.6vw, 2.5rem);
	--band:       clamp(4.5rem, 8.5vw, 9rem);
	--band-tight: clamp(3rem, 5.5vw, 5.5rem);

	/* Measure and containers */
	--wrap:      1240px;
	--wrap-wide: 1500px;
	--wrap-text: 40rem;

	/* Motion */
	--ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-micro:   170ms;
	--t-reveal:  520ms;

	/* Header */
	--header-h: 76px;
}

@media (min-width: 900px) {
	:root {
		--header-h: 92px;
	}
}

/* 03  Reset and base ======================================================= */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

figure {
	margin: 0;
}

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

li {
	list-style: none;
}

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

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

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
}

::selection {
	background: var(--green);
	color: var(--paper);
}

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

.screen-reader-text {
	position: absolute !important;
	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;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -110%);
	z-index: 999;
	background: var(--green-deep);
	color: var(--paper);
	padding: 0.85rem 1.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.06em;
	transition: transform var(--t-micro) var(--ease);
}

.skip-link:focus {
	transform: translate(-50%, 0);
}

/* 04  Typography =========================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-display);
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 600;
}

.u-hero {
	font-size: var(--fs-hero);
	line-height: var(--lh-tight);
	font-weight: 700;
}

.u-title {
	font-size: var(--fs-title);
	line-height: 1.06;
}

.u-section {
	font-size: var(--fs-section);
}

.u-sub {
	font-size: var(--fs-sub);
	line-height: 1.25;
	font-weight: 600;
}

.u-lede {
	font-size: var(--fs-lede);
	line-height: 1.6;
	color: var(--ink-soft);
	font-weight: 400;
	max-width: 34em;
	text-wrap: pretty;
}

.u-measure {
	max-width: var(--wrap-text);
}

.u-small {
	font-size: var(--fs-small);
	line-height: 1.6;
}

.u-muted {
	color: var(--ink-faint);
}

/* The tracked label that opens most sections. The diamond is the profile's
   own bullet, rotated 45 degrees. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--font-text);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--green);
	margin: 0 0 1.5rem;
}

.eyebrow::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	background: currentColor;
	transform: rotate(45deg);
}

.eyebrow--plain::before {
	display: none;
}

.eyebrow--dark {
	color: var(--sage-bright);
}

/* 05  Layout primitives ==================================================== */

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

.wrap--wide {
	max-width: calc(var(--wrap-wide) + var(--gutter) * 2);
}

.band {
	padding-block: var(--band);
}

.band--tight {
	padding-block: var(--band-tight);
}

.band--green {
	background: var(--green-deep);
	color: var(--paper);
}

.band--green .u-lede,
.band--green .u-muted,
.vision2030 .u-lede,
.vision2030 .u-muted {
	color: rgba(242, 242, 240, 0.84);
}

.band--sage {
	background: var(--sage-wash);
}

.band--sunk {
	background: var(--paper-sunk);
}

/* Logos are drawn for white. Giving them a white ground keeps the marks
   accurate instead of forcing them onto a tinted field. */
.band--white {
	background: var(--paper-raised);
}

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

.stack > * + * {
	margin-top: var(--flow, 1.25rem);
}

/* A two-column editorial split: label rail on the left, prose on the right. */
.split {
	display: grid;
	gap: clamp(2rem, 4vw, 4.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.split--rail {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}

	/* A narrower rail where the right column carries a three-column table of
	   its own and needs the room. */
	.split--sidebar {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}

	.split__rail {
		position: sticky;
		top: calc(var(--header-h) + 2.5rem);
		align-self: start;
	}
}

/* 06  Marks and rules ====================================================== */

.rule {
	border-top: 1px solid var(--line);
}

/* Prose on the dark bands. Kept here rather than as inline styles in the
   templates so the contrast is set in one place. */
.band--green .prose,
.vision2030 .prose {
	color: rgba(242, 242, 240, 0.82);
}

.band--green .rule {
	border-color: var(--line-onDark);
}

.diamond {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--sage);
	transform: rotate(45deg);
	flex: none;
}

/* The profile's overlapping-square motif, used once, behind the hero image. */
.offset-block {
	position: relative;
}

.offset-block::before {
	content: "";
	position: absolute;
	inset: auto -1.75rem -1.75rem auto;
	width: 56%;
	aspect-ratio: 1;
	background: var(--green);
	z-index: 0;
}

.offset-block > * {
	position: relative;
	z-index: 1;
}

.index-no {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	color: var(--green);
	font-variant-numeric: tabular-nums;
}

/* 07  Buttons and links ==================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.95rem 1.6rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
	background: var(--green-deep);
	color: var(--paper);
	cursor: pointer;
	transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: var(--green);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--ink);
}

.btn--onDark {
	background: var(--paper);
	color: var(--green-deep);
}

.btn--onDark:hover,
.btn--onDark:focus-visible {
	background: var(--sage);
	color: var(--green-deep);
}

.btn__arrow {
	transition: transform var(--t-micro) var(--ease);
}

.btn:hover .btn__arrow {
	transform: translateX(3px);
}

/* Inline text link with a rule that grows from the left. */
.link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--green);
	padding-bottom: 3px;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.link:hover,
.link:focus-visible {
	color: var(--ink);
}

.link--dark {
	color: var(--sage-bright);
}

.link--dark:hover,
.link--dark:focus-visible {
	color: var(--paper);
}

.link .btn__arrow {
	transition: transform var(--t-micro) var(--ease);
}

.link:hover .btn__arrow {
	transform: translateX(3px);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}

/* Below the point where two buttons stop fitting side by side, stack them at
   full width so the pair reads as one deliberate block. */
@media (max-width: 520px) {
	.hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.hero__actions .btn {
		justify-content: space-between;
	}
}

/* Prose links inside editor content */
.prose a {
	color: var(--green);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: color var(--t-micro) var(--ease);
}

.prose a:hover {
	color: var(--ink);
}

/* 08  Header and navigation ================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper);
	transition: box-shadow var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}

.site-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: var(--line);
	opacity: 0;
	transition: opacity var(--t-micro) var(--ease);
}

.site-header.is-stuck::after {
	opacity: 1;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.brand img {
	width: auto;
	height: clamp(30px, 3.4vw, 40px);
}

.nav {
	display: none;
}

@media (min-width: 1000px) {
	.nav {
		display: flex;
		align-items: center;
		gap: clamp(1.4rem, 2.4vw, 2.4rem);
	}
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 2.4vw, 2.4rem);
}

.nav__link {
	position: relative;
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding-block: 0.4rem;
	color: var(--ink);
	transition: color var(--t-micro) var(--ease);
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-micro) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible {
	color: var(--green);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item.is-current .nav__link::after {
	transform: scaleX(1);
}

.nav__item.is-current .nav__link {
	color: var(--green);
}

.nav__cta {
	padding: 0.7rem 1.25rem;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	border: 1px solid var(--line-strong);
	transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease);
}

.nav__cta:hover,
.nav__cta:focus-visible {
	background: var(--green-deep);
	border-color: var(--green-deep);
	color: var(--paper);
}

/* Mobile toggle */
.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	background: none;
	border: 0;
	cursor: pointer;
}

@media (min-width: 1000px) {
	.nav-toggle {
		display: none;
	}
}

.nav-toggle__bar {
	display: block;
	height: 1.5px;
	width: 100%;
	background: var(--ink);
	transition: transform var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile panel */
.nav-panel {
	position: fixed;
	inset: var(--header-h) 0 0;
	background: var(--paper);
	z-index: 99;
	padding: clamp(1.75rem, 6vw, 3rem) var(--gutter) 3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/* Visibility flips immediately on open, so the first link can take focus
	   in the same frame, and is delayed on close so the fade-out is seen. */
	transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease),
		visibility 0s linear var(--t-micro);
}

.nav-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease),
		visibility 0s linear 0s;
}

@media (min-width: 1000px) {
	.nav-panel {
		display: none;
	}
}

.nav-panel__list {
	border-top: 1px solid var(--line);
}

.nav-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.nav-panel__item.is-current .nav-panel__link {
	color: var(--green);
}

.nav-panel__meta {
	margin-top: 2.5rem;
	display: grid;
	gap: 0.4rem;
	font-size: var(--fs-small);
	color: var(--ink-faint);
}

.nav-panel__meta a:hover {
	color: var(--green);
}

body.nav-open {
	overflow: hidden;
}

/* 09  Footer =============================================================== */

.site-footer {
	background: var(--green-deep);
	color: rgba(242, 242, 240, 0.78);
	padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
	font-size: var(--fs-small);
}

.site-footer a {
	transition: color var(--t-micro) var(--ease);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--paper);
}

.footer__grid {
	display: grid;
	gap: clamp(2.25rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}

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

@media (min-width: 1040px) {
	.footer__grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	}
}

.footer__brand img {
	height: 38px;
	width: auto;
	margin-bottom: 1.4rem;
}

.footer__heading {
	font-family: var(--font-text);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sage-bright);
	margin: 0 0 1.1rem;
}

.footer__list {
	display: grid;
	gap: 0.55rem;
}

.footer__office address {
	font-style: normal;
	display: grid;
	gap: 0.4rem;
}

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.footer__bottom {
	margin-top: clamp(3rem, 5vw, 4.5rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-onDark);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8125rem;
	color: rgba(242, 242, 240, 0.72);
}

/* 10  Hero ================================================================= */

.hero {
	padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
	position: relative;
	overflow: hidden;
}

.hero__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 940px) {
	.hero__grid {
		grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
		gap: clamp(3rem, 6vw, 6rem);
	}
}

.hero__title {
	font-size: var(--fs-hero);
	line-height: var(--lh-tight);
	letter-spacing: -0.028em;
	max-width: 13ch;
}

.hero__lede {
	margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
	max-width: 44ch;
}

.hero__actions {
	margin-top: clamp(1.9rem, 3vw, 2.75rem);
}

.hero__figure {
	position: relative;
}

.hero__figure img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 38%;
}

/* The green square that sits behind the photograph, from the profile's
   overlapping-square motif. It breaks to the left, into the gap between the
   columns, so nothing runs off the edge of the page. Suppressed on small
   screens, where it only adds noise. */
.hero__figure::before {
	content: "";
	position: absolute;
	inset: auto auto -2.25rem -2.5rem;
	width: 54%;
	aspect-ratio: 1;
	background: var(--green);
	display: none;
}

@media (min-width: 940px) {
	.hero__figure::before {
		display: block;
	}
}

/* Between the phone and the desktop split, a 4:5 photograph at full width
   swallows the screen. A landscape crop keeps the hero to one view. */
@media (min-width: 620px) and (max-width: 939px) {
	.hero__figure img {
		aspect-ratio: 16 / 10;
		object-position: 50% 42%;
	}
}

.hero__figure img {
	position: relative;
	z-index: 1;
}

.hero__caption {
	position: relative;
	z-index: 2;
	margin-top: 1.15rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	text-align: right;
}

/* The quiet credibility line beneath the hero. */
.affiliations {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: 1.35rem;
}

.affiliations__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem clamp(1rem, 2.4vw, 2rem);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.affiliations__label {
	font-weight: 600;
	color: var(--ink);
}

.affiliations__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem clamp(0.9rem, 1.8vw, 1.5rem);
}

.affiliations__list li {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

.affiliations__list li:not(:last-child)::after {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--sage);
	transform: rotate(45deg);
}

/* 11  Home sections ======================================================== */

.facts {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid var(--line);
}

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

.facts__item {
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
	.facts__item {
		padding: 1.85rem clamp(1rem, 2vw, 2rem) 1.85rem 0;
		border-bottom: 0;
	}

	.facts__item + .facts__item {
		padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
		border-left: 1px solid var(--line);
	}
}

.facts__figure {
	text-wrap: balance;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

.facts__label {
	font-size: var(--fs-small);
	color: var(--ink-faint);
	line-height: 1.55;
	max-width: 28ch;
}

/* Practice index — an editorial list, not a deck of cards. */
.practice-index {
	border-top: 1px solid var(--line);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.practice-index__row {
	display: block;
	border-bottom: 1px solid var(--line);
	padding: clamp(1.6rem, 2.6vw, 2.4rem) 0;
	transition: background var(--t-micro) var(--ease);
}

.practice-index__inner {
	display: grid;
	gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
	transition: transform var(--t-micro) var(--ease);
}

@media (min-width: 860px) {
	.practice-index__inner {
		grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 6fr) 2rem;
		align-items: baseline;
		column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
	}
}

.practice-index__row:hover .practice-index__inner,
.practice-index__row:focus-visible .practice-index__inner {
	transform: translateX(6px);
}

.practice-index__name {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.12;
	transition: color var(--t-micro) var(--ease);
}

.practice-index__row:hover .practice-index__name {
	color: var(--green);
}

.practice-index__summary {
	font-size: var(--fs-small);
	color: var(--ink-soft);
	line-height: 1.65;
	max-width: 50ch;
}

.practice-index__arrow {
	color: var(--green-mid);
	justify-self: end;
	display: none;
}

@media (min-width: 860px) {
	.practice-index__arrow {
		display: block;
	}
}

/* Vision 2030 band */
.vision2030 {
	position: relative;
	isolation: isolate;
	color: var(--paper);
	overflow: hidden;
}

.vision2030__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vision2030__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 62%;
}

/* The photograph is texture, not subject: the overlay stays heavy enough that
   body copy holds well above the AA contrast threshold across the whole band. */
.vision2030::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(102deg, rgba(16, 42, 32, 0.975) 0%, rgba(20, 52, 40, 0.955) 52%, rgba(26, 64, 50, 0.925) 100%);
}

.vision2030__grid {
	display: grid;
	gap: clamp(2.25rem, 4.5vw, 4rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.vision2030__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}

.vision2030__mark {
	background: var(--paper);
	padding: 1.5rem 1.75rem;
	display: inline-flex;
	width: fit-content;
}

.vision2030__mark img {
	width: clamp(130px, 15vw, 170px);
	height: auto;
}

/* Leadership preview */
.leaders {
	display: grid;
	gap: clamp(2.25rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (min-width: 700px) {
	.leaders {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.leader-brief__portrait {
	width: clamp(140px, 17vw, 186px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
	margin-bottom: 1.5rem;
}

.leader-brief__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leader-brief__name {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	margin-bottom: 0.35rem;
}

.leader-brief__role {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 1rem;
}

.leader-brief__standfirst {
	font-size: var(--fs-small);
	color: var(--ink-soft);
	line-height: 1.65;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

/* Closing call to action */
.cta__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 860px) {
	.cta__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

/* 12  Page furniture ======================================================= */

.page-head {
	padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.5rem, 4.5vw, 4rem);
	border-bottom: 1px solid var(--line);
}

.page-head__grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 900px) {
	.page-head__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.page-head__title {
	font-size: var(--fs-title);
	line-height: 1.04;
	max-width: 15ch;
}

.breadcrumb {
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.breadcrumb a:hover {
	color: var(--green);
}

.breadcrumb__sep {
	color: var(--sage);
}

.figure-band img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: 50% 58%;
}

.figure-band figcaption {
	padding-top: 0.85rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.prose {
	max-width: var(--wrap-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
	text-wrap: pretty;
}

.prose--lead > p:first-child {
	font-size: var(--fs-lede);
	line-height: 1.6;
	color: var(--ink);
}

.prose h2,
.prose h3 {
	color: var(--ink);
	margin: 2.25em 0 0.75em;
}

.prose h2 {
	font-size: var(--fs-sub);
}

.prose h3 {
	font-size: 1.125rem;
}

.prose ul,
.prose ol {
	margin: 0 0 1.15em;
	padding-left: 1.25rem;
}

.prose li {
	list-style: disc;
	margin-bottom: 0.4em;
}

.prose ol li {
	list-style: decimal;
}

.prose blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--sage);
	font-family: var(--font-display);
	font-size: var(--fs-sub);
	line-height: 1.4;
	color: var(--ink);
}

.prose img {
	margin-block: 2em;
}

.prose figcaption {
	font-size: var(--fs-small);
	color: var(--ink-faint);
	margin-top: 0.6rem;
}

/* A numbered editorial list used for values and reasons. */
.ledger {
	border-top: 1px solid var(--line);
}

.ledger__item {
	border-bottom: 1px solid var(--line);
	padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
	display: grid;
	gap: 0.6rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.ledger__item {
		grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr);
		align-items: baseline;
	}
}

.ledger__name {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.2;
}

.ledger__body {
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 56ch;
}

.band--green .ledger,
.band--green .ledger__item {
	border-color: var(--line-onDark);
}

.band--green .ledger__body {
	color: rgba(242, 242, 240, 0.74);
}

.band--green .index-no {
	color: var(--sage-bright);
}

/* A pull quote used sparingly */
.pull {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.35rem);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--ink);
	max-width: 22ch;
}

/* 13  Practice ============================================================= */

.practice-nav {
	position: sticky;
	top: calc(var(--header-h) + 2.5rem);
	align-self: start;
	display: none;
}

@media (min-width: 980px) {
	.practice-nav {
		display: block;
	}
}

.practice-nav__list {
	border-left: 1px solid var(--line);
}

.practice-nav__link {
	display: block;
	padding: 0.6rem 0 0.6rem 1.1rem;
	margin-left: -1px;
	border-left: 1px solid transparent;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink-faint);
	transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}

.practice-nav__link:hover,
.practice-nav__link.is-active {
	color: var(--ink);
	border-left-color: var(--green);
}

.practice-group + .practice-group {
	margin-top: clamp(3.5rem, 6vw, 6rem);
}

.practice-group__head {
	display: grid;
	gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
	border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 800px) {
	.practice-group__head {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}
}

.practice-group__name {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
	line-height: 1.1;
}

.practice-group__summary {
	margin-top: 1rem;
	font-size: var(--fs-body);
	color: var(--ink-soft);
	max-width: 58ch;
	line-height: 1.7;
}

.service {
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.service {
		grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr);
	}
}

.service__name {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.25;
}

.service__body {
	font-size: var(--fs-small);
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 54ch;
}

.service__body p + p {
	margin-top: 0.9em;
}

/* 14  Leadership =========================================================== */

.leader {
	padding-block: clamp(3rem, 5.5vw, 5rem);
	border-bottom: 1px solid var(--line);
}

.leader:last-child {
	border-bottom: 0;
}

.leader__grid {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.leader__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}

	.leader__aside {
		position: sticky;
		top: calc(var(--header-h) + 2.5rem);
		align-self: start;
	}
}

.leader__portrait {
	width: clamp(180px, 26vw, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}

.leader__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leader__name {
	font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
	line-height: 1.1;
	margin-top: 1.75rem;
}

.leader__role {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--green);
	margin-top: 0.85rem;
}

.leader__meta {
	font-size: var(--fs-small);
	color: var(--ink-faint);
	margin-top: 0.75rem;
	line-height: 1.6;
}

.leader__standfirst {
	font-size: var(--fs-lede);
	line-height: 1.55;
	color: var(--ink);
	font-weight: 400;
	padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
	margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--line);
	max-width: 32ch;
}

.leader__body {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-soft);
	max-width: 56ch;
}

.leader__body p + p {
	margin-top: 1.15em;
}

/* 15  Memberships ========================================================== */

.members {
	border-top: 1px solid var(--line);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.member {
	border-bottom: 1px solid var(--line);
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	display: grid;
	gap: 1.25rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 760px) {
	.member {
		grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
	}
}

.member__acronym {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1;
}

.member__name {
	font-size: var(--fs-small);
	color: var(--ink-soft);
	line-height: 1.6;
	max-width: 46ch;
}

.member__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 76px;
}

@media (min-width: 760px) {
	.member__logo {
		justify-content: flex-end;
	}
}

.member__logo img {
	width: auto;
	height: calc(var(--h, 34px) * 1.45);
	max-width: 100%;
	object-fit: contain;
}

/* The quiet mark row used on the home page. */
.member-marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.25rem) clamp(2.25rem, 4.5vw, 4rem);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--line);
}

.member-marks__item {
	display: flex;
	align-items: center;
}

/* Each mark carries its own display height. The set runs from 6:1 wordmarks
   to circular roundels, so one shared max-height would leave half of them
   optically twice the size of the others. */
.member-marks__item img {
	width: auto;
	height: var(--h, 34px);
	max-width: 170px;
	object-fit: contain;
}

/* 16  News ================================================================= */

.news-grid {
	display: grid;
	gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.6vw, 2.5rem);
	grid-template-columns: 1fr;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

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

@media (min-width: 980px) {
	/* The column count is set by the template so a short related-articles row
	   fills its width instead of leaving an empty cell. */
	.news-grid {
		grid-template-columns: repeat(var(--news-cols, 3), minmax(0, 1fr));
	}
}

.news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.news-card__media {
	overflow: hidden;
	background: var(--paper-sunk);
	aspect-ratio: 3 / 2;
	margin-bottom: 1.35rem;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms var(--ease);
}

.news-card:hover .news-card__media img {
	transform: scale(1.035);
}

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.85rem;
}

.news-card__cat {
	color: var(--green);
}

.news-card__title {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.25;
	margin-bottom: 0.75rem;
	text-wrap: pretty;
}

.news-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 260ms var(--ease);
}

.news-card:hover .news-card__title a {
	background-size: 100% 1px;
}

.news-card__excerpt {
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--ink-soft);
}

/* Text card: no image, so the headline carries the weight and a rule stands
   in for the picture's top edge. */
.news-card--text {
	border-top: 1px solid var(--line-strong);
	padding-top: 1.35rem;
}

.news-card--text .news-card__title {
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
	margin-bottom: 1rem;
}

/* Category filters on the News archive */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.5rem;
	padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--line);
}

.filters__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--line);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease);
}

.filters__link:hover,
.filters__link:focus-visible {
	border-color: var(--ink);
}

.filters__link.is-active {
	background: var(--green-deep);
	border-color: var(--green-deep);
	color: var(--paper);
}

/* News list used on the home page — no images, pure editorial rows. */
.news-list {
	border-top: 1px solid var(--line);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.news-list__row {
	border-bottom: 1px solid var(--line);
	padding: clamp(1.4rem, 2.4vw, 2rem) 0;
	display: grid;
	gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: baseline;
	transition: transform var(--t-micro) var(--ease);
}

@media (min-width: 800px) {
	.news-list__row {
		grid-template-columns: 10rem minmax(0, 1fr) 2rem;
	}
}

.news-list__row:hover {
	transform: translateX(6px);
}

.news-list__date {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.news-list__title {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.25;
	transition: color var(--t-micro) var(--ease);
}

.news-list__row:hover .news-list__title {
	color: var(--green);
}

.news-list__arrow {
	color: var(--green-mid);
	justify-self: end;
	display: none;
}

@media (min-width: 800px) {
	.news-list__arrow {
		display: block;
	}
}

/* Article */
.article__head {
	max-width: 46rem;
}

.article__title {
	font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
	line-height: 1.08;
	margin-block: 1.25rem;
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.article__meta a:hover {
	color: var(--green);
}

/* Metadata rail beside a single article */
.article__facts {
	margin: 0;
	border-top: 1px solid var(--line);
}

.article__facts dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding-top: 1rem;
}

.article__facts dd {
	margin: 0.35rem 0 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-small);
	font-weight: 500;
}

.article__facts dd a:hover {
	color: var(--green);
}

.article__figure {
	margin-block: clamp(2.5rem, 4vw, 3.5rem);
}

.article__figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pagination {
	margin-top: clamp(3rem, 5vw, 4.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	border: 1px solid var(--line);
	transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease);
}

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

.pagination .page-numbers.current {
	background: var(--green-deep);
	border-color: var(--green-deep);
	color: var(--paper);
}

.empty-state {
	border: 1px solid var(--line);
	padding: clamp(2.5rem, 5vw, 4rem);
	text-align: left;
	max-width: 44rem;
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* 17  Contact and forms ==================================================== */

.offices {
	display: grid;
	gap: clamp(2.25rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
	border-top: 1px solid var(--line);
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(2.25rem, 4vw, 3rem);
}

@media (min-width: 800px) {
	.offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}

.office__country {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.1;
}

.office__kind {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 0.9rem;
}

.office__entity {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	margin-top: 1.25rem;
}

.office__note {
	font-size: var(--fs-small);
	color: var(--ink-faint);
	margin-top: 0.35rem;
}

.office__details {
	margin-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.office__row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-small);
	align-items: baseline;
}

.office__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.office__value {
	font-style: normal;
	display: grid;
	gap: 0.3rem;
}

.office__value a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.office__value a:hover {
	color: var(--green);
	background-size: 100% 1px;
}

/* Form */
.form {
	display: grid;
	gap: 1.5rem;
	max-width: 42rem;
}

.form__row {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

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

.field {
	display: grid;
	gap: 0.5rem;
}

.field__label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.field__req {
	color: var(--green);
}

.field__control {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--paper-raised);
	border: 1px solid var(--line-strong);
	border-radius: 0;
	font-size: var(--fs-body);
	line-height: 1.5;
	transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea.field__control {
	min-height: 10rem;
	resize: vertical;
}

select.field__control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232f6c57' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

.field__control:focus {
	outline: 0;
	border-color: var(--green);
	box-shadow: inset 0 0 0 1px var(--green);
}

.field__control::placeholder {
	color: var(--ink-faint);
	opacity: 1;
}

.field--trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__note {
	font-size: var(--fs-small);
	color: var(--ink-faint);
	max-width: 46ch;
}

.searchform__row {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.searchform__row .field__control {
	flex: 1 1 auto;
	min-width: 0;
}

.searchform__row .btn {
	flex: none;
	padding-inline: 1.25rem;
}

.notice {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--green);
	background: var(--sage-wash);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.notice--error {
	border-left-color: #9a3324;
	background: #f6e9e6;
}

/* 18  Motion =============================================================== */

/* Reveals only exist when JavaScript has confirmed it is running, so a
   scripting failure can never leave content invisible. */
html.js-on .reveal {
	opacity: 0;
	transform: translateY(14px);
}

html.js-on .reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}

html.no-reveal .reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	html.js-on .reveal {
		opacity: 1;
		transform: none;
	}
}

/* 19  Print ================================================================ */

@media print {
	.site-header,
	.site-footer,
	.nav-panel,
	.skip-link,
	.hero__figure::before,
	.vision2030__bg {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.band,
	.band--tight {
		padding-block: 1.25rem;
	}

	.vision2030,
	.band--green {
		background: #fff !important;
		color: #000 !important;
	}

	.vision2030::after {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}

/* ==========================================================================
   20  Language Switcher and RTL Multilingual System
   ========================================================================== */

/* 20.1 Language Switcher in Navigation & Footer ---------------------------- */

.nav__extras {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.header-mobile-tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 1000px) {
	.header-mobile-tools {
		display: none;
	}
}

.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
	background: var(--sage-wash);
	border-color: var(--green);
	color: var(--green-deep);
}

.lang-toggle__icon {
	color: var(--green);
	flex-shrink: 0;
}

.nav-panel__lang {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 0.9375rem;
}

.nav-panel__lang-label {
	color: var(--ink-faint);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lang-btn {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	transition: color var(--t-micro) var(--ease);
}

.lang-btn.is-active {
	color: var(--green);
	font-weight: 700;
	border-bottom: 2px solid var(--green);
}

.lang-btn__sep {
	color: var(--stone);
}

.footer__utility {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.footer__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-family: var(--font-display);
}

.lang-link {
	color: var(--sage-bright);
	text-decoration: none;
	transition: color var(--t-micro) var(--ease);
}

.lang-link:hover,
.lang-link:focus-visible {
	color: #ffffff;
}

.lang-link.is-active {
	color: #ffffff;
	font-weight: 700;
	border-bottom: 1px solid var(--sage-bright);
}

.lang-link__sep {
	color: var(--sage);
	font-size: 0.5rem;
}

/* 20.2 RTL Typography and Layout Rules ------------------------------------- */

html[dir="rtl"],
body.rtl,
body.is-rtl {
	direction: rtl;
	text-align: right;
	--font-display: "Readex Pro", "IBM Plex Sans Arabic", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-text: "Readex Pro", "IBM Plex Sans Arabic", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Adjust tracking in Arabic text */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .nav__link,
html[dir="rtl"] .nav__cta,
html[dir="rtl"] .index-no,
html[dir="rtl"] .footer__heading,
html[dir="rtl"] .office__kind,
html[dir="rtl"] .affiliations__label {
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Eyebrows marker in RTL */
html[dir="rtl"] .eyebrow::before {
	margin-inline-end: 0.6em;
	margin-inline-start: 0;
}

/* Arrow transition in RTL */
html[dir="rtl"] .btn:hover .btn__arrow,
html[dir="rtl"] .btn:hover .is-rtl,
html[dir="rtl"] .link:hover .btn__arrow,
html[dir="rtl"] .link:hover .is-rtl,
html[dir="rtl"] .practice-index__row:hover .practice-index__arrow,
html[dir="rtl"] .news-list__row:hover .news-list__arrow {
	transform: translateX(-3px);
}

/* Nav links indicator in RTL */
html[dir="rtl"] .nav__link::after {
	right: 0;
	left: auto;
	transform-origin: right;
}

/* Breadcrumbs in RTL */
html[dir="rtl"] .breadcrumb {
	direction: rtl;
}

/* Split rail in RTL */
@media (min-width: 900px) {
	html[dir="rtl"] .split--rail {
		grid-template-columns: 2fr 1fr;
	}

	html[dir="rtl"] .split--rail .split__rail {
		grid-column: 2;
		grid-row: 1;
	}

	html[dir="rtl"] .split--rail > div:not(.split__rail),
	html[dir="rtl"] .split--rail > .prose {
		grid-column: 1;
		grid-row: 1;
	}
}

/* Practice Area Sidebar Navigation in RTL */
@media (min-width: 900px) {
	html[dir="rtl"] .practice-nav__list {
		border-right: 2px solid var(--line);
		border-left: 0;
	}

	html[dir="rtl"] .practice-nav__link {
		padding-right: 1.25rem;
		padding-left: 0;
	}

	html[dir="rtl"] .practice-nav__link.is-active::before {
		right: -2px;
		left: auto;
	}
}

/* Notice box in RTL */
html[dir="rtl"] .notice {
	border-right: 3px solid var(--green);
	border-left: 0;
}

html[dir="rtl"] .notice--error {
	border-right-color: #9a3324;
	border-left-color: transparent;
}

/* Form fields alignment in RTL */
html[dir="rtl"] .field__label {
	text-align: right;
}

html[dir="rtl"] .field__control {
	text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] [dir="ltr"] {
	text-align: left;
	direction: ltr;
}

/* Article Fact List in RTL */
html[dir="rtl"] .article__facts dt {
	text-align: right;
}

/* Numbers in Arabic tables and lists */
html[dir="rtl"] .index-no {
	font-variant-numeric: normal;
}