/*
 * Homepage.
 *
 * Section numbering matches front-page.php and the ACF field names.
 * Loaded only on the front page.
 */

/* ---------------------------------------------------------------
 * Shared editorial classes used inside the ACF content
 * ------------------------------------------------------------- */

.bc-home .heading-highlight {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 14px;
	background: rgba(255, 211, 0, .14);
	border: 1px solid rgba(255, 211, 0, .38);
	color: var(--bc-yellow);
	font-family: var(--bc-font-heading);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
}

.bc-home .subheading {
	margin-bottom: 18px;
	color: var(--bc-yellow);
	font-family: var(--bc-font-heading);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* The yellow brush stroke under a phrase. */




.bc-home .text-white { color: var(--bc-white); }
.bc-home .text-yellow { color: var(--bc-yellow); }

.bc-home .text-highlight {
	max-width: 780px;
	margin: 0 auto 56px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.55;
	text-align: center;
}

/* Responsive display helpers used by <br> tags inside the copy. */
.bc-hide { display: none !important; }
@media (min-width: 576px) { .bc-hide-sm-up { display: none !important; } }
@media (min-width: 992px) { .bc-show-lg-up { display: block !important; } }
@media (min-width: 1200px) { .bc-show-xl-up { display: block !important; } }

.bc-center { text-align: center; }
@media (min-width: 992px) { .bc-left-lg { text-align: left; } }

.bc-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}

.bc-cols__col p { margin: 0; }

.section-5-highlight {
	text-align: center;
}

.section-5-highlight img {
	height: 34px;
	width: auto;
	margin: 0 auto 14px;
}

.section-5-highlight__text {
	font-family: var(--bc-font-heading);
	font-size: 17px;
	font-weight: 900;
	line-height: 1.25;
}

/* Buttons inside content blocks */
.bc-home .video-content-section__button-container,
.bc-home .home-content-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.bc-btn__arrow {
	display: inline-block;
	width: 0;
	margin-left: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-6px);
	transition: all var(--bc-ease);
}

.bc-btn:hover .bc-btn__arrow,
.bc-btn:focus-visible .bc-btn__arrow {
	width: 1.4em;
	margin-left: .5em;
	opacity: 1;
	transform: translateX(0);
}

/* ---------------------------------------------------------------
 * Wordmarks: the oversized outlined type behind sections
 * ------------------------------------------------------------- */

.bc-wordmark {
	position: absolute;
	display: block;
	font-family: var(--bc-font-heading);
	font-size: clamp(90px, 17vw, 250px);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: .8;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

.bc-wordmark--top {
	top: -.06em;
	left: -.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .09);
}

.bc-wordmark--bottom {
	right: .04em;
	bottom: -.12em;
	color: var(--bc-yellow);
}

.bc-wordmark--services {
	bottom: -.14em;
	left: -.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

.bc-hero {
	position: relative;
	overflow: hidden;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bc-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	border: 0;
	transform: translate(-50%, -50%);
}

.bc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .82) 100%);
}

.bc-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 96px;
	padding-bottom: 104px;
	text-align: center;
}

.bc-hero__since img {
	height: 44px;
	width: auto;
	margin: 0 auto 22px;
}

.bc-hero__title {
	margin: 0 0 6px;
	font-size: clamp(46px, 6.4vw, 96px);
	line-height: .95;
	text-transform: uppercase;
}

.bc-type {
	color: var(--bc-yellow);
}

.bc-type__caret {
	display: inline-block;
	width: .06em;
	height: .82em;
	margin-left: .04em;
	background: var(--bc-yellow);
	vertical-align: -.06em;
	animation: bc-blink 1s steps(2, start) infinite;
}

@keyframes bc-blink {
	to { visibility: hidden; }
}

.bc-hero__done span { color: var(--bc-yellow); }

.bc-hero__sub-top {
	margin: 0 0 4px;
	font-family: var(--bc-font-heading);
	font-size: clamp(20px, 2.4vw, 34px);
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bc-hero__sub-bottom {
	margin: 0 0 34px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(28px, 4vw, 58px);
	font-style: italic;
	line-height: 1.05;
}



/* ---------------------------------------------------------------
 * 2. Stats
 * ------------------------------------------------------------- */

.bc-stats {
	position: relative;
	overflow: hidden;
	padding: 120px 0 150px;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-stats__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.bc-stat__value {
	display: block;
	color: var(--bc-yellow);
	font-family: var(--bc-font-heading);
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 900;
	line-height: 1;
}

.bc-stat__label {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	letter-spacing: .4px;
}

/* ---------------------------------------------------------------
 * 3. Logo slider
 * ------------------------------------------------------------- */

.bc-logos { position: relative; overflow: hidden; padding: 24px 0 48px; background: #000; }
.bc-logos__track { display: flex; width: max-content; animation: bc-marquee 46s linear infinite; }
.bc-logos__group { display: flex; flex-shrink: 0; align-items: center; gap: 40px; padding-right: 40px; }
.bc-logos__item { flex: 0 0 auto; }
.bc-logos__item img { display: block; width: auto; height: 96px; max-width: 200px; object-fit: contain; }
.bc-logos:hover .bc-logos__track, .bc-logos:focus-within .bc-logos__track,
.bc-logos.is-paused .bc-logos__track { animation-play-state: paused; }
.bc-logos__pause { position: absolute; right: 20px; bottom: 6px; border: 1px solid #777; border-radius: 4px; padding: 3px 10px; color: #fff; background: #000; font: inherit; font-size: 12px; cursor: pointer; }
@keyframes bc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 992px) {
 .bc-logos { padding: 40px 0 48px; }
 .bc-logos__group { gap: 70px; padding-right: 70px; }
 .bc-logos__item img { height: 155px; max-width: 270px; }
}
@media (prefers-reduced-motion: reduce) {
 .bc-logos { overflow-x: auto; }
 .bc-logos__track { animation: none; }
 .bc-logos__group[aria-hidden], .bc-logos__pause { display: none; }
}

/* ---------------------------------------------------------------
 * 4, 9, 10, 11. Split sections
 * ------------------------------------------------------------- */

.bc-split {
	padding: var(--bc-section-y) 0;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-split--dark {
	background: var(--bc-off-black);
}

.bc-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.bc-split--image-left .bc-split__media { order: 1; }
.bc-split--image-left .bc-split__body { order: 2; }

.bc-split__picture img,
.bc-split__picture {
	width: 100%;
	height: auto;
	display: block;
}

.bc-split__body h2 {
	font-size: clamp(32px, 3.4vw, 50px);
	margin-bottom: 20px;
}

.bc-split__body h3 {
	margin-bottom: 18px;
	color: var(--bc-yellow);
	font-size: 16px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.bc-split__body p,
.bc-split__body {
	color: #cfcfcf;
	font-size: 16px;
}

.bc-split__body b,
.bc-split__body strong {
	color: var(--bc-white);
}

.bc-embed {
	position: relative;
	padding-bottom: 56.25%;
}

.bc-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------
 * 5. Services
 * ------------------------------------------------------------- */

.bc-services {
	position: relative;
	overflow: hidden;
	padding: var(--bc-section-y) 0 170px;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-services__intro {
	max-width: 820px;
	margin: 0 auto 48px;
	text-align: center;
}

.bc-services__intro h1 {
	font-size: clamp(32px, 3.6vw, 52px);
	margin-bottom: 18px;
}

.bc-services__intro strong { color: var(--bc-white); }
.bc-services__intro { color: #cfcfcf; }

.bc-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 1120px;
	margin: 0 auto 56px;
}

/* The fifth card is centred beneath the 2x2. */
.bc-services__grid .bc-svc:nth-child(5) {
	grid-column: 1 / -1;
	width: min(548px, 100%);
	margin: 0 auto;
}

.bc-svc { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 10px; background: #363636; color: #fafafa; text-decoration: none; transition: background .5s ease, color .5s ease; }
.bc-svc__text { flex: 1; min-width: 0; transition: transform .5s ease-in-out; }
.bc-svc__title { display: block; margin-bottom: 8px; font-family: var(--bc-font-heading); font-size: 20px; font-weight: 800; line-height: 1.4; }
.bc-svc__copy { display: block; font-size: 14px; line-height: 1.625; }
.bc-svc__icon { order: -1; flex: 0 0 44px; transition: transform .5s ease-in-out; }
.bc-svc__icon img { display: block; width: 100%; height: auto; }
.bc-svc__arrow { display: inline-block; margin-left: .35em; opacity: 0; transform: translateX(-20px); transition: transform .5s ease, opacity .5s ease; }
.bc-svc:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.bc-svc[href]:is(:hover, :focus-visible) { background: #ffd300; color: #1a1a1a; }
.bc-svc[href]:is(:hover, :focus-visible) .bc-svc__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 992px) {
 .bc-svc { gap: 30px; padding: 36px 18px; }
 .bc-svc__icon { flex-basis: 60px; }
 .bc-svc__title { font-size: 22px; }
 .bc-svc__copy { font-size: 16px; }
 .bc-svc.is-measured[href]:is(:hover, :focus-visible) .bc-svc__icon { transform: translateX(calc(var(--content-width) + 30px)); }
 .bc-svc.is-measured[href]:is(:hover, :focus-visible) .bc-svc__text { transform: translateX(calc(-1 * var(--icon-width) - 30px)); }
}
@media (min-width: 1200px) { .bc-svc { padding: 36px 40px; } .bc-svc__icon { flex-basis: 100px; } }
@media (prefers-reduced-motion: reduce) {
 .bc-svc, .bc-svc__text, .bc-svc__icon, .bc-svc__arrow { transition: none; }
 .bc-svc.is-measured[href]:is(:hover, :focus-visible) :is(.bc-svc__icon, .bc-svc__text) { transform: none; }
}
.bc-services__mission { position: relative; z-index: 2; }
.bc-services__mission .text-highlight { max-width: none; margin: 50px 0 30px; padding: 30px 0; color: #fafafa; font-family: var(--bc-font-heading); font-size: 18px; font-weight: 800; line-height: 1.545; }
.bc-services__mission .text-highlight span { color: #ffd300; }
.bc-services__mission .section-5-highlight img { display: block; width: 60px; height: auto; margin: 0 auto 30px; }
.bc-services__mission .section-5-highlight__text { font-size: 18px; line-height: 1.555; font-weight: 800; color: #fafafa; }
@media (min-width: 992px) {
 .bc-services__mission .text-highlight { font-size: 22px; margin: 70px 0; padding: 50px 0; }
 .bc-services__mission .section-5-highlight img { width: 82px; }
}

/* ---------------------------------------------------------------
 * 7. Our Promise
 * ------------------------------------------------------------- */

.bc-promise {
	position: relative;
	overflow: hidden;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-promise__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 0;
}

.bc-promise__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bc-promise__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .74) 55%, rgba(0, 0, 0, .55) 100%);
}

.bc-promise__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
	padding-top: var(--bc-section-y);
	padding-bottom: var(--bc-section-y);
}

.bc-promise__body h2 {
	font-size: clamp(34px, 4vw, 60px);
	margin-bottom: 24px;
}

.bc-promise__body { color: #d2d2d2; }
.bc-promise__body strong { color: var(--bc-white); }

.bc-promise__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.bc-hl {
	padding: 26px 24px;
	background: rgba(20, 20, 20, .88);
	border: 1px solid #2c2c2c;
	border-radius: 10px;
}

.bc-hl__icon img {
	width: 40px;
	height: auto;
	margin-bottom: 14px;
}

.bc-hl__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.bc-hl__copy {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #bdbdbd;
}

.bc-promise__team {
	position: relative;
	z-index: 2;
}

.bc-promise__team-picture img,
.bc-promise__team-picture {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------
 * 8. Roofing with purpose
 * ------------------------------------------------------------- */

.bc-purpose {
	padding: var(--bc-section-y) 0;
	background: var(--bc-yellow);
	color: var(--bc-black);
}

.bc-purpose__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.bc-purpose .heading-highlight {
	background: rgba(0, 0, 0, .1);
	border-color: rgba(0, 0, 0, .3);
	color: var(--bc-black);
}

.bc-purpose__body h2 {
	font-size: clamp(32px, 3.6vw, 52px);
	margin-bottom: 20px;
}

.bc-purpose__body a {
	border-bottom: 2px solid var(--bc-black);
	font-weight: 700;
}

.bc-purpose__media img,
.bc-purpose__video {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------
 * 12. Reviews
 * ------------------------------------------------------------- */

.bc-reviews {
	padding: var(--bc-section-y) 0;
	background: var(--bc-black);
	color: var(--bc-white);
}

.bc-reviews__intro {
	max-width: 780px;
	margin: 0 auto 44px;
	text-align: center;
	color: #cfcfcf;
}

.bc-reviews__intro h2 {
	font-size: clamp(32px, 3.6vw, 52px);
}

.bc-reviews__intro strong { color: var(--bc-white); }

.bc-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 1fr);
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 12px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.bc-review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 28px 24px;
	background: #171717;
	border: 1px solid #262626;
	border-radius: 10px;
	scroll-snap-align: start;
}

.bc-review__stars {
	margin-bottom: 14px;
	color: var(--bc-yellow);
	font-size: 20px;
	letter-spacing: 2px;
}

.bc-review__copy {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.65;
	color: #c4c4c4;
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bc-review__author {
	font-family: var(--bc-font-heading);
	font-size: 16px;
	font-weight: 900;
	color: var(--bc-white);
}

.bc-reviews__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 38px;
}

/* ---------------------------------------------------------------
 * 13. Conversion block
 * ------------------------------------------------------------- */

.bc-convert {
	position: relative;
	padding: 90px 0 var(--bc-section-y);
	background: var(--bc-yellow);
	color: var(--bc-black);
}

.bc-convert__skyline { position: absolute; top: -1px; left: 0; width: 100%; height: 59px; background: #000; }
.bc-convert__skyline::after { content: ''; position: absolute; top: 9px; left: 0; width: 100%; height: 50px; background: url('../img/city-skyline.svg') no-repeat center / auto 100%; }
@media (min-width: 576px) { .bc-convert { padding-top: 140px; } .bc-convert__skyline { height: 107px; } .bc-convert__skyline::after { height: 89px; top: 18px; } }
@media (min-width: 992px) { .bc-convert { padding-top: 408px; } .bc-convert__skyline { height: 360px; } .bc-convert__skyline::after { height: 301px; top: 59px; } }

.bc-convert__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.bc-convert .heading-highlight {
	background: rgba(0, 0, 0, .1);
	border-color: rgba(0, 0, 0, .3);
	color: var(--bc-black);
}

.bc-convert__body h2 {
	font-size: clamp(34px, 4vw, 58px);
	margin-bottom: 18px;
}



.bc-steps {
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.bc-step {
	display: flex;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid rgba(0, 0, 0, .18);
}

.bc-step__num {
	flex: 0 0 auto;
	font-family: var(--bc-font-heading);
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
}

.bc-step__text strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--bc-font-heading);
	font-size: 19px;
	font-weight: 900;
}

.bc-step__text {
	font-size: 15px;
	line-height: 1.55;
}

.bc-convert__form {
	padding: 32px 28px;
	background: var(--bc-black);
	color: var(--bc-white);
	box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.bc-convert__form-title {
	margin: 0 0 20px;
	font-size: 30px;
	color: var(--bc-white);
}

/* Buccos Forms inside the dark conversion panel. */
.bc-convert__form .bf-input {
	background: #1b1b1b;
	border: 1px solid #333;
	color: var(--bc-white);
}

.bc-convert__form .bf-label {
	color: var(--bc-white);
}

.bc-convert__form .bf-submit {
	width: 100%;
	min-height: 54px;
	background: var(--bc-yellow);
	border: 2px solid var(--bc-yellow);
	color: var(--bc-black);
	font-family: var(--bc-font-heading);
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--bc-ease), color var(--bc-ease);
}

.bc-convert__form .bf-submit:hover {
	background: transparent;
	color: var(--bc-yellow);
}

.bc-convert__form-missing {
	padding: 20px;
	border: 1px dashed #444;
	color: #999;
	font-size: 14px;
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

@media (max-width: 1020px) {
	.bc-split__grid,
	.bc-promise__grid,
	.bc-purpose__grid,
	.bc-convert__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.bc-split--image-left .bc-split__media,
	.bc-split--image-left .bc-split__body {
		order: initial;
	}

	.bc-stats__grid {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}

	.bc-cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 780px) {
	.bc-services__grid {
		grid-template-columns: 1fr;
	}

	.bc-services__grid .bc-svc:nth-child(5) {
		width: 100%;
	}

	.bc-services__grid .bc-svc:nth-child(2),
	.bc-services__grid .bc-svc:nth-child(4) {
		flex-direction: row;
	}

	.bc-promise__cards {
		grid-template-columns: 1fr;
	}

	.bc-cols {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bc-hero__inner {
		padding-top: 64px;
		padding-bottom: 72px;
	}

	.bc-stats {
		padding: 80px 0 110px;
	}

	.bc-reviews__track {
		grid-auto-columns: minmax(260px, 84vw);
	}
}