/* Benecke 2026 polish, the 20 UX rounds of 7 Nov 2026. Presentation only: no words, headings, links or images change.
   One marked section per round, so each can be read, checked and removed on its own. Record: rebuild/ux-rounds/UX-ROUNDS-2026-11-07.md */

/* ---------- ROUND 1: TYPOGRAPHY RHYTHM ---------- */
body.bt26 {
	text-rendering: optimizeLegibility;
	font-kerning: normal;
	-webkit-text-size-adjust: 100%;
}
/* A heading in the middle of a section gets room above it, so it reads as the start of something new. */
body.bt26 .bt26-content * + h2 {
	margin-top: 1.4em;
}
body.bt26 .bt26-content * + h4 {
	margin-top: 1.3em;
}
/* Lists keep the same reading width as the paragraphs around them. */
body.bt26 .bt26-content > ul,
body.bt26 .bt26-content > ol {
	max-width: 820px;
}
/* Links in running text: a quiet underline that turns Benecke yellow on hover. */
body.bt26 .bt26-content p a,
body.bt26 .bt26-content li a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(17, 17, 17, 0.45);
	transition: text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease, background-color 0.15s ease;
}
body.bt26 .bt26-content p a:hover,
body.bt26 .bt26-content li a:hover {
	text-decoration-color: var(--bt-yellow);
	text-decoration-thickness: 3px;
}
/* Prices, phone numbers and tonnages line up digit for digit. */
body.bt26 .bt26-content,
body.bt26 .bt26-footer {
	font-variant-numeric: tabular-nums;
}

/* ---------- ROUND 2: ONE BUTTON SYSTEM ---------- */
/* Every button answers the hand: it lifts a little under the pointer, presses down when tapped, and shows a clear ring for keyboards. */
body.bt26 .bt26-call,
body.bt26 .bt26-quote .bt26-go-btn,
body.bt26 .bt26-quote input[type="submit"],
body.bt26 .bt26-quote .bt-submit,
body.bt26 .bt26-quote .bt26-skip-btn,
body.bt26 .bt26-menu-btn {
	border-radius: 4px;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}
body.bt26 .bt26-call:hover,
body.bt26 .bt26-quote .bt26-go-btn:hover,
body.bt26 .bt26-quote input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(17, 17, 17, 0.18);
}
body.bt26 .bt26-call:active,
body.bt26 .bt26-quote .bt26-go-btn:active,
body.bt26 .bt26-quote input[type="submit"]:active,
body.bt26 .bt26-quote .bt26-skip-btn:active,
body.bt26 .bt26-menu-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}
body.bt26 .bt26-quote .bt26-skip-btn:hover,
body.bt26 .bt26-menu-btn:hover {
	background: var(--bt-ink);
	color: var(--bt-white);
}
body.bt26 .bt26-menu-btn:hover .bt26-burger span {
	background: var(--bt-white);
}
body.bt26 .bt26-call:focus-visible,
body.bt26 .bt26-quote .bt26-go-btn:focus-visible,
body.bt26 .bt26-quote input[type="submit"]:focus-visible,
body.bt26 .bt26-quote .bt26-skip-btn:focus-visible,
body.bt26 .bt26-menu-btn:focus-visible {
	outline: 3px solid var(--bt-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--bt-yellow);
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-call,
	body.bt26 .bt26-quote .bt26-go-btn,
	body.bt26 .bt26-quote input[type="submit"],
	body.bt26 .bt26-quote .bt-submit,
	body.bt26 .bt26-quote .bt26-skip-btn,
	body.bt26 .bt26-menu-btn {
		transition: none;
		transform: none !important;
	}
}

/* ===== ROUND 3 (0.2.12): the menu stays in reach on computers. The header sticks with a negative top, so the logo row
   scrolls away and only the menu row stays pinned: no extra markup, no change in height, so nothing below it moves.
   A soft shadow appears once the page is scrolled (class set by bt26.js, section 5). Anchors land below the menu. ===== */
@media (min-width: 861px) {
	body.bt26 .bt26-header {
		position: sticky;
		top: -88px;
		z-index: 40;
		transition: box-shadow .2s ease;
	}
	body.bt26.admin-bar .bt26-header {
		top: -56px;
	}
	body.bt26 .bt26-header.is-scrolled {
		box-shadow: 0 6px 18px rgba(17, 17, 17, .10);
	}
	body.bt26 [id] {
		scroll-margin-top: 80px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-header {
		transition: none;
	}
}
/* Round 3, part 2: once the logo row has scrolled away, the same "Call the office" button moves into the empty right
   end of the pinned menu bar, so the number is never more than a glance away. The same link, moved by CSS only. */
@media (min-width: 1024px) {
	body.bt26 .bt26-header.is-scrolled .bt26-call {
		position: fixed;
		top: 6px;
		right: max(48px, calc((100% - 1280px) / 2 + 48px));
		height: 44px;
		padding: 0 18px;
		font-size: 18px;
		z-index: 41;
		animation: bt26-callin .2s ease both;
	}
	body.bt26.admin-bar .bt26-header.is-scrolled .bt26-call {
		top: 38px;
	}
}
@keyframes bt26-callin {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-header.is-scrolled .bt26-call {
		animation: none;
	}
}

/* ===== ROUND 4 (0.2.12): the quote form. Lighter resting borders that still pass the 3:1 contrast rule for fields
   (#8c8c88 on white), softer 4px corners to match the buttons, a darker border on hover, the existing yellow focus
   ring kept, a filled field firms up once the person has typed something valid, a missed field turns light red, and
   the message after sending is green when it went and red when it did not. Words and fields unchanged. ===== */
body.bt26 .bt26-quote input[type="text"],
body.bt26 .bt26-quote input[type="tel"],
body.bt26 .bt26-quote input[type="email"],
body.bt26 .bt26-quote select,
body.bt26 .bt26-quote textarea {
	border-color: #8c8c88;
	border-radius: 4px;
	transition: border-color .15s ease, background-color .15s ease;
}
body.bt26 .bt26-quote input[type="text"]:hover,
body.bt26 .bt26-quote input[type="tel"]:hover,
body.bt26 .bt26-quote input[type="email"]:hover,
body.bt26 .bt26-quote select:hover,
body.bt26 .bt26-quote textarea:hover {
	border-color: #444;
}
body.bt26 .bt26-quote input:focus,
body.bt26 .bt26-quote select:focus,
body.bt26 .bt26-quote textarea:focus {
	border-color: var(--bt-ink);
	outline-offset: 1px;
}
body.bt26 .bt26-quote ::placeholder {
	color: #767672;
	opacity: 1;
}
body.bt26 .bt26-quote input:user-valid:not(:focus):not([type="file"]),
body.bt26 .bt26-quote select:user-valid:not(:focus),
body.bt26 .bt26-quote textarea:user-valid:not(:focus) {
	border-color: var(--bt-ink);
}
body.bt26 .bt26-quote .wpcf7-not-valid,
body.bt26 .bt26-quote .bt26-missing input,
body.bt26 .bt26-quote .bt26-missing select,
body.bt26 .bt26-quote .bt26-missing textarea {
	border-color: #b00020;
	background-color: #fff6f7;
}
body.bt26 .bt26-quote input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 16px;
	border: 2px solid var(--bt-ink);
	border-radius: 4px;
	background: var(--bt-white);
	color: var(--bt-ink);
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
body.bt26 .bt26-quote input[type="file"]::file-selector-button:hover {
	background: var(--bt-ink);
	color: var(--bt-white);
}
body.bt26 .bt26-quote .wpcf7-response-output {
	border-radius: 4px;
	font-weight: 600;
}
body.bt26 .bt26-quote form.sent .wpcf7-response-output {
	border-color: #1b7f3b;
	background: #eef8f1;
	color: #0f4d24;
}
body.bt26 .bt26-quote form.invalid .wpcf7-response-output,
body.bt26 .bt26-quote form.unaccepted .wpcf7-response-output,
body.bt26 .bt26-quote form.failed .wpcf7-response-output,
body.bt26 .bt26-quote form.spam .wpcf7-response-output {
	border-color: #b00020;
	background: #fff6f7;
	color: #7a0016;
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-quote input,
	body.bt26 .bt26-quote select,
	body.bt26 .bt26-quote textarea,
	body.bt26 .bt26-quote input[type="file"]::file-selector-button {
		transition: none;
	}
}

/* ===== ROUND 5 (0.2.12): photos. Photographs (JPEGs only, so logos and badges stay flat) get 6px corners and a soft
   shadow that lifts them off the page; the framed photos on service pages get the same corners; captions sit closer to
   their photo with a short yellow mark. The homepage cards and the photo strip have their own rounds (6 and 11). ===== */
body.bt26 .bt26-hero-photo img,
body.bt26 .bt26-content figure img[src*=".jp"],
body.bt26 .bt26-wrap > p > img[src*=".jp"],
body.bt26 .bt26-wrap > p > a > img[src*=".jp"] {
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .08), 0 10px 28px rgba(17, 17, 17, .12);
}
body.bt26 .bt26-fit {
	border-radius: 6px;
}
body.bt26 .bt26-content figure img {
	margin-bottom: 12px;
}
body.bt26 .bt26-content figcaption {
	position: relative;
	padding-left: 14px;
	font-size: 15px;
	line-height: 1.45;
	color: #555;
}
body.bt26 .bt26-content figcaption::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	bottom: .25em;
	width: 3px;
	border-radius: 2px;
	background: var(--bt-yellow);
}

/* ===== ROUND 6 (0.2.13): service cards (homepage cards and the services hub). 6px corners; on a mouse they lift 3px
   with a soft shadow, the photo eases in 4 percent inside its own frame (nothing cropped at rest), and the arrow nudges
   right; keyboard focus gets the ink ring with the yellow halo. Touch screens and reduced motion get no movement. ===== */
body.bt26 .bt26-d-card,
body.bt26 .bt26-content .bt26-d-svc-card {
	border-radius: 6px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
body.bt26 .bt26-d-card p:has(img),
body.bt26 .bt26-content .bt26-d-svc-card > p:has(img) {
	overflow: hidden;
}
body.bt26 .bt26-d-card img,
body.bt26 .bt26-content .bt26-d-svc-card img {
	transition: transform .35s ease;
}
body.bt26 .bt26-d-card h5::after {
	display: inline-block;
	transition: transform .2s ease;
}
body.bt26 .bt26-d-card:focus-visible {
	outline: 3px solid var(--bt-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--bt-yellow);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body.bt26 .bt26-d-card:hover,
	body.bt26 .bt26-content .bt26-d-svc-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 2px 4px rgba(17, 17, 17, .06), 0 14px 32px rgba(17, 17, 17, .14);
	}
	body.bt26 .bt26-d-card:hover img,
	body.bt26 .bt26-content .bt26-d-svc-card:hover img {
		transform: scale(1.04);
	}
	body.bt26 .bt26-d-card:hover h5::after {
		transform: translateX(4px);
	}
}

/* ===== ROUND 7 (0.2.13): trust strip and rating badge. The yellow squares become round yellow ticks (inline SVG, no
   request), the dividing lines go lighter so the four facts read as one calm block, and the Google rating gets a
   yellow star and a softer frame that firms up on hover. Words unchanged. ===== */
body.bt26 .bt26-trust,
body.bt26 .bt26-trust li,
body.bt26 .bt26-trust li:nth-child(n) {
	border-bottom-color: #cfcfca;
	border-right-color: #cfcfca;
}
body.bt26 .bt26-trust li::before {
	top: 17px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	outline: 0;
	background: var(--bt-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
body.bt26 .bt26-trust li:nth-child(odd) {
	padding-left: 32px;
}
body.bt26 .bt26-trust li:nth-child(even) {
	padding-left: 52px;
}
body.bt26 .bt26-rating {
	gap: 6px;
	padding: 10px 18px 10px 14px;
	border-color: #c9c9c4;
	border-radius: 4px;
	background: var(--bt-white);
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.bt26 .bt26-rating::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-right: 2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5L2.6 9.4l6.5-.8z' fill='%23ffdd00' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bt26 .bt26-rating:hover {
	border-color: var(--bt-ink);
	box-shadow: 0 6px 16px rgba(17, 17, 17, .10);
}
body.bt26 .bt26-rating:focus-visible {
	outline: 3px solid var(--bt-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--bt-yellow);
}
@media (max-width: 860px) {
	body.bt26 .bt26-trust li,
	body.bt26 .bt26-trust li:nth-child(odd),
	body.bt26 .bt26-trust li:nth-child(even) {
		padding-left: 32px;
	}
	body.bt26 .bt26-trust li::before,
	body.bt26 .bt26-trust li:nth-child(even)::before {
		top: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-rating {
		transition: none;
	}
}

/* ===== ROUND 8 (0.2.13): photos inside posts were shown at 300px on a computer, a postage stamp beside the text.
   Photographs placed on their own line (not floated left or right, not logos) now fill the reading column up to 720px,
   and the full width on phones. WordPress marks these images sizes="auto", so the browser fetches the larger copy that
   already exists in the media library; nothing is stretched beyond the file it receives. ===== */
body.bt26 .bt26-wrap > figure:not(.alignleft):not(.alignright):has(img[src*=".jp"]),
body.bt26 .bt26-content .bt26-wrap > figure:not(.alignleft):not(.alignright):has(img[src*=".jp"]) {
	width: 100% !important;
	max-width: 720px;
}
body.bt26 .bt26-wrap > figure:not(.alignleft):not(.alignright) img[src*=".jp"],
body.bt26 .bt26-wrap > p > img[src*=".jp"]:not(.alignleft):not(.alignright),
body.bt26 .bt26-wrap > p > a > img[src*=".jp"]:not(.alignleft):not(.alignright) {
	width: 100%;
	max-width: 720px;
	height: auto;
}

/* ===== ROUND 9 (0.2.13): lists. The bullet squares lose their hard outline and become soft yellow squares with
   rounded corners, centred on the first line of text whatever its size; the dividing lines between items go lighter;
   numbered lists get bold numbers in the heading face. ===== */
body.bt26 .bt26-content ul > li {
	border-bottom-color: #e2e2de;
}
body.bt26 .bt26-content ul > li::before,
body.bt26 .bt26-d-item h5::before {
	top: 16px;
	top: calc(6px + (1lh - 10px) / 2);
	width: 10px;
	height: 10px;
	border-radius: 3px;
	outline: 0;
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .35);
}
body.bt26 .bt26-d-item h5::before {
	top: calc((1lh - 10px) / 2);
}
.bt26-d-item {
	border-top-color: #cfcfca;
}
body.bt26 .bt26-content ol > li {
	padding: 4px 0 4px 6px;
}
body.bt26 .bt26-content ol > li::marker {
	font-family: var(--bt-head);
	font-weight: 700;
	color: var(--bt-ink);
	font-variant-numeric: tabular-nums;
}

/* ===== ROUND 10 (0.2.13): the dark band. A gentle depth (lighter at the top right, never patterned), body text a
   touch softer than the headings so the eye lands on the heading first, more air between lines, and the closing line
   set as a pull quote in the heading face. Words unchanged. ===== */
.bt26-d-dark {
	background-color: var(--bt-ink);
	background-image: radial-gradient(120% 90% at 100% 0%, #262626 0%, rgba(17, 17, 17, 0) 60%);
}
body.bt26 .bt26-d-dark p {
	max-width: 720px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .86);
}
body.bt26 .bt26-d-dark h2 {
	margin-bottom: 20px;
	letter-spacing: -.005em;
}
body.bt26 .bt26-d-dark p strong {
	margin-top: 12px;
	padding: 4px 0 4px 20px;
	font-family: var(--bt-head);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.25;
	color: var(--bt-white);
}
body.bt26 .bt26-d-dark p a {
	text-decoration-color: var(--bt-yellow);
}
@media (max-width: 860px) {
	body.bt26 .bt26-d-dark p strong {
		font-size: 22px;
		padding-left: 16px;
	}
}

/* ROUND 11 (0.2.14): the homepage heading on three lines (owner, 9 Nov 2026: "CRANE TRUCKS / ROLLBACKS / LOWBEDS AND ABNORMAL LOADS").
   The longest line needs 13.4 times the font size in Barlow Semi Condensed, so on computers the size follows the column width
   (capped at the old 60px, floored at 40px). Home only, so no other page's heading changes. Phones keep their size and may wrap. */
@media (min-width: 861px) {
	body.bt26.home .bt26-hero-copy { container-type: inline-size; }
	body.bt26.home .bt26-hero-copy h1 { font-size: clamp(40px, calc(100cqi / 13.8), 60px); }
}

/* ===== ROUND 12 (0.2.15): the homepage photo strip. The tiles sat edge to edge with no seam, so fourteen photos read as one
   busy block. Fine dark seams (3px, the same ink as the band above, so the strip reads as part of it) give each photo its
   own frame; with a mouse a photo eases in 4% inside its tile and lifts in brightness. Nothing moves under reduce motion,
   and nothing changes on touch screens. ===== */
body.bt26 .bt26-photos--strip,
body.bt26 .bt26-content .bt26-photos.bt26-photos--strip {
	gap: 3px;
	background: var(--bt-ink, #111);
	border-bottom: 3px solid var(--bt-ink, #111);
}
body.bt26 .bt26-photos--strip > p {
	overflow: hidden;
	line-height: 0;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	body.bt26 .bt26-photos--strip img {
		transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
	}
	body.bt26 .bt26-photos--strip > p:hover img {
		transform: scale(1.04);
		filter: brightness(1.06) saturate(1.05);
	}
}

/* ===== ROUND 13 (0.2.15): the call band. The number is the one thing on the band anyone acts on, so it now looks like
   something you can press: a round ink badge with a phone mark leads it (a drawing, no words), an ink line draws in
   under it on hover, it presses down a pixel on tap, and keyboard focus gets the ink ring. A soft light from the top left
   takes the flatness off the yellow without changing its colour. On the homepage the empty paragraph WordPress left after
   the photo strip loses its margin, so the strip meets the band without a white gap. ===== */
.bt26-call-band {
	background-image: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
}
body.bt26 .bt26-photos--strip + p {
	margin: 0;
}
body.bt26 .bt26-call-band-num {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .22em;
	border-radius: 6px;
	transition: transform .12s ease;
}
body.bt26 .bt26-call-band-num::before {
	content: "";
	flex: none;
	width: .62em;
	height: .62em;
	border-radius: 50%;
	background: var(--bt-ink, #111) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffdd00' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center / 52% no-repeat;
}
body.bt26 .bt26-call-band-num::after {
	content: "";
	position: absolute;
	left: .84em;
	right: 0;
	bottom: -.06em;
	height: .05em;
	min-height: 3px;
	background: var(--bt-ink, #111);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
body.bt26 .bt26-call-band-num:focus-visible::after {
	transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
	body.bt26 .bt26-call-band-num:hover::after {
		transform: scaleX(1);
	}
}
body.bt26 .bt26-call-band-num:active {
	transform: translateY(1px);
}
body.bt26 .bt26-call-band-num:focus-visible {
	outline: 3px solid var(--bt-ink, #111);
	outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-call-band-num,
	body.bt26 .bt26-call-band-num::after {
		transition: none;
	}
}

/* ===== ROUND 14 (0.2.15): "Related services" at the foot of 33 service pages. They were a plain bulleted list of
   underlined links, easy to skim past at the exact moment a visitor is deciding where to go next. Each link is now a
   card the full width of its column: white, a light border, 6px corners, the arrow at the right; with a mouse the card
   lifts a pixel, its border darkens, a yellow line shows along its foot and the arrow nudges on. Two columns on a
   computer, one on a phone, every card at least 56px tall for a thumb. Same links, same words, same order. ===== */
body.bt26 .bt26-content ul.benecke-related-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	max-width: none;
	margin: 12px 0 32px;
	padding: 0;
	list-style: none;
}
body.bt26 .bt26-content ul.benecke-related-services > li {
	margin: 0;
	padding: 0;
	border: 0;
}
body.bt26 .bt26-content ul.benecke-related-services > li::before {
	display: none;
}
body.bt26 .bt26-content ul.benecke-related-services > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 18px;
	border: 1px solid #cfcfca;
	border-radius: 6px;
	background: #fff;
	color: var(--bt-ink, #111);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
body.bt26 .bt26-content ul.benecke-related-services > li > a::after {
	content: "\2192";
	flex: none;
	font-weight: 700;
	transition: transform .2s ease;
}
body.bt26 .bt26-content ul.benecke-related-services > li > a:focus-visible {
	outline: 3px solid var(--bt-ink, #111);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--bt-yellow, #ffdd00);
}
@media (hover: hover) and (pointer: fine) {
	body.bt26 .bt26-content ul.benecke-related-services > li > a:hover {
		border-color: var(--bt-ink, #111);
		box-shadow: inset 0 -3px 0 var(--bt-yellow, #ffdd00), 0 8px 20px rgba(17, 17, 17, .08);
		transform: translateY(-1px);
	}
	body.bt26 .bt26-content ul.benecke-related-services > li > a:hover::after {
		transform: translateX(4px);
	}
}
body.bt26 .bt26-content ul.benecke-related-services > li > a:active {
	transform: translateY(0);
}
@media (max-width: 860px) {
	body.bt26 .bt26-content ul.benecke-related-services {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	body.bt26 .bt26-content ul.benecke-related-services > li > a {
		font-size: 17px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-content ul.benecke-related-services > li > a,
	body.bt26 .bt26-content ul.benecke-related-services > li > a::after {
		transition: none;
	}
	body.bt26 .bt26-content ul.benecke-related-services > li > a:hover,
	body.bt26 .bt26-content ul.benecke-related-services > li > a:hover::after {
		transform: none;
	}
}

/* ===== ROUND 15 (0.2.15): the footer. A 4px Benecke yellow edge along its top so it reads as the close of the page
   rather than another black band; column headings keep their quiet rule, now lighter, with a short yellow mark under each;
   links sit at a soft white so the headings and the office number lead, and turn yellow with an underline under a mouse or
   keyboard; the office number gets the same; on phones each link is a taller target (about 40px) for a thumb. ===== */
body.bt26 .bt26-footer {
	border-top: 4px solid var(--bt-yellow, #ffdd00);
}
body.bt26 .bt26-footer-h {
	position: relative;
	border-bottom-color: rgba(255, 255, 255, .16);
}
body.bt26 .bt26-footer-h::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 28px;
	height: 2px;
	background: var(--bt-yellow, #ffdd00);
}
body.bt26 .bt26-footer li a {
	color: rgba(255, 255, 255, .84);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
body.bt26 .bt26-footer li a:hover,
body.bt26 .bt26-footer li a:focus-visible {
	color: var(--bt-yellow, #ffdd00);
	text-decoration-color: currentColor;
}
body.bt26 .bt26-footer a:focus-visible {
	outline: 2px solid var(--bt-yellow, #ffdd00);
	outline-offset: 4px;
	border-radius: 2px;
}
body.bt26 .bt26-footer-tel {
	align-self: flex-start;
}
body.bt26 .bt26-footer-tel strong {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
	transition: text-decoration-color .15s ease;
}
body.bt26 .bt26-footer-tel:hover strong,
body.bt26 .bt26-footer-tel:focus-visible strong {
	text-decoration-color: currentColor;
}
body.bt26 .bt26-footer-tel:hover,
body.bt26 .bt26-footer-tel:focus-visible {
	text-decoration: none;
}
@media (max-width: 1100px) {
	body.bt26 .bt26-footer ul {
		gap: 2px;
	}
	body.bt26 .bt26-footer .bt26-footer-areas {
		gap: 2px 16px;
	}
	body.bt26 .bt26-footer li a {
		display: inline-block;
		padding: 8px 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-footer li a,
	body.bt26 .bt26-footer-tel strong {
		transition: none;
	}
}

/* ===== ROUND 16 (0.2.16): the phone bar (call and WhatsApp). The two buttons get the
   button system's 4px corners; the bar becomes frosted (the page shows softly through it) with a hairline edge instead of
   a grey rule; a tap presses the button down and darkens it a touch, replacing the grey flash phones add on their own;
   taps answer at once (no double-tap zoom wait); keyboard focus gets the ink ring. Height, words and layout unchanged.
   The bar already keeps clear of an iPhone's home bar where the browser reports one (safe-area padding since 0.2.0). ===== */
@media (max-width: 1100px) {
	.bt26-sticky {
		background: rgba(255, 255, 255, .9);
		-webkit-backdrop-filter: saturate(1.4) blur(10px);
		backdrop-filter: saturate(1.4) blur(10px);
		border-top: 1px solid rgba(17, 17, 17, .1);
		box-shadow: 0 -6px 20px rgba(17, 17, 17, .08);
	}
	body.bt26 .bt26-sticky a {
		border-radius: 4px;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		transition: transform .1s ease, filter .1s ease, box-shadow .1s ease;
		box-shadow: 0 1px 2px rgba(17, 17, 17, .12);
	}
	body.bt26 .bt26-sticky a:active {
		transform: translateY(1px) scale(.985);
		filter: brightness(.93);
		box-shadow: none;
	}
	body.bt26 .bt26-sticky a:focus-visible {
		outline: 3px solid var(--bt-ink, #111);
		outline-offset: 2px;
		box-shadow: 0 0 0 6px var(--bt-yellow, #ffdd00);
	}
	body.bt26 .bt26-sticky-wa:focus-visible {
		outline-color: var(--bt-yellow, #ffdd00);
		box-shadow: 0 0 0 6px var(--bt-ink, #111);
	}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	@media (max-width: 1100px) {
		.bt26-sticky {
			background: #fff;
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	body.bt26 .bt26-sticky a {
		transition: none;
	}
}

/* ===== ROUND 17 (0.2.16): the phone menu. The three lines on the Menu button turn into a cross while the menu is open,
   so the same button plainly closes it; the menu eases down into place instead of appearing at once; the service links
   under "Services" hang off a thin guide line that turns yellow beside the one under a finger or the keyboard; the page
   you are on carries a yellow mark; Escape closes the menu (bt26.js, section 6). Words, links and order unchanged. ===== */
@media (max-width: 860px) {
	.bt26-burger span {
		transition: transform .22s ease, opacity .15s ease;
		transform-origin: center;
	}
	.bt26-menu-btn[aria-expanded="true"] .bt26-burger span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.bt26-menu-btn[aria-expanded="true"] .bt26-burger span:nth-child(2) {
		opacity: 0;
	}
	.bt26-menu-btn[aria-expanded="true"] .bt26-burger span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}
	.bt26-js .bt26-nav.is-open {
		animation: bt26-menu-in .22s cubic-bezier(.2, .7, .2, 1) both;
		box-shadow: 0 12px 24px rgba(17, 17, 17, .08);
	}
	body.bt26 .bt26-menu ul {
		margin-left: 2px;
		padding-left: 0;
		border-left: 2px solid #d9d9d6;
	}
	body.bt26 .bt26-menu ul a {
		margin-left: -2px;
		padding-left: 14px;
		border-left: 2px solid transparent;
		transition: border-color .15s ease;
	}
	body.bt26 .bt26-menu ul a:hover,
	body.bt26 .bt26-menu ul a:focus-visible,
	body.bt26 .bt26-menu ul a:active {
		border-left-color: var(--bt-yellow, #ffdd00);
	}
	body.bt26 .bt26-menu .current-menu-item > a {
		box-shadow: inset 4px 0 0 var(--bt-yellow, #ffdd00);
		padding-left: 14px;
	}
	body.bt26 .bt26-menu ul .current-menu-item > a {
		box-shadow: none;
		border-left-color: var(--bt-yellow, #ffdd00);
	}
}
@keyframes bt26-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bt26-burger span,
	body.bt26 .bt26-menu ul a {
		transition: none;
	}
	.bt26-js .bt26-nav.is-open {
		animation: none;
	}
}

/* ===== ROUND 18 (0.2.16): the back to top button (made by bt26.js, section 7). A 48px round ink button at the bottom
   left on computers, where nothing else sits; it fades and rises in once the reader is two screens down a long page and
   is gone, not merely see-through, when it is not needed. Yellow on hover, ink ring with a yellow halo for keyboards. It
   never shows on phones or tablets. ===== */
.bt26-top {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 40;
	width: 48px;
	height: 48px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bt-ink, #111);
	color: #fff;
	box-shadow: 0 6px 18px rgba(17, 17, 17, .22);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.bt26-top svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
@media (min-width: 1101px) {
	.bt26-top {
		display: flex;
	}
}
.bt26-top.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s, background-color .15s ease, color .15s ease;
}
.bt26-top:hover {
	background: var(--bt-yellow, #ffdd00);
	color: var(--bt-ink, #111);
}
.bt26-top:active {
	transform: translateY(1px);
}
.bt26-top:focus-visible {
	outline: 3px solid var(--bt-ink, #111);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--bt-yellow, #ffdd00);
}
@media (prefers-reduced-motion: reduce) {
	.bt26-top,
	.bt26-top.is-on {
		transition: none;
		transform: none;
	}
}
@media print {
	.bt26-top {
		display: none !important;
	}
}

/* ===== ROUND 19 (0.2.16): no layout jump at the top of the page. The 700 weight of the heading font, which sets the
   menu and the "Call the office" button, is now preloaded with the others (functions.php), so that button no longer
   widens after the page first paints. And a safeguard with nothing to do today: no page carries a table yet, but if one
   is ever added to a post, it scrolls sideways inside its own box on a phone instead of pushing the whole page wide. ===== */
body.bt26 .bt26-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}
body.bt26 .bt26-content th,
body.bt26 .bt26-content td {
	padding: 8px 12px;
	border-bottom: 1px solid #e2e2de;
	text-align: left;
	vertical-align: top;
}
body.bt26 .bt26-content th {
	font-family: var(--bt-head);
	font-weight: 700;
}
/* Round 19, second jump: the homepage photo strip and service cards. An older rule set "aspect-ratio: auto" on these
   photos, which cancelled the space the browser reserves from each photo's width and height, so each tile was 0px tall
   until its photo arrived and everything below moved down as they did. All eighteen are 1600 by 856; reserving that
   shape restores the space. "auto" still lets each photo keep its own true shape once loaded, so nothing is cropped. */
body.bt26 .bt26-d-card img,
body.bt26 .bt26-photos--strip img,
body.bt26 .bt26-content .bt26-photos.bt26-photos--strip img {
	aspect-ratio: auto 1600 / 856;
}

/* ===== ROUND 20 (0.2.16): accessibility pass, with print. Audited first (tools in ux-rounds): every one of 181 focusable
   items on four pages shows a ring, no text fails contrast, the skip link is first and lands on the content. One gap
   found and closed: links inside the dark band took the ink ring on an ink background, so a keyboard user lost their
   place there; they now get a yellow one. Plus: selected text in Benecke yellow; in Windows high contrast mode the
   halos (drawn as shadows, which that mode removes) fall back to real outlines; and a print style, so a service page
   printed for a site office comes out as the words, the photos and the office number, without menus, forms or bars. ===== */
body.bt26 .bt26-d-dark a:focus-visible {
	outline: 3px solid var(--bt-yellow, #ffdd00);
	outline-offset: 3px;
}
body.bt26 ::selection {
	background: var(--bt-yellow, #ffdd00);
	color: var(--bt-ink, #111);
}
@media (forced-colors: active) {
	body.bt26 a:focus-visible,
	body.bt26 button:focus-visible,
	body.bt26 input:focus-visible,
	body.bt26 select:focus-visible,
	body.bt26 textarea:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}
	body.bt26 .bt26-sticky a,
	body.bt26 .bt26-content ul.benecke-related-services > li > a {
		border: 1px solid CanvasText;
	}
}
@media print {
	@page {
		margin: 16mm 14mm;
	}
	body.bt26 {
		background: #fff !important;
		color: #000 !important;
	}
	body.bt26 .bt26-nav,
	body.bt26 .bt26-menu-btn,
	body.bt26 .bt26-call,
	body.bt26 .bt26-skip,
	body.bt26 .bt26-sticky,
	body.bt26 .bt26-top,
	body.bt26 .bt26-quote,
	body.bt26 .bt26-quote-band,
	body.bt26 .bt26-footer-col,
	body.bt26 .qlwapp {
		display: none !important;
	}
	body.bt26 .bt26-header {
		position: static !important;
		box-shadow: none !important;
	}
	body.bt26 .bt26-sec,
	body.bt26 .bt26-d-dark,
	body.bt26 .bt26-call-band,
	body.bt26 .bt26-footer {
		background: none !important;
		color: #000 !important;
		padding: 12px 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	body.bt26 .bt26-d-dark *,
	body.bt26 .bt26-footer * {
		color: #000 !important;
	}
	body.bt26 .bt26-call-band-num {
		font-size: 32px !important;
	}
	body.bt26 .bt26-call-band-num::before,
	body.bt26 .bt26-call-band-num::after {
		display: none !important;
	}
	body.bt26 img {
		box-shadow: none !important;
		max-width: 100% !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	body.bt26 .bt26-content h2,
	body.bt26 .bt26-content h3 {
		page-break-after: avoid;
		break-after: avoid;
	}
	/* The parent theme's print rules write every link's address after it, the logo and the buttons included. Off
	   everywhere, then back on for links inside the page text only, where a reader on paper can use them. */
	body.bt26 a[href]::after,
	body.bt26 abbr[title]::after {
		content: none !important;
	}
	body.bt26 .bt26-content p a[href^="http"]:not(:has(img))::after,
	body.bt26 .bt26-content li a[href^="http"]:not(:has(img))::after {
		content: " (" attr(href) ")" !important;
		font-size: 0.8em;
		font-weight: 400;
		word-break: break-all;
	}
	body.bt26 .bt26-content ul.benecke-related-services {
		display: block !important;
	}
	body.bt26 .bt26-content ul.benecke-related-services > li > a {
		display: block !important;
		min-height: 0 !important;
		padding: 2px 0 !important;
		border: 0 !important;
	}
	body.bt26 .bt26-content ul.benecke-related-services > li > a::after {
		content: " (" attr(href) ")" !important;
		transform: none !important;
		font-size: 0.8em;
		font-weight: 400;
	}
}