/* Hero — fixed to the background image's own natural height (not 100vh, not aspect-ratio) so
   there's always enough room for the intro text + quick links, on every screen width */
.home .section-hero {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	height: 904px;
}

.home .section-hero .slider {position: absolute; inset: 0; z-index: 0;}
.home .section-hero .slider .slide {position: absolute; inset: 0; background-size: cover; background-position: center;}
.home .section-hero .slider:not(.slick-initialized) .slide + .slide {display: none;}

.home .section-hero .content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; gap: 1.5rem;
	padding: calc(var(--layout-header-height-mobile) + 1.5rem) 1.25rem 2rem;
}

.home .section-hero .intro {display: flex; flex-direction: column; align-items: flex-start; text-align: right;}
.home .section-hero .intro h1 {line-height: 1.25; font-size: 1.7rem; font-weight: 700; color: #fff;}
.home .section-hero .intro .tagline {
	margin-top: .6rem; font-family: var(--font-decorative-he); font-size: 1.4rem; color: var(--color-accent);
}
.home .section-hero .intro p {margin-top: 1.25rem; max-width: 26rem; line-height: 1.7; font-size: .85rem; color: rgba(255,255,255,.85);}

/* CTA — gradient border via mask trick (diagonal, fading to transparent at both ends) */
.home .section-hero .intro .cta {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	margin-top: 1.5rem; height: 3rem; padding: 0 2rem; border-radius: .6rem;
	background-color: rgba(255,255,255,.06); font-size: .85rem; font-weight: 600; color: #fff;
	transition: background-color .2s ease;
}
.home .section-hero .intro .cta:hover {background-color: rgba(255,255,255,.14);}
.home .section-hero .intro .cta:before {
	content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(120deg, var(--color-accent) 50%, transparent);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; -webkit-mask-composite: xor; pointer-events: none;
}

/* Quick links — duplicate the Essential Stops teasers further down the page */
.home .section-hero .quickLinks {display: flex; flex-direction: column; gap: .75rem;}
.home .section-hero .quickLink {
	position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: .75rem;
	background-color: #ffffff26; transition: background-color .2s ease;
}
.home .section-hero .quickLink:hover {background-color: #ffffff34;}

/* Active state — gradient border via mask trick, angled the opposite way from the CTA's */
.home .section-hero .quickLink.active:before {
	content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(-60deg, var(--color-accent) 50%, transparent);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; -webkit-mask-composite: xor; pointer-events: none;
}

.home .section-hero .quickLink .icon {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;}
.home .section-hero .quickLink .icon img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;}
.home .section-hero .quickLink .text {flex-grow: 1; display: flex; flex-direction: column; gap: .3rem; text-align: right;}
.home .section-hero .quickLink .text b {font-size: .95rem; font-weight: 700; color: #fff;}
.home .section-hero .quickLink .text span {font-size: .78rem; line-height: 1.4; color: rgba(255,255,255,.65);}
.home .section-hero .quickLink .arrow {
	display: flex; flex-shrink: 0; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-accent); color: var(--color-accent); font-size: .8rem;
}

.home .section-hero .signature {display: none;}

@media screen and (min-width: 40em) {
	.home .section-hero .content {
		flex-direction: row; align-items: flex-end; gap: 3rem;
		padding: calc(var(--layout-header-height) + 2rem) 3rem 4rem;
	}

	.home .section-hero .intro {flex: 1; max-width: 34rem;}
	.home .section-hero .intro h1 {font-size: 2.75rem;}
	.home .section-hero .intro .tagline {font-size: 1.85rem;}
	.home .section-hero .intro p {font-size: .95rem;}

	.home .section-hero .quickLinks {gap: 1.25rem; width: 26rem; flex-shrink: 0;}
	.home .section-hero .quickLink {gap: 1.25rem; padding: 2rem; border-radius: .85rem;}

	.home .section-hero .quickLink .icon {width: 3rem; height: 3rem;}
	.home .section-hero .quickLink .text {gap: .4rem;}
	.home .section-hero .quickLink .text b {font-size: 1.1rem;}
	.home .section-hero .quickLink .text span {font-size: .85rem; line-height: 1.45;}
	.home .section-hero .quickLink .arrow {font-size: .9rem;}

	.home .section-hero .signature {
		display: block; flex-shrink: 0; align-self: flex-end; width: 6rem; height: auto;
		margin: 0 auto 0 100px; transform: translateY(100%);
	}
}