/*
Theme Name: Beckage
Theme URI: 
Author: Studio6 / IHC Media
Author URI: https://ihmholdings.com
Description: Custom block theme for Beckage Sealcoating. Built on the locked brand guidelines (Cone Orange / Asphalt Black, Oswald + Inter). Pattern-driven so the client can re-compose pages without touching code.
Version: 0.20.7
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary - Beckage Sealcoating / Studio6
Text Domain: beckage
*/

/* ==========================================================================
   Beckage theme - escape-hatch styles. Tokens come from theme.json.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Body / layout reset - kill ALL gaps between header, page banner, main
   -------------------------------------------------------------------------- */
body > * + * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Eliminate the chalk-white "spacer" strips that appear between full-width
   sections (wp:group / wp:cover) on every page. theme.json has blockGap:true,
   so WordPress injects ~32px of margin between sibling top-level blocks in
   the post content; that gap shows the body's chalk-white background through
   between adjacent dark/kraft sections. Each section already controls its
   internal padding (typically spacing-70), so this gap is redundant and
   visually distracting. Zero it out at the post-content level. */
.wp-block-post-content > * + * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Template-part wrappers (header, footer, page-banner) — flush against neighbors */
.wp-block-template-part {
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-template-part > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

main.wp-block-group {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

main.wp-block-group .wp-block-post-content {
	margin-top: 0;
	padding-top: 0;
}

main.wp-block-group .wp-block-post-content > *:first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* --------------------------------------------------------------------------
   Sticky header — utility bar + main nav stick together as one unit. Body
   gets `.is-scrolled` after a short scroll, which shrinks the logo + tightens
   header padding so the sticky bar stays compact on long pages.
   -------------------------------------------------------------------------- */
/* Sticky lives on the WP template-part wrapper (a real document-flow ancestor)
   rather than on .site-header-wrap, which would otherwise be the same height
   as its parent and have no scroll room to actually stick. !important guards
   against WP layout/wp-container generated styles that may override position. */
header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 100;
}

/* Kill the block-gap WP injects between siblings inside site-header-wrap so the
   utility bar and main nav sit flush with no white spacer between them. */
.site-header-wrap {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--wp--style--block-gap: 0;
}

.site-header-wrap > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.site-header {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
	margin-bottom: 0;
	transition: padding 0.25s ease;
}

body.is-scrolled .site-header {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.site-brand img {
	display: block;
	width: 150px;
	height: auto;
	transition: width 0.25s ease;
}

body.is-scrolled .site-brand img {
	width: 110px;
}

/* Disable shrink-on-scroll below the header breakpoint. iOS Safari aborts
   momentum scrolling whenever layout shifts mid-flick — without this, a hard
   swipe past the 80px threshold collapses the header and kills the easing
   animation. Desktop keeps the shrink behavior; mobile keeps native momentum.
   The header JS also bails early on mobile so the .is-scrolled class never
   toggles at all (avoiding even the style-recalc cost). */
@media (max-width: 1024px) {
	body.is-scrolled .site-header {
		padding-top: var(--wp--preset--spacing--20) !important;
		padding-bottom: var(--wp--preset--spacing--20) !important;
	}
	body.is-scrolled .site-brand img {
		width: 150px;
	}
	/* Kill the transitions on the sticky header chrome on mobile. They never
	   fire (the shrink is disabled) but their mere presence keeps the elements
	   on dedicated compositor layers that iOS has to update each scroll frame. */
	.site-header { transition: none; }
	.site-brand img { transition: none; }
}

/* --------------------------------------------------------------------------
   Top utility bar (white) — phone left, socials + Request a Quote right.
   Hides on small mobile to free up screen real estate.
   -------------------------------------------------------------------------- */
.site-utility-bar {
	background-color: var(--wp--preset--color--chalk-white);
	color: var(--wp--preset--color--asphalt-black);
	border-bottom: 1px solid #E5E2D8;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	line-height: 1;
}

.site-utility-bar .util-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
}

.site-utility-bar .util-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--asphalt-black);
	text-decoration: none !important;
	font-weight: 500;
	transition: color 0.18s ease;
	white-space: nowrap;
}

.site-utility-bar .util-phone:hover,
.site-utility-bar .util-phone:focus-visible {
	color: var(--wp--preset--color--cone-orange);
}

.site-utility-bar .util-icon {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--cone-orange);
	flex-shrink: 0;
}

.site-utility-bar .util-phone-label {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
}

.site-utility-bar .util-phone-num {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
}

.site-utility-bar .util-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.site-utility-bar .util-socials {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-utility-bar .util-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--asphalt-black);
	color: var(--wp--preset--color--chalk-white);
	transition: background-color 0.2s ease, transform 0.2s ease;
	text-decoration: none !important;
}

.site-utility-bar .util-social svg {
	width: 14px;
	height: 14px;
}

.site-utility-bar .util-social:hover,
.site-utility-bar .util-social:focus-visible {
	background-color: var(--wp--preset--color--cone-orange);
	transform: translateY(-1px);
}

.site-utility-bar .util-cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white) !important;
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 9px 16px;
	border-radius: 3px;
	transition: background-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.site-utility-bar .util-cta:hover,
.site-utility-bar .util-cta:focus-visible {
	background-color: #d8541a;
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	.site-utility-bar .util-phone-label {
		display: none;
	}
}

@media (max-width: 700px) {
	.site-utility-bar {
		display: none;
	}
}

.site-header .header-phone a {
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--chalk-white);
	transition: color 0.18s ease;
}

.site-header .header-phone a:hover,
.site-header .header-phone a:focus-visible {
	color: var(--wp--preset--color--cone-orange);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Custom primary nav (mega menu)
   Replaces wp:navigation block. Lives inside <nav class="primary-nav"> in header.html.
   -------------------------------------------------------------------------- */
.site-header .primary-nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.site-header .primary-nav .nav-link,
.site-header .primary-nav .nav-phone {
	color: var(--wp--preset--color--chalk-white);
	text-decoration: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 4px;
	transition: color 0.18s ease;
	white-space: nowrap;
}

.site-header .primary-nav .nav-link--static {
	cursor: default;
	user-select: none;
}

.site-header .primary-nav .nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--cone-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

.site-header .primary-nav .nav-link:hover,
.site-header .primary-nav .nav-link:focus-visible,
.site-header .primary-nav .nav-item:hover > .nav-link,
.site-header .primary-nav .nav-item:focus-within > .nav-link {
	color: var(--wp--preset--color--cone-orange);
}

.site-header .primary-nav .nav-link:hover::after,
.site-header .primary-nav .nav-link:focus-visible::after,
.site-header .primary-nav .nav-item:hover > .nav-link::after,
.site-header .primary-nav .nav-item:focus-within > .nav-link::after {
	transform: scaleX(1);
}

/* Phone link - Oswald larger, no underline animation */
.site-header .primary-nav .nav-phone {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	margin-left: 8px;
}

.site-header .primary-nav .nav-phone:hover,
.site-header .primary-nav .nav-phone:focus-visible {
	color: var(--wp--preset--color--cone-orange);
}

/* Caret arrow on dropdowns */
.site-header .primary-nav .caret {
	width: 10px;
	height: 10px;
	color: currentColor;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.site-header .primary-nav .nav-item:hover > .nav-link .caret,
.site-header .primary-nav .nav-item:focus-within > .nav-link .caret {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Mega menu panel (Our Services)
   Spans full viewport, opens on hover of .has-mega
   -------------------------------------------------------------------------- */
.site-header .has-mega {
	position: static;
}

/* Hover bridge: a transparent strip below the "Our Services" trigger that
   spans the dead zone between trigger bottom and mega panel top. Without it
   the cursor briefly leaves both elements while moving down, causing the
   panel to fade out and back in (a flicker). The bridge keeps .has-mega
   in :hover state continuously. Generous height covers header padding +
   any residual whitespace. */
.site-header .has-mega > .nav-link::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -20px;
	right: -20px;
	height: 64px;
	background: transparent;
}

.site-header .has-mega .mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--wp--preset--color--asphalt-black);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 40px rgba(17, 17, 17, 0.45);
	padding: 48px 40px;
	opacity: 0;
	visibility: hidden;
	/* No translateY offset — panel fades in place rather than sliding down,
	   so it doesn't move away from the cursor during the entrance animation. */
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
	z-index: 200;
}

.site-header .has-mega:hover .mega-panel,
.site-header .has-mega:focus-within .mega-panel {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease;
}

.site-header .mega-grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px;
}

.site-header .mega-grid .col h4 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--cone-orange);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(242, 103, 34, 0.4);
}

.site-header .mega-grid .item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 10px 8px;
	margin: 0 -8px 4px -8px;
	border-radius: 4px;
	text-decoration: none !important;
	color: var(--wp--preset--color--chalk-white);
	transition: background-color 0.15s ease;
}

.site-header .mega-grid .item::after {
	display: none;
}

.site-header .mega-grid .item:hover,
.site-header .mega-grid .item:focus-visible {
	background-color: rgba(242, 103, 34, 0.14);
}

.site-header .mega-grid .item .ico {
	color: var(--wp--preset--color--cone-orange);
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 1px;
}

.site-header .mega-grid .item span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.site-header .mega-grid .item strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wp--preset--color--chalk-white);
}

.site-header .mega-grid .item em {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	color: rgba(250, 250, 247, 0.7);
}

/* --------------------------------------------------------------------------
   About dropdown (simpler than mega — single column)
   -------------------------------------------------------------------------- */
.site-header .has-dropdown {
	position: relative;
}

/* Same hover-bridge as .has-mega — keeps :hover continuous across the gap
   between the About link and its dropdown. */
.site-header .has-dropdown > .nav-link::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -20px;
	right: -20px;
	height: 48px;
	background: transparent;
}

.site-header .has-dropdown .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--wp--preset--color--asphalt-black);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 40px rgba(17, 17, 17, 0.45);
	min-width: 320px;
	padding: 12px 0;
	opacity: 0;
	visibility: hidden;
	/* No translateY offset — dropdown fades in place rather than sliding,
	   so it doesn't move away from the cursor during the entrance. */
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
	z-index: 200;
}

.site-header .has-dropdown:hover .dropdown,
.site-header .has-dropdown:focus-within .dropdown {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease;
}

.site-header .has-dropdown .dropdown a {
	display: block;
	padding: 10px 20px;
	color: var(--wp--preset--color--chalk-white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header .has-dropdown .dropdown a:hover,
.site-header .has-dropdown .dropdown a:focus-visible {
	background-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
}

/* --------------------------------------------------------------------------
   Homepage "What we do" — service card grid
   -------------------------------------------------------------------------- */
.what-we-do-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.what-we-do-grid .service-card {
	position: relative;
	background: var(--wp--preset--color--asphalt-black);
	background-image: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 32px 24px;
	text-decoration: none !important;
	color: var(--wp--preset--color--chalk-white) !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.25s ease-in-out, border-color 0.22s ease, box-shadow 0.22s ease;
	min-height: 220px;
	overflow: hidden;
}

.what-we-do-grid .service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--cone-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease;
}

/* Dark gradient overlay layered ON TOP of the bg image — keeps text legible */
.what-we-do-grid .service-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(28, 28, 28, 0.78) 0%, rgba(8, 8, 8, 0.92) 100%);
	transition: background 0.28s ease;
	z-index: 1;
	pointer-events: none;
}

.what-we-do-grid .service-card:hover::after,
.what-we-do-grid .service-card:focus-visible::after {
	background: linear-gradient(160deg, rgba(28, 28, 28, 0.55) 0%, rgba(8, 8, 8, 0.78) 100%);
}

/* Make sure card content stays above the overlay */
.what-we-do-grid .service-card > * {
	position: relative;
	z-index: 2;
}

/* Top-bar accent stays above overlay */
.what-we-do-grid .service-card::before {
	z-index: 3;
}

.what-we-do-grid .service-card:hover,
.what-we-do-grid .service-card:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(242, 103, 34, 0.5);
	box-shadow: 0 14px 36px rgba(242, 103, 34, 0.28);
}

.what-we-do-grid .service-card:hover::before,
.what-we-do-grid .service-card:focus-visible::before {
	transform: scaleX(1);
}

/* Per-card background images. Layered as base under the dark overlay above. */
.what-we-do-grid .service-card {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.what-we-do-grid .card-paving           { background-image: url('/wp-content/uploads/2026/04/sealcoating-project-3.jpg'); }
.what-we-do-grid .card-asphalt-repair   { background-image: url('/wp-content/uploads/2026/04/crack-filling-project-2.jpg'); }
.what-we-do-grid .card-parking-lot      { background-image: url('/wp-content/uploads/2026/04/line-striping-project-1.png'); }
.what-we-do-grid .card-milling          { background-image: url('/wp-content/uploads/2026/04/excavation-project-1.jpg'); }
.what-we-do-grid .card-concrete         { background-image: url('/wp-content/uploads/2026/04/concrete-hero.jpg'); }
.what-we-do-grid .card-sealcoating      { background-image: url('/wp-content/uploads/2026/04/sealcoating-project-1.jpg'); }
.what-we-do-grid .card-crack-filling    { background-image: url('/wp-content/uploads/2026/04/crack-filling-jet-1.jpg'); }
.what-we-do-grid .card-line-striping    { background-image: url('/wp-content/uploads/2026/04/line-striping-worker.png'); }
.what-we-do-grid .card-tune-up          { background-image: url('/wp-content/uploads/2026/04/sealcoating-project-2.jpg'); }
.what-we-do-grid .card-snow             { background-image: url('/wp-content/uploads/2026/04/snow-plowing-project-1.jpg'); }
.what-we-do-grid .card-drain            { background-image: url('/wp-content/uploads/2026/04/storm-drain-repair-1.jpg'); }
.what-we-do-grid .card-excavation       { background-image: url('/wp-content/uploads/2026/04/excavation-project-2.jpg'); }
.what-we-do-grid .card-traffic-sign     { background-image: url('/wp-content/uploads/2026/04/traffic-sign-hero.jpg'); }

/* CTA card: bright orange override stays solid (no bg image) */
.what-we-do-grid .service-card.cta-card {
	background-image: linear-gradient(135deg, #F26722 0%, #C7501C 100%);
}
.what-we-do-grid .service-card.cta-card::after {
	display: none;
}

.what-we-do-grid .service-card .ico {
	color: var(--wp--preset--color--cone-orange);
	width: 40px;
	height: 40px;
	transition: transform 0.22s ease;
}

.what-we-do-grid .service-card:hover .ico {
	transform: scale(1.1) rotate(-2deg);
}

.what-we-do-grid .service-card h3 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--chalk-white);
	margin: 0;
	line-height: 1.15;
}

.what-we-do-grid .service-card p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(250, 250, 247, 0.72);
	margin: 0;
	flex-grow: 1;
}

.what-we-do-grid .service-card .learn-more {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--cone-orange);
	margin-top: auto;
}

.what-we-do-grid .service-card.cta-card {
	background: var(--wp--preset--color--cone-orange);
	background-image: linear-gradient(135deg, #F26722 0%, #C7501C 100%);
	text-align: center;
	align-items: center;
	justify-content: center;
}

.what-we-do-grid .service-card.cta-card h3,
.what-we-do-grid .service-card.cta-card .learn-more {
	color: var(--wp--preset--color--chalk-white);
}

.what-we-do-grid .service-card.cta-card:hover,
.what-we-do-grid .service-card.cta-card:focus-visible {
	border-color: var(--wp--preset--color--chalk-white);
	box-shadow: 0 14px 36px rgba(255, 255, 255, 0.18);
}

.what-we-do-grid .service-card.cta-card::before {
	background: var(--wp--preset--color--chalk-white);
}

@media (max-width: 1024px) {
	.what-we-do-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.what-we-do-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.what-we-do-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Google Review carousel (used on homepage + /reviews/)
   -------------------------------------------------------------------------- */
.review-carousel {
	background: var(--wp--preset--color--chalk-white);
	border: 1px solid #E8E0D2;
	border-radius: 8px;
	padding: 40px 48px;
	max-width: 880px;
	margin: 0 auto;
	position: relative;
	box-shadow: 0 4px 18px rgba(17, 17, 17, 0.06);
}

.rc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid #E8E0D2;
	padding-bottom: 22px;
}

.rc-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rc-title .g-logo {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.rc-title h3 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 20px;
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--asphalt-black);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rc-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	color: var(--wp--preset--color--graphite);
}

.rc-rating .stars {
	color: #FBBC04;
	font-size: 18px;
	letter-spacing: 1px;
	font-family: 'Arial', sans-serif;
}

.rc-viewport {
	position: relative;
	min-height: 240px;
}

.review-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.review-slide.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease;
}

.rs-stars {
	color: #FBBC04;
	font-size: 22px;
	letter-spacing: 2px;
	font-family: 'Arial', sans-serif;
	line-height: 1;
}

.rs-quote {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0;
}

.rs-attr {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
}

.rs-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
}

.rs-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rs-meta strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 16px;
	color: var(--wp--preset--color--asphalt-black);
	font-weight: 700;
}

.rs-meta span {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	color: var(--wp--preset--color--graphite);
}

.rc-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid #E8E0D2;
}

.rc-controls .rc-prev,
.rc-controls .rc-next {
	background: var(--wp--preset--color--asphalt-black);
	color: var(--wp--preset--color--chalk-white);
	border: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, transform 0.18s ease;
	font-family: 'Arial', sans-serif;
	line-height: 1;
}

.rc-controls .rc-prev:hover,
.rc-controls .rc-next:hover,
.rc-controls .rc-prev:focus-visible,
.rc-controls .rc-next:focus-visible {
	background: var(--wp--preset--color--cone-orange);
	transform: scale(1.06);
}

.dots {
	display: flex;
	gap: 8px;
}

.dots .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #E8E0D2;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.dots .dot.active {
	background: var(--wp--preset--color--cone-orange);
	transform: scale(1.25);
}

.dots .dot:hover {
	background: var(--wp--preset--color--graphite);
}

.review-carousel + .rc-cta {
	display: block;
	text-align: center;
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--cone-orange);
	text-decoration: underline;
}

@media (max-width: 700px) {
	.review-carousel { padding: 28px 22px; }
	.rc-header { flex-direction: column; align-items: flex-start; }
	.rc-viewport { min-height: 320px; }
	.rc-controls .rc-prev, .rc-controls .rc-next { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   FAQ accordion (wp:details) — bolder titles, animated underline on hover
   -------------------------------------------------------------------------- */
.wp-block-details {
	border-bottom: 1px solid #E8E0D2;
	padding: 4px 0;
	margin: 0;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--asphalt-black);
	cursor: pointer;
	position: relative;
	padding: 18px 0;
	list-style: none;
	transition: color 0.2s ease;
	display: inline-block;
}

.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker {
	display: none;
	content: '';
}

.wp-block-details summary::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 2px;
	background-color: var(--wp--preset--color--cone-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-details summary:hover,
.wp-block-details summary:focus-visible,
.wp-block-details[open] > summary {
	color: var(--wp--preset--color--cone-orange);
}

.wp-block-details summary:hover::after,
.wp-block-details summary:focus-visible::after,
.wp-block-details[open] > summary::after {
	transform: scaleX(1);
}

.wp-block-details > *:not(summary) {
	padding: 6px 0 18px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--graphite);
	font-family: var(--wp--preset--font-family--inter);
}

.wp-block-details > p:first-of-type {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Driveway Tune-Up — "What's included" card grid
   -------------------------------------------------------------------------- */
.numbered-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
}

.numbered-cards .nc-card {
	background: var(--wp--preset--color--chalk-white);
	border: 1px solid #E8E0D2;
	border-radius: 6px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.numbered-cards .nc-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--cone-orange);
	box-shadow: 0 12px 28px rgba(242, 103, 34, 0.14);
}

.numbered-cards .nc-card .nc-num {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 44px;
	font-weight: 700;
	color: var(--wp--preset--color--cone-orange);
	line-height: 1;
	margin: 0;
}

.numbered-cards .nc-card h4 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0;
	line-height: 1.2;
}

.numbered-cards .nc-card p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	margin: 0;
}

@media (max-width: 900px) {
	.numbered-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.numbered-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Icon cards (used on snow-plowing customer-types, etc.)
   Same skeleton as numbered-cards but icon at top instead of large number
   -------------------------------------------------------------------------- */
.icon-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.icon-cards .ic-card {
	background: var(--wp--preset--color--chalk-white);
	border: 1px solid #E8E0D2;
	border-radius: 6px;
	padding: 32px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.icon-cards .ic-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--cone-orange);
	box-shadow: 0 12px 28px rgba(242, 103, 34, 0.15);
}

.icon-cards .ic-card svg.ico {
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--cone-orange);
	transition: transform 0.22s ease;
}

.icon-cards .ic-card:hover svg.ico {
	transform: scale(1.1);
}

.icon-cards .ic-card h4 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0;
	line-height: 1.25;
}

@media (max-width: 1024px) {
	.icon-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.icon-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
	.icon-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Photo cards (background image + dark overlay + centered title)
   Used on snow-plowing customer types
   -------------------------------------------------------------------------- */
.photo-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
}

.photo-cards .pc-card {
	position: relative;
	background-color: var(--wp--preset--color--asphalt-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 6px;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	padding: 24px 18px;
}

.photo-cards .pc-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(28, 28, 28, 0.78) 0%, rgba(8, 8, 8, 0.92) 100%);
	transition: background 0.3s ease;
	z-index: 1;
}

.photo-cards .pc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(242, 103, 34, 0.28);
}

.photo-cards .pc-card:hover::before {
	background: linear-gradient(160deg, rgba(28, 28, 28, 0.45) 0%, rgba(8, 8, 8, 0.7) 100%);
}

.photo-cards .pc-card h4 {
	position: relative;
	z-index: 2;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--chalk-white);
	margin: 0;
	line-height: 1.25;
}

.photo-cards .pc-office     { background-image: url('/wp-content/uploads/2026/04/snow-customer-office.jpg'); }
.photo-cards .pc-retail     { background-image: url('/wp-content/uploads/2026/04/snow-customer-retail.jpg'); }
.photo-cards .pc-bank       { background-image: url('/wp-content/uploads/2026/04/snow-customer-bank.jpg'); }
.photo-cards .pc-restaurant { background-image: url('/wp-content/uploads/2026/04/snow-customer-restaurant.jpg'); }
.photo-cards .pc-fastfood   { background-image: url('/wp-content/uploads/2026/04/snow-customer-fastfood.jpg'); }

@media (max-width: 1024px) {
	.photo-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.photo-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
	.photo-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Repair-options grid (used on /services/patching-and-repair/)
   Larger cards than the homepage What we do grid — room for 3-line descriptions.
   -------------------------------------------------------------------------- */
.repair-options-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.repair-options-grid .ro-card {
	position: relative;
	background: var(--wp--preset--color--chalk-white);
	border: 1px solid #E8E0D2;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--wp--preset--color--asphalt-black) !important;
	display: flex;
	flex-direction: column;
	min-height: 0;
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.repair-options-grid .ro-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--wp--preset--color--cone-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 3;
}

.repair-options-grid .ro-card::after { display: none; }

.repair-options-grid .ro-card .ro-img {
	position: relative;
	width: 100%;
	height: 220px;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.repair-options-grid .ro-card .ro-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 100%);
	pointer-events: none;
	transition: background 0.4s ease;
}

.repair-options-grid .ro-card:hover,
.repair-options-grid .ro-card:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(242, 103, 34, 0.55);
	box-shadow: 0 18px 42px rgba(242, 103, 34, 0.18);
}

.repair-options-grid .ro-card:hover::before,
.repair-options-grid .ro-card:focus-visible::before {
	transform: scaleX(1);
}

.repair-options-grid .ro-card:hover .ro-img::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.repair-options-grid .ro-card .ro-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 26px;
	flex-grow: 1;
}

.repair-options-grid .ro-card h3 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0;
	line-height: 1.2;
}

.repair-options-grid .ro-card p {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--graphite);
	margin: 0;
	flex-grow: 1;
}

.repair-options-grid .ro-card .ro-link {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--cone-orange);
	margin-top: auto;
}

/* Optional brand chip overlay (e.g., manufacturer logo) */
.repair-options-grid .ro-brand-chip {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #ffffff;
	border-radius: 4px;
	padding: 6px 10px;
	z-index: 4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: transform 0.22s ease;
}
.repair-options-grid .ro-brand-chip img {
	display: block;
	height: 22px;
	width: auto;
}
.repair-options-grid .ro-card:hover .ro-brand-chip,
.repair-options-grid .ro-card:focus-visible .ro-brand-chip {
	transform: scale(1.05);
}

/* Per-card background images apply to the .ro-img child now (image visible above body) */
.repair-options-grid .ro-mastic .ro-img     { background-image: url('/wp-content/uploads/2026/04/crafco-mastic-one.jpg'); }
.repair-options-grid .ro-hot .ro-img        { background-image: url('/wp-content/uploads/2026/04/hot-asphalt-cut-patch.jpg'); }
.repair-options-grid .ro-synthetic .ro-img  { background-image: url('/wp-content/uploads/2026/04/synthetic-cold-asphalt.jpg'); }
.repair-options-grid .ro-infrared .ro-img   { background-image: url('/wp-content/uploads/2026/04/infrared-asphalt-repair.jpg'); }
.repair-options-grid .ro-rubberized .ro-img { background-image: url('/wp-content/uploads/2026/04/crack-filling-jet-1.jpg'); }

@media (max-width: 1024px) {
	.repair-options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.repair-options-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Quote form
   -------------------------------------------------------------------------- */
.quote-form {
	max-width: 720px;
	margin: 0 auto;
}

.quote-form .qf-row { margin-bottom: 22px; }

.quote-form .qf-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 22px;
}

.quote-form label {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--asphalt-black);
	margin-bottom: 8px;
}

.quote-form .required {
	color: var(--wp--preset--color--cone-orange);
}

.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form select,
.quote-form textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	border: 2px solid #D1C8B7;
	border-radius: 4px;
	background: var(--wp--preset--color--chalk-white);
	color: var(--wp--preset--color--asphalt-black);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--cone-orange);
	box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.18);
}

.quote-form select { cursor: pointer; }
.quote-form textarea { resize: vertical; min-height: 100px; }

.quote-form .qf-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
}

.quote-form .qf-checkbox label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

.quote-form .qf-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--wp--preset--color--cone-orange);
	cursor: pointer;
	flex-shrink: 0;
}

.quote-form .qf-submit {
	background: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
	border: none;
	padding: 18px 36px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	margin-top: 8px;
}

.quote-form .qf-submit:hover {
	background: #D9551A;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(242, 103, 34, 0.35);
}

.quote-form .qf-fineprint {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	color: var(--wp--preset--color--graphite);
	margin-top: 18px;
	font-style: italic;
	line-height: 1.6;
}

.quote-form .qf-error {
	background: #FFE8DD;
	border-left: 4px solid var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--asphalt-black);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 15px;
	border-radius: 0 4px 4px 0;
}

.quote-thanks {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 60px 20px;
}

.quote-thanks .qt-check {
	width: 72px;
	height: 72px;
	margin: 0 auto 24px;
	background: var(--wp--preset--color--cone-orange);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--chalk-white);
	font-size: 38px;
	font-weight: 700;
}

.quote-thanks h2 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(32px, 4vw, 44px);
	color: var(--wp--preset--color--asphalt-black);
	margin: 0 0 18px;
	line-height: 1.1;
}

.quote-thanks p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--graphite);
	margin: 0 0 14px;
}

.quote-thanks .qt-cta {
	margin-top: 28px;
}

@media (max-width: 600px) {
	.quote-form .qf-grid-2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   PDF preview with overlay button (e.g., Crafco Mastic One data sheet)
   Embedded PDF is blurred + non-interactive; orange CTA opens real PDF in new tab
   -------------------------------------------------------------------------- */
.pdf-preview-section {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.pdf-preview-section h3 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0 0 12px;
	line-height: 1.15;
}

.pdf-preview-section .pdf-intro {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	margin: 0 0 28px;
}

.pdf-preview {
	position: relative;
	height: 540px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(17, 17, 17, 0.18);
	background: #1c1c1c;
}

.pdf-preview-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: blur(4px);
	pointer-events: none;
	transform: scale(1.06);
	display: block;
}

.pdf-preview-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 28, 28, 0.25) 0%, rgba(28, 28, 28, 0.55) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdf-preview-btn {
	background: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white) !important;
	padding: 18px 36px;
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 4px;
	transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.pdf-preview-btn:hover,
.pdf-preview-btn:focus-visible {
	background: #D9551A;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(242, 103, 34, 0.45);
}

.pdf-preview-btn::after {
	content: '↗';
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 600px) {
	.pdf-preview { height: 380px; }
	.pdf-preview-section h3 { font-size: 22px; }
	.pdf-preview-btn { padding: 14px 28px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Blog: category chips, post grid cards, single-post layout
   -------------------------------------------------------------------------- */

/* Category chip strip across the top of /blog/ and category archives */
.blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1200px;
	margin: 0 auto var(--wp--preset--spacing--60);
	padding: 4px 0;
}

.blog-chips .chip {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--chalk-white);
	color: var(--wp--preset--color--asphalt-black);
	border: 1.5px solid #E8E0D2;
	padding: 9px 18px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.blog-chips .chip:hover,
.blog-chips .chip:focus-visible {
	border-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--cone-orange);
	transform: translateY(-1px);
}

.blog-chips .chip.is-active {
	background: var(--wp--preset--color--cone-orange);
	border-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
}

/* Blog grid cards */
.wp-block-query .blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.wp-block-query .blog-grid li {
	margin: 0;
}

.blog-card {
	overflow: hidden;
	transition: transform 0.4s ease-in-out, border-color 0.22s ease, box-shadow 0.4s ease-in-out;
	position: relative;
}

.blog-card:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 103, 34, 0.45) !important;
	box-shadow: 0 14px 32px rgba(17, 17, 17, 0.12);
}

.blog-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

.blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease-in-out;
}

.blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.blog-card .wp-block-post-featured-image a {
	display: block;
	line-height: 0;
}

/* Placeholder if no featured image set */
.blog-card .wp-block-post-featured-image:empty {
	background: #1c1c1c;
	min-height: 220px;
}

.blog-card-body {
	gap: 14px;
}

.blog-card .blog-card-term a {
	color: var(--wp--preset--color--cone-orange) !important;
	text-decoration: none;
	margin-right: 4px;
}

.blog-card .blog-card-term a:hover {
	text-decoration: underline;
}

.blog-card .wp-block-post-title a {
	color: var(--wp--preset--color--asphalt-black);
	text-decoration: none;
	transition: color 0.18s ease;
}

.blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--cone-orange);
}

.blog-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--cone-orange) !important;
	text-decoration: none !important;
}

/* Single post: post-content readability */
.single-post-content > * {
	max-width: 720px;
}

.single-post-content > .alignwide {
	max-width: 1000px;
}

.single-post-content > .alignfull {
	max-width: none;
}

.single-post-content p,
.single-post-content li {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--graphite);
}

.single-post-content h2 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--asphalt-black);
	margin-top: 56px;
	margin-bottom: 18px;
	line-height: 1.15;
}

.single-post-content h3 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--asphalt-black);
	margin-top: 40px;
	margin-bottom: 14px;
	line-height: 1.2;
}

.single-post-content blockquote {
	border-left: 4px solid var(--wp--preset--color--cone-orange);
	padding: 8px 0 8px 24px;
	margin: 32px 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 22px;
	line-height: 1.4;
	color: var(--wp--preset--color--asphalt-black);
}

.single-post-content img {
	border-radius: 6px;
	margin: 28px 0;
}

.single-post-content a {
	color: var(--wp--preset--color--cone-orange);
	text-decoration: underline;
}

.single-post-content a:hover {
	color: var(--wp--preset--color--asphalt-black);
}

/* Pagination */
.wp-block-query-pagination {
	gap: 12px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	border: 1.5px solid #E8E0D2;
	border-radius: 4px;
	color: var(--wp--preset--color--asphalt-black);
	text-decoration: none !important;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--cone-orange);
}

.wp-block-query-pagination .current,
.wp-block-query-pagination span.current {
	background: var(--wp--preset--color--cone-orange);
	border-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
}

@media (max-width: 1024px) {
	.wp-block-query .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wp-block-query .blog-grid { grid-template-columns: 1fr; }
	.blog-chips { gap: 8px; }
	.blog-chips .chip { padding: 7px 14px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Mobile - basic stack (full hamburger UI is a Phase 2 polish item)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.site-header .primary-nav { gap: 16px; font-size: 12px; }
	.site-header .primary-nav .nav-phone { font-size: 16px; }
	.site-header .mega-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* Note: the old `@media (max-width: 768px) { .primary-nav { display: none } }`
   "Phase 2" rule was removed once the mobile drawer landed. The hamburger
   button needs the .primary-nav container to stay visible at all widths. */

/* --------------------------------------------------------------------------
   Buttons - elevation + color shift on hover
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Primary (Cone Orange) - shift to deeper orange + lift */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #D9551A !important;
	color: var(--wp--preset--color--chalk-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(242, 103, 34, 0.35);
}

/* Outline (ghost on dark) - fill with chalk white, swap text to asphalt black */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--chalk-white) !important;
	color: var(--wp--preset--color--asphalt-black) !important;
	border-color: var(--wp--preset--color--chalk-white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(255, 255, 255, 0.18);
}

/* Active (mouse-down) state - press it back down */
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(17, 17, 17, 0.18);
}

/* Focus rings (accessibility) */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--cone-orange);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Body links - underline thickens on hover
   -------------------------------------------------------------------------- */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.service-card):not(.service-card-v2):not(.cat-chip):not(.ro-card):not(.ic-card):not(.pc-card):not(.nc-card):not(.review-slide):not(.rc-cta):not(.site-brand):not(.qf-submit) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.service-card):not(.service-card-v2):not(.cat-chip):not(.ro-card):not(.ic-card):not(.pc-card):not(.nc-card):not(.review-slide):not(.rc-cta):not(.site-brand):not(.qf-submit):hover {
	color: var(--wp--preset--color--asphalt-black);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Imagery defaults per brand guide
   -------------------------------------------------------------------------- */
.wp-block-image img,
.wp-block-cover img,
.wp-block-cover video {
	border-radius: 4px;
}

/* Card pattern (used in service grids etc.) */
.beckage-card {
	background: var(--wp--preset--color--chalk-white);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.beckage-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
}

/* --------------------------------------------------------------------------
   Cover block (homepage hero with video) - guarantee full-bleed
   -------------------------------------------------------------------------- */
.wp-block-cover.alignfull,
.wp-block-cover-image.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-block-cover.alignfull .wp-block-cover__video-background,
.wp-block-cover.alignfull .wp-block-cover__image-background {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Mobile: let the homepage hero auto-size (content-driven) so the form +
   headline both fit; the video gets cropped aggressively to keep the
   cinematic letterbox bars off-screen. Tighter horizontal padding gives the
   form card room to breathe on phones. */
@media (max-width: 781px) {
	.wp-block-cover.alignfull[style*="min-height:680px"] {
		min-height: 520px !important;
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* The hero video has a cinematic 2.35:1 letterbox baked into the source file
   (black bars top + bottom). object-fit:cover can't remove them — they're
   part of the video frame. We scale the video element above the cover so the
   bars push off-screen. 1.4x is enough on desktop/tablet; mobile needs ~1.7x
   because the hero is now content-tall (form stacked under headline). */
@media (max-width: 1504px) {
	.wp-block-cover.alignfull[style*="min-height:680px"] .wp-block-cover__video-background {
		transform: scale(1.4);
		transform-origin: center center;
	}
}
@media (max-width: 899px) {
	.wp-block-cover.alignfull[style*="min-height:680px"] .wp-block-cover__video-background {
		transform: scale(1.8);
	}
}

/* ==========================================================================
   Service area town list — vertical bulleted list with Cone Orange markers
   -------------------------------------------------------------------------- */
.service-area-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.service-area-list li {
	position: relative;
	padding-left: 22px;
	margin: 0;
}

.service-area-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--cone-orange);
	border-radius: 50%;
}

.service-area-list li a {
	color: #1B1B1B;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.service-area-list li a:hover,
.service-area-list li a:focus-visible {
	color: #F26722;
	border-bottom-color: #F26722;
	outline: none;
}

/* ==========================================================================
   Product/manufacturer logo lockup — uniform-height grayscale-on-rest logos
   that color-up on hover. Normalizes mismatched logo files (PNG/GIF/JPG of
   varying aspect ratios) by capping height and centering each within its cell.
   -------------------------------------------------------------------------- */
.product-lockup .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
}

.product-lockup-logo {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.product-lockup-logo img {
	max-height: 70px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	opacity: 1;
}

@media (max-width: 781px) {
	.product-lockup .wp-block-columns {
		gap: var(--wp--preset--spacing--40) !important;
	}
	.product-lockup-logo img {
		max-height: 56px;
	}
}

/* ==========================================================================
   Line-striping benefit cards — parking-stripe motif. Painted Cone Orange
   bar at the top of each card mimics a freshly painted parking line, with a
   row-designator number (01/02/03/04) reading like aisle markings.
   -------------------------------------------------------------------------- */
.ls-benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
}

.ls-benefits--five {
	grid-template-columns: repeat(5, 1fr);
}

.ls-benefit {
	position: relative;
	background-color: var(--wp--preset--color--chalk-white);
	border: 1px solid #E5E2D8;
	padding: 28px 22px 24px;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.ls-benefit::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background-color: var(--wp--preset--color--cone-orange);
}

.ls-benefit:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
	border-color: transparent;
}

.ls-benefit__num {
	display: block;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	color: var(--wp--preset--color--cone-orange);
	letter-spacing: 0.02em;
	margin-bottom: 14px;
}

.ls-benefit__title {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0 0 10px;
}

.ls-benefit__desc {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	margin: 0;
}

@media (max-width: 1100px) {
	.ls-benefits--five {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.ls-benefits {
		grid-template-columns: 1fr 1fr;
	}
	.ls-benefits--five {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 540px) {
	.ls-benefits,
	.ls-benefits--five {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Gallery hub cards — used on the Gallery landing, Residential hub, and
   Commercial hub pages. Image-on-top, title + meta below, lift on hover.
   Variant `--coming-soon` swaps the image for a dark placeholder so empty
   galleries still hold their place visually.
   -------------------------------------------------------------------------- */
.gallery-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin: 0;
}

.gallery-cards--three {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-cards--four {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-card {
	display: block;
	position: relative;
	background-color: var(--wp--preset--color--chalk-white);
	border: 1px solid #E5E2D8;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.gallery-card:hover,
.gallery-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(20, 20, 20, 0.12);
	border-color: transparent;
}

.gallery-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--wp--preset--color--asphalt-black);
}

.gallery-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.gallery-card:hover .gallery-card__media img {
	transform: scale(1.04);
}

.gallery-card__placeholder {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(242, 103, 34, 0.08) 0%, transparent 60%),
		linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-card__placeholder svg {
	width: 56px;
	height: 56px;
	color: rgba(242, 103, 34, 0.55);
}

.gallery-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 3px;
	z-index: 2;
}

.gallery-card__badge--soft {
	background-color: rgba(20, 20, 20, 0.7);
	color: var(--wp--preset--color--chalk-white);
}

.gallery-card__body {
	padding: 22px 22px 24px;
}

.gallery-card__count {
	display: block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cone-orange);
	margin-bottom: 8px;
}

.gallery-card__title {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--wp--preset--color--asphalt-black);
	margin: 0 0 12px;
}

.gallery-card__cta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--cone-orange);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gallery-card__cta::after {
	content: '\2192';
	transition: transform 0.22s ease;
}

.gallery-card:hover .gallery-card__cta::after {
	transform: translateX(4px);
}

@media (max-width: 1100px) {
	.gallery-cards--four {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.gallery-cards--three,
	.gallery-cards--four {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.gallery-cards,
	.gallery-cards--three,
	.gallery-cards--four {
		grid-template-columns: 1fr;
	}
}

/* WP gallery + lightbox tightening — ensure the gallery on a category page
   fills the layout and keeps a consistent grid look. */
.gallery-page-grid .wp-block-gallery .wp-block-image {
	border-radius: 4px;
	overflow: hidden;
}

.gallery-page-grid .wp-block-gallery .wp-block-image img {
	transition: transform 0.5s ease;
}

.gallery-page-grid .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.04);
}

/* ==========================================================================
   Gallery lightbox — fullscreen viewer with prev/next arrows + counter.
   Activated by /assets/js/gallery-lightbox.js on .gallery-page-grid pages.
   -------------------------------------------------------------------------- */
.glx-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(8, 8, 8, 0.94);
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 60px 20px 80px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.glx-overlay.is-open {
	display: flex;
	opacity: 1;
}

.glx-stage {
	max-width: 95vw;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.glx-img {
	max-width: 100%;
	max-height: 85vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.glx-btn {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #FAFAF7;
	cursor: pointer;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.glx-btn:hover,
.glx-btn:focus-visible {
	background-color: var(--wp--preset--color--cone-orange);
	border-color: var(--wp--preset--color--cone-orange);
	outline: none;
}

.glx-close { top: 20px; right: 20px; }
.glx-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.glx-next  { right: 20px; top: 50%; transform: translateY(-50%); }

.glx-prev:hover, .glx-prev:focus-visible { transform: translateY(-50%) scale(1.05); }
.glx-next:hover, .glx-next:focus-visible { transform: translateY(-50%) scale(1.05); }

.glx-counter {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(250, 250, 247, 0.7);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.glx-locked {
	overflow: hidden;
}

@media (max-width: 700px) {
	.glx-overlay { padding: 50px 8px 70px; }
	.glx-btn { width: 40px; height: 40px; }
	.glx-close { top: 10px; right: 10px; }
	.glx-prev  { left: 6px; }
	.glx-next  { right: 6px; }
}

/* ==========================================================================
   Homepage "Recent driveways and lots" cards — pulls real photos from the
   gallery folders. Each card links to the matching gallery category.
   -------------------------------------------------------------------------- */
.recent-projects {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 0;
}

.recent-card {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
	border-radius: 4px;
	transition: transform 0.25s ease;
}

.recent-card:hover,
.recent-card:focus-visible {
	transform: translateY(-4px);
}

.recent-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background-color: var(--wp--preset--color--asphalt-black);
	box-shadow: 0 8px 22px rgba(20, 20, 20, 0.12);
}

.recent-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.recent-card:hover .recent-card__media img,
.recent-card:focus-visible .recent-card__media img {
	transform: scale(1.05);
}

.recent-card__title {
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--wp--preset--color--asphalt-black);
	margin: 24px 0 8px;
	transition: color 0.2s ease;
}

.recent-card:hover .recent-card__title,
.recent-card:focus-visible .recent-card__title {
	color: var(--wp--preset--color--cone-orange);
}

.recent-card__meta {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--graphite);
	margin: 0;
}

@media (max-width: 900px) {
	.recent-projects { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.recent-projects { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile menu — hamburger toggle in primary nav + slide-in drawer.
   Desktop mega menu is hidden ≤1023px and replaced with the hamburger.
   Drawer + backdrop sit at fixed position above everything else.
   -------------------------------------------------------------------------- */

/* Hamburger toggle button — hidden on desktop, shown on mobile */
.nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-left: auto;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--wp--preset--color--chalk-white);
	border-radius: 2px;
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-toggle:hover span,
.nav-toggle:focus-visible span {
	background-color: var(--wp--preset--color--cone-orange);
}

/* Backdrop */
.mobile-drawer-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

body.menu-open .mobile-drawer-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

/* Drawer panel — uses 100dvh so iOS Safari's dynamic URL bar doesn't cover
   the bottom CTA. 100vh fallback for browsers without dvh support. The body
   underneath is position-fixed when the menu is open so the URL bar stays in
   its collapsed state — dvh is fine here (no resize during use). */
.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(85vw, 380px);
	height: 100vh;
	height: 100dvh;
	background-color: var(--wp--preset--color--asphalt-black);
	color: var(--wp--preset--color--chalk-white);
	z-index: 9999;
	transform: translateX(100%);
	transition: transform 0.32s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35);
	touch-action: pan-y;
	overscroll-behavior: contain;
}

body.menu-open .mobile-drawer {
	transform: translateX(0);
}

/* iOS body lock — overflow:hidden alone is not enough on iOS Safari, which
   still allows rubber-band horizontal/vertical drag on the body beneath fixed
   overlays. position:fixed locks the body completely; JS preserves and
   restores the scroll position on open/close. */
body.menu-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

.mobile-drawer-backdrop {
	touch-action: none;
}

.mobile-drawer__header {
	flex-shrink: 0;
	padding: 14px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-drawer__logo img {
	display: block;
	height: 40px;
	width: auto;
}

.mobile-drawer__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--chalk-white);
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 4px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--cone-orange);
	outline: none;
}

.mobile-drawer__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: 18px 0;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.mobile-drawer__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white) !important;
	padding: 14px 18px;
	margin: 0 18px 22px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.mobile-drawer__phone:hover,
.mobile-drawer__phone:focus-visible {
	background-color: #d8541a;
}

.mobile-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav > li {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav > li > a,
.mobile-nav__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	color: var(--wp--preset--color--chalk-white);
	background: transparent;
	border: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mobile-nav > li > a:hover,
.mobile-nav__toggle:hover,
.mobile-nav > li > a:focus-visible,
.mobile-nav__toggle:focus-visible {
	background-color: rgba(242, 103, 34, 0.14);
	color: var(--wp--preset--color--cone-orange);
	outline: none;
}

.mobile-nav__toggle .caret {
	color: var(--wp--preset--color--cone-orange);
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.mobile-nav__expand[data-open="true"] .mobile-nav__toggle .caret {
	transform: rotate(180deg);
}

.mobile-nav__sub {
	max-height: 0;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.3);
	transition: max-height 0.32s ease;
}

.mobile-nav__expand[data-open="true"] .mobile-nav__sub {
	max-height: 800px;
}

.mobile-nav__sub h4 {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--cone-orange);
	margin: 14px 20px 4px;
	padding: 0;
}

.mobile-nav__sub h4:first-child {
	margin-top: 8px;
}

.mobile-nav__sub a {
	display: block;
	padding: 10px 20px 10px 32px;
	color: var(--wp--preset--color--chalk-white);
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible {
	background-color: rgba(242, 103, 34, 0.14);
	color: var(--wp--preset--color--cone-orange);
	outline: none;
}

.mobile-drawer__footer {
	flex-shrink: 0;
	padding: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mobile-drawer__cta {
	display: block;
	background-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white) !important;
	text-align: center;
	padding: 14px 24px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.mobile-drawer__cta:hover,
.mobile-drawer__cta:focus-visible {
	background-color: #d8541a;
}

.mobile-drawer__socials {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.mobile-drawer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--chalk-white);
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-drawer__socials a svg { width: 16px; height: 16px; }

.mobile-drawer__socials a:hover,
.mobile-drawer__socials a:focus-visible {
	background-color: var(--wp--preset--color--cone-orange);
	transform: translateY(-1px);
}

/* Breakpoint: ≤1023px → hamburger appears, desktop nav links hide */
@media (max-width: 1023px) {
	.nav-toggle { display: flex; }

	.site-header .primary-nav > .nav-link,
	.site-header .primary-nav > .nav-item {
		display: none;
	}

	/* Tighten the header padding on mobile */
	.site-header {
		padding-left: 16px !important;
		padding-right: 12px !important;
	}
}

/* ==========================================================================
   Decorative bottom border on the sticky header — desktop only.
   Cone Orange line: solid on the left ~45%, then progressively breaks into
   shorter dashes with widening gaps moving right.
   ========================================================================== */

.site-header-wrap { position: relative; }

.site-header-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	pointer-events: none;
	background:
		/* Solid bar (covers the left 45% of width) */
		linear-gradient(to right, #F26722 0 100%) left bottom / 45% 100% no-repeat,
		/* Dashes — progressively shorter, gaps progressively wider — covers right 55% */
		linear-gradient(to right,
			#F26722 0 10%,
			transparent 10% 14%,
			#F26722 14% 22%,
			transparent 22% 30%,
			#F26722 30% 36%,
			transparent 36% 46%,
			#F26722 46% 50%,
			transparent 50% 62%,
			#F26722 62% 65%,
			transparent 65% 78%,
			#F26722 78% 80%,
			transparent 80% 100%
		) right bottom / 55% 100% no-repeat;
}

@media (max-width: 1023px) {
	.site-header-wrap::after { display: none; }
}

/* ==========================================================================
   Town service-area pages (/service-area/[town]-nj/)
   ========================================================================== */

.town-svc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 600px) {
	.town-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
	.town-svc-grid { grid-template-columns: repeat(4, 1fr); }
}

.town-svc-card {
	display: block;
	position: relative;
	background: #FAFAF7;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
	padding: 22px 22px 60px 22px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.town-svc-card:hover,
.town-svc-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0,0,0,0.08);
	border-color: #F26722;
	outline: none;
}
.town-svc-card h3 {
	font-family: "Oswald", sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #1B1B1B;
	margin: 0 0 8px 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
}
.town-svc-card p {
	font-size: 14px;
	color: #555;
	line-height: 1.5;
	margin: 0;
}
.town-svc-card__arrow {
	position: absolute;
	bottom: 18px;
	right: 22px;
	color: #F26722;
	font-size: 22px;
	font-weight: 700;
	transition: transform 0.2s ease;
}
.town-svc-card:hover .town-svc-card__arrow,
.town-svc-card:focus-visible .town-svc-card__arrow {
	transform: translateX(5px);
}

.town-nearby-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
}
.town-nearby-links a {
	display: inline-block;
	padding: 7px 14px;
	background: #FAFAF7;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 999px;
	color: #1B1B1B;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.town-nearby-links a:hover,
.town-nearby-links a:focus-visible {
	background: #F26722;
	color: #FAFAF7;
	border-color: #F26722;
	outline: none;
}

/* ==========================================================================
   Homepage hero — 2-column with quote form (desktop), stacks on mobile
   ========================================================================== */

.hero-2col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
@media (min-width: 900px) {
	.hero-2col {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 56px;
	}
}

/* Allow grid children to shrink below their intrinsic content size so the
   form card (which has long input labels) can't push the grid wider than
   the parent on phones. Without this, the form overflows to the right. */
.hero-2col > * { min-width: 0; }

.hero-left { color: #FAFAF7; min-width: 0; }
.hero-right { min-width: 0; width: 100%; }

.hero-h1 {
	font-family: "Oswald", sans-serif;
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #FAFAF7;
	margin: 0 0 18px 0;
}
.hero-sub {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	line-height: 1.3;
	color: #FAFAF7;
	margin: 0 0 14px 0;
}
.hero-trust {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #FAFAF7;
	opacity: 0.85;
	margin: 0 0 28px 0;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 4px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hero-btn--primary {
	background: #F26722;
	color: #FAFAF7;
}
.hero-btn--primary:hover,
.hero-btn--primary:focus-visible {
	background: #d8551b;
	color: #FAFAF7;
	transform: translateY(-1px);
	outline: none;
}
.hero-btn--outline {
	background: transparent;
	color: #FAFAF7;
	border-color: #FAFAF7;
}
.hero-btn--outline:hover,
.hero-btn--outline:focus-visible {
	background: #FAFAF7;
	color: #1B1B1B;
	outline: none;
}

/* The form card sitting over the hero video — semi-transparent + backdrop
   blur so the video reads through subtly while keeping the form readable. */
.hero-form-card {
	background: rgba(250, 250, 247, 0.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #1B1B1B;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	padding: 26px 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.hfc-title {
	font-family: "Oswald", sans-serif;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 6px 0;
	color: #1B1B1B;
}
.hfc-sub {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: #555;
	margin: 0 0 18px 0;
}

.hero-form .hf-row { margin-bottom: 12px; }
.hero-form .hf-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hero-form label {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1B1B1B;
	margin-bottom: 5px;
}
.hero-form input,
.hero-form select {
	width: 100%;
	padding: 10px 12px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #1B1B1B;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.hero-form input:focus,
.hero-form select:focus {
	outline: none;
	border-color: #F26722;
	box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.18);
}
.hero-form .hf-submit {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 14px 18px;
	background: #F26722;
	color: #FAFAF7;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hero-form .hf-submit:hover,
.hero-form .hf-submit:focus-visible {
	background: #d8551b;
	transform: translateY(-1px);
	outline: none;
}
.hero-form .hf-fine {
	font-family: "Inter", sans-serif;
	font-size: 12px;
	color: #777;
	text-align: center;
	margin: 10px 0 0 0;
	line-height: 1.4;
}

@media (max-width: 599px) {
	.hero-form-card { padding: 20px 16px; }
	.hero-form .hf-grid-2 { grid-template-columns: 1fr; gap: 0; }
	.hero-form .hf-grid-2 .hf-row { margin-bottom: 12px; }
}

/* Tighten hero text on small screens so the headline + buttons + form
   stack cleanly without the form being pushed below the fold or the
   headline overflowing. */
@media (max-width: 899px) {
	.hero-h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 12px; }
	.hero-sub { font-size: clamp(17px, 4.5vw, 20px); margin-bottom: 10px; }
	.hero-trust {
		font-size: 11px;
		letter-spacing: 0.06em;
		margin-bottom: 20px;
	}
	.hero-ctas { gap: 8px; }
	.hero-btn { padding: 12px 18px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
	.hero-form-card { max-width: 100%; }
}

/* ==========================================================================
   Sealer-section manufacturer lockup (Neyra + Crafco)
   ========================================================================== */

.sealer-mfrs {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 22px;
	flex-wrap: wrap;
	padding: 18px 0;
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.sealer-mfrs__label {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #555;
}
.sealer-mfrs__logos {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.sealer-mfrs__logos img {
	width: auto;
	display: block;
	max-height: 44px;
}

/* ==========================================================================
   Homepage "5 mistakes" blog CTA section
   ========================================================================== */

.blog-cta {
	display: flex;
	justify-content: center;
}
.blog-cta__inner {
	max-width: 760px;
	text-align: center;
}
.blog-cta__eyebrow {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #F26722;
	margin: 0 0 18px 0;
}
.blog-cta__title {
	font-family: "Oswald", sans-serif;
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	color: #FAFAF7;
	margin: 0 0 20px 0;
}
.blog-cta__body {
	font-family: "Inter", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #FAFAF7;
	opacity: 0.92;
	margin: 0 0 32px 0;
}
.blog-cta__btn {
	display: inline-block;
	background: #F26722;
	color: #FAFAF7;
	padding: 16px 32px;
	border-radius: 4px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.blog-cta__btn:hover,
.blog-cta__btn:focus-visible {
	background: #d8551b;
	transform: translateY(-1px);
	outline: none;
}

/* ==========================================================================
   Service-area maps — two-map (residential + commercial) side-by-side layout
   ========================================================================== */

.service-maps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 760px) {
	.service-maps { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.service-map-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.smc-label {
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #FAFAF7;
	background: #F26722;
	padding: 6px 14px;
	border-radius: 3px;
	margin: 0 0 18px 0;
	display: inline-block;
}

.service-map-card img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
	margin: 0 auto 18px auto;
	border-radius: 4px;
}

.smc-title {
	font-family: "Oswald", sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #1B1B1B;
	margin: 0 0 8px 0;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.smc-caption {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #555;
	margin: 0;
	max-width: 320px;
}

/* ==========================================================================
   Contractor checklist (3-column comparison table on the Choosing a Qualified
   Contractor page)
   ========================================================================== */

.contractor-checklist-wrap {
	max-width: 1100px;
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.contractor-checklist {
	width: 100%;
	border-collapse: collapse;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #1B1B1B;
	min-width: 540px;
}

.contractor-checklist thead th {
	text-align: left;
	padding: 16px 18px;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1B1B1B;
	border-bottom: 3px solid #1B1B1B;
	vertical-align: bottom;
}
.contractor-checklist thead .cc-h-beckage {
	text-align: center;
	color: #F26722;
	width: 200px;
}
.contractor-checklist thead .cc-h-beckage .cc-h-beckage-logo {
	display: block;
	height: 38px;
	width: auto;
	margin: 0 auto 10px auto;
}
.contractor-checklist thead .cc-h-beckage span {
	display: block;
}
@media (max-width: 680px) {
	.contractor-checklist thead .cc-h-beckage .cc-h-beckage-logo { height: 30px; margin-bottom: 6px; }
	.contractor-checklist thead .cc-h-beckage { width: 150px; }
}
.contractor-checklist thead .cc-h-other {
	text-align: center;
	color: #666;
	width: 110px;
}

.contractor-checklist tbody td {
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.5;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.contractor-checklist tbody tr:last-child td {
	border-bottom: none;
}
.contractor-checklist tbody tr:nth-child(odd) td {
	background: rgba(242, 103, 34, 0.03);
}
.contractor-checklist tbody td:first-child {
	color: #1B1B1B;
	font-weight: 400;
}

.contractor-checklist .cc-yes,
.contractor-checklist .cc-q {
	text-align: center;
	white-space: nowrap;
}
.contractor-checklist .cc-yes svg {
	display: inline-block;
	vertical-align: middle;
}
.contractor-checklist .cc-q {
	color: #C53030;
	font-family: "Oswald", sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

/* Subtle highlight on the Beckage column to make the "all yeses" pop */
.contractor-checklist tbody td.cc-yes,
.contractor-checklist thead th.cc-h-beckage {
	background: rgba(22, 163, 74, 0.05);
}
.contractor-checklist tbody tr:nth-child(odd) td.cc-yes {
	background: rgba(22, 163, 74, 0.09);
}

.contractor-checklist-footer {
	margin: 28px 0 0 0;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #1B1B1B;
	text-align: center;
	padding: 16px 20px;
	background: rgba(22, 163, 74, 0.08);
	border-left: 4px solid #16A34A;
	border-radius: 0 4px 4px 0;
}
.contractor-checklist-footer strong {
	color: #16A34A;
}

/* ==========================================================================
   Footer "family of companies" logo row (A. Patullo sister brands)
   ========================================================================== */

.footer-family {
	max-width: 900px;
	margin: 0 auto 28px auto;
	text-align: center;
}
.footer-family__label {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(250, 250, 247, 0.55);
	margin-bottom: 18px;
}
.footer-family__logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.ffc-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FAFAF7;
	border-radius: 4px;
	padding: 10px 16px;
	height: 56px;
	min-width: 120px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ffc-card:hover,
.ffc-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
	outline: none;
}
.ffc-card img {
	max-height: 40px;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}
/* The Home Solutions logo is white-on-transparent (designed for dark
   backgrounds). Invert it on the white card so it reads dark. */
.ffc-card--invert img { filter: invert(1); }

@media (max-width: 600px) {
	.footer-family__logos { gap: 10px; }
	.ffc-card { height: 50px; padding: 8px 12px; min-width: 100px; }
	.ffc-card img { max-height: 34px; }
}

/* ==========================================================================
   Footer social icon row
   ========================================================================== */

.footer-socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 0 auto var(--wp--preset--spacing--40, 30px) auto;
	max-width: 480px;
}
.footer-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #FAFAF7;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
	background: #F26722;
	color: #FAFAF7;
	transform: translateY(-2px);
	outline: none;
}
.footer-socials svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ==========================================================================
   Employment application form — file-input + textarea styling layered on
   the existing .quote-form base.
   ========================================================================== */

.application-form input[type="file"] {
	width: 100%;
	padding: 12px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	background: #ffffff;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
	color: #1B1B1B;
}
.application-form input[type="file"]:hover,
.application-form input[type="file"]:focus-visible {
	border-color: #F26722;
	outline: none;
}
.application-form textarea {
	width: 100%;
	padding: 10px 12px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: #1B1B1B;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
}
.application-form textarea:focus {
	outline: none;
	border-color: #F26722;
	box-shadow: 0 0 0 3px rgba(242, 103, 34, 0.18);
}

/* Mobile: tighten table-mode at 760-621px, then switch to stacked cards ≤620px */
@media (max-width: 760px) {
	.contractor-checklist thead th { padding: 12px 10px; font-size: 12px; }
	.contractor-checklist tbody td { padding: 12px 10px; font-size: 14px; }
	.contractor-checklist thead .cc-h-beckage { width: 130px; }
	.contractor-checklist thead .cc-h-other { width: 70px; }
	.contractor-checklist .cc-yes svg { width: 22px; height: 22px; }
	.contractor-checklist .cc-q { font-size: 22px; }
}

/* ≤620px: ditch the table layout. Each question becomes a card showing the
   question, then two inline badges ("Beckage ✓" + "Other ?") below it.
   Horizontal scroll on a comparison table is a UX trap — users miss the
   second column. Stacked cards fit every phone. */
@media (max-width: 620px) {
	.contractor-checklist-wrap { overflow-x: visible; }
	.contractor-checklist { min-width: 0; width: 100%; display: block; }
	.contractor-checklist thead { display: none; }
	.contractor-checklist tbody,
	.contractor-checklist tbody tr,
	.contractor-checklist tbody td { display: block; background: transparent !important; }

	.contractor-checklist tbody tr {
		margin-bottom: 12px;
		padding: 14px 16px;
		background: #FAFAF7 !important;
		border: 1px solid rgba(0,0,0,0.08);
		border-left: 4px solid #F26722;
		border-radius: 4px;
	}

	.contractor-checklist tbody td {
		padding: 0;
		border: none;
		font-size: 14px;
		line-height: 1.5;
	}
	.contractor-checklist tbody td:first-child {
		font-weight: 500;
		color: #1B1B1B;
		margin-bottom: 10px;
	}

	/* Both badges live on the same row (inline) under the question */
	.contractor-checklist tbody td.cc-yes,
	.contractor-checklist tbody td.cc-q {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-right: 20px;
		white-space: nowrap;
	}
	.contractor-checklist tbody td.cc-yes::before,
	.contractor-checklist tbody td.cc-q::before {
		font-family: "Inter", sans-serif;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: #1B1B1B;
	}
	.contractor-checklist tbody td.cc-yes::before { content: "Beckage:"; }
	.contractor-checklist tbody td.cc-q::before { content: "Other:"; }
	.contractor-checklist tbody td.cc-yes svg { width: 20px; height: 20px; }
	.contractor-checklist tbody td.cc-q {
		font-size: 18px;
		line-height: 1;
	}

	.contractor-checklist-footer {
		font-size: 14px;
		padding: 14px 16px;
	}
}

/* ==========================================================================
   Trust-strip marquee (patterns/trust-strip.php)
   Edge-faded, right-to-left, seamless loop. Pauses on hover/focus.
   ========================================================================== */
.beckage-marquee {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 80px,
		#000 calc(100% - 80px),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 80px,
		#000 calc(100% - 80px),
		transparent 100%
	);
}

.beckage-marquee__track {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	animation: beckage-marquee-scroll 40s linear infinite;
	will-change: transform;
}

.beckage-marquee__group {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.beckage-marquee__item,
.beckage-marquee__sep {
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
	color: inherit;
}

.beckage-marquee__item {
	padding: 0 1.25rem;
}

.beckage-marquee__sep {
	opacity: 0.5;
}

@keyframes beckage-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.beckage-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
		text-align: center;
	}
	.beckage-marquee__track {
		animation: none;
		transform: none;
		display: block;
		white-space: normal;
	}
	.beckage-marquee__group {
		display: inline;
		white-space: normal;
	}
	/* Hide the duplicate copy so reduced-motion users see content once */
	.beckage-marquee__group[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   By-category click chips (services hub /services/, "By category." section).
   Replaces the orange-text bulleted lists with rounded pill links that show
   the service's icon + label, with a hover state that flips to brand orange.
   ========================================================================== */
.cat-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.cat-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--wp--preset--color--chalk-white);
	border: 1px solid #E5E2D8;
	border-radius: 999px;
	color: var(--wp--preset--color--asphalt-black);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter), "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cat-chip .ico {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--cone-orange);
	flex-shrink: 0;
	transition: color 0.18s ease;
}

.cat-chip:hover,
.cat-chip:focus-visible {
	background: var(--wp--preset--color--cone-orange);
	border-color: var(--wp--preset--color--cone-orange);
	color: var(--wp--preset--color--chalk-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(242, 103, 34, 0.28);
	outline: none;
}

.cat-chip:hover .ico,
.cat-chip:focus-visible .ico {
	color: var(--wp--preset--color--chalk-white);
}

@media (prefers-reduced-motion: reduce) {
	.cat-chip { transition: none; }
	.cat-chip:hover,
	.cat-chip:focus-visible { transform: none; }
}

/* ==========================================================================
   Service grid v2 — preview / image-on-top layout
   Used by [beckage_service_grid layout="image-top"]. Card has the featured
   image at the top in a 16:10 frame, then a chalk-white body below with the
   orange icon, title, blurb, and "Learn more" CTA. If approved, this can
   replace the .what-we-do-grid overlay style across the site.
   ========================================================================== */
.service-grid-v2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.service-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.service-grid-v2 { grid-template-columns: 1fr; }
}

.service-card-v2 {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--asphalt-black);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--chalk-white);
	transition:
		transform 0.15s ease-out,
		box-shadow 0.15s ease-out,
		border-color 0.15s ease-out;
}

.service-card-v2__image {
	aspect-ratio: 16 / 10;
	background-color: #2A2A2A; /* fallback when page has no featured image */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.service-card-v2__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.service-card-v2__body .ico {
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--cone-orange);
	flex-shrink: 0;
}

.service-card-v2__body h3 {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--oswald), "Oswald", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--chalk-white);
	letter-spacing: 0.01em;
}

.service-card-v2__body p {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter), "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(250, 250, 247, 0.7);
	flex: 1;
}

.service-card-v2__body .learn-more {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--inter), "Inter", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cone-orange);
}

.service-card-v2:hover,
.service-card-v2:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	border-color: var(--wp--preset--color--cone-orange);
	outline: none;
}

.service-card-v2--cta {
	background: var(--wp--preset--color--asphalt-black);
	color: var(--wp--preset--color--chalk-white);
	border-color: var(--wp--preset--color--asphalt-black);
}

.service-card-v2--cta .service-card-v2__body--cta {
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 60px 24px;
	text-align: center;
}

.service-card-v2--cta .service-card-v2__body--cta h3 {
	color: var(--wp--preset--color--chalk-white);
}

@media (prefers-reduced-motion: reduce) {
	.service-card-v2 { transition: none; }
	.service-card-v2:hover,
	.service-card-v2:focus-visible { transform: none; }
}