/*
 * Home page (front-page.php), loaded only there. Builds on the inner-page blocks in pages.css (.cards, .contact-split, .dx-form).
 */
.bh { --bh-gap: 12px; --bh-inset: var(--gutter); --bh-r: 32px; --bh-sun: 640px; } /* the hero's frame (gap, side inset, radius), shared by every panel; the size of the vision's sun */
.bh-hero .btn-row { justify-content: center; }

/* Hero: a rounded photo card under the header, copy centred over the sky, two glass cards at the foot. */
.bh-hero { padding: var(--bh-gap) var(--bh-inset) 0; }
.bh-hero-in {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 40px;
	min-height: min(820px, calc(100svh - var(--hdr) - 108px)); /* the next section peeks in, clear of the WhatsApp button */
	padding: clamp(56px, 9vh, 104px) 28px 28px;
	border-radius: var(--bh-r);
	overflow: hidden;
	background: #1d3a2c;
	color: #fff;
	isolation: isolate;
}
.bh-hero-in picture { position: absolute; inset: 0; z-index: -2; }
.bh-hero-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bh-hero-in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(6 28 38 / .72) 0, rgb(6 28 38 / .62) 42%, rgb(6 28 38 / .5) 66%, rgb(6 28 38 / .6) 100%); /* dark enough for white text over the bright roof (AA) */
}
.bh-hero-copy { display: grid; gap: 22px; align-content: start; justify-items: center; max-width: 880px; margin: 0 auto; text-align: center; text-shadow: 0 1px 18px rgb(6 28 38 / .35); }
.bh-pill {
	padding: 7px 16px;
	border: 1px solid rgb(255 255 255 / .35);
	border-radius: 999px;
	background: rgb(255 255 255 / .12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: 13.5px;
	font-weight: 600;
	text-wrap: balance;
}
.dx-page .bh-hero h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.dx-page .bh-hero-sub { max-width: 60ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: rgb(255 255 255 / .9); text-wrap: pretty; text-shadow: 0 1px 3px rgb(6 28 38 / .6), 0 1px 18px rgb(6 28 38 / .45); }
.bh-hero .btn-primary { background: #fff; color: var(--deep); box-shadow: none; }
.bh-btn-ghost { border-color: rgb(255 255 255 / .6); background: rgb(6 28 38 / .55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bh-btn-ghost:hover { background: rgb(255 255 255 / .12); }
.dx-page .bh-btn-ghost { color: #fff; }
.bh-hero :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgb(6 28 38 / .9); } /* the site's blue ring is lost on the photo */
.bh-glass-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.bh-glass {
	display: grid;
	gap: 6px;
	width: min(320px, 100%);
	padding: 20px 22px;
	border: 1px solid rgb(255 255 255 / .3);
	border-radius: 22px;
	background: rgb(6 28 38 / .42);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.bh-glass b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.dx-page .bh-glass p { font-size: 14.5px; line-height: 1.5; color: rgb(255 255 255 / .88); }

/* Logos: the title centred on the page, and room before the first panel. */
.bh .clients { padding-bottom: 36px; }
.bh .clients-title { margin-inline: auto; text-wrap: balance; }

/* Frames: every section after the logos sits in a rounded panel, inset like the hero. */
.bh-panel { position: relative; margin: var(--bh-gap) var(--bh-inset) 0; border-radius: var(--bh-r); isolation: isolate; }

/* Light panels carry a faint grid, like a panel's cells, fading out from one corner. */
.bh-vision::before,
.bh-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		var(--bh-rings, none),
		linear-gradient(90deg, rgb(11 31 23 / .07) 1px, transparent 0) 0 0 / 48px 48px,
		linear-gradient(rgb(11 31 23 / .07) 1px, transparent 0) 0 0 / 48px 48px;
	-webkit-mask: radial-gradient(70% 95% at 100% 0, #000, transparent);
	mask: radial-gradient(70% 95% at 100% 0, #000, transparent);
}

/* Vision: a warm panel with the morning sun in its corner, the statement, then the road as a timeline. */
.bh-vision {
	background:
		radial-gradient(circle var(--bh-sun) at 97% 3%, rgb(255 222 140) 0, rgb(255 210 120 / .7) 12.5%, rgb(255 200 96 / .32) 34%, rgb(255 200 96 / .1) 66%, rgb(255 200 96 / 0)),
		radial-gradient(60% 70% at 0 100%, rgb(38 188 163 / .1), rgb(38 188 163 / 0)),
		linear-gradient(200deg, #fbf5e8, #f2f6f1 55%);
}
.bh-vision .wrap { display: grid; gap: 28px; }
.bh-vision .kicker { color: #17662c; } /* a shade deeper than the site's, for headroom in the sunlight */
.dx-page .bh-statement {
	max-width: 24ch;
	font-size: clamp(30px, 4.2vw, 58px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--ink);
	text-wrap: balance;
}
.bh-statement span { background: linear-gradient(120deg, #1d8a3a, #0c7a66); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the brand gradient, deepened to pass 3:1 in the sunlight */

/* The road: stops on a rail, solid up to today, dashed ahead. */
.bh-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 28px; }
.bh-road li { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 48px; }
.bh-road li::before { content: ""; position: absolute; top: 11px; left: 12px; right: -52px; height: 2px; background: repeating-linear-gradient(90deg, rgb(30 122 52 / .45) 0 8px, transparent 0 14px); }
.bh-road .done::before { background: var(--green); }
.bh-road li:last-child::before { right: 0; -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
.bh-road li::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--green); border-radius: 50%; background: #fff; }
.bh-road .done::after { background: var(--green); }
.bh-road .now::after { top: 0; left: 0; width: 24px; height: 24px; border: 5px solid #fff; background: var(--green); box-shadow: 0 0 0 1.5px var(--green), 0 0 0 9px rgb(54 181 74 / .16); }
.bh-road li > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 8px; border-radius: 20px; box-shadow: 0 18px 40px -18px rgb(11 31 23 / .45); }
.bh-road li:last-child > img { box-shadow: 0 18px 40px -18px rgb(196 120 20 / .55); } /* the road ahead, lit by the sun */
.bh-when { justify-self: start; padding: 4px 12px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.now .bh-when { background: var(--green-dark); color: #fff; }
.dx-page .bh-road h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dx-page .bh-road p { color: var(--muted); }

/* How it works: a dark panel, the white cards from style.css stacked on it. */
.bh-how { background: #0b2a36; }
.bh-how .kicker { color: #8fe0a0; }
.dx-page .bh-how h2 { color: #fff; }

/* What we do: a white panel with a hairline frame; the cards are soft tiles that open on an illustration plate and lift to white. */
.bh-work { border: 1px solid var(--line); }
.bh-work .wrap { display: grid; gap: 18px; }
.bh-work .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; } /* 4, 2 or 1 across: never a lone card on its own row */
.bh-work .cards > a { position: relative; padding: 10px 10px 26px; border: 0; border-radius: 24px; background: var(--tint); }
.bh-work .cards > a > :is(h3, p) { margin-inline: 16px; }
.bh-work .cards > a:hover { background: #fff; box-shadow: var(--shadow-lg); }
.bh-plate {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 11;
	margin-bottom: 8px;
	overflow: hidden;
	border-radius: 16px;
	background: radial-gradient(120% 90% at 50% 100%, #dcefe1 0, #fff 72%);
}
.bh-plate > * { width: 92%; height: 92%; object-fit: contain; transition: transform .4s; }
.bh-work .cards > a:hover .bh-plate > * { transform: scale(1.04); }
.bh-work .card-ic { position: absolute; top: 20px; left: 20px; width: 34px; height: 34px; border-radius: 10px; background: #fff; font-size: 13px; box-shadow: var(--shadow); }
.dx-page .bh-work .cards a { color: inherit; text-decoration: none; }
.bh-work .cards a:hover h3 { color: var(--deep); }

/* Contact: a soft panel, the grid echoed in its lower corner; the form is the white card inside it. */
.bh-contact { margin-bottom: var(--bh-gap); background: var(--tint); }
.bh-contact::before { -webkit-mask: radial-gradient(45% 70% at 0 100%, #000, transparent); mask: radial-gradient(45% 70% at 0 100%, #000, transparent); }
#contact .partner-badge { margin-top: 8px; }

/* Wide screens: the sun is drawn as faint rings rising from the corner (clear of the text on smaller screens). */
@media (min-width: 961px) {
	.bh-vision { --bh-rings: repeating-radial-gradient(circle at 97% 3%, transparent 0 79px, rgb(196 140 30 / .16) 79px 80.5px); }
}
@media (max-width: 1180px) {
	.bh-work .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.bh-road { grid-template-columns: minmax(0, 1fr); }
	/* The road turns downwards: the rail runs on the left. */
	.bh-road { gap: 32px; }
	.bh-road li { padding: 0 0 0 44px; }
	.bh-road li::before { top: 12px; right: auto; bottom: -44px; left: 11px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgb(30 122 52 / .45) 0 8px, transparent 0 14px); }
	.bh-road li:last-child::before { bottom: 0; -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
}
@media (max-width: 760px) {
	.bh { --bh-gap: 8px; --bh-inset: 8px; --bh-r: 24px; --bh-sun: 400px; }
	.bh-hero-in { min-height: 0; gap: 32px; padding: 40px 16px 16px; }
	.bh-pill { padding: 6px 14px; font-size: 12.5px; }
	.bh-glass { width: 100%; padding: 16px 18px; align-content: start; }
	.bh-glass-row { flex-wrap: nowrap; align-items: stretch; gap: 10px; }
	.bh-glass-row { gap: 8px; }
	.bh-glass { gap: 2px; padding: 12px; border-radius: 18px; }
	.bh-glass b { font-size: 17px; letter-spacing: -.03em; white-space: nowrap; }
	.dx-page .bh-glass p { font-size: 12px; line-height: 1.35; }
	.bh-glass p span { display: none; } /* three cards side by side: the figure and its short label only */
	/* The work cards become compact rows: plate on the left, title and text beside it. */
	.bh-work .cards { grid-template-columns: minmax(0, 1fr); }
	.bh-work .cards > a { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 10px; }
	.bh-plate { grid-row: span 2; aspect-ratio: 1; margin: 0; }
	.bh-work .cards > a > :is(h3, p) { margin: 0; }
	.bh-work .cards h3 { align-self: end; }
	.bh-work .cards p { align-self: start; font-size: 14.5px; }
	.bh-work .card-ic { display: none; }
}
/* Small phones: the pill fits one line from 355px; narrower, it splits into two even lines. */
@media (max-width: 400px) {
	.bh-pill { padding: 6px 12px; font-size: 12px; letter-spacing: -.01em; }
}
/* Short or narrow phones: the glass cards would sit under the WhatsApp button; the subline already says both. */
@media (max-width: 760px) and (max-height: 770px), (max-width: 354px) {
	.bh-glass-row { display: none; }
}
@media (max-width: 760px) and (max-height: 600px) {
	.bh-hero-in { padding-top: 24px; }
	.bh-hero-copy { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.bh-work .cards > a,
	.bh-plate > * { transition: none; }
	.bh-work .cards > a:hover,
	.bh-work .cards > a:hover .bh-plate > * { transform: none; }
}