/* ── JPS Hero Block ─────────────────────────────────────────────────────────── */

:root {
	--near-black:  #0B0B0F;
	--primary:     #0A4DA2;
	--accent:      #1E6FD9;
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.hero-block {
	position:       relative;
	min-height:     100vh; /* min-h-screen — source uses no addition */
	display:        flex;
	align-items:    flex-end;
	overflow:       hidden;
	background:     var(--near-black);
	color:          #fff;

	/* Pull up under sticky header (matches -mt-28 lg:-mt-32) */
	margin-top:     -7rem;
	padding-top:    7rem;
	padding-bottom: 0;
}

@media (min-width: 1024px) {
	.hero-block {
		margin-top:     -8rem;
		padding-top:    8rem;
	}
}

/* ── Media wrapper (fills section absolutely) ─────────────────────────────── */

.hero-block__media-wrapper {
	position: absolute;
	inset:    0;
}

/* ── Media (110% height for parallax headroom) ───────────────────────────── */

.hero-block__media {
	position: absolute;
	inset:    0;
	height:   110%;
}

.hero-block__poster,
.hero-block__video {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Poster always visible; video fades in on top once loaded */
.hero-block__poster {
	z-index: 1;
}

.hero-block__video {
	z-index:  2;
	opacity:  0;
	transition: opacity 0.8s ease;
}

.hero-block__video.is-loaded {
	opacity: 1;
}

/* ── Gradient overlays ────────────────────────────────────────────────────── */

.hero-block__overlay-vertical,
.hero-block__overlay-horizontal {
	position: absolute;
	inset:    0;
	z-index:  3;
}

/* Top→bottom: from-near-black/60 via-near-black/45 50% to-near-black/95 */
.hero-block__overlay-vertical {
	background: linear-gradient(
		to bottom,
		rgba(11, 11, 15, 0.60),
		rgba(11, 11, 15, 0.45) 50%,
		rgba(11, 11, 15, 0.95)
	);
}

/* Left→right: from-near-black/70 to transparent 50% */
.hero-block__overlay-horizontal {
	background: linear-gradient(
		to right,
		rgba(11, 11, 15, 0.70),
		transparent 50%,
		transparent
	);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

/* padding-bottom on content wrapper, not section — matches source pb-20 lg:pb-32 pattern */
.hero-block__content {
	position:       relative;
	z-index:        4;
	width:          100%;
	padding-bottom: 5rem; /* pb-20 = 80px mobile */
}

@media (min-width: 1024px) {
	.hero-block__content {
		padding-bottom: 8rem; /* lg:pb-32 = 128px */
	}
}

.hero-block__inner {
	max-width: 1024px; /* max-w-5xl */
}

/* ── Container (container-jps) ───────────────────────────────────────────── */

.container-jps {
	margin-inline: auto;
	max-width:     1400px;
	padding-inline: 1.5rem;
}

@media (min-width: 768px) {
	.container-jps {
		padding-inline: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.container-jps {
		padding-inline: 3.5rem;
	}
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.eyebrow-light {
	font-family:    var(--font-display);
	font-size:      0.75rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color:          rgba(255, 255, 255, 0.70);
	margin:         0;
}

/* ── Headline ────────────────────────────────────────────────────────────── */

.display-hero {
	font-family:    var(--font-display);
	font-weight:    800;
	font-size:      clamp(2.75rem, 8vw, 7.5rem);
	line-height:    0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin:         1.5rem 0 0;
}

/* ── Body text ───────────────────────────────────────────────────────────── */

.hero-block__body {
	max-width:   60ch;
	margin-top:  1.5rem;
	font-family: var(--font-body);
	font-size:   1.125rem;
	line-height: 1.65;
	color:       rgba(255, 255, 255, 0.85);
}

/* ── CTAs ────────────────────────────────────────────────────────────────── */

.hero-block__ctas {
	display:     flex;
	flex-wrap:   wrap;
	gap:         1rem;
	margin-top:  2.5rem;
	align-items: center;
}

.hero-block__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5rem;
	height:          3.5rem; /* h-14 */
	padding-inline:  2rem;   /* px-8 */
	border-radius:   0.125rem; /* rounded-sm */
	font-family:     var(--font-display);
	font-size:       0.8125rem;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.16em;
	text-decoration: none;
	transition:      background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space:     nowrap;
}

/* Primary: solid blue */
.hero-block__cta--primary {
	background: var(--primary);
	color:      #fff;
	border:     2px solid var(--primary);
}

.hero-block__cta--primary:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.hero-block__cta-arrow {
	width:      18px;
	height:     18px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.hero-block__cta--primary:hover .hero-block__cta-arrow {
	transform: translateX(3px);
}

/* Outline: border-white text-white, hover bg-white text-near-black */
.hero-block__cta--outline {
	background:   transparent;
	color:        #fff;
	border:       2px solid rgba(255, 255, 255, 0.80);
}

.hero-block__cta--outline:hover {
	background:   #fff;
	color:        var(--near-black);
	border-color: #fff;
}

/* ── Scroll cue ──────────────────────────────────────────────────────────── */

.hero-block__scroll-cue {
	position:        absolute;
	bottom:          2rem;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         4;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.375rem;
	color:           rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition:      color 0.2s ease;
}

.hero-block__scroll-cue:hover {
	color: rgba(255, 255, 255, 0.9);
}

.hero-block__scroll-label {
	font-family:    var(--font-display);
	font-size:      0.625rem;
	font-weight:    600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero-block__scroll-icon {
	width:  20px;
	height: 20px;
}

/* ── Keyframe animations ─────────────────────────────────────────────────── */

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fade-up {
	from {
		opacity:   0;
		transform: translateY(24px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

@keyframes scroll-hint {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

.animate-fade-in {
	animation: fade-in 0.6s ease-out both;
}

.animate-fade-up {
	animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.animate-scroll-hint {
	animation: scroll-hint 2s ease-in-out infinite;
}