:root {
	--background: #0b0b0e;
	--surface: #111116;
	--text: #fff;
	--muted: rgba(255, 255, 255, .72);
	--soft: rgba(255, 255, 255, .48);
	--accent: #e8dcc4;
	--accent-soft: rgba(232, 220, 196, .14);
	--line: rgba(255, 255, 255, .18);
	--heading-font: Georgia, serif;
	--body-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif
}

* {
	box-sizing: border-box
}

html,
body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font-family: var(--body-font);
	-webkit-font-smoothing: antialiased
}

.site-shell {
	overflow: visible;
}

.hero-section,
.contact-section {
	min-height: 100vh;
	position: relative;
	display: grid;
	place-items: center;
	padding: 32px 7vw
}

.hero-section {
	text-align: center
}

.brand-label {
	position: absolute;
	top: 36px;
	left: 7vw;
	right: 7vw;
	margin: 0;
	color: var(--accent);
	font-family: var(--heading-font);
	font-size: clamp(13px, 1.2vw, 18px);
	letter-spacing: .42em;
	text-transform: uppercase
}

.hero-content {
	display: grid;
	justify-items: center;
	gap: 18px;
	max-width: 900px
}

.eyebrow {
	margin: 0;
	/*color: var(--soft);*/
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .32em;
	text-transform: uppercase
}

.accent {
	color: var(--accent)
}

h1,
h2 {
	margin: 0;
	font-family: var(--heading-font);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.025em
}

h1 {
	color: var(--accent);
	font-size: clamp(52px, 7vw, 108px)
}

h2 {
	font-size: clamp(42px, 6.2vw, 74px)
}

.location,
.contact-panel p {
	margin: 0;
	/*color: var(--muted);*/
	line-height: 1.65
}

.pill {
	margin: 8px 0 0;
	padding: 9px 18px;
	border: 1px solid rgba(232, 220, 196, .42);
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase
}

.scroll-hint {
	margin: 40px 0 0;
	/*color: var(--soft);*/
	font-size: 11px;
	letter-spacing: .32em;
	text-transform: uppercase
}

.tour-section {
	height: 1500vh;
	position: relative;
	background: #000;
	overflow: visible;
}

.tour-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: #000;
	z-index: 1;
}

.tour-canvas {
	width: 100%;
	height: 100%;
	display: block;
	background: #000
}

.tour-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: center;
	justify-items: end;
	padding: 32px 7vw 40px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .55))
}

.tour-copy {
	width: min(420px, 40vw);
	transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease
}

.tour-copy.is-changing {
	opacity: 0;
	transform: translateY(12px);
	filter: blur(10px)
}

.tour-step {
	margin: 0 0 14px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .32em;
	text-transform: uppercase
}

.tour-copy h2 {
	font-size: clamp(34px, 4.8vw, 64px)
}

.tour-copy p:not(.tour-step) {
	margin: 18px 0 0;
	color: var(--muted);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.65
}

.tour-progress {
	position: absolute;
	right: 7vw;
	bottom: 42px;
	width: min(360px, 38vw);
	height: 1px;
	overflow: hidden;
	background: rgba(255, 255, 255, .22)
}

.tour-progress span {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--accent)
}

.tour-loader {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 5;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .7);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	transition: opacity 400ms ease, visibility 400ms ease
}

.tour-loader.is-hidden {
	opacity: 0;
	visibility: hidden
}

.contact-section {
	align-items: start;
	justify-items: center;
	padding-top: 11vh
}

.contact-panel {
	width: min(680px, 100%);
	display: grid;
	gap: 22px
}

.contact-form {
	display: grid;
	gap: 18px;
	margin-top: 14px
}

.contact-form label {
	display: grid;
	gap: 8px
}

.contact-form label span {
	/*color: var(--soft);*/
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--accent);
	outline: none;
	background: transparent;
	color: var(--text);
	padding: 13px 0
}

.contact-form button {
	justify-self: start;
	border: 1px solid var(--accent);
	border-radius: 999px;
	background: transparent;
	color: var(--accent);
	padding: 17px 28px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase
}

@media(max-width:860px) {
	.tour-overlay {
		align-items: end;
		justify-items: start;
		padding-bottom: 90px;
		background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .7))
	}

	.tour-copy {
		width: min(520px, 100%)
	}

	.tour-progress {
		left: 7vw;
		right: 7vw;
		width: auto
	}
}

/* v2.3.0-alpha.6 brand-studio coverage for listing pages */
body.listing-public-page {
    background: var(--site-bg);
    color: var(--site-nav-text);
    font-family: var(--site-body-font);
}

body.listing-public-page .hero-section,
body.listing-public-page .contact-section {
    background-color: var(--site-bg);
    background-size: cover;
    background-position: center;
}

.listing-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.58));
    pointer-events: none;
}

body.listing-public-page .hero-section > *:not(.listing-hero-overlay) {
    position: relative;
    z-index: 1;
}

body.listing-public-page .brand-label,
body.listing-public-page h1,
body.listing-public-page .pill,
body.listing-public-page .accent,
body.listing-public-page .eyebrow,
body.listing-public-page .tour-step,
body.listing-public-page .scroll-hint {
    color: var(--site-accent);
}

body.listing-public-page h1,
body.listing-public-page h2,
body.listing-public-page .tour-copy h2,
body.listing-public-page .contact-panel h2 {
    font-family: var(--site-heading-font);
    opacity: 70%;
}

body.listing-public-page .location,
body.listing-public-page .tour-copy p,
body.listing-public-page .contact-panel p,
body.listing-public-page .contact-form span {
    color: var(--site-text);
}

body.listing-public-page .pill {
    border-color: var(--site-accent-soft);
    background: var(--site-accent-soft);
    border-radius: var(--site-button-radius);
}

body.listing-public-page .contact-panel {
    background: var(--site-card);
    color: var(--site-text);
    border-radius: var(--site-card-radius);
    box-shadow: var(--site-shadow);
}

body.listing-public-page .contact-panel h2 {
    color: var(--site-heading);
}

body.listing-public-page .contact-form input,
body.listing-public-page .contact-form textarea {
    border-color: var(--site-accent-soft);
    background: var(--site-surface-soft);
    color: var(--site-heading);
    font-family: var(--site-body-font);
}

body.listing-public-page .contact-form button {
    background: var(--site-accent);
    color: var(--site-bg);
    border-color: var(--site-accent);
    border-radius: var(--site-button-radius);
    font-family: var(--site-body-font);
}

body.listing-public-page .tour-progress {
    background: color-mix(in srgb, var(--site-accent), transparent 75%);
}

body.listing-public-page .tour-progress span {
    background: var(--site-accent);
}