/* Home hero v2 — "Human-First Editorial". Build sheet: full width, viewport minus header, cap 900 / min 620,
   tablet 680, mobile 620; 7s slides, 900ms crossfade, Ken Burns 100->104%; navy wash ~24%, panel ~86%. */
.zf-hero2 {
	--navy: #0c2545;
	--accent: #5bc0eb;
	position: relative;
	height: clamp(620px, calc(100vh - 90px), 900px);
	overflow: hidden;
	background: var(--navy);
	color: #fff;
}
@supports (height: 100svh) { .zf-hero2 { height: clamp(620px, calc(100svh - 90px), 900px); } }
.zf-hero2__track { position: absolute; inset: 0; }
.zf-hero2__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease-in-out, visibility 0s linear .9s; }
.zf-hero2__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease-in-out, visibility 0s; z-index: 2; }

.zf-hero2__media { position: absolute; inset: 0; overflow: hidden; }
.zf-hero2__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: var(--pos, 50% 50%);
	transform: scale(1); transform-origin: var(--pos, 50% 50%); will-change: transform;
	transition: transform 0s linear .9s; /* reset only after the slide has faded out */
}
.zf-hero2__slide.is-active .zf-hero2__media img { transform: scale(1.04); transition: transform 7.9s linear; }
.zf-hero2__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 37, 69, .24); }

.zf-hero2__panel {
	position: absolute; top: 0; bottom: 0; left: 0; width: 46%; min-width: 440px;
	background: rgba(12, 37, 69, .86);
	display: flex; align-items: center;
}
.zf-hero2__content { width: 100%; padding: 0 7% 64px max(48px, calc((100vw - 1320px) / 2 + 48px)); box-sizing: border-box; }
.zf-hero2__eyebrow, .zf-hero2__text, .zf-hero2__cta, .zf-hero2__dot-num { font-family: 'Open Sans', sans-serif; }
.zf-hero2__eyebrow { margin: 0 0 28px; font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.zf-hero2__title {
	margin: 0 0 24px; font-family: 'Antic Didone', serif; font-weight: 400; color: #fff;
	font-size: clamp(42px, 4.3vw, 66px); line-height: 1.08; letter-spacing: .01em; width: auto !important;
}
.zf-hero2__text { margin: 0 0 36px; max-width: 30em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; font-weight: 400; color: rgba(255, 255, 255, .9); }
.zf-hero2__cta {
	display: inline-block; padding: 15px 30px; border: 1px solid rgba(255, 255, 255, .85); color: #fff !important;
	font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none !important;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.zf-hero2__cta:hover, .zf-hero2__cta:focus-visible { background: #fff; color: var(--navy) !important; border-color: #fff; outline: none; }

/* text entrance */
.zf-hero2__eyebrow, .zf-hero2__title, .zf-hero2__text, .zf-hero2__cta { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.zf-hero2__slide.is-active .zf-hero2__eyebrow { opacity: 1; transform: none; transition-delay: .25s; }
.zf-hero2__slide.is-active .zf-hero2__title { opacity: 1; transform: none; transition-delay: .35s; }
.zf-hero2__slide.is-active .zf-hero2__text { opacity: 1; transform: none; transition-delay: .45s; }
.zf-hero2__slide.is-active .zf-hero2__cta { opacity: 1; transform: none; transition-delay: .55s; }

/* slide selector */
.zf-hero2__nav {
	position: absolute; z-index: 5; bottom: 92px; left: max(48px, calc((100vw - 1320px) / 2 + 48px));
	display: flex; gap: 18px;
}
.zf-hero2__dot { display: flex; flex-direction: column; gap: 8px; width: 56px; padding: 6px 0; margin: 0; border: 0; background: none; cursor: pointer; color: rgba(255, 255, 255, .55); text-align: left; }
.zf-hero2__dot-num { font-size: 11px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.zf-hero2__dot-bar { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.zf-hero2__dot-bar span { position: absolute; inset: 0; width: 0; background: var(--accent); }
.zf-hero2__dot.is-active, .zf-hero2__dot:hover { color: #fff; }
.zf-hero2__dot.is-active .zf-hero2__dot-bar span { width: 100%; transition: width var(--dur, 7s) linear; }
.zf-hero2.is-paused .zf-hero2__dot.is-active .zf-hero2__dot-bar span { width: 100%; transition: none; }
.zf-hero2__dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.zf-hero2__strip { position: absolute; z-index: 4; left: 50%; bottom: -3px; transform: translateX(-50%); line-height: 0; pointer-events: none; }
.zf-hero2__strip img { display: block; max-width: none; width: auto; height: min(81px, 6.75vw); }

/* tablet + mobile: photo carries the frame, a bottom navy gradient carries the copy (no panel over faces) */
@media (max-width: 1024px) {
	.zf-hero2 { height: 680px; }
	.zf-hero2__media img { object-position: var(--mpos, 50% 30%); transform-origin: var(--mpos, 50% 30%); }
	.zf-hero2__media::after { background: linear-gradient(to bottom, rgba(12, 37, 69, .12) 0%, rgba(12, 37, 69, .25) 35%, rgba(12, 37, 69, .9) 66%, rgba(12, 37, 69, .97) 100%); }
	.zf-hero2__panel { width: 100%; min-width: 0; background: none; align-items: flex-end; }
	.zf-hero2__content { padding: 0 40px 120px; }
	.zf-hero2__title { font-size: 46px; margin-bottom: 16px; }
	.zf-hero2__text { margin-bottom: 26px; }
	.zf-hero2__nav { left: 40px; bottom: 66px; }
}
@media (max-width: 767px) {
	.zf-hero2 { height: 620px; }
	.zf-hero2__media::after { background: linear-gradient(to bottom, rgba(12, 37, 69, .12) 0%, rgba(12, 37, 69, .25) 30%, rgba(12, 37, 69, .92) 62%, rgba(12, 37, 69, .97) 100%); }
	.zf-hero2__content { padding: 0 24px 104px; }
	.zf-hero2__eyebrow { margin-bottom: 14px; font-size: 11px; }
	.zf-hero2__title { font-size: 36px; margin-bottom: 14px; }
	.zf-hero2__text { font-size: 16px; margin-bottom: 22px; }
	.zf-hero2__cta { padding: 13px 22px; font-size: 12px; }
	.zf-hero2__nav { left: 24px; bottom: 56px; gap: 12px; }
	.zf-hero2__dot { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.zf-hero2__slide, .zf-hero2__slide.is-active, .zf-hero2__eyebrow, .zf-hero2__title, .zf-hero2__text, .zf-hero2__cta { transition: none !important; }
	.zf-hero2__slide.is-active .zf-hero2__media img { transform: none; transition: none; }
}