/* =========================================================================
   Shared marketing bands — offers, display homes, promise.

   Rendered by includes/homedesigns-bands.php and dropped under the listing
   and category pages. Every value here was measured off the live page at
   1512px on 18 Sep 2026.

   Palette: teal #008083, navy #304056, promise navy #314256, grey #5a5b5d,
            cream #f9f4e1, band grey #f7f7f7, script teal #1fb2ba.

   Centuma is already loaded globally by public/styles.css. Beyond Infinity
   is declared here because homedesigns-single.css, which also declares it,
   only loads on a design single.
   ====================================================================== */

@font-face {
	font-family: "Beyond Infinity - Demo";
	src: url("fonts/BeyondInfinity.woff2") format("woff2"),
	     url("fonts/BeyondInfinity.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.wscf-band {
	--wscf-band-teal: #008083;
	--wscf-band-navy: #304056;
	--wscf-band-promise-navy: #314256;
	--wscf-band-grey: #5a5b5d;
	--wscf-band-cream: #f9f4e1;
	--wscf-band-script: #1fb2ba;
	--wscf-band-text: #363636;
	font-family: "Centuma", Helvetica, Arial, sans-serif;
}

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

.wscf-band-inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

/* -------------------------------------------------------------------------
   Headings, shared by all three bands
   ---------------------------------------------------------------------- */

.wscf-band-head {
	text-align: center;
}

.wscf-band-eyebrow {
	font-family: "Beyond Infinity - Demo", "Centuma", cursive;
	font-size: 90px;
	font-weight: 400;
	line-height: 1;
	color: var(--wscf-band-teal);
	margin: 0;
	padding: 0;
}

.wscf-band-title {
	font-size: 36px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--wscf-band-navy);
	/* The script eyebrow has a deep descender. Live pulls the h2 up under it
	   rather than reducing the eyebrow's line box. */
	margin: -19px 0 0;
	padding: 0;
}

.wscf-band-copy {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--wscf-band-text);
	margin: 18px auto 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Slider, shared by the offers and display home bands
   ---------------------------------------------------------------------- */

.wscf-band-slider {
	position: relative;
}

.wscf-band-viewport {
	overflow: hidden;
}

.wscf-band-track {
	display: flex;
	/* Before the script runs, the track is a horizontal scroller so the band
	   is still usable with JS off. */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	transition: transform var(--wscf-band-speed, 0.45s) ease;
}

.wscf-band-track::-webkit-scrollbar {
	display: none;
}

.wscf-band-slider.is-ready .wscf-band-track {
	overflow-x: visible;
}

.wscf-band-slide {
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
}

/* Arrows */

/* The teal ring is the artwork, not a border. Same SVG both sides, the prev
   button flipped, which is how live does it. */
.wscf-band-arrow {
	position: absolute;
	top: 50%;
	width: 63px;
	height: 63px;
	margin-top: -31.5px;
	padding: 0;
	border: 0;
	background: url("images/slider-arw2.svg") center / 100% 100% no-repeat;
	font-size: 0;
	cursor: pointer;
	z-index: 2;
}

.wscf-band-prev {
	left: -100px;
	transform: rotate(180deg);
}

.wscf-band-next {
	right: -100px;
}

.wscf-band-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Dots */

.wscf-band-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 16px;
	margin-top: 40px;
}

.wscf-band-dot {
	width: 19px;
	height: 19px;
	padding: 0;
	border: 1px solid var(--wscf-band-navy);
	border-radius: 100%;
	background: transparent;
	cursor: pointer;
}

.wscf-band-dot.is-active {
	background: var(--wscf-band-navy);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.wscf-band-actions {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.wscf-band-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: capitalize;
	text-decoration: none;
	color: #fff;
	background: var(--wscf-band-teal);
	border-radius: 10px;
	padding: 18px 20px;
	transition: opacity 0.2s ease;
}

.wscf-band-btn:hover,
.wscf-band-btn:focus {
	color: #fff;
	opacity: 0.88;
}

.wscf-band-btn-light {
	color: var(--wscf-band-teal);
	background: #fff;
	padding: 18px 40px;
}

.wscf-band-btn-light:hover,
.wscf-band-btn-light:focus {
	color: var(--wscf-band-teal);
}

/* -------------------------------------------------------------------------
   Offers band
   ---------------------------------------------------------------------- */

.wscf-band-offers {
	/* Live crosses in 2s, which is slow but deliberate. Matched rather than
	   tightened, so the band reads the same as the original. */
	--wscf-band-speed: 2s;
	background: #f7f7f7;
	padding: 44px 0 125px;
}

@media (prefers-reduced-motion: reduce) {

	.wscf-band-offers {
		--wscf-band-speed: 0.01s;
	}
}

.wscf-band-offers .wscf-band-inner {
	max-width: 993px;
}

.wscf-band-offers .wscf-band-slider {
	margin-top: 30px;
}

.wscf-band-offer {
	display: block;
	line-height: 0;
}

.wscf-band-offer img {
	width: 100%;
	height: auto;
	aspect-ratio: 951 / 420;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------
   Display homes band
   ---------------------------------------------------------------------- */

.wscf-band-visit {
	padding: 40px 0 70px;
}

.wscf-band-visit .wscf-band-inner {
	max-width: 1330px;
}

.wscf-band-visit .wscf-band-title {
	letter-spacing: 0.49px;
	margin-top: -24px;
}

.wscf-band-visit .wscf-band-slider {
	margin-top: 40px;
}

.wscf-band-visit .wscf-band-track {
	gap: 40px;
}

.wscf-band-visit .wscf-band-slide {
	/* Three across with two 40px gutters. */
	flex: 0 0 calc((100% - 80px) / 3);
	max-width: calc((100% - 80px) / 3);
}

.wscf-band-tile {
	background: var(--wscf-band-grey);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wscf-band-tile-img {
	display: block;
	line-height: 0;
}

.wscf-band-tile-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 453 / 340;
	object-fit: cover;
	display: block;
}

.wscf-band-tile-title {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	margin: 22px 15px;
	padding: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wscf-band-tile-title a {
	color: #fff;
	text-decoration: none;
}

.wscf-band-tile-title a:hover,
.wscf-band-tile-title a:focus {
	color: #fff;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Promise band
   ---------------------------------------------------------------------- */

.wscf-band-promise {
	position: relative;
	background: var(--wscf-band-promise-navy);
	padding: 47px 0;
	overflow: hidden;
}

.wscf-band-promise::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url("images/sahpe_bg.svg") 0 0 / 100% auto no-repeat;
	pointer-events: none;
}

.wscf-band-promise .wscf-band-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
}

.wscf-band-promise .wscf-band-eyebrow {
	color: var(--wscf-band-script);
	margin-bottom: -20px;
}

.wscf-band-promise .wscf-band-title {
	color: var(--wscf-band-cream);
	margin: 0 0 10px;
}

.wscf-band-promise .wscf-band-copy {
	color: #fff;
	max-width: 1083px;
}

.wscf-band-promise-grid {
	display: flex;
	flex-wrap: wrap;
	row-gap: 25px;
	margin-top: 40px;
}

.wscf-band-promise-item {
	width: 33.333%;
	padding: 0 15px;
	text-align: center;
}

.wscf-band-promise-icon {
	line-height: 0;
	margin-bottom: 18px;
}

.wscf-band-promise-icon img {
	width: auto;
	height: 65px;
	display: inline-block;
}

.wscf-band-promise-title {
	font-size: 23px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 14px;
	padding: 0;
}

.wscf-band-promise-copy {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.4;
	color: #fff;
	max-width: 257px;
	margin: 0 auto;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Responsive. Live's breakpoints are 1500 / 1200 / 991 / 768 / 568.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 1500px) {

	.wscf-band-promise::after {
		background-size: auto 100%;
		background-position: center center;
	}
}

@media screen and (max-width: 1400px) {

	/* Not enough room outside the card for the full offset any more, so the
	   arrows come in and shrink rather than falling off the page. */
	.wscf-band-prev { left: -70px; }
	.wscf-band-next { right: -70px; }
	.wscf-band-arrow { width: 50px; height: 50px; margin-top: -25px; }
}

@media screen and (max-width: 1200px) {

	.wscf-band-eyebrow { font-size: 74px; }
	.wscf-band-title { font-size: 32px; margin-top: -14px; }
	.wscf-band-visit .wscf-band-title { margin-top: -18px; }
	.wscf-band-copy { font-size: 20px; }
	.wscf-band-prev { left: -46px; }
	.wscf-band-next { right: -46px; }
	.wscf-band-arrow { width: 38px; height: 38px; margin-top: -19px; }
}

@media screen and (max-width: 991px) {

	.wscf-band-offers { padding: 34px 0 95px; }
	.wscf-band-visit { padding: 30px 0 55px; }
	.wscf-band-promise { padding: 40px 0; }

	.wscf-band-eyebrow { font-size: 64px; }
	.wscf-band-title { font-size: 28px; }
	.wscf-band-copy { font-size: 18px; }

	/* Two tiles across. */
	.wscf-band-visit .wscf-band-slide {
		flex: 0 0 calc((100% - 40px) / 2);
		max-width: calc((100% - 40px) / 2);
	}

	.wscf-band-promise-item { width: 50%; }

	.wscf-band-arrow { display: none; }
}

@media screen and (max-width: 768px) {

	.wscf-band-eyebrow { font-size: 56px; }
	.wscf-band-title { font-size: 26px; margin-top: -10px; }
	.wscf-band-visit .wscf-band-title { margin-top: -12px; }

	.wscf-band-visit .wscf-band-track { gap: 20px; }

	.wscf-band-visit .wscf-band-slide {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wscf-band-tile-title { font-size: 20px; }
	.wscf-band-btn { font-size: 18px; padding: 15px 24px; }
	.wscf-band-btn-light { padding: 15px 30px; }
}

@media screen and (max-width: 568px) {

	.wscf-band-offers { padding: 28px 0 70px; }
	.wscf-band-eyebrow { font-size: 48px; }
	.wscf-band-title { font-size: 24px; }
	.wscf-band-copy { font-size: 17px; }

	.wscf-band-promise-item { width: 100%; }
	.wscf-band-promise-copy { max-width: 320px; }
	.wscf-band-dots { margin-top: 22px; }
}