/* ==========================================================================
   24Flower page. Follows the leaflet: black, white, Jost capitals,
   the "24" clock roundel. Sits inside the normal Box Trees header/footer.
   ========================================================================== */

.bt-24flower {
	--bt-24-black: #0e0e0f;
	--bt-24-panel: #17171a;
	--bt-24-line: rgba(255, 255, 255, .14);
	--bt-24-soft: rgba(255, 255, 255, .72);
	--bt-24-green: #6ee09a;
	--bt-24-font: "Jost", "Lato", system-ui, sans-serif;
	background: var(--bt-24-black);
}

/* Header and page go black here to match the 24 Flower look */
.bt-24flower .bt-main,
.bt-24flower .bt-header {
	background: var(--bt-24-black);
	border-bottom: 1px solid var(--bt-24-line);
}

.bt-24flower .bt-header.is-scrolled {
	background: rgba(14, 14, 15, .94);
}

.bt-24 {
	font-family: var(--bt-24-font);
	color: #fff;
	background: var(--bt-24-black);
	overflow: hidden;
}

.bt-24 h1,
.bt-24 h2,
.bt-24 h3 {
	font-family: var(--bt-24-font) !important;
	color: #fff;
	letter-spacing: 0;
}

.bt-24 p {
	color: var(--bt-24-soft);
}

.bt-24-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62) !important;
}

.bt-24-title {
	margin: 0 !important;
	font-size: clamp(38px, 5.6vw, 76px) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-transform: uppercase;
}

.bt-24-head {
	max-width: 860px;
	margin: 0 auto clamp(40px, 6vw, 72px);
	text-align: center;
}

.bt-24-head--left {
	margin: 0 0 32px;
	text-align: left;
}

.bt-24-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .5);
	transition: transform .35s var(--bt-ease), background .3s, color .3s, border-color .3s;
}

.bt-24-btn:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
	transform: translateY(-2px);
}

.bt-24-btn--solid {
	color: var(--bt-24-black) !important;
	background: #fff;
	border-color: #fff;
}

.bt-24-btn--solid:hover {
	background: #fff;
	box-shadow: 0 18px 40px -20px rgba(255, 255, 255, .45);
}

.bt-24-btn .bt-icon {
	transition: transform .35s var(--bt-ease);
}

.bt-24-btn:hover .bt-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.bt-24-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(90vh, 860px);
	min-height: min(90svh, 860px);
	isolation: isolate;
}

.bt-24-hero__media,
.bt-24-hero__scrim {
	position: absolute;
	inset: 0;
}

.bt-24-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.bt-24-hero__scrim {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(14, 14, 15, .94) 0%, rgba(14, 14, 15, .7) 38%, rgba(14, 14, 15, .1) 72%),
		linear-gradient(0deg, rgba(14, 14, 15, 1) 0%, rgba(14, 14, 15, 0) 22%);
}

.bt-24-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--bt-max);
	margin: 0 auto;
	padding: 100px var(--bt-gutter);
}

.bt-24-hero__logo {
	display: block;
	width: min(360px, 78vw);
	height: auto;
	margin-bottom: 44px;
}

.bt-24-hero__title {
	margin: 0 0 24px !important;
	font-size: clamp(52px, 8vw, 112px) !important;
	font-weight: 500 !important;
	line-height: .95 !important;
	text-transform: uppercase;
}

.bt-24-hero__text {
	max-width: 480px;
	margin: 0 0 34px;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
}

.bt-24-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.bt-24-hero__hours {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 34px 0 0;
	font-size: 15px;
	letter-spacing: .08em;
	color: #fff !important;
}

@media (max-width: 767px) {
	.bt-24-hero {
		align-items: flex-end;
		min-height: 92svh;
	}

	.bt-24-hero__video {
		object-position: center;
	}

	.bt-24-hero__scrim {
		background: linear-gradient(0deg, rgba(14, 14, 15, .97) 0%, rgba(14, 14, 15, .75) 45%, rgba(14, 14, 15, .15) 100%);
	}

	.bt-24-hero__content {
		padding: 140px var(--bt-gutter) 56px;
	}

	.bt-24-hero__logo {
		margin-bottom: 28px;
	}

	.bt-24-hero__actions .bt-24-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Pick / Tap / Take
   -------------------------------------------------------------------------- */

.bt-24-steps {
	max-width: var(--bt-max);
	margin: 0 auto;
	padding: clamp(80px, 11vw, 150px) var(--bt-gutter);
}

.bt-24-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bt-24-line);
}

/* A line that draws across the three steps as they come into view */
.bt-24-steps__list::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: #fff;
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 1.8s var(--bt-ease) .2s;
}

.bt-24-steps__list:has(.is-in)::before,
html:not(.bt-js) .bt-24-steps__list::before {
	transform: scaleX(1);
}

.bt-24-step {
	position: relative;
	margin: 0 !important;
	padding: 40px 32px 8px 0;
}

.bt-24-step + .bt-24-step {
	padding-left: 32px;
	border-left: 1px solid var(--bt-24-line);
}

.bt-24-step__num {
	display: block;
	margin-bottom: 26px;
	font-size: 13px;
	letter-spacing: .28em;
	color: rgba(255, 255, 255, .5);
}

.bt-24-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 26px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	transition: background .4s, color .4s, transform .5s var(--bt-ease);
}

.bt-24-step__icon .bt-icon {
	width: 28px;
	height: 28px;
}

.bt-24-step:hover .bt-24-step__icon {
	color: var(--bt-24-black);
	background: #fff;
	transform: rotate(-8deg) scale(1.05);
}

.bt-24-step h3 {
	margin: 0 0 12px !important;
	font-size: clamp(34px, 3.4vw, 48px) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-transform: uppercase;
}

.bt-24-step p {
	max-width: 280px;
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.bt-24-steps__list {
		grid-template-columns: 1fr;
	}

	.bt-24-step,
	.bt-24-step + .bt-24-step {
		padding: 32px 0;
		border-left: 0;
		border-bottom: 1px solid var(--bt-24-line);
	}
}

/* --------------------------------------------------------------------------
   Pick a number
   -------------------------------------------------------------------------- */

.bt-24-numbers {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(40px, 7vw, 100px);
	align-items: center;
	max-width: var(--bt-max);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--bt-gutter) clamp(80px, 11vw, 150px);
}

.bt-24-numbers__intro p {
	max-width: 440px;
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.65;
}

.bt-24-numbers__intro .bt-24-note {
	font-size: 13px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .45);
}

.bt-24-numbers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0;
	padding: 18px;
	list-style: none;
	background: var(--bt-24-panel);
	border: 1px solid var(--bt-24-line);
	box-shadow: inset 0 0 60px rgba(255, 255, 255, .03);
}

.bt-24-bouquet {
	position: relative;
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #000;
}

.bt-24-bouquet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--bt-ease), filter .6s;
}

.bt-24-bouquet::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 24px rgba(160, 200, 255, .12);
	pointer-events: none;
}

.bt-24-bouquet:hover img {
	transform: scale(1.07);
}

.bt-24-numbers__grid:hover .bt-24-bouquet:not(:hover) img {
	filter: brightness(.55) saturate(.8);
}

.bt-24-bouquet__num {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bt-24-black);
	background: #fff;
	border-radius: 50%;
}

@media (max-width: 899px) {
	.bt-24-numbers {
		grid-template-columns: 1fr;
	}

	.bt-24-numbers__grid {
		padding: 10px;
		gap: 6px;
	}
}

/* --------------------------------------------------------------------------
   Find us
   -------------------------------------------------------------------------- */

.bt-24-find {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	background: var(--bt-24-panel);
	border-top: 1px solid var(--bt-24-line);
	border-bottom: 1px solid var(--bt-24-line);
}

.bt-24-find__media {
	position: relative;
	min-height: 480px;
	overflow: hidden;
}

.bt-24-find__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bt-24-find__body {
	padding: clamp(56px, 8vw, 110px) var(--bt-gutter);
}

.bt-24-facts {
	display: grid;
	gap: 0;
	margin: 0 0 36px;
}

.bt-24-facts > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--bt-24-line);
}

.bt-24-facts dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.bt-24-facts dd {
	margin: 0;
	font-size: 19px;
	line-height: 1.45;
	color: #fff;
}

.bt-24-facts dd span {
	font-size: 15px;
	color: rgba(255, 255, 255, .6);
}

@media (max-width: 899px) {
	.bt-24-find {
		grid-template-columns: 1fr;
	}

	.bt-24-find__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.bt-24-facts > div {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* --------------------------------------------------------------------------
   Coming soon: 24 hours
   -------------------------------------------------------------------------- */

.bt-24-soon {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
	max-width: 980px;
	margin: 0 auto;
	padding: clamp(80px, 11vw, 140px) var(--bt-gutter);
}

.bt-24-soon p {
	max-width: 460px;
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
}

.bt-24-clock {
	position: relative;
	width: clamp(140px, 18vw, 200px);
}

.bt-24-clock img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 599px) {
	.bt-24-soon {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.bt-24-clock {
		margin: 0 auto;
	}

	.bt-24-soon p {
		margin-left: auto;
		margin-right: auto;
	}
}

/* --------------------------------------------------------------------------
   Bespoke cross-link
   -------------------------------------------------------------------------- */

.bt-24-bespoke {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(72px, 10vw, 130px) var(--bt-gutter);
	text-align: center;
	border-top: 1px solid var(--bt-24-line);
}

.bt-24-bespoke__logo {
	display: block;
	width: 180px;
	height: auto;
	margin: 0 auto 36px;
	opacity: .9;
}

.bt-24-bespoke h2 {
	margin: 0 0 16px !important;
	font-family: var(--bt-serif) !important;
	font-size: clamp(30px, 3.6vw, 44px) !important;
	font-weight: 500 !important;
}

.bt-24-bespoke p {
	margin: 0 auto 34px;
	font-size: 18px;
	line-height: 1.6;
}

.bt-24-bespoke__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Footer blends into the dark page */
.bt-24flower .bt-footer,
.bt-24flower .bt-footer__call {
	background: var(--bt-24-black);
}

.bt-24flower .bt-footer__call {
	border-top: 1px solid var(--bt-24-line);
}