/*
Theme Name:   Saturn Concrete Child
Theme URI:    https://saturnconcrete.com/
Description:  Block child theme of Twenty Twenty-Five for Saturn Concrete. Replaces the Elementor-based "Saturn Concrete" theme.
Author:       3oDesign
Author URI:   https://3odesign.com
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  saturn-concrete-child
*/

/* ---------- Focus rings: keyboard only ----------
   WordPress outlines anything with :focus, so a tap or click left a ring around links and around the menu's
   non-keyboard wrappers (submenu items and the panel have tabindex="-1"; iPhones drew a white box around them).
   Rings now show only for keyboard navigation (:focus-visible), which keeps them for accessibility. */
.wp-site-blocks :focus:not(:focus-visible),
.wp-site-blocks [tabindex="-1"]:focus { outline: none !important; }

/* ---------- Section stacking ---------- */
/* Header, main and footer touch; full-width sections inside content stack flush (no white strips). */
.wp-site-blocks > * + * { margin-block-start: 0; }
main > .wp-block-post-content > .alignfull,
main > .wp-block-post-content > .alignfull + *,
main > .wp-block-group > .alignfull,
main > .alignfull + .wp-block-post-content { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content > :first-child { margin-block-start: 0; }
/* Plain text pages (e.g. Privacy Policy): breathing room under the hero and above the footer. */
main > .wp-block-post-content > :first-child:not(.alignfull) { margin-block-start: var(--wp--preset--spacing--60); }
main > .wp-block-post-content > :last-child:not(.alignfull) { margin-block-end: var(--wp--preset--spacing--60); }

/* ---------- Header (fixed, sits over each page's hero) ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Top fade behind the header: starts at 78% black and runs 120px past the header's bottom edge. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(100% + 120px);
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 100%);
	transition: opacity 0.25s ease;
}
.site-header.is-scrolled::before { opacity: 0; }
/* Tablet and phone: the fade reaches further into the hero. */
@media (max-width: 1023px) {
	.site-header::before { height: calc(100% + 240px); }
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Scrolled: slim see-through "glass" bar, smaller logo, menu level with the logo. */
.site-header.is-scrolled {
	background: rgba(24, 24, 24, 0.6);
	-webkit-backdrop-filter: blur(10px) saturate(1.15);
	backdrop-filter: blur(10px) saturate(1.15);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	padding-bottom: 0 !important;
}
.site-header .wp-block-site-logo img { transition: width 0.25s ease; }
.site-header.is-scrolled .wp-block-site-logo img { width: 120px !important; height: auto; }
.site-header.is-scrolled .site-header__main { margin-block-start: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; }
@media (min-width: 1040px) {
	.site-header.is-scrolled .site-header__main.is-layout-flex { grid-template-columns: auto 1fr auto !important; grid-template-areas: "logo nav call" !important; row-gap: 0; align-items: center; column-gap: 1.75rem; }
	.site-header.is-scrolled .site-header__main nav.wp-block-navigation { align-self: center; padding: 0; border-top: 0; justify-self: end; }
}
@media (max-width: 1023px) {
	.site-header.is-scrolled .site-header__main.is-layout-flex { grid-template-areas: "logo call nav" !important; }
}
.site-header .site-header__topbar { border-bottom: 1px solid rgba(255, 222, 1, 0.35); }
.site-header.is-scrolled .site-header__topbar { display: none; }
/* Scrolled: smaller menu type, and the phone button shrinks to an icon at the end of the bar. */
.site-header.is-scrolled .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { font-size: 0.875rem; }
.site-header.is-scrolled .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { gap: 1.5rem; }
.site-header.is-scrolled .site-header__call { align-self: center; }
.site-header.is-scrolled .header-call-btn > .wp-block-button__link {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	font-size: 0; letter-spacing: 0;
}
.site-header.is-scrolled .header-call-btn > .wp-block-button__link::before { font-size: 20px; line-height: 1; }
.site-header a { text-decoration: none; }
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
/* Desktop dropdowns only (not inside the open mobile panel): a floating rounded card 24px below the menu,
   with soft shadow and rounded hover rows. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	margin-top: 24px;
	padding: 8px !important;
	min-width: 260px !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 16px;
	background: #fff !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
	gap: 2px !important;
}
/* Invisible bridge over the 24px gap so the menu doesn't close while the pointer moves down to it */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 26px;
}
/* Top-level dropdowns sit centered under their parent, with a small pointer up toward it */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	left: 50% !important;
	right: auto !important;
	transform: translateX(calc(-50% - 6px)); /* -6px: centre on the label, not label + chevron */
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	border-left: 1px solid rgba(0, 0, 0, 0.06);
	border-top-left-radius: 3px;
	transform: translateX(-50%) rotate(45deg);
	pointer-events: none;
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 16px !important;
	border-radius: 10px;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: #f2f2f2;
	color: var(--wp--preset--color--contrast);
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); }
/* Dropdown rows: an arrow appears on the right on hover and nudges right and back to invite the click.
   Desktop pointer only (dropdowns exist from 1024px; touch screens never see it). */
@keyframes sc-nudge {
	0%, 100% { transform: translate(0, -50%); }
	50% { transform: translate(5px, -50%); }
}
@media (hover: hover) and (min-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		position: relative;
		padding-right: 44px !important;
	}
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: "→";
		position: absolute;
		top: 50%;
		right: 16px;
		color: var(--wp--preset--color--secondary);
		font-size: 18px;
		line-height: 1;
		opacity: 0;
		transform: translate(-6px, -50%);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after {
		opacity: 1;
		transform: translate(0, -50%);
		animation: sc-nudge 1.1s ease-in-out 0.2s infinite;
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after { animation: none !important; }
}

/* Desktop menu underline: grows from the center on hover (0.3s, like viaonecre.com); full under the current page. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; }
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 10px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateX(-50%);
	transition: width 0.3s cubic-bezier(0.58, 0.3, 0.005, 1), opacity 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
	pointer-events: none;
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
	width: 100%;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation-item__content::after { transition: none !important; }
}

/* ---------- Mobile menu panel (hamburger, under 1024px) ---------- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100dvh;
	padding: 22px clamp(20px, 6vw, 48px) 32px !important;
	background: var(--wp--preset--color--contrast) !important;
	color: #fff !important;
	overflow-y: auto;
}
/* Logo at the top of the panel */
.site-header .is-menu-open .wp-block-navigation__responsive-close::before {
	content: "";
	display: block;
	width: 153px; /* same width as the header logo under 1024px, so it doesn't jump on open */
	aspect-ratio: 150 / 53;
	background: url(assets/images/logo-light.png) left center / contain no-repeat;
}
@media (max-width: 799px) {
	.site-header .is-menu-open .wp-block-navigation__responsive-close::before { width: 128px; }
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: -42px; /* level with the logo above the dialog */
	right: 0;
	color: #fff;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 28px !important;
	gap: 0 !important;
}
.site-header .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100%;
}
.site-header .is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 13px 0 !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: left;
}
.site-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary) !important; }
@media (hover: hover) {
	.site-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary) !important; }
}
/* Sub-items: indented, lighter, no boxes */
.site-header .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 0 0 10px 18px !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	gap: 0 !important;
}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; }
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0 !important;
	color: var(--wp--preset--color--silver) !important;
	font-size: 0.9375rem;
	font-weight: 400;
}
.site-header .is-menu-open .wp-block-navigation-submenu__toggle,
.site-header .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.site-header .is-menu-open :focus-visible { outline: 2px solid var(--wp--preset--color--primary) !important; outline-offset: 3px; }
/* Tap-to-call: only in the mobile panel, first item, set off from the menu by a divider */
.site-header .nav-call { display: none !important; }
.site-header .is-menu-open .nav-call {
	display: block !important;
	margin-bottom: 10px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.site-header .is-menu-open .nav-call > .wp-block-navigation-item__content {
	padding: 14px 20px !important;
	font-size: 1.0625rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast) !important;
	text-align: center;
	letter-spacing: 0.04em;
}
.site-header .is-menu-open .nav-call > .wp-block-navigation-item__content::before { content: "☎ "; }
/* Social icons: last item of the menu, shown only in the mobile panel. Below a divider, centered,
   yellow (as the desktop hover), white when pressed/hovered, 48px+ touch targets. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) li:has(> .nav-social) { display: none !important; }
/* The last menu row's bottom border is the divider above the icons */
.site-header .is-menu-open li.wp-block-navigation-item:has(> .nav-social) { padding-top: 20px; border: 0; }
.site-header .is-menu-open .nav-social { justify-content: center; gap: 4px !important; width: 100%; margin: 0; }
.site-header .is-menu-open .nav-social .wp-social-link { color: var(--wp--preset--color--primary) !important; background: none; transition: color 0.2s ease; }
.site-header .is-menu-open .nav-social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 11px;
	box-sizing: border-box;
	color: inherit !important;
}
.site-header .is-menu-open .nav-social .wp-social-link svg { width: 26px; height: 26px; fill: currentColor; }
.site-header .is-menu-open .nav-social .wp-social-link:hover,
.site-header .is-menu-open .nav-social .wp-social-link:active,
.site-header .is-menu-open .nav-social .wp-social-link:focus-within { color: #fff !important; }
/* Logged in: start the panel below the WordPress toolbar so the logo isn't hidden under it */
.admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 46px); height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px)); }
body:has(.site-header .is-menu-open) { overflow: hidden; }

/* Header layout: grid so the menu can move rows by width.
   1360px+: logo | menu | call on one line.  1024–1359px: logo | call, menu on its own row below.
   < 1024px: hamburger (overlay) menu. */
.site-header .site-header__main.is-layout-flex {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "logo call" "logo nav";
	align-items: center;
	column-gap: 2rem;
	row-gap: 0.6rem;
}
.site-header .site-header__right { display: contents; }
.site-header .site-header__main > .wp-block-site-logo { grid-area: logo; }
.site-header .site-header__call { grid-area: call; justify-self: end; }
/* Phone button: yellow, 3px corners, white on hover */
.site-header .header-call-btn > .wp-block-button__link {
	padding: 10px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header .header-call-btn > .wp-block-button__link::before { content: "☎ "; content: "☎ " / ""; }
.site-header .header-call-btn > .wp-block-button__link:hover,
.site-header .header-call-btn > .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}
.site-header .header-call-btn > .wp-block-button__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-header .site-header__main nav.wp-block-navigation { grid-area: nav; justify-self: end; }
/* 1360px+: logo, menu and call on one line (needs ~1327px). */
@media (min-width: 1360px) {
	.site-header .site-header__main.is-layout-flex {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "logo nav call";
		column-gap: 3rem;
	}
}
@media (min-width: 1024px) and (max-width: 1359px) {
	.site-header .site-header__main.is-layout-flex { grid-template-areas: "logo call" "nav nav"; row-gap: 20px; }
	/* Equal space above and below the logo row: 20px from the top-bar line, 20px to the menu line */
	.site-header:not(.is-scrolled) .site-header__main { margin-block-start: 0 !important; padding-top: 20px !important; }
	/* nav.: the inner <ul> also has .wp-block-navigation, which drew this line twice */
	.site-header .site-header__main nav.wp-block-navigation {
		justify-self: stretch;
		padding: 0.7rem 0 0.2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
	.site-header .site-header__main .wp-block-navigation .wp-block-navigation__container { justify-content: flex-start; }
}
@media (max-width: 1023px) {
	.site-header .site-header__main.is-layout-flex { grid-template-columns: auto 1fr auto; grid-template-areas: "logo call nav"; }
	/* Logo: 10% smaller on tablet (170 → 153px), 25% smaller under 800px (→ 128px, below). */
	.site-header .site-header__main .wp-block-site-logo img { width: 153px; height: auto; }
	/* Core switches to the hamburger at 600px; use it up to 1023px too. */
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.site-header .wp-block-navigation__responsive-container-open svg { width: 33px; height: 33px; }
	/* Hamburger: 1px box around the icon */
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		padding: 4px;
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 3px;
		transition: border-color 0.2s ease, color 0.2s ease;
	}
	.site-header .wp-block-navigation__responsive-container-open:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
}
@media (max-width: 799px) {
	.site-header .site-header__main .wp-block-site-logo img { width: 128px; }
}

/* Pages with no hero (templates add this class) still clear the fixed header. */
.has-header-offset { padding-top: 170px; }

/* Section titles ("Services We Provide", "Quality Construction"…) use the palette's Heading color (#121212).
   Wins over the yellow set on each block in the editor, so it's changed here in one place. */
.wp-block-heading.section-title { color: var(--wp--preset--color--heading) !important; }

/* ---------- Heroes ---------- */
.page-hero { min-height: 320px; }
.page-hero .wp-block-post-title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
/* Page-load reveal for hero titles (as formandfun.co/studio): the title slides up 100px from behind a mask
   (its container clips at the title's own box, so it appears to grow from its baseline) while fading in. */
.page-hero > .wp-block-cover__inner-container {
	overflow: hidden;
	/* room for descenders and the text shadow inside the mask, without moving the title */
	padding: 0.1em 0.3em 0.25em;
	margin: -0.1em -0.3em -0.25em;
}
@keyframes sc-title-rise {
	from { opacity: 0; transform: translate3d(0, 100px, 0); }
	to { opacity: 1; transform: none; }
}
.page-hero .wp-block-post-title { animation: sc-title-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
/* Home hero sequence, starting 1s after the page appears: "PLAN.", "BUILD." and "GROW." rise one by one (1s, 1.15s, 1.3s);
   the title rises at 1.3s with "GROW."; the paragraph rises at 1.55s with the Projects button; Estimate at 1.85s. The rise is the same masked reveal as the page titles, done
   with a clip-path that moves with the element (the hero holds several blocks, so its container can't be the mask). */
.home-hero .hero-word { display: inline-block; animation: sc-mask-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.home-hero .hero-word:nth-child(1) { animation-delay: 1s; }
.home-hero .hero-word:nth-child(2) { animation-delay: 1.15s; }
.home-hero .hero-word:nth-child(3) { animation-delay: 1.3s; }
.home-hero .home-hero__title + p { animation: sc-mask-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.55s backwards; }
/* Intro line and "PLAN. BUILD. GROW." eyebrow: 35% black panels sized to the text */
.home-hero .home-hero__title + p,
.home-hero .is-eyebrow {
	width: fit-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 6px;
	background: rgb(0 0 0 / 0.35);
}
.home-hero .home-hero__title + p { padding: 10px 20px; }
.home-hero .is-eyebrow { padding: 6px 14px; }
/* The eyebrow's panel fades in just before its words rise (its words start at 1s) */
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.home-hero .is-eyebrow { animation: sc-fade-in 0.4s ease-out 0.85s backwards; }
@keyframes sc-mask-rise {
	from { opacity: 0; transform: translate3d(0, 100%, 0); clip-path: inset(-15% -5% 100% -5%); }
	to { opacity: 1; transform: none; clip-path: inset(-15% -5% -15% -5%); }
}
.home-hero .home-hero__title { animation: sc-mask-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.3s backwards; }
.home-hero .wp-block-buttons > .wp-block-button { animation: sc-mask-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.home-hero .wp-block-buttons > .wp-block-button:nth-child(1) { animation-delay: 1.55s; }
.home-hero .wp-block-buttons > .wp-block-button:nth-child(2) { animation-delay: 1.85s; }
@media (prefers-reduced-motion: reduce) {
	.page-hero .wp-block-post-title,
	.home-hero .home-hero__title,
	.home-hero .hero-word,
	.home-hero .is-eyebrow,
	.home-hero .home-hero__title + p,
	.home-hero .wp-block-buttons > .wp-block-button { animation: none; }
}
/* The header is taller where the menu has its own row: give heroes more top room there.
   Pad the hero itself, never the post-content wrapper (that pushed the home page down 215px). */
@media (min-width: 1024px) and (max-width: 1359px) {
	main > .alignfull:first-child:not(.wp-block-post-content),
	main > .wp-block-post-content:first-child > .alignfull:first-child { padding-top: 215px !important; } /* home: hero inside the content */
}

/* "Screen door" mesh over the home video — CSS version of the old 2x2 PNG
   (one solid black pixel + one 10% black pixel per 2x2 tile). */
.has-mesh-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: conic-gradient(at 1px 1px, transparent 0 25%, rgb(0 0 0 / 0.1) 0 50%, transparent 0 75%, #000 0) 0 0 / 2px 2px;
}
/* Mesh sits over the video, content sits over the mesh. */
.has-mesh-overlay > .wp-block-cover__video-background { z-index: 0; }
.has-mesh-overlay > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* ---------- Buttons (hovers match production) ---------- */
.wp-block-button__link { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 1px; background: transparent; }
.wp-block-button.hover-light > .wp-block-button__link:hover,
.wp-block-button.hover-light > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-button.hover-dark > .wp-block-button__link:hover,
.wp-block-button.hover-dark > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}
.btn-hero > .wp-block-button__link { font-size: 1.125rem; padding: 20px 40px; border: 1px solid var(--wp--preset--color--primary); }
/* Home hero "Estimate": white with yellow text; colors reverse on hover (yellow with white text) */
.home-hero .wp-block-button.is-style-outline.btn-hero > .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.home-hero .wp-block-button.is-style-outline.btn-hero > .wp-block-button__link:hover,
.home-hero .wp-block-button.is-style-outline.btn-hero > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary) !important; /* beats .hover-light */
	color: #fff !important;
	border-color: var(--wp--preset--color--primary);
}
.btn-green > .wp-block-button__link { background: #61ce70; color: #fff; border: 0; border-radius: 8px; padding: 14px 100px; text-transform: none; letter-spacing: 0; }

/* ---------- Text helpers ---------- */
.is-eyebrow {
	margin-bottom: 0.25rem !important;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.is-eyebrow + .wp-block-heading { margin-top: 0.4rem; }
/* "OUR MISSION" with yellow corner brackets */
.is-bracketed {
	display: inline-block;
	width: fit-content;
	padding: 0.35em 0.8em;
	color: var(--wp--preset--color--primary);
	--c: var(--wp--preset--color--primary);
	background:
		linear-gradient(var(--c), var(--c)) top left / 10px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) top left / 2px 10px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 10px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) top right / 2px 10px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 10px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom left / 2px 10px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 10px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) bottom right / 2px 10px no-repeat;
}
.has-text-align-center.is-bracketed { display: table; margin-left: auto; margin-right: auto; }
.section-title { font-weight: 400 !important; }

/* Lists: "+" bullets and yellow dots, Title Case like production */
.is-style-plus, .is-style-dots, .is-style-checklist { list-style: none; padding-left: 0; text-transform: capitalize; }
.is-style-plus li, .is-style-dots li { position: relative; padding-left: 1.4em; line-height: 1.95; }
.is-style-plus li::before { content: "+"; position: absolute; left: 0.2em; color: var(--wp--preset--color--primary); font-weight: 700; }
.is-style-dots li { line-height: 2.5; }
.is-style-dots li::before { content: ""; position: absolute; left: 0.3em; top: 1.1em; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--primary); }
.is-style-checklist li { position: relative; padding-left: 1.6em; margin-bottom: 0.4em; }
.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.85em;
	height: 0.85em;
	background: var(--wp--preset--color--primary);
	clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 22%, 86% 8%, 39% 70%);
}

/* ---------- Parallax: covers with "Fixed background" (iOS falls back to normal scroll) ---------- */
@supports (-webkit-touch-callout: inherit) {
	.wp-block-cover.has-parallax .wp-block-cover__image-background { background-attachment: scroll; }
}

/* ---------- Home ---------- */
.home-hero__title {
	font-family: var(--wp--preset--font-family--oswald) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--display) !important;
	letter-spacing: -2px;
	line-height: 1.2 !important;
	margin-top: 44px !important;    /* space under "PLAN. BUILD. GROW." */
	margin-bottom: 10px !important; /* title and intro line sit together */
}
.home-hero .home-hero__title + p { margin-top: 0 !important; }
.home-hero .wp-block-buttons { margin-top: 48px !important; } /* buttons set apart, lower */
.home-hero { background: var(--wp--preset--color--contrast) url(assets/images/home-hero-mobile.jpg) center / cover no-repeat; }
.home-tiles { position: relative; z-index: 2; margin-top: -60px !important; }
/* The tiles reach 60px up into the hero: keep at least 60px + 40px of space under the hero content,
   so the buttons never sit under the tiles when the text runs taller (large text settings, zoom, narrow screens). */
.home-hero { padding-bottom: max(100px, var(--wp--preset--spacing--70, 0px)) !important; }
.home-tile { min-height: 170px !important; overflow: hidden; }
@media (max-width: 1023px) { .home-tile { min-height: 140px !important; } }
@media (max-width: 781px) {
	.home-tile { min-height: 110px !important; }
	.home-tile .wp-block-heading { font-size: 1.625rem !important; }
}
.home-tile .wp-block-heading { font-family: var(--wp--preset--font-family--oswald); font-weight: 500; font-size: 1.875rem !important; }
/* Linked tiles: the whole tile is the link, with a zoom + "→" cue on hover */
.home-tile.is-linked { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.home-tile.is-linked a { color: inherit; text-decoration: none; }
.home-tile.is-linked a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.home-tile.is-linked .wp-block-cover__image-background { transition: transform 0.5s ease; }
.home-tile.is-linked .wp-block-heading::after {
	content: "→";
	display: inline-block;
	margin-left: 0.4em;
	color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.home-tile.is-linked:hover, .home-tile.is-linked:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }
.home-tile.is-linked:hover .wp-block-cover__image-background,
.home-tile.is-linked:focus-within .wp-block-cover__image-background { transform: scale(1.08); }
.home-tile.is-linked:hover .wp-block-heading::after,
.home-tile.is-linked:focus-within .wp-block-heading::after { opacity: 1; transform: none; }
.home-tile.is-linked a:focus-visible { outline: none; }
.home-tile.is-linked:focus-within { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Our Projects links: title + yellow circle arrow at the right (hover: title yellow, circle white) */
.arrow-links { list-style: none; padding: 0; margin: 0; max-width: 380px; }
.arrow-links li { margin: 0 0 0.75rem; }
.arrow-links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s;
}
.arrow-links a::after {
	content: "→";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.8rem;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}
.arrow-links a:hover, .arrow-links a:focus-visible { color: var(--wp--preset--color--primary); }
.arrow-links a:hover::after, .arrow-links a:focus-visible::after { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary); }

/* Full-width photo strip under Our Projects */
.projects-strip.wp-block-gallery { padding: 0 18px; --wp--style--unstable-gallery-gap: 16px; gap: 16px; }
.projects-strip.wp-block-gallery figure.wp-block-image img { aspect-ratio: 7 / 10; }
.home-statement {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(1.4rem, 2.6vw, 2.3rem);
	line-height: 1.22;
	color: var(--wp--preset--color--contrast);
	text-align: right;
}
.home-subhead { font-family: var(--wp--preset--font-family--pt-sans) !important; font-weight: 400 !important; font-size: 1.9rem !important; }
.home-lead { font-family: var(--wp--preset--font-family--poppins); font-weight: 300; font-size: 1.375rem; line-height: 1.5; }
.estimate-band .wp-block-heading { letter-spacing: 0.9px; }
@media (max-width: 781px) {
	.home-hero video { display: none; }
	.home-statement { text-align: left; }
}

/* ---------- Video cover (click to play) — styles live in the Saturn Portfolio plugin ---------- */

/* ---------- Service pages ---------- */
.service-list { margin-top: var(--wp--preset--spacing--40); }
.service-list > summary {
	display: table;
	margin: 0 auto;
	cursor: pointer;
	list-style: none;
	padding: 14px 100px;
	border-radius: 8px;
	background: #61ce70;
	color: #fff;
	font-weight: 500;
	transition: background-color 0.3s;
}
.service-list > summary::-webkit-details-marker { display: none; }
.service-list > summary:hover, .service-list > summary:focus-visible, .service-list[open] > summary { background: var(--wp--preset--color--contrast); }
.service-list h4 { margin-top: 1.5em; }
.service-list ul:not(.is-style-checklist) { padding-left: 1.1em; font-size: var(--wp--preset--font-size--small); }

/* Service accordion (Commercial page): full-width rows under the video + intro columns. */
.service-accordion { margin-top: var(--wp--preset--spacing--60) !important; }
.service-accordion .accordion-heading {
	margin: 40px 0 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 26px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.service-accordion .accordion-heading:first-child { margin-top: 0; }
.service-accordion .accordion-item { margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.service-accordion .accordion-heading + .accordion-item { border-top: 1px solid var(--wp--preset--color--line); }
.service-accordion .accordion-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}
.service-accordion .accordion-item > summary::-webkit-details-marker { display: none; }
.service-accordion .accordion-item > summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.3s ease, background-color 0.2s ease;
}
.service-accordion .accordion-item[open] > summary::after { content: "−"; background: var(--wp--preset--color--contrast); }
.service-accordion .accordion-item > summary:hover,
.service-accordion .accordion-item[open] > summary { color: var(--wp--preset--color--primary); }
.service-accordion .accordion-item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.service-accordion .accordion-item > :not(summary) { margin-top: 0; }
.service-accordion .accordion-item > :last-child { padding-bottom: 24px; }
.service-accordion .accordion-item .wp-block-columns { margin-bottom: 0; }
.service-accordion > .wp-block-buttons { margin-top: 32px; }
/* Smooth open/close where supported (Chrome 131+); elsewhere it just opens. */
@supports selector(::details-content) {
	.service-accordion { interpolate-size: allow-keywords; }
	.service-accordion .accordion-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
	}
	.service-accordion .accordion-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.service-accordion .accordion-item::details-content { transition: none; }
}
@media (max-width: 781px) {
	.service-accordion .accordion-heading { font-size: 22px; }
	.service-accordion .accordion-item > summary { font-size: 15px; padding: 16px 2px; }
	.service-accordion .accordion-item .wp-block-columns { grid-template-columns: 1fr 1fr !important; }
}
/* Service checklist under 1024px: one flowing grid (3 columns on tablet, 2 on phones) instead of five squeezed columns */
@media (max-width: 1023px) {
	.service-accordion .accordion-item .wp-block-columns { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 16px !important; }
	.service-accordion .accordion-item .wp-block-column { display: contents; }
	.service-accordion .accordion-item .wp-block-column > ul { display: contents; }
}

/* "Starting a project…" split panel: photo left, charcoal panel right */
.split-cta { gap: 0 !important; margin: 0 5px !important; }
.split-cta > .wp-block-column { margin: 0 !important; }
.split-cta .wp-block-image, .split-cta .wp-block-image img { height: 100%; margin: 0; }
.split-cta .wp-block-image img { width: 100%; min-height: 327px; object-fit: cover; }
.split-cta__panel { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* Quality Construction: hard hat with the two badges layered on top */
.image-layers { position: relative; }
.image-layers > .wp-block-image { margin: 0; }
.image-layers > .image-layers__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.image-layers > .image-layers__overlay img { width: 100%; height: auto; }
.image-layers > .image-layers__base { padding: 10px; }

/* "Got an Incredible Project" yellow blueprint box, overlapping the section above */
.overlap-cta { position: relative; z-index: 3; margin-top: -97px !important; margin-bottom: -88px !important; }
.overlap-cta .wp-block-cover { min-height: 185px; }
.overlap-cta + * { padding-top: calc(88px + var(--wp--preset--spacing--60)) !important; }

/* What We Offer: flip cards (front: bordered box with icon; hover: photo slides in) */
.flip-cards { gap: 30px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .flip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .flip-cards { grid-template-columns: 1fr !important; } }
.flip-card {
	position: relative;
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 35px !important;
	border: 1px solid rgba(191, 191, 191, 0.47);
	text-align: center;
}
.flip-card::before {
	content: "";
	width: 50px;
	height: 42px;
	margin-bottom: 1.2rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='36' width='9' height='6'/%3E%3Crect x='10' y='36' width='9' height='6'/%3E%3Crect x='10' y='29' width='9' height='6'/%3E%3Crect x='10' y='22' width='9' height='6'/%3E%3Crect x='20' y='36' width='9' height='6'/%3E%3Crect x='20' y='29' width='9' height='6'/%3E%3Crect x='30' y='36' width='9' height='6'/%3E%3Crect x='30' y='29' width='9' height='6'/%3E%3Crect x='40' y='36' width='9' height='6'/%3E%3Crect x='40' y='29' width='9' height='6'/%3E%3Crect x='40' y='22' width='9' height='6'/%3E%3Crect x='40' y='15' width='9' height='6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='36' width='9' height='6'/%3E%3Crect x='10' y='36' width='9' height='6'/%3E%3Crect x='10' y='29' width='9' height='6'/%3E%3Crect x='10' y='22' width='9' height='6'/%3E%3Crect x='20' y='36' width='9' height='6'/%3E%3Crect x='20' y='29' width='9' height='6'/%3E%3Crect x='30' y='36' width='9' height='6'/%3E%3Crect x='30' y='29' width='9' height='6'/%3E%3Crect x='40' y='36' width='9' height='6'/%3E%3Crect x='40' y='29' width='9' height='6'/%3E%3Crect x='40' y='22' width='9' height='6'/%3E%3Crect x='40' y='15' width='9' height='6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.flip-card .wp-block-heading { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--oswald); font-size: 1.875rem; font-weight: 500; line-height: 1; color: #fff; }
.flip-card p { margin: 0; font-family: var(--wp--preset--font-family--poppins); color: var(--wp--preset--color--silver); }
.flip-card > .flip-card__back { position: absolute; inset: 0; z-index: 2; margin: 0; transform: translateX(-101%); transition: transform 0.6s ease-in-out; }
.flip-card > .flip-card__back img { width: 100%; height: 100%; object-fit: cover; }
.flip-card:hover > .flip-card__back { transform: translateX(0); }
@media (hover: none) { .flip-card > .flip-card__back { display: none; } }
@media (prefers-reduced-motion: reduce) { .flip-card > .flip-card__back { transition: none; } }

/* ---------- Boxed groups (form cards, intro boxes): inner side padding ---------- */
.wp-block-group.has-background:not(.alignfull):not(.alignwide):not(.site-header):not(.site-header__topbar):not(.flip-card) {
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	padding-right: clamp(1.25rem, 3vw, 2.5rem);
}
/* Contact / Jobs: gold texture form card + slate info boxes (as production) */
.form-card--gold { background: url(assets/images/details-bg.jpg) center / cover; padding: 24px !important; }
.form-card--gold .gform_wrapper.gravity-theme .gform_title { margin-top: 0; font-family: var(--wp--preset--font-family--roboto); font-size: 2rem; font-weight: 500; color: var(--wp--preset--color--body); }
.form-card--gold .gform_wrapper.gravity-theme .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-card--gold .gform_wrapper.gravity-theme .gfield select,
.form-card--gold .gform_wrapper.gravity-theme .gfield textarea { border: 0; border-radius: 3px; padding: 8px; font-size: 15px; }
/* On the gold card the submit is black with white text; colors swap on hover. */
.form-card--gold .gform_wrapper .gform_footer .gform_button,
.form-card--gold .gform_wrapper .gform_footer input[type="submit"] {
	background: var(--wp--preset--color--contrast);
	color: #fff;
	border: 1px solid var(--wp--preset--color--contrast);
}
.form-card--gold .gform_wrapper .gform_footer .gform_button:hover,
.form-card--gold .gform_wrapper .gform_footer .gform_button:focus-visible,
.form-card--gold .gform_wrapper .gform_footer input[type="submit"]:hover {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.form-card--gold .gform_wrapper .gform_footer .gform_button:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; }
.form-card--gold .gform_wrapper.gravity-theme .gfield_label { color: var(--wp--preset--color--body); font-weight: 700; }
.info-box { padding: 40px 20px 60px !important; }
.info-box .wp-block-heading { font-size: 1.1875rem !important; text-transform: uppercase; margin: 0 0 0.5rem; }
.info-box p { margin-top: 0; }
.info-box hr { border-color: rgba(255, 255, 255, 0.25); margin: 1.4rem 0; }

/* ---------- Portfolio grid (Query Loop with class "portfolio-grid") ---------- */
.portfolio-grid .wp-block-post { position: relative; overflow: hidden; }
.portfolio-grid .wp-block-post-featured-image { margin: 0; }
.portfolio-grid .wp-block-post-featured-image img { transition: transform 0.4s ease; }

/* The title link covers the whole tile, so each tile is one link named by its project title. */
.portfolio-grid .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.35; }
.portfolio-grid .wp-block-post-title a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.54);
	color: #fff;
	font-family: var(--wp--preset--font-family--pt-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	opacity: 0;
	transition: opacity 1s;
}
.portfolio-grid .wp-block-post:hover .wp-block-post-title a,
.portfolio-grid .wp-block-post-title a:focus-visible { opacity: 1; }
.portfolio-grid .wp-block-post-title a:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: -3px; }
@media (hover: none) { .portfolio-grid .wp-block-post-title a { opacity: 1; } }
.portfolio-grid .wp-block-post[hidden] { display: none; }
/* Projects with no featured image: a dark tile with the title shown, instead of an empty cell. */
.portfolio-grid .wp-block-post:not(:has(.wp-block-post-featured-image)) {
	aspect-ratio: 2 / 3;
	background: var(--wp--preset--color--contrast-2) conic-gradient(at 1px 1px, transparent 0 25%, rgb(0 0 0 / 0.1) 0 50%, transparent 0 75%, rgb(0 0 0 / 0.35) 0) 0 0 / 2px 2px;
}
.portfolio-grid .wp-block-post:not(:has(.wp-block-post-featured-image)) .wp-block-post-title a {
	opacity: 1;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: none;
	font-size: 1rem;
}
@media (max-width: 600px) {
	.portfolio-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.portfolio-grid .wp-block-post-title { font-size: 0.75rem; }
	.portfolio-grid .wp-block-post-title a { padding: 0.6rem; }
}
.portfolio-grid .wp-block-post-template { gap: 15px !important; }

/* ---------- Project details card (single post) ---------- */
.project-details-card { background-image: url(assets/images/details-bg.jpg); background-size: cover; }

/* ---------- Footer ---------- */
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--wp--preset--color--primary); }
.site-footer .footer-links { list-style: none; padding: 0; }
.site-footer .footer-links li { margin: 0 0 0.35em; }
/* Phones: footer type and social icons 15% larger. */
@media (max-width: 781px) {
	.site-footer .has-small-font-size,
	.site-footer .has-small-font-size a { font-size: 16px !important; }    /* 14px → 16px */
	.site-footer .wp-block-heading { font-size: 16px !important; }      /* 14px → 16px */
	/* copyright bar (a sibling of .site-footer in the footer part): 12px → 14px */
	footer.wp-block-template-part .has-contrast-3-background-color.has-x-small-font-size,
	footer.wp-block-template-part .has-contrast-3-background-color.has-x-small-font-size :is(p, a) { font-size: 14px !important; }
	.site-footer .wp-social-link svg { width: 18px; height: 18px; }     /* 16px → 18px */
}

/* ---------- Back to top ---------- */
.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Gravity Forms: match theme ---------- */
.gform_wrapper.gravity-theme .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.gform_wrapper.gravity-theme .gfield select,
.gform_wrapper.gravity-theme .gfield textarea {
	padding: 0.75em 0.9em;
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: 2px;
	font-family: inherit;
	font-size: 1rem;
}
/* Submit buttons: GF renders <input> or <button> depending on the form. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper .gform_page_footer button.gform_button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 3px;
	font-size: 1rem;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
	padding: 0.9em 2.4em;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer button.gform_button:hover,
.gform_wrapper .gform_footer .gform_button:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: #fff;
}
.gform_wrapper .gform_footer .gform_button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Project galleries: the lead photo (first image, tagged is-gallery-lead) spans the full row at its natural shape,
   so it reads as the big photo but opens the same lightbox and pages through the whole gallery. */
.wp-block-gallery.has-nested-images figure.wp-block-image.is-gallery-lead {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image.is-gallery-lead img { height: auto; object-fit: contain; }

/* Lightbox arrows (project galleries): bold dark circles, white arrow, yellow on hover.
   Under 960px they sit centered just below the photo (core puts them at the screen's bottom corners). */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast) !important;
	color: #fff;
	fill: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: background-color 0.2s ease, fill 0.2s ease;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next svg { width: 26px; height: 26px; fill: currentColor; }
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus-visible,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus-visible {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--contrast);
	fill: var(--wp--preset--color--contrast) !important;
}
@media (max-width: 959px) {
	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
	.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
		top: calc(50% + var(--wp--lightbox-container-height, 0px) / 2 + 16px);
		bottom: auto !important;
		transform: none !important;
	}
	.wp-lightbox-overlay .wp-lightbox-navigation-button-prev { left: calc(50% - 64px) !important; right: auto !important; }
	.wp-lightbox-overlay .wp-lightbox-navigation-button-next { right: calc(50% - 64px) !important; left: auto !important; }
}

/* ---------- Mobile ---------- */
/* Content buttons about 15% smaller under 800px, in whole pixels. Header buttons keep their own sizes.
   Desktop → phone: default 15/13×33 → 13/11×28 · btn-hero 18/20×40 → 15/17×34 · btn-box 15/20×40 → 13/17×34
   btn-start 20/25×50 → 17/21×42 · btn-band 19/15×30 → 16/13×26 · btn-outline-white 15/12×24 → 13/10×20
   Request Quote (page) 15/21×60 → 13/18×50 · Request Quote (project) 22/19×48 → 19/16×40 · forms 16/14×38 → 14/12×32 */
@media (max-width: 799px) {
	.wp-block-button:not(.header-call-btn) > .wp-block-button__link { font-size: 13px !important; padding: 11px 28px !important; }
	.wp-block-button.btn-hero > .wp-block-button__link { font-size: 15px !important; padding: 17px 34px !important; }
	.wp-block-button.btn-box > .wp-block-button__link { font-size: 13px !important; padding: 17px 34px !important; }
	.wp-block-button.btn-start > .wp-block-button__link { font-size: 17px !important; padding: 21px 42px !important; }
	.wp-block-button.btn-band > .wp-block-button__link { font-size: 16px !important; padding: 13px 26px !important; }
	.wp-block-button.btn-outline-white > .wp-block-button__link { font-size: 13px !important; padding: 10px 20px !important; }
	.wp-block-button > .wp-block-button__link[style*="padding-top:1.4em"] { font-size: 13px !important; padding: 18px 50px !important; }
	.wp-block-button > .wp-block-button__link[style*="font-size:clamp"] { font-size: 19px !important; padding: 16px 40px !important; }
	.gform_wrapper .gform_footer input[type="submit"],
	.gform_wrapper .gform_footer button.gform_button,
	.gform_wrapper .gform_page_footer input[type="submit"],
	.gform_wrapper .gform_page_footer button.gform_button { font-size: 14px !important; padding: 12px 32px !important; }
}
@media (max-width: 781px) {
	.has-header-offset { padding-top: 120px; }
	.site-header__call { display: none !important; }
}

/* ---------- Production button variants ---------- */
.btn-outline-white > .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 3px; padding: 12px 24px; font-size: 0.9375rem; text-transform: uppercase; }
.btn-box > .wp-block-button__link { border-color: #fff; padding: 20px 40px; font-size: 0.9375rem; text-transform: uppercase; }
.btn-start > .wp-block-button__link { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; padding: 25px 50px; font-size: 1.25rem; text-transform: uppercase; }
.btn-band > .wp-block-button__link { background: transparent !important; color: #fff !important; border: 3px solid #fff !important; border-radius: 3px; padding: 15px 30px; font-size: 1.1875rem; text-transform: uppercase; }

/* ---------- Section details ---------- */
.split-cta__panel { padding: 35px !important; }
.cta-sub { font-family: var(--wp--preset--font-family--pt-sans); font-size: 1.125rem; font-weight: 700; }
.build-lead { font-size: 1.1875rem; line-height: 1.5; }
.tight { letter-spacing: -2px; }
.info-stack { display: flex; flex-direction: column; gap: 20px; }
.estimate-band { min-height: 92px; }
.estimate-band .wp-block-heading { margin: 0; }

/* ---------- Project page ---------- */
.project-bar .wp-block-site-logo img { filter: none; }
.project-bar__label { font-family: var(--wp--preset--font-family--poppins); font-size: 1.1875rem; font-weight: 500; text-transform: uppercase; color: #fff; margin: 0; line-height: 1.1; }
.project-bar__value { font-family: var(--wp--preset--font-family--poppins); font-size: 0.875rem; font-weight: 500; text-transform: capitalize; color: var(--wp--preset--color--silver); margin: 0; }
.project-bar__value a { color: inherit; text-decoration: none; }
.project-top { align-items: stretch !important; }
.project-top > .wp-block-column { display: flex; flex-direction: column; }
.project-top .saturn-slider { flex: 1; min-height: 440px; }
.project-title { letter-spacing: -2px; }
.project-excerpt { font-weight: 500; }
.project-gallery .wp-block-gallery.has-nested-images { gap: 8px; --wp--style--unstable-gallery-gap: 8px; }
.project-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: calc(25% - 6px); flex-grow: 0; }
.project-gallery .wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.project-gallery p { display: none; }
.company-video { margin-top: 20px; }
/* Latest projects: 3 columns, title under the photo (as production) */
.latest-grid .wp-block-post-template { gap: 20px !important; }
.latest-grid .wp-block-post-featured-image img { aspect-ratio: 3 / 4; object-fit: cover; }
.latest-grid .wp-block-post-title { margin: 0.6rem 0 0; font-family: var(--wp--preset--font-family--pt-sans); font-size: 0.875rem; font-weight: 700; }
.latest-grid .wp-block-post-title a { color: var(--wp--preset--color--secondary); text-decoration: none; }
.latest-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.check-all { font-family: var(--wp--preset--font-family--poppins); font-size: 1.1875rem; font-weight: 500; }
.check-all a { color: var(--wp--preset--color--muted); text-decoration: none; text-transform: uppercase; }
.check-all a:hover { color: var(--wp--preset--color--primary); }

/* ---------- Scroll drift (home): set by header.js; off for reduced motion ---------- */
.drift-slow, .drift-mid, .drift-fast { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .drift-slow, .drift-mid, .drift-fast { transform: none !important; } }
.info-box a { color: #fff; text-decoration: none; }
.info-box a:hover { color: var(--wp--preset--color--primary); }

.site-header .is-menu-open .wp-block-navigation__responsive-dialog,
.site-header .is-menu-open .wp-block-navigation__responsive-container-content { box-sizing: border-box; width: 100%; max-width: 100%; }

/* ---------- Header social icons (top bar): plain white icons, yellow (as the phone button) on hover.
   Each link is a 48x48px touch target (26px icon + 11px padding); negative margins keep the top bar's height. ---------- */
.site-header .site-header__social { gap: 0 !important; margin: -9px 0 !important; }
.site-header .site-header__social .wp-social-link {
	background: none;
	border: 0;
	border-radius: 6px;
	color: #fff;
	transition: color 0.2s ease;
}
.site-header .site-header__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 11px;
	box-sizing: border-box;
	color: inherit !important;
}
.site-header .site-header__social .wp-social-link svg { width: 26px; height: 26px; fill: currentColor; }
.site-header .site-header__social .wp-social-link:hover,
.site-header .site-header__social .wp-social-link:focus-within { background: none; color: var(--wp--preset--color--primary) !important; /* phone-button yellow; beats the inline white */ }
.site-header .site-header__social .wp-social-link a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -4px; border-radius: 8px; }
/* "Job Opportunity »": same yellow on hover, and grows 10% (anchored at its right edge so it stays in the bar) */
.site-header .site-header__topbar a[href*="job-openings"] {
	display: inline-block;
	transform-origin: right center;
	transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.site-header .site-header__topbar a[href*="job-openings"]:hover,
.site-header .site-header__topbar a[href*="job-openings"]:focus-visible {
	color: var(--wp--preset--color--primary) !important;
	transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
	.site-header .site-header__topbar a[href*="job-openings"] { transition: color 0.25s ease-in-out; }
	.site-header .site-header__topbar a[href*="job-openings"]:hover { transform: none; }
}
@media (max-width: 600px) { .site-header .site-header__social { display: none !important; } }