.hero {
	position: relative;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: radial-gradient(ellipse at 65% 45%, #6b0000 0%, #2b0000 55%, #0d0000 100%);
}

.hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero__media--mobile {
	display: none;
}

.hero__photo {
	position: absolute;
	bottom: 0;
	right: 8%;
	height: 92%;
	width: auto;
	z-index: 1;
}

.hero__scrim {
	position: absolute;
	inset: 0;
}

.hero__title {
	position: absolute;
	top: 48px;
	left: 64px;
	z-index: 0;
	margin: 0;
}

.hero__title-top {
	display: block;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(3rem, 9vw, 8rem);
	line-height: 0.85;
	color: var(--color-white);
	transform: scaleX(0.85);
	transform-origin: center;
}

.hero__title-side {
	display: block;
	writing-mode: vertical-lr;
	text-orientation: upright;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(2rem, 5vw, 4.5rem);
	letter-spacing: 6px;
	line-height: 0.85;
	color: var(--color-white);
	transform: scaleX(0.85);
	transform-origin: center;
}

.hero__inner {
	/* No z-index here - title/controls/awards each set their own so
	   they interleave individually with .hero__photo. */
	position: relative;
	height: 100%;
	padding: 48px 358px 64px 64px;
	display: flex;
	flex-direction: column;
}

.hero__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.social-menu--hero.social-menu--compact .social-menu__link {
	width: 32px;
	height: 32px;
}

.social-menu--hero.social-menu--compact .social-menu__link svg {
	width: 32px;
	height: 32px;
}

.hero__awards {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 56px;
	margin: 0;
	padding: 0;
}

.award img {
	width: 148px;
	height: auto;
}

@media (max-width: 1024px) {
	.hero {
		height: 57vh;
		height: 57dvh;
		/* Floors height for short-but-wide phones (e.g. iPhone 6/7/8 Plus)
		   where 57vh isn't enough room for the title/awards stack. */
		min-height: 480px;
		--hero-title-size: clamp(4.5rem, 32vw, 10rem);
	}

	.hero__inner {
		padding: 24px 16px;
	}

	.hero__media--desktop {
		display: none;
	}

	.hero__media--mobile {
		display: block;
	}

	.hero__title {
		top: 15px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.hero__title-top {
		position: relative;
		left: -8px;
		font-size: var(--hero-title-size);
		letter-spacing: 10px;
	}

	.hero__title-side {
		display: block;
		font-size: clamp(2.8rem, 22vw, 7.5rem);
		letter-spacing: -22px;
	}

	.hero__title-side-first {
		display: none;
	}

	.hero__photo {
		left: 50%;
		right: auto;
		bottom: -75px;
		transform: translateX(-50%);
		height: 115%;
	}

	.hero__awards {
		position: absolute;
		/* Tracks the title's real bottom edge, not a fixed % of the hero. */
		top: calc(15px + var(--hero-title-size) * 0.85 + 20px);
		right: 0.75rem;
		z-index: 2;
		flex-direction: column;
		align-items: flex-end;
		gap: 16px;
		margin-top: 0;
	}

	.hero__awards .award img {
		width: 65px;
	}

	.hero__controls {
		position: absolute;
		left: 0.5rem;
		right: 0.5rem;
		bottom: 0.5rem;
		z-index: 2;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
	}

	.hero__controls .social-menu__link {
		width: 38px;
		height: 38px;
	}

	.hero__controls .social-menu__link svg {
		width: 38px;
		height: 38px;
	}

	.hero__controls .btn {
		padding: 6px 12px;
		font-size: 1.2rem;
		margin-left: 4px;
	}
}

@media (min-width: 451px) and (max-width: 1024px) {
	/* "Mobile, but bigger": LAYTON/IVE at one fixed size, no vw/clamp
	   scaling. --hero-title-size (not a direct font-size override) keeps
	   .hero__awards' top calc above in sync with the real size. */
	.hero {
		--hero-title-size: 8rem;
	}

	.hero__title-top {
		letter-spacing: 20px;
	}

	.hero__title-side {
		/* Anchored to the same centre as LAYTON (not the box's left edge)
		   so it tracks the "L" at a constant offset, any width. */
		position: absolute;
		top: 140px;
		left: 50%;
		transform: translateX(-280px);
		writing-mode: vertical-lr;
		text-orientation: upright;
		display: block;
		font-size: 4rem;
		letter-spacing: -10px;
	}

	.hero__awards {
		/* Anchored to centre like LAYTON/IVE, not the right edge - edge
		   and centre drift apart as width changes, so this keeps a
		   constant offset from the title instead. */
		left: 50%;
		right: auto;
		transform: translateX(165px);
	}

	.hero__awards .award img {
		width: 70px;
	}
}

@media (max-width: 385px) {
	.hero {
		--hero-title-size: clamp(3.2rem, 24vw, 7rem);
	}

	.hero__title {
		left: 16px;
		right: auto;
		text-align: left;
	}

	.hero__title-top {
		letter-spacing: 22px;
	}

	.hero__title-side {
		position: relative;
		left: 6px;
		font-size: clamp(2.4rem, 20vw, 6.5rem);
		letter-spacing: -10px;
	}

	.hero__photo {
		height: 105%;
		bottom: -40px;
	}

	.hero__awards .award img {
		width: 42px;
	}

	.hero__awards {
		gap: 12px;
	}

	.hero__controls .social-menu__link {
		width: 30px;
		height: 30px;
	}

	.hero__controls .social-menu__link svg {
		width: 30px;
		height: 30px;
	}

	.hero__controls .btn {
		padding: 5px 10px;
		font-size: 1rem;
	}
}

@media (min-width: 320px) and (max-width: 359px) {
	.hero__title-top {
		letter-spacing: 18px;
	}
}

@media (min-width: 320px) and (max-width: 359px) {
	.hero__title-side {
		line-height: 0.65;
	}
}

@media (min-width: 360px) and (max-width: 390px) {
	.hero__title-side {
		line-height: 0.85;
	}
}

@media (min-width: 385px) and (max-width: 450px) {
	.hero__title-side {
		line-height: 1;
	}
}

@media (min-width: 1025px) {
	.hero {
		/* Full-bleed; background-size:cover keeps the red edge-to-edge,
		   cropping top/bottom instead when the ratio doesn't match. */
		width: 100%;
		height: 100vh;
		height: 100dvh;
		/* Floors height so short windows don't force overlap (content is
		   sized off width, not height). */
		min-height: 1050px;
		--hero-title-size: 13.5rem;
	}

	/* Grid lives on .hero__inner (not .hero) so the background/photo stay
	   full-bleed while content is capped/centred on wide screens.
	   container-type lives here too, so cqw matches this box's capped
	   width instead of .hero's ever-growing viewport width - otherwise
	   past ~1300px cqw kept demanding more pixels than the column
	   actually had room for, squeezing the awards smaller as it grew. */
	.hero__inner {
		/* Left padding (not transform) nudges the grid right - a
		   transform here creates a stacking context that let
		   .hero__photo swallow clicks on the sign-up/social links. */
		padding: 20px 0 0 4rem;
		display: grid;
		grid-template-columns: auto minmax(200px, 1fr);
		grid-template-rows: auto auto;
		row-gap: 2rem;
		column-gap: 0.5rem;
		max-width: 1300px;
		margin-inline: auto;
		container-type: inline-size;
	}

	/* display:contents turns the h1 into a non-box so title-top/side
	   become direct grid items of .hero__inner. */
	.hero__title {
		display: contents;
	}

	.hero__title-side-first {
		display: none;
	}

	.hero__photo {
		left: 50%;
		right: auto;
		top: -3%;
		bottom: auto;
		transform: translateX(-50%);
		height: 160%;
	}

	.hero__title-top {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		align-self: end;
		z-index: 0;
		margin-left: 60px;
		font-size: var(--hero-title-size);
		letter-spacing: 16px;
		white-space: nowrap;
		transform: scaleX(0.95);
	}

	.hero__title-side {
		grid-column: 1;
		grid-row: 2;
		position: relative;
		top: -40px;
		left: -5px;
		z-index: 0;
		margin-left: 40px;
		font-size: 9rem;
		letter-spacing: -30px;
		transform: scaleX(0.95);
	}

	.hero__controls {
		/* align-self:end bottom-aligns this with the "N", based on
		   whatever this grid row's height actually is. */
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: end;
		z-index: 2;
		padding-right: clamp(20px, 5cqw, 100px);
		display: flex;
		flex-direction: column;
		
		gap: 16px;
	}

	.hero__awards {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		z-index: 2;
		padding-right: clamp(20px, 5cqw, 100px);
	}

	.hero__controls .social-menu__link,
	.hero__controls .social-menu__link svg {
		width: clamp(32px, 3.2cqw, 48px);
		height: clamp(32px, 3.2cqw, 48px);
	}

	.hero__controls .btn {
		white-space: nowrap;
		padding: clamp(6px, 0.7cqw, 8px) clamp(20px, 2.8cqw, 36px);
		font-size: clamp(1.05rem, 1.3cqw, 1.5rem);
	}

	.hero__awards .award {
		padding-left: 1rem;
	}

	.hero__awards .award img {
		width: clamp(70px, 9cqw, 150px);
	}
}

@media (min-width: 1025px) and (max-width: 1400px) {
	.hero__photo {
		top: 20%;
		height: 110%;
	}
}

@media (min-width: 1025px) and (max-width: 1599px) {
	/* Below 1600px the title shrinks with the viewport instead of staying
	   fixed; --hero-title-size keeps the awards' gap calc in sync. */
	.hero {
		--hero-title-size: clamp(9rem, 18.23vw, 13.5rem);
	}

	.hero__title-side {
		font-size: clamp(6rem, 13.1vw, 9.7rem);
	}
}

@media (min-width: 1025px) and (max-width: 1369px) {
	.hero__awards {
		gap: 32px;
	}

	.hero__awards .award img {
		width: clamp(60px, 8cqw, 90px);
	}
}