/*
Theme Name: Paul's Auto Service
Description: Paul's Auto Vehicle Transport.
Version: 1.0
*/


/* =========================================================
   VARIABLES
========================================================= */

:root {
	--black: #000000;
	--white: #ffffff;
	--white-soft: #d4d4d4;
	--white-muted: #969696;

	--chrome: #bfc1c3;
	--chrome-light: #e5e6e7;
	--chrome-dark: #77797c;

	--border: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;

	background: #000000;
	color: #ffffff;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	font-size: 16px;
	line-height: 1.6;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.screen-reader-text {
	position: absolute !important;

	width: 1px;
	height: 1px;

	padding: 0;
	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);

	white-space: nowrap;

	border: 0;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
	position: relative;
	z-index: 1000;

	width: 100%;

	background: #000000;

	border-bottom: 1px solid var(--border);
}

.site-header::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: -1px;
	left: 0;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.08) 20%,
			rgba(255, 255, 255, 0.45) 50%,
			rgba(255, 255, 255, 0.08) 80%,
			transparent 100%
		);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;

	min-height: 132px;

	padding:
		12px
		clamp(32px, 4vw, 72px);

	gap: 48px;
}

.site-header__brand {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 150px;

	overflow: visible;
}

.site-header__logo {
	display: block;

	width: 138px;
	height: auto;

	object-fit: contain;

	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.site-header__brand:hover .site-header__logo {
	opacity: 0.9;
	transform: scale(1.02);
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	flex: 1;

	gap: 38px;
}

.site-navigation__menu {
	display: flex;
	align-items: center;

	gap: clamp(22px, 2vw, 38px);

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-navigation__menu li {
	margin: 0;
	padding: 0;
}

.site-navigation__menu a {
	position: relative;

	display: inline-flex;
	align-items: center;

	padding: 10px 0;

	color: #cfcfcf;

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	white-space: nowrap;

	transition:
		color 180ms ease,
		transform 180ms ease;
}

.site-navigation__menu a::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: 0;
	left: 0;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);

	transform: scaleX(0);

	transform-origin: left center;

	transition: transform 180ms ease;
}

.site-navigation__menu a:hover {
	color: #ffffff;
	transform: translateY(-1px);
}

.site-navigation__menu a:hover::after {
	transform: scaleX(1);
}


/* =========================================================
   HEADER CTA
========================================================= */

.site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	min-height: 52px;

	padding: 0 24px;

	gap: 14px;

	border: 1px solid #6f7174;

	background:
		linear-gradient(
			135deg,
			#141414 0%,
			#050505 60%,
			#000000 100%
		);

	color: #ffffff;

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.site-header__cta span {
	color: var(--chrome);

	font-size: 17px;

	transition:
		transform 180ms ease,
		color 180ms ease;
}

.site-header__cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

.site-header__cta:hover span {
	color: #000000;
	transform: translateX(4px);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.site-header__toggle {
	display: none;

	position: relative;

	width: 50px;
	height: 50px;

	flex: 0 0 50px;

	padding: 0;

	border: 1px solid #585a5d;

	background:
		linear-gradient(
			135deg,
			#141414,
			#000000
		);
}

.site-header__toggle-line {
	position: absolute;

	left: 13px;

	display: block;

	width: 22px;
	height: 1px;

	background: #ffffff;

	transition:
		top 180ms ease,
		transform 180ms ease,
		opacity 180ms ease;
}

.site-header__toggle-line:nth-of-type(2) {
	top: 17px;
}

.site-header__toggle-line:nth-of-type(3) {
	top: 24px;
}

.site-header__toggle-line:nth-of-type(4) {
	top: 31px;
}

.site-header__toggle[aria-expanded="true"]
.site-header__toggle-line:nth-of-type(2) {
	top: 24px;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"]
.site-header__toggle-line:nth-of-type(3) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"]
.site-header__toggle-line:nth-of-type(4) {
	top: 24px;
	transform: rotate(-45deg);
}


/* =========================================================
   HERO
========================================================= */

.hero {
	position: relative;

	min-height: calc(100vh - 132px);

	display: flex;
	align-items: center;

	overflow: hidden;

	background: #000000;
}

.hero__background {
	position: absolute;
	inset: 0;

	z-index: 0;
}

.hero__background img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: 72% center;

	transform: scale(1.03);
}

.hero__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			#000000 0%,
			#000000 17%,
			rgba(0, 0, 0, 0.99) 30%,
			rgba(0, 0, 0, 0.94) 43%,
			rgba(0, 0, 0, 0.76) 56%,
			rgba(0, 0, 0, 0.42) 70%,
			rgba(0, 0, 0, 0.12) 86%,
			rgba(0, 0, 0, 0) 100%
		);
}

.hero__chrome-line {
	position: absolute;

	z-index: 2;

	width: 520px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.65),
			transparent
		);

	opacity: 0.4;
}

.hero__chrome-line--top {
	top: 21%;
	left: -90px;

	transform: rotate(-5deg);
}

.hero__chrome-line--bottom {
	bottom: 24%;
	left: -130px;

	transform: rotate(5deg);
}

.hero__container {
	position: relative;

	z-index: 3;

	width: 100%;

	padding:
		100px
		7vw
		120px;
}

.hero__content {
	width: 100%;
	max-width: 680px;
}

.hero__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 28px;

	color: var(--chrome);

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero__eyebrow-line {
	display: block;

	width: 42px;
	height: 1px;

	flex: 0 0 42px;

	background:
		linear-gradient(
			90deg,
			#747679,
			#ffffff
		);
}

.hero h1 {
	max-width: 700px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		64px,
		8vw,
		112px
	);

	font-weight: 700;

	line-height: 0.88;

	letter-spacing: -0.065em;
}

.hero h1 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}

.hero__intro {
	max-width: 520px;

	margin: 38px 0 0;

	color: #d2d2d2;

	font-size: 18px;

	line-height: 1.65;
}

.hero__actions {
	display: flex;
	align-items: center;

	gap: 32px;

	margin-top: 42px;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 54px;

	padding: 0 30px;

	border: 1px solid transparent;

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.button--primary {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;

	transition:
		background 180ms ease,
		border-color 180ms ease;
}

.button--primary:hover {
	background: var(--chrome);
	border-color: var(--chrome);
}

.hero__text-link {
	display: inline-flex;
	align-items: center;

	gap: 12px;

	color: #ffffff;

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	transition: gap 180ms ease;
}

.hero__text-link span {
	color: var(--chrome);

	font-size: 18px;

	transition: transform 180ms ease;
}

.hero__text-link:hover {
	gap: 18px;
}

.hero__text-link:hover span {
	transform: translateX(4px);
}


/* =========================================================
   INTRO SECTION
========================================================= */

.intro-section {
	position: relative;

	padding:
		120px
		0
		125px;

	background: #000000;

	border-top: 1px solid rgba(255, 255, 255, 0.08);

	overflow: hidden;
}

.intro-section__inner {
	display: flex;
	align-items: flex-start;

	width: 100%;

	padding:
		0
		clamp(36px, 7vw, 120px);

	gap: clamp(60px, 8vw, 150px);
}

.intro-section__heading {
	width: 40%;
	flex: 0 0 40%;
}

.intro-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 30px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.intro-section__eyebrow-line {
	width: 44px;
	height: 1px;

	flex: 0 0 44px;

	background:
		linear-gradient(
			90deg,
			#707276,
			#ffffff
		);
}

.intro-section h2 {
	max-width: 640px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		42px,
		4.3vw,
		66px
	);

	font-weight: 700;

	line-height: 0.98;

	letter-spacing: -0.05em;
}

.intro-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}

.intro-section__copy {
	width: 34%;
	flex: 0 0 34%;

	padding-top: 42px;
}

.intro-section__copy p {
	margin: 0 0 24px;

	color: #c7c7c7;

	font-size: 15px;

	line-height: 1.75;
}

.intro-section__copy p:last-child {
	margin-bottom: 0;
}

.intro-section__statement {
	width: 20%;
	flex: 0 0 20%;

	padding-top: 40px;
}

.intro-section__statement-number {
	display: block;

	margin-bottom: 20px;

	color: rgba(255, 255, 255, 0.18);

	font-size: 54px;
	font-weight: 700;

	line-height: 1;
}

.intro-section__statement-line {
	width: 100%;
	height: 1px;

	margin-bottom: 26px;

	background:
		linear-gradient(
			90deg,
			var(--chrome-dark),
			rgba(255, 255, 255, 0.12)
		);
}

.intro-section__statement p {
	max-width: 250px;

	margin: 0;

	color: #ffffff;

	font-size: 21px;
	font-weight: 500;

	line-height: 1.45;

	letter-spacing: -0.02em;
}


/* =========================================================
   TRANSPORT SECTION
========================================================= */

.transport-section {
	position: relative;

	min-height: 760px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}

.transport-section__image {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 72%;

	z-index: 0;
}

.transport-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.transport-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			#000000 0%,
			#000000 22%,
			rgba(0, 0, 0, 0.98) 34%,
			rgba(0, 0, 0, 0.86) 46%,
			rgba(0, 0, 0, 0.52) 62%,
			rgba(0, 0, 0, 0.16) 82%,
			rgba(0, 0, 0, 0) 100%
		);
}

.transport-section__content {
	position: relative;

	z-index: 2;

	width: 100%;
	max-width: 690px;

	margin-left: clamp(36px, 7vw, 120px);

	padding:
		110px
		0
		115px;
}

.transport-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 16px;

	margin-bottom: 38px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.transport-section__eyebrow-line {
	width: 180px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			transparent
		);

	opacity: 0.55;
}

.transport-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 26px;
}

.transport-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.17);

	font-size: clamp(
		70px,
		7vw,
		110px
	);

	font-weight: 700;

	line-height: 0.8;
}

.transport-section h2 {
	max-width: 430px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		44px,
		4.6vw,
		70px
	);

	font-weight: 700;

	line-height: 0.95;

	letter-spacing: -0.05em;
}

.transport-section__divider {
	width: 70px;
	height: 2px;

	margin:
		34px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}

.transport-section__intro,
.transport-section__copy {
	max-width: 520px;

	color: #cfcfcf;
}

.transport-section__intro {
	margin: 0 0 20px;

	font-size: 18px;
	font-weight: 500;

	line-height: 1.65;
}

.transport-section__copy {
	margin: 0 0 19px;

	font-size: 15px;

	line-height: 1.75;
}

.transport-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 300px;
	min-height: 54px;

	margin-top: 24px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.52);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.transport-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.transport-section__cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

.transport-section__cta:hover span:last-child {
	color: #000000;
	transform: translateX(4px);
}


/* =========================================================
   VRT & NCT SECTION
========================================================= */

.vrt-section {
	position: relative;

	min-height: 760px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}


/* =========================================================
   VRT IMAGE
========================================================= */

.vrt-section__image {
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;

	width: 76%;

	z-index: 0;
}

.vrt-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	/*
	 * Keep the front of the recovery truck visible.
	 */
	object-position: 38% center;
}


/* =========================================================
   VRT SHADE
========================================================= */

.vrt-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			270deg,
			#000000 0%,
			#000000 27%,
			rgba(0, 0, 0, 0.99) 36%,
			rgba(0, 0, 0, 0.96) 44%,
			rgba(0, 0, 0, 0.84) 53%,
			rgba(0, 0, 0, 0.52) 64%,
			rgba(0, 0, 0, 0.22) 76%,
			rgba(0, 0, 0, 0.04) 90%,
			rgba(0, 0, 0, 0) 100%
		);
}


/* =========================================================
   VRT CONTENT
========================================================= */

.vrt-section__content {
	position: relative;

	z-index: 2;

	width: min(620px, 39vw);

	margin-right: clamp(52px, 6vw, 110px);
	margin-left: auto;

	padding:
		100px
		0
		105px;
}


/* =========================================================
   VRT EYEBROW
========================================================= */

.vrt-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 34px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.vrt-section__eyebrow-line {
	width: 46px;
	height: 1px;

	flex: 0 0 46px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);
}


/* =========================================================
   VRT HEADING
========================================================= */

.vrt-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 24px;
}

.vrt-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.15);

	font-size: clamp(
		72px,
		6.5vw,
		106px
	);

	font-weight: 700;

	line-height: 0.8;
}

.vrt-section h2 {
	max-width: 460px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		42px,
		4.2vw,
		66px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.05em;
}

.vrt-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   VRT DIVIDER
========================================================= */

.vrt-section__divider {
	width: 68px;
	height: 2px;

	margin:
		32px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   VRT COPY
========================================================= */

.vrt-section__lead,
.vrt-section__copy {
	max-width: 520px;
}

.vrt-section__lead {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 500;

	line-height: 1.65;
}

.vrt-section__copy {
	margin: 0 0 18px;

	color: #c7c7c7;

	font-size: 14px;

	line-height: 1.72;
}


/* =========================================================
   VRT CTA
========================================================= */

.vrt-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 320px;
	min-height: 54px;

	margin-top: 22px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.7);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.vrt-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.vrt-section__cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

.vrt-section__cta:hover span:last-child {
	color: #000000;
	transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.site-header__inner {
		min-height: 104px;

		padding:
			8px
			26px;

		gap: 20px;
	}

	.site-header__brand {
		width: 118px;
	}

	.site-header__logo {
		width: 110px;
	}

	.site-navigation {
		position: absolute;

		top: 100%;
		right: 0;
		left: 0;

		display: none;

		flex-direction: column;
		align-items: stretch;

		gap: 0;

		min-height: calc(100vh - 104px);

		padding:
			32px
			28px
			48px;

		background: #000000;
	}

	.site-navigation.is-open {
		display: flex;
	}

	.site-navigation__menu {
		flex-direction: column;
		align-items: stretch;

		width: 100%;

		gap: 0;
	}

	.site-navigation__menu li {
		width: 100%;

		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}

	.site-navigation__menu a {
		display: flex;
		align-items: center;

		width: 100%;

		min-height: 64px;

		font-size: 13px;
	}

	.site-navigation__menu a::after {
		display: none;
	}

	.site-header__cta {
		width: 100%;

		min-height: 58px;

		margin-top: 30px;
	}

	.site-header__toggle {
		display: block;

		margin-left: auto;
	}

	.hero {
		min-height: calc(100vh - 104px);
	}

	.hero__container {
		padding:
			80px
			40px
			100px;
	}

	.intro-section__inner {
		flex-wrap: wrap;

		padding:
			0
			40px;

		gap: 50px;
	}

	.intro-section__heading {
		width: 100%;

		flex-basis: 100%;
	}

	.intro-section__copy {
		width: 58%;

		flex-basis: 58%;

		padding-top: 0;
	}

	.intro-section__statement {
		width: 32%;

		flex-basis: 32%;

		padding-top: 0;
	}

	.transport-section,
	.vrt-section {
		min-height: 720px;
	}

	.transport-section__image {
		width: 78%;
	}

	.transport-section__content {
		margin-left: 40px;

		padding-right: 40px;
	}

	.vrt-section__image {
		width: 80%;
	}

	.vrt-section__content {
		width: min(560px, 46vw);

		margin-right: 40px;
	}

	.vrt-section__shade {
		background:
			linear-gradient(
				270deg,
				#000000 0%,
				#000000 30%,
				rgba(0, 0, 0, 0.98) 44%,
				rgba(0, 0, 0, 0.78) 58%,
				rgba(0, 0, 0, 0.35) 74%,
				rgba(0, 0, 0, 0) 100%
			);
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.site-header__inner {
		min-height: 92px;

		padding:
			8px
			18px;
	}

	.site-header__brand {
		width: 94px;
	}

	.site-header__logo {
		width: 88px;
	}

	.site-header__toggle {
		width: 46px;
		height: 46px;

		flex-basis: 46px;
	}

	.site-navigation {
		min-height: calc(100vh - 92px);

		padding:
			22px
			20px
			38px;
	}

	.site-navigation__menu a {
		min-height: 58px;

		font-size: 12px;
	}

	.hero {
		min-height: calc(100vh - 92px);
	}

	.hero__background img {
		object-position: 66% center;
	}

	.hero__shade {
		background:
			linear-gradient(
				90deg,
				#000000 0%,
				#000000 30%,
				rgba(0, 0, 0, 0.98) 53%,
				rgba(0, 0, 0, 0.72) 78%,
				rgba(0, 0, 0, 0.25) 100%
			);
	}

	.hero__container {
		padding:
			65px
			24px
			80px;
	}

	.hero h1 {
		font-size: clamp(
			52px,
			15vw,
			74px
		);
	}

	.hero__intro {
		font-size: 16px;
	}

	.hero__actions {
		flex-direction: column;
		align-items: flex-start;

		gap: 24px;
	}

	.intro-section {
		padding:
			85px
			0
			90px;
	}

	.intro-section__inner {
		display: block;

		padding:
			0
			24px;
	}

	.intro-section__heading,
	.intro-section__copy,
	.intro-section__statement {
		width: 100%;
	}

	.intro-section__copy {
		margin-top: 42px;

		padding: 0;
	}

	.intro-section__statement {
		margin-top: 45px;

		padding: 0;
	}

	.transport-section,
	.vrt-section {
		min-height: 800px;

		align-items: flex-end;
	}

	.transport-section__image,
	.vrt-section__image {
		inset: 0;

		width: 100%;
	}

	.transport-section__image img {
		object-position: 63% center;
	}

	.vrt-section__image img {
		object-position: 34% center;
	}

	.transport-section__shade,
	.vrt-section__shade {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.08) 0%,
				rgba(0, 0, 0, 0.22) 28%,
				rgba(0, 0, 0, 0.62) 48%,
				rgba(0, 0, 0, 0.9) 66%,
				#000000 86%,
				#000000 100%
			);
	}

	.transport-section__content,
	.vrt-section__content {
		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			90px
			24px
			60px;
	}

	.transport-section__heading,
	.vrt-section__heading {
		gap: 16px;
	}

	.transport-section__number,
	.vrt-section__number {
		font-size: 58px;
	}

	.transport-section h2,
	.vrt-section h2 {
		font-size: clamp(
			42px,
			12vw,
			58px
		);
	}

	.transport-section__intro,
	.vrt-section__lead {
		font-size: 17px;
	}

	.transport-section__copy,
	.vrt-section__copy {
		font-size: 15px;
	}

	.transport-section__cta,
	.vrt-section__cta {
		width: 100%;

		min-width: 0;
	}

}

/* =========================================================
   STOCK TRANSFER
========================================================= */

.stock-section {
	position: relative;

	min-height: 760px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}


/* =========================================================
   STOCK IMAGE
========================================================= */

.stock-section__image {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 74%;

	z-index: 0;
}

.stock-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   STOCK SHADE
========================================================= */

.stock-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			#000000 0%,
			#000000 27%,
			rgba(0, 0, 0, 0.99) 37%,
			rgba(0, 0, 0, 0.95) 46%,
			rgba(0, 0, 0, 0.82) 56%,
			rgba(0, 0, 0, 0.5) 68%,
			rgba(0, 0, 0, 0.18) 82%,
			rgba(0, 0, 0, 0) 100%
		);
}


/* =========================================================
   STOCK CONTENT
========================================================= */

.stock-section__content {
	position: relative;

	z-index: 2;

	width: min(640px, 41vw);

	margin-left: clamp(52px, 7vw, 120px);

	padding:
		105px
		0
		110px;
}


/* =========================================================
   STOCK EYEBROW
========================================================= */

.stock-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 16px;

	margin-bottom: 36px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.stock-section__eyebrow-line {
	width: 150px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			transparent
		);

	opacity: 0.5;
}


/* =========================================================
   STOCK HEADING
========================================================= */

.stock-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 24px;
}

.stock-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.16);

	font-size: clamp(
		72px,
		6.5vw,
		106px
	);

	font-weight: 700;

	line-height: 0.8;
}

.stock-section h2 {
	max-width: 470px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		42px,
		4.3vw,
		68px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.05em;
}

.stock-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   STOCK DIVIDER
========================================================= */

.stock-section__divider {
	width: 68px;
	height: 2px;

	margin:
		32px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   STOCK COPY
========================================================= */

.stock-section__lead,
.stock-section__copy {
	max-width: 520px;
}

.stock-section__lead {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 500;

	line-height: 1.65;
}

.stock-section__copy {
	margin: 0 0 18px;

	color: #c7c7c7;

	font-size: 14px;

	line-height: 1.72;
}


/* =========================================================
   STOCK CTA
========================================================= */

.stock-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 310px;
	min-height: 54px;

	margin-top: 22px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.68);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.stock-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.stock-section__cta:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;
}

.stock-section__cta:hover span:last-child {
	color: #000000;

	transform: translateX(4px);
}


/* =========================================================
   STOCK TABLET
========================================================= */

@media (max-width: 1100px) {

	.stock-section {
		min-height: 720px;
	}

	.stock-section__image {
		width: 80%;
	}

	.stock-section__content {
		width: min(560px, 46vw);

		margin-left: 40px;
	}

	.stock-section__shade {
		background:
			linear-gradient(
				90deg,
				#000000 0%,
				#000000 30%,
				rgba(0, 0, 0, 0.98) 44%,
				rgba(0, 0, 0, 0.78) 58%,
				rgba(0, 0, 0, 0.35) 74%,
				rgba(0, 0, 0, 0) 100%
			);
	}

}


/* =========================================================
   STOCK MOBILE
========================================================= */

@media (max-width: 600px) {

	.stock-section {
		min-height: 800px;

		align-items: flex-end;
	}

	.stock-section__image {
		inset: 0;

		width: 100%;
	}

	.stock-section__image img {
		object-position: 60% center;
	}

	.stock-section__shade {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.08) 0%,
				rgba(0, 0, 0, 0.22) 28%,
				rgba(0, 0, 0, 0.62) 48%,
				rgba(0, 0, 0, 0.9) 66%,
				#000000 86%,
				#000000 100%
			);
	}

	.stock-section__content {
		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			90px
			24px
			60px;
	}

	.stock-section__heading {
		gap: 16px;
	}

	.stock-section__number {
		font-size: 58px;
	}

	.stock-section h2 {
		font-size: clamp(
			42px,
			12vw,
			58px
		);
	}

	.stock-section__lead {
		font-size: 17px;
	}

	.stock-section__copy {
		font-size: 15px;
	}

	.stock-section__cta {
		width: 100%;

		min-width: 0;
	}

}

/* =========================================================
   TRACK DAY TRANSPORT
========================================================= */

.track-section {
	position: relative;

	min-height: 780px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}


/* =========================================================
   TRACK IMAGE
========================================================= */

.track-section__image {
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;

	width: 76%;

	z-index: 0;
}

.track-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   TRACK SHADE
========================================================= */

.track-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			270deg,
			#000000 0%,
			#000000 27%,
			rgba(0, 0, 0, 0.99) 36%,
			rgba(0, 0, 0, 0.96) 44%,
			rgba(0, 0, 0, 0.84) 53%,
			rgba(0, 0, 0, 0.52) 64%,
			rgba(0, 0, 0, 0.22) 76%,
			rgba(0, 0, 0, 0.04) 90%,
			rgba(0, 0, 0, 0) 100%
		);
}


/* =========================================================
   TRACK CONTENT
========================================================= */

.track-section__content {
	position: relative;

	z-index: 2;

	width: min(640px, 40vw);

	margin-right: clamp(52px, 6vw, 110px);
	margin-left: auto;

	padding:
		105px
		0
		110px;
}


/* =========================================================
   TRACK EYEBROW
========================================================= */

.track-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 34px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.track-section__eyebrow-line {
	width: 46px;
	height: 1px;

	flex: 0 0 46px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);
}


/* =========================================================
   TRACK HEADING
========================================================= */

.track-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 24px;
}

.track-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.15);

	font-size: clamp(
		72px,
		6.5vw,
		106px
	);

	font-weight: 700;

	line-height: 0.8;
}

.track-section h2 {
	max-width: 470px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		42px,
		4.3vw,
		68px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.05em;
}

.track-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   TRACK DIVIDER
========================================================= */

.track-section__divider {
	width: 68px;
	height: 2px;

	margin:
		32px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   TRACK COPY
========================================================= */

.track-section__lead,
.track-section__copy {
	max-width: 520px;
}

.track-section__lead {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 500;

	line-height: 1.65;
}

.track-section__copy {
	margin: 0 0 18px;

	color: #c7c7c7;

	font-size: 14px;

	line-height: 1.72;
}


/* =========================================================
   TRACK CTA
========================================================= */

.track-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 330px;
	min-height: 54px;

	margin-top: 22px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.7);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.track-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.track-section__cta:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;
}

.track-section__cta:hover span:last-child {
	color: #000000;

	transform: translateX(4px);
}


/* =========================================================
   TRACK TABLET
========================================================= */

@media (max-width: 1100px) {

	.track-section {
		min-height: 740px;
	}

	.track-section__image {
		width: 80%;
	}

	.track-section__content {
		width: min(560px, 46vw);

		margin-right: 40px;
	}

	.track-section__shade {
		background:
			linear-gradient(
				270deg,
				#000000 0%,
				#000000 30%,
				rgba(0, 0, 0, 0.98) 44%,
				rgba(0, 0, 0, 0.78) 58%,
				rgba(0, 0, 0, 0.35) 74%,
				rgba(0, 0, 0, 0) 100%
			);
	}

}


/* =========================================================
   TRACK MOBILE
========================================================= */

@media (max-width: 600px) {

	.track-section {
		min-height: 820px;

		align-items: flex-end;
	}

	.track-section__image {
		inset: 0;

		width: 100%;
	}

	.track-section__image img {
		object-position: center;
	}

	.track-section__shade {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.08) 0%,
				rgba(0, 0, 0, 0.22) 28%,
				rgba(0, 0, 0, 0.62) 48%,
				rgba(0, 0, 0, 0.9) 66%,
				#000000 86%,
				#000000 100%
			);
	}

	.track-section__content {
		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			90px
			24px
			60px;
	}

	.track-section__heading {
		gap: 16px;
	}

	.track-section__number {
		font-size: 58px;
	}

	.track-section h2 {
		font-size: clamp(
			42px,
			12vw,
			58px
		);
	}

	.track-section__lead {
		font-size: 17px;
	}

	.track-section__copy {
		font-size: 15px;
	}

	.track-section__cta {
		width: 100%;

		min-width: 0;
	}

}

/* =========================================================
   VEHICLE STORAGE
========================================================= */

.storage-section {
	position: relative;

	min-height: 780px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}


/* =========================================================
   STORAGE IMAGE
========================================================= */

.storage-section__image {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 74%;

	z-index: 0;
}

.storage-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   STORAGE SHADE
========================================================= */

.storage-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			#000000 0%,
			#000000 27%,
			rgba(0, 0, 0, 0.99) 37%,
			rgba(0, 0, 0, 0.95) 46%,
			rgba(0, 0, 0, 0.82) 56%,
			rgba(0, 0, 0, 0.50) 68%,
			rgba(0, 0, 0, 0.18) 82%,
			rgba(0, 0, 0, 0) 100%
		);
}


/* =========================================================
   STORAGE CONTENT
========================================================= */

.storage-section__content {
	position: relative;

	z-index: 2;

	width: min(640px, 41vw);

	margin-left: clamp(52px, 7vw, 120px);

	padding:
		105px
		0
		110px;
}


/* =========================================================
   STORAGE EYEBROW
========================================================= */

.storage-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 16px;

	margin-bottom: 36px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.storage-section__eyebrow-line {
	width: 150px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			transparent
		);

	opacity: 0.5;
}


/* =========================================================
   STORAGE HEADING
========================================================= */

.storage-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 24px;
}

.storage-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.16);

	font-size: clamp(
		72px,
		6.5vw,
		106px
	);

	font-weight: 700;

	line-height: 0.8;
}

.storage-section h2 {
	max-width: 480px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		42px,
		4.3vw,
		68px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.05em;
}

.storage-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   STORAGE DIVIDER
========================================================= */

.storage-section__divider {
	width: 68px;
	height: 2px;

	margin:
		32px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   STORAGE COPY
========================================================= */

.storage-section__lead,
.storage-section__copy {
	max-width: 520px;
}

.storage-section__lead {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 500;

	line-height: 1.65;
}

.storage-section__copy {
	margin: 0 0 18px;

	color: #c7c7c7;

	font-size: 14px;

	line-height: 1.72;
}


/* =========================================================
   STORAGE CTA
========================================================= */

.storage-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 310px;
	min-height: 54px;

	margin-top: 22px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.68);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.storage-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.storage-section__cta:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;
}

.storage-section__cta:hover span:last-child {
	color: #000000;

	transform: translateX(4px);
}


/* =========================================================
   STORAGE TABLET
========================================================= */

@media (max-width: 1100px) {

	.storage-section {
		min-height: 740px;
	}

	.storage-section__image {
		width: 80%;
	}

	.storage-section__content {
		width: min(560px, 46vw);

		margin-left: 40px;
	}

	.storage-section__shade {
		background:
			linear-gradient(
				90deg,
				#000000 0%,
				#000000 30%,
				rgba(0, 0, 0, 0.98) 44%,
				rgba(0, 0, 0, 0.78) 58%,
				rgba(0, 0, 0, 0.35) 74%,
				rgba(0, 0, 0, 0) 100%
			);
	}

}


/* =========================================================
   STORAGE MOBILE
========================================================= */

@media (max-width: 600px) {

	.storage-section {
		min-height: 820px;

		align-items: flex-end;
	}

	.storage-section__image {
		inset: 0;

		width: 100%;
	}

	.storage-section__image img {
		object-position: 60% center;
	}

	.storage-section__shade {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.08) 0%,
				rgba(0, 0, 0, 0.22) 28%,
				rgba(0, 0, 0, 0.62) 48%,
				rgba(0, 0, 0, 0.90) 66%,
				#000000 86%,
				#000000 100%
			);
	}

	.storage-section__content {
		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			90px
			24px
			60px;
	}

	.storage-section__heading {
		gap: 16px;
	}

	.storage-section__number {
		font-size: 58px;
	}

	.storage-section h2 {
		font-size: clamp(
			42px,
			12vw,
			58px
		);
	}

	.storage-section__lead {
		font-size: 17px;
	}

	.storage-section__copy {
		font-size: 15px;
	}

	.storage-section__cta {
		width: 100%;

		min-width: 0;
	}

}

/* =========================================================
   ARRIVE & DRIVE
========================================================= */

.arrive-section {
	position: relative;

	min-height: 820px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	overflow: hidden;

	background: #000000;

	border-top: 1px solid var(--border);
}


/* =========================================================
   ARRIVE IMAGE
========================================================= */

.arrive-section__image {
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;

	width: 76%;

	z-index: 0;
}

.arrive-section__image img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


/* =========================================================
   ARRIVE SHADE
========================================================= */

.arrive-section__shade {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			270deg,
			#000000 0%,
			#000000 27%,
			rgba(0, 0, 0, 0.99) 36%,
			rgba(0, 0, 0, 0.96) 44%,
			rgba(0, 0, 0, 0.84) 53%,
			rgba(0, 0, 0, 0.52) 64%,
			rgba(0, 0, 0, 0.22) 76%,
			rgba(0, 0, 0, 0.04) 90%,
			rgba(0, 0, 0, 0) 100%
		);
}


/* =========================================================
   ARRIVE CONTENT
========================================================= */

.arrive-section__content {
	position: relative;

	z-index: 2;

	width: min(650px, 40vw);

	margin-right: clamp(52px, 6vw, 110px);
	margin-left: auto;

	padding:
		105px
		0
		110px;
}


/* =========================================================
   ARRIVE EYEBROW
========================================================= */

.arrive-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 34px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.arrive-section__eyebrow-line {
	width: 46px;
	height: 1px;

	flex: 0 0 46px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);
}


/* =========================================================
   ARRIVE HEADING
========================================================= */

.arrive-section__heading {
	display: flex;
	align-items: flex-start;

	gap: 24px;
}

.arrive-section__number {
	display: block;

	color: rgba(255, 255, 255, 0.15);

	font-size: clamp(
		72px,
		6.5vw,
		106px
	);

	font-weight: 700;

	line-height: 0.8;
}

.arrive-section h2 {
	max-width: 500px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		44px,
		4.5vw,
		70px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.05em;
}

.arrive-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   ARRIVE DIVIDER
========================================================= */

.arrive-section__divider {
	width: 68px;
	height: 2px;

	margin:
		32px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   ARRIVE COPY
========================================================= */

.arrive-section__lead,
.arrive-section__copy {
	max-width: 530px;
}

.arrive-section__lead {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 17px;
	font-weight: 500;

	line-height: 1.65;
}

.arrive-section__copy {
	margin: 0 0 18px;

	color: #c7c7c7;

	font-size: 14px;

	line-height: 1.72;
}


/* =========================================================
   ARRIVE CLOSING
========================================================= */

.arrive-section__closing {
	max-width: 520px;

	margin:
		30px
		0
		0;

	color: #ffffff;

	font-size: 24px;
	font-weight: 700;

	line-height: 1.2;

	letter-spacing: -0.03em;
}

.arrive-section__closing span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   ARRIVE CTA
========================================================= */

.arrive-section__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 310px;
	min-height: 54px;

	margin-top: 28px;

	padding: 0 22px;

	gap: 28px;

	border: 1px solid #6f7174;

	background: rgba(0, 0, 0, 0.68);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.arrive-section__cta span:last-child {
	color: var(--chrome);

	font-size: 17px;

	transition: transform 180ms ease;
}

.arrive-section__cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

.arrive-section__cta:hover span:last-child {
	color: #000000;
	transform: translateX(4px);
}


/* =========================================================
   ARRIVE TABLET
========================================================= */

@media (max-width: 1100px) {

	.arrive-section {
		min-height: 780px;
	}

	.arrive-section__image {
		width: 80%;
	}

	.arrive-section__content {
		width: min(570px, 47vw);

		margin-right: 40px;
	}

}


/* =========================================================
   ARRIVE MOBILE
========================================================= */

@media (max-width: 600px) {

	.arrive-section {
		min-height: 850px;

		align-items: flex-end;
	}

	.arrive-section__image {
		inset: 0;

		width: 100%;
	}

	.arrive-section__image img {
		object-position: 44% center;
	}

	.arrive-section__shade {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, 0.08) 0%,
				rgba(0, 0, 0, 0.22) 27%,
				rgba(0, 0, 0, 0.64) 47%,
				rgba(0, 0, 0, 0.91) 64%,
				#000000 83%,
				#000000 100%
			);
	}

	.arrive-section__content {
		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			90px
			24px
			60px;
	}

	.arrive-section__heading {
		gap: 16px;
	}

	.arrive-section__number {
		font-size: 58px;
	}

	.arrive-section h2 {
		font-size: clamp(
			42px,
			12vw,
			58px
		);
	}

	.arrive-section__copy {
		font-size: 15px;
	}

	.arrive-section__cta {
		width: 100%;

		min-width: 0;
	}

}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
	position: relative;

	padding:
		130px
		clamp(36px, 7vw, 120px)
		140px;

	background: #000000;

	border-top: 1px solid var(--border);

	overflow: hidden;
}

.contact-section__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	gap: clamp(80px, 10vw, 180px);
}


/* =========================================================
   CONTACT CONTENT
========================================================= */

.contact-section__content {
	width: 46%;
	max-width: 650px;

	padding-top: 10px;
}

.contact-section__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 32px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.contact-section__eyebrow-line {
	width: 46px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);
}

.contact-section h2 {
	max-width: 620px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		52px,
		5vw,
		78px
	);

	font-weight: 700;

	line-height: 0.94;

	letter-spacing: -0.055em;
}

.contact-section h2 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}

.contact-section__lead {
	max-width: 560px;

	margin:
		34px
		0
		0;

	color: #bfbfbf;

	font-size: 16px;

	line-height: 1.75;
}

.contact-section__divider {
	width: 70px;
	height: 2px;

	margin:
		38px
		0;

	background:
		linear-gradient(
			90deg,
			#ffffff,
			var(--chrome-dark)
		);
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-section__details {
	width: 100%;

	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-section__detail {
	display: flex;
	align-items: baseline;

	width: 100%;

	padding:
		18px
		0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-section__detail > span {
	width: 120px;

	flex: 0 0 120px;

	color: #77797c;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.contact-section__detail a,
.contact-section__detail p {
	margin: 0;

	color: #ffffff;

	font-size: 14px;

	line-height: 1.5;
}

.contact-section__detail a {
	transition: color 180ms ease;
}

.contact-section__detail a:hover {
	color: var(--chrome);
}

.contact-section__statement {
	margin:
		40px
		0
		0;

	color: #ffffff;

	font-size: clamp(
		24px,
		2vw,
		32px
	);

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: -0.035em;
}

.contact-section__statement span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}


/* =========================================================
   CONTACT FORM SIDE
========================================================= */

.contact-section__form-wrap {
	width: 44%;
	max-width: 600px;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
	width: 100%;
}

.contact-form__field {
	width: 100%;

	margin-bottom: 27px;
}

.contact-form__field label {
	display: block;

	margin-bottom: 9px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	display: block;

	width: 100%;

	padding:
		16px
		0;

	margin: 0;

	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);

	border-radius: 0;

	outline: none;

	background: transparent;

	color: #ffffff;

	font-family: inherit;

	font-size: 15px;

	line-height: 1.5;

	transition: border-color 180ms ease;
}

.contact-form__field input {
	min-height: 55px;
}

.contact-form__field textarea {
	min-height: 145px;

	resize: vertical;
}

.contact-form__field select {
	min-height: 55px;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	background-image:
		linear-gradient(
			45deg,
			transparent 50%,
			#888888 50%
		),
		linear-gradient(
			135deg,
			#888888 50%,
			transparent 50%
		);

	background-position:
		calc(100% - 8px) 25px,
		calc(100% - 3px) 25px;

	background-size:
		5px 5px,
		5px 5px;

	background-repeat: no-repeat;
}

.contact-form__field select option {
	background: #000000;
	color: #ffffff;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
	color: #686868;

	opacity: 1;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
	border-bottom-color: #ffffff;
}

.contact-form__honey {
	position: absolute !important;

	left: -9999px !important;

	width: 1px !important;
	height: 1px !important;

	opacity: 0 !important;

	pointer-events: none !important;
}


/* =========================================================
   CONTACT SUBMIT
========================================================= */

.contact-form__submit {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	min-height: 60px;

	margin-top: 38px;

	padding:
		0
		24px;

	border: 1px solid #707276;

	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			#151515,
			#000000
		);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.16em;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.contact-form__submit span:last-child {
	color: var(--chrome);

	font-size: 19px;

	transition:
		transform 180ms ease,
		color 180ms ease;
}

.contact-form__submit:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;
}

.contact-form__submit:hover span:last-child {
	color: #000000;

	transform: translateX(5px);
}


/* =========================================================
   CONTACT TABLET
========================================================= */

@media (max-width: 900px) {

	.contact-section {
		padding:
			100px
			40px
			110px;
	}

	.contact-section__inner {
		display: block;
	}

	.contact-section__content,
	.contact-section__form-wrap {
		width: 100%;
		max-width: 680px;
	}

	.contact-section__form-wrap {
		margin-top: 70px;
	}

}


/* =========================================================
   CONTACT MOBILE
========================================================= */

@media (max-width: 600px) {

	.contact-section {
		padding:
			85px
			24px
			95px;
	}

	.contact-section h2 {
		font-size: clamp(
			46px,
			13vw,
			62px
		);
	}

	.contact-section__lead {
		font-size: 15px;
	}

	.contact-section__detail {
		display: block;
	}

	.contact-section__detail > span {
		display: block;

		width: auto;

		margin-bottom: 10px;
	}

	.contact-section__detail a,
	.contact-section__detail p {
		font-size: 14px;

		overflow-wrap: anywhere;
	}

	.contact-section__form-wrap {
		margin-top: 60px;
	}

	.contact-form__field {
		margin-bottom: 24px;
	}

}

/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.whatsapp-button {
	position: fixed;

	right: 28px;
	bottom: 28px;

	z-index: 9999;

	display: inline-flex;
	align-items: center;

	min-height: 56px;

	padding:
		0
		20px
		0
		17px;

	gap: 11px;

	border: 1px solid rgba(255, 255, 255, 0.32);

	background: rgba(5, 5, 5, 0.94);

	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.45);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	transition:
		background 180ms ease,
		border-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}

.whatsapp-button__icon {
	width: 23px;
	height: 23px;

	flex: 0 0 23px;

	color: #ffffff;
}

.whatsapp-button__text {
	white-space: nowrap;
}

.whatsapp-button__arrow {
	margin-left: 4px;

	color: var(--chrome);

	font-size: 15px;

	transition: transform 180ms ease;
}

.whatsapp-button:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;

	transform: translateY(-2px);

	box-shadow:
		0 16px 45px rgba(0, 0, 0, 0.55);
}

.whatsapp-button:hover .whatsapp-button__icon {
	color: #000000;
}

.whatsapp-button:hover .whatsapp-button__arrow {
	color: #000000;

	transform:
		translateX(2px)
		translateY(-2px);
}


/* =========================================================
   WHATSAPP MOBILE
========================================================= */

@media (max-width: 600px) {

	.whatsapp-button {
		right: 18px;
		bottom: 18px;

		width: 54px;
		height: 54px;
		min-height: 54px;

		justify-content: center;

		padding: 0;

		border-radius: 50%;
	}

	.whatsapp-button__icon {
		width: 25px;
		height: 25px;

		flex-basis: 25px;
	}

	.whatsapp-button__text,
	.whatsapp-button__arrow {
		display: none;
	}

}

/* =========================================================
   FINAL MOBILE LAYOUT OVERRIDES
   STACK IMAGES ABOVE CONTENT
========================================================= */

@media (max-width: 600px) {


	/* =====================================================
	   HERO
	===================================================== */

	.hero {
		display: block;

		min-height: auto;

		background: #000000;
	}

	.hero__background {
		position: relative;

		inset: auto;

		width: 100%;
		height: 52vh;
		min-height: 360px;
		max-height: 520px;

		overflow: hidden;
	}

	.hero__background img {
		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: 72% center;

		transform: none;
	}

	.hero__shade {
		display: none;
	}

	.hero__container {
		position: relative;

		width: 100%;

		padding:
			52px
			24px
			68px;

		background: #000000;
	}

	.hero__content {
		width: 100%;
		max-width: none;
	}

	.hero__eyebrow {
		margin-bottom: 25px;
	}

	.hero h1 {
		font-size: clamp(
			52px,
			15vw,
			72px
		);

		line-height: 0.9;
	}

	.hero__intro {
		max-width: 100%;

		margin-top: 28px;

		font-size: 16px;
	}

	.hero__actions {
		align-items: flex-start;

		margin-top: 32px;
	}


	/* =====================================================
	   ALL SERVICE SECTIONS
	===================================================== */

	.transport-section,
	.vrt-section,
	.stock-section,
	.track-section,
	.storage-section,
	.arrive-section {
		display: block;

		min-height: auto;

		background: #000000;
	}


	/* =====================================================
	   SERVICE IMAGES
	===================================================== */

	.transport-section__image,
	.vrt-section__image,
	.stock-section__image,
	.track-section__image,
	.storage-section__image,
	.arrive-section__image {
		position: relative;

		inset: auto;

		width: 100%;
		height: 380px;

		overflow: hidden;
	}

	.transport-section__image img,
	.vrt-section__image img,
	.stock-section__image img,
	.track-section__image img,
	.storage-section__image img,
	.arrive-section__image img {
		width: 100%;
		height: 100%;

		object-fit: cover;

		transform: none;
	}


	/* =====================================================
	   INDIVIDUAL IMAGE POSITIONING
	===================================================== */

	.transport-section__image img {
		object-position: center;
	}

	.vrt-section__image img {
		object-position: 35% center;
	}

	.stock-section__image img {
		object-position: 60% center;
	}

	.track-section__image img {
		object-position: center;
	}

	.storage-section__image img {
		object-position: 60% center;
	}

	.arrive-section__image img {
		object-position: 42% center;
	}


	/* =====================================================
	   REMOVE DESKTOP OVERLAYS
	===================================================== */

	.transport-section__shade,
	.vrt-section__shade,
	.stock-section__shade,
	.track-section__shade,
	.storage-section__shade,
	.arrive-section__shade {
		display: none;
	}


	/* =====================================================
	   SERVICE CONTENT
	===================================================== */

	.transport-section__content,
	.vrt-section__content,
	.stock-section__content,
	.track-section__content,
	.storage-section__content,
	.arrive-section__content {
		position: relative;

		z-index: 2;

		width: 100%;
		max-width: none;

		margin: 0;

		padding:
			56px
			24px
			70px;

		background: #000000;
	}


	/* =====================================================
	   EYEBROWS
	===================================================== */

	.transport-section__eyebrow,
	.vrt-section__eyebrow,
	.stock-section__eyebrow,
	.track-section__eyebrow,
	.storage-section__eyebrow,
	.arrive-section__eyebrow {
		margin-bottom: 28px;

		font-size: 8px;

		line-height: 1.4;
	}


	/* =====================================================
	   SERVICE HEADINGS
	===================================================== */

	.transport-section__heading,
	.vrt-section__heading,
	.stock-section__heading,
	.track-section__heading,
	.storage-section__heading,
	.arrive-section__heading {
		align-items: flex-start;

		gap: 14px;
	}

	.transport-section__number,
	.vrt-section__number,
	.stock-section__number,
	.track-section__number,
	.storage-section__number,
	.arrive-section__number {
		flex: 0 0 auto;

		font-size: 50px;

		line-height: 0.9;
	}

	.transport-section h2,
	.vrt-section h2,
	.stock-section h2,
	.track-section h2,
	.storage-section h2,
	.arrive-section h2 {
		width: 100%;
		max-width: none;

		font-size: clamp(
			39px,
			11vw,
			54px
		);

		line-height: 0.96;

		letter-spacing: -0.045em;
	}


	/* =====================================================
	   SERVICE DIVIDERS
	===================================================== */

	.transport-section__divider,
	.vrt-section__divider,
	.stock-section__divider,
	.track-section__divider,
	.storage-section__divider,
	.arrive-section__divider {
		margin:
			28px
			0;

		width: 58px;
	}


	/* =====================================================
	   SERVICE COPY
	===================================================== */

	.transport-section__intro,
	.transport-section__copy,
	.vrt-section__lead,
	.vrt-section__copy,
	.stock-section__lead,
	.stock-section__copy,
	.track-section__lead,
	.track-section__copy,
	.storage-section__lead,
	.storage-section__copy,
	.arrive-section__lead,
	.arrive-section__copy {
		width: 100%;
		max-width: none;
	}

	.transport-section__intro,
	.vrt-section__lead,
	.stock-section__lead,
	.track-section__lead,
	.storage-section__lead,
	.arrive-section__lead {
		font-size: 17px;

		line-height: 1.6;
	}

	.transport-section__copy,
	.vrt-section__copy,
	.stock-section__copy,
	.track-section__copy,
	.storage-section__copy,
	.arrive-section__copy {
		font-size: 15px;

		line-height: 1.7;
	}


	/* =====================================================
	   ARRIVE & DRIVE CLOSING
	===================================================== */

	.arrive-section__closing {
		max-width: none;

		margin-top: 28px;

		font-size: 23px;
	}


	/* =====================================================
	   SERVICE BUTTONS
	===================================================== */

	.transport-section__cta,
	.vrt-section__cta,
	.stock-section__cta,
	.track-section__cta,
	.storage-section__cta,
	.arrive-section__cta {
		width: 100%;
		min-width: 0;

		min-height: 56px;

		margin-top: 28px;
	}


	/* =====================================================
	   INTRO SECTION
	===================================================== */

	.intro-section {
		padding:
			75px
			0
			80px;
	}

	.intro-section__inner {
		display: block;

		padding:
			0
			24px;
	}

	.intro-section__heading,
	.intro-section__copy,
	.intro-section__statement {
		width: 100%;
		max-width: none;
	}

	.intro-section__heading h2 {
		font-size: clamp(
			40px,
			11vw,
			52px
		);

		line-height: 1;
	}

	.intro-section__copy {
		padding-top: 38px;
	}

	.intro-section__copy p {
		font-size: 15px;

		line-height: 1.7;
	}

	.intro-section__statement {
		margin-top: 46px;
	}


	/* =====================================================
	   CONTACT
	===================================================== */

	.contact-section {
		padding:
			80px
			24px
			90px;
	}

	.contact-section__inner {
		display: block;

		width: 100%;
	}

	.contact-section__content,
	.contact-section__form-wrap {
		width: 100%;
		max-width: none;
	}

	.contact-section h2 {
		font-size: clamp(
			44px,
			12vw,
			58px
		);

		line-height: 0.96;
	}

	.contact-section__lead {
		max-width: none;
	}

	.contact-section__form-wrap {
		margin-top: 55px;
	}


	/* =====================================================
	   WHATSAPP
	===================================================== */

	.whatsapp-button {
		right: 16px;
		bottom: 16px;

		width: 54px;
		height: 54px;

		min-height: 54px;

		padding: 0;

		justify-content: center;

		border-radius: 50%;
	}

}

/* =========================================================
   FINAL MOBILE HEADER / MENU / HERO OVERRIDES
========================================================= */

@media (max-width: 600px) {


	/* =====================================================
	   MOBILE HEADER
	===================================================== */

	.site-header {
		min-height: 118px;
	}

	.site-header__inner {
		min-height: 118px;

		padding:
			0
			28px;
	}

	.site-header__logo {
		width: 118px;
	}

	.site-header__toggle {
		width: 58px;
		height: 58px;

		flex: 0 0 58px;
	}


	/* =====================================================
	   MOBILE NAVIGATION OVERLAY
	===================================================== */

	.site-navigation {
		position: fixed;

		top: 118px;
		left: 0;

		width: 100%;
		height: calc(100dvh - 118px);

		padding:
			54px
			40px
			40px;

		background: #000000;

		overflow-y: auto;

		opacity: 0;
		visibility: hidden;

		transform: translateY(-10px);

		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 180ms ease;
	}

	.site-navigation.is-open {
		opacity: 1;
		visibility: visible;

		transform: translateY(0);
	}


	/* =====================================================
	   MOBILE MENU LINKS
	===================================================== */

	.site-navigation__menu {
		display: block;

		width: 100%;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.site-navigation__menu li {
		width: 100%;

		margin: 0;
		padding: 0;

		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.site-navigation__menu li:first-child {
		border-top: 1px solid rgba(255, 255, 255, 0.10);
	}

	.site-navigation__menu a {
		display: flex;
		align-items: center;

		width: 100%;

		min-height: 72px;

		padding: 0;

		color: #d4d4d4;

		font-size: 15px;
		font-weight: 700;

		line-height: 1;

		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.site-navigation__menu a:hover {
		color: #ffffff;
	}


	/* =====================================================
	   MOBILE MENU CTA
	===================================================== */

	.site-header__cta {
		display: flex;

		width: 100%;
		min-height: 58px;

		margin-top: 30px;

		justify-content: space-between;

		padding:
			0
			20px;

		border: 1px solid rgba(255, 255, 255, 0.34);

		background: #000000;

		color: #ffffff;

		font-size: 10px;
		font-weight: 700;

		letter-spacing: 0.16em;
		text-transform: uppercase;
	}


	/* =====================================================
	   REMOVE HERO IMAGE ON MOBILE
	===================================================== */

	.hero {
		display: block;

		min-height: auto;

		background: #000000;
	}

	.hero__background {
		display: none !important;
	}

	.hero__shade {
		display: none !important;
	}

	.hero__chrome-line--top {
		display: none;
	}


	/* =====================================================
	   MOBILE HERO CONTENT
	===================================================== */

	.hero__container {
		position: relative;

		display: block;

		width: 100%;

		padding:
			82px
			28px
			90px;

		background: #000000;
	}

	.hero__content {
		width: 100%;
		max-width: none;

		margin: 0;
	}

	.hero__eyebrow {
		display: flex;
		align-items: center;

		gap: 14px;

		margin-bottom: 34px;

		font-size: 8px;

		letter-spacing: 0.19em;
	}

	.hero__eyebrow-line {
		width: 44px;

		flex: 0 0 44px;
	}

	.hero h1 {
		width: 100%;

		margin: 0;

		font-size: clamp(
			62px,
			17vw,
			82px
		);

		line-height: 0.86;

		letter-spacing: -0.065em;
	}

	.hero h1 span {
		display: block;
	}

	.hero__intro {
		width: 100%;
		max-width: 340px;

		margin:
			38px
			0
			0;

		color: #bdbdbd;

		font-size: 16px;

		line-height: 1.7;
	}

	.hero__actions {
		display: block;

		width: 100%;

		margin-top: 38px;
	}

	.hero .button--primary {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		min-height: 58px;
	}

	.hero__text-link {
		display: inline-flex;

		margin-top: 26px;
	}


	/* =====================================================
	   WHATSAPP POSITION
	===================================================== */

	.whatsapp-button {
		right: 18px;
		bottom: 18px;

		z-index: 9998;
	}

	.site-navigation.is-open ~ .whatsapp-button,
	body:has(.site-navigation.is-open) .whatsapp-button {
		opacity: 0;
		pointer-events: none;
	}

}

/* =========================================================
   DEFINITIVE MOBILE NAVIGATION FIX
========================================================= */

@media (max-width: 600px) {

	/* =====================================================
	   HEADER
	===================================================== */

	.site-header {
		position: relative;

		min-height: 118px;

		background: #000000;

		z-index: 10000;
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		min-height: 118px;

		padding:
			0
			28px;
	}

	.site-header__brand {
		display: block;

		flex: 0 0 auto;
	}

	.site-header__logo {
		display: block;

		width: 118px;
		height: auto;
	}


	/* =====================================================
	   TOGGLE
	===================================================== */

	.site-header__toggle {
		position: relative;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		width: 58px;
		height: 58px;

		flex: 0 0 58px;

		padding: 0;

		border: 1px solid rgba(255, 255, 255, 0.32);

		background: transparent;

		z-index: 10002;
	}


	/* =====================================================
	   NAVIGATION PANEL
	===================================================== */

	.site-navigation {
		position: fixed !important;

		top: 118px !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		width: 100% !important;
		height: calc(100dvh - 118px) !important;
		min-height: 0 !important;

		display: block !important;

		margin: 0 !important;

		padding:
			34px
			40px
			40px !important;

		background: #000000 !important;

		overflow-y: auto;

		opacity: 0;
		visibility: hidden;

		transform: translateY(-8px);

		pointer-events: none;

		z-index: 10001;

		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 180ms ease;
	}

	.site-navigation.is-open {
		opacity: 1;

		visibility: visible;

		transform: translateY(0);

		pointer-events: auto;
	}


	/* =====================================================
	   MENU
	===================================================== */

	.site-navigation__menu {
		display: block !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		list-style: none !important;
	}

	.site-navigation__menu li {
		display: block !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		border-bottom: 1px solid rgba(255, 255, 255, 0.11);
	}

	.site-navigation__menu li:first-child {
		border-top: 1px solid rgba(255, 255, 255, 0.11);
	}

	.site-navigation__menu a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;

		width: 100% !important;
		height: auto !important;
		min-height: 68px !important;

		margin: 0 !important;

		padding:
			0
			0 !important;

		color: #d7d7d7;

		font-size: 14px;
		font-weight: 700;

		line-height: 1.2;

		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.site-navigation__menu a:hover {
		color: #ffffff;
	}


	/* =====================================================
	   MOBILE QUOTE BUTTON
	===================================================== */

	.site-navigation .site-header__cta {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;

		width: 100% !important;
		min-height: 58px !important;

		margin:
			28px
			0
			0 !important;

		padding:
			0
			20px !important;

		border: 1px solid rgba(255, 255, 255, 0.35);

		background: transparent;

		color: #ffffff;

		font-size: 9px;
		font-weight: 700;

		line-height: 1;

		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.site-navigation .site-header__cta span {
		font-size: 17px;

		color: var(--chrome);
	}


	/* =====================================================
	   HIDE WHATSAPP WHILE MENU OPEN
	===================================================== */

	body:has(.site-navigation.is-open) .whatsapp-button {
		opacity: 0;

		visibility: hidden;

		pointer-events: none;
	}

}

/* =========================================================
   LOCK PAGE WHEN MOBILE MENU IS OPEN
========================================================= */

@media (max-width: 600px) {

	body.menu-open {
		overflow: hidden;
		height: 100dvh;
		touch-action: none;
	}

	body.menu-open .site-header {
		position: fixed;
		top: 0;
		left: 0;

		width: 100%;

		z-index: 10003;
	}

	body.menu-open .site-navigation {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

}

/* =========================================================
   MOBILE STICKY HEADER
========================================================= */

@media (max-width: 600px) {

	.site-header {
		position: sticky !important;
		top: 0;

		width: 100%;

		z-index: 10000;

		background: #000000;
	}

	.site-header__inner {
		min-height: 118px;

		background: #000000;
	}


	/* =====================================================
	   ACCOUNT FOR HEADER WHEN JUMPING TO SECTIONS
	===================================================== */

	#services,
	#vrt-nct,
	#stock-transfer,
	#track-days,
	#storage,
	#arrive-drive,
	#contact {
		scroll-margin-top: 118px;
	}


	/* =====================================================
	   MENU OPEN STATE
	===================================================== */

	body.menu-open .site-header {
		position: fixed !important;

		top: 0;
		left: 0;

		width: 100%;
	}

}

/* =========================================================
   LEGAL PAGES
========================================================= */

.legal-page {
	background: #000000;
	color: #ffffff;
}


/* =========================================================
   LEGAL HERO
========================================================= */

.legal-hero {
	position: relative;

	padding:
		115px
		clamp(36px, 7vw, 120px)
		105px;

	background: #000000;

	border-bottom: 1px solid rgba(255, 255, 255, 0.12);

	overflow: hidden;
}

.legal-hero::after {
	content: "";

	position: absolute;

	right: 0;
	bottom: -1px;

	width: 42%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.45)
		);
}

.legal-hero__inner {
	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
}


/* =========================================================
   LEGAL HERO EYEBROW
========================================================= */

.legal-hero__eyebrow {
	display: flex;
	align-items: center;

	gap: 14px;

	margin-bottom: 34px;

	color: var(--chrome);

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.legal-hero__eyebrow-line {
	width: 46px;
	height: 1px;

	flex: 0 0 46px;

	background:
		linear-gradient(
			90deg,
			#727477,
			#ffffff
		);
}


/* =========================================================
   LEGAL HERO TITLE
========================================================= */

.legal-hero h1 {
	max-width: 850px;

	margin: 0;

	color: #ffffff;

	font-size: clamp(
		64px,
		7vw,
		108px
	);

	font-weight: 700;

	line-height: 0.87;

	letter-spacing: -0.065em;
}

.legal-hero h1 span {
	display: block;

	color: var(--chrome);

	font-weight: 400;
}

.legal-hero > .legal-hero__inner > p {
	max-width: 560px;

	margin:
		35px
		0
		0;

	color: #a8a8a8;

	font-size: 16px;

	line-height: 1.7;
}


/* =========================================================
   LEGAL CONTENT
========================================================= */

.legal-content {
	padding:
		100px
		clamp(36px, 7vw, 120px)
		130px;

	background: #000000;
}

.legal-content__inner {
	display: flex;
	align-items: flex-start;

	width: 100%;
	max-width: 1500px;

	margin: 0 auto;

	gap: clamp(
		80px,
		10vw,
		180px
	);
}


/* =========================================================
   LEGAL ASIDE
========================================================= */

.legal-content__aside {
	position: sticky;

	top: 170px;

	width: 250px;

	flex: 0 0 250px;
}

.legal-content__aside span {
	display: block;

	margin-bottom: 9px;

	color: #626262;

	font-size: 8px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.legal-content__aside p,
.legal-content__aside a {
	display: block;

	margin: 0;

	color: #bdbdbd;

	font-size: 12px;

	line-height: 1.65;
}

.legal-content__aside a {
	overflow-wrap: anywhere;

	transition: color 180ms ease;
}

.legal-content__aside a:hover {
	color: #ffffff;
}

.legal-content__aside-line {
	width: 100%;
	height: 1px;

	margin:
		24px
		0;

	background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   LEGAL BODY
========================================================= */

.legal-content__body {
	width: 100%;
	max-width: 780px;
}


/* =========================================================
   LEGAL SECTIONS
========================================================= */

.legal-content__body section {
	position: relative;

	margin:
		0
		0
		62px;

	padding:
		0
		0
		62px;

	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-content__body section:last-child {
	margin-bottom: 0;

	padding-bottom: 0;

	border-bottom: 0;
}


/* =========================================================
   LEGAL SECTION NUMBERS
========================================================= */

.legal-content__number {
	display: block;

	margin-bottom: 16px;

	color: rgba(255, 255, 255, 0.23);

	font-size: 11px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.16em;
}


/* =========================================================
   LEGAL HEADINGS
========================================================= */

.legal-content__body h2 {
	max-width: 700px;

	margin:
		0
		0
		28px;

	color: #ffffff;

	font-size: clamp(
		30px,
		3vw,
		44px
	);

	font-weight: 700;

	line-height: 1.05;

	letter-spacing: -0.04em;
}

.legal-content__body h3 {
	margin:
		34px
		0
		14px;

	color: #ffffff;

	font-size: 18px;
	font-weight: 700;

	line-height: 1.3;

	letter-spacing: -0.015em;
}


/* =========================================================
   LEGAL PARAGRAPHS
========================================================= */

.legal-content__body p {
	max-width: 760px;

	margin:
		0
		0
		20px;

	color: #adadad;

	font-size: 15px;

	line-height: 1.8;
}

.legal-content__body p:last-child {
	margin-bottom: 0;
}

.legal-content__body strong {
	color: #ffffff;

	font-weight: 600;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.legal-content__body a {
	color: #ffffff;

	text-decoration: underline;

	text-decoration-color: #666666;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;

	transition:
		color 180ms ease,
		text-decoration-color 180ms ease;
}

.legal-content__body a:hover {
	color: var(--chrome);

	text-decoration-color: var(--chrome);
}


/* =========================================================
   LEGAL LISTS
========================================================= */

.legal-content__body ul,
.legal-content__body ol {
	max-width: 740px;

	margin:
		26px
		0;

	padding-left: 22px;
}

.legal-content__body li {
	margin-bottom: 12px;

	padding-left: 7px;

	color: #adadad;

	font-size: 15px;

	line-height: 1.75;
}

.legal-content__body li:last-child {
	margin-bottom: 0;
}

.legal-content__body li::marker {
	color: #77797c;
}


/* =========================================================
   LEGAL TABLET
========================================================= */

@media (max-width: 1100px) {

	.legal-content__inner {
		gap: 70px;
	}

	.legal-content__aside {
		width: 220px;

		flex-basis: 220px;
	}

}


/* =========================================================
   LEGAL SMALL TABLET
========================================================= */

@media (max-width: 900px) {

	.legal-hero {
		padding:
			90px
			40px
			85px;
	}

	.legal-content {
		padding:
			80px
			40px
			110px;
	}

	.legal-content__inner {
		display: block;
	}

	.legal-content__aside {
		position: static;

		width: 100%;
		max-width: 760px;

		margin-bottom: 65px;
	}

	.legal-content__body {
		width: 100%;
		max-width: 760px;
	}

}


/* =========================================================
   LEGAL MOBILE
========================================================= */

@media (max-width: 600px) {

	/* =====================================================
	   HERO
	===================================================== */

	.legal-hero {
		padding:
			72px
			24px
			72px;
	}

	.legal-hero::after {
		width: 65%;
	}

	.legal-hero__eyebrow {
		margin-bottom: 28px;

		font-size: 8px;
	}

	.legal-hero__eyebrow-line {
		width: 38px;

		flex-basis: 38px;
	}

	.legal-hero h1 {
		font-size: clamp(
			58px,
			16vw,
			76px
		);

		line-height: 0.88;
	}

	.legal-hero > .legal-hero__inner > p {
		max-width: 340px;

		margin-top: 30px;

		font-size: 15px;

		line-height: 1.7;
	}


	/* =====================================================
	   CONTENT
	===================================================== */

	.legal-content {
		padding:
			62px
			24px
			90px;
	}

	.legal-content__inner {
		display: block;

		width: 100%;
	}


	/* =====================================================
	   ASIDE
	===================================================== */

	.legal-content__aside {
		position: static;

		width: 100%;
		max-width: none;

		margin-bottom: 60px;

		padding-bottom: 36px;

		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.legal-content__aside-line {
		margin:
			20px
			0;
	}

	.legal-content__aside p,
	.legal-content__aside a {
		font-size: 12px;
	}


	/* =====================================================
	   BODY
	===================================================== */

	.legal-content__body {
		width: 100%;
		max-width: none;
	}

	.legal-content__body section {
		margin-bottom: 48px;

		padding-bottom: 48px;
	}

	.legal-content__number {
		margin-bottom: 14px;
	}


	/* =====================================================
	   HEADINGS
	===================================================== */

	.legal-content__body h2 {
		max-width: none;

		margin-bottom: 24px;

		font-size: clamp(
			31px,
			9vw,
			38px
		);

		line-height: 1.05;
	}

	.legal-content__body h3 {
		margin-top: 30px;

		font-size: 17px;
	}


	/* =====================================================
	   COPY
	===================================================== */

	.legal-content__body p {
		max-width: none;

		font-size: 15px;

		line-height: 1.75;
	}

	.legal-content__body ul,
	.legal-content__body ol {
		max-width: none;

		padding-left: 20px;
	}

	.legal-content__body li {
		font-size: 15px;

		line-height: 1.7;
	}

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.site-footer__socials {
		justify-content: flex-start;

		margin-top: 24px;
	}

	.site-footer__socials a.site-footer__social {
		width: 44px !important;
		height: 44px !important;
	}

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
	position: relative;

	background: #000000;

	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.site-footer__inner {
	width: 100%;

	padding:
		80px
		clamp(36px, 7vw, 120px)
		34px;
}


/* =========================================================
   FOOTER TOP
========================================================= */

.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	width: 100%;

	padding-bottom: 70px;

	gap: 60px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.site-footer__brand {
	width: 40%;
	max-width: 520px;

	flex: 0 1 520px;
}

.site-footer__logo-link {
	display: inline-block;
}

.site-footer__logo {
	display: block;

	width: 125px;
	height: auto;

	object-fit: contain;
}

.site-footer__brand > p {
	max-width: 420px;

	margin:
		28px
		0
		0;

	color: #8f8f8f;

	font-size: 13px;

	line-height: 1.75;
}


/* =========================================================
   FOOTER SECTIONS
========================================================= */

.site-footer__section {
	flex: 0 0 auto;
}

.site-footer__section:last-child {
	margin-left: auto;

	text-align: right;
}

.site-footer__heading {
	display: block;

	margin-bottom: 24px;

	color: #66686b;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}


/* =========================================================
   FOOTER NAVIGATION
========================================================= */

.site-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 11px;
}

.site-footer__nav a {
	color: #c8c8c8;

	font-size: 13px;

	line-height: 1.45;

	transition: color 180ms ease;
}

.site-footer__nav a:hover {
	color: #ffffff;
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: 11px;
}

.site-footer__contact a {
	color: #c8c8c8;

	font-size: 13px;

	line-height: 1.45;

	transition: color 180ms ease;
}

.site-footer__contact a:hover {
	color: #ffffff;
}

.site-footer__contact p {
	margin:
		7px
		0
		0;

	color: #858585;

	font-size: 13px;

	line-height: 1.65;
}

.site-footer__section:last-child .site-footer__contact {
	align-items: flex-end;
}

.site-footer__section:last-child .site-footer__contact p {
	text-align: right;
}


/* =========================================================
   FOOTER SOCIALS
========================================================= */

.site-footer__socials {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 10px;

	margin-top: 28px;
}

.site-footer__social {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.22);

	background: transparent;
	color: #ffffff;

	line-height: 1;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}

.site-footer__social svg {
	display: block;

	width: 18px;
	height: 18px;

	fill: currentColor;
}

.site-footer__social:hover {
	background: #ffffff;
	border-color: #ffffff;

	color: #000000;

	transform: translateY(-2px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.site-footer__bottom {
	display: flex;
	align-items: center;

	width: 100%;

	padding-top: 30px;

	gap: 30px;

	border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.site-footer__copyright {
	flex: 0 0 auto;
}

.site-footer__copyright p {
	margin: 0;

	color: #505050;

	font-size: 10px;

	line-height: 1.5;
}


/* =========================================================
   FOOTER LEGAL
========================================================= */

.site-footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap:
		12px
		28px;

	margin-left: auto;
}

.site-footer__legal a {
	position: relative;

	color: #747474;

	font-size: 10px;
	font-weight: 600;

	line-height: 1.4;

	letter-spacing: 0.04em;

	transition: color 180ms ease;
}

.site-footer__legal a:not(:last-child)::after {
	content: "";

	position: absolute;

	top: 50%;
	right: -15px;

	width: 2px;
	height: 2px;

	border-radius: 50%;

	background: #454545;

	transform: translateY(-50%);
}

.site-footer__legal a:hover {
	color: #ffffff;
}


/* =========================================================
   FOOTER CREDIT
========================================================= */

.site-footer__credit {
	flex: 0 0 auto;
}

.site-footer__credit a {
	color: #8d8d8d;

	font-size: 10px;

	line-height: 1.5;

	transition: color 180ms ease;
}

.site-footer__credit a:hover {
	color: #ffffff;
}


/* =========================================================
   FOOTER TABLET
========================================================= */

@media (max-width: 900px) {

	.site-footer__inner {
		padding:
			70px
			40px
			30px;
	}

	.site-footer__top {
		flex-wrap: wrap;
		justify-content: flex-start;

		gap:
			55px
			90px;
	}

	.site-footer__brand {
		width: 100%;
		max-width: 100%;

		flex-basis: 100%;
	}

	.site-footer__section {
		min-width: 200px;
	}

	.site-footer__section:last-child {
		margin-left: auto;
	}

	.site-footer__bottom {
		flex-wrap: wrap;
	}

	.site-footer__legal {
		order: 3;

		width: 100%;

		margin-left: 0;
	}

}


/* =========================================================
   FOOTER MOBILE
========================================================= */

@media (max-width: 600px) {

	.site-footer__inner {
		padding:
			60px
			24px
			28px;
	}

	.site-footer__top {
		display: block;

		padding-bottom: 55px;
	}

	.site-footer__brand {
		width: 100%;
	}

	.site-footer__logo {
		width: 110px;
	}

	.site-footer__brand > p {
		max-width: 340px;
	}

	.site-footer__section {
		margin-top: 48px;
	}

	.site-footer__section:last-child {
		margin-left: 0;

		text-align: left;
	}

	.site-footer__section:last-child .site-footer__contact {
		align-items: flex-start;
	}

	.site-footer__section:last-child .site-footer__contact p {
		text-align: left;
	}

	.site-footer__socials {
		justify-content: flex-start;

		margin-top: 24px;
	}

	.site-footer__social {
		width: 44px;
		height: 44px;
	}

	.site-footer__bottom {
		display: block;

		padding-top: 26px;
	}

	.site-footer__legal {
		display: block;

		width: 100%;

		margin:
			26px
			0
			0;
	}

	.site-footer__legal a {
		display: block;

		width: fit-content;

		margin-bottom: 12px;
	}

	.site-footer__legal a:last-child {
		margin-bottom: 0;
	}

	.site-footer__legal a::after {
		display: none;
	}

	.site-footer__credit {
		margin-top: 26px;
	}

}

/* =========================================================
   FOOTER / WHATSAPP FINAL FIX
========================================================= */


/* =====================================================
   WHATSAPP ICON
===================================================== */

.whatsapp-button__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	color: #ffffff;
}

.whatsapp-button__icon svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: currentColor;
}

.whatsapp-button__icon svg path {
	fill: currentColor;
}

.whatsapp-button:hover .whatsapp-button__icon,
.whatsapp-button:hover .whatsapp-button__icon svg,
.whatsapp-button:hover .whatsapp-button__icon svg path {
	color: #000000;
	fill: #000000;
}


/* =====================================================
   KEEP AMB360 CREDIT CLEAR OF WHATSAPP BUTTON
===================================================== */

@media (min-width: 901px) {

	.site-footer__credit {
		margin-right: 190px;
	}

}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (max-width: 900px) {

	.site-footer__credit {
		margin-right: 90px;
	}

}


@media (max-width: 600px) {

	.site-footer__credit {
		margin-right: 0;
		margin-bottom: 72px;
	}

}

/* =========================================================
   HEADER SOCIAL LINKS
========================================================= */

.site-header__socials {
	display: flex;
	align-items: center;

	gap: 8px;

	margin-left: 18px;
}

.site-header__social {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	flex: 0 0 36px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.18);

	background: transparent;
	color: #a8a8a8;

	line-height: 1;
	text-decoration: none;

	transition:
		color 180ms ease,
		border-color 180ms ease,
		background 180ms ease;
}

.site-header__social svg {
	display: block;

	width: 15px;
	height: 15px;

	fill: currentColor;
}

.site-header__social svg path {
	fill: currentColor;
}

.site-header__social:hover {
	border-color: #ffffff;

	background: #ffffff;
	color: #000000;
}


/* =========================================================
   HEADER SOCIAL LINKS - MOBILE
========================================================= */

@media (max-width: 600px) {

	.site-header__socials {
		display: none;
	}

}

/* =========================================================
   COOKIE NOTICE
========================================================= */

.cookie-notice[hidden] {
	display: none !important;
}

.cookie-notice {
	position: fixed;

	right: 28px;
	bottom: 104px;
	left: 28px;

	z-index: 9997;

	display: flex;
	justify-content: center;

	pointer-events: none;

	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

.cookie-notice.is-visible {
	opacity: 1;

	transform: translateY(0);

	pointer-events: auto;
}

.cookie-notice__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	max-width: 820px;

	padding:
		24px
		26px;

	gap: 40px;

	border: 1px solid rgba(255, 255, 255, 0.22);

	background: rgba(5, 5, 5, 0.97);

	box-shadow:
		0 18px 60px rgba(0, 0, 0, 0.55);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}


/* =========================================================
   COOKIE COPY
========================================================= */

.cookie-notice__content {
	max-width: 590px;
}

.cookie-notice__eyebrow {
	display: block;

	margin-bottom: 10px;

	color: var(--chrome);

	font-size: 8px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cookie-notice__content p {
	margin: 0;

	color: #adadad;

	font-size: 13px;

	line-height: 1.65;
}

.cookie-notice__policy {
	display: inline-flex;
	align-items: center;

	gap: 9px;

	margin-top: 13px;

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.12em;
	text-transform: uppercase;

	transition:
		gap 180ms ease,
		color 180ms ease;
}

.cookie-notice__policy span {
	color: var(--chrome);

	font-size: 14px;
}

.cookie-notice__policy:hover {
	gap: 14px;

	color: var(--chrome-light);
}


/* =========================================================
   COOKIE BUTTON
========================================================= */

.cookie-notice__action {
	flex: 0 0 auto;
}

.cookie-notice__button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	min-width: 140px;
	min-height: 50px;

	padding:
		0
		18px;

	gap: 20px;

	border: 1px solid #6f7174;

	border-radius: 0;

	background: transparent;

	color: #ffffff;

	font-size: 9px;
	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.15em;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.cookie-notice__button span {
	color: var(--chrome);

	font-size: 16px;

	transition:
		color 180ms ease,
		transform 180ms ease;
}

.cookie-notice__button:hover {
	background: #ffffff;

	border-color: #ffffff;

	color: #000000;
}

.cookie-notice__button:hover span {
	color: #000000;

	transform: translateX(3px);
}


/* =========================================================
   COOKIE NOTICE MOBILE
========================================================= */

@media (max-width: 600px) {

	.cookie-notice {
		right: 16px;
		bottom: 88px;
		left: 16px;
	}

	.cookie-notice__inner {
		display: block;

		padding:
			22px
			20px;
	}

	.cookie-notice__content p {
		font-size: 12px;

		line-height: 1.65;
	}

	.cookie-notice__action {
		margin-top: 22px;
	}

	.cookie-notice__button {
		width: 100%;

		min-height: 52px;
	}

}

/* =========================================================
   COOKIE NOTICE POSITION
========================================================= */

.cookie-notice {
	position: fixed;

	left: 28px;
	right: auto;
	bottom: 28px;

	z-index: 9997;

	display: block;

	width: min(620px, calc(100vw - 56px));

	pointer-events: none;

	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

.cookie-notice.is-visible {
	opacity: 1;

	transform: translateY(0);

	pointer-events: auto;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

	.cookie-notice {
		left: 16px;
		right: 16px;
		bottom: 16px;

		width: auto;
	}

}