/* Home page (front page) — build/homepage.py. Prefix: bw-home-.
   Only what Elementor cannot express: the hero photo fade and sweep, diagram
   connectors, the process dots, the bleeding CTA panel, and responsive fixes. */

/* --- Hero ----------------------------------------------------------------- */
.bw-home-hero { position: relative; overflow: hidden; }
/* White fades into the photo, which sits in the right ~56%. */
.bw-home-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, #fff 0%, #fff 44%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%);
}
/* Gold sweep with a navy wave beneath it, under the photo only. */
.bw-home-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 66px;
	pointer-events: none; z-index: 2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 66' preserveAspectRatio='none'%3E%3Cpath d='M700 66 C 900 34 1180 8 1440 0 L1440 66 Z' fill='%23D38A12'/%3E%3Cpath d='M800 66 C 1000 42 1220 24 1440 20 L1440 66 Z' fill='%230B1F4F'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
.bw-home-hero > .e-con { position: relative; z-index: 3; }
.bw-home-hero__rule {
	display: block; width: 134px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--bw-navy) 0, var(--bw-navy) 84%, #C9D2E3 84%);
}
.e-con > .elementor-widget.bw-home-hero__body { max-width: 510px !important; }
.bw-home-hero__photo-sm img { width: 100%; height: auto; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 1024px) {
	.bw-home-hero.e-con { background-image: none !important; }
	.bw-home-hero::before, .bw-home-hero::after { display: none; }
}

/* --- Partners strip ------------------------------------------------------- */
.bw-home-partner:not(.bw-home-partner--first) { border-left: 1px solid #D5DCE8; }
.bw-home-partner { padding: 4px 12px; }
.bw-home-partner .elementor-widget-image { flex: 0 0 auto; }
@media (max-width: 1024px) {
	.bw-home-partner { border-left: 0 !important; }
}

/* --- About ---------------------------------------------------------------- */
.bw-home-about__img img { width: 100%; height: 407px; object-fit: cover; border-radius: 14px; display: block; }
.e-con > .elementor-widget.bw-home-about__body { max-width: 480px !important; }
.bw-home-about__body p { margin-bottom: .9em; }
.e-con > .elementor-widget.bw-home-model__body { max-width: 330px !important; }
.bw-home-checks .elementor-icon-list-icon { align-self: flex-start; padding-top: 2px; }
@media (max-width: 1024px) { .bw-home-about__img img { height: auto; aspect-ratio: 16 / 9; } }

/* --- Who we support cards ------------------------------------------------- */
.bw-home-card > .elementor-widget.bw-home-card__desc { max-width: 205px !important; }
.bw-home-card > .elementor-widget:last-child { margin-top: auto !important; padding-top: 10px; }
.bw-home-more {
	color: var(--bw-navy); font-weight: 600; text-decoration: none;
	display: inline-flex; align-items: center; gap: 8px;
}
.bw-home-more span { transition: transform .2s; }
.bw-home-more:hover { color: var(--bw-gold); }
.bw-home-more:hover span { transform: translateX(3px); }
.bw-home-more:focus-visible { outline: 2px solid var(--bw-gold); outline-offset: 3px; }
@media (max-width: 1024px) { .bw-home-more { min-height: 44px; padding: 0 8px; } }

.bw-home-disc { flex: 0 0 auto !important; aspect-ratio: 1; }
.bw-home-gold { color: var(--bw-gold); }

/* --- Diagram connectors (partnership model + process) --------------------- */
.elementor-widget.bw-home-arrow { flex: 1 1 0 !important; min-width: 22px; align-self: flex-start; }
.bw-home-arrow__line {
	display: block; position: relative; height: 0; margin: 0 6px;
	border-top: 2px dashed #8A9BB8;
}
.bw-home-arrow__line::after {
	content: ""; position: absolute; right: -2px; top: -6px;
	width: 8px; height: 8px; transform: rotate(45deg);
	border-top: 2px solid #4C6191; border-right: 2px solid #4C6191;
}
.bw-home-arrow--model { margin-top: 43px !important; }
.bw-home-arrow--step { margin-top: 29px !important; }

.bw-home-model__node, .bw-home-step { flex: 0 0 auto !important; }
.bw-home-model__node--main { flex: 0 0 172px !important; aspect-ratio: auto; margin-top: -28px; }

.bw-home-pills {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: nowrap; justify-content: space-between;
	border: 1px solid var(--bw-hairline); border-radius: 8px; background: #fff;
}
.bw-home-pills li {
	flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 6px; font-family: var(--bw-sans); font-size: 14px; color: var(--bw-ink);
	line-height: 1.35; text-align: left;
}
@media (max-width: 1024px) { .bw-home-pills { flex-wrap: wrap; } }
.bw-home-pills li + li { border-left: 1px solid var(--bw-hairline); }
.bw-home-pills__tick {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--bw-navy); position: relative;
}
.bw-home-pills__tick::after {
	content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
	border-right: 2px solid var(--bw-navy); border-bottom: 2px solid var(--bw-navy);
	transform: rotate(45deg);
}

/* --- Process: gold dot hanging under each step disc (drawn on the step, so
   the disc itself does not overflow) ------------------------------------- */
.bw-home-step { position: relative; }
.bw-home-step::before {
	content: ""; position: absolute; left: 50%; top: 60px; width: 2px; height: 12px;
	background: var(--bw-gold); transform: translateX(-50%);
}
.bw-home-step::after {
	content: ""; position: absolute; left: 50%; top: 71px;
	width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%);
	background: #fff; border: 3px solid var(--bw-gold); box-sizing: border-box;
}

/* --- Commitment ----------------------------------------------------------- */
.bw-home-white-icon img { filter: brightness(0) invert(1); }
.e-con > .elementor-widget.bw-home-commit__desc { max-width: 230px !important; }
.bw-home-commit__col:not(.bw-home-commit__col--first) { border-left: 1px solid rgba(255,255,255,.22); }
@media (max-width: 1024px) {
	.bw-home-commit__col { border-left: 0 !important; }
}

/* --- Referral process: the CTA panel bleeds off the right edge ------------ */
/* Steps (~838px) + 400px panel only fit side by side from 1300. */
@media (min-width: 1300px) {
	.bw-home-process.e-con { padding-left: max(40px, calc((100% - 1260px) / 2)) !important; }
	.bw-home-process > .bw-home-process__cta { flex: 0 0 400px !important; }
	.bw-home-process > .bw-home-process__steps { flex: 1 1 0 !important; min-width: 0; }
}
.bw-home-process__cta { position: relative; overflow: hidden; }
@media (min-width: 1025px) and (max-width: 1299px) {
	.bw-home-process.e-con { flex-wrap: wrap !important; padding-left: 40px !important; padding-right: 40px !important; row-gap: 32px; }
	.bw-home-process > .bw-home-process__steps, .bw-home-process > .bw-home-process__cta { flex: 1 1 100% !important; width: 100% !important; }
	.bw-home-process > .bw-home-process__cta { border-radius: 8px; margin-bottom: 40px; }
}

/* --- Narrow layouts ------------------------------------------------------- */
/* The two flow diagrams stack below desktop: arrows turn into short vertical dashes. */
@media (max-width: 1024px) {
	.bw-home-model__flow, .bw-home-steps { flex-wrap: wrap !important; justify-content: center !important; gap: 28px 18px; }
	.bw-home-model__flow .bw-home-arrow, .bw-home-steps .bw-home-arrow { display: none; }
	.bw-home-model__node--main { margin-top: 0; }
	.bw-home-pills li + li { border-left: 0; }
	.bw-home-pills li { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 767px) {
	.bw-home-partner { padding: 4px 4px; }
	.bw-home-partner .elementor-widget-image img { width: 44px !important; }
	.bw-home-model__flow { gap: 24px 12px !important; }
	.bw-home-model__node, .bw-home-step { flex: 0 0 calc(50% - 10px) !important; width: calc(50% - 10px) !important; }
	.bw-home-model__node { flex-basis: calc(50% - 6px) !important; width: calc(50% - 6px) !important; }
	.bw-home-model__node--main { flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; min-height: 210px !important; }
}