.wrap { padding-inline: var(--wrap-pad); max-width: var(--site-max); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--sand { background: var(--color-sand); }
.section--olive { background: var(--color-olive); color: var(--color-white); }
.section--olive .eyebrow { color: var(--color-gold); }
.section--olive .small { color: rgb(255 255 255 / 72%); }
.section--olive h2, .section--olive h3 { color: var(--color-white); }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 34px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.button--dark { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.button--sand { background: var(--color-sand-deep); color: var(--color-ink); border-color: var(--color-sand-deep); }
.button--outline { border-color: var(--color-ink); color: var(--color-ink); }
.button--outline-light { border-color: rgb(255 255 255 / 70%); color: var(--color-white); }
.button--white { background: var(--color-ivory); color: var(--color-ink); border-color: var(--color-ivory); }
@media (hover: hover) {
	.button--dark:hover { background: var(--color-bronze); border-color: var(--color-bronze); }
	.button--sand:hover, .button--white:hover { background: var(--color-white); border-color: var(--color-white); }
	.button--outline:hover { background: var(--color-ink); color: var(--color-white); }
	.button--outline-light:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); }
}

.text-link {
	--arrow-color: var(--color-bronze);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-right: 28px;
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-ink);
	line-height: 1;
}
.text-link::before {
	content: "";
	order: 1;
	width: 44px;
	height: 1px;
	background: var(--arrow-color);
	transform-origin: left center;
	transition: transform 600ms var(--ease-out);
}
.text-link::after {
	content: "";
	position: absolute;
	right: 29px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--arrow-color);
	border-right: 1px solid var(--arrow-color);
	transform: translate(0, -50%) rotate(45deg);
	transform-origin: center;
	transition: transform 600ms var(--ease-out);
}
.text-link--light { color: var(--color-white); --arrow-color: var(--color-gold); }
.text-link--block { display: flex; width: max-content; }
@media (hover: hover) {
	.text-link:hover::before { transform: scaleX(1.5); }
	.text-link:hover::after { transform: translate(22px, -50%) rotate(45deg); }
}

.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 14px;
	font-weight: 500;
	font-size: 0.69rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-ink);
	border: 1px solid var(--color-rule);
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-bronze); }

.hero { position: relative; overflow: hidden; color: var(--color-white); min-height: min(100svh, 870px); display: flex; }
.hero__bg, .cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg[data-parallax], .cta__bg[data-parallax] { inset: -7% 0; height: 114%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 18 12 / 55%) 0%, rgb(20 18 12 / 35%) 40%, rgb(20 18 12 / 62%) 100%); }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding-top: calc(var(--header-height) + clamp(2.5rem, 7svh, 4.5rem)); padding-bottom: clamp(3.5rem, 7.6vw, 6.9rem); }
.hero .lead { color: #ede6da; max-width: 640px; line-height: 1.7; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__media { position: relative; min-height: 100%; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__copy { padding: clamp(4rem, 8.3vw, 7.5rem) clamp(1.25rem, 6.25vw, 5.6rem); }

.card { display: block; }
.card__frame { border: 1px solid var(--color-rule-soft); padding: 6px; background: var(--color-sand); overflow: hidden; }
.card__frame img, .card__placeholder { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card__placeholder { display: grid; place-items: center; background: var(--color-sand-deep); }
.card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; }
.card__meta .h-card { font-size: var(--text-card-sm); }
.card__place { font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-grey-soft); white-space: nowrap; }
@media (hover: hover) { .card:hover .card__frame img { transform: scale(1.03); } }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }

.cta { position: relative; overflow: hidden; color: var(--color-white); text-align: center; }
.cta__shade { position: absolute; inset: 0; background: rgb(24 22 16 / 72%); }
.cta__inner { position: relative; z-index: 2; padding: clamp(7rem, 13.2vw, 11.9rem) var(--wrap-pad); display: flex; flex-direction: column; align-items: center; }
.cta h2 { font-size: var(--text-cta); max-width: 1000px; margin: 26px auto 30px; }
.cta p { color: #e8e0d2; font-size: var(--text-lead); line-height: 1.7; max-width: 640px; margin: 0 auto 48px; }
.cta .actions { justify-content: center; }

@media (max-width: 1100px) {
	.text-link { padding-block: 14px; margin-block: -14px; }
}
@media (max-width: 700px) {
	.hero .actions .button, .cta .actions .button { width: 100%; }
	.split { grid-template-columns: minmax(0, 1fr); }
	.split__media { min-height: min(80vw, 480px); }
	.grid-2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.cta h2 { text-wrap: balance; }
	.cta .actions { flex-direction: column; width: 100%; }
}
@media (max-width: 400px) {
	.card__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}