/* Benecke 2026: DESIGNED SECTIONS (homepage and crane hub, built to the concept Morne approved on 20 Oct 2026).
   Class names bt26-d-*. Loads after bt26.css on pages using the "Benecke 2026" template. His palette only. px sizes. */

/* ---------- Hero extras ---------- */
body.bt26 .bt26-hero-copy .bt26-d-tagline {
	margin: 0;
	font-family: var(--bt-head);
	font-weight: 600;
	font-size: 24px;
	color: var(--bt-grey);
}
body.bt26 .bt26-content .bt26-d-tag {
	margin: 4px 0 0;
}
body.bt26 .bt26-content .bt26-d-tag a,
body.bt26 .bt26-content .bt26-d-btn a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border-radius: 2px;
	background: var(--bt-yellow);
	color: var(--bt-ink);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
body.bt26 .bt26-content .bt26-d-btn a {
	height: 56px;
	padding: 0 24px;
	background: var(--bt-ink);
	color: var(--bt-white);
}
body.bt26 .bt26-content .bt26-d-tag a::after,
body.bt26 .bt26-content .bt26-d-btn a::after {
	content: "\2192";
}

/* ---------- Two columns: words and one of his photographs ---------- */
.bt26-d-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.bt26-d-split--in {
	margin-top: 32px;
}
body.bt26 .bt26-d-photo p {
	margin: 0;
	max-width: none;
}
body.bt26 .bt26-d-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}
body.bt26 .bt26-d-photo--side {
	margin-top: 24px;
}

/* ---------- The load chips ---------- */
body.bt26 .bt26-content ul.bt26-d-chips {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	max-width: none;
	margin: 0;
}
body.bt26 .bt26-content ul.bt26-d-chips li {
	margin: 0;
	padding: 18px 14px;
	border: 0;
	border-top: 4px solid var(--bt-yellow);
	background: var(--bt-white);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.15;
}
body.bt26 .bt26-content ul.bt26-d-chips li::before {
	display: none;
}

/* ---------- Crane truck or mobile crane: the comparison ---------- */
.bt26-d-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 8px 0 28px;
	max-width: 900px;
}
.bt26-d-cmp {
	padding: 20px 24px;
	border: 2px solid var(--bt-grey);
}
.bt26-d-cmp--yes {
	border-color: var(--bt-ink);
	border-top: 6px solid var(--bt-yellow);
}
body.bt26 .bt26-content .bt26-d-cmp-h {
	margin: 0 0 10px;
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 26px;
}
body.bt26 .bt26-content .bt26-d-cmp ul {
	margin: 0;
}
body.bt26 .bt26-content .bt26-d-cmp li {
	font-size: 18px;
}

/* ---------- Heading left, words right ---------- */
.bt26-d-side {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
body.bt26 .bt26-d-side h2 {
	font-size: 40px;
}

/* ---------- The questions, answers kept in the page ---------- */
body.bt26 .bt26-d-faq details {
	border-top: 2px solid var(--bt-ink);
}
body.bt26 .bt26-d-faq details:last-child {
	border-bottom: 2px solid var(--bt-ink);
}
body.bt26 .bt26-d-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
}
body.bt26 .bt26-d-faq summary::-webkit-details-marker {
	display: none;
}
body.bt26 .bt26-d-faq summary h3 {
	margin: 0;
	font-size: 26px;
}
body.bt26 .bt26-d-faq summary::after {
	content: "+";
	flex: 0 0 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: var(--bt-yellow);
	font-family: var(--bt-head);
	font-weight: 800;
	font-size: 24px;
}
body.bt26 .bt26-d-faq details[open] summary::after {
	content: "\2212";
}
body.bt26 .bt26-d-faq details p {
	padding: 0 64px 20px 0;
}

/* ---------- What we offer / Our fleet ---------- */
.bt26-d-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
body.bt26 .bt26-d-listbox h2 {
	font-size: 40px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bt-ink);
}

/* ---------- Dark band ---------- */
.bt26-d-dark {
	background: var(--bt-ink);
	color: var(--bt-white);
}
body.bt26 .bt26-d-dark h2,
body.bt26 .bt26-d-dark h3,
body.bt26 .bt26-d-dark h6,
body.bt26 .bt26-d-dark p,
body.bt26 .bt26-d-dark a {
	color: var(--bt-white);
}
.bt26-d-three {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.bt26-d-three > div {
	border-top: 4px solid var(--bt-yellow);
	padding-top: 8px;
}
body.bt26 .bt26-d-three h3 {
	margin-top: 12px;
}
body.bt26 .bt26-d-dark h6 {
	margin: 0 0 20px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.05;
}
body.bt26 .bt26-d-dark h6 a {
	text-decoration: none;
}
.bt26-d-mark .bt26-wrap::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	background: url("b-mark.png") center / contain no-repeat;
}
body.bt26 .bt26-d-dark p {
	max-width: 760px;
}
body.bt26 .bt26-d-dark p strong {
	display: block;
	padding-left: 16px;
	border-left: 4px solid var(--bt-yellow);
}

/* ---------- Areas we serve and related services: link boxes ---------- */
body.bt26 .bt26-d-areas ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	max-width: none;
}
body.bt26 .bt26-d-areas ul li {
	padding: 0;
	border: 0;
}
body.bt26 .bt26-d-areas ul li::before {
	display: none;
}
body.bt26 .bt26-d-areas ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	padding: 10px 16px;
	border: 1px solid var(--bt-grey);
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
}
body.bt26 .bt26-d-areas ul li a::after {
	content: "\2192";
}
body.bt26 .bt26-d-areas ul li a:hover {
	border-color: var(--bt-ink);
	box-shadow: inset 0 -4px 0 var(--bt-yellow);
}
body.bt26 .bt26-d-areas h3 {
	margin-top: 40px;
	font-size: 32px;
}
body.bt26 .bt26-d-areas h3:first-child {
	margin-top: 0;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bt-ink);
	font-size: 40px;
}

/* ---------- Homepage: service cards ---------- */
.bt26-d-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 8px;
}
body.bt26 .bt26-d-card {
	display: flex;
	flex-direction: column;
	background: var(--bt-paper);
	color: var(--bt-ink);
	text-decoration: none;
}
body.bt26 .bt26-d-card p {
	margin: 0;
}
body.bt26 .bt26-d-card img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}
body.bt26 .bt26-d-card h5 {
	margin: 20px 20px 8px;
	font-size: 24px;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
body.bt26 .bt26-d-card h5::after {
	content: "\2192";
}
body.bt26 .bt26-d-card h5 + p {
	margin: 0 20px 28px;
	font-size: 18px;
}
body.bt26 .bt26-d-card:hover h5 {
	text-decoration: underline;
	text-decoration-color: var(--bt-yellow);
	text-decoration-thickness: 4px;
}
body.bt26 .bt26-content .bt26-d-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 32px;
}
.bt26-d-item {
	border-top: 1px solid var(--bt-grey);
	padding-top: 12px;
}
body.bt26 .bt26-d-item h5 {
	position: relative;
	margin: 0 0 4px;
	padding-left: 22px;
	font-size: 20px;
	text-transform: uppercase;
}
body.bt26 .bt26-d-item h5::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 10px;
	height: 10px;
	background: var(--bt-yellow);
	outline: 1px solid var(--bt-ink);
}
body.bt26 .bt26-d-item p {
	padding-left: 22px;
	font-size: 17px;
}

/* ---------- Homepage: the photo strip, edge to edge ---------- */
body.bt26 .bt26-photos--strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}
body.bt26 .bt26-photos--strip p {
	margin: 0;
}
body.bt26 .bt26-photos--strip img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}

/* ---------- Homepage: recent posts as a link list; the address with the map ---------- */
body.bt26 .bt26-d-posts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
}
body.bt26 .bt26-d-posts h3 {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #d9d9d6;
	font-size: 20px;
}
body.bt26 .bt26-d-posts h3 a {
	text-decoration: none;
}
body.bt26 .bt26-d-contact ul {
	list-style: none;
	display: flex;
	gap: 32px;
	margin: 0 0 8px;
}
body.bt26 .bt26-d-contact ul li {
	padding: 0;
	border: 0;
}
body.bt26 .bt26-d-contact ul li::before {
	display: none;
}
body.bt26 .bt26-d-contact h4 {
	margin: 0;
}
body.bt26 .bt26-d-contact iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	margin-top: 16px;
}

@media (max-width: 1100px) {
	.bt26-d-side {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 40px;
	}
	body.bt26 .bt26-content ul.bt26-d-chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.bt26-d-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 860px) {
	.bt26-d-split,
	.bt26-d-side,
	.bt26-d-two,
	.bt26-d-three,
	.bt26-d-compare {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	body.bt26 .bt26-content ul.bt26-d-chips {
		grid-template-columns: 1fr 1fr;
	}
	body.bt26 .bt26-d-areas ul,
	body.bt26 .bt26-d-posts,
	body.bt26 .bt26-content .bt26-d-items {
		grid-template-columns: minmax(0, 1fr);
	}
	.bt26-d-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	body.bt26 .bt26-photos--strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.bt26 .bt26-d-faq details p {
		padding-right: 0;
	}
	body.bt26 .bt26-d-dark h6 {
		font-size: 32px;
	}
	body.bt26 .bt26-hero-copy .bt26-d-tagline {
		font-size: 20px;
	}
}

/* ---------- 0.2.1, Thu 22 Oct 2026: tighter desktop spacing (owner: the gaps were too big), same clean feel ---------- */
/* WordPress's paragraph wrapping breaks the card links, and the browser repairs it by adding a paragraph of EMPTY card
   links between each pair of cards. Each took a grid slot, so four cards sat in two narrow columns with blanks between.
   Those paragraphs are hidden, at every width, and only while they hold no photo or heading of their own. */
.bt26-d-cards > p:not(:has(img, h1, h2, h3, h4, h5, h6)) {
	display: none;
}
/* His old markup leaves a line break at the start of the dark heading (a blank line above it) and an empty paragraph
   above each post title. Neither carries a word; both only add height. */
body.bt26 .bt26-d-dark h6 a > br:first-child,
body.bt26 .bt26-d-posts p:empty {
	display: none;
}
@media (min-width: 861px) {
	.bt26-hero {
		padding: 40px 0 32px;
	}
	.bt26-sec {
		padding: 56px 0;
	}
	.bt26-call-band {
		padding: 56px 0;
	}
	.bt26-quote-band {
		padding: 64px 0;
	}
	.bt26-quote-band + .bt26-sec {
		padding-top: 16px;
	}
	.bt26-d-mark .bt26-wrap::before {
		width: 44px;
		height: 44px;
		margin-bottom: 12px;
	}
	/* the photo strip makes full rows: 14 photos as two rows of seven, 12 as two of six */
	body.bt26 .bt26-photos--strip:has(> :nth-child(14):last-child) {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
	body.bt26 .bt26-photos--strip:has(> :nth-child(12):last-child) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---------- 0.2.1: the services page, one card per service (owner, 22 Oct 2026) ---------- */
/* Photo, title, a short summary from that service's own page, and a "Read more" that is a real link to it. */
.bt26-d-svc {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 8px;
}
.bt26-d-svc > p:not(:has(img, h1, h2, h3, h4, h5, h6, a)) {
	display: none;
}
body.bt26 .bt26-d-svc-card {
	display: flex;
	flex-direction: column;
	background: var(--bt-paper);
	color: var(--bt-ink);
}
body.bt26 .bt26-d-svc-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}
body.bt26 .bt26-content .bt26-d-svc-card h3 {
	margin: 20px 20px 8px;
	font-size: 24px;
	line-height: 1.1;
}
body.bt26 .bt26-content .bt26-d-svc-card p {
	margin: 0 20px 16px;
	font-size: 17px;
	line-height: 1.5;
}
body.bt26 .bt26-content .bt26-d-svc-card .bt26-d-more {
	margin: auto 20px 20px;
	align-self: flex-start;
	padding: 10px 16px;
	background: var(--bt-ink);
	color: var(--bt-white);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
}
body.bt26 .bt26-content .bt26-d-svc-card .bt26-d-more:hover,
body.bt26 .bt26-content .bt26-d-svc-card .bt26-d-more:focus-visible {
	background: var(--bt-yellow);
	color: var(--bt-ink);
}
@media (max-width: 1100px) {
	.bt26-d-svc {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.bt26-d-svc {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* WordPress wraps each "Read more" in a paragraph; the paragraph takes the push to the bottom so every button lines up. */
body.bt26 .bt26-content .bt26-d-svc-card > p:has(> .bt26-d-more) {
	margin: auto 0 0;
}
body.bt26 .bt26-content .bt26-d-svc-card > p > .bt26-d-more {
	display: inline-block;
	margin: 4px 20px 20px;
}
body.bt26 .bt26-content .bt26-d-svc-card > p:has(img) {
	margin: 0;
}
body.bt26 .bt26-content .bt26-d-svc-card > p:empty {
	display: none;
}

/* ---------- 0.2.4, Thu 22 Oct 2026: photos shown whole (owner: "some of the pictures are cut off") ---------- */
/* Measured before: the hero photo was stretched to the form's height and lost up to a third of its width (64% on the
   Gallery page); every tile forced 4:3 on photos that are mostly 16:9 or wider, cutting 25 to 29% off the sides. */

/* The hero photo keeps its own shape. It no longer stretches to the height of the form beside it. */
.bt26-hero-photo {
	position: static;
	flex: 0 0 auto;
	min-height: 0;
	overflow: visible;
	background: none;
}
body.bt26 .bt26-hero-photo img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.bt26-hero--solo .bt26-hero-photo {
	max-width: 760px;
}
body.bt26 .bt26-hero-copy img {
	height: auto;
	max-height: none;
	object-fit: contain;
}

/* Sets of same-shaped photos (homepage cards, the photo strip) show each photo in its own proportions: nothing cut,
   and the rows stay even because the photos share one shape. */
body.bt26 .bt26-d-card img,
body.bt26 .bt26-photos--strip img,
body.bt26 .bt26-content .bt26-photos.bt26-photos--strip img {
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
}

/* Mixed sets keep an even box so rows line up, and show the WHOLE photo inside it on the card's own background. */
body.bt26 .bt26-content .bt26-photos:not(.bt26-photos--strip) img,
body.bt26 .bt26-d-photo img {
	object-fit: contain;
	background: var(--bt-paper);
}
body.bt26 .bt26-content .bt26-d-svc-card img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--bt-paper);
}
/* A slightly deeper backing than the card, so every fitted photo reads as the same even tile. */
body.bt26 .bt26-content .bt26-d-svc-card img {
	background: #e9e8e3;
}

/* ---------- 0.2.4: archives (categories, tags, author) ---------- */
.bt26-archive-hero {
	padding-bottom: 8px;
}
body.bt26 .bt26-archive-hero .bt26-title {
	margin: 12px 0 8px;
}
body.bt26 .bt26-archive-desc p {
	max-width: 760px;
	font-size: 18px;
}
.bt26-archive-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
}
body.bt26 .bt26-content .bt26-archive-item {
	padding: 22px 0 24px;
	border-top: 1px solid var(--bt-line, #d9d9d4);
}
body.bt26 .bt26-content .bt26-archive-item h2 {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.15;
}
body.bt26 .bt26-content .bt26-archive-item h2 a {
	color: var(--bt-ink);
	text-decoration: none;
}
body.bt26 .bt26-content .bt26-archive-item h2 a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bt-yellow);
	text-decoration-thickness: 4px;
}
body.bt26 .bt26-content .bt26-archive-item p {
	margin: 0 0 14px;
	font-size: 17px;
}
body.bt26 .bt26-content .bt26-archive-item .bt26-d-more {
	display: inline-block;
	padding: 8px 14px;
	background: var(--bt-ink);
	color: var(--bt-white);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
body.bt26 .nav-links {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	flex-wrap: wrap;
}
body.bt26 .nav-links .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--bt-ink);
	color: var(--bt-ink);
	text-decoration: none;
	font-weight: 700;
}
body.bt26 .nav-links .page-numbers.current {
	background: var(--bt-ink);
	color: var(--bt-white);
}
@media (max-width: 860px) {
	.bt26-archive-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 0.2.6: no bare bands around whole photos (owner: "some of the images have huge borders") ---------- */
/* In mixed sets the photo stays whole and sharp in front; the spare space shows a soft, blurred, slightly darkened copy
   of the same photo, so the tile reads as one picture. Proportions are untouched: nothing is cropped or stretched. */
body.bt26 .bt26-fit {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bt-paper);
	isolation: isolate;
}
body.bt26 .bt26-fit::before {
	content: "";
	position: absolute;
	inset: -24px;
	z-index: 0;
	background: var(--bt26-bg) center / cover no-repeat;
	filter: blur(18px) brightness(0.82) saturate(1.05);
}
body.bt26 .bt26-content .bt26-fit img,
body.bt26 .bt26-fit img {
	position: relative;
	z-index: 1;
	display: block;
	background: transparent;
}
/* The photo grids' older flat backing outranked the frame; inside a frame the photo itself stays see-through so the
   blurred copy shows in the spare space. */
body.bt26 .bt26-content .bt26-photos .bt26-fit img,
body.bt26 .bt26-d-photo .bt26-fit img,
body.bt26 .bt26-content .bt26-d-svc-card .bt26-fit img {
	background: transparent;
}

/* ---------- 0.2.7: CONTACT PAGE, ONE FORM, DETAILS AS A CARD ---------- */
body.bt26.page .bt26-contact-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}
body.bt26 .bt26-contact-acts .bt26-act {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border: 2px solid var(--bt-ink);
	border-radius: 2px;
	color: var(--bt-ink);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}
body.bt26 .bt26-contact-acts .bt26-act--wa {
	background: var(--bt-ink);
	color: var(--bt-white);
}
body.bt26 .bt26-contact-acts .bt26-act:hover,
body.bt26 .bt26-contact-acts .bt26-act:focus {
	background: var(--bt-yellow);
	border-color: var(--bt-yellow);
	color: var(--bt-ink);
}
body.bt26 .bt26-contact-acts + * { margin-top: 0; }
@media (max-width: 600px) {
	body.bt26 .bt26-contact-acts .bt26-act { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 0.2.7: THE PHONE BAR, ONE SLIM LINE ---------- */
@media (max-width: 1100px) {
	.bt26-sticky {
		grid-template-columns: 1.5fr 1fr;
		gap: 6px;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		transition: transform .25s ease;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
	}
	.bt26-sticky.is-away {
		transform: translateY(110%);
	}
	body.bt26 .bt26-sticky a {
		height: 48px;
		flex-direction: row;
		gap: 8px;
		font-weight: 800;
		font-size: 19px;
		white-space: nowrap;
	}
	body.bt26 .bt26-sticky-wa {
		font-size: 19px;
	}
	.bt26-sticky-ico {
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
		fill: currentColor;
	}
	body.bt26 .bt26-sticky-wa .bt26-sticky-ico {
		fill: #25d366;
	}
	.bt26-footer {
		padding-bottom: 96px;
	}
}
@media (max-width: 360px) {
	body.bt26 .bt26-sticky a { font-size: 17px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.bt26-sticky { transition: none; }
}