/* ==========================================================================
   Accessibility: visible keyboard focus
   Shows only for keyboard users (:focus-visible), not mouse clicks.
   currentColor keeps the ring visible on both the green header and white pages.
   ========================================================================== */
body :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The second "open menu" icon slides in only after scrolling. While it's off-screen,
   hide it from keyboard and screen-reader users too. */
a.collapse-menu-icon {
	visibility: hidden;
	transition:
		transform 0.3s var(--ease-out),
		top 0.3s var(--ease-out),
		visibility 0s var(--ease-out) 0.3s;
}
body.fixed-header.scrolled a.collapse-menu-icon {
	visibility: visible;
	transition:
		transform 0.3s var(--ease-out),
		top 0.3s var(--ease-out),
		visibility 0s;
}

/* ===================================
   Touch and small screens
   Tap targets measured at 390px: footer links 21px tall, pager bars 3px, service tabs 31px,
   Previous/Next 30px, contact links 24px, "Send message" 21px. Comfortable is ~44px; each gets
   invisible padding or a larger hit area without changing how it looks. Two circle captions were
   10px; raised to 11px.
=================================== */
@media (pointer: coarse), (max-width: 768px) {
	.footer_menu_col ul.menu li a,
	.privacy_col ul.menu li a,
	.footer_menu_col .email a,
	.footer_menu_col .phone a {
		display: inline-block;
		padding-block: 11px;
		margin-block: -11px;
		background-position: 0 calc(100% - 11px);
	}
	.services_tab_inner a {
		min-height: 40px;
	}
	.portfolio_navigation .post_link a {
		padding-block: 7px;
	}
	.contact_info_col a {
		display: inline-block;
		padding-block: 10px;
		margin-block: -10px;
	}
	button.btn_submit {
		padding-block: 12px;
		margin-block: -12px;
	}
	/* slim progress bars: keep the look, enlarge the hit area */
	.section_success_driven .cf-dot,
	.section_circle_content_box .cb-dot {
		overflow: visible;
	}
	.section_success_driven .cf-dot-fill,
	.section_circle_content_box .cb-dot-fill {
		border-radius: inherit;
	}
	.section_success_driven .cf-dot::after {
		content: "" !important; /* block CSS sets none */
		position: absolute;
		inset: -16px -6px;
	}
}
@media (max-width: 600px) {
	.circle_item .circle_text {
		font-size: 11px;
	}
	.award_content_wrap .award_circle .award_circle_text {
		font-size: 11px;
		letter-spacing: 1px;
	}
}