@charset "utf-8";

/* Homepage hero redesign. Every rule is homepage-scoped and this file loads after mobile.css. */
.home-header:not(.nav-sticky) .site-logo {
	background-image: url("../img/sga-logo-red-black.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.home-header:not(.nav-sticky) .site-logo img {
	opacity: 0;
}

.home-header.nav-sticky .site-logo {
	background-image: none;
}

.home-header.nav-sticky .site-logo img {
	opacity: 1;
}

.sga-home-hero-v2 {
	background-color: #f8f8f7;
	background-image: url("../img/home-hero-v2.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	box-shadow: 0 6px 20px rgba(20, 24, 28, 0.08);
	height: auto;
	margin-top: 112px;
	min-height: 780px;
	overflow: hidden;
	padding: 0;
	position: relative;
}

.sga-home-hero-v2__shade {
	background: linear-gradient(90deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.72) 43%, rgba(255,255,255,0.08) 64%, rgba(255,255,255,0) 100%);
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.sga-home-hero-v2__inner {
	display: flex;
	min-height: 780px;
	position: relative;
	z-index: 1;
}

.sga-home-hero-v2__copy {
	align-self: center;
	box-sizing: border-box;
	max-width: 760px;
	padding: 58px 28px 45px max(5.2vw, 54px);
	width: 48%;
}

.sga-home-hero-v2__eyebrow {
	color: #ed1c24;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 8px;
	margin: 0 0 24px;
	padding-top: 25px;
	position: relative;
	text-transform: uppercase;
}

.sga-home-hero-v2__eyebrow::before {
	background: #ed1c24;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 78px;
}

.sga-home-hero-v2 h1 {
	color: #252a2e;
	font-family: Lato, Arial, sans-serif;
	font-size: clamp(68px, 6vw, 108px);
	font-weight: 900;
	letter-spacing: -4px;
	line-height: 0.88;
	margin: 0 0 28px;
}

.sga-home-hero-v2 h1 span {
	color: #ed1c24;
	display: block;
	font-family: Satisfy, cursive;
	font-size: 0.92em;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.15;
	margin-top: 8px;
	transform: rotate(-2deg);
	transform-origin: left center;
}

.sga-home-hero-v2__intro {
	color: #373b3f;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0 0 34px;
	max-width: 560px;
}

.sga-home-hero-v2__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 40px;
}

.sga-home-hero-v2__button {
	align-items: center;
	border: 2px solid #ed1c24;
	border-radius: 10px;
	display: inline-flex;
	font-size: 16px;
	font-weight: 900;
	justify-content: center;
	letter-spacing: 0.2px;
	min-height: 58px;
	min-width: 190px;
	padding: 12px 26px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sga-home-hero-v2__button:hover,
.sga-home-hero-v2__button:focus {
	text-decoration: none;
	transform: translateY(-2px);
}

.sga-home-hero-v2__button--primary {
	background: #ed1c24;
	color: #fff;
}

.sga-home-hero-v2__button--primary:hover,
.sga-home-hero-v2__button--primary:focus {
	background: #c80d15;
	border-color: #c80d15;
	color: #fff;
}

.sga-home-hero-v2__button--secondary {
	background: rgba(255,255,255,0.78);
	color: #ed1c24;
}

.sga-home-hero-v2__button--secondary:hover,
.sga-home-hero-v2__button--secondary:focus {
	background: #ed1c24;
	color: #fff;
}

.sga-home-hero-v2__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 650px;
}

.sga-home-hero-v2__feature {
	align-items: center;
	border-right: 1px solid rgba(37,42,46,0.24);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 22px;
	text-align: center;
}

.sga-home-hero-v2__feature:first-child { padding-left: 0; }
.sga-home-hero-v2__feature:last-child { border-right: 0; padding-right: 0; }
.sga-home-hero-v2__feature i { color: #ed1c24; font-size: 34px; margin-bottom: 13px; }
.sga-home-hero-v2__feature strong { color: #252a2e; font-size: 15px; margin-bottom: 5px; }
.sga-home-hero-v2__feature span { color: #555b60; font-size: 12px; line-height: 1.4; }

@media screen and (min-width: 992px) {
	.home-header {
		background: #fff;
		box-shadow: 0 3px 15px rgba(20,24,28,0.12);
		height: 112px;
	}
	.home-header .header-bottom { padding: 16px 64px 0; }
	.home-header .site-logo img { bottom: 5px; width: 210px; }
	.home-header .main-menu { padding-top: 30px; }
	.home-header .main-menu li > a { color: #252a2e; }
	.home-header .main-menu li > a.active,
	.home-header .main-menu li > a:hover { color: #ed1c24; }
	.home-header .header-top {
		display: block;
		position: absolute;
		right: 56px;
		top: 26px;
		width: auto;
		z-index: 4;
	}
	.home-header #account-icons { width: auto; }
	.home-header #accountUnloggedBtn {
		background: #ed1c24;
		border-radius: 30px;
		color: #fff;
		cursor: pointer;
		min-width: 140px;
		padding: 11px 22px;
		text-align: center;
	}
	.home-header #accountUnloggedBtn > span > a { color: #fff; font-size: 16px; font-weight: 800; }
	.home-header #accountUnloggedBtn > i { color: #fff; margin-left: 7px; }
	.home-header .hb-right .pp-btn { display: none; }
}

@media screen and (max-width: 1300px) {
	.sga-home-hero-v2__copy { width: 52%; }
	.sga-home-hero-v2 h1 { font-size: 70px; }
	.sga-home-hero-v2__intro { font-size: 18px; max-width: 500px; }
}

@media screen and (max-width: 1100px) and (min-width: 992px) {
	.home-header .header-bottom { padding-left: 28px; padding-right: 28px; }
	.home-header .site-logo img { width: 165px; }
	.home-header .main-menu { margin-left: 120px; }
	.home-header .main-menu li { margin-right: 10px; }
	.home-header .main-menu li > a { font-size: 14px; }
	.home-header .header-top { right: 24px; }
	.home-header #accountUnloggedBtn { min-width: 112px; padding: 10px 15px; }
}

@media screen and (max-width: 991px) {
	.sga-home-hero-v2 {
		background-image: url("../img/home-hero-v2.png");
		background-position: 52% center;
		background-repeat: no-repeat;
		background-size: auto 100%;
		margin-top: 92px;
		min-height: 900px;
		padding: 0;
	}
	.sga-home-hero-v2__shade {
		background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0.68) 72%, rgba(255,255,255,0.28) 100%);
		bottom: 0;
		height: auto;
		top: 0;
	}
	.sga-home-hero-v2__inner { display: flex; min-height: 900px; }
	.sga-home-hero-v2__copy {
		align-self: center;
		max-width: 720px;
		padding: 48px 34px 42px;
		width: 100%;
	}
	.sga-home-hero-v2 h1 { font-size: clamp(58px, 10vw, 82px); }
	.sga-home-hero-v2__intro { max-width: 610px; }
}

@media screen and (max-width: 700px) {
	.sga-home-hero-v2 { background-position: 51% center; min-height: 920px; }
	.sga-home-hero-v2__shade { background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.84) 58%, rgba(255,255,255,0.45) 100%); }
	.sga-home-hero-v2__inner { min-height: 920px; }
	.sga-home-hero-v2__copy { padding: 42px 22px 36px; }
	.sga-home-hero-v2__eyebrow { font-size: 14px; letter-spacing: 6px; margin-bottom: 18px; }
	.sga-home-hero-v2 h1 { font-size: clamp(48px, 15vw, 68px); letter-spacing: -2px; margin-bottom: 22px; }
	.sga-home-hero-v2__intro { font-size: 16px; line-height: 1.45; margin-bottom: 25px; }
	.sga-home-hero-v2__actions { gap: 10px; margin-bottom: 30px; }
	.sga-home-hero-v2__button { flex: 1 1 150px; font-size: 13px; min-height: 50px; min-width: 0; padding: 10px 15px; }
	.sga-home-hero-v2__feature { padding: 0 8px; }
	.sga-home-hero-v2__feature i { font-size: 27px; margin-bottom: 8px; }
	.sga-home-hero-v2__feature strong { font-size: 12px; }
	.sga-home-hero-v2__feature span { font-size: 10px; }
}

@media screen and (max-width: 420px) {
	.sga-home-hero-v2 { background-position: 50% center; min-height: 900px; }
	.sga-home-hero-v2__inner { min-height: 900px; }
	.sga-home-hero-v2__copy { padding: 38px 17px 32px; }
	.sga-home-hero-v2__eyebrow { padding-top: 18px; }
	.sga-home-hero-v2 h1 { font-size: 50px; }
	.sga-home-hero-v2__actions { flex-wrap: nowrap; }
	.sga-home-hero-v2__button { font-size: 11px; }
}