/* Media Model — site CSS
   Component classes are added to Elementor containers by hand.
   Prefix: mediamodel-
   ------------------------------------------------------------------ */

/* Ticker ------------------------------------------------------------ */
/* One row that scrolls sideways forever. It never pauses, not on hover
   and not on any other interaction. Put the items inside a container
   with the class mediamodel-ticker-track. */

.mediamodel-ticker {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.mediamodel-ticker .mediamodel-ticker-track,
.mediamodel-ticker > .e-con-inner > .mediamodel-ticker-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	animation: mediamodel-ticker-move var(--mediamodel-ticker-speed, 60s) linear infinite;
	animation-play-state: running !important; /* must never pause — client rule */
}

.mediamodel-ticker:hover .mediamodel-ticker-track {
	animation-play-state: running !important;
}

.mediamodel-ticker--reverse .mediamodel-ticker-track {
	animation-direction: reverse;
}

@keyframes mediamodel-ticker-move {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* The ticker items keep their own width, they must not shrink. */
.mediamodel-ticker-track > * {
	flex: 0 0 auto;
}

/* Header search ------------------------------------------------------ */
/* The icon stays in place. The field opens to its left. */

.mediamodel-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.mediamodel-search-field {
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width .35s ease, opacity .25s ease;
}

.mediamodel-search.is-open .mediamodel-search-field {
	width: 260px;
	opacity: 1;
}

.mediamodel-search-toggle {
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 767px) {
	.mediamodel-search.is-open .mediamodel-search-field {
		width: 180px;
	}
}

/* Project card ------------------------------------------------------- */
/* A card with the Insights switcher off is not clickable. */

.mediamodel-card--no-link,
.mediamodel-card--no-link a {
	pointer-events: none;
	cursor: default;
}

/* Reduced motion ----------------------------------------------------- */
/* The ticker is decoration, so it stops for people who ask for less
   motion. This is an accessibility rule, not a hover pause. */

@media (prefers-reduced-motion: reduce) {
	.mediamodel-ticker .mediamodel-ticker-track {
		animation: none !important;
		transform: none !important;
	}
}

/* Ticker items ------------------------------------------------------- */

/* The card itself sits in a flex row, and a flex item cannot also be a
   clamped box — the browser turns it back into a plain block and the
   last line gets sliced in half. So the card stays a plain block and the
   name inside it is the clamped box. Armenian names run longer than the
   English ones, which is why this showed up on the Armenian page first. */

.mediamodel-ticker-item {
	display: block;
	width: 220px;
	height: 100px;
	overflow: hidden;
	background: #F3F4F6;
	border-left: 5px solid #FAD75F;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	padding: 18px 16px;
	margin-right: 12px;
}

.mediamodel-ticker-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;          /* long names end with … instead of being cut */
	line-clamp: 3;
	overflow: hidden;
}

.mediamodel-ticker {
	padding: 12px 0;
}

/* Category bands ----------------------------------------------------- */

.mediamodel-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 460px;
	height: 212px;
	margin-right: 36px;
	background-color: #0F2873;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
}

.mediamodel-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.24);
}

.mediamodel-band-name {
	position: relative;
	z-index: 1;
	padding: 20px;
	color: #FAD75F;
	font-family: "Arvo", serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
}

.mediamodel-bands {
	padding: 16px 0;
}

/* Read more ---------------------------------------------------------- */

.mediamodel-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.mediamodel-readmore:hover {
	color: #0E2052;
}

.mediamodel-eyebrow {
	display: inline-block;
	font-family: "Sora", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* Client name ticker on the home page ---------------------------------- */

.mediamodel-logo-item {
	display: inline-flex;
	align-items: center;
	font-family: "Arvo", serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 48px;
	color: #FFFFFF;
	white-space: nowrap;
	padding: 0 40px 0 0;
}

/* Each mark sits on its own white card, so it keeps the colours it was
   drawn in and still reads on the navy band. Drawing them all in white
   lost the detail inside the coloured ones. Every card is the same
   height and carries 40px of air after it. The row used to fade each item
   to a different opacity, which was written for the white names that were
   here before the logos; a faded logo reads as a printing fault, so the
   fade is gone. */
.mediamodel-logos .mediamodel-logo-item {
	height: auto;
	padding: 0 40px 0 0;
}

.mediamodel-logos .mediamodel-logo-item img {
	display: block;
	height: 48px;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: center;
	background: #FFFFFF;
	border: 1px solid #FAD75F;
	padding: 12px 20px;
	box-sizing: content-box;
}

.mediamodel-logos {
	padding: 96px 0;
}

/* Vertical label in the numbers band ----------------------------------- */

#mm-vertical-wrap {
	min-height: 258px;
	justify-content: center;
}

#mm-vertical-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	display: block;
}


/* Our Impact carousel ------------------------------------------------- */
/* The next card must peek in from the right. Swiper clips by default, so
   the slider itself is allowed to overflow and the full width section
   clips instead, which keeps the page from scrolling sideways. */

#mm-impact {
	overflow: hidden;
}

#mm-impact-carousel .swiper,
#mm-impact-carousel .elementor-loop-container,
#mm-impact-slider,
#mm-impact-inner {
	overflow: visible;
}

/* Let the next card show on the right, but cut anything on the left, so
   the previous card never bleeds into the section. */
#mm-impact-carousel .swiper {
	clip-path: inset(-100vh -100vw -100vh 0);
}

/* Footer reveal -------------------------------------------------------- */
/* The yellow logo band sits still at the bottom of the screen while the
   navy footer scrolls up off it. Three parts:
   1. the yellow band is sticky to the bottom of the window,
   2. the navy block is pulled up over it and painted on top,
   3. the footer gets bottom padding the size of the band, so there is
      room for the band to finish in.                                     */

:root {
	--mm-hello-h: 400px;
}

@media (max-width: 1024px) {
	:root { --mm-hello-h: 240px; }
}

@media (max-width: 767px) {
	:root { --mm-hello-h: 140px; }
}

body {
	overflow-x: clip; /* not hidden — hidden would break the sticky band */
}

.elementor-location-footer {
	position: relative;
}

/* The band is the last block in the footer. While the footer is coming up
   it is held against the bottom of the window, hidden behind the navy
   block, and the navy block scrolling up uncovers it. */
#mm-footer-hello {
	position: sticky;
	bottom: 0;
	z-index: 0;
	min-height: var(--mm-hello-h);
}

#mm-footer-main {
	position: relative;
	z-index: 2;
}

.mediamodel-wordmark {
	width: 100%;
	max-width: 1465px;
	margin: 0 auto;
}

.mediamodel-wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	/* The reveal is scroll position, not animation, so it stays. */
}

/* Project cards -------------------------------------------------------- */
/* The picture keeps the shape it has in the design, whatever the card
   width is. */

.mm-card {
	overflow: hidden;
}

/* Every project card with a picture is built the same way: picture on top,
   white block under it. Both parts must be the same size on every card, so
   the picture is locked to the shape from the design and the text that sits
   on it is cut off rather than allowed to push the picture taller. */

.mm-card-img,
.elementor-457 .e-con.e-parent > .e-con:first-child,
.elementor-472 .e-con.e-parent > .e-con:first-child,
.elementor-1130 .e-con.e-parent > .e-con:first-child {
	aspect-ratio: 1321 / 600;
	min-height: 0;
	overflow: hidden;
	flex: 0 0 auto;
}

/* Project name on the picture: three lines at most. */
.elementor-457 .e-con.e-parent > .e-con:first-child .elementor-heading-title,
.elementor-472 .e-con.e-parent > .e-con:first-child .elementor-heading-title,
.elementor-1130 .e-con.e-parent > .e-con:first-child .elementor-heading-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* White block: same height on every card. */
.elementor-457 .e-con.e-parent > .e-con:last-child,
.elementor-472 .e-con.e-parent > .e-con:last-child,
.elementor-1130 .e-con.e-parent > .e-con:last-child {
	flex: 1 0 auto;
}

/* Short description: three lines at most. */
.elementor-457 .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor p,
.elementor-472 .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor p,
.elementor-1130 .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
}


/* Project category tabs ------------------------------------------------ */
/* Elementor's taxonomy filter, dressed as the tab bar in the design. */

.mediamodel-tabs,
#mm-tabs .e-filter {
	display: flex;
	width: 100%;
	gap: 0;
	background: rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid #D1D5DB;
}

.mediamodel-tab,
#mm-tabs .e-filter-item {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	padding: 20px 10px;
	border: 0;
	border-bottom: 8px solid transparent;
	background: none;
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.mediamodel-tab.is-active,
#mm-tabs .e-filter-item[aria-pressed="true"] {
	font-weight: 600;
	border-bottom-color: #FAD75F;
}

/* Cards with a picture keep the shape from the design ------------------- */

#mm-featured-grid .e-con.e-parent > .e-con:first-child {
	aspect-ratio: 1321 / 600;
	min-height: 0;
}

/* Filtered project list ------------------------------------------------ */

#mm-all-grid .elementor-loop-container {
	align-items: stretch;
}


/* Project list grid ---------------------------------------------------- */

#mm-all-grid .elementor-loop-container {
	column-gap: 44px;
	row-gap: 52px;
}

#mm-featured-grid .elementor-loop-container {
	gap: 24px;
}


/* The tab bar is made of links, so the link colour has to be pinned. */
.mediamodel-tab,
.mediamodel-tab:hover,
.mediamodel-tab:focus {
	color: #000000;
	text-decoration: none;
}


/* Every card in a row is the same height ------------------------------- */

#mm-all-grid .elementor-loop-container > .e-loop-item {
	display: flex;
}

#mm-all-grid .e-loop-item > .e-con {
	width: 100%;
}

/* Featured work carousel ----------------------------------------------- */
/* Two rows, and the next card shows on the right. Same trick as Our
   Impact: the slider is allowed to spill to the right and the section
   clips, so the page never scrolls sideways. */

#mm-featured {
	overflow: hidden;
}

#mm-featured-carousel .swiper,
#mm-featured-carousel .elementor-loop-container {
	overflow: visible;
}

#mm-featured-carousel .swiper {
	clip-path: inset(-100vh -100vw -100vh 0);
}

#mm-featured-carousel .swiper-slide {
	height: auto;
}

/* ======================================================================
   Project inner page
   ====================================================================== */

/* Breadcrumbs ---------------------------------------------------------- */

.mediamodel-crumbs {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	color: #FFFFFF;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
}

.mediamodel-crumbs a,
.mediamodel-crumbs a:hover,
.mediamodel-crumbs a:focus {
	color: #FFFFFF;
	text-decoration: none;
}

.mediamodel-crumbs .is-current {
	font-weight: 600;
}

.mediamodel-crumb-sep {
	display: inline-flex;
	width: 24px;
	height: 24px;
}

/* The written part of a project page ----------------------------------- */
/* The client writes this in the editor, so every tag they can produce has
   a look set here. */

.mediamodel-prose {
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 20px;
	line-height: 32px;
}

.mediamodel-prose > *:first-child {
	margin-top: 0;
}

.mediamodel-prose > *:last-child {
	margin-bottom: 0;
}

.mediamodel-prose p {
	margin: 0 0 32px;
}

.mediamodel-prose p.lead {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 0;
}

.mediamodel-prose h2 {
	font-family: "Arvo", serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 48px;
	margin: 56px 0 20px;
}

.mediamodel-prose h3 {
	font-family: "Arvo", serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 40px;
	margin: 40px 0 16px;
}

.mediamodel-prose h2 + p,
.mediamodel-prose h3 + p {
	font-size: 24px;
	line-height: 32px;
}

/* Tick list: the small navy bar from the design stands in for the bullet. */
.mediamodel-prose ul {
	list-style: none;
	margin: 0 0 32px;
	padding: 0 0 0 112px;
}

.mediamodel-prose ul li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 28px;
}

.mediamodel-prose ul li:last-child {
	margin-bottom: 0;
}

.mediamodel-prose ul li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 7px;
	width: 4px;
	height: 18px;
	background: #0E2052;
}

.mediamodel-prose ol {
	margin: 0 0 32px;
	padding-left: 142px;
}

.mediamodel-prose ol li {
	margin-bottom: 8px;
}

.mediamodel-prose img {
	display: block;
	width: 100%;
	height: auto;
	margin: 56px 0;
}

.mediamodel-prose a {
	color: #0F2873;
}

/* Hero of a project page ------------------------------------------------ */

#mm-project-hero {
	min-height: 664px;
}

/* More projects slider -------------------------------------------------- */

#mm-related {
	overflow: hidden;
}

#mm-related-carousel .swiper,
#mm-related-carousel .elementor-loop-container,
#mm-related-slider {
	overflow: visible;
}

#mm-related-carousel .swiper {
	clip-path: inset(-100vh -100vw -100vh 0);
}

#mm-related-carousel .e-con.e-parent > .e-con:first-child {
	aspect-ratio: 1321 / 600;
	min-height: 0;
	overflow: hidden;
	flex: 0 0 auto;
}

#mm-related-carousel .e-con.e-parent > .e-con:first-child .elementor-heading-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

#mm-related-carousel .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
}

/* Card text, whether or not Elementor wraps it in a paragraph -----------
   With optimised markup on, the editor prints the field straight into the
   widget with no <p> around it, so both shapes are covered here. */

.elementor-457 .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor,
.elementor-472 .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor,
#mm-related-carousel .e-con.e-parent > .e-con:last-child > .elementor-widget-text-editor {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* ======================================================================
   Services page
   ====================================================================== */

/* The looping line drawing behind the yellow hero. */
#mm-services-hero {
	position: relative;
	overflow: hidden;
}

#mm-services-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/services-hero.svg");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	pointer-events: none;
}

#mm-services-hero > .e-con-inner,
#mm-services-hero > .e-con-inner > * {
	position: relative;
	z-index: 1;
}

/* Relevant projects under each practice ------------------------------- */

.mediamodel-dots {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mediamodel-dots li {
	position: relative;
	padding-left: 40px;
	margin: 0;
	font-family: "Sora", sans-serif;
	font-size: 18px;
	line-height: 32px;
	color: #000000;
}

.mediamodel-dots li::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 15px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #000000;
}

.mediamodel-dots li b {
	display: block;
	font-weight: 600;
}

.mediamodel-dots li span {
	display: block;
	opacity: .6;
	margin-top: 4px;
}

/* The method chips under "How we hold the standard" -------------------- */

.mediamodel-chips {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mediamodel-chips li {
	position: relative;
	padding-left: 32px;
	margin: 0 0 12px;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	line-height: 32px;
	color: #000000;
}

.mediamodel-chips li:last-child {
	margin-bottom: 0;
}

.mediamodel-chips li::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 14px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #000000;
}

/* ======================================================================
   Land & LARP page
   ====================================================================== */

/* Yellow band watermark ------------------------------------------------ */
/* The pale footprint pattern behind the numbers. One rule for the home
   page band and the LARP band, because Figma uses the same artwork.      */

#mm-numbers,
#mm-larp-numbers {
	position: relative;
	overflow: hidden;
}

/* Without JavaScript the pattern is simply there, standing still. */

#mm-numbers::before,
#mm-larp-numbers::before {
	content: "";
	position: absolute;
	top: 240px;
	left: 50%;
	margin-left: -888.5px;
	width: 1777.17px;
	height: 224.82px;
	background: url(../img/feet-pattern.svg) no-repeat left top / 1777.17px 224.82px;
	pointer-events: none;
	z-index: 0;
}

/* With JavaScript each print becomes its own element and the still
   pattern steps aside. */

#mm-numbers.mm-walks::before,
#mm-larp-numbers.mm-walks::before {
	display: none;
}

/* The walk. The prints do not move — footprints never do. They are laid
   down one after another, left to right, and the oldest fades away behind
   the walker. Every print runs the same 6.3 second cycle, each one a step
   later than the one before it, so the trail is always being written and
   never restarts. */

.mm-feet {
	position: absolute;
	top: 240px;
	left: 50%;
	margin-left: -888.585px;
	width: 1777.17px;
	height: 224.82px;
	pointer-events: none;
	z-index: 0;
}

.mm-foot {
	position: absolute;
	display: block;
	background-image: url(../img/feet-pattern.svg);
	background-repeat: no-repeat;
	background-size: 1777.17px 224.82px;
	opacity: 0;
	transform-origin: 50% 85%;
	animation: mm-foot-step 6.3s linear infinite;
	will-change: opacity, transform;
}

@keyframes mm-foot-step {

	0%   { opacity: 0; transform: scale(0.92); }
	3%   { opacity: 1; transform: scale(1); }
	22%  { opacity: 1; transform: scale(1); }
	40%  { opacity: 0; transform: scale(1); }
	100% { opacity: 0; transform: scale(1); }
}

/* Someone who has asked their machine for less movement gets the whole
   trail, standing still. */

@media (prefers-reduced-motion: reduce) {

	.mm-foot {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

#mm-numbers > .e-con-inner > *,
#mm-larp-numbers > .e-con-inner > * {
	position: relative;
	z-index: 1;
}

/* Rotated side label --------------------------------------------------- */

#mm-larp-word-1,
#mm-larp-word-2,
.mm-vert {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	display: block;
}

/* Step chevrons -------------------------------------------------------- */

.mm-chev {
	display: block;
	padding-top: 18px;
}

#mm-step-01,
#mm-step-02,
#mm-step-03,
#mm-step-04 {
	opacity: 0.8;
}

/* Selected LARP programs carousel -------------------------------------- */
/* Same peek trick as Our Impact: the slider spills to the right and the
   section clips, so the page never scrolls sideways.                     */

#mm-larp-impact {
	overflow: hidden;
}

#mm-larp-carousel .swiper,
#mm-larp-carousel .elementor-loop-container,
#mm-larp-impact-inner {
	overflow: visible;
}

#mm-larp-carousel .swiper {
	clip-path: inset(-100vh -100vw -100vh 0);
}

#mm-larp-carousel .swiper-slide {
	height: auto;
}

/* ======================================================================
   About us page
   ====================================================================== */

/* Mission / Vision: two full-height halves, side by side on desktop and
   stacked on a phone.                                                   */

#mm-mission-vision > .e-con-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
}

@media (max-width: 767px) {
	#mm-mission-vision > .e-con-inner > .e-con {
		width: 100%;
	}
}

/* Learn more cards: the whole card is the link ------------------------- */
/* Elementor's own container Link control does not render an anchor on a
   full-width container, so the title carries the link and the anchor is
   stretched over the card instead.                                       */

#mm-card-collective,
#mm-card-impact {
	position: relative;
}

/* Elementor gives every widget position:relative, which would trap the
   stretched anchor inside the heading. Take that away so it resolves
   against the card.                                                      */
.elementor-widget.mm-cardlink,
.mm-cardlink .elementor-widget-container,
.mm-cardlink .elementor-heading-title {
	position: static;
}

.mm-cardlink a {
	color: inherit;
	text-decoration: none;
}

.mm-cardlink a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ======================================================================
   Partners page
   ====================================================================== */

.mediamodel-partners {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.mediamodel-partners {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.mediamodel-partners {
		grid-template-columns: 1fr;
	}
}

.mediamodel-partner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 160px;
	height: 100%;
	padding: 20px;
	background: #FFFFFF;
	border-left: 8px solid #FAD75F;
	box-shadow: 0 32px 48px -24px rgba(13, 28, 66, 0.12);
	text-decoration: none;
}

.mediamodel-partner span {
	font-family: "Arvo", serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: #0F2873;
}

.mediamodel-partner img {
	/* The logo has the whole card to itself, so it takes the room the card
	   allows. Every logo file sits on the same canvas, so they all come out
	   the same size without a fixed height here. */
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	object-position: center;
}

a.mediamodel-partner:hover {
	box-shadow: 0 32px 48px -20px rgba(13, 28, 66, 0.24);
}

/* Partners: the proof carousel peeks the same way as the others -------- */

#mm-partners-proof {
	overflow: hidden;
}

#mm-partners-carousel .swiper,
#mm-partners-carousel .elementor-loop-container,
#mm-partners-proof-inner {
	overflow: visible;
}

#mm-partners-carousel .swiper {
	clip-path: inset(-100vh -100vw -100vh 0);
}

#mm-partners-carousel .swiper-slide,
#mm-larp-carousel .swiper-slide {
	height: auto;
}

/* The card fills its loop item, so every cell in the grid is the same. */

#mm-partners-loop .e-loop-item,
#mm-partners-loop .e-con.e-parent,
#mm-partners-loop .elementor-widget-shortcode,
#mm-partners-loop .elementor-widget-shortcode .elementor-widget-container {
	height: 100%;
}

#mm-partners-loop .mediamodel-partner {
	height: 100%;
}

/* Pagination numbers, in the site's type. */

#mm-partners-loop .elementor-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 44px;
}

#mm-partners-loop .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	background: #FFFFFF;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

#mm-partners-loop .page-numbers.current,
#mm-partners-loop .page-numbers:hover {
	background: #FAD75F;
	color: #0F2873;
}

/* ======================================================================
   Contact page
   ====================================================================== */

/* The Elementor form, in the site's own type and colours. */

#mm-contact-form .elementor-field-group > label {
	margin-bottom: 8px;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

#mm-contact-form .elementor-field-textual {
	min-height: 56px;
	padding: 14px 16px;
	border: 1px solid #E5E7EB;
	border-radius: 0;
	background: #FFFFFF;
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 18px;
	line-height: 28px;
}

#mm-contact-form .elementor-field-textual:focus {
	border-color: #0F2873;
	box-shadow: none;
	outline: none;
}

#mm-contact-form textarea.elementor-field-textual {
	min-height: 168px;
}

#mm-contact-form .elementor-button {
	padding: 16px 32px;
	border: 0;
	border-radius: 0;
	background: #0F2873;
	box-shadow: 0 20px 24px -16px rgba(13, 28, 66, 0.32);
	color: #FFFFFF;
	font-family: "Sora", sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.18px;
	line-height: 28px;
}

#mm-contact-form .elementor-button:hover {
	background: #0E2052;
}

#mm-contact-form .elementor-message {
	font-family: "Sora", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

/* Contact details: the value sits right under its label. */

#mm-contact-details a {
	color: #0F2873;
	text-decoration: none;
}

#mm-contact-details a:hover {
	text-decoration: underline;
}

/* The submit button keeps its own width, like every other button. */

#mm-contact-form .elementor-field-type-submit {
	justify-content: flex-start;
}

#mm-contact-form .elementor-field-type-submit .elementor-button {
	flex: 0 0 auto;
	width: auto;
	min-width: 312px;
}

/* Map: a plain Google embed, full width. */

.mm-map {
	position: relative;
	width: 100%;
	height: 480px;
}

.mm-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.mm-map {
		height: 320px;
	}
}

/* ======================================================================
   Our Collective
   ====================================================================== */

.mediamodel-person {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #FFFFFF;
	border-left: 8px solid #FAD75F;
	box-shadow: 0 32px 48px -24px rgba(13, 28, 66, 0.12);
	overflow: hidden;
}

.mediamodel-person-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #E5E7EB center center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.mediamodel-person-photo span {
	color: #0F2873;
	font-family: "Arvo", serif;
	font-size: 56px;
	font-weight: 700;
	line-height: 64px;
	opacity: 0.35;
}

.mediamodel-person-body {
	flex: 1 0 auto;
	padding: 28px 32px 32px;
}

.mediamodel-person-body h3 {
	margin: 0;
	color: #000000;
	font-family: "Arvo", serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
}

.mediamodel-person-role {
	margin: 6px 0 0;
	color: #0F2873;
	font-family: "Sora", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

.mediamodel-person-bio {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin: 16px 0 0;
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 16px;
	line-height: 28px;
}

/* The card fills its loop cell, so the grid rows line up. */

#mm-team-loop .e-loop-item,
#mm-team-loop .e-con.e-parent,
#mm-team-loop .e-con-full,
#mm-team-loop .elementor-widget-shortcode,
#mm-team-loop .elementor-widget-shortcode .elementor-widget-container,
#mm-team-loop .elementor-shortcode {
	height: 100%;
}

/* Header search field -------------------------------------------------- */

.mediamodel-search-field input[type="search"] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #E5E7EB;
	border-radius: 0;
	background: #FFFFFF;
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.mediamodel-search-field input[type="search"]:focus {
	border-color: #0F2873;
	outline: none;
}

.mediamodel-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #0F2873;
}

/* On a phone the field opens under the icon, not beside it. */

@media (max-width: 767px) {
	.mediamodel-search {
		position: relative;
	}

	.mediamodel-search-field {
		position: absolute;
		top: calc(100% + 12px);
		right: 0;
		z-index: 20;
		width: 0;
	}

	.mediamodel-search.is-open .mediamodel-search-field {
		width: 78vw;
		max-width: 320px;
	}
}

/* Search results page -------------------------------------------------- */

.mediamodel-search-note {
	margin: 0;
	color: #000000;
	font-family: "Sora", sans-serif;
	font-size: 20px;
	line-height: 32px;
}

#mm-search-grid .elementor-loop-container {
	align-items: stretch;
}

/* The field floats over the header instead of pushing the menu around.
   A flex child would be squeezed to nothing by the widget's own width. */

.mediamodel-search {
	position: relative;
}

.mediamodel-search-field {
	position: static;
	flex: 0 0 auto;
	transform: none;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width .35s ease, opacity .25s ease;
}

.mediamodel-search.is-open .mediamodel-search-field {
	width: 280px;
	opacity: 1;
}

@media (max-width: 767px) {
	.mediamodel-search-field {
		position: absolute;
		top: calc(100% + 12px);
		right: 0;
		transform: none;
	}

	.mediamodel-search.is-open .mediamodel-search-field {
		width: 78vw;
		max-width: 320px;
	}
}

/* The theme puts a border on every button; the search icon is not one.
   The icon is navy like the menu and does nothing on hover. */

.mediamodel-search .mediamodel-search-toggle,
.mediamodel-search .mediamodel-search-toggle:hover,
.mediamodel-search .mediamodel-search-toggle:focus,
.mediamodel-search .mediamodel-search-toggle:active {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #0F2873;
	fill: none;
	transform: none;
	transition: none;
	filter: none;
	opacity: 1;
}

.mediamodel-search .mediamodel-search-toggle svg {
	display: block;
	stroke: currentColor;
}

.mediamodel-search .mediamodel-search-toggle:focus-visible {
	outline: 2px solid #0F2873;
	outline-offset: 2px;
}

/* Long partner names break between words, never inside one. */

.mediamodel-partner span {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* About us — the two Learn more cards. The line under the title always
   takes two lines, so both titles sit at the same height. */

#mm-card-collective .elementor-widget-text-editor,
#mm-card-impact .elementor-widget-text-editor {
	min-height: 72px;
}

#mm-card-collective .elementor-widget-text-editor p,
#mm-card-impact .elementor-widget-text-editor p {
	margin: 0;
}

/* The whole project card opens the project. */

.elementor-457,
.elementor-472,
.elementor-474 {
	cursor: pointer;
}

/* A project with no page of its own is not clickable. */

.elementor-457.mm-no-page,
.elementor-472.mm-no-page,
.elementor-474.mm-no-page {
	cursor: default;
}

.elementor-457 a,
.elementor-472 a,
.elementor-474 a {
	color: inherit;
	text-decoration: none;
}

/* ======================================================================
   Phones and tablets

   The pages are built to one desktop design. Everything below reshapes
   that layout for a smaller screen.

     up to 1024px  tablet: smaller gutters, display type comes down
     up to  900px  columns stop sitting side by side and become a stack
     up to  767px  phone type sizes
     up to  480px  the last squeeze for a small phone

   Header and footer have their own rules at the end.
   ====================================================================== */

/* ---- Tablet and below ----------------------------------------------- */

@media (max-width: 1024px) {

	.e-con.e-parent {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
		overflow-x: hidden;
	}

	h1, h1 * { font-size: 56px !important; line-height: 1.12 !important; }
	h2, h2 * { font-size: 40px !important; line-height: 1.2 !important; }

	.elementor-widget-loop-grid .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* A carousel shows the edge of the next card here too, the same way it
	   does on a wide screen. That sliver is how a person can tell there is
	   more to swipe to. The page itself cannot be dragged sideways — the
	   body clips anything wider than the screen — so letting the card run
	   past the edge is safe. */

	.elementor-loop-container.swiper,
	.elementor-widget-loop-carousel .swiper {
		overflow: visible !important;
	}

	/* A card in a carousel or grid carries the padding it was designed
	   with, which for these project cards is none: the coloured panel runs
	   to the edge of the white card. The page padding above must not reach
	   inside them. */

	.e-loop-item > .e-con.e-parent,
	.e-loop-item .e-con.e-parent {
		padding: 0 !important;
	}

	/* On the desktop design this carousel runs past the right edge so the
	   next card peeks. There is no room for that below 1024. */
	#mm-impact-slider,
	#mm-impact-carousel {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Words set sideways down the edge of a section. There is no room for
	   them once the layout narrows.

	   Mission and Vision used to be in this list. They are titles, not
	   decoration, so they stay — laid flat, further down this file. */
	.elementor-element-68c68749,
	.elementor-element-46ebc0c7,
	.elementor-element-3eb8a88a {
		display: none !important;
	}

	/* Display headings written as a plain line carry their size from the
	   design, so no tag rule can reach them. Each one is named here.
	   If a page template is regenerated its element ids change and these
	   lists have to be built again. */
	.elementor-element-24b57f65 .elementor-heading-title,
	.elementor-element-394ae4f2 .elementor-heading-title {
		font-size: 56px !important;
		line-height: 1.1 !important;
	}
}

/* ---- Columns become a stack ----------------------------------------- */

@media (max-width: 900px) {

	.e-con.e-child {
		width: 100% !important;
		max-width: 100% !important;
		flex-wrap: wrap !important;
		min-height: 0 !important;
	}

	/* A container holding nothing keeps its own size. This one is the thin
	   white scroll line under the hero. */
	.elementor-element-138d7a89 {
		width: 2px !important;
	}

	/* One card per row. minmax(0,...) lets a long name wrap instead of
	   pushing the column wider than the screen. */
	.elementor-widget-loop-grid .elementor-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	#mm-partners-loop .e-con {
		min-height: 0 !important;
		padding: 20px !important;
	}

	.mediamodel-partners {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* The picture on a card is taller, so the title on it still fits. */
	.mm-card-img,
	.elementor-457 .e-con.e-parent > .e-con:first-child,
	.elementor-472 .e-con.e-parent > .e-con:first-child,
	.elementor-1130 .e-con.e-parent > .e-con:first-child {
		aspect-ratio: 4 / 3 !important;
	}

	.elementor-457 .e-con.e-parent > .e-con:first-child,
	.elementor-472 .e-con.e-parent > .e-con:first-child,
	.elementor-1130 .e-con.e-parent > .e-con:first-child,
	.elementor-474 .e-con.e-parent > .e-con {
		padding: 24px !important;
	}

	/* The category tabs scroll sideways instead of stacking. */
	.mediamodel-tabs {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.mediamodel-tab {
		flex: 0 0 auto !important;
		white-space: nowrap;
	}

	/* The breadcrumb wraps instead of running off the screen. */
	.mediamodel-crumbs {
		flex-wrap: wrap !important;
		row-gap: 4px;
	}

	.mediamodel-crumbs > * {
		min-width: 0;
	}

	.mm-chev {
		display: none !important;
	}

	/* Mission and Vision are set sideways on a wide screen. A phone has no
	   room for that, so they lie flat above their own text instead of being
	   hidden, which is what used to happen. */
	.mm-vert {
		writing-mode: horizontal-tb !important;
		transform: none !important;
		white-space: normal !important;
		margin-bottom: 10px;
	}

	.elementor-field-type-submit .elementor-button {
		min-width: 0 !important;
		width: 100% !important;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

/* ---- Phone type sizes ------------------------------------------------ */

@media (max-width: 767px) {

	.e-con.e-parent {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	h1, h1 * { font-size: 36px !important; line-height: 1.15 !important; }
	h2, h2 * { font-size: 28px !important; line-height: 1.2 !important; }
	h3, h3 * { font-size: 22px !important; line-height: 1.3 !important; }

	.elementor-widget-text-editor,
	.elementor-widget-text-editor p {
		font-size: 16px !important;
		line-height: 1.7 !important;
	}

	.elementor-element-24b57f65 .elementor-heading-title,
	.elementor-element-394ae4f2 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}

	.elementor-element-7c489c11 .elementor-heading-title,
	.elementor-element-560fcbc4 .elementor-heading-title,
	.elementor-element-7ac81cfd .elementor-heading-title,
	.elementor-element-34edecdf .elementor-heading-title,
	.elementor-element-67408d5f .elementor-heading-title,
	.elementor-element-5c58e578 .elementor-heading-title,
	.elementor-element-19098c7 .elementor-heading-title,
	.elementor-element-105865a .elementor-heading-title,
	.elementor-element-336f3044 .elementor-heading-title,
	.elementor-element-29580c39 .elementor-heading-title,
	.elementor-element-1331bb82 .elementor-heading-title,
	.elementor-element-4ddc2d19 .elementor-heading-title,
	.elementor-element-1e8b409c .elementor-heading-title,
	.elementor-element-c9976aa .elementor-heading-title,
	.elementor-element-6acb180a .elementor-heading-title,
	.elementor-element-5ff4af0e .elementor-heading-title,
	.elementor-element-7dc7a3f6 .elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.2 !important;
	}

	.elementor-element-76f9a36f .elementor-heading-title,
	.elementor-element-57dc2339 .elementor-heading-title,
	.elementor-element-3aaea704 .elementor-heading-title,
	.elementor-element-3243fe76 .elementor-heading-title,
	.elementor-element-cad72f1 .elementor-heading-title {
		font-size: 24px !important;
		line-height: 1.3 !important;
	}
}

/* ---- Small phone ----------------------------------------------------- */

@media (max-width: 480px) {

	/* A name with no space in it has to break rather than run off. */
	.mediamodel-partner span {
		overflow-wrap: break-word !important;
	}
}

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

@media (max-width: 900px) {

	header.elementor .e-con.e-parent {
		padding-left: 16px !important;
		padding-right: 16px !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
	}

	header.elementor .e-con.e-child {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		flex-wrap: nowrap !important;
	}

	header.elementor .e-con.e-parent > .e-con.e-child:first-child {
		flex: 1 1 auto !important;
	}

}

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

@media (max-width: 900px) {

	footer.elementor .e-con.e-parent {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	footer.elementor .e-con.e-child {
		width: 100% !important;
		max-width: 100% !important;
		flex-wrap: wrap !important;
	}
}

/* A partner name is a flex item, so it needs permission to shrink before
   it will wrap. */

.mediamodel-partner,
.mediamodel-partner span {
	min-width: 0;
}

/* About us — the two Learn more cards. The line under the title always
   takes two lines, so both titles sit at the same height. */

#mm-card-collective .elementor-widget-text-editor,
#mm-card-impact .elementor-widget-text-editor {
	min-height: 72px;
}

#mm-card-collective .elementor-widget-text-editor p,
#mm-card-impact .elementor-widget-text-editor p {
	margin: 0;
}

/* ======================================================================
   Sections arrive as you reach them

   Headings, text and buttons below the first screen start a little low
   and see-through, then settle as they come into view. Once only — coming
   back up the page does not replay it.

   The hiding is added by JavaScript, never by this file alone, so a page
   without JavaScript shows everything.
   ====================================================================== */

.mm-reveal {
	opacity: 0 !important;
	transform: translateY(32px) !important;
	transition: opacity 1s ease-out, transform .85s cubic-bezier(.22, .61, .36, 1) !important;
	will-change: opacity, transform;
}

.mm-reveal.mm-in {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

	.mm-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* The footer menu sits closer together than ordinary paragraphs. */

#mm-footer-nav p {
	margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------
   The phone menu.

   Elementor drops the menu list inside the header's middle column,
   which is only as wide as the burger, so the links landed in a
   narrow strip beside the logo. Take the list out of the flow and
   hang it under the whole header instead.

   Three things have to be true for that to work: the header is the
   thing the list is measured from, the column between them is not,
   and the header no longer clips what sticks out of it. That last
   one needs !important — the responsive layer above hides overflow
   on every parent container to stop sideways scrolling.
   --------------------------------------------------------------- */
@media ( max-width: 1279px ) {

	.mm-site-header {
		position: relative;
		z-index: 100;
		overflow: visible !important;
	}

	.mm-site-header > .e-con,
	.mm-site-header .elementor-widget-nav-menu,
	.mm-site-header .elementor-widget-nav-menu > .elementor-widget-container {
		position: static;
	}

	.mm-site-header .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		/* Elementor sets a 10px top margin on the dropdown from a rule
		   scoped to the widget, which leaves a strip of the page showing
		   between the header and the panel. */
		margin: 0 !important;
		padding: 6px 0 12px;
		background: #FFFFFF;
		border-top: 1px solid #E6E8F0;
		box-shadow: 0 14px 28px rgba( 15, 40, 115, .12 );
		z-index: 999;
	}

	.mm-site-header .elementor-nav-menu--dropdown .elementor-item {
		padding: 14px 28px;
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------
   A project card whose project has no photo yet.

   The picture area is a background image. With no image the page
   shows through, and the yellow title sits on pale grey where it
   cannot be read. Navy behind it keeps the card legible, and the
   photo covers the navy as soon as one is set.
   --------------------------------------------------------------- */
.elementor-457 .elementor-element-687393f1,
.elementor-472 .elementor-element-4063b2aa,
.elementor-474 .elementor-element-4063b2aa,
.elementor-1130 .elementor-element-4063b2aa {
	background-color: #0F2873;
}

/* ---------------------------------------------------------------
   Buttons: one hover for the whole site.

   Every button lands in the same place — yellow behind navy text —
   whether it started as a navy block or as a yellow outline on a
   photo. One destination, so the site behaves the same way wherever
   you point at it.

   Elementor writes its own rule per widget, scoped by element id,
   which outranks a plain class. The hover state needs !important to
   land; the resting state is left exactly as the design set it.

   The search icon is deliberately left out — Ashot asked for no
   hover on it.
   --------------------------------------------------------------- */

.elementor-button,
.mediamodel-tab,
#mm-partners-loop .page-numbers {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.elementor-button:hover,
.elementor-button:focus-visible {
	background-color: #FAD75F !important;
	border-color: #FAD75F !important;
	color: #0F2873 !important;
}

/* The tab bar is quieter. It only warms the underline, so the hover
   never looks like the active tab. */
.mediamodel-tab:hover,
.mediamodel-tab:focus-visible {
	color: #0F2873;
	border-bottom-color: #F3E3A8;
}

/* Someone moving by keyboard has to see where they are. */
.elementor-button:focus-visible,
.mediamodel-tab:focus-visible,
#mm-partners-loop .page-numbers:focus-visible {
	outline: 2px solid #0F2873;
	outline-offset: 3px;
}


/* ---------------------------------------------------------------
   Photo blocks on a phone.

   Several photos on the site are an empty container with a
   background image and a min-height. The rule above zeroes
   min-height on every child container so columns can stack, which
   left those photos with no height at all — they vanished on
   Services and About.

   mediamodel.js tags the empty ones that carry a photo. They keep a
   shape of their own instead of a height, so they survive whatever
   the stacking rules do.
   --------------------------------------------------------------- */
@media ( max-width: 900px ) {

	.mm-photo-block {
		aspect-ratio: 4 / 3;
		min-height: 0 !important;
		background-size: cover;
		background-position: center;
	}
}

/* ---------------------------------------------------------------
   Mission and Vision on a phone.

   On a wide screen each one is a row: a narrow column holding the
   title set sideways, and a wider column of text beside it. Once the
   title lies flat that row no longer fits, and both columns squeeze
   to about half the screen.

   On a phone the row becomes a stack, each part full width, title
   above its own text and aligned left with it.
   --------------------------------------------------------------- */
@media ( max-width: 900px ) {

	.elementor-element-6b4b2b06,
	.elementor-element-464f7731 {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-element-253da522,
	.elementor-element-3e0de399,
	.elementor-element-221019e4,
	.elementor-element-79b9a09e,
	.elementor-element-5d660c19,
	.elementor-element-1531cfae {
		width: 100% !important;
		max-width: 100% !important;
		align-items: flex-start !important;
	}

	.elementor-element-3e0de399,
	.elementor-element-79b9a09e {
		margin-bottom: 4px;
	}

	/* The yellow band keeps its desktop side padding, which on a phone
	   leaves the text about half the screen wide. */
	.elementor-element-433e004a,
	.elementor-element-44de348d {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ---------------------------------------------------------------
   Footer links
   The theme paints a plain link pink. Everything inside the footer
   uses the footer's own colour instead, and turns yellow on hover.
   --------------------------------------------------------------- */
#mm-footer-main a {
	color: #D8DEF0;
	text-decoration: none;
	transition: color .25s ease;
}

#mm-footer-main a:hover,
#mm-footer-main a:focus-visible {
	color: #FAD75F;
}

/* ---------------------------------------------------------------
   The logo under the footer text
   Navy artwork on a navy panel would disappear, so the mark is
   forced to the footer's light colour and turns yellow on hover.
   --------------------------------------------------------------- */
.mm-footer-logo {
	display: block;
	width: 100%;
	max-width: 220px;
	margin-top: 28px;
	color: #D8DEF0;
	transition: color .25s ease;
}

.mm-footer-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.mm-footer-logo svg * {
	fill: currentColor !important;
}

.mm-footer-logo:hover,
.mm-footer-logo:focus-visible {
	color: #FAD75F;
}

@media (max-width: 900px) {
	.mm-footer-logo {
		max-width: 180px;
		margin-top: 20px;
	}
}

/* ---------------------------------------------------------------
   Project meta blocks
   When a field is empty Elementor drops the value and leaves the
   label on its own. A block with nothing under its label is hidden.
   --------------------------------------------------------------- */
.elementor-element-6981d80a:has( > .elementor-widget:only-child ),
.elementor-element-50cf2548:has( > .elementor-widget:only-child ),
.elementor-element-7dd8a101:has( > .elementor-widget:only-child ),
.elementor-element-533e1318:has( > .elementor-widget:only-child ),
.elementor-element-1f55eab7:has( > .elementor-widget:only-child ),
.elementor-element-7bdb0fd5:has( > .elementor-widget:only-child ),
.elementor-element-78a42177:has( > .elementor-widget:only-child ) {
	display: none !important;
}

/* The framing paragraph that opens a project page. */
.mm-project-lead {
	margin-bottom: 1.4em;
}

/* ---------------------------------------------------------------
   Photo backgrounds
   A photo set as a background must fill its box once. Left alone,
   the browser tiles it whenever the box is wider than the picture.
   --------------------------------------------------------------- */
.elementor-element.elementor-element-108d6701,
.elementor-element.elementor-element-1675e9ed,
.elementor-element.elementor-element-1cc9c06d,
.elementor-element.elementor-element-248493fa,
.elementor-element.elementor-element-25d048ad,
.elementor-element.elementor-element-4063b2aa,
.elementor-element.elementor-element-42841e47,
.elementor-element.elementor-element-485296aa,
.elementor-element.elementor-element-4a669995,
.elementor-element.elementor-element-513e0bfd,
.elementor-element.elementor-element-5317bf83,
.elementor-element.elementor-element-5a864fd7,
.elementor-element.elementor-element-5dde62a0,
.elementor-element.elementor-element-6729484e,
.elementor-element.elementor-element-687393f1,
.elementor-element.elementor-element-69e69e7b,
.elementor-element.elementor-element-6f5ada47,
.elementor-element.elementor-element-700a30ab,
.elementor-element.elementor-element-75409806,
.elementor-element.elementor-element-7f61fcfe,
.elementor-element.elementor-element-7fa80501,
.elementor-element.elementor-element-f61e546,
.mm-photo-block {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
}

/* ---------------------------------------------------------------
   Phone spacing
   Desktop is signed off, so these only apply on a phone.
   The band inside a section carries the desktop padding as well as
   the section's own, which doubles the space around every block.
   One spacing step is used instead of 20, 40 and 48.
   --------------------------------------------------------------- */
@media (max-width: 767px) {

	[data-elementor-type="wp-page"] .e-con > .e-con-inner {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	[data-elementor-type="wp-page"] > .e-con > .e-con-inner,
	[data-elementor-type="wp-page"] > .e-con > .e-con-inner > .e-con,
	[data-elementor-type="wp-page"] > .e-con > .e-con-inner > .e-con > .e-con {
		row-gap: 24px !important;
	}

	/* Two sections of the same colour read as one block, so the join
	   between them is closed up. A colour change marks its own break. */
	[data-elementor-type="wp-page"] > .e-con.mm-same-bg {
		padding-top: 0 !important;
	}
}

/* ---- Office map (Contact page) ---- */
.mm-map {
  position: relative;
  width: 100%;
  height: var(--mm-map-h, 420px);
  border-radius: 14px;
  overflow: hidden;
  background: #0F2873;
}
.mm-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .mm-map { height: 300px; border-radius: 10px; }
}

/* ---- No sideways scroll ----
   A decorative block that sits wider than the screen must never make the
   page scroll sideways. "clip" cuts it off without turning the wrapper
   into a scroll box, so sticky and fixed parts keep working. */
.page-content {
  overflow-x: clip;
}


/* ---------------------------------------------------------------
   Header menu on one row.

   The two side columns were each a fifth of the header, far wider
   than the logo and the tools actually use, so the links were
   squeezed into the middle. The Armenian labels are longer than the
   English ones and fell onto a second row. Give the side columns
   only the width they need, hand the rest to the menu, and sit the
   links closer together.
   --------------------------------------------------------------- */
@media ( min-width: 1280px ) {

	.mm-site-header > .e-con:first-child,
	.mm-site-header > .e-con:last-child {
		width: auto !important;
		flex: 0 0 auto;
	}

	.mm-site-header > .e-con:nth-child( 2 ) {
		flex: 1 1 auto;
	}

	.mm-header-nav .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.mm-header-nav .elementor-nav-menu > li > a.elementor-item {
		/* Elementor writes this padding from the widget's own settings,
		   with a selector that outweighs anything a plugin can write. */
		padding-left: 12px !important;
		padding-right: 12px !important;
		white-space: nowrap;
	}
}

/* Between 1280 and 1365 the row is tight, so the gaps between the links
   give a few pixels back. The logo keeps the size it was given. */
@media ( min-width: 1280px ) and ( max-width: 1365px ) {

	.mm-header-nav .elementor-nav-menu > li > a.elementor-item {
		padding-left: 9px !important;
		padding-right: 9px !important;
	}
}

/* The Armenian words are longer than the English ones, so the row runs
   out about forty pixels earlier. Rather than make the Armenian logo
   smaller than the English one, the burger simply takes over a little
   sooner on those screens. */
@media ( min-width: 1280px ) and ( max-width: 1319px ) {

	html[lang|="hy"] .mm-site-header .elementor-nav-menu--main {
		display: none !important;
	}

	html[lang|="hy"] .mm-site-header .elementor-menu-toggle {
		display: flex !important;
	}
}

/* Under 1280 the links do not fit on one row in either language, so
   the burger takes over earlier than Elementor's own 1024. */
@media ( max-width: 1279px ) {

	.mm-site-header .elementor-nav-menu--main {
		display: none !important;
	}

	.mm-site-header .elementor-menu-toggle {
		display: flex !important;
	}
}

/* ---------------------------------------------------------------
   Header logo.

   The size is set on the widget itself, in Elementor, for each screen.
   Nothing here overrides it — earlier versions of this file did, which
   is why the two languages drifted apart.
   --------------------------------------------------------------- */

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

   WPML's own dropdown is a bare list: no box, no spacing, and the
   panel opens to the left of the button. It is rebuilt here as a
   proper control — a bordered button with the panel squared off
   underneath it, both languages left aligned with each other and
   enough height to hit on a phone. WPML writes its own rules from
   its stylesheet, so these have to win outright.
   --------------------------------------------------------------- */
.wpml-ls-legacy-dropdown {
	width: auto !important;
	max-width: none !important;
	font-family: "Sora", sans-serif;
}

.wpml-ls-legacy-dropdown > ul,
.wpml-ls-legacy-dropdown > ul > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpml-ls-legacy-dropdown > ul > li {
	position: relative;
}

/* The button. */
.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 96px;
	padding: 10px 14px !important;
	border: 1px solid #D1D5DB !important;
	background: #FFFFFF !important;
	color: #15256B !important;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle:hover,
.wpml-ls-legacy-dropdown > ul > li:hover > a.wpml-ls-item-toggle {
	border-color: #15256B !important;
}

/* WPML draws its arrow with this pseudo element. */
.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle::after {
	position: static !important;
	margin: 0 !important;
	border-top-color: #15256B !important;
}

/* The panel. */
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	min-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #D1D5DB !important;
	border-top: 0 !important;
	background: #FFFFFF !important;
	box-shadow: 0 8px 20px rgba( 21, 37, 107, 0.12 );
	z-index: 120;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
	display: block !important;
	padding: 10px 14px !important;
	background: #FFFFFF !important;
	color: #15256B !important;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: left;
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:focus {
	background: #F3F4F6 !important;
	color: #15256B !important;
}

/* On a phone the control and the panel both get taller rows, and the
   panel keeps the button's left edge instead of sliding sideways. */
@media ( max-width: 1024px ) {

	.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle,
	.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
		padding: 12px 16px !important;
		font-size: 14px !important;
	}

	.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle {
		min-width: 104px;
	}
}

#mm-footer-main a.mm-lang,
footer a.mm-lang {
	display: inline-block;
	padding: 8px 12px;
}

/* ---------------------------------------------------------------
   Yellow square bullets.

   Lists inside the page text use a small yellow square instead of
   the browser's round dot, to match the accents used elsewhere.
   The project one-liners keep their own marker.
   --------------------------------------------------------------- */
[data-elementor-type="wp-page"] .elementor-widget-text-editor ul:not(.mediamodel-dots) {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

[data-elementor-type="wp-page"] .elementor-widget-text-editor ul:not(.mediamodel-dots) > li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
}

[data-elementor-type="wp-page"] .elementor-widget-text-editor ul:not(.mediamodel-dots) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 9px;
	background: #FAD75F;
}

/* ---------------------------------------------------------------
   Phone spacing on the home page.

   Two blocks were built for a wide screen and left large gaps on a
   phone: the numbers band and the partners band. These bring the
   parts closer together and size the scrolling client names for a
   narrow screen.
   --------------------------------------------------------------- */
@media ( max-width: 767px ) {

	/* By the numbers */
	.elementor-element-600d21da {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}

	.elementor-element-600d21da > .e-con-inner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		row-gap: 8px !important;
	}

	.elementor-element-491ab2a9 { padding-bottom: 8px !important; }

	.elementor-element-29601b52 {
		padding-top: 0 !important;
		row-gap: 14px !important;
	}

	.elementor-element-29601b52 > .e-con { row-gap: 4px !important; }

	/* Partners band */
	.elementor-element-ef9a470 {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}

	.elementor-element-ef9a470 > .e-con-inner { row-gap: 16px !important; }

	.elementor-element-25d3f056 { margin-top: 16px !important; }

	.mediamodel-logos { padding: 24px 0 !important; }

	.mediamodel-logos .mediamodel-logo-item {
		font-size: 26px;
		padding-right: 36px;
	}
}

/* ======================================================================
   Project card meta row — year, method, sample size
   ======================================================================
   The same two widgets are copied into every card template (the big
   card on the home page, the card on Projects, the LARP card and the
   related-projects carousel), and Elementor keeps the element ids
   through each copy. Addressing the ids covers all of them at once,
   in both languages, instead of naming template after template.

   Element ids:
     big card   labels 163461d8 274ca644 751268b6
                values 7ff077b5 4535d10  d8f3b2e
     small card labels 57e5b7b1 6bc030c  6cc47b9a
                values 5d682140 4bfaf83a 1c919572
   ====================================================================== */

/* The label is the bold line; the value under it is plain. Every card
   template was built the other way round, and Elementor writes these
   weights from the widget's own settings, so they have to be
   overridden outright.

   Four more templates carry the same pair: the list card on Projects
   (474) and the block at the top of a single project page (338). They
   were found by walking every page and listing every container whose
   only two children are a heading and a text editor. */
.elementor-element-163461d8 .elementor-heading-title,
.elementor-element-274ca644 .elementor-heading-title,
.elementor-element-751268b6 .elementor-heading-title,
.elementor-element-57e5b7b1 .elementor-heading-title,
.elementor-element-6bc030c .elementor-heading-title,
.elementor-element-6cc47b9a .elementor-heading-title,
.elementor-element-5d43a3bb .elementor-heading-title,
.elementor-element-4b4e7e75 .elementor-heading-title,
.elementor-element-615d4538 .elementor-heading-title,
.elementor-element-72b1563 .elementor-heading-title,
.elementor-element-68bc12d5 .elementor-heading-title,
.elementor-element-36ac05c .elementor-heading-title,
.elementor-element-44f94677 .elementor-heading-title {
	font-weight: 700 !important;
	line-height: 1.3;
}

/* Their values, plain. The sizes these two were built with are kept —
   only the weight was wrong. */
.elementor-element-6f19e7ee,
.elementor-element-14a2584e,
.elementor-element-36243c4a,
.elementor-element-13602281,
.elementor-element-44b45a39,
.elementor-element-5b3ffaea,
.elementor-element-514f433b,
.elementor-element-6f19e7ee p,
.elementor-element-14a2584e p,
.elementor-element-36243c4a p,
.elementor-element-13602281 p,
.elementor-element-44b45a39 p,
.elementor-element-5b3ffaea p,
.elementor-element-514f433b p {
	font-weight: 400 !important;
}

/* The values hold whole sentences, so they wrap and stop after three
   lines. Three lines of 14px is the height the cards are sized to. */
.elementor-element-7ff077b5,
.elementor-element-4535d10,
.elementor-element-d8f3b2e,
.elementor-element-5d682140,
.elementor-element-4bfaf83a,
.elementor-element-1c919572,
.elementor-element-7ff077b5 p,
.elementor-element-4535d10 p,
.elementor-element-d8f3b2e p,
.elementor-element-5d682140 p,
.elementor-element-4bfaf83a p,
.elementor-element-1c919572 p {
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	white-space: normal !important;
	margin: 0;
}

.elementor-element-7ff077b5,
.elementor-element-4535d10,
.elementor-element-d8f3b2e,
.elementor-element-5d682140,
.elementor-element-4bfaf83a,
.elementor-element-1c919572 {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: clip;
}

/* The three labels have to sit on one line together, with the three
   values starting together underneath, however long each label runs.
   A flex row cannot do that, because each column sizes on its own.
   Laying the row out as a grid and letting the columns dissolve puts
   every label in the first band and every value in the second, so
   both bands share a height. Column flow fills one column per pair,
   so a card with two of them gets two columns and no gap where a
   third would have been. */
@media ( min-width: 768px ) {

	.elementor-element-40d7355b,
	.elementor-element-7329c51 {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax( 0, 1fr );
		grid-template-rows: auto auto;
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
	}

	.elementor-element-40d7355b > .e-con,
	.elementor-element-7329c51 > .e-con {
		display: contents !important;
	}

	/* Elementor centres each widget in its own box, which would float a
	   one-line value in the middle of a three-line band. They sit at the
	   top of their band instead, so every value starts on one line. */
	.elementor-element-40d7355b > .e-con > .elementor-widget,
	.elementor-element-7329c51 > .e-con > .elementor-widget {
		align-self: start !important;
	}
}

/* ----------------------------------------------------------------------
   Header logo on a small screen.

   Elementor writes the wordmark's width on the image itself, so the
   picture kept its full size and ran under the burger even though its
   box had already been narrowed. The image is tied to its box here,
   and the language control gives back a few pixels on the narrowest
   phones so the row has room.
   ---------------------------------------------------------------------- */

@media ( max-width: 430px ) {

	.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle,
	.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
		padding: 11px 12px !important;
	}

	.wpml-ls-legacy-dropdown > ul > li > a.wpml-ls-item-toggle {
		min-width: 88px;
	}
}

/* ----------------------------------------------------------------------
   About — the two lines the client asked for.

   "Since" sits smaller than the year beside it, in both languages, and
   "Model the Way" carries a short yellow bar above it so it reads as
   the slogan it is rather than as another heading.
   ---------------------------------------------------------------------- */
.elementor-heading-title .mm-since {
	font-size: 0.42em;
	font-weight: 400;
	letter-spacing: 0.02em;
	vertical-align: baseline;
}

.elementor-element-4c7dfcb6 .elementor-heading-title {
	position: relative;
	padding-top: 28px;
}

.elementor-element-4c7dfcb6 .elementor-heading-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 6px;
	background: #FAD75F;
}

/* ======================================================================
   Cookie notice
   ======================================================================
   A bar across the bottom, in the site's own navy, with the same square
   buttons the rest of the site uses. The theme styles every button on the
   page, and its rule is stronger than a single class, so the colours here
   have to be stated outright.

   The site's own buttons go navy to yellow on hover. The bar is already
   navy and the accept button is already yellow, so both buttons invert to
   white on hover instead — the same idea, one step further along.
   ====================================================================== */
.mm-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 20px 24px;
	padding-bottom: calc( 20px + env( safe-area-inset-bottom ) );
	background: #0F2873;
	color: #FFFFFF;
	font-family: "Sora", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	box-shadow: 0 -8px 24px rgba( 15, 40, 115, 0.18 );
}

.mm-cookie.is-gone {
	display: none;
}

.mm-cookie__text {
	margin: 0;
	max-width: 76ch;
	color: #FFFFFF;
}

.mm-cookie .mm-cookie__more {
	color: #FAD75F;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.mm-cookie .mm-cookie__more:hover,
.mm-cookie .mm-cookie__more:focus {
	color: #FFFFFF;
	text-decoration: none;
}

.mm-cookie__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.mm-cookie .mm-cookie__btn,
.mm-cookie button.mm-cookie__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 14px 28px;
	font-family: "Sora", sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.18px;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Accept — the site's accent colour, which is also what its own buttons
   turn into when you point at them. */
.mm-cookie .mm-cookie__btn--yes,
.mm-cookie button.mm-cookie__btn--yes {
	background-color: #FAD75F !important;
	border-color: #FAD75F !important;
	color: #0F2873 !important;
}

.mm-cookie .mm-cookie__btn--yes:hover,
.mm-cookie .mm-cookie__btn--yes:focus-visible,
.mm-cookie button.mm-cookie__btn--yes:hover,
.mm-cookie button.mm-cookie__btn--yes:focus-visible {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: #0F2873 !important;
}

/* Decline — an outline on the navy, so it reads as the quieter of the two
   without being hidden. */
.mm-cookie .mm-cookie__btn--no,
.mm-cookie button.mm-cookie__btn--no {
	background-color: transparent !important;
	border-color: rgba( 255, 255, 255, 0.55 ) !important;
	color: #FFFFFF !important;
}

.mm-cookie .mm-cookie__btn--no:hover,
.mm-cookie .mm-cookie__btn--no:focus-visible,
.mm-cookie button.mm-cookie__btn--no:hover,
.mm-cookie button.mm-cookie__btn--no:focus-visible {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: #0F2873 !important;
}

.mm-cookie .mm-cookie__btn:focus-visible {
	outline: 2px solid #FAD75F;
	outline-offset: 3px;
}

/* On a phone the bar stacks and the buttons share the width, so both are
   easy to hit with a thumb. */
@media ( max-width: 767px ) {

	.mm-cookie {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 20px;
		padding-bottom: calc( 18px + env( safe-area-inset-bottom ) );
		font-size: 14px;
	}

	.mm-cookie__actions {
		gap: 10px;
	}

	.mm-cookie .mm-cookie__btn,
	.mm-cookie button.mm-cookie__btn {
		flex: 1 1 0;
		padding: 15px 16px;
		text-align: center;
	}
}

/* ======================================================================
   Round of fixes, 14 October
   ====================================================================== */

/* ----------------------------------------------------------------------
   Partner cards ran off the side of the Armenian page.

   Elementor leaves the loop grid's columns to size themselves above the
   tablet width, so each column grew to fit the longest name in it. The
   English names are short enough to look even by luck; the Armenian ones
   are not, and the last column ended 200px past the edge of the page.
   The columns are given equal shares here, and the cards are allowed to
   shrink so a long name wraps instead of pushing its column wider.
   ---------------------------------------------------------------------- */
.elementor-element-7dac61bd .elementor-loop-container {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
}

@media ( max-width: 1024px ) {
	.elementor-element-7dac61bd .elementor-loop-container {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 600px ) {
	.elementor-element-7dac61bd .elementor-loop-container {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}
}

.elementor-element-7dac61bd .e-loop-item {
	min-width: 0;
}

.elementor-element-7dac61bd .e-loop-item * {
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------
   "All 150+ projects" on the Armenian home and services pages came out in
   the theme's pink, because the link was added without a colour of its own
   and the theme colours every link it is not told about. It matches the
   English one now.
   ---------------------------------------------------------------------- */
.elementor-element-6d65b678 a,
.elementor-element-6e35f5e6 a {
	color: #0F2873 !important;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.elementor-element-6d65b678 a:hover,
.elementor-element-6e35f5e6 a:hover,
.elementor-element-6d65b678 a:focus,
.elementor-element-6e35f5e6 a:focus {
	color: #0F2873 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ----------------------------------------------------------------------
   Our Impact card on a phone.

   The white half was set wider at the sides than the navy half above it,
   so the year and the method started further in than the project title
   and the card read as two pieces. Both halves use the same inset now.
   ---------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	.elementor-element-5ddfedae .elementor-element-3a6ddd04 {
		padding: 24px !important;
	}
}

/* ----------------------------------------------------------------------
   "research collective" — the first letter of each word is set larger,
   while the words stay in lower case as the client asked.
   ---------------------------------------------------------------------- */
.elementor-heading-title .mm-cap {
	font-size: 1.38em;
	line-height: 1;
	vertical-align: baseline;
}

/* ----------------------------------------------------------------------
   Footer bottom line. On a phone the privacy link sits on its own line
   rather than running on after the copyright.
   ---------------------------------------------------------------------- */
@media ( max-width: 767px ) {

	.elementor-element-1e5a74cb a {
		display: block;
		margin-top: 8px;
	}
}


/* ---- "Back to the homepage" on the 404 panel ----
   That panel is yellow. The button is a navy outline on it, and the usual
   yellow hover made the whole button disappear into the background — only
   the words were left. On this one button the hover fills with navy
   instead, so it is still a button while the pointer is on it. The id is
   the same in both languages. */

.elementor-element-679d2432 .elementor-button:hover,
.elementor-element-679d2432 .elementor-button:focus {
	background-color: #0F2873 !important;
	border-color: #0F2873 !important;
	color: #FAD75F !important;
}


/* ---- Privacy policy, the body of the document ----
   The policy arrives from the client as one finished document and is
   dropped into a single block, so the headings and paragraphs inside it
   are plain HTML rather than separate Elementor widgets. These rules give
   that block the site's own type. The block carries the same id in both
   languages. */

.elementor-element-a0c6217 {
	color: #000;
}

.elementor-element-a0c6217 h2 {
	margin: 56px 0 14px;
	font-family: "Arvo", serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: #000;
}

.elementor-element-a0c6217 h2:first-child {
	margin-top: 0;
}

.elementor-element-a0c6217 h3 {
	margin: 32px 0 10px;
	font-family: "Sora", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: #000;
}

.elementor-element-a0c6217 p {
	margin: 0 0 18px;
	font-family: "Sora", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 32px;
	color: #000;
}

.elementor-element-a0c6217 a {
	color: #0F2873;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-element-a0c6217 a:hover {
	color: #0F2873;
	background: #FAD75F;
}

.elementor-element-a0c6217 code {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.86em;
	padding: 1px 5px;
	border-radius: 3px;
	background: #F3F4F6;
	color: #0F2873;
}

@media (max-width: 767px) {

	.elementor-element-a0c6217 h2 {
		margin-top: 40px;
		font-size: 24px;
	}

	.elementor-element-a0c6217 h3 {
		font-size: 18px;
	}

	.elementor-element-a0c6217 p {
		font-size: 16px;
		line-height: 28px;
	}
}


/* ---- LARP header, Armenian ----
   The LARP page has its own header with its own five links, and the
   Armenian wording for them is much longer than the English. With the
   wordmark at its full size the row runs out of space between 1280 and
   1440, and the last link drops to a second line. The gaps between the
   links give that space back, so the logo stays the size it was given
   and the menu stays on one row. English is untouched. */

@media ( min-width: 1366px ) and ( max-width: 1439px ) {

	html[lang|="hy"] .elementor-1248 .mm-header-nav .elementor-nav-menu > li > a.elementor-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media ( min-width: 1280px ) and ( max-width: 1365px ) {

	html[lang|="hy"] .elementor-1248 .mm-header-nav .elementor-nav-menu > li > a.elementor-item {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}


/* ---- Services hero ----
   The three blocks sat side by side in one row, and the first of them —
   which holds nothing but the word SERVICES — was taking half the width.
   That left the heading on 379px and the paragraph beside it on 211px,
   pressed against the right edge.

   The design puts the eyebrow on its own line, then the heading with its
   paragraph on the left and the narrower column of text to the right of
   it, with a clear gap between the two. That is what these rules do. On a
   tablet and below the three simply stack, as they already did on a phone. */

@media ( min-width: 1025px ) {

	.elementor-element-350a953 {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
	}

	.elementor-element-350a953 > .elementor-element-5457ae8 {
		width: 100% !important;
		flex: 0 0 100% !important;
	}

	.elementor-element-350a953 > .elementor-element-6edc0f8c {
		width: 54% !important;
		flex: 0 0 54% !important;
	}

	.elementor-element-350a953 > .elementor-element-20b137d4 {
		width: 32% !important;
		flex: 0 0 32% !important;
	}
}

@media ( max-width: 1024px ) {

	.elementor-element-350a953 {
		flex-wrap: wrap !important;
	}

	.elementor-element-350a953 > .elementor-element-5457ae8,
	.elementor-element-350a953 > .elementor-element-6edc0f8c,
	.elementor-element-350a953 > .elementor-element-20b137d4 {
		width: 100% !important;
		flex: 0 0 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   Project cards: hide a field label when the client's document has no value
   for it. Elementor leaves the heading behind and drops only the value widget,
   which left bare "SAMPLE SIZE" and "CLIENT" labels on the cards.
   Same element ids in both languages.
   --------------------------------------------------------------------------- */

.elementor-element-13fbcfc:not( :has( .elementor-element-14a2584e ) ),
.elementor-element-7bdb0fd5:not( :has( .elementor-element-4bfaf83a ) ),
.elementor-element-78a42177:not( :has( .elementor-element-1c919572 ) ),
.elementor-element-1f55eab7:not( :has( .elementor-element-5d682140 ) ) {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   LARP page, client comments of 2026-11-02.
   The hero keeps the eyebrow line and the big heading. The tagline and the
   paragraph under it come out, and the header carries its own LARP lockup.
   Scoped by page id so the other pages are untouched.
   EN page 369, HY page 832.
   --------------------------------------------------------------------------- */

body.page-id-369 .elementor-element-5c58e578,
body.page-id-832 .elementor-element-5c58e578,
body.page-id-369 .elementor-element-506c0fb6,
body.page-id-832 .elementor-element-506c0fb6,
body.page-id-369 .elementor-element-3be8b01d,
body.page-id-832 .elementor-element-3be8b01d {
	display: none !important;
}

body.page-id-369 .mm-header-logo a,
body.page-id-832 .mm-header-logo a {
	display: block;
	width: 300px;
	aspect-ratio: 173 / 32;
	height: auto;
	background: url( ../img/larp-logo.svg ) left center / contain no-repeat;
}

/* Below 600px the site logo widget drops to 200px, and the LARP mark
   follows it, so the two headers are the same size at every width. */

@media ( max-width: 600px ) {

	body.page-id-369 .mm-header-logo a,
	body.page-id-832 .mm-header-logo a {
		width: 200px;
		max-width: 100%;
	}
}

body.page-id-369 .mm-header-logo a img,
body.page-id-832 .mm-header-logo a img {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Home hero, client comment of 2026-11-02: the country name goes yellow, the
   way the example picture shows it. Both languages, the widget id is the same.
   --------------------------------------------------------------------------- */

.elementor-element-24b57f65 .elementor-heading-title {
	color: #FAD75F !important;
}


/* ---------------------------------------------------------------------------
   Partners, client comment of 2026-11-02: every card the same size, the way
   the project cards are. The loop grid sizes its rows to the tallest card,
   so a long partner name no longer makes one row deeper than the others.
   --------------------------------------------------------------------------- */

#mm-partners-loop .elementor-loop-container,
.mediamodel-partners {
	grid-auto-rows: 1fr;
}

/* ---------------------------------------------------------------------------
   Projects page: the two buttons under the intro stood at different heights.
   The outline button carries a 2px border and the solid one carried none, so
   it measured 60px against 64px. The solid button now carries the same border
   in its own colour, which the shared hover rule recolours with it.
   --------------------------------------------------------------------------- */

.elementor-element-fe88972 .elementor-button {
	border: 2px solid #0F2873;
}

/* ---------------------------------------------------------------------------
   Home hero, client comment of 2026-11-02: the text block sits on the left,
   the way the client's sample picture shows it. It was centred.
   The hero holds two containers, the wording and the call to action, and both
   were centring their children. Same element ids in both languages.
   --------------------------------------------------------------------------- */

/* Elementor writes the alignment with a three class selector of its own and
   its stylesheet loads after this one, so these need a fourth class to win. */

.elementor-page .e-con.elementor-element.elementor-element-248493fa > .e-con-inner {
	align-items: flex-start;
}

.elementor-page .e-con.elementor-element.elementor-element-4c83bfb2,
.elementor-page .e-con.elementor-element.elementor-element-6f5eeb0f {
	align-items: flex-start;
}

.elementor-element-248493fa .elementor-heading-title,
.elementor-element-248493fa .elementor-widget-text-editor,
.elementor-element-248493fa .elementor-widget-text-editor p {
	text-align: left;
}

/* The call to action carries text-align:center as an inline style inside the
   editor content, and an inline style can only be beaten with !important. */
.elementor-element-248493fa .elementor-element-4c967866 p {
	text-align: left !important;
}

/* The short rule under the tagline: 72 x 4, the size on the client's sample
   picture. It was 96 x 8. */

.elementor-element-248493fa .elementor-element-72bd65b4 {
	width: 72px;
	min-height: 4px;
	height: 4px;
}

/* The gap under the yellow rule was 64px while the gap above it is 12px. Match
   them, so the call to action sits as close to the rule as the tagline does.
   Four classes, because Elementor's own rule in post-19.css has three and loads
   after this file. */
.elementor-page .e-con.elementor-element.elementor-element-6f5eeb0f {
	margin-top: 12px;
}

/* The thin white vertical line under the call to action. The client asked for
   it to go. */
.elementor-element-248493fa .elementor-element-138d7a89 {
	display: none !important;
}

/* The tagline sits larger than the call to action on the client's sample
   picture. Both were 18px. The tagline goes to 22px, the call to action stays
   where it is. */
.elementor-element-248493fa .elementor-element-1913ab5a,
.elementor-element-248493fa .elementor-element-1913ab5a p {
	font-size: 22px;
}

/* The two gaps around the yellow rule looked uneven because the text boxes are
   taller than the text inside them. Measured from the ink, the gap above was
   28px and the gap below 21px. 19px of margin makes both 28px. */
.elementor-page .e-con.elementor-element.elementor-element-6f5eeb0f {
	margin-top: 19px;
}

/* The Armenian heading "Մենք ճանաչում ենք" needs 951px at 96px Arvo and the
   text column was 60% of 1321px, so it broke onto two lines. 78% gives 1030px
   and it fits on one. Desktop only, so the tablet and phone widths Elementor
   sets are left alone. */
@media ( min-width: 1025px ) {
	.elementor-page .e-con.elementor-element.elementor-element-4c83bfb2 {
		--width: 78%;
	}
}


/* ======================================================================
   Client comments of 2026-11-05
   ====================================================================== */

/* LARP, the four numbers on one line -----------------------------------
   The fourth number sat on a row of its own underneath. The band is one
   grid now: the rotated label, then four equal columns. The two row
   containers hand their children straight to the grid, so nothing has to
   move in Elementor. Desktop only; the phone keeps the stacked layout. */

@media ( min-width: 1025px ) {

	#mm-larp-numbers > .e-con-inner {
		display: grid;
		grid-template-columns: 200px repeat( 4, 1fr );
		gap: 24px;
		align-items: start;
	}

	#mm-larp-numbers > .e-con-inner > .elementor-element-62a47b6e {
		grid-column: 1 / -1;
	}

	#mm-larp-numbers > .e-con-inner > .elementor-element-6d909efe,
	#mm-larp-numbers > .e-con-inner > .elementor-element-43fa0b45 {
		display: contents;
	}

	/* The spacer that used to push the fourth number out to the right. */
	#mm-larp-numbers .elementor-element-532ee170 {
		display: none;
	}

	#mm-larp-numbers .elementor-element-5de4532,
	#mm-larp-numbers .elementor-element-4fead28f,
	#mm-larp-numbers .elementor-element-69f58155,
	#mm-larp-numbers .elementor-element-5010fb1a {
		width: auto !important;
	}
}

/* The two rotated words of the side label start on the same line. */

#mm-larp-numbers .elementor-element-46aad2b4,
#mm-larp-numbers .elementor-element-78266330 {
	justify-content: flex-start;
	align-self: start;
}

/* LARP, the criteria title ---------------------------------------------
   The title was printed across the photo. It is the section's own eyebrow
   now, the same shape as every other eyebrow on the page: yellow bar,
   small uppercase Sora. The el_move job puts the heading at the top of
   the section; this is only how it reads. Four classes, because
   Elementor's own rule in the page stylesheet has three and loads after
   this file. */



/* LARP, the hero button comes off. */

body.page-id-369 .elementor-element-2078044e,
body.page-id-832 .elementor-element-2078044e {
	display: none !important;
}

/* Home, Who we are: the two paragraphs sit as close to each other as the
   lines inside them. The gap was 48px against 14px. */

.elementor-page .e-con.elementor-element.elementor-element-4da08588 {
	gap: 16px;
}

/* Project list cards ---------------------------------------------------
   Sample size comes off the small cards and the client name takes two
   thirds of the row, out to the end. */

.elementor-element-431122b8 {
	display: none !important;
}

.elementor-element-13fbcfc {
	--width: 66%;
	width: 66% !important;
}

/* About, Mission and Vision start on the same line instead of each
   sitting in the middle of its own block. */

.elementor-page .e-con.elementor-element.elementor-element-433e004a,
.elementor-page .e-con.elementor-element.elementor-element-44de348d {
	justify-content: flex-start;
}

/* A project name that sits on a photo takes its colour from the project
   itself. The editor's Card title colour field writes one line per
   project that is not on the default yellow. */

.e-loop-item .elementor-element.elementor-element-2dbc1af3 .elementor-heading-title,
.e-loop-item .elementor-element.elementor-element-2dbc1af3 .elementor-heading-title a,
.e-loop-item .elementor-element.elementor-element-798be23a .elementor-heading-title,
.e-loop-item .elementor-element.elementor-element-798be23a .elementor-heading-title a {
	color: var( --mm-title, #FAD75F ) !important;
}


/* ======================================================================
   Client comments of 2026-11-06
   ====================================================================== */

/* Project card names: the whole name, on the card -----------------------
   Every card that carries its name on the photo is cut to three lines
   further up this file, which is right on a phone where the card is only
   302px wide. On a desktop the client wants to read the whole name, so
   the names are set small enough to finish inside the photo and the cut
   is lifted. One rule per card shape, no page by page override: the
   Projects page and the LARP page share a shape and so share a size. */

@media ( min-width: 1025px ) {

	/* The big card: home page and Services. */
	.elementor-457 .e-con.e-parent > .e-con:first-child .elementor-heading-title {
		display: block;
		overflow: visible;
		font-size: 40px !important;
		line-height: 46px !important;
	}

	/* The small card: Projects page featured work and the LARP page. */
	.elementor-472 .e-con.e-parent > .e-con:first-child .elementor-heading-title,
	.elementor-1130 .e-con.e-parent > .e-con:first-child .elementor-heading-title {
		display: block;
		overflow: visible;
		font-size: 19px !important;
		line-height: 26px !important;
	}
}

/* The Standards title sits in the text column, beside the yellow line that
   was already there, not over the photo and not under the line. The line
   is an empty container with a left border, the same device every other
   eyebrow on this page uses, so the heading moves inside it and the
   container takes the eyebrow's padding. */

.elementor-page .e-con.elementor-element.elementor-element-32489b08 {
	height: auto;
	min-height: 0;
	padding: 24px 0 24px 40px;
	justify-content: center;
}

.elementor-page .elementor-widget.elementor-element.elementor-element-635cb749 {
	width: 100%;
}


.elementor-page .elementor-widget.elementor-element.elementor-element-635cb749 .elementor-heading-title {
	font-family: "Sora", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	text-transform: uppercase;
	color: #0F2873 !important;
}