/* =========================================================================
   Exodus MM2H — main stylesheet
   Sections: tokens · base · type · buttons · header · hero · about · stats
             · split · why · process · cta · blog · offices · contact
             · footer · motion · responsive
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
	--navy:        #242359;
	--navy-deep:   #1a1946;
	--navy-soft:   #34336d;
	--ink:         #242359;
	--body:        #45456a;
	--body-light:  rgba(255, 255, 255, .78);
	--cream:       #f7f0e0;
	--cream-deep:  #efe2c6;
	--gold:        #c79a46;
	--gold-light:  #f0dba7;
	--line:        rgba(36, 35, 89, .14);
	--line-light:  rgba(255, 255, 255, .22);

	--gold-grad:   linear-gradient(115deg, #b98a34 0%, #f3e2b4 28%, #d9b365 52%, #f6e9c6 76%, #c1913a 100%);
	--gold-soft:   linear-gradient(150deg, #f6e7c0 0%, #dcb96a 55%, #c99b44 100%);
	--cream-grad:  linear-gradient(160deg, #fdf8ec 0%, #f4e6c5 45%, #e8d5a6 100%);

	--serif: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
	--sans:  "Avenir", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--wrap:        1200px;
	--wrap-narrow: 860px;
	--gutter:      clamp(1.25rem, 4vw, 3.5rem);
	--head-h:      84px;

	--ease-out:  cubic-bezier(.22, .61, .36, 1);
	--ease-soft: cubic-bezier(.33, 1, .68, 1);
}

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

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

/* Never add scroll-behavior: smooth — it fights ScrollTrigger's pinning. */
body {
	margin: 0;
	background: #fff;
	color: var(--body);
	font-family: var(--sans);
	font-size: clamp(.95rem, .35vw + .88rem, 1.0625rem);
	line-height: 1.72;
	font-weight: 400;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, video { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap {
	width: min(var(--wrap), 100% - var(--gutter) * 2);
	margin-inline: auto;
}
.wrap--narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); }

.scr {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 200;
	background: #fff; color: var(--navy);
	padding: .7rem 1.2rem; border-radius: 6px; font-weight: 700;
	transition: top .2s var(--ease-out);
}
.skip:focus { top: 1rem; }

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

/* ---------- type ---------- */
.h-display {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 0;
}

h1.h-display, .h-display.is-xl { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2.h-display { font-size: clamp(2rem, 4.3vw, 3.55rem); }

.eyebrow {
	margin: 0 0 1.1rem;
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--navy);
}
.eyebrow--light { color: rgba(255, 255, 255, .86); }

.section-head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head__lede {
	margin: 1.6rem auto 0;
	max-width: 34rem;
	color: var(--body);
}

/* Gold lettering.
   The gradient must sit on the element that GSAP transforms (.word), never on an
   ancestor: `background-clip: text` computes its clip in the ancestor's own box, so a
   transformed child paints its gradient where the word *used to be*. main.js widens each
   word's background to the heading and offsets it, which keeps one continuous ramp. */
/* Positioned so each word's offsetLeft/offsetTop are measured against the heading. */
.gold-words { position: relative; }
.gold-words .word {
	background-image: var(--gold-grad);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* Until main.js measures, each word carries the full ramp — never flat or invisible. */
.gold-words .word { background-size: 100% 100%; background-position: 0 0; }

.gold-text {
	background: var(--gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.prose :is(h1, h2, h3) { font-family: var(--serif); color: var(--ink); font-weight: 400; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .82rem 1.5rem;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s var(--ease-out), border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}
/* The fill sweeps in from the bottom on hover — no transform on .btn itself,
   so GSAP entry tweens on button rows are never stalled by a CSS transition. */
.btn::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .42s var(--ease-soft);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

.btn--solid   { background: var(--navy); color: #fff; }
.btn--solid::before { background: var(--gold); }
.btn--solid:hover   { color: var(--navy); }

.btn--light   { background: #fff; color: var(--navy); }
.btn--light::before { background: var(--gold-light); }

.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline::before { background: var(--navy); }
.btn--outline:hover   { color: #fff; }

.btn--ghost   { border-color: var(--gold); color: var(--gold-light); background: transparent; }
.btn--ghost::before { background: var(--gold); }
.btn--ghost:hover   { color: var(--navy); border-color: var(--gold); }

.btn--sm    { padding: .62rem 1.1rem; font-size: .8rem; }
.btn--block { width: 100%; justify-content: center; padding-block: 1rem; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0;
}

.i { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- decorative arcs ---------- */
.arcs {
	position: absolute;
	color: rgba(36, 35, 89, .1);
	width: clamp(320px, 38vw, 620px);
	height: auto;
	pointer-events: none;
	z-index: 0;
}

/* ---------- header ---------- */
.site-head {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: var(--navy);
	transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-head.is-stuck {
	background: rgba(26, 25, 70, .92);
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 40px rgba(12, 12, 40, .3);
}

/* How far down the page you are — a thin gold rule along the bottom of the bar. */
.site-head__progress {
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--gold-grad);
	transform: scaleX(0);
	transform-origin: left;
}

.site-head__in {
	width: min(1560px, 100% - var(--gutter) * 2);
	margin-inline: auto;
	min-height: var(--head-h);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.4rem);
}

.site-head__logo img { width: clamp(118px, 9vw, 152px); height: auto; }

.site-nav { margin-inline: auto; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.7vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	position: relative;
	display: block;
	padding: .4rem 0;
	color: rgba(255, 255, 255, .88);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: color .3s var(--ease-out);
}
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: var(--gold-light);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--ease-soft);
}
.site-nav__list a:hover { color: #fff; }
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list .current-menu-item > a { color: #fff; }

.site-head__side {
	display: flex;
	align-items: center;
	gap: clamp(.7rem, 1.3vw, 1.4rem);
	margin-left: auto;
}

.lang { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .9); font-size: .85rem; font-weight: 600; }
.lang__flag svg { width: 22px; height: 15px; border-radius: 2px; display: block; }

.site-head__phone {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255, 255, 255, .92);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color .3s var(--ease-out);
}
.site-head__phone:hover { color: var(--gold-light); }

.burger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.burger__box { display: block; width: 24px; }
.burger__box i {
	display: block; height: 2px; background: #fff; border-radius: 2px;
	transition: transform .35s var(--ease-out), opacity .2s linear;
}
.burger__box i + i { margin-top: 5px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mobile drawer ---------- */
.drawer {
	position: fixed;
	inset: var(--head-h) 0 0;
	z-index: 99;
	background: var(--navy);
	padding: 2rem var(--gutter) 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
}
.drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.drawer__nav a {
	display: block;
	padding: .85rem 0;
	border-bottom: 1px solid var(--line-light);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.5rem;
	text-decoration: none;
}
.drawer__foot { display: grid; gap: .7rem; margin-top: 2.5rem; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
	position: relative;
	background: var(--navy);
	color: #fff;
}

.hero__stage {
	position: relative;
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	display: grid;
	place-items: center;
}

/* Sky wash behind the skyline so the photo dissolves into the navy. */
.hero__sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 78% at 50% 6%, #cfe6f5 0%, #9ec5e4 32%, #5a83b8 58%, rgba(36, 35, 89, .92) 84%, var(--navy) 100%);
}

.hero__skyline {
	position: absolute;
	inset: auto 0 0;
	height: 78%;
	will-change: transform;
}
.hero__skyline :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
	opacity: .9;
}

/* Soft vignette so the gold headline keeps its contrast over the bright sky. */
.hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(64% 38% at 50% 52%, rgba(20, 22, 70, .5) 0%, rgba(20, 22, 70, .22) 55%, transparent 100%);
}

.hero__title {
	position: relative;
	z-index: 3;
	margin: 0;
	padding-top: var(--head-h);
	width: min(15em, 92%);
	text-align: center;
	font-size: clamp(2.5rem, 5.4vw, 4.75rem);
	line-height: 1.12;
	filter: drop-shadow(0 22px 42px rgba(10, 10, 40, .45));
}

/* Floating arch photos. The artwork is square and already carries its own arch mask and
   navy fade in the alpha channel — no border-radius, no shadow, no cropping. */
.hero__cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__card {
	position: absolute;
	margin: 0;
	aspect-ratio: 1;
	will-change: transform;
}
.hero__card img { width: 100%; height: 100%; object-fit: contain; }

.hero__card--1 { left: 3%;  bottom: -4%; width: clamp(200px, 23vw, 370px); }
.hero__card--2 { right: 2%; top: 46%;    width: clamp(210px, 24vw, 390px); }
.hero__card--3 { left: 46%; bottom: -12%; width: clamp(170px, 19vw, 320px); }

.hero__cue {
	position: absolute;
	left: 50%;
	bottom: 2.2rem;
	z-index: 4;
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	gap: .6rem;
	color: rgba(255, 255, 255, .7);
	font-size: .68rem;
	letter-spacing: .28em;
	text-transform: uppercase;
}
.hero__cue-line {
	width: 1px; height: 46px;
	background: linear-gradient(180deg, transparent, var(--gold-light));
	transform-origin: top;
	animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue {
	0%   { transform: scaleY(0); opacity: 0; }
	40%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* The navy panel the stage hands over to. */
.hero__intro {
	position: relative;
	z-index: 5;
	background: var(--navy);
	text-align: center;
	padding-block: clamp(4rem, 8vw, 6.5rem);
}
.hero__kicker { font-size: clamp(2rem, 4.6vw, 3.9rem); }
.hero__lede {
	margin: 1.6rem auto 0;
	max-width: 44rem;
	color: var(--body-light);
}
.hero__intro .btn-row { justify-content: center; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: #fff;
}
.about__media {
	position: relative;
	overflow: hidden;
	min-height: clamp(360px, 46vw, 620px);
}
.about__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	will-change: transform;
}
.about__body { display: grid; align-items: center; padding: clamp(3rem, 7vw, 7rem) var(--gutter); }
.about__body-in { max-width: 34rem; }
.about__body h2 { margin-bottom: 1.8rem; }
.about__body p { margin: 0 0 1.15rem; }
.about__body strong { color: var(--ink); font-weight: 700; }

/* =========================================================================
   STATS
   ========================================================================= */
.stats {
	position: relative;
	background: #fff;
	padding-block: clamp(3rem, 8vw, 7rem) clamp(4rem, 10vw, 8rem);
	overflow: clip;
}
.arcs--stats-l { left: -16%; top: 4%; }
.arcs--stats-r { right: -22%; top: 34%; transform: scaleX(-1); }

.stats__in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.stats__media figure {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 4 / 5;
	max-width: 26rem;
}
.stats__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.stats__media .eyebrow { margin-bottom: 2.5rem; }

.stats__list h2 { margin-bottom: 2.6rem; }
.stats__list dl { margin: 0; display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); }
.stat { margin: 0; }
.stat__value {
	font-size: clamp(3rem, 6.5vw, 5.2rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat__label { margin: .4rem 0 0; font-size: 1.05rem; color: var(--body); }

/* =========================================================================
   MM2H / PVIP SPLIT
   ========================================================================= */
.split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	min-height: clamp(560px, 66vw, 860px);
	background: var(--cream);
	isolation: isolate;
	overflow: clip;
}
.split__half {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	align-items: flex-end;
	padding: clamp(2.5rem, 5vw, 5rem);
	overflow: hidden;
}
.split__bg { position: absolute; inset: 0; z-index: -1; }
.split__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* The diagonal: MM2H takes the lower-left wedge, PVIP the rest. Each body sits well
   inside its own wedge, so the cut never runs through a headline. */
.split__half--mm2h {
	clip-path: polygon(0 0, 40% 0, 70% 100%, 0 100%);
	color: #fff;
	align-items: flex-end;
	transition: clip-path .7s var(--ease-soft);
}
.split__half--mm2h .split__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(120deg, rgba(20, 30, 90, .92) 8%, rgba(24, 36, 104, .62) 58%, rgba(20, 30, 90, .78) 100%);
}
.split__half--pvip {
	clip-path: polygon(40% 0, 100% 0, 100% 100%, 70% 100%);
	color: var(--ink);
	align-items: flex-start;
	justify-content: flex-end;
	transition: clip-path .7s var(--ease-soft);
}
.split__half--pvip .split__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(250, 243, 224, .9) 0%, rgba(240, 224, 184, .72) 46%, rgba(233, 211, 160, .58) 100%);
}
/* Each body is parked inside its own wedge — MM2H bottom-left, PVIP top-right — so the
   diagonal never crosses a headline whatever the section's aspect ratio works out to. */
.split__half--mm2h .split__body { left: clamp(1.5rem, 5vw, 5rem); bottom: clamp(2rem, 6vw, 5rem); }
.split__half--pvip .split__body { right: clamp(1.5rem, 5vw, 5rem); top: clamp(3rem, 8vw, 6rem); }

/* Hovering a half pushes the diagonal across, so the choice feels physical. */
/* Opening a half: its wedge takes most of the frame and its tier carousel slides in.
   `.is-open` is set by main.js on hover and on keyboard focus; the :has() rules keep it
   working if the script never runs. */
.split.is-mm2h .split__half--mm2h,
.split:has(.split__half--mm2h:hover) .split__half--mm2h { clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); }
.split.is-mm2h .split__half--pvip,
.split:has(.split__half--mm2h:hover) .split__half--pvip { clip-path: polygon(78% 0, 100% 0, 100% 100%, 100% 100%); }
.split.is-pvip .split__half--mm2h,
.split:has(.split__half--pvip:hover) .split__half--mm2h { clip-path: polygon(0 0, 14% 0, 42% 100%, 0 100%); }
.split.is-pvip .split__half--pvip,
.split:has(.split__half--pvip:hover) .split__half--pvip { clip-path: polygon(14% 0, 100% 0, 100% 100%, 42% 100%); }

.split__body { position: absolute; z-index: 1; width: min(32ch, 34%); }
.split__title { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; }
/* Wins over .h-display's ink colour whichever order the file ends up in. */
.split__half .split__title { color: inherit; }
.split__rule {
	display: block;
	height: 1px;
	margin: 1.2rem 0 1.1rem;
	background: currentColor;
	opacity: .45;
	transform: scaleX(0);
	transform-origin: left;
}
.split__sub { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.65rem); color: inherit; margin: 0 0 1.6rem; }
.split__half--mm2h .btn--light { color: var(--navy); }

/* ---------- tier carousel ---------- */
.tiers {
	position: absolute;
	z-index: 2;
	top: 50%;
	translate: 0 -50%;
	width: min(52%, 40rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s var(--ease-out), visibility .5s;
}
/* Each carousel sits inside its own wedge: the diagonal runs 14%→42% behind the PVIP
   cards and 78%→100% past the MM2H ones, so neither rail starts under the cut. */
.split__half--mm2h .tiers { right: 8%; }
.split__half--pvip .tiers { left: 34%; width: min(48%, 36rem); }

.split.is-mm2h .split__half--mm2h .tiers,
.split.is-pvip .split__half--pvip .tiers,
.split:has(.split__half--mm2h:hover) .split__half--mm2h .tiers,
.split:has(.split__half--pvip:hover) .split__half--pvip .tiers {
	opacity: 1;
	visibility: visible;
}

.tiers__rail {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 3vw, 2.4rem);
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	/* main.js sets --shift to bring the active tier to the left edge of the rail. */
	translate: calc(var(--shift, 0) * -1) 0;
	transition: translate .7s var(--ease-soft);
}

.tier {
	flex: none;
	width: min(22rem, 62%);
	opacity: .32;
	scale: .9;
	transform-origin: left center;
	transition: opacity .6s var(--ease-out), scale .6s var(--ease-soft);
}
.tier.is-active { opacity: 1; scale: 1; }

.tier__card {
	display: block;
	aspect-ratio: var(--ratio, 1.55);
	border-radius: 14px;
	overflow: hidden;
	filter: drop-shadow(0 26px 48px rgba(6, 8, 30, .55));
}
.tier__card img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

/* Stand-in plate for a tier whose artwork has not arrived. */
.tier__card--plate {
	display: grid;
	align-items: end;
	padding: 1.2rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, .16);
}
.tier__card--silver { background: linear-gradient(140deg, #e9ecf2 0%, #aab0bd 48%, #d8dce4 100%); color: #2b2f3f; }
.tier__card--navy   { background: linear-gradient(140deg, #3b3a80 0%, #1e1d4e 52%, #2c2b63 100%); color: #fff; }
.tier__card--gold   { background: var(--gold-soft); color: #4a3a12; }
.tier__plate-name { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.2rem); }

.tier__meta { margin-top: 1.1rem; }
.tier__facts {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: grid;
	gap: .3rem;
	font-size: .85rem;
}
.split__half--mm2h .tier__facts { color: rgba(255, 255, 255, .88); }
.split__half--pvip .tier__facts { color: var(--ink); }
.split__half--pvip .tier__meta .btn--light { border-color: var(--navy); }

/* The half you are not looking at steps back, so its title cannot collide with the cards
   showing through the thin edge of its wedge. */
.split__body { transition: opacity .5s var(--ease-out); }
.split.is-mm2h .split__half--pvip .split__body,
.split.is-pvip .split__half--mm2h .split__body,
.split:has(.split__half--mm2h:hover) .split__half--pvip .split__body,
.split:has(.split__half--pvip:hover) .split__half--mm2h .split__body { opacity: 0; }

.tiers__bar { display: flex; gap: .6rem; }
.tiers__seg {
	flex: 1;
	height: 2px;
	max-width: 8rem;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, .28);
	transition: background-color .4s var(--ease-out);
}
.split__half--pvip .tiers__seg { background: rgba(36, 35, 89, .24); }
.tiers__seg.is-active { background: var(--gold-light); }
.split__half--pvip .tiers__seg.is-active { background: var(--navy); }

/* =========================================================================
   WHY EXODUS
   ========================================================================= */
.why {
	position: relative;
	background: #fff;
	padding-block: clamp(4rem, 10vw, 8rem);
	overflow: clip;
}
.arcs--why-l { left: -14%; top: 2%; }
.arcs--why-r { right: -18%; bottom: 4%; transform: scaleX(-1); }

.why .wrap { position: relative; z-index: 1; }

.why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4.5vw, 3.6rem) clamp(1.5rem, 4vw, 3.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.why__item { margin: 0; }
.why__medal {
	display: grid;
	place-items: center;
	width: 78px; height: 78px;
	margin: 0 auto 1.3rem;
	border-radius: 50%;
	background: var(--gold-soft);
	box-shadow: 0 14px 30px rgba(199, 154, 70, .28);
	transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-out);
}
.why__item:hover .why__medal {
	scale: 1.07;
	box-shadow: 0 18px 38px rgba(199, 154, 70, .42);
}
.why__medal img { width: 40px; height: 40px; object-fit: contain; }
.why__title { font-size: 1.08rem; color: var(--ink); margin: 0 0 .6rem; font-weight: 700; }
.why__item p { margin: 0; font-size: .95rem; }
.why__item strong { color: var(--ink); }

/* =========================================================================
   PROCESS (video + steps)
   ========================================================================= */
.process {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	color: #fff;
	background: #14142f;
	overflow: hidden;
}
.process__media { position: absolute; inset: 0; }
/* The six clips are stacked and cross-faded; only the active one is painted. */
.process__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s var(--ease-soft);
}
.process__video.is-active { opacity: 1; }
.process__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 10, 32, .82) 0%, rgba(10, 10, 32, .28) 34%, rgba(10, 10, 32, .55) 72%, rgba(10, 10, 32, .93) 100%);
}
.process__in {
	position: relative;
	z-index: 1;
	padding-block: clamp(4rem, 10vh, 7rem);
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.process__head h2, .process__head .word { color: #fff; }

/* The step title sits in the middle of the frame, over its own footage. */
.process__stage {
	position: relative;
	flex: 1;
	display: grid;
	place-items: center;
	text-align: center;
	padding-block: clamp(2rem, 6vh, 4rem);
}
.process__slide { grid-area: 1 / 1; max-width: 38rem; }
.process__count {
	margin: 0 0 1rem;
	font-size: .8rem;
	letter-spacing: .32em;
	color: var(--gold-light);
	font-variant-numeric: tabular-nums;
}
.process__count span { opacity: .45; margin-inline: .35em; }
.process__name {
	margin: 0;
	color: #fff;
	font-size: clamp(2.6rem, 7vw, 5.5rem);
	line-height: 1;
}
.process__body {
	margin: 1.2rem auto 0;
	max-width: 30rem;
	color: var(--body-light);
}

.process__steps { margin-top: auto; }
.process__tabs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(.5rem, 1.6vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.process__tab {
	width: 100%;
	background: none;
	border: 0;
	padding: 0 0 .7rem;
	text-align: left;
	cursor: pointer;
	color: rgba(255, 255, 255, .55);
	font-size: .95rem;
	font-weight: 600;
	transition: color .35s var(--ease-out);
}
.process__tab:hover { color: rgba(255, 255, 255, .85); }
.process__tab.is-active { color: #fff; }
.process__tab-bar {
	display: block;
	height: 2px;
	margin-top: .7rem;
	background: rgba(255, 255, 255, .22);
	overflow: hidden;
}
.process__tab-bar i {
	display: block;
	height: 100%;
	background: var(--gold-light);
	transform: scaleX(0);
	transform-origin: left;
}
.process__tab.is-active .process__tab-bar i { transform: scaleX(1); }
.process__tab.is-done .process__tab-bar i { transform: scaleX(1); background: rgba(255, 255, 255, .6); }


/* =========================================================================
   CTA BANNER
   ========================================================================= */
.cta {
	position: relative;
	background: #fff;
	padding-block: clamp(4rem, 10vw, 8rem);
	overflow: clip;
}
.arcs--cta { left: -20%; top: -4%; }

.cta .wrap { position: relative; z-index: 1; }
.cta__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 14px;
	background: var(--navy);
	min-height: clamp(300px, 30vw, 380px);
	display: grid;
	align-items: center;
}
/* Full-bleed: insetting the photo left a hard vertical seam where its edge met the navy.
   The fade does the work instead, so the picture dissolves rather than stopping. */
.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; will-change: transform; }
.cta__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 24%, rgba(36, 35, 89, .82) 40%, rgba(36, 35, 89, .28) 62%, rgba(36, 35, 89, 0) 82%);
}
.cta__body {
	position: relative;
	z-index: 2;
	padding: clamp(2.2rem, 5vw, 4rem);
	max-width: 38rem;
	color: #fff;
}
.cta__body h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.85rem); }
.cta__body p { color: var(--body-light); margin: 1.2rem 0 0; max-width: 28rem; }

/* =========================================================================
   BLOG
   ========================================================================= */
.insights {
	position: relative;
	padding-block: clamp(4rem, 10vw, 8rem);
	background: var(--cream-grad);
}
.insights .eyebrow, .insights h2 { color: var(--ink); }

.insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.2rem, 3vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .34);
	border: 1px solid rgba(199, 154, 70, .32);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .4s var(--ease-out), box-shadow .5s var(--ease-out), translate .5s var(--ease-soft);
}
.card:hover {
	translate: 0 -6px;
	border-color: rgba(199, 154, 70, .6);
	box-shadow: 0 24px 50px rgba(120, 92, 30, .18);
}
.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-soft); }
.card:hover .card__media img { scale: 1.06; }
.card__body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.card__title a { text-decoration: none; }
.card__excerpt { margin: 0; font-size: .875rem; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* =========================================================================
   GLOBAL PRESENCE
   ========================================================================= */
.offices { background: var(--navy); color: #fff; }
.offices__intro {
	position: relative;
	text-align: center;
	padding-block: clamp(4rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
	background: radial-gradient(90% 120% at 50% 0%, #2f2e73 0%, var(--navy) 62%);
}
.offices__intro h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.offices__lede { margin: 1.6rem auto 0; max-width: 46rem; color: var(--body-light); }

.offices__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}
.office {
	position: relative;
	min-height: clamp(300px, 28vw, 420px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.office__media { position: absolute; inset: 0; }
.office__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-soft); }
.office::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 40, 0) 38%, rgba(10, 10, 40, .8) 100%);
	transition: opacity .5s var(--ease-out);
}
.office:hover .office__media img { scale: 1.06; }
.office__body { position: relative; z-index: 1; padding: clamp(1.4rem, 3vw, 2.4rem); }
.office__city { margin: 0; font-size: 1.3rem; font-weight: 700; }
.office__role { margin: .15rem 0 .35rem; font-size: .82rem; color: rgba(255, 255, 255, .78); }
.office__text { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .86); max-width: 24rem; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact {
	position: relative;
	padding-block: clamp(4rem, 9vw, 7rem);
	background: linear-gradient(120deg, #fdf9f0 0%, #f3e8d2 58%, #ecdcbc 100%);
	overflow: clip;
}
.contact__texture {
	position: absolute;
	inset: 0;
	background-image: url("../img/texture-lines.webp");
	background-size: 420px auto;
	background-repeat: repeat;
	opacity: .5;
	mix-blend-mode: multiply;
}
.contact__in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.contact__intro { max-width: 34rem; }
.contact__intro h2 { margin-bottom: 1.4rem; }

.contact__points { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.contact__points li { display: flex; align-items: center; gap: .9rem; font-size: .95rem; color: var(--ink); font-weight: 600; }
.contact__tick {
	display: grid; place-items: center;
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--navy);
}
.contact__tick svg { width: 20px; height: 20px; }

.contact__card {
	background: #fff;
	border-radius: 16px;
	padding: clamp(1.8rem, 3.5vw, 3rem);
	box-shadow: 0 34px 80px rgba(94, 72, 24, .18);
}
.contact__card-title { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin-bottom: 1.8rem; }

.notice {
	margin: 0 0 1.4rem;
	padding: .85rem 1.1rem;
	border-radius: 8px;
	font-size: .9rem;
}
.notice--ok { background: rgba(53, 140, 90, .1); color: #256545; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.field { margin: 0 0 1.1rem; display: grid; gap: .45rem; position: relative; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: #f4f4f7;
	font: inherit;
	font-size: .9rem;
	color: var(--ink);
	transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder, .field textarea::placeholder { color: #9b9bb0; }
.field :is(input, select, textarea):focus {
	background: #fff;
	border-color: var(--gold);
	outline: none;
}
.field--select select { appearance: none; padding-right: 2.4rem; cursor: pointer; }
.field--select .i {
	position: absolute;
	right: .9rem;
	bottom: .95rem;
	width: 16px; height: 16px;
	rotate: 90deg;
	color: var(--navy);
	pointer-events: none;
}
.field__hint { font-size: .75rem; color: #8a8aa2; }
.hp { position: absolute; left: -9999px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-foot {
	background: var(--navy);
	color: rgba(255, 255, 255, .8);
	padding-top: clamp(3rem, 6vw, 5rem);
	font-size: .9rem;
}
.site-foot__in {
	width: min(var(--wrap), 100% - var(--gutter) * 2);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 4rem);
}
.site-foot__logo { width: 150px; margin-bottom: 2.2rem; }
.site-foot .eyebrow { color: rgba(255, 255, 255, .78); font-size: .72rem; margin-bottom: .8rem; }
.site-foot__title {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.16;
	color: #fff;
	margin: 0 0 1.6rem;
}
.site-foot__line { margin: 0 0 .5rem; }
.site-foot__line a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--gold-light);
	text-decoration: none;
	transition: color .3s var(--ease-out);
}
.site-foot__line a:hover { color: #fff; }
.site-foot__sub { margin: 1.8rem 0 .7rem; font-size: 1rem; color: var(--gold-light); font-family: var(--serif); font-weight: 400; }
.site-foot address { font-style: normal; line-height: 1.75; }

.socials { display: flex; gap: .55rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
.socials img {
	width: 30px; height: 30px;
	border-radius: 6px;
	transition: translate .35s var(--ease-soft), filter .35s var(--ease-out);
}
.socials a:hover img { translate: 0 -3px; filter: brightness(1.15); }

.site-foot__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.2rem, 3vw, 2.5rem);
}
.site-foot__col h2 {
	margin: 0 0 1.2rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold-light);
	font-weight: 700;
	font-family: var(--sans);
}
.site-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-foot__col a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: .86rem;
	transition: color .3s var(--ease-out);
}
.site-foot__col a:hover { color: var(--gold-light); }

.site-foot__legal {
	width: min(var(--wrap), 100% - var(--gutter) * 2);
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 1.4rem 0 1.8rem;
	border-top: 1px solid var(--line-light);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	font-size: .78rem;
}
.site-foot__legal p { margin: 0; }
.site-foot__legal ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-foot__legal a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-foot__legal a:hover { color: var(--gold-light); }

/* Floating WhatsApp */
.wa {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 90;
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	border-radius: 50% 50% 8px 50%;
	background: var(--gold-soft);
	color: var(--navy);
	box-shadow: 0 16px 36px rgba(140, 104, 30, .4);
	transition: translate .4s var(--ease-soft), box-shadow .4s var(--ease-out);
}
.wa svg { width: 32px; height: 32px; }
.wa:hover { translate: 0 -4px; box-shadow: 0 22px 44px rgba(140, 104, 30, .5); }

/* =========================================================================
   MOTION — pre-animation states
   ========================================================================= */
.h-display .line { display: block; overflow: hidden; }
.h-display .line-in { display: block; }
.h-display .word { display: inline-block; }
.h-display .word.is-gold { color: inherit; }

/* Hidden until GSAP takes over; `.anim-fallback` is the 3s safety net in inc/assets.php.
   Only opacity is pre-set here: the offsets belong to GSAP alone, because a CSS transform
   on the same element survives the tween and leaves the word parked at its start offset. */
.js:not(.anim-fallback) [data-split] .word,
.js:not(.anim-fallback) .hero__title .word,
.js:not(.anim-fallback) [data-fade],
.js:not(.anim-fallback) [data-stagger] { opacity: 0; }

/* Figures wipe up into place; GSAP owns the clip-path from there. */
.js:not(.anim-fallback) [data-reveal] { clip-path: inset(14% 0 0 0); }

.anim-fallback [data-reveal] { clip-path: none !important; }
.anim-fallback [data-split] .word,
.anim-fallback .hero__title .word,
.anim-fallback [data-fade],
.anim-fallback [data-stagger] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.js [data-split] .word,
	.js .hero__title .word,
	.js [data-fade],
	.js [data-stagger] { opacity: 1 !important; transform: none !important; }
	.js [data-reveal] { clip-path: none !important; }
	.hero__cue { display: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1180px) {
	.site-nav { display: none; }
	.burger { display: block; }
	.site-head__phone span { display: none; }
}

@media (max-width: 900px) {
	:root { --head-h: 72px; }

	.site-head__cta, .lang__name { display: none; }

	/* Phones: the headline sits high and the photos stack under it, so nothing overlaps. */
	.hero__stage { height: 92svh; align-items: start; }
	.hero__title { align-self: start; padding-top: calc(var(--head-h) + 9vh); }
	.hero__card--1 { left: -4%; bottom: -2%; width: 44vw; }
	.hero__card--2 { right: -6%; top: 62%; width: 46vw; }
	.hero__card--3 { display: none; }

	.about { grid-template-columns: 1fr; }
	.about__media { min-height: 58vw; }

	.stats__in { grid-template-columns: 1fr; }
	.stats__media figure { max-width: none; }
	.stats__list dl { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

	.split { min-height: 0; grid-template-columns: 1fr; }
	.split__half { grid-area: auto; clip-path: none !important; min-height: 58vw; padding: 2rem; }
	.split__half--pvip { align-items: flex-end; justify-content: flex-start; }
	.split__body { position: relative; width: auto; max-width: 30rem; inset: auto; }

	.why__grid { grid-template-columns: 1fr 1fr; }

	.process { min-height: 0; }
	.process__in { min-height: 0; padding-block: 4rem; gap: 3rem; }
	.process__tabs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 40%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.process__tabs::-webkit-scrollbar { display: none; }
	.process__tab { scroll-snap-align: start; }

	.cta__media { inset: 0; opacity: .5; }
	.cta__media::after { background: linear-gradient(180deg, rgba(36, 35, 89, .9), rgba(36, 35, 89, .75)); }

	.insights__grid { grid-template-columns: 1fr; }

	.offices__grid { grid-template-columns: 1fr; }

	.contact__in { grid-template-columns: 1fr; }
	.form__row { grid-template-columns: 1fr; }

	.site-foot__in { grid-template-columns: 1fr; }
	.site-foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.why__grid { grid-template-columns: 1fr; }
	.stats__list dl { grid-template-columns: 1fr; }
	.site-foot__cols { grid-template-columns: 1fr; }
	.hero__title { font-size: clamp(2rem, 8.6vw, 2.9rem); }
	.btn-row .btn { flex: 1 1 auto; justify-content: center; }
}