/* =========================================================================
   Leonardo – Project page sections
   Tokens taken from Figma: desktop_project page (1600px frame)
   ========================================================================= */

.leo-project {
	--leo-ink: #161c2d;          /* headings / body */
	--leo-muted: #757984;        /* stats */
	--leo-grey: #8c8c8c;         /* button border / text */
	--leo-border: #e3e3e3;
	--leo-bg-soft: #f9f8f5;      /* stats band */
	--leo-black: #231f20;

	--leo-font: 'Assistant', 'Heebo', Arial, sans-serif;
	--leo-font-heebo: 'Heebo', 'Assistant', Arial, sans-serif;
	--leo-font-eyebrow: 'Montserrat', 'Assistant', Arial, sans-serif;

	--leo-gutter: clamp(16px, 3.2vw, 51px);   /* 51px @1600 */
	--leo-max: 1600px;
	--leo-section-gap: clamp(56px, 6.5vw, 104px);

	font-family: var(--leo-font);
	color: var(--leo-ink);
	direction: rtl;
	overflow-x: clip;
}

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

.leo-project img { max-width: 100%; height: auto; display: block; }

.leo-section { margin-inline: auto; }
.leo-section + .leo-section { margin-top: var(--leo-section-gap); }

/* --------------------------------------------------------------- Hero */
.leo-hero {
	max-width: var(--leo-max);
	padding-inline: var(--leo-gutter);
	padding-top: clamp(12px, 1.8vw, 29px);   /* 137px top in Figma minus header */
}
.leo-hero__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1499 / 987;
	overflow: hidden;
	background: var(--leo-bg-soft);
}
.leo-hero--short .leo-hero__frame  { aspect-ratio: 16 / 7; }
.leo-hero--screen .leo-hero__frame { aspect-ratio: auto; height: calc(100svh - 120px); min-height: 480px; }

.leo-hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.leo-hero__logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(160px, 24vw, 363px);   /* 363 @1600 */
}
.leo-hero__logo--start  { inset-inline-start: 4%; }
.leo-hero__logo--end    { inset-inline-end: 4%; }
.leo-hero__logo--center { inset-inline-start: 50%; transform: translate(50%, -50%); }
/* vertical position (default: middle) */
.leo-hero__logo--v-top    { top: 6%;  transform: none; }
.leo-hero__logo--v-bottom { top: auto; bottom: 6%; transform: none; }
.leo-hero__logo--v-top.leo-hero__logo--center,
.leo-hero__logo--v-bottom.leo-hero__logo--center { transform: translateX(50%); }
.leo-hero__logo-img { width: 100%; }
.leo-hero__logo-svg { width: 100%; height: auto; display: block; }
.leo-hero__logo--light { color: #fff; }
.leo-hero__logo--dark  { color: #414141; }
/* inlined SVG: every fill/stroke was rewritten to currentColor */
.leo-hero__logo-svg, .leo-hero__logo-svg * { fill: currentColor; }
.leo-hero__logo-svg [fill="none"] { fill: none; }
/* raster logos: force colour with filters */
.leo-hero__logo--light .leo-hero__logo-img { filter: brightness(0) invert(1); }
.leo-hero__logo--dark  .leo-hero__logo-img { filter: brightness(0) invert(.25); }

@media (max-width: 767px) {
	.leo-hero__frame { aspect-ratio: 4 / 5; }
	.leo-hero__logo  { width: 46%; }
}

/* --------------------------------------------------------------- Intro */
.leo-intro { padding-inline: var(--leo-gutter); }
.leo-intro__inner {
	max-width: 741px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.leo-intro__eyebrow {
	margin: 0;
	font-family: var(--leo-font-eyebrow);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.625px;
	text-transform: uppercase;
	color: var(--leo-ink);
}
.leo-intro__title {
	margin: 0;
	font-family: var(--leo-font);
	font-weight: 300;
	font-size: clamp(36px, 3.75vw, 60px);
	line-height: 1.2;
	color: var(--leo-ink);
}
.leo-intro__text {
	max-width: 611px;
	font-size: 18px;
	line-height: 29px;
	letter-spacing: -0.2px;
	color: var(--leo-ink);
	opacity: .65;
}
.leo-intro__text p { margin: 0 0 1em; }
.leo-intro__text p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.leo-intro__inner { gap: 20px; }
	.leo-intro__eyebrow { font-size: 13px; }
	.leo-intro__text { font-size: 16px; line-height: 26px; }
}

/* --------------------------------------------------------------- Stats */
.leo-stats {
	background: var(--leo-bg-soft);
	padding: clamp(40px, 4.7vw, 75px) var(--leo-gutter);   /* 219px band */
}
.leo-stats__list {
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px clamp(32px, 4.8vw, 77px);
	max-width: 1100px;
	margin-inline: auto;
}
.leo-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	text-align: center;
	color: var(--leo-muted);
	font-weight: 700;
	min-width: 0;
}
.leo-stats__label {
	margin: 0;
	font-size: 13px;
	letter-spacing: 1.625px;
}
.leo-stats__value {
	margin: 0;
	font-size: clamp(26px, 2vw, 32px);
	line-height: 44px;
	letter-spacing: -1.2px;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.leo-stats__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
}

/* --------------------------------------------------------------- Slider (shared) */
.leo-slider {
	--leo-per-view: 2;
	--leo-slide-gap: 48px;
	--leo-arrow-w: 24px;
	position: relative;
	max-width: 1391px;
	margin-inline: auto;
	padding-inline: var(--leo-gutter);
}
.leo-slider__track {
	display: flex;
	gap: var(--leo-slide-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.leo-slider__track::-webkit-scrollbar { display: none; }
.leo-slider__track { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.leo-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.leo-slider__track img { -webkit-user-drag: none; pointer-events: none; }
.leo-slider__track a, .leo-slider__track .leo-card__link { pointer-events: auto; }
.leo-slider__slide {
	flex: 0 0 calc((100% - (var(--leo-per-view) - 1) * var(--leo-slide-gap)) / var(--leo-per-view));
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}
.leo-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--leo-arrow-w);
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--leo-ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
	transition: opacity .2s;
}
.leo-slider__arrow svg { width: 100%; height: 100%; }
/* RTL: "prev" sits at inline-start (right) and points right, "next" at inline-end (left) and points left */
.leo-slider__arrow--prev { inset-inline-start: calc(var(--leo-gutter) * .25); }
.leo-slider__arrow--next { inset-inline-end:   calc(var(--leo-gutter) * .25); }
.leo-slider__arrow--prev .leo-arrow--desktop { transform: scaleX(-1); }
.leo-arrow--mobile { display: none; }
.leo-slider__arrow:focus-visible { outline: 2px solid var(--leo-ink); outline-offset: 4px; }
.leo-slider__arrow[disabled] { opacity: .25; cursor: default; }
.leo-slider--no-nav .leo-slider__arrow { display: none; }

@media (max-width: 767px) {
	.leo-slider { --leo-slide-gap: 16px; }
	.leo-slider__slide { flex-basis: 100%; }
	.leo-slider__arrow { top: auto; bottom: -44px; transform: none; }
	.leo-slider__arrow--prev { inset-inline-start: 50%; margin-inline-start: 12px; }
	.leo-slider__arrow--next { inset-inline-end: 50%;   margin-inline-end: 12px; }
	.leo-slider:has(.leo-slider__arrow:not([disabled])) { padding-bottom: 56px; }
}

/* --------------------------------------------------------------- Gallery */
.leo-gallery__slide { aspect-ratio: 671 / 512; overflow: hidden; }
.leo-gallery__slide a { display: block; height: 100%; }
.leo-gallery__img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- Map */
.leo-map { padding-inline: var(--leo-gutter); }
.leo-map__frame {
	max-width: 1105px;
	margin-inline: auto;
	aspect-ratio: 1105 / 376;
	min-height: 260px;
	background: var(--leo-bg-soft);
	overflow: hidden;
}
.leo-map__canvas { width: 100%; height: 100%; }
.leo-map__links {
	max-width: 1105px;
	margin: 16px auto 0;
	text-align: center;
	font-size: 14px;
	letter-spacing: .5px;
	color: var(--leo-grey);
}
.leo-map__links a { color: var(--leo-ink); text-decoration: none; }
.leo-map__links a:hover { text-decoration: underline; }
.leo-map__links span { margin: 0 10px; }
@media (max-width: 767px) { .leo-map__frame { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------- Related */
.leo-related { padding-inline: var(--leo-gutter); }
.leo-related__title {
	margin: 0 0 32px;
	text-align: center;
	font-family: var(--leo-font);
	font-weight: 700;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 2.5px;
	color: var(--leo-ink);
}
.leo-slider--related {
	--leo-slide-gap: 30px;
	max-width: 1110px;
	padding-inline: 0;
}
.leo-slider--related .leo-slider__arrow--prev { inset-inline-start: calc(-1 * var(--leo-arrow-w) - 40px); }
.leo-slider--related .leo-slider__arrow--next { inset-inline-end:   calc(-1 * var(--leo-arrow-w) - 40px); }
@media (max-width: 1260px) {
	.leo-slider--related .leo-slider__arrow--prev { inset-inline-start: -8px; }
	.leo-slider--related .leo-slider__arrow--next { inset-inline-end: -8px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.leo-slider--related .leo-slider__slide { flex-basis: calc((100% - var(--leo-slide-gap)) / 2); }
}

.leo-card { margin: 0; }
.leo-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 31px;
	text-decoration: none;
	color: inherit;
}
.leo-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 350 / 347;
	overflow: hidden;
	background: var(--leo-bg-soft);
}
.leo-card__img { width: 100%; height: 100%; object-fit: cover; }
.leo-card__title {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.625px;
	color: var(--leo-ink);
	opacity: .5;
	transition: opacity .2s;
}
.leo-card__link:hover .leo-card__title,
.leo-card__link:focus-visible .leo-card__title { opacity: 1; }
.leo-card__link:focus-visible { outline: 2px solid var(--leo-ink); outline-offset: 4px; }

.leo-related__cta { text-align: center; margin-top: clamp(48px, 5.8vw, 93px); }

/* --------------------------------------------------------------- Button */
.leo-btn {
	display: inline-block;
	padding: 21px 40px;
	font-family: var(--leo-font-heebo);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 2.4px;
	line-height: 1.5;
	text-decoration: none;
	text-align: center;
	transition: background-color .2s, color .2s;
}
.leo-btn--outline {
	border: 1px solid var(--leo-grey);
	color: var(--leo-grey);
	background: transparent;
}
.leo-btn--outline:hover,
.leo-btn--outline:focus-visible { background: var(--leo-grey); color: #fff; outline: none; }

/* --------------------------------------------------------------- Misc */
.leo-form-wrap { margin-top: var(--leo-section-gap); }

@media (prefers-reduced-motion: reduce) {
	.leo-slider__track { scroll-behavior: auto; }
	.leo-project * { transition: none !important; }
}

/* =========================================================================
   v2 additions: text+image, accordion, ARCHIVE
   ========================================================================= */

/* --------------------------------------------------------------- Text + image */
.leo-text-image { padding-inline: var(--leo-gutter); }
.leo-text-image__inner {
	max-width: 1391px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.leo-text-image--img-end .leo-text-image__media { order: 2; }
.leo-text-image__media { aspect-ratio: 671 / 512; overflow: hidden; }
.leo-text-image__media img { width: 100%; height: 100%; object-fit: cover; }
.leo-text-image__title { margin: 0 0 20px; font-weight: 300; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.2; }
.leo-text-image__text { font-size: 18px; line-height: 29px; opacity: .75; max-width: 560px; }
@media (max-width: 767px) {
	.leo-text-image__inner { grid-template-columns: 1fr; gap: 24px; }
	.leo-text-image--img-end .leo-text-image__media { order: 0; }
}

/* --------------------------------------------------------------- Accordion */
.leo-accordion { padding-inline: var(--leo-gutter); }
.leo-accordion__inner { max-width: 900px; margin-inline: auto; }
.leo-accordion__title { margin: 0 0 24px; text-align: center; font-weight: 700; font-size: 24px; letter-spacing: 2.5px; }
.leo-accordion__item { border-top: 1px solid var(--leo-border); }
.leo-accordion__item:last-child { border-bottom: 1px solid var(--leo-border); }
.leo-accordion__heading {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 20px 0; font-weight: 600; font-size: 18px; letter-spacing: .5px;
}
.leo-accordion__heading::-webkit-details-marker { display: none; }
.leo-accordion__icon { position: relative; width: 14px; height: 14px; flex: none; }
.leo-accordion__icon::before, .leo-accordion__icon::after {
	content: ''; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.leo-accordion__icon::before { width: 14px; height: 1px; }
.leo-accordion__icon::after  { width: 1px; height: 14px; transition: transform .2s; }
.leo-accordion__item[open] .leo-accordion__icon::after { transform: rotate(90deg); }
.leo-accordion__content { padding: 0 0 24px; font-size: 17px; line-height: 1.7; opacity: .8; }

/* --------------------------------------------------------------- Archive */
.leo-archive {
	--leo-ink: #161c2d; --leo-grey: #8c8c8c; --leo-border: #e3e3e3; --leo-bg-soft: #f9f8f5;
	--leo-font: 'Assistant', 'Heebo', Arial, sans-serif;
	--leo-font-heebo: 'Heebo', 'Assistant', Arial, sans-serif;
	--leo-font-serif: 'DM Serif Display', 'Times New Roman', serif;
	--leo-gutter: clamp(16px, 3.2vw, 51px);
	font-family: var(--leo-font); color: var(--leo-ink); direction: rtl;
	padding-inline: var(--leo-gutter);
	overflow-x: clip;
}
.leo-archive *, .leo-archive *::before, .leo-archive *::after { box-sizing: border-box; }
.leo-archive img { max-width: 100%; height: auto; display: block; }

.leo-archive__head {
	position: relative;
	max-width: 1300px;
	margin: clamp(24px, 3vw, 48px) auto 0;
	text-align: left;
	direction: ltr;
}
.leo-archive__title {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 100%;
	max-width: 100%;              /* fills the 1300px container; LEO_TITLE_FIT decides how words are fitted */
	line-height: 0;
}
.leo-archive__svg { display: block; width: 100%; height: auto; overflow: visible; }
.leo-archive__svg text {
	font-family: var(--leo-font-serif);
	font-size: 170px;
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.leo-archive__fill {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* motion presets – pick with LEO_TITLE_MOTION (pan | kenburns | drift | float | none) */
[data-motion="pan"]      .leo-archive__fill { animation: leo-fill-pan 12s ease-in-out infinite alternate; }
[data-motion="kenburns"] .leo-archive__fill { animation: leo-fill-kenburns 14s ease-in-out infinite alternate; }
[data-motion="drift"]    .leo-archive__fill { animation: leo-fill-drift 26s linear infinite; }
[data-motion="float"]    .leo-archive__fill { animation: leo-fill-float 7s ease-in-out infinite alternate; }
@keyframes leo-fill-pan      { from { transform: translateX(-200px); }                to { transform: translateX(200px); } }
@keyframes leo-fill-kenburns { from { transform: scale(1) translate(-110px, 40px); }  to { transform: scale(1.25) translate(120px, -50px); } }
@keyframes leo-fill-float    { from { transform: translateY(-70px) scale(1.08); }     to { transform: translateY(70px) scale(1.08); } }
/* drift: continuous figure-8 – never stops, never reverses visibly */
@keyframes leo-fill-drift {
	0%   { transform: scale(1.12) translate(-140px, -40px); }
	25%  { transform: scale(1.18) translate(   0px,  50px); }
	50%  { transform: scale(1.12) translate( 140px, -40px); }
	75%  { transform: scale(1.06) translate(   0px,  40px); }
	100% { transform: scale(1.12) translate(-140px, -40px); }
}
@media (prefers-reduced-motion: reduce) { .leo-archive__fill { animation: none !important; } }

.leo-archive__script {
	position: absolute;
	z-index: 0;                          /* behind the letters */
	left: 50%; top: 50%;
	width: clamp(160px, 34vw, 560px);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.leo-archive__script img { width: 100%; height: auto; display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.leo-archive__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 5vw, 80px);
	margin: clamp(28px, 3.5vw, 56px) auto 0;
	max-width: 1000px;
}
.leo-archive__tab {
	/* Figma "A5 20 reg" */
	font-family: var(--leo-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: 2.8px;
	font-feature-settings: 'liga' off, 'clig' off;
	color: #999;
	text-align: center;
	text-decoration: none;
	padding: 4px 0;
	transition: color .2s ease;
}
/* Figma "A5 20 bold" */
.leo-archive__tab:hover,
.leo-archive__tab:focus-visible,
.leo-archive__tab.is-active {
	font-weight: 800;
	color: #999;
	outline: none;
}
/* bold is wider than regular → reserve the bold width so neighbours don't shift on hover */
.leo-archive__tab { display: inline-grid; }
.leo-archive__tab::after {
	content: attr(data-label);
	grid-area: 1 / 1;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 800;
}

.leo-grid {
	display: grid;
	gap: 30px;
	max-width: 1300px;
	margin: clamp(32px, 4vw, 64px) auto 0;
}
.leo-grid--4 { grid-template-columns: repeat(4, 1fr); }
.leo-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1260px; }
.leo-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.leo-grid--featured { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.leo-grid .leo-card__media { aspect-ratio: 1 / 1; }
.leo-grid--featured .leo-card:first-child { grid-column: 1 / -1; }
.leo-grid--featured .leo-card:first-child .leo-card__media { aspect-ratio: 1300 / 570; }
.leo-grid--2 .leo-card__media, .leo-grid--featured .leo-card__media { aspect-ratio: 635 / 560; }

.leo-archive__cta { text-align: center; margin: clamp(48px, 6vw, 120px) 0 clamp(48px, 6vw, 100px); }
.leo-archive__empty { text-align: center; color: var(--leo-grey); margin: 64px 0; }

@media (max-width: 1023px) {
	.leo-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.leo-grid, .leo-grid--4, .leo-grid--3, .leo-grid--2, .leo-grid--featured { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.leo-grid--featured .leo-card:first-child .leo-card__media { aspect-ratio: 4 / 3; }

	/* heading: full bleed so the fitted SVG gets the whole screen width */
	.leo-archive__head { margin-inline: calc(-1 * var(--leo-gutter)); }
	.leo-archive__title { padding-inline: 8px; max-width: none; }

	/* tabs: one row, horizontal scroll, no wrap */
	.leo-archive__tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 40px;
        margin-inline: calc(-1 * var(--leo-gutter));
        padding: 4px var(--leo-gutter) 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-width: none;
	}
	.leo-archive__tabs::-webkit-scrollbar { display: none; }
	.leo-archive__tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; font-size: 16px; line-height: 26px; letter-spacing: 2.2px; }
}

/* --------------------------------------------------------------- Archive filter (JS) – staggered scale out / in */
.leo-grid__item {
	min-width: 0;
	transform-origin: 50% 50%;
	transition: transform .26s cubic-bezier(.22, .61, .36, 1), opacity .26s ease;
	will-change: transform, opacity;
}
.leo-grid__item.is-out,
.leo-grid__item.is-in { transform: scale(.35); opacity: 0; }
.leo-grid__item.is-hidden, .leo-grid__item[hidden] { display: none; }
.leo-archive__empty[hidden] { display: none; }
.leo-archive__tab { cursor: pointer; }

/* heading cross-fade (word + photo swap happens while it is invisible) */
.leo-archive__svg { transition: opacity .26s ease, transform .26s cubic-bezier(.22, .61, .36, 1); }
.leo-archive__title.is-out .leo-archive__svg { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
	.leo-grid__item, .leo-archive__svg { transition: none; }
}

/* --------------------------------------------------------------- Slider arrows: neutralise Elementor kit / theme button styles */
.leo-project .leo-slider__arrow,
.leo-archive .leo-slider__arrow,
.leo-project .leo-slider__arrow:hover,
.leo-project .leo-slider__arrow:focus,
.leo-project .leo-slider__arrow:active,
.leo-archive .leo-slider__arrow:hover,
.leo-archive .leo-slider__arrow:focus,
.leo-archive .leo-slider__arrow:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	color: var(--leo-ink) !important;
	fill: currentColor;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	transform: translateY(-50%);
	transition: opacity .2s, color .2s;
}
.leo-project .leo-slider__arrow:hover,
.leo-archive .leo-slider__arrow:hover { color: var(--leo-grey) !important; }
.leo-project .leo-slider__arrow:focus-visible,
.leo-archive .leo-slider__arrow:focus-visible { outline: 2px solid var(--leo-ink) !important; outline-offset: 4px; }
.leo-project .leo-slider__arrow[disabled],
.leo-archive .leo-slider__arrow[disabled] { opacity: .25 !important; color: var(--leo-ink) !important; }
.leo-slider__arrow .leo-arrow--desktop { width: 24px; height: 24px; display: block; }
@media (max-width: 767px) {
	.leo-project .leo-slider__arrow, .leo-archive .leo-slider__arrow { transform: none; }
}

/* =========================================================================
   Card overlay: status + title on a scrim (Figma 242:2027 / 242:2028)
   Two scrim layers so the hover change can FADE (gradients themselves can't animate).
   ========================================================================= */
.leo-card--overlay .leo-card__media { position: relative; isolation: isolate; }
.leo-card--overlay .leo-card__media::before,
.leo-card--overlay .leo-card__media::after {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	transition: opacity .55s cubic-bezier(.22, .61, .36, 1);
}
/* base: soft, ink-tinted, only the bottom third */
.leo-card--overlay .leo-card__media::after {
	background: linear-gradient(to top, rgba(22,28,45,.58) 0%, rgba(22,28,45,.22) 30%, rgba(22,28,45,0) 55%);
	opacity: 1;
}
/* hover: slightly deeper + taller, fades in over the base */
.leo-card--overlay .leo-card__media::before {
	background: linear-gradient(to top, rgba(22,28,45,.72) 0%, rgba(22,28,45,.30) 40%, rgba(22,28,45,0) 72%);
	opacity: 0;
	z-index: 1;
}
.leo-card--overlay .leo-card__link:hover .leo-card__media::before,
.leo-card--overlay .leo-card__link:focus-visible .leo-card__media::before { opacity: 1; }

.leo-card__info {
	position: absolute;
	inset-inline-start: 24px;
	inset-inline-end: 24px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0,0,0,.35);
	pointer-events: none;
	transform: translateY(6px);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.leo-card__status {
	font-family: var(--leo-font, 'Assistant', sans-serif);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 2px;
	opacity: .78;
	transform: translateY(4px);
	transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1), letter-spacing .55s ease;
}
.leo-card__name {
	font-family: var(--leo-font, 'Assistant', sans-serif);
	font-weight: 700;
	font-size: 21px;
	line-height: 32px;
	letter-spacing: .5px;
}
.leo-card--overlay .leo-card__link:hover .leo-card__info,
.leo-card--overlay .leo-card__link:focus-visible .leo-card__info { transform: translateY(0); }
.leo-card--overlay .leo-card__link:hover .leo-card__status,
.leo-card--overlay .leo-card__link:focus-visible .leo-card__status { opacity: 1; transform: translateY(0); letter-spacing: 2.6px; transition-delay: .05s; }

/* image: slow zoom on hover (archive grid + mosaic) */
.leo-card--overlay .leo-card__img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.leo-card--overlay .leo-card__link:hover .leo-card__img { transform: scale(1.05); }
.leo-card--static .leo-card__link:hover .leo-card__img { transform: none; }

@media (max-width: 767px) {
	.leo-card__info { inset-inline: 14px; bottom: 12px; gap: 2px; transform: none; }
	.leo-card__status { font-size: 11px; letter-spacing: 1.5px; opacity: .9; transform: none; }
	.leo-card__name { font-size: 16px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.leo-card__info, .leo-card__status, .leo-card--overlay .leo-card__img,
	.leo-card--overlay .leo-card__media::before, .leo-card--overlay .leo-card__media::after { transition: none; }
}

/* =========================================================================
   Homepage mosaic  (Figma 240:1280 – 1303px, 4 cols × 313, gap 16.7)
   ========================================================================= */
.leo-mosaic-section {
	--leo-ink: #161c2d; --leo-grey: #8c8c8c;
	--leo-font: 'Assistant', 'Heebo', Arial, sans-serif;
	--leo-font-heebo: 'Heebo', 'Assistant', Arial, sans-serif;
	--leo-font-serif: 'DM Serif Display', 'Times New Roman', serif;
	max-width: 1303px;
	margin-inline: auto;
	font-family: var(--leo-font);
	color: var(--leo-ink);
	direction: rtl;
}
.leo-mosaic-section *, .leo-mosaic-section *::before, .leo-mosaic-section *::after { box-sizing: border-box; }
.leo-mosaic-section img { max-width: 100%; height: auto; display: block; }

.leo-mosaic__head { direction: ltr; text-align: left; }
.leo-mosaic__title {
	margin: 0;
	font-family: var(--leo-font-serif);
	font-weight: 400;
	font-size: clamp(46px, 5.4vw, 86px);        /* 419px wide / 200px tall in Figma */
	line-height: 1.16;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #1d1d1d;
	display: flex;
	flex-direction: column;
}
.leo-mosaic-section .leo-mosaic__head { padding-bottom: clamp(28px, 3.4vw, 55px); }   /* title → 55px → line */
.leo-mosaic-section .leo-mosaic__rule {
	display: block;
	width: 100%;
	height: 0;
	border: 0;
	border-top: 1.5px solid #1d1d1d;
	margin: 0 0 clamp(36px, 4.5vw, 72px);                                                /* line → 72px → grid */
	padding: 0;
	background: none;
}

.leo-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(10px, 1.28vw, 16.7px);              /* 16.7 @1303 – NOT %: a % row-gap resolves against an unknown height and overflows */
}
.leo-mosaic .leo-card { margin: 0; min-width: 0; }
.leo-mosaic .leo-card { position: relative; }
.leo-mosaic .leo-card__link { display: block; }
.leo-mosaic .leo-card__media { display: block; aspect-ratio: 313 / 276; overflow: hidden; height: auto; }
.leo-mosaic .leo-card__img { width: 100%; height: 100%; object-fit: cover; }

/* pattern per 10 items: #1 big (inline-start = right in RTL), #2–5 small, #6 big on the other side, #7–10 small */
.leo-mosaic .leo-card:nth-child(10n + 1),
.leo-mosaic .leo-card:nth-child(10n + 6) { grid-column: span 2; grid-row: span 2; }
.leo-mosaic .leo-card:nth-child(10n + 6) { grid-column: 3 / span 2; }
.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__media,
.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media { aspect-ratio: 643 / 568; }
.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__name,
.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__name { font-size: 26px; line-height: 36px; }

.leo-mosaic__cta { text-align: center; margin-top: clamp(40px, 5vw, 72px); }

@media (max-width: 767px) {
	/* mobile: plain 2-column grid, every tile square, no big tiles */
	.leo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-flow: row; }
	.leo-mosaic .leo-card:nth-child(10n + 1),
	.leo-mosaic .leo-card:nth-child(10n + 6) { grid-column: auto; grid-row: auto; }
	.leo-mosaic .leo-card__media,
	.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__media,
	.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media { aspect-ratio: 1 / 1; }
	.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__name,
	.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__name { font-size: 16px; line-height: 22px; }
}

/* =========================================================================
   MOBILE – project page (Figma 430:3423, 393px frame). Placed last on purpose: overrides everything above.
   Order: hero → stats → title → gallery → map → related (stacked)
   ========================================================================= */
@media (max-width: 767px) {
	.leo-project {
		--leo-section-gap: 40px;
		display: flex;
		flex-direction: column;
	}
	/* hero + stats jump to the top; the DOM order stays hero, intro, stats… */
	.leo-project .leo-hero  { order: -2; }
	.leo-project .leo-stats { order: -1; }
	.leo-project .leo-section { width: 100%; }

	/* hero: full bleed, same 1.52 ratio as desktop, no logo (not in the mobile design) */
	.leo-project .leo-hero { padding: 0 !important; margin-top: 0 !important; }
	.leo-project .leo-hero__frame { aspect-ratio: 393 / 259; }
	.leo-project .leo-hero__logo { display: none; }

	/* stats: one row of four, directly under the hero */
	.leo-project .leo-stats { margin-top: 0 !important;
        padding: 25px 16px 32px; }
	.leo-project .leo-stats__list { display: flex; flex-wrap: nowrap; justify-content: center; gap: 65px; max-width: none; }
	.leo-project .leo-stats__item { gap: 8px; min-width: 0; flex: 0 1 auto; }
	.leo-project .leo-stats__label { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
	.leo-project .leo-stats__value {         font-size: 24px;
        line-height: 24px;
        letter-spacing: -1.2px;
        font-weight: 400; }

	/* title block */
	.leo-project .leo-intro { margin-top: 0 !important; padding: 48px 16px 0; }
	.leo-project .leo-intro__inner { gap: 0; }
	.leo-project .leo-intro__eyebrow { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 16px; }
	.leo-project .leo-intro__title { font-size: 32px; line-height: 39px; margin-bottom: 24px; }
	.leo-project .leo-intro__text { font-size: 16px; line-height: 24px; letter-spacing: 0; }

	/* gallery: one image per view (361×275), arrows at the two edges below */
	.leo-project .leo-gallery { padding-inline: 16px; }
	.leo-project .leo-gallery .leo-slider { padding: 0 0 64px; --leo-slide-gap: 16px; }
	.leo-project .leo-gallery .leo-slider__slide { flex-basis: 100%; aspect-ratio: 361 / 275; }
	.leo-project .leo-gallery .leo-slider__arrow {
		top: auto; bottom: 20px; transform: none;
		width: 24px; height: 20px; margin: 0;
	}
	.leo-project .leo-gallery .leo-slider__arrow--prev { inset-inline-start: 16px; inset-inline-end: auto; }
	.leo-project .leo-gallery .leo-slider__arrow--next { inset-inline-end: 16px; inset-inline-start: auto; }

	/* map: 361×152 */
	.leo-project .leo-map { margin-top: 0 !important; padding-inline: 16px; }
	.leo-project .leo-map__frame { aspect-ratio: 361 / 152; min-height: 0; }

	/* related: stacked list, first 3, no arrows */
	.leo-project .leo-related { padding-inline: 16px; }
	.leo-project .leo-related__title { font-size: 24px; line-height: 34px; letter-spacing: 1.5px; margin-bottom: 32px; }
	.leo-project .leo-related .leo-slider { padding: 0; max-width: none; }
	.leo-project .leo-related .leo-slider__track {
		flex-direction: column;
		gap: 24px;
		overflow: visible;
		scroll-snap-type: none;
		cursor: default;
	}
	.leo-project .leo-related .leo-slider__slide { flex: none; width: 100%; }
	.leo-project .leo-related .leo-slider__slide:nth-child(n + 4) { display: none; }
	.leo-project .leo-related .leo-slider__arrow { display: none !important; }
	.leo-project .leo-related .leo-card__link { gap: 24px; }
	.leo-project .leo-related .leo-card__media { aspect-ratio: 361 / 358; }
	.leo-project .leo-related .leo-card__title { font-size: 13px; letter-spacing: 1.5px; opacity: .7; }
	.leo-project .leo-related__cta { margin-top: 40px; }
	.leo-project .leo-related__cta .leo-btn { padding: 17px 35px; font-size: 15px; letter-spacing: 2px; }

	/* text+image / accordion blocks */
	.leo-project .leo-text-image, .leo-project .leo-accordion { padding-inline: 16px; }
}

/* mobile slider arrows: line + arrowhead, #6F727B (Figma 430:3463 / 430:3468) */
@media (max-width: 767px) {
	.leo-arrow--desktop { display: none !important; }
	.leo-arrow--mobile  { display: block; width: 24px; height: 20px; }
	.leo-project .leo-slider__arrow, .leo-archive .leo-slider__arrow { color: #6F727B !important; }
	.leo-project .leo-slider__arrow[disabled], .leo-archive .leo-slider__arrow[disabled] { color: #6F727B !important; opacity: .3 !important; }
}

/* =========================================================================
   Homepage mosaic – mobile variant "mix"  [leo_projects_mosaic mobile="mix"]  (Figma 430:1534, 393px)
   per 10: small small | WIDE | small small | WIDE | small small | small small
   small = 3:4 portrait (166.5×222), wide = full row 16:9 (345×194), gap 12
   ========================================================================= */
@media (max-width: 767px) {
	.leo-mosaic-section--m-mix .leo-mosaic__title {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: .28em;
		font-size: clamp(30px, 9.2vw, 38px);
		line-height: 40px;
	}
	.leo-mosaic-section--m-mix .leo-mosaic__head { padding-bottom: 8px; }
	.leo-mosaic-section--m-mix .leo-mosaic__rule { border-top-width: 2px; margin-bottom: 32px; }
	.leo-mosaic-section--m-mix .leo-mosaic { gap: 12px; }

	.leo-mosaic-section--m-mix .leo-mosaic .leo-card .leo-card__media { aspect-ratio: 3 / 4; }
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 3),
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 6) { grid-column: 1 / -1; }
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 3) .leo-card__media,
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media { aspect-ratio: 345 / 194; }
	.leo-mosaic-section--m-mix .leo-mosaic__cta { margin-top: 40px; }

	/* image-only tiles */
	.leo-mosaic-section--m-nolabels .leo-card__info,
	.leo-mosaic-section--m-nolabels .leo-card--overlay .leo-card__media::before,
	.leo-mosaic-section--m-nolabels .leo-card--overlay .leo-card__media::after { display: none; }
}

/* =========================================================================
   Card images always cover their frame.
   Works with plain <img class="leo-card__img"> AND with Imagify's rewrite, which moves the class onto
   <picture class="leo-card__img"> and leaves the inner <img> class-less. Beats theme "img{height:auto}".
   ========================================================================= */
.leo-mosaic-section .leo-card__media,
.leo-archive .leo-card__media,
.leo-project .leo-card__media { position: relative; overflow: hidden; }

.leo-mosaic-section .leo-card__media > picture,
.leo-archive .leo-card__media > picture,
.leo-project .leo-card__media > picture {
	position: absolute !important;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}
.leo-mosaic-section .leo-card__media img,
.leo-archive .leo-card__media img,
.leo-project .leo-card__media img {
	position: absolute !important;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

/* Mosaic sizing: rows come from the small tiles' aspect-ratio (in flow).
   Desktop big tiles (2×2) have no height of their own – they fill their grid area absolutely,
   so the grid never reserves less space than the tiles draw. */
@media (min-width: 768px) {
	.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__link,
	.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__link { position: absolute; inset: 0; }
	.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__media,
	.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media { aspect-ratio: auto; height: 100%; }
}

/* =========================================================================
   Mosaic tile height – container-query units (bulletproof inside Elementor flex containers).
   Tile heights are computed from the mosaic's OWN final width (cqw), not from %-padding/aspect-ratio,
   which Elementor's flex measuring pass resolved too small → the widget was shorter than the tiles.
   ========================================================================= */
.leo-mosaic-section { width: 100%; box-sizing: border-box; }
.elementor-widget-shortcode:has(.leo-mosaic-section) { width: 100%; max-width: 100%; }
.leo-mosaic-section .leo-mosaic {
	container-type: inline-size;
	--g: clamp(10px, 1.28vw, 16.7px);             /* same as the grid gap */
	width: 100%;
}
.leo-mosaic-section .leo-mosaic .leo-card__media {
	display: block !important;
	aspect-ratio: auto !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
	/* desktop small tile: 1/4 of the row, 313×276 */
	height: calc((100cqw - 3 * var(--g)) / 4 * 276 / 313) !important;
}
@media (min-width: 768px) {                       /* desktop big 2×2 tiles: exactly 2 small rows + 1 gap */
	.leo-mosaic-section .leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__media,
	.leo-mosaic-section .leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media {
		height: calc(2 * (100cqw - 3 * var(--g)) / 4 * 276 / 313 + var(--g)) !important;
	}
	.leo-mosaic .leo-card:nth-child(10n + 1) .leo-card__link,
	.leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__link { position: static; }
}
@media (max-width: 767px) {
    .leo-project .leo-stats__list { display: flex; flex-wrap: nowrap; justify-content: center; gap: 32px; max-width: none; }
	.leo-mosaic-section--m-squares .leo-mosaic { --g: 10px; }
	.leo-mosaic-section--m-mix .leo-mosaic     { --g: 12px; }
	/* squares: half row, 1:1 */
	.leo-mosaic-section--m-squares .leo-mosaic .leo-card__media { height: calc((100cqw - var(--g)) / 2) !important; }
	/* mix: portrait half row 3:4, wide full row 345×194 */
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card__media { height: calc((100cqw - var(--g)) / 2 * 4 / 3) !important; }
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 3) .leo-card__media,
	.leo-mosaic-section--m-mix .leo-mosaic .leo-card:nth-child(10n + 6) .leo-card__media { height: calc(100cqw * var(--leo-wide-ratio, 2 / 3)) !important; }  /* height/width – Figma was 194/345 */
}