/* ============ HERO ============ */
.hero {
	position: relative;
	background: var(--paper);
	/* No horizontal padding: the grid below carries .wrap, so the hero shares one
	   left edge with the header, the info card and every section. It used to run
	   in a 1480px container of its own, 112px wider than the rest of the page. */
	padding: clamp(14px, 2vw, 32px) 0 clamp(28px, 4vw, 56px);
}
.hero-grid {
	display: grid;
	grid-template-columns:
		clamp(220px, 19vw, 300px)
		minmax(0, 1fr)
		clamp(220px, 19vw, 300px);
	gap: clamp(10px, 1.2vw, 20px);
	height: clamp(560px, 72vh, 760px);
}
/* Accordion hover — DESKTOP ONLY (real pointer + wide viewport).
   Cards are the 1st and 3rd grid children — :first-child / :last-child are
   unambiguous (nth-of-type would miscount, since the centre panel is a <div>).
   Excluded on tablet/mobile: no hover there, and the grid relayouts < 1180px. */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
	.hero-grid { transition: grid-template-columns 500ms cubic-bezier(0.22, 1, 0.36, 1); }
	.hero-grid:has(.hero-side-card:first-child:hover) {
		grid-template-columns:
			clamp(300px, 30vw, 460px)
			minmax(0, 1fr)
			clamp(170px, 14vw, 230px);
	}
	.hero-grid:has(.hero-side-card:last-child:hover) {
		grid-template-columns:
			clamp(170px, 14vw, 230px)
			minmax(0, 1fr)
			clamp(300px, 30vw, 460px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-grid { transition: none; }
}

.hero-side-card {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #1a1c1a;
	color: #fff;
	display: flex; flex-direction: column;
	text-decoration: none;
	height: 100%;
	min-width: 0;
	min-height: 0;
}
.hero-side-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.hero-side-card:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
	.hero-side-card img { transition: none; }
	.hero-side-card:hover img { transform: none; }
}
.hero-side-card::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78) 100%);
}
.hero-side-card .card-content {
	position: relative; z-index: 2;
	margin-top: auto;
	padding: 28px 26px;
}
.hero-side-card .tag {
	display: inline-block;
	font-family: var(--font-eyebrow);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
	color: #e7c98a;
	margin-bottom: 14px;
	padding: 5px 12px;
	border: 1px solid rgba(231,201,138,0.55);
	border-radius: 999px;
	background: rgba(0,0,0,0.25);
	backdrop-filter: blur(4px);
}
.hero-side-card h3 {
	font-family: var(--font-display);
	font-size: clamp(26px, 2.4vw, 40px);
	line-height: 1;
	margin: 0 0 10px;
	font-weight: 500;
}
.hero-side-card p {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255,255,255,0.82);
	margin: 0;
	/* leave room for the corner-arrow (40px + 24px offset) */
	padding-right: 56px;
}
.hero-side-card .corner-num {
	position: absolute; top: 22px; left: 24px; z-index: 2;
	font-family: var(--font-display);
	font-style: italic; font-size: 14px;
	color: rgba(255,255,255,0.7);
}
.hero-side-card .corner-arrow {
	position: absolute; bottom: 26px; right: 24px; z-index: 2;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	display: grid; place-items: center;
	backdrop-filter: blur(6px);
	transition: all 250ms;
	color: #fff;
}
.hero-side-card:hover .corner-arrow {
	background: #e7c98a; color: var(--brand-ink); border-color: #e7c98a;
	transform: translateX(2px);
}

.hero-main {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: var(--brand-ink);
	color: #fff;
	display: flex; flex-direction: column;
	height: 100%;
	min-height: 0;
	min-width: 0;
}
.hero-main-bg {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.6) saturate(0.95);
}
.hero-main::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--brand-ink) 55%, transparent) 0%,
		color-mix(in srgb, var(--brand-ink) 20%, transparent) 30%,
		color-mix(in srgb, var(--brand-ink) 92%, transparent) 100%);
}
.hero-main-content {
	position: relative; z-index: 2;
	padding: clamp(28px, 3vw, 48px) clamp(28px, 3.5vw, 56px) calc(clamp(20px, 2.5vw, 36px) + 64px);
	display: flex; flex-direction: column;
	flex: 1; min-height: 0;
}
.hero-tag-top {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-eyebrow);
	font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
	color: rgba(255,255,255,0.85); font-weight: 600;
}
.hero-tag-top .star { color: #e7c98a; font-size: 14px; }
.hero-mid {
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	padding: clamp(16px, 2vw, 32px) 0;
	min-height: 0;
}
.hero-mid-inner { max-width: 760px; width: 100%; }
.hero-mid .eyebrow-label {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-display); font-style: italic;
	font-size: clamp(15px, 1.3vw, 19px);
	color: #e7c98a;
	margin-bottom: clamp(12px, 1.5vw, 22px);
}
.hero-mid .eyebrow-label::before,
.hero-mid .eyebrow-label::after {
	content: ''; width: 28px; height: 1px; background: rgba(231,201,138,0.6);
}
/* Sized for the centre panel (~700px at 1440), not the viewport: at 6.2vw the
   headline rendered at 89px and broke into a ragged third line. The triptych's
   middle column is only half the hero's width. */
.hero h1 {
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 76px);
	line-height: 0.96;
	margin: 0 0 clamp(16px, 1.8vw, 24px);
	color: #fff;
	font-weight: 400;
	letter-spacing: -0.018em;
	text-wrap: balance;
}
.hero h1 em { font-style: italic; color: #e7c98a; font-weight: 400; }
.hero-sub {
	font-size: clamp(14px, 1.1vw, 17px);
	color: rgba(255,255,255,0.78);
	max-width: 480px;
	margin: 0 auto clamp(20px, 2.2vw, 32px);
	line-height: 1.6;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1180px) {
	.hero-side-card .card-content { padding: 22px; }
}

@media (max-width: 920px) {
	.hero-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 220px;
		height: auto;
		gap: 10px;
	}
	.hero-main { grid-column: 1 / -1; grid-row: 1; min-height: clamp(440px, 60vh, 540px); }
	.hero-main-content { padding: 36px 28px 24px; }
	.hero-side-card { min-height: 220px; }
	.hero-side-card h3 { font-size: clamp(22px, 4.5vw, 30px); }
	.hero-side-card p { font-size: 12px; max-width: none; }
	.hero-side-card .card-content { padding: 18px 20px; }
	.hero-main-content { padding-bottom: 28px; }
}

@media (max-width: 600px) {
	.hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
	.hero-main { min-height: clamp(420px, 65vh, 520px); }
	.hero-main-content { padding: 28px 22px 20px; }
	.hero-mid { padding-top: 44px; }
	.hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
	.hero-ctas .btn { justify-content: center; }
	.hero-ctas .btn-outline-light {
		background: rgba(255,255,255,0.08);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	.hero-side-card { min-height: 200px; }
	.hero-tag-top { font-size: 10px; letter-spacing: 0.18em; flex-wrap: wrap; }
	.hero h1 { font-size: 42px; }
}