/* ==========================================================================
   Invest Monaco — main stylesheet

   Measured from the original Squarespace site at 1440, 768 and 390 px wide.
   Desktop and tablet (768 px and up) share one proportional layout built on
   the same 24-column grid as Squarespace's Fluid Engine: content is at most
   1200 px wide with 4 % side margins, and --u is one "design pixel" (1 px at
   a 1440 px wide window). Phones (up to 767 px) have their own stacked layout.
   ========================================================================== */

:root {
	--red: #ce1126;
	--ink: #1c1c1c;
	--band: var(--ink); /* same black as the section above, so no seam shows */
	--white: #fff;

	--serif: "Gloock", Georgia, "Times New Roman", serif;
	--sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--label: "Inter", "Helvetica Neue", Arial, sans-serif;

	--wrap: min(1200px, 92vw);
	--side: calc((100vw - var(--wrap)) / 2);
	--u: calc(var(--wrap) / 1200);
	--gap: calc(12 * var(--u));
	/* Vertical section padding keeps its desktop size on tablets, as on the original. */
	--v: 1px;

	/* Type, interpolated between the sizes measured at 1440 and 768 px. */
	--fs-h1: calc(4.644vw + 22.73px);   /* 89.6 → 58.4 */
	--fs-h2: calc(1.615vw + 18.35px);   /* 41.6 → 30.7 */
	--fs-h3: calc(1vw + 14.4px);        /* 28.8 → 22.1 */
	--fs-h4: calc(0.2024vw + 16.29px);  /* 19.2 → 17.8 */
	--fs-body: calc(0.1012vw + 16.14px);/* 17.6 → 16.9 */
	--fs-small: calc(0.0431vw + 13.65px);/* 14.3 → 14.0 */
	--fs-nav: 12.544px;
	--fs-btn: 11.68px;
	--fs-marquee: var(--fs-h4); /* same size as the key points, e.g. "An international financial centre." */

	--lh-h1: 1.1424;
	--lh-h2: 1.31;
	--lh-h4: 1.389;
	--lh-body: 1.4;

	--header-pad: 4vw;
}

@media (max-width: 1100px) {
	:root {
		--fs-btn: 12.4px;
	}
}

/* ---------- Base ---------- */

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

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-main {
	overflow-x: clip;
}

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

a {
	color: inherit;
}

p {
	margin: 0;
}

p + p {
	margin-top: 1em;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 400;
}

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

strong {
	font-weight: 700;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1000;
	padding: 1rem 1.3rem;
	background: var(--red);
	color: var(--white);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */

.container {
	width: var(--wrap);
	margin: 0 auto;
}

/* 24-column grid, as Squarespace's Fluid Engine. */
.grid {
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	column-gap: var(--gap);
	width: var(--wrap);
	margin: 0 auto;
}

.section {
	position: relative;
}

.section--dark {
	background: var(--ink);
	color: var(--white);
}

.section--red {
	background: var(--red);
	color: var(--white);
}

.center {
	text-align: center;
}

/* ---------- Typography ---------- */

.display {
	font-family: var(--serif);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	overflow-wrap: break-word;
}

.display em,
.h2 em {
	font-style: italic;
}

.h2 {
	font-family: var(--serif);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
}

.eyebrow {
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.eyebrow--bold {
	font-weight: 700;
}

.lede {
	font-size: var(--fs-body);
}

/* French and other longer translations wrap instead of overflowing. */
.display,
.h2,
.eyebrow,
.stat__num,
.stat__label {
	text-wrap: balance;
}

/* ---------- Buttons & links ---------- */

.im-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(292 * var(--u));
	min-height: calc(63 * var(--u));
	padding: 1em 20.8px;
	border: 4px solid var(--red);
	background: transparent;
	color: var(--red);
	font-family: var(--label);
	font-size: var(--fs-btn);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.1s linear, color 0.1s linear;
}

.im-btn:hover,
.im-btn:focus-visible {
	background: var(--red);
	color: var(--white);
}

.arrow-link {
	display: inline-block;
	font-family: var(--sans);
	font-size: var(--fs-body);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.arrow-link::before {
	content: "➤\00a0\00a0";
	display: inline-block;
	text-decoration: none;
}

.arrow-link:hover {
	opacity: 0.75;
}

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

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	color: var(--white);
	transition: transform 0.14s ease-in-out, background-color 0.14s ease-in-out 0.14s;
}

/* Dark gradient behind the header, as on the original (#1C1C1C to transparent, 50 %). */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(var(--ink), transparent);
	opacity: 0.5;
	pointer-events: none;
}

.site-header.is-open::before {
	display: none;
}

/* Like the original, the header slides away once the visitor scrolls down. */
.site-header.is-hidden {
	transform: translateY(-100%);
}

/* Pages without a full-screen hero get a solid header. */
body:not(.has-hero) .site-header {
	background: var(--ink);
}

body:not(.has-hero) .site-main {
	padding-top: 119px;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 14px var(--header-pad) 15px;
	min-height: 119px;
}

.site-nav__list {
	display: flex;
	gap: 43px;
}

/* The French labels are longer: narrow the gaps on smaller screens so the
   menu stays on one row beside the logo down to about 1000 px. */
html[lang^="fr"] .site-nav__list {
	gap: clamp(16px, 23vw - 232px, 43px);
}

.site-nav a,
.lang-switch__current {
	font-family: var(--sans);
	font-size: var(--fs-nav);
	font-weight: 400;
	letter-spacing: 0.25em;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
}

.site-nav a {
	display: inline-block;
}

/* Hovering a link fades the other links to 50 %. */
.site-nav a {
	transition: opacity 0.3s ease;
}

.site-nav__list:hover a,
.site-nav__list:focus-within a {
	opacity: 0.5;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	opacity: 1;
}

/* The current page is extra bold: Instrument Sans stops at 700, so a hairline
   outline in the text colour thickens it further. */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	font-weight: 700;
	-webkit-text-stroke: 0.45px currentColor;
}

.site-logo {
	display: block;
	grid-column: 2;
	text-decoration: none;
}

.site-logo img {
	width: auto;
	height: 90px;
}

.site-logo__text {
	font-family: var(--serif);
	font-size: 1.6rem;
}

.site-header__end {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
}

.lang-switch {
	position: relative;
}

.lang-switch__current {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	cursor: pointer;
}

.lang-switch__icon {
	width: 1em;
	height: 1em;
	transition: transform 0.25s;
}

.lang-switch.is-open .lang-switch__icon {
	transform: rotate(180deg);
}

.lang-switch__menu {
	position: absolute;
	top: 100%;
	left: -12.5px;
	padding: 7px 12.5px;
	white-space: nowrap;
}

/* Opens on hover, as on the original, and on click or keyboard. */
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu {
	display: block;
}

.lang-switch:hover .lang-switch__icon {
	transform: rotate(180deg);
}

.lang-switch__menu a {
	display: block;
	font-size: var(--fs-nav);
	line-height: 19px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
}

.lang-switch__menu a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 1px;
	background: currentColor;
	transition: transform 0.3s;
}

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

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

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 127px var(--header-pad) 90px;
	background: var(--red);
	overflow-y: auto;
}

.mobile-menu[hidden],
.mobile-menu [hidden] {
	display: none !important;
}

.mobile-menu__list,
.mobile-menu__langs {
	display: grid;
	gap: 18px;
	text-align: center;
}

.mobile-menu__langs {
	gap: 5px;
}

.mobile-menu a,
.mobile-menu button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--white);
	font-family: var(--sans);
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.mobile-menu__back {
	margin-bottom: 26px;
	opacity: 0.6;
}

.mobile-menu__back::before {
	content: "‹ ";
}

.mobile-menu__lang-toggle {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	white-space: nowrap;
}

.mobile-menu__lang-toggle::after {
	content: " ›";
}

.is-open .site-logo {
	position: relative;
	z-index: 1;
}

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

.site-footer {
	background: var(--red);
	color: var(--white);
}

.site-footer__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wrap);
	min-height: max(102px, calc(128 * var(--u)));
	margin: 0 auto;
	padding: 2rem 0;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: var(--fs-small);
	line-height: 1.4;
	text-transform: uppercase;
}

.footer-menu li + li::before {
	content: "⧫";
	margin: 0 0.4em;
	font-size: 0.75em;
}

.footer-menu a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer-menu a:hover {
	opacity: 0.75;
}

.social-links {
	position: absolute;
	right: 0;
	top: 50%;
	display: flex;
	gap: 13px;
	transform: translateY(-50%);
}

.social-links a {
	display: block;
	width: 20px;
	height: 20px;
	transition: opacity 0.2s;
}

.social-links a:hover {
	opacity: 0.7;
}

.social-links svg {
	width: 100%;
	height: 100%;
}

/* ---------- Background media ---------- */

/* Slight parallax: full-screen backgrounds are 20 % taller than their section
   and drift by up to 10 % of its height while it crosses the screen. */
.bg-media {
	position: absolute;
	inset: 0;
}

.hero__media[data-parallax],
.contact__media[data-parallax],
.bg-media[data-parallax] {
	top: -10%;
	bottom: -10%;
	will-change: transform;
}

/* Where the browser supports it, the drift is a scroll-driven animation that
   runs in step with the scroll (main.js adds .has-native-parallax). 8.333 % of
   the background's height is 10 % of the section's. */
@keyframes im-parallax {
	from { transform: translate3d(0, -8.333%, 0); }
	to { transform: translate3d(0, 8.333%, 0); }
}

@keyframes im-parallax-top {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, 8.333%, 0); }
}

.has-native-parallax :has(> [data-parallax]) {
	view-timeline: --im-parallax block;
}

.has-native-parallax [data-parallax] {
	animation: im-parallax linear both;
	animation-timeline: --im-parallax;
	animation-range: cover 0% cover 100%;
}

/* A hero at the top of the page starts still and drifts as it scrolls away. */
.has-native-parallax [data-parallax].is-top {
	animation-name: im-parallax-top;
	animation-range: contain 100% cover 100%;
}

/* The contact section is much taller than the screen (it holds the form), so
   its background drifts from the first scroll until its lower half is reached. */
.has-native-parallax .contact__media[data-parallax].is-top {
	animation-range: cover 100vh exit 50%;
}

@media (prefers-reduced-motion: reduce) {
	.hero__media[data-parallax],
	.contact__media[data-parallax],
	.bg-media[data-parallax] {
		top: 0;
		bottom: 0;
		transform: none !important;
	}
}

/* Dark layer over full-screen photos and videos, with the opacity set on the
   original: 15 % on heroes and the contact video, 30 % on the "5G" photo. */
.hero::after,
.contact__media::after,
.digital::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ink);
	opacity: 0.15;
	pointer-events: none;
}

.digital::after {
	z-index: 0;
	opacity: 0.3;
}

/* Page videos (About) open on light footage: a darker layer keeps the white title readable. */
.hero--video::after {
	opacity: 0.4;
}

.im-bg-video,
.bg-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ---------- Heroes ---------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Grows only if a long heading (often in French) needs more room. */
	min-height: max(560px, 100svh);
	color: var(--white);
	background: var(--ink) var(--hero-image) center / cover no-repeat;
	overflow: hidden;
	text-align: center;
}

.hero--pos-bottom .bg-cover {
	object-position: 59.6% 95.2%;
}

.hero--pos-top .bg-cover {
	object-position: center top;
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__content {
	position: relative;
	z-index: 2;
	width: var(--wrap);
	/* Centred in the hero, with the same room kept clear above (header) and
	   below (scroll arrow) so long headings never touch either. */
	padding: 110px 0;
}

.hero .eyebrow {
	margin-bottom: calc(28 * var(--u));
}

.hero h1 {
	max-width: calc(998 * var(--u));
	margin: 0 auto;
}

.hero--home h1 {
	max-width: none;
}

.hero__lede {
	max-width: calc(695 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
}

.hero--home .hero__lede {
	margin-top: calc(30 * var(--u));
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: max(48px, calc(64 * var(--v)));
	z-index: 3;
	width: calc(49 * var(--u));
	min-width: 28px;
	color: var(--white);
	transform: translateX(-50%);
}

.hero__scroll svg {
	display: block;
	width: 100%;
	height: auto;
	animation: im-scroll-hint 2.4s ease-in-out infinite;
}

/* A gentle nudge downwards, as a reminder to scroll. */
@keyframes im-scroll-hint {
	0%, 55%, 100% { transform: translateY(0); opacity: 1; }
	25% { transform: translateY(12px); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll svg {
		animation: none;
	}
}

/* ---------- Home: introduction ---------- */

.intro {
	padding: calc(223 * var(--v)) 0 calc(131 * var(--v));
}

.intro .eyebrow {
	margin-bottom: calc(29 * var(--u));
	font-weight: 700;
}

.intro h2 {
	max-width: calc(796 * var(--u));
	margin: 0 auto;
}

.intro__copy {
	position: relative;
	z-index: 2;
	grid-column: 13 / span 9;
	margin-top: calc(98 * var(--u));
}

.intro__copy p + p {
	margin-top: calc(16 * var(--u));
}

.intro__rope {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	height: calc(431 * var(--u));
	margin-top: calc(-78 * var(--u));
	object-fit: cover;
	object-position: 31.6% 47.5%;
}

.intro__mandate {
	position: relative;
	z-index: 2;
	max-width: 600px;
	margin: calc(-63 * var(--u)) auto 0;
	text-align: center;
}

/* Two even lines in both languages wherever the screen allows, whatever
   line break the text was typed with. */
.intro__mandate p {
	text-wrap: balance;
}

.intro__mandate p br {
	display: none;
}

/* Longer text in place of the closing line (Home): a wider box, so the
   paragraphs read as a few long lines. */
.intro__mandate--long {
	width: min(860px, var(--wrap));
	max-width: none;
}

.intro__mandate--long p + p {
	margin-top: 1em;
}

/* Gouvernement Princier logo under the mandate text (Home) and the
   introduction (About). */
.crest {
	width: calc(260 * var(--u));
	min-width: 200px;
	height: auto;
	margin: calc(25 * var(--u)) auto 0;
}

/* ---------- Home: "A country of 2 km²" ---------- */

.country {
	/* Long enough that, on any screen, the title is left alone on the dark
	   background after the last photo (bottom at 2586) before the page moves on. */
	height: max(calc(3086 * var(--u)), calc(2586 * var(--u) + 85vh));
}

.country__sticky {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	pointer-events: none;
}

.country__sticky h2 {
	max-width: calc(897 * var(--u));
	margin: 0 auto;
}

.country__sub {
	margin-top: calc(31 * var(--u));
}

.country__floats {
	position: absolute;
	inset: 0;
}

/* The title is centred over the first photo when the section reaches the top
   of the screen; every photo passes under the title. */
.float {
	position: absolute;
	z-index: 1;
	max-width: none;
	object-fit: cover;
}

/* Positions measured on the original, in design pixels from the content edge. */
.float.f1 { left: calc(50% - 196.5 * var(--u)); top: calc(50vh - 270.5 * var(--u)); width: calc(393 * var(--u)); height: calc(541 * var(--u)); }
/* Landscape photo shown whole (not cropped): the frame follows the photo's own shape. */
.float.f2 { left: max(calc(var(--side) + 705 * var(--u)), calc(50% + 205 * var(--u))); top: calc(905 * var(--u)); width: calc(360 * var(--u)); height: auto; aspect-ratio: 1663 / 983; }
.float.f3 { left: 0; top: calc(1052 * var(--u)); width: calc(var(--side) + 140 * var(--u)); height: calc(504 * var(--u)); }
.float.f4 { right: 0; top: calc(1309 * var(--u)); width: calc(var(--side) + 40 * var(--u)); height: calc(320 * var(--u)); }
.float.f5 { left: calc(var(--side) + 151 * var(--u)); top: calc(1567 * var(--u)); width: calc(292 * var(--u)); height: calc(320 * var(--u)); }
.float.f6 { left: calc(var(--side) + 706 * var(--u)); top: calc(1788 * var(--u)); width: calc(292 * var(--u)); height: calc(394 * var(--u)); }
.float.f7 { left: calc(var(--side) + 303 * var(--u)); top: calc(2266 * var(--u)); width: calc(241 * var(--u)); height: calc(320 * var(--u)); }

/* ---------- Key figures ---------- */

.stats {
	padding: calc(229 * var(--v)) 0 calc(228 * var(--v));
}

.stats .grid {
	row-gap: 2.5rem;
}

.stat__num {
	display: block;
	font-family: var(--serif);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	white-space: nowrap;
}

.stat__label {
	display: block;
	margin-top: calc(8 * var(--u));
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

/* Home: four large white figures with red labels. */
.stats--dark .stat__label {
	color: var(--red);
}

.stats--dark .stat:nth-child(1) { grid-column: 1 / span 6; }
.stats--dark .stat:nth-child(2) { grid-column: 9 / span 4; }
.stats--dark .stat:nth-child(3) { grid-column: 14 / span 5; }
.stats--dark .stat:nth-child(4) { grid-column: 21 / span 4; }

/* Why Monaco: smaller figures (light background, or words on dark). */
.stats--light,
.stats--words {
	padding: calc(255 * var(--v)) 0 calc(248 * var(--v));
}

.stats--light .stat__num,
.stats--words .stat__num {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	white-space: normal;
}

.stats--words .stat__num {
	font-weight: 700;
}

.stats--light .stat__label,
.stats--words .stat__label {
	margin-top: calc(11 * var(--u));
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.stats--light .stat:nth-child(1) { grid-column: 1 / span 5; }
.stats--light .stat:nth-child(2) { grid-column: 8 / span 3; }
.stats--light .stat:nth-child(3) { grid-column: 14 / span 4; }
.stats--light .stat:nth-child(4) { grid-column: 21 / span 4; }

.stats--words .stat:nth-child(1) { grid-column: 1 / span 6; }
.stats--words .stat:nth-child(2) { grid-column: 7 / span 4; }
.stats--words .stat:nth-child(3) { grid-column: 12 / span 6; }
.stats--words .stat:nth-child(4) { grid-column: 19 / span 6; }

/* Why Monaco: two large ink figures, note under the second. */
.stats--people {
	padding: calc(119 * var(--v)) 0 calc(217 * var(--v));
}

.stats--people .stat__num {
	font-weight: 700;
}

.stats--people .stat__label {
	color: var(--red);
}

.stats--people .stat:nth-child(1) { grid-column: 5 / span 7; }
.stats--people .stat:nth-child(2) { grid-column: 13 / span 7; }

.stats__note {
	grid-column: 13 / span 8;
	margin-top: calc(7 * var(--u));
}

/* ---------- Home: signature and "Move. Build. Connect." ---------- */

.ways {
	padding: calc(95 * var(--v)) 0 calc(145 * var(--v));
}

.ways__body {
	grid-column: 13 / span 12;
}

.ways__signature {
	width: calc(210 * var(--u));
	height: auto;
	margin-left: calc(-86 * var(--u));
	margin-bottom: calc(11 * var(--u));
}

/* ---------- Marquees (text moving along a line or a wave) ---------- */

.marquee {
	position: relative;
	height: 34px;
	font-family: var(--serif);
	font-size: var(--fs-marquee);
	pointer-events: none;
}

.marquee__svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.marquee__svg text {
	fill: currentColor;
}

/* ---------- Home: the three paths ---------- */

.paths {
	padding: calc(37 * var(--v)) 0 calc(207 * var(--v));
	background: linear-gradient(var(--band) 0 calc(283 * var(--u)), var(--white) 0);
}

.paths .marquee {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(585 * var(--u));
	z-index: 0;
	color: var(--red);
}

.path {
	position: relative;
	z-index: 1;
}

.path .eyebrow {
	color: var(--red);
	font-weight: 700;
}

.path h3 {
	margin: calc(14 * var(--u)) 0 calc(15 * var(--u));
}

.path__text p:not(.eyebrow) {
	max-width: calc(393 * var(--u));
}

.path__text .arrow-link {
	margin-top: calc(14 * var(--u));
}

.path__img {
	width: 100%;
	max-width: none;
	object-fit: cover;
}

/* 1: large photo right, text below it, small photo at the left edge. */
.path--move .path__img--main {
	grid-column: 13 / span 11;
	height: calc(725 * var(--u));
}

.path--move .path__text {
	grid-column: 13 / span 8;
	margin-top: calc(47 * var(--u));
}

.path--move .path__img--accent {
	position: absolute;
	left: calc(-1 * var(--side));
	top: calc(625 * var(--u));
	width: calc(var(--side) + 342 * var(--u));
	height: calc(504 * var(--u));
}

/* 2: text only, left. */
.path--build {
	margin-top: calc(180 * var(--u));
}

.path--build .path__text {
	grid-column: 4 / span 8;
}

/* Tablets and desktop: path 1's text can run longer than its photos, so path 2 would start
   far below the small photo. The small photo ends with path 1 instead (level
   with its text when that is longer), and path 2 follows it with the same
   photo-to-text gap as inside a path. */
@media (min-width: 768px) {
	.path--move {
		min-height: calc(1129 * var(--u));
		align-content: start;
	}

	.path--move .path__img--accent {
		top: auto;
		bottom: 0;
	}

	.path--build {
		margin-top: calc(47 * var(--u));
		/* Takes no height, so path 3 (right column) can start beside path 2
		   (left column) whatever the length of path 2's text. */
		height: 0;
	}

	/* Its photo starts level with path 2's title. */
	.path--build + .path--connect {
		margin-top: calc(41 * var(--u));
	}
}

/* 3: photo with text below, right; starts level with path 2. */
.path--connect {
	margin-top: calc(-189 * var(--u));
}

/* Landscape photo shown whole: the frame follows the photo's 3 : 2 shape. It
   is one column wider than the space from its text to the content edge (11
   columns), growing to the right but always stopping short of the screen edge. */
.path--connect .path__img--main {
	grid-column: 15 / -1;
	width: min(calc(110% + var(--gap) / 10), calc(100% + var(--side) - 16px));
	height: auto;
	aspect-ratio: 3 / 2;
}

.path--connect .path__text {
	grid-column: 15 / span 8;
	margin-top: calc(47 * var(--u));
}

/* ---------- Home: Why Monaco (red band) ---------- */

.why {
	padding: calc(95 * var(--v)) 0 calc(132 * var(--v));
	background: linear-gradient(var(--white) 0 calc(430 * var(--u)), var(--red) 0 calc(100% - 132 * var(--u)), var(--white) 0);
	text-align: center;
}

.why__gif {
	position: relative;
	width: calc(488 * var(--u));
	height: calc(703 * var(--u));
	margin: 0 auto;
	object-fit: contain;
}

.why .eyebrow {
	margin-top: calc(66 * var(--u));
	color: var(--ink);
}

.why h2 {
	max-width: calc(998 * var(--u));
	margin: calc(28 * var(--u)) auto 0;
	color: var(--ink);
}

.why h2 em {
	color: var(--white);
}

.why__points {
	grid-column: 13 / span 8;
	margin: calc(71 * var(--u)) 0 0 calc(40 * var(--u));
	padding-bottom: calc(191 * var(--u));
	color: var(--white);
	text-align: left;
}

.why__points li {
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.why__points li + li {
	margin-top: calc(9.5 * var(--u));
}

.why__points .arrow-link {
	margin-top: calc(43 * var(--u));
	text-decoration: none;
}

/* ---------- Call to action ---------- */

.cta {
	padding: calc(150 * var(--v)) 0 calc(168 * var(--v));
	text-align: center;
}

.cta .eyebrow {
	color: var(--red);
}

.cta h2 {
	margin: calc(28 * var(--u)) auto 0;
}

.cta p:not(.eyebrow) {
	max-width: calc(494 * var(--u));
	margin: calc(48 * var(--u)) auto 0;
}

.cta .im-btn {
	margin-top: calc(49 * var(--u));
}

.cta--404 {
	min-height: 70vh;
}

/* ---------- About: what we add ---------- */

.add {
	padding: calc(150 * var(--v)) 0 calc(145 * var(--v));
}

.add .eyebrow {
	color: var(--red);
}

.add h2 {
	max-width: calc(796 * var(--u));
	margin: calc(28 * var(--u)) auto 0;
}

.add h2 em {
	color: var(--red);
}

.add .lede {
	max-width: calc(695 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
}

.add .crest {
	margin-top: calc(73 * var(--u));
}

.steps {
	grid-column: 13 / span 8;
	margin-top: calc(92 * var(--u));
}

.steps li + li {
	margin-top: calc(66 * var(--u));
}

.steps h3 {
	font-weight: 700;
}

.steps p {
	margin-top: calc(11 * var(--u));
}

/* ---------- About: one identity (red) ---------- */

.identity {
	padding: calc(169 * var(--v)) 0 calc(194 * var(--v));
	text-align: center;
}

.identity h2 {
	max-width: calc(1099 * var(--u));
	margin: 0 auto;
}

.identity h2 em {
	color: var(--ink);
}

.identity .marquee {
	margin-top: calc(48 * var(--u));
}

.identity .lede {
	max-width: calc(695 * var(--u));
	margin: calc(44 * var(--u)) auto 0;
}

/* ---------- About: three ways to act (accordion) ---------- */

.act {
	padding: calc(165 * var(--v)) 0 calc(13 * var(--v));
	text-align: center;
}

.act .eyebrow {
	color: var(--red);
}

.act h2 {
	max-width: calc(998 * var(--u));
	margin: calc(29 * var(--u)) auto 0;
}

.act__grid {
	align-items: start;
	margin-top: calc(76 * var(--u));
	text-align: left;
}

.act__img {
	grid-column: 5 / span 6;
	/* Spans both rows, so the archive photo follows the accordion directly. */
	grid-row: 1 / span 2;
	width: 100%;
	height: calc(354 * var(--u));
	margin-top: calc(211 * var(--u));
	object-fit: cover;
}

.accordion {
	grid-column: 13 / span 11;
	grid-row: 1;
	color: var(--red);
}

.accordion details {
	border-top: 1px solid currentColor;
}

.accordion details:last-child {
	border-bottom: 1px solid currentColor;
}

.accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: calc(95 * var(--u));
	padding: 0.6em 0;
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.accordion summary::-webkit-details-marker {
	display: none;
}

.accordion summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-right: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s;
}

.accordion details[open] summary::after {
	transform: rotate(-135deg);
}

.accordion__body {
	max-width: calc(392 * var(--u));
	padding: 0 0 calc(33 * var(--u));
	font-size: var(--fs-small);
}

.accordion__body p + p {
	margin-top: calc(20 * var(--u));
}

.act__archive {
	grid-column: 13 / -1;
	width: calc(100% + var(--side));
	max-width: none;
	height: calc(514 * var(--u));
	margin-top: calc(100 * var(--u));
	object-fit: cover;
}

/* ---------- About: team (photo and text) ---------- */

.team {
	padding: calc(95 * var(--v)) 0 calc(157 * var(--v));
}

.team__img {
	grid-column: 1 / span 11;
	width: 100%;
	height: calc(357 * var(--u));
	object-fit: cover;
}

/* On wider screens the photo rises to just below the archive photo above (which
   sits on the right), so the three photos of About step down the page together. */
@media (min-width: 768px) {
	/* The photo's top lines up with the third line of the heading beside it
	   (spacing in design units plus two heading lines, which scale with the
	   heading's font size). */
	.team__img {
		margin-top: calc(-20 * var(--u) + 21px + 2.316 * var(--im-heading-fs, var(--fs-h1)));
	}

	/* The text follows, starting just below the archive photo. */
	.team .team__text {
		padding-top: 0;
		margin-top: calc(-30 * var(--u));
	}
}

.team__text {
	grid-column: 13 / span 12;
	padding-top: calc(110 * var(--u));
}

.team .eyebrow {
	color: var(--red);
}

.team h2 {
	margin-top: calc(10 * var(--u));
}

.team p:not(.eyebrow) {
	margin-top: calc(33 * var(--u));
}

/* ---------- About: mandate ---------- */

.mandate {
	padding-top: calc(150 * var(--v));
	padding-bottom: calc(96 * var(--v));
}

.mandate h2 {
	margin-top: calc(28 * var(--u));
	color: var(--red);
}

.mandate h2 em {
	color: var(--ink);
}

.mandate__text {
	grid-column: 13 / span 9;
	position: relative;
	z-index: 2;
	margin-top: calc(53 * var(--u));
}

.mandate__img {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	height: calc(651 * var(--u));
	margin-top: calc(-25 * var(--u));
	object-fit: cover;
}

/* ---------- Why Monaco ---------- */

.model {
	padding: calc(95 * var(--v)) 0 calc(145 * var(--v));
}

.model h2 {
	max-width: calc(1099 * var(--u));
	margin: calc(47 * var(--u)) auto 0;
	color: var(--red);
}

.model h2 em {
	color: var(--ink);
}

.model__text {
	grid-column: 13 / span 8;
	margin-top: calc(61 * var(--u));
}

.continuity {
	min-height: calc(841 * var(--u));
	padding-top: calc(113 * var(--v));
	overflow: hidden;
}

.continuity .bg-cover {
	object-position: 79.8% 100%;
}

.continuity__text {
	position: relative;
	z-index: 1;
	grid-column: 1 / span 12;
}

.continuity h2 {
	margin-top: calc(29 * var(--u));
}

.continuity h2 em {
	color: var(--red);
}

.economy {
	padding: calc(169 * var(--v)) 0 calc(136 * var(--v));
	text-align: center;
}

.economy h2 {
	margin-top: calc(46 * var(--u));
	color: var(--red);
}

.economy h2 em {
	color: var(--ink);
}

.economy .lede {
	max-width: calc(494 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
}

.economy__grid {
	margin-top: calc(56 * var(--u));
	text-align: left;
}

.economy__img {
	grid-column: 1 / span 6;
	width: calc(100% + var(--side));
	max-width: none;
	height: calc(538 * var(--u));
	margin-left: calc(-1 * var(--side));
	object-fit: contain;
	object-position: left center;
}

.economy__data {
	grid-column: 13 / span 12;
	padding-top: calc(54 * var(--u));
}

.economy__big {
	color: var(--red);
	font-family: var(--serif);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
}

.economy__caption {
	margin-top: calc(8 * var(--u)) !important;
}

.bars {
	margin-top: calc(48 * var(--u));
}

.bar + .bar {
	margin-top: calc(15 * var(--u));
}

.bar__label {
	display: block;
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.bar__label strong {
	font-weight: 400;
}

.bar__track {
	display: block;
	height: calc(17 * var(--u));
	margin-top: calc(14 * var(--u));
	padding: calc(4.5 * var(--u)) 0;
}

.bar__fill {
	display: block;
	width: calc(var(--v) / var(--max) * 100%);
	height: 100%;
	background: var(--red);
	transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .bars:not(.is-visible) .bar__fill {
	width: 0;
}

.finance {
	padding: calc(132 * var(--v)) 0 calc(167 * var(--v));
	text-align: center;
}

.finance h2 {
	max-width: calc(897 * var(--u));
	margin: calc(46 * var(--u)) auto 0;
	color: var(--red);
}

.finance h2 em {
	color: var(--white);
}

.finance .lede {
	max-width: calc(594 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
}

.finance__stats {
	grid-column: 13 / span 10;
	margin-top: calc(110 * var(--u));
	text-align: left;
}

.finance .stat + .stat {
	margin-top: calc(84 * var(--u));
}

.finance .stat__num {
	color: var(--red);
	font-weight: 700;
}

.community {
	padding: calc(95 * var(--v)) 0 calc(120 * var(--v));
	text-align: center;
}

.community__chart {
	width: calc(761 * var(--u));
	margin: 0 auto;
}

.community h2 {
	max-width: calc(998 * var(--u));
	margin: calc(47 * var(--u)) auto 0;
}

.community h2 em {
	color: var(--red);
}

.community .lede {
	max-width: calc(494 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
}

.life {
	padding: calc(167 * var(--v)) 0 calc(157 * var(--v));
	overflow: hidden;
}

.life__marquees {
	position: relative;
	height: calc(353 * var(--u));
	color: #1f4e8c;
}

.life__marquees .marquee {
	position: absolute;
	left: 0;
	right: 0;
}

.marquee--row1 { top: 0; height: calc(214 * var(--u)); }
.marquee--row2 { top: calc(88 * var(--u)); height: calc(184 * var(--u)); }
.marquee--row3 { top: calc(229 * var(--u)); height: calc(124 * var(--u)); }

.life h2 {
	position: relative;
	max-width: calc(998 * var(--u));
	margin: calc(-57 * var(--u)) auto 0;
	color: var(--red);
	text-align: center;
}

.life h2 em {
	color: var(--ink);
}

.life .lede {
	max-width: calc(494 * var(--u));
	margin: calc(53 * var(--u)) auto 0;
	text-align: center;
}

.pillars {
	grid-column: 13 / span 11;
	margin-top: calc(146 * var(--u));
}

.pillar + .pillar {
	margin-top: calc(74 * var(--u));
}

.pillar__num {
	font-family: var(--serif);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: var(--lh-h1);
}

.pillar__title {
	margin-top: calc(8 * var(--u)) !important;
	font-family: var(--serif);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
}

.pillar__text {
	max-width: calc(342 * var(--u));
	margin-top: calc(10 * var(--u)) !important;
}

.digital {
	padding: calc(121 * var(--v)) 0 calc(157 * var(--v));
	overflow: hidden;
}

.digital .bg-cover {
	object-position: 33.8% 49.6%;
}

.digital__list {
	position: relative;
	z-index: 1;
	grid-column: 13 / span 9;
}

.digital__item + .digital__item {
	margin-top: calc(83 * var(--u));
}

.digital__item .display {
	font-weight: 700;
}

.digital__item .eyebrow {
	margin-top: calc(12 * var(--u));
}

.land {
	padding: calc(187 * var(--v)) 0 calc(167 * var(--v));
}

.land__left {
	grid-column: 1 / span 11;
	grid-row: 1;
	margin-left: calc(-1 * var(--side));
	padding-top: calc(269 * var(--u));
}

.slideshow {
	position: relative;
	overflow: hidden;
}

.land .slideshow {
	width: calc(var(--side) + 544 * var(--u));
	height: calc(372 * var(--u));
}

.slideshow__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.slideshow__img.is-active {
	opacity: 1;
}

.land__photo {
	width: calc(393 * var(--u));
	height: calc(467 * var(--u));
	margin: calc(77 * var(--u)) 0 0 calc(var(--side) + 151 * var(--u));
	object-fit: cover;
}

/* Photo with a credit in its corner: the frame keeps the photo's size and
   position, the photo fills it. */
.im-credited {
	position: relative;
	overflow: hidden;
}

.im-credited__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.im-credit {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 3px 7px;
	border-radius: 2px;
	background: rgba(28, 28, 28, 0.55);
	color: var(--white);
	font-family: var(--sans);
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.land__intro {
	grid-column: 13 / span 11;
	grid-row: 1;
}

.land h2 {
	margin-top: calc(28 * var(--u));
	color: var(--red);
}

.land h2 em {
	color: var(--ink);
}

.land__intro p:not(.eyebrow) {
	margin-top: calc(33 * var(--u));
}

.land__image {
	width: calc(443 * var(--u));
	height: calc(320 * var(--u));
	margin-top: calc(36 * var(--u));
	object-fit: cover;
}

.land__stats {
	margin-top: calc(48 * var(--u));
}

.land .stat + .stat {
	margin-top: calc(80 * var(--u) - 2.5rem);
}

.land .stat__num {
	font-weight: 700;
}

.land .stat__label {
	color: var(--red);
}

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

.contact {
	position: relative;
	min-height: max(100svh, calc(1469 * var(--u)));
	padding: calc(221 * var(--v)) 0 calc(122 * var(--v));
	color: var(--white);
	background: var(--ink);
	overflow: hidden;
}

.contact__media {
	position: absolute;
	inset: 0;
}

.contact__intro {
	position: relative;
	z-index: 1;
	text-align: center;
}

.contact h1 {
	margin-top: calc(31 * var(--u));
	color: var(--red);
}

.contact .hero__lede {
	max-width: calc(594 * var(--u));
	margin: calc(50 * var(--u)) auto 0;
}

.contact__form {
	position: relative;
	z-index: 1;
	grid-column: 13 / span 12;
	margin-top: calc(98 * var(--u));
}

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

.im-form {
	display: grid;
	gap: calc(20 * var(--u));
	font-size: var(--fs-body);
	scroll-margin-top: 2rem;
}

.im-form__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.im-form__group legend {
	padding: 0;
	margin-bottom: 4px;
}

.im-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

.im-form__field {
	display: grid;
	gap: 4px;
}

.im-form__row .im-form__field label {
	font-size: 12px;
}

.im-form label small {
	margin-left: 0.4em;
	font-size: 12px;
	opacity: 0.7;
}

.im-form input[type="text"],
.im-form input[type="email"],
.im-form input[type="tel"],
.im-form textarea {
	width: 100%;
	min-height: 47px;
	padding: 10px;
	border: 1px solid var(--white);
	border-radius: 0;
	background: var(--white);
	color: var(--ink);
	font: inherit;
}

.im-form textarea {
	height: 100px;
	resize: vertical;
}

.im-form input:focus,
.im-form textarea:focus {
	outline: 2px solid var(--red);
	outline-offset: 0;
}

.im-form__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: var(--fs-small);
	cursor: pointer;
}

.im-form__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--red);
}

.im-form__submit {
	justify-self: start;
	min-width: 0;
	min-height: 55px;
	margin-top: 0;
	padding: 16px 20.8px;
}

.im-form__error {
	font-size: 13px;
	font-weight: 700;
}

.im-form [aria-invalid="true"] {
	outline: 2px solid var(--red);
	outline-offset: 0;
}

.im-form__status:not(:has(p)) {
	display: none;
}

.im-form__notice {
	padding: 1rem 1.2rem;
	background: var(--white);
	color: var(--ink);
	border-left: 4px solid var(--red);
}

.im-form__notice.is-error {
	background: var(--red);
	color: var(--white);
	border-left-color: var(--white);
}

.im-form__hp {
	position: absolute;
	left: -9999px;
}

/* ---------- Generic pages & posts ---------- */

.content-page {
	max-width: 52rem;
	padding-top: 4rem;
	padding-bottom: 8rem;
}

.content-page h1 {
	margin-bottom: 2.5rem;
}

.entry-content > * + * {
	margin-top: 1.2em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
	font-family: var(--serif);
}

.entry-content h2 {
	font-size: var(--fs-h2);
}

.entry-content a {
	color: var(--red);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
	list-style: revert;
}

.post-list {
	display: grid;
	gap: 3rem;
}

.post-card h2 a {
	text-decoration: none;
}

/* ---------- Scroll reveal (fade, as on the original) ---------- */

.js [data-reveal] {
	opacity: 0;
	transition: opacity 0.9s ease;
}

.js [data-reveal].is-visible {
	opacity: 1;
}

/* Tablets: values measured on the original at 768 px. */
@media (min-width: 768px) and (max-width: 1100px) {
	.stats--dark {
		padding: 269px 0 251px;
	}

	.ways {
		padding: 186px 0 237px;
	}

	.cta {
		padding-top: 156px;
	}
}

@media (max-width: 767px) {
	:root {
		--wrap: 88vw;
		/* Spacing on phones is about 60 % of desktop, as on the original. */
		--u: 0.62px;
		--fs-h1: min(62.6px, 16.05vw);
		--fs-h2: 32.2px;
		--fs-h3: 24px;
		--fs-h4: 18px;
		--fs-body: 17px;
		--fs-small: 15px;
		--fs-btn: 13.47px;
		--header-pad: 6vw;
	}
}

/* ==========================================================================
   Phones (up to 767 px): single column, as on the original's mobile layout.
   ========================================================================== */

@media (max-width: 767px) {
	.grid {
		display: block;
	}

	.site-header__inner {
		min-height: 127px;
	}

	.site-nav,
	.site-header__end .lang-switch {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	.site-logo img {
		height: 70px;
	}

	body:not(.has-hero) .site-main {
		padding-top: 127px;
	}

	.site-footer__inner {
		flex-direction: column-reverse;
		gap: 2rem;
		min-height: 216px;
	}

	.social-links {
		position: static;
		transform: none;
	}

	.hero {
		min-height: 100svh;
	}

	.hero__content {
		padding: 120px 0;
	}

	.hero h1,
	.hero__lede {
		max-width: none;
	}

	.hero__lede {
		margin-top: 11px;
	}

	.hero__scroll {
		width: 45px;
		bottom: 40px;
	}

	.intro {
		padding: 91px 0 90px;
	}

	.intro .eyebrow {
		margin-bottom: 10px;
	}

	.intro h2 {
		max-width: none;
	}

	.intro__copy {
		margin-top: 45px;
	}

	.intro__rope {
		height: 199px;
		margin-top: 12px;
	}

	.intro__mandate {
		margin-top: -24px;
	}

	.crest {
		width: 220px;
		margin-top: 34px;
	}

	/* Positions measured on the original's phone layout (390 px wide). */
	.country {
		height: max(calc(3218 / 390 * 100vw), calc(2882 / 390 * 100vw + 85vh));
	}

	.country__sticky {
		padding: 0 6vw;
	}

	.float.f1 { left: calc(50% - 127.5 / 390 * 100vw); top: calc(50vh - 258.5 / 390 * 100vw); width: calc(255 / 390 * 100vw); height: calc(517 / 390 * 100vw); }
	.float.f3 { left: 0; top: calc(723 / 390 * 100vw); width: calc(190 / 390 * 100vw); height: calc(339 / 390 * 100vw); }
	.float.f5 { left: calc(201 / 390 * 100vw); top: calc(1108 / 390 * 100vw); width: calc(166 / 390 * 100vw); height: calc(234 / 390 * 100vw); }
	.float.f4 { left: calc(112 / 390 * 100vw); right: auto; top: calc(1493 / 390 * 100vw); width: calc(166 / 390 * 100vw); height: calc(234 / 390 * 100vw); }
	.float.f6 { left: calc(245 / 390 * 100vw); top: calc(1773 / 390 * 100vw); width: calc(145 / 390 * 100vw); height: calc(234 / 390 * 100vw); }
	.float.f7 { left: 0; top: calc(2088 / 390 * 100vw); width: calc(190 / 390 * 100vw); height: calc(304 / 390 * 100vw); }
	.float.f2 { left: calc(150 / 390 * 100vw); top: calc(2508 / 390 * 100vw); width: calc(240 / 390 * 100vw); height: auto; }

	.stats,
	.stats--light,
	.stats--words,
	.stats--people {
		padding: 56px 0 90px;
	}

	.stat + .stat,
	.land .stat + .stat,
	.finance .stat + .stat {
		margin-top: 44px;
	}

	.stats__note {
		margin-top: 30px;
	}

	.ways {
		padding: 124px 0 120px;
	}

	.ways__signature {
		width: 270px;
		margin: 0 0 0 -10px;
	}

	.paths {
		padding: 175px 0 120px;
		background: linear-gradient(var(--band) 0 374px, var(--white) 0);
	}

	.paths .marquee {
		top: 640px;
	}

	.path {
		display: flex;
		flex-direction: column;
	}

	/* Same 28 px between every photo and text, as under the first photo. */
	.path + .path,
	.path--build {
		margin-top: 0;
	}

	.path + .path.path--connect {
		margin-top: 28px;
	}

	.path--move .path__text {
		order: 1;
	}

	.path--move .path__img--accent {
		order: 2;
	}

	.path__img,
	.path--move .path__img--main,
	.path--connect .path__img--main {
		height: auto;
		aspect-ratio: 343 / 479;
	}

	.path--connect .path__img--main {
		width: 100%;
		aspect-ratio: 3 / 2;
	}

	.path--move .path__img--accent {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 28px;
		aspect-ratio: 1;
	}

	.path__text,
	.path--move .path__text,
	.path--connect .path__text {
		margin-top: 28px;
	}

	.path__text p:not(.eyebrow) {
		max-width: none;
	}

	.why {
		padding: 56px 0;
		background: linear-gradient(var(--white) 0 329px, var(--red) 0 calc(100% - 56px), var(--white) 0);
	}

	.why__gif {
		width: 306px;
		height: 441px;
	}

	.why .eyebrow {
		margin-top: 46px;
	}

	.why h2 {
		margin-top: 10px;
	}

	.why__points {
		margin: 54px 0 0 40px;
		padding-bottom: 100px;
	}

	.cta {
		padding: 231px 0 160px;
	}

	.cta p:not(.eyebrow) {
		margin-top: 22px;
	}

	.cta p:not(.eyebrow) {
		max-width: none;
	}

	.cta .im-btn {
		width: 100%;
		min-height: 59px;
		margin-top: 127px;
	}

	.add,
	.identity,
	.act,
	.team,
	.mandate,
	.model,
	.economy,
	.finance,
	.community,
	.life,
	.digital,
	.land {
		padding-top: 90px;
		padding-bottom: 90px;
	}

	.add h2,
	.add .lede,
	.identity h2,
	.identity .lede,
	.act h2,
	.model h2,
	.economy .lede,
	.finance h2,
	.finance .lede,
	.community h2,
	.community .lede,
	.life h2,
	.life .lede {
		max-width: none;
	}

	.steps,
	.act__grid,
	.team__text,
	.model__text,
	.finance__stats,
	.pillars,
	.mandate__text,
	.economy__data,
	.land__intro {
		margin-top: 48px;
	}

	.steps h3 {
		font-size: var(--fs-h2);
	}

	.act__img {
		width: 60%;
		height: auto;
		aspect-ratio: 292 / 354;
		margin: 0 auto 40px;
	}

	.accordion__body {
		max-width: none;
	}

	.act__archive {
		width: 100%;
		height: auto;
		aspect-ratio: 715 / 514;
		margin-top: 48px;
	}

	.team__img {
		height: auto;
		aspect-ratio: 544 / 357;
	}

	.team__text {
		padding-top: 0;
	}

	.mandate__img {
		height: 300px;
		margin-top: 40px;
	}

	.continuity {
		min-height: 640px;
		padding: 80px 0;
	}

	/* The umbrella is cut on its left side: it runs to the screen's left edge. */
	.economy__img {
		width: calc(100% + var(--side));
		height: auto;
		margin: 0 0 0 calc(-1 * var(--side));
	}

	.economy__data {
		padding-top: 0;
	}

	.community__chart {
		width: 100%;
	}


	.digital__item + .digital__item {
		margin-top: 48px;
	}


	.contact {
		padding: 150px 0 90px;
	}

	.contact .hero__lede {
		max-width: none;
	}

	.contact__form {
		margin-top: 60px;
	}

	.im-form__row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.im-form {
		gap: 20px;
	}
}

/* Phones: section spacing measured on the original (390 px wide). */
@media (max-width: 767px) {
	.stats--dark { padding: 59px 0 93px; }
	.stats--dark .stat + .stat { margin-top: 45px; }
	.stat__label { margin-top: 10px; }
	.ways { padding: 137px 0 149px; }
	.cta { padding: 94px 0 94px; }
	.home .cta { padding: 234px 0 164px; }
	.add { padding: 111px 0 106px; }
	.steps li + li { margin-top: 48px; }
	.identity { padding: 164px 0 174px; }
	.act { padding: 87px 0 17px; }
	.team { padding: 94px 0 104px; }
	.mandate { padding: 76px 0 94px; }
	.stats--light { padding: 59px 0 94px; }
	.model { padding: 59px 0 69px; }
	.continuity { min-height: 0; padding: 59px 0 444px; }
	.continuity .bg-cover { object-position: 80% 100%; }
	.stats--words { padding: 94px 0 94px; }
	.economy { padding: 94px 0 67px; }
	.stats--people { padding: 105px 0 105px; }
	.finance { padding: 59px 0 93px; }
	.life { padding: 71px 0 117px; }
	.digital { padding: 100px 0 133px; }
}

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

	.js [data-reveal] {
		opacity: 1;
	}
}

/* "When land is scarce" on phones and portrait tablets: one column aligned
   with the text, normal spacing from the section above, images full width. */
@media (max-width: 767px), (max-width: 1100px) and (max-aspect-ratio: 1/1) {
	.land {
		padding: 90px 0 93px;
	}

	.land .grid {
		display: block;
	}

	.land__left {
		margin: 0;
		padding-top: 0;
	}

	.land .slideshow {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.land__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		margin: 16px 0 0;
	}

	.land__intro {
		margin-top: 48px;
	}

	.land__image {
		width: 100%;
		height: auto;
		aspect-ratio: 443 / 320;
	}
}

/* Portrait tablets: slideshow and photo side by side at the same height,
   rather than one very tall photo. */
@media (min-width: 768px) and (max-width: 1100px) and (max-aspect-ratio: 1/1) {
	.land__left {
		display: grid;
		grid-template-columns: 3fr 2fr;
		gap: 16px;
	}

	/* 2 columns of a 3 : 2 split, square = the slideshow's height. */
	.land__photo {
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0;
	}
}