/* ==========================================================================
   S-Park, Serenia Industrial Park
   Sizes follow the 1920px layout: N * var(--u) = N design px.
   Curved section edges use vw so they keep the same shape at every width.
   ========================================================================== */

/* 1. FONTS
   ========================================================================== */

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Medium.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* SDP main menu fonts. sdp-menu.css points these at older .otf files, which are slightly
   narrower than the woff2 files the main SDP site (sdp-menu-opt.min.css) uses. Redefining them
   here, after sdp-menu.css, makes the menu match the Signature Plus microsite.
   Metropolis-Regular is the same file as ../fonts/Metropolis-Regular.woff2. */
@font-face {
	font-family: "Metropolis-SemiBold";
	src: url(../fonts/sdp-menu/Metropolis-SemiBold.woff2) format("woff2");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis-Bold";
	src: url(../fonts/sdp-menu/Metropolis-Bold.woff2) format("woff2");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis-Medium";
	src: url(../fonts/sdp-menu/Metropolis-Medium.woff2) format("woff2");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis-Regular";
	src: url(../fonts/Metropolis-Regular.woff2) format("woff2");
	font-style: normal;
	font-display: swap;
}


/* 2. BASE
   ========================================================================== */

:root {
	--u: clamp(0.6px, calc(100vw / 1920), 1px);
	--gold: #d7bb98;
	--copper: #fac7a9;
	--peach-line: #e6b59e;
	--dark: #231f20;
	--green: #304631;
	--beige: #e3dcd7;
	--sdp-h: 64px;
	--nav-top: calc(var(--sdp-h) + 36 * var(--u));
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	line-height: 1.5;
	background-color: var(--dark);
	color: #fff;
	font-family: "Metropolis", Arial, sans-serif;
	font-weight: 400;
}

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

main h1,
main h2,
main h3,
main p {
	margin: 0;
}

.sp-container {
	width: calc(100% - 32px);
	max-width: calc(1616 * var(--u));
	margin: 0 auto;
}

.sp-title {
	color: var(--gold);
	font-size: calc(38 * var(--u));
	font-weight: 700;
	line-height: 1.21;
	text-align: center;
	text-transform: uppercase;
}

.sp-lead {
	font-size: calc(24 * var(--u));
	line-height: 1.21;
	text-align: center;
}

/* Grid of small copper stars used as decoration */
.sp-stars {
	position: absolute;
	background: url(../images/stars.svg) repeat;
	background-size: calc(20 * var(--u)) calc(20 * var(--u));
	pointer-events: none;
	z-index: 1;
}


/* 3. HEADER / NAV
   ========================================================================== */

.sp-header {
	position: fixed;
	top: var(--nav-top);
	left: 0;
	right: 0;
	z-index: 1000;
	pointer-events: none;
	transition: top 0.3s ease;
	/* The nav lines up with the SDP main menu above it: from the left edge of the SDP logo to the
	   right edge of its burger icon. Values follow the SDP menu's own padding at each breakpoint. */
	--edge-l: 84px;
	--edge-r: 64px;
}

@media (max-width: 1399px) {
	.sp-header {
		--edge-l: 50px;
		--edge-r: 30px;
	}
}

/* At 1200px and below the SDP menu switches to its mobile bar */
@media (max-width: 1200px) {
	.sp-header {
		--edge-l: 29px;
		--edge-r: 30px;
	}
}

.sp-nav {
	position: relative;
	display: flex;
	align-items: center;
	height: 58px;
	margin: 0 var(--edge-r) 0 var(--edge-l);
	padding: 0 calc(16 * var(--u)) 0 calc(46 * var(--u));
	box-sizing: border-box;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	pointer-events: auto;
	transition: background 0.3s ease, margin 0.3s ease, height 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;
}

.sp-header.is-scrolled .sp-nav {
	background: rgba(35, 31, 32, 0.92);
}

/* Logo, link and Register sizes match the Signature Plus microsite's second menu */
.sp-nav__logo img {
	display: block;
	width: 136px;
	height: auto;
}

.sp-nav__links {
	display: flex;
	align-items: center;
	gap: calc(100 * var(--u));
	margin-left: auto;
	margin-right: calc(86 * var(--u));
}

.sp-nav__links a {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sp-nav__links a:hover {
	color: var(--copper);
}

.sp-nav__register {
	display: flex;
	align-items: center;
	justify-content: center;
	/* About 11% of the menu width, like the reference; stays the same size in the scrolled bar */
	width: calc((100vw - var(--edge-l) - var(--edge-r)) * 0.108);
	min-width: 110px;
	height: 44px;
	box-sizing: border-box;
	border: 1.5px solid #fff;
	border-radius: 30px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.sp-nav__register:hover {
	background: #fff;
	color: var(--dark);
}

.sp-nav__toggle {
	display: none;
}

/* Once scrolled, the desktop pill becomes a full-width bar (content stays where the pill was) */
@media (min-width: 1025px) {
	.sp-header.is-scrolled .sp-nav {
		height: 58px;
		margin: 0;
		padding: 0 calc(var(--edge-r) + 16 * var(--u)) 0 calc(var(--edge-l) + 46 * var(--u));
		border-radius: 0;
		background: #1d1a1c;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Scrolling down slides the SDP main menu out of view (js/main.js adds .sp-nav-min) */
#mob-nav-cont {
	transition: transform 0.3s ease;
}

body.sp-nav-min:not(.mob-menu-on) #main-nav-cont,
body.sp-nav-min:not(.mob-menu-on) #mob-nav-cont {
	transform: translateY(calc(-1 * var(--sdp-h) - 2px));
}


/* 4. HERO
   ========================================================================== */

/* The grass sits in ::before, clipped a little short of the hero's curve; the strip left below it shows
   the hero's own background, the same grass under a dark tint (the dark band along the curve in the PDF) */
.sp-hero {
	--band: calc(30 * var(--u));
	--grass-clip: ellipse(156% calc(100% - var(--band)) at 50% 0);
	position: relative;
	z-index: 2;
	aspect-ratio: 1920 / 1500;
	background:
		linear-gradient(rgba(32, 23, 21, 0.67), rgba(32, 23, 21, 0.67)),
		#6f8db7 url(../images/hero-spark.webp) center top / cover no-repeat;
	clip-path: ellipse(156% 100% at 50% 0);
	text-align: center;
}

.sp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #6f8db7 url(../images/hero-spark.webp) center top / cover no-repeat;
	clip-path: var(--grass-clip);
}

/* The SDP main menu is fixed over the top of the hero */
.sp-hero__inner {
	padding-top: calc(var(--sdp-h) + 175 * var(--u));
}

.sp-hero__brands {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(33 * var(--u));
}

.sp-hero__brands img:first-child {
	width: calc(160 * var(--u));
}

.sp-hero__brands img:last-child {
	width: calc(190 * var(--u));
}

.sp-hero__logo {
	margin-top: calc(58 * var(--u)) !important;
}

.sp-hero__logo img {
	width: calc(390 * var(--u));
	margin: 0 auto;
}

/* Green pill button with light streaks above and below */
.sp-btn-glow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(83 * var(--u));
	padding: 0 calc(26 * var(--u));
	height: calc(44 * var(--u));
	border-radius: 30px;
	background: var(--green);
	color: #fff;
	font-size: calc(25 * var(--u));
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sp-btn-glow::before,
.sp-btn-glow::after {
	content: "";
	position: absolute;
	left: 10%;
	width: 80%;
	height: calc(10 * var(--u));
	background: url(../images/cta-glow.webp) center / 100% 100% no-repeat;
	mix-blend-mode: plus-lighter;
	pointer-events: none;
}

.sp-btn-glow::before {
	top: calc(-5 * var(--u));
}

.sp-btn-glow::after {
	bottom: calc(-5 * var(--u));
}

.sp-btn-glow:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px rgba(250, 199, 169, 0.6);
}

.sp-hero__intro {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(1213 / 1500 * 100%);
	padding: 0 16px;
}

.sp-hero__intro p {
	margin-top: calc(22 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.21;
}


/* 5. CAFE GLOW BAND + CONNECTED COMMUNITY
   ========================================================================== */

.sp-glow-band {
	position: relative;
	z-index: 1;
	height: 60.83vw;
	margin-top: -13.54vw;
	overflow: hidden;
	background: #1a1512;
}

.sp-glow-band img {
	position: absolute;
	top: 0;
	left: -3.87vw;
	width: 107.7vw;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Teal and gold light across the bottom of the hero's curve, exported from the PDF on black and screened
   over the hero and the cafe image like the PDF does. Zero-height layer between the two so it sits above both */
.sp-edge-glow {
	position: relative;
	z-index: 3;
	height: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}

.sp-edge-glow img {
	position: absolute;
	top: 0;
	left: 50%;
	/* Never wider than the screen, or the page scrolls sideways */
	width: min(calc(1520 * var(--u)), 100vw);
	max-width: none;
	height: auto;
	/* Streak's centre line sits right at the bottom of the curve */
	transform: translate(-50%, -51%);
}

.sp-stars--band {
	top: 31.5vw;
	right: calc(95 * var(--u));
	width: calc(100 * var(--u));
	height: calc(200 * var(--u));
}

/* Dark dome that rises over the bottom of the cafe image */
.sp-connect {
	position: relative;
	z-index: 3;
	margin-top: -22.03vw;
	padding: 5.4vw 0 calc(80 * var(--u));
	background: var(--dark);
	clip-path: circle(84.4vw at 50% 84.4vw);
}

.sp-connect .sp-lead {
	max-width: calc(1290 * var(--u));
	margin: calc(48 * var(--u)) auto 0;
}

.sp-connect__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: calc(110 * var(--u));
}

.sp-connect__item {
	padding: 0 calc(20 * var(--u));
	text-align: center;
}

.sp-connect__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: calc(110 * var(--u));
}

.sp-connect__icon img {
	width: calc(var(--w) * var(--u));
}

.sp-connect__item h3 {
	margin-top: calc(30 * var(--u));
	color: var(--copper);
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.sp-connect__item p {
	max-width: calc(360 * var(--u));
	margin: calc(22 * var(--u)) auto 0;
	font-size: calc(16.3 * var(--u));
	line-height: 1.36;
}


/* 6. AERIAL MAP
   ========================================================================== */

.sp-map img {
	width: 100%;
}


/* 7. BETTER BUSINESS ENVIRONMENT
   ========================================================================== */

.sp-env {
	position: relative;
	background: #131313;
}

/* Peach frame spanning the text block and the shopfront photo */
.sp-env::after {
	content: "";
	position: absolute;
	top: 3.8vw;
	left: 1.6vw;
	right: 1.97vw;
	bottom: 5.05vw;
	border: max(2px, 0.21vw) solid var(--peach-line);
	pointer-events: none;
	z-index: 2;
}

.sp-env__text {
	position: relative;
	padding: calc(150 * var(--u)) 16px calc(95 * var(--u));
	background: linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.55)),
		url(../images/bg-dark-wave.webp) center / cover no-repeat;
}

.sp-env__text::before,
.sp-env__text::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 50%;
	height: calc(30 * var(--u));
	background: url(../images/frame-glow.webp) center / 100% 100% no-repeat;
	transform: translateX(-80%);
	mix-blend-mode: plus-lighter;
	pointer-events: none;
	z-index: 3;
}

.sp-env__text::before {
	top: calc(3.8vw - 15 * var(--u));
}

.sp-env__text::after {
	bottom: calc(-15 * var(--u));
	transform: translateX(-30%);
}

.sp-env__text .sp-lead {
	max-width: calc(730 * var(--u));
	margin: calc(55 * var(--u)) auto 0;
	text-align: left;
}

.sp-env__photo img {
	width: 100%;
	height: 48.7vw;
	object-fit: cover;
}


/* 8. FEATURES
   ========================================================================== */

.sp-features {
	position: relative;
	padding: calc(50 * var(--u)) 0 calc(80 * var(--u));
	background: var(--beige);
	color: var(--dark);
}

.sp-stars--features {
	top: calc(20 * var(--u));
	left: calc(25 * var(--u));
	width: calc(100 * var(--u));
	height: calc(180 * var(--u));
}

.sp-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	row-gap: calc(115 * var(--u));
	max-width: calc(1400 * var(--u));
	margin: 0 auto;
}

.sp-feature {
	padding: 0 calc(20 * var(--u));
	text-align: center;
}

.sp-feature__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: calc(165 * var(--u));
}

.sp-feature__icon img {
	width: calc(var(--w) * var(--u));
}

.sp-feature p {
	max-width: calc(400 * var(--u));
	margin: calc(38 * var(--u)) auto 0;
	font-size: calc(18 * var(--u));
	font-weight: 500;
	line-height: 1.22;
}


/* 9. FLOOR PLAN
   ========================================================================== */

.sp-fp__head {
	position: relative;
	padding: calc(70 * var(--u)) 0 calc(30 * var(--u));
	background: var(--green);
	border-bottom: calc(5 * var(--u)) solid var(--copper);
}

/* Light streak running along the copper line */
.sp-fp__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-17 * var(--u));
	width: 47%;
	height: calc(30 * var(--u));
	background: url(../images/frame-glow.webp) center / 100% 100% no-repeat;
	mix-blend-mode: plus-lighter;
	pointer-events: none;
}

.sp-stars--fp-head {
	top: calc(-38 * var(--u));
	right: calc(67 * var(--u));
	width: calc(180 * var(--u));
	height: calc(100 * var(--u));
}

.sp-fp__head-row {
	display: flex;
	align-items: center;
	max-width: calc(1566 * var(--u));
}

.sp-fp__type-label,
.sp-fp__sub {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sp-fp__type-label {
	color: var(--copper);
	font-size: calc(21 * var(--u));
}

.sp-fp__type {
	color: var(--copper);
	font-size: calc(54 * var(--u));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.sp-fp__sub {
	font-size: calc(20.4 * var(--u));
}

.sp-fp__chevron {
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	margin: calc(20 * var(--u)) calc(36 * var(--u)) 0 calc(44 * var(--u));
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

.sp-fp__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(174 * var(--u));
	padding: 0 calc(24 * var(--u));
	height: calc(46 * var(--u));
	margin-top: calc(20 * var(--u));
	box-sizing: border-box;
	border: calc(3 * var(--u)) solid var(--copper);
	border-radius: 30px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: calc(29 * var(--u));
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.sp-fp__pill:focus-visible {
	background: var(--copper);
	color: var(--green);
	outline: none;
}

/* Hover only on mouse devices, so the pill doesn't stay highlighted after a tap on phones */
@media (hover: hover) {
	.sp-fp__pill:hover {
		background: var(--copper);
		color: var(--green);
	}
}

/* Mobile replaces the chevron and pill with this dropdown (section 13) */
.sp-fp__select {
	display: none;
}

.sp-fp__body {
	position: relative;
	padding: calc(30 * var(--u)) 0 calc(20 * var(--u));
	background: linear-gradient(to bottom,
			#080705 0,
			#2d2615 calc(100% - 167 * var(--u)),
			var(--green) calc(100% - 167 * var(--u)));
}

.sp-stars--fp-body {
	bottom: calc(132 * var(--u));
	left: calc(118 * var(--u));
	width: calc(180 * var(--u));
	height: calc(100 * var(--u));
}

.sp-fp__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 653fr) minmax(0, 940fr);
	column-gap: calc(50 * var(--u));
	max-width: calc(1643 * var(--u));
	transition: opacity 0.2s ease;
}

/* Brief fade while switching unit type (js/main.js) */
.sp-fp__grid.is-switching {
	opacity: 0;
}

.sp-fp__list {
	display: grid;
	grid-template-columns: repeat(2, calc(327 * var(--u)));
	row-gap: calc(52 * var(--u));
	margin: calc(64 * var(--u)) 0 0;
}

/* Spec text sizes follow the Signature Plus microsite (.fp-spec-label / .fp-spec-val) */
.sp-fp__list dt {
	color: var(--copper);
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.sp-fp__list dd {
	margin: 4px 0 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.03em;
}

.sp-fp__siteplan {
	width: calc(355 * var(--u));
	margin: calc(40 * var(--u)) 0 0 auto;
}

/* Plan widths keep each type at its PDF scale, so both plans are the same height */
.sp-fp__card {
	--fp-w: 57.5%;
	position: relative;
	overflow: hidden;
	padding: calc(59 * var(--u)) 0 calc(70 * var(--u));
	border-radius: calc(20 * var(--u));
	background: linear-gradient(135deg, #faf9f9 0%, #e6e5e3 50%, #b7b4af 100%);
}

.sp-fp__card[data-type="b"] {
	--fp-w: 90.6%;
}

.sp-fp__card img {
	width: var(--fp-w);
	margin: 0 auto;
}

.sp-fp__labels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: var(--fp-w);
	margin: calc(4 * var(--u)) auto 0;
	color: #ab7f6f;
	font-size: calc(19.8 * var(--u));
	font-weight: 500;
	text-align: center;
}

/* Zoom, like the Signature Plus microsite: + / − scale the plan (js/main.js); while zoomed in it can be dragged.
   The zoomed plan spills into the card's padding and is clipped by the card itself */
.sp-fp__zoom {
	transform-origin: center center;
	transition: transform 0.3s ease;
}

.sp-fp__viewport.is-zoomed {
	cursor: grab;
	/* Touch drags move the plan instead of scrolling the page */
	touch-action: none;
}

.sp-fp__viewport.is-dragging {
	cursor: grabbing;
}

.sp-fp__viewport.is-dragging .sp-fp__zoom {
	transition: none;
}

.sp-fp__viewport img {
	-webkit-user-drag: none;
	user-select: none;
}

.sp-fp__zoom-controls {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-fp__zoom-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: #1c1c1c;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sp-fp__zoom-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

@media (hover: hover) {
	.sp-fp__zoom-btn:not(:disabled):hover {
		background: #333;
		transform: scale(1.1);
	}
}


/* 10. CTA BANNER
   ========================================================================== */

.sp-cta {
	padding: calc(88 * var(--u)) 16px calc(70 * var(--u));
	background: linear-gradient(to bottom, #e6b59d, #c29484);
	color: #000;
	text-align: center;
}

.sp-cta__pre {
	font-size: calc(26 * var(--u));
	text-transform: uppercase;
}

.sp-cta__title {
	margin-top: calc(8 * var(--u)) !important;
	font-size: calc(50 * var(--u));
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sp-cta__glow {
	width: calc(820 * var(--u));
	margin: calc(-6 * var(--u)) auto 0;
	mix-blend-mode: screen;
}

.sp-cta__post {
	margin-top: calc(18 * var(--u)) !important;
	font-size: calc(24 * var(--u));
}


/* 11. REGISTER
   ========================================================================== */

.sp-register {
	background: linear-gradient(rgba(20, 18, 18, 0.7), rgba(20, 18, 18, 0.7)),
		var(--dark) url(../images/bg-dark-wave.webp) center / cover no-repeat;
}

.sp-register__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.sp-register__info {
	padding: 46px 0;
}

.sp-gallery-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	gap: 14px;
	width: 80%;
	height: 100%;
	margin: 0 auto;
	padding: 32px 16px;
	box-sizing: border-box;
	background: #c7c8c9;
	color: var(--dark);
	text-align: center;
}

.sp-gallery-card__logo {
	width: 100px;
	height: auto;
}

.sp-gallery-card h3 {
	font-size: 1.2rem;
	font-weight: 700;
}

.sp-gallery-card p {
	font-size: 0.9rem;
	line-height: 1.6;
}

.sp-gallery-card a {
	color: inherit;
}

.sp-gallery-card__links {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 32rem;
}

.sp-gallery-card__links a {
	flex: 1;
	padding: 0.8rem 0;
	background: var(--dark);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.sp-register__form {
	padding: 48px 24px;
	text-align: center;
}

.sp-register__form h2 {
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.sp-register__sub {
	margin: 6px 0 1.75rem !important;
	text-transform: uppercase;
}

#frmLeadGen {
	max-width: 32rem;
	margin: 0 auto;
	text-align: left;
}

#frmLeadGen input[type="text"],
#frmLeadGen input[type="email"],
#frmLeadGen input[type="tel"] {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
	padding: 0.85rem 1.25rem;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 6px;
	background: rgba(30, 30, 30, 0.45);
	color: #fff;
	font: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

#frmLeadGen input:focus {
	border-color: #fff;
	background: rgba(45, 45, 45, 0.65);
}

#frmLeadGen input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.cjbc-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 1.5rem 0;
	font-size: 0.68rem;
	line-height: 1.45;
}

.cjbc-container input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #fff;
}

.cjbc-container a {
	color: #fff;
	text-decoration: underline;
}

/* reCAPTCHA checkbox (rendered by js/form.js) */
.rcaptcha-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

#rcaptcha-warning {
	color: #fac7a9;
	font-size: 0.85rem;
	text-align: center;
}

#frmLeadGen button {
	display: block;
	width: 100%;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: #cca08b;
	color: #2d2522;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#frmLeadGen button:hover {
	background: #bf917b;
}

.sp-copyright-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* Copyright Notice popup (native <dialog>, opened by js/main.js) */
.sp-dialog {
	width: calc(100% - 32px);
	max-width: 600px;
	max-height: calc(100% - 32px);
	padding: 24px;
	box-sizing: border-box;
	border: 1px solid #e2b398;
	border-radius: 12px;
	background: #1e1b1b;
	color: #fff;
	font-family: "Metropolis", Arial, sans-serif;
}

.sp-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.sp-dialog h3 {
	margin: 0 40px 16px 0;
	color: #e2b398;
	font-size: 1.25rem;
	font-weight: 700;
}

.sp-dialog__body {
	max-height: 380px;
	overflow-y: auto;
	padding-right: 8px;
	color: #ddd;
	font-size: 0.85rem;
	line-height: 1.6;
	text-align: justify;
}

.sp-dialog__close {
	position: absolute;
	top: 10px;
	right: 14px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: #e2b398;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}


/* 12. FOOTER
   ========================================================================== */

/* sdp-footer.css leaves link colour to the main site stylesheet */
#bottom__footer a {
	color: inherit;
}

.sp-footer {
	padding: 14px 16px;
	background: var(--dark);
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	text-align: center;
}

.sp-footer p {
	margin: 0;
}


/* 13. MEDIA QUERIES
   ========================================================================== */

@media (max-width: 1024px) {
	.sp-nav {
		height: 52px;
		padding: 0 12px 0 20px;
		border-radius: 40px;
		background: linear-gradient(180deg, rgba(67, 63, 65, 0.9) 0%, rgba(38, 35, 37, 0.9) 100%);
		border: 1px solid rgba(255, 255, 255, 0.12);
	}

	.sp-nav__logo img {
		width: 101px;
	}

	.sp-nav__register {
		width: auto;
		min-width: 0;
		height: 28px;
		margin-left: auto;
		padding: 0 18px;
		border-width: 1.5px;
		border-color: var(--copper);
		color: var(--copper);
		font-size: 12px;
		font-weight: 700;
	}

	.sp-nav__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		order: 3;
		width: 40px;
		height: 40px;
		margin-left: 8px;
		padding: 8px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.sp-nav__toggle span {
		display: block;
		height: 2.5px;
		border-radius: 2px;
		background: var(--copper);
	}

	.sp-nav__links {
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		gap: 0;
		margin: 0;
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 20px;
		background: var(--dark);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		overflow: hidden;
	}

	.sp-nav__links.is-open {
		display: flex;
	}

	.sp-nav__links a {
		width: 100%;
		padding: 13px 24px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		font-size: 14px;
		text-align: center;
	}

	.sp-nav__links a:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.sp-title {
		font-size: 22px;
	}

	.sp-lead {
		font-size: 15px;
		line-height: 1.45;
	}

	/* Hero: taller than the desktop ratio so the logos clear the shopfront and the intro still sits on the grass.
	   The photo keeps a fixed 680px height pinned to the bottom; above it the sky carries on as a gradient
	   matching the colours along the photo's top edge */
	.sp-hero {
		--hero-h: 680px;
		aspect-ratio: auto;
		min-height: 820px;
		--grass-clip: ellipse(120% calc(100% - var(--band)) at 50% 0);
		/* Bottom strip: the dark band (tinted grass colour); behind the photo: the sky */
		background:
			linear-gradient(#22221a, #22221a) 50% 100% / 100% 140px no-repeat,
			linear-gradient(to right, #a4b7ca 10%, #869fbd 20%, #8199be 30%, #6c8db9 40%, #6385b5 50%, #5f7eb0 60%, #5777ae 70%, #506da5 80%, #45659c 90%, #3f5f96)
				50% 0 / calc(var(--hero-h) * 1920 / 1617) 100% no-repeat,
			#6f8db7;
		clip-path: ellipse(120% 100% at 50% 0);
	}

	/* The photo's top edge fades into the sky so there's no hard line (the corner trees otherwise get cut off) */
	.sp-hero::before {
		background-size: auto var(--hero-h);
		background-position: 50% 100%;
		-webkit-mask-image: linear-gradient(transparent calc(100% - var(--hero-h)), #000 calc(100% - var(--hero-h) + 90px));
		mask-image: linear-gradient(transparent calc(100% - var(--hero-h)), #000 calc(100% - var(--hero-h) + 90px));
	}

	.sp-edge-glow img {
		width: 100vw;
	}

	.sp-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to bottom, transparent 55%, rgba(10, 20, 10, 0.75));
		clip-path: var(--grass-clip);
		pointer-events: none;
	}

	.sp-hero__inner {
		padding-top: calc(var(--sdp-h) + 84px);
	}

	.sp-hero__brands img:first-child {
		width: 110px;
	}

	.sp-hero__brands img:last-child {
		width: 130px;
	}

	.sp-hero__brands {
		gap: 20px;
	}

	.sp-hero__logo {
		margin-top: 28px !important;
	}

	.sp-hero__logo img {
		width: 230px;
	}

	.sp-btn-glow {
		margin-top: 32px;
		height: 40px;
		padding: 0 24px;
		font-size: 16px;
	}

	.sp-btn-glow::before,
	.sp-btn-glow::after {
		height: 8px;
	}

	.sp-hero__intro {
		top: auto;
		bottom: 70px;
		z-index: 1;
	}

	.sp-hero__intro p {
		margin-top: 12px;
		font-size: 15px;
		line-height: 1.45;
	}

	/* The stacked section is too tall for the circle clip, so round the top corners instead */
	.sp-connect {
		padding: 56px 0 48px;
		clip-path: none;
		border-radius: 50% 50% 0 0 / 64px 64px 0 0;
	}

	.sp-connect .sp-lead {
		margin-top: 20px;
	}

	.sp-connect__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
		margin-top: 44px;
	}

	.sp-connect__icon {
		height: 72px;
	}

	.sp-connect__icon img {
		width: calc(var(--w) * 0.7px);
	}

	.sp-connect__item h3 {
		margin-top: 18px;
		font-size: 17px;
	}

	.sp-connect__item p {
		max-width: 320px;
		margin-top: 10px;
		font-size: 14px;
	}

	.sp-env__text {
		padding: 72px 24px 56px;
	}

	.sp-env__text .sp-lead {
		margin-top: 20px;
	}

	.sp-env__text::before {
		top: calc(3.8vw - 8px);
	}

	.sp-features {
		padding: 56px 0 48px;
	}

	.sp-stars--features {
		width: 60px;
		height: 100px;
		background-size: 12px 12px;
	}

	.sp-features__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}

	.sp-feature__icon {
		height: 90px;
	}

	.sp-feature__icon img {
		width: calc(var(--w) * 0.55px);
	}

	.sp-feature p {
		margin-top: 16px;
		font-size: 13px;
	}

	.sp-fp__head {
		padding: 40px 0 22px;
		border-bottom-width: 3px;
	}

	.sp-fp__head::after {
		bottom: -10px;
		width: 80%;
		height: 18px;
	}

	.sp-stars--fp-head {
		top: -24px;
		right: 16px;
		width: 96px;
		height: 60px;
		background-size: 12px 12px;
	}

	.sp-fp__type-label {
		font-size: 14px;
	}

	.sp-fp__type {
		font-size: 34px;
	}

	.sp-fp__sub {
		font-size: 14px;
	}

	/* A dropdown on the right instead of the chevron + pill, so it's obvious the type can be changed */
	.sp-fp__chevron,
	.sp-fp__pill {
		display: none;
	}

	.sp-fp__select {
		display: block;
		position: relative;
		margin: 14px 0 0 auto;
	}

	.sp-fp__select-btn {
		position: relative;
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 42px 0 18px;
		border: 2px solid var(--copper);
		border-radius: 30px;
		background: transparent;
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		transition: background 0.2s ease;
	}

	/* Down arrow, flips up while the list is open */
	.sp-fp__select-btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid var(--copper);
		border-bottom: 2px solid var(--copper);
		transform: rotate(45deg);
		transition: transform 0.2s ease, margin-top 0.2s ease;
	}

	.sp-fp__select.is-open .sp-fp__select-btn {
		background: rgba(250, 199, 169, 0.12);
	}

	.sp-fp__select.is-open .sp-fp__select-btn::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}

	.sp-fp__select-btn:focus-visible,
	.sp-fp__select-list button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	/* The list drops down below the pill, over the dark specs area */
	.sp-fp__select-list {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 20;
		min-width: 100%;
		padding: 6px;
		border: 1px solid rgba(250, 199, 169, 0.45);
		border-radius: 18px;
		background: #1d1a1c;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.sp-fp__select.is-open .sp-fp__select-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.sp-fp__select-list button {
		position: relative;
		display: block;
		width: 100%;
		padding: 11px 40px 11px 14px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		cursor: pointer;
	}

	.sp-fp__select-list button:active {
		background: rgba(250, 199, 169, 0.12);
	}

	/* Current type: copper with a tick */
	.sp-fp__select-list button[aria-selected="true"] {
		background: rgba(250, 199, 169, 0.12);
		color: var(--copper);
	}

	.sp-fp__select-list button[aria-selected="true"]::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 16px;
		width: 6px;
		height: 11px;
		margin-top: -7px;
		border-right: 2px solid var(--copper);
		border-bottom: 2px solid var(--copper);
		transform: rotate(45deg);
	}

	.sp-fp__body {
		padding: 32px 0 20px;
		background: linear-gradient(to bottom, #080705 0, #2d2615 calc(100% - 90px), var(--green) calc(100% - 90px));
	}

	.sp-stars--fp-body {
		display: none;
	}

	.sp-fp__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.sp-fp__list {
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		row-gap: 24px;
		margin-top: 0;
	}

	.sp-fp__list dt {
		font-size: 2vw;
	}

	.sp-fp__list dd {
		font-size: 3vw;
	}

	.sp-fp__siteplan {
		width: 240px;
		margin: 28px auto 0;
	}

	.sp-fp__card {
		--fp-w: 60%;
		padding: 32px 0 28px;
		border-radius: 14px;
	}

	.sp-fp__card[data-type="b"] {
		--fp-w: 94.6%;
	}

	.sp-fp__labels {
		font-size: 14px;
	}

	.sp-cta {
		padding: 48px 16px 40px;
	}

	.sp-cta__pre {
		font-size: 15px;
	}

	.sp-cta__title {
		font-size: 22px;
	}

	.sp-cta__glow {
		width: 300px;
	}

	.sp-cta__post {
		font-size: 15px;
	}

	.sp-register__grid {
		grid-template-columns: 1fr;
	}

	.sp-register__info {
		order: 2;
		padding: 0 0 40px;
	}

	.sp-gallery-card {
		width: calc(100% - 32px);
	}

	.sp-register__form h2 {
		font-size: 1.6rem;
	}
}


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

.navbar-custom .nav li a {
    text-decoration: none;
}


#nav-sub-content div slot a {
    text-decoration: none;
}


a.nav-more {
    text-decoration: none;
}


.mob-inner-menu a {
	text-decoration: none;
}

/* Mobile menu close button: remove the browser's default grey button background */
#mob-menu-close {
	background: transparent;
	border: 0;
}