/*
 * JS Products v0.8.4 — temporary visual design-review homepage.
 * Loaded on Home only. Stock media must be replaced before production.
 */

.jsp-review-home {
	overflow: clip;
	background: var(--jsp-bg);
}

/* Home header overlays hero, then becomes the standard light header. */
.jsp-review-home ~ .jsp-footer {
	position: relative;
	z-index: 2;
}

body.js-products-site:has(.jsp-review-home) .jsp-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	border-bottom-color: transparent;
	background: linear-gradient(to bottom, rgba(0,0,0,.34), transparent);
	color: #fff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		background 280ms ease,
		border-color 280ms ease,
		color 280ms ease,
		box-shadow 280ms ease;
}

body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-brand,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-nav__link,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-icon-button,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-menu-toggle {
	color: rgba(255,255,255,.95);
}

body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-nav__link {
	opacity: .8;
}

body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-icon-button:hover,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-icon-button:focus-visible,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-menu-toggle:hover,
body.js-products-site:has(.jsp-review-home) .jsp-header .jsp-menu-toggle:focus-visible {
	background: rgba(255,255,255,.12);
}

body.js-products-site:has(.jsp-review-home) .jsp-header.is-review-light {
	border-bottom-color: var(--jsp-line);
	background: color-mix(in srgb, var(--jsp-bg) 92%, transparent);
	color: var(--jsp-ink);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 1px 0 rgba(17,17,17,.02);
}

body.js-products-site:has(.jsp-review-home) .jsp-header.is-review-light .jsp-brand,
body.js-products-site:has(.jsp-review-home) .jsp-header.is-review-light .jsp-nav__link,
body.js-products-site:has(.jsp-review-home) .jsp-header.is-review-light .jsp-icon-button,
body.js-products-site:has(.jsp-review-home) .jsp-header.is-review-light .jsp-menu-toggle {
	color: var(--jsp-ink);
	opacity: 1;
}

/* Hero */
.jsp-review-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
	background: #0a0909;
	color: #fff;
}

.jsp-review-hero__media,
.jsp-review-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jsp-review-hero__media video {
	display: block;
	object-fit: cover;
	object-position: center 46%;
	transform: scale(1.015);
}

.jsp-review-hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.18) 100%),
		linear-gradient(0deg, rgba(0,0,0,.46) 0%, transparent 52%),
		linear-gradient(180deg, rgba(0,0,0,.24) 0%, transparent 28%);
	pointer-events: none;
}

.jsp-review-hero__content {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(260px, .42fr);
	gap: clamp(32px, 6vw, 92px);
	align-items: end;
	padding-top: calc(var(--jsp-header-h) + 60px);
	padding-bottom: clamp(72px, 9vw, 118px);
}

.jsp-review-kicker {
	margin: 0 0 22px;
	color: rgba(255,255,255,.70);
	font-size: .67rem;
	font-weight: 750;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.jsp-review-hero h1 {
	max-width: 1020px;
	margin: 0;
	font-size: clamp(4.8rem, 10.8vw, 10rem);
	font-weight: 500;
	line-height: .78;
	letter-spacing: -.085em;
	text-wrap: balance;
}

.jsp-review-hero h1 em,
.jsp-review-mosaic__heading h2 em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -.065em;
}

.jsp-review-hero__side {
	display: grid;
	gap: 32px;
	align-self: end;
	padding-bottom: 6px;
}

.jsp-review-hero__side > p {
	max-width: 430px;
	margin: 0;
	color: rgba(255,255,255,.76);
	font-size: clamp(.98rem, 1.5vw, 1.14rem);
	line-height: 1.7;
}

.jsp-review-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.jsp-review-button {
	display: inline-flex;
	min-height: 50px;
	width: fit-content;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding: 0 20px;
	border: 1px solid var(--jsp-ink);
	border-radius: 999px;
	background: var(--jsp-ink);
	color: #fff !important;
	font-size: .81rem;
	font-weight: 650;
	text-decoration: none !important;
	transition: background var(--jsp-motion-fast) ease, color var(--jsp-motion-fast) ease;
}

.jsp-review-button--light {
	border-color: #fff;
	background: #fff;
	color: #111 !important;
}

.jsp-review-button:hover,
.jsp-review-button:focus-visible {
	background: transparent;
	color: var(--jsp-ink) !important;
}

.jsp-review-button--light:hover,
.jsp-review-button--light:focus-visible {
	background: transparent;
	color: #fff !important;
}

.jsp-review-link {
	color: var(--jsp-ink);
	font-size: .81rem;
	font-weight: 650;
	text-underline-offset: 5px;
}

.jsp-review-link--light {
	color: #fff !important;
}

.jsp-review-hero__index {
	position: absolute;
	z-index: 3;
	left: var(--jsp-gutter);
	bottom: 22px;
	display: none;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,.5);
	font-size: .61rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.jsp-review-hero__index i {
	width: 42px;
	height: 1px;
	background: rgba(255,255,255,.35);
}

.jsp-review-header-marker {
	height: 1px;
	margin-top: -1px;
}

/* Editorial */
.jsp-review-editorial {
	padding: clamp(88px, 12vw, 172px) 0;
}

.jsp-review-editorial__grid {
	display: grid;
	grid-template-columns: minmax(0, .94fr) minmax(340px, .72fr);
	gap: clamp(42px, 8vw, 124px);
	align-items: center;
}

.jsp-review-editorial__media {
	height: min(78svh, 780px);
	min-height: 540px;
	overflow: hidden;
	border-radius: clamp(18px, 2.4vw, 34px);
	background: #ddd8d5;
}

.jsp-review-editorial__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jsp-review-editorial__copy h2 {
	max-width: 720px;
	margin: 0;
	font-size: clamp(3rem, 5.8vw, 5.8rem);
	font-weight: 500;
	line-height: .88;
	letter-spacing: -.065em;
	text-wrap: balance;
}

.jsp-review-editorial__copy > p:not(.jsp-eyebrow) {
	max-width: 560px;
	margin: 30px 0 0;
	color: var(--jsp-muted);
	line-height: 1.78;
}

.jsp-review-editorial__note {
	max-width: 520px;
	margin-top: 50px;
	padding-top: 18px;
	border-top: 1px solid var(--jsp-line);
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 20px;
	color: var(--jsp-muted);
	font-size: .86rem;
	line-height: 1.65;
}

.jsp-review-editorial__note span {
	color: var(--jsp-ink);
	font-size: .67rem;
	font-weight: 750;
	letter-spacing: .12em;
}

/* Products */
.jsp-review-products {
	padding: clamp(80px, 10vw, 142px) 0 clamp(96px, 12vw, 170px);
	border-top: 1px solid var(--jsp-line);
}

.jsp-review-section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, .4fr);
	gap: clamp(30px, 6vw, 88px);
	align-items: end;
	margin-bottom: clamp(42px, 6vw, 70px);
}

.jsp-review-section-heading h2 {
	max-width: 880px;
	margin: 0;
	font-size: clamp(3rem, 6.7vw, 6.7rem);
	font-weight: 500;
	line-height: .85;
	letter-spacing: -.07em;
}

.jsp-review-section-heading__side {
	display: grid;
	gap: 18px;
}

.jsp-review-section-heading__side p {
	margin: 0;
	color: var(--jsp-muted);
	line-height: 1.65;
}

.jsp-review-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2.5vw, 32px);
}

.jsp-review-product__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: clamp(14px, 1.8vw, 24px);
	background: #ebe9e4;
}

.jsp-review-product__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--jsp-ease);
}

.jsp-review-product:hover .jsp-review-product__media img {
	transform: scale(1.025);
}

.jsp-review-product__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 9px;
	border-radius: 999px;
	background: rgba(17,17,17,.92);
	color: #fff;
	font-size: .61rem;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.jsp-review-product__meta {
	display: grid;
	grid-template-columns: 1fr 34px;
	gap: 16px;
	align-items: start;
	padding-top: 14px;
}

.jsp-review-product h3 {
	margin: 0;
	font-size: .97rem;
	font-weight: 650;
}

.jsp-review-product h3 a {
	text-decoration: none;
}

.jsp-review-product__price {
	margin-top: 4px;
	color: var(--jsp-muted);
	font-size: .87rem;
}

.jsp-review-product__price ins {
	color: var(--jsp-ink);
	font-weight: 650;
	text-decoration: none;
}

.jsp-review-product__price del {
	opacity: .58;
}

.jsp-review-product__arrow {
	width: 34px;
	height: 34px;
	border: 1px solid var(--jsp-line);
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-decoration: none;
	font-size: .82rem;
}

.jsp-review-products__empty {
	min-height: 260px;
	display: grid;
	place-items: center;
	border: 1px solid var(--jsp-line);
	border-radius: var(--jsp-radius-lg);
	color: var(--jsp-muted);
	text-align: center;
}

/* Dark image statement */
.jsp-review-dark-story {
	position: relative;
	min-height: min(900px, 100svh);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: #090909;
	color: #fff;
}

.jsp-review-dark-story__media,
.jsp-review-dark-story__media img {
	position: absolute;
	inset: -4%;
	width: 108%;
	height: 108%;
}

.jsp-review-dark-story__media img {
	display: block;
	object-fit: cover;
	object-position: center 56%;
}

.jsp-review-dark-story__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.10) 68%),
		linear-gradient(0deg, rgba(0,0,0,.48), transparent 60%);
}

.jsp-review-dark-story__content {
	position: relative;
	z-index: 2;
	padding-top: 130px;
	padding-bottom: clamp(60px, 8vw, 110px);
}

.jsp-review-dark-story h2 {
	max-width: 1000px;
	margin: 0;
	font-size: clamp(4rem, 9vw, 9rem);
	font-weight: 500;
	line-height: .81;
	letter-spacing: -.08em;
}

.jsp-review-dark-story__lower {
	display: grid;
	grid-template-columns: minmax(0, 440px) 1fr;
	gap: 40px;
	align-items: end;
	margin-top: clamp(42px, 7vw, 84px);
}

.jsp-review-dark-story__lower p {
	margin: 0;
	color: rgba(255,255,255,.70);
	line-height: 1.72;
}

.jsp-review-dark-story__number {
	justify-self: end;
	color: rgba(255,255,255,.48);
	font-size: .66rem;
	font-weight: 750;
	letter-spacing: .14em;
}

/* Image mosaic */
.jsp-review-mosaic {
	padding: clamp(92px, 12vw, 170px) 0;
}

.jsp-review-mosaic__heading {
	max-width: 900px;
	margin-bottom: clamp(46px, 7vw, 88px);
}

.jsp-review-mosaic__heading h2 {
	margin: 0;
	font-size: clamp(3.8rem, 8vw, 8rem);
	font-weight: 500;
	line-height: .82;
	letter-spacing: -.075em;
}

.jsp-review-mosaic__grid {
	display: grid;
	grid-template-columns: 1.08fr .72fr;
	grid-template-rows: auto auto;
	gap: clamp(14px, 2.3vw, 30px);
	align-items: start;
}

.jsp-review-mosaic__item {
	margin: 0;
	overflow: hidden;
	border-radius: clamp(16px, 2vw, 28px);
	background: #e8e5df;
}

.jsp-review-mosaic__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jsp-review-mosaic__item--a {
	grid-row: 1 / span 2;
	height: min(94svh, 900px);
}

.jsp-review-mosaic__item--b,
.jsp-review-mosaic__item--c {
	height: min(45svh, 430px);
}

.jsp-review-mosaic__item--b img {
	object-position: center 35%;
}

/* Final CTA */
.jsp-review-final {
	position: relative;
	min-height: min(820px, 92svh);
	display: grid;
	align-items: end;
	overflow: hidden;
	background: #171313;
	color: #fff;
}

.jsp-review-final__media,
.jsp-review-final__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.jsp-review-final__media img {
	display: block;
	object-fit: cover;
	object-position: center 44%;
}

.jsp-review-final__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.10) 62%),
		linear-gradient(0deg, rgba(0,0,0,.44), transparent 65%);
}

.jsp-review-final__content {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, .4fr);
	gap: clamp(30px, 6vw, 90px);
	align-items: end;
	padding-top: 120px;
	padding-bottom: clamp(62px, 8vw, 108px);
}

.jsp-review-final h2 {
	max-width: 970px;
	margin: 0;
	font-size: clamp(3.9rem, 8.4vw, 8.2rem);
	font-weight: 500;
	line-height: .82;
	letter-spacing: -.077em;
}

.jsp-review-final__side {
	display: grid;
	gap: 28px;
}

.jsp-review-final__side p {
	margin: 0;
	color: rgba(255,255,255,.72);
	line-height: 1.7;
}

/* Tablet / mobile */
@media (max-width: 900px) {
	.jsp-review-hero__content,
	.jsp-review-editorial__grid,
	.jsp-review-section-heading,
	.jsp-review-final__content {
		grid-template-columns: 1fr;
	}

	.jsp-review-hero__content {
		gap: 30px;
		padding-top: calc(var(--jsp-header-h) + 90px);
	}

	.jsp-review-hero h1 {
		font-size: clamp(4.1rem, 18vw, 7rem);
	}

	.jsp-review-hero__side {
		max-width: 540px;
	}

	.jsp-review-editorial__media {
		height: min(74svh, 680px);
		min-height: 480px;
	}

	.jsp-review-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jsp-review-product:nth-child(3) {
		display: none;
	}

	.jsp-review-dark-story {
		min-height: 780px;
	}

	.jsp-review-dark-story__lower {
		grid-template-columns: 1fr;
	}

	.jsp-review-dark-story__number {
		justify-self: start;
	}

	.jsp-review-mosaic__grid {
		grid-template-columns: 1fr 1fr;
	}

	.jsp-review-mosaic__item--a {
		height: min(76svh, 680px);
	}

	.jsp-review-mosaic__item--b,
	.jsp-review-mosaic__item--c {
		height: min(36svh, 325px);
	}
}

@media (max-width: 600px) {
	body.js-products-site:has(.jsp-review-home) .jsp-header {
		background: linear-gradient(to bottom, rgba(0,0,0,.44), transparent);
	}

	.jsp-review-hero__media video {
		object-position: 58% center;
	}

	.jsp-review-hero__content {
		padding-bottom: 62px;
	}

	.jsp-review-hero h1 {
		font-size: clamp(3.8rem, 18.5vw, 5.8rem);
	}

	.jsp-review-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.jsp-review-button {
		width: 100%;
	}

	.jsp-review-editorial {
		padding-top: 76px;
		padding-bottom: 88px;
	}

	.jsp-review-editorial__media {
		height: min(68svh, 570px);
		min-height: 420px;
	}

	.jsp-review-editorial__copy h2,
	.jsp-review-section-heading h2 {
		font-size: clamp(2.8rem, 13vw, 4.7rem);
	}

	.jsp-review-product-grid {
		gap: 28px 10px;
	}

	.jsp-review-product__meta {
		grid-template-columns: 1fr;
	}

	.jsp-review-product__arrow {
		display: none;
	}

	.jsp-review-dark-story {
		min-height: 720px;
	}

	.jsp-review-dark-story h2 {
		font-size: clamp(3.6rem, 16vw, 5.8rem);
	}

	.jsp-review-mosaic__heading h2,
	.jsp-review-final h2 {
		font-size: clamp(3.2rem, 15vw, 5.4rem);
	}

	.jsp-review-mosaic__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.jsp-review-mosaic__item--a,
	.jsp-review-mosaic__item--b,
	.jsp-review-mosaic__item--c {
		grid-row: auto;
		height: min(72svh, 590px);
	}

	.jsp-review-mosaic__item--b,
	.jsp-review-mosaic__item--c {
		height: min(55svh, 460px);
	}

	.jsp-review-final {
		min-height: 760px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.js-products-site:has(.jsp-review-home) .jsp-header {
		transition: none;
	}

	.jsp-review-product__media img {
		transition: none;
	}
}


/* v0.8.5 — cinematic scroll layer */
.jsp-review-hero {
	will-change: transform;
}

.jsp-review-hero__media {
	will-change: transform;
	transform-origin: center center;
}

.jsp-review-hero__media video {
	will-change: transform;
}

.jsp-review-hero__content {
	will-change: transform, opacity;
}

.jsp-review-hero__veil {
	will-change: opacity;
}

.jsp-review-hero__statement {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: clamp(2px, .6vw, 10px);
	padding: var(--jsp-gutter);
	color: #fff;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translateY(46px);
}

.jsp-review-hero__statement span,
.jsp-review-hero__statement em,
.jsp-review-hero__statement strong {
	display: block;
	margin: 0;
	font-size: clamp(4rem, 10vw, 9.6rem);
	font-weight: 500;
	line-height: .72;
	letter-spacing: -.082em;
}

.jsp-review-hero__statement em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -.06em;
}

.jsp-review-hero__statement strong {
	font-weight: 500;
}

.jsp-review-hero.is-cinematic-active .jsp-review-hero__index {
	display: flex;
}

@media (max-width: 900px) {
	.jsp-review-hero__statement span,
	.jsp-review-hero__statement em,
	.jsp-review-hero__statement strong {
		font-size: clamp(3.7rem, 17vw, 6.6rem);
	}
}

@media (max-width: 600px) {
	.jsp-review-hero__statement {
		gap: 3px;
	}

	.jsp-review-hero__statement span,
	.jsp-review-hero__statement em,
	.jsp-review-hero__statement strong {
		font-size: clamp(3.2rem, 16vw, 5.2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsp-review-hero__media,
	.jsp-review-hero__media video,
	.jsp-review-hero__content,
	.jsp-review-hero__veil,
	.jsp-review-hero__statement {
		transform: none !important;
		will-change: auto !important;
	}

	.jsp-review-hero__statement {
		display: none !important;
	}
}