/* Custom Styles */

/* ---------- Skip to Content (Accessibility) ---------- */
.skip-to-content {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 0.75em 1.5em;
	border-radius: 0 0 8px 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-to-content:focus {
	top: 0;
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Remove block-gap margins between top-level structural elements
   (header part, main, footer part) -the fixed header has zero height
   in flow, so the gap creates a white strip at the top of every page. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- Accessibility: Screen Reader / Skip Link ---------- */
/* ADA-compliant: visually hidden by default, revealed on keyboard focus.
   WordPress block themes inject a .skip-link.screen-reader-text element
   before the header; without these styles it renders as visible text and
   displaces the entire page layout. */
.screen-reader-text:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	width: auto !important;
	height: auto !important;
	padding: 0.75em 1.5em;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.9rem;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------- Site Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 1rem 2rem;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
	background-color: transparent;
	align-items: center;
}

.site-header .wp-block-site-logo {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.site-header .wp-block-site-logo img {
	display: block;
	max-width: 150px;
	margin-top: 0;
	margin-bottom: 0;
}

/* Footer logo */
footer .wp-block-site-logo {
}

footer .wp-block-site-logo img {
	margin-top: 0;
	margin-bottom: 0;
}

.site-header > * {
	margin-top: 0;
	margin-bottom: 0;
}

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header.is-scrolled {
	background-color: var(--wp--preset--color--primary);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--white) !important;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0.5em 0;
	margin: 0 0.8em;
	backdrop-filter: none;
	font-size: 0.85rem;
	position: relative;
	transition: color 0.25s ease;
}

.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: width 0.3s ease;
}

.site-header .wp-block-navigation a:hover::after {
	width: 100%;
}

/* Last nav item (Contact) as distinct CTA button */
.site-header .wp-block-navigation .wp-block-navigation-item:last-child a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary) !important;
	padding: 0.5em 1.4em;
	border-radius: 6px;
	font-weight: 700;
	margin-left: 0.5em;
}

.site-header .wp-block-navigation .wp-block-navigation-item:last-child a::after {
	display: none;
}

.site-header .wp-block-navigation .wp-block-navigation-item:last-child a:hover {
	background: var(--wp--preset--color--accent-light);
}

/* Body offset for fixed header */
body {
	padding-top: 0;
}

/* ---------- Hero Section ---------- */
.hero-section {
	position: relative;
	min-height: 100vh !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

/* WP cover block: inner container must stretch full-width so
   the constrained hero-content-card can center via auto margins. */
.hero-section.wp-block-cover {
	min-height: 100vh !important;
	align-items: stretch;
}

.hero-section:not(.wp-block-cover)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
	opacity: 0.92;
	z-index: 1;
}

.hero-section:not(.wp-block-cover) > * {
	position: relative;
	z-index: 2;
}

/* Cover block: rotate background image for about hero */
.hero-section--has-bg-img .wp-block-cover__image-background {
	transform: rotate(-90deg) scale(1.8);
	transform-origin: center center;
}

/* Utility: rotate image counter-clockwise (about section) */
.image-rotate-ccw img,
.image-rotate-ccw-img {
	transform: rotate(-90deg);
}

@media (max-width: 781px) {
	.image-rotate-ccw img,
	.image-rotate-ccw-img {
		transform: none;
	}

	/* Cap image height in stacked columns so text is visible */
	.wp-block-columns .wp-block-column .wp-block-image img {
		max-height: 45vh;
		width: 100%;
		object-fit: cover;
	}
}

/* Hero background image element (for rotation support) */
.hero-section__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-section__bg-img--rotate-left {
	transform: rotate(-90deg) scale(1.8);
	transform-origin: center center;
}

.hero-section__bg-img--rotate-right {
	transform: rotate(90deg) scale(1.8);
	transform-origin: center center;
}

/* Fix: WP global styles (from theme.json) load after custom.css and set
   button text color to "primary" by default, making white-on-dark buttons
   invisible.  High-specificity selectors + !important guarantee these
   utility overrides always win regardless of WP load order. */
.wp-block-button .wp-block-button__link.has-white-color,
.wp-block-button__link.has-white-color {
	color: #ffffff !important;
	visibility: visible !important;
	opacity: 1 !important;
	text-indent: 0 !important;
}

.wp-block-button .wp-block-button__link.has-primary-color,
.wp-block-button__link.has-primary-color {
	color: var(--wp--preset--color--primary) !important;
}

.wp-block-button .wp-block-button__link.has-accent-color,
.wp-block-button__link.has-accent-color {
	color: var(--wp--preset--color--accent) !important;
}

/* Ensure buttons with dark backgrounds always show visible text.
   Covers both the explicit has-white-color case and the case where
   the content HTML omits the text-color class entirely. */
.wp-block-button__link.has-primary-background-color.has-white-color,
.wp-block-button__link.has-secondary-background-color.has-white-color,
.wp-block-button__link.has-primary-background-color:not(.has-accent-color):not(.has-primary-color),
.wp-block-button__link.has-secondary-background-color:not(.has-accent-color):not(.has-primary-color) {
	color: #ffffff !important;
}

/* Keyboard focus outline for ADA compliance */
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.hero-section .wp-block-buttons .wp-block-button__link {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.hero-section .wp-block-buttons .wp-block-button__link:hover {
	box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
}

/* ---------- Hero Content Card (legacy) ---------- */
.hero-content-card {
	background: transparent;
	border: none;
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	width: min(860px, calc(100% - 4rem));
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.hero-content-card {
		width: calc(100% - 2rem);
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- Hero Editorial ---------- */
/* Full-height hero, content left-aligned and vertically centered.
   padding-top offsets for fixed header; padding-bottom balances the
   composition so the text sits just below true-center (golden section). */
.hero-section--editorial {
	min-height: 100vh !important;
	justify-content: center !important;
	padding-top: 6rem !important;
	padding-bottom: 2rem !important;
}

.hero-section--editorial.wp-block-cover {
	min-height: 100vh !important;
}

/* Remove bottom-anchor padding now that hero is centered */
.hero-editorial {
	padding-bottom: 0 !important;
}

/* Eyebrow: accent line + uppercase label */
.hero-editorial__eyebrow {
	align-items: center;
	gap: 0.75rem;
}

.hero-editorial__eyebrow .wp-block-separator {
	width: 3rem;
	min-width: 3rem;
	flex-shrink: 0;
}

.hero-editorial__eyebrow p {
	white-space: nowrap;
}

/* ---------- Section Spacing ---------- */
.section-padding {
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
}

.section-padding-sm {
	padding-top: clamp(2rem, 4vw, 4rem);
	padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* ---------- Portfolio Grid ---------- */
.portfolio-grid {
	display: grid;
	gap: 2rem;
}

.portfolio-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.portfolio-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
	.portfolio-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.portfolio-grid--cols-2,
	.portfolio-grid--cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Portfolio Card ---------- */
.portfolio-card {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-card.is-hidden {
	opacity: 0;
	transform: scale(0.95);
	position: absolute;
	pointer-events: none;
	visibility: hidden;
}

.portfolio-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.portfolio-card__image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--medium, 8px);
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--neutral-200);
}

.portfolio-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.portfolio-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--wp--preset--color--neutral-200) 0%, #d0d0d0 100%);
}

.portfolio-card__link:hover .portfolio-card__image {
	transform: scale(1.05);
}

.portfolio-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 46, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.portfolio-card__link:hover .portfolio-card__overlay {
	opacity: 1;
}

.portfolio-card__view {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.75em 1.5em;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 6px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.portfolio-card__link:hover .portfolio-card__view,
.portfolio-card__link:focus-visible .portfolio-card__view {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.portfolio-card__link:focus-visible .portfolio-card__overlay {
	opacity: 1;
}

.portfolio-card__content {
	padding: 1.25rem 0.25rem 0;
}

.portfolio-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--primary);
}

.portfolio-card__meta {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--neutral-600);
	margin: 0;
}

/* ---------- Portfolio Filter Tabs ---------- */
.portfolio-filter__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 3rem;
}

.portfolio-filter__tab {
	appearance: none;
	border: 2px solid var(--wp--preset--color--neutral-200);
	background: transparent;
	color: var(--wp--preset--color--neutral-600);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.6em 1.5em;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.25s ease;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.portfolio-filter__tab:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.portfolio-filter__tab.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* ---------- Work Gallery (Our Work page) ---------- */
.work-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1600px) {
	.work-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 500px) {
	.work-gallery {
		grid-template-columns: 1fr;
	}
}

.work-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--border-radius--medium, 8px);
	position: relative;
}

/* Transparent overlay to block right-click save on the image */
.work-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.work-gallery__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.work-gallery__item:hover .work-gallery__image {
	transform: scale(1.05);
}

/* ---------- Project Gallery ---------- */
.project-gallery {
	display: grid;
	gap: 1.5rem;
}

.project-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.project-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
	.project-gallery--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.project-gallery--cols-2,
	.project-gallery--cols-3 { grid-template-columns: 1fr; }
}

.project-gallery__item {
	margin: 0;
}

.project-gallery__image {
	width: 100%;
	border-radius: var(--wp--custom--border-radius--medium, 8px);
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-gallery__image:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
}

.lightbox-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
}

.lightbox-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 3rem;
	height: 3rem;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease;
}

.lightbox-close:hover {
	border-color: white;
}

/* ---------- Stats Counter ---------- */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}

.stats-grid .stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stats-grid .stat-item > * {
	margin-top: 0;
	margin-bottom: 0;
}

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

.stat-item__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large, 3rem);
	font-weight: 800;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	margin: 0 0 0.25rem;
}

.stat-item__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--neutral-600);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
}

/* ---------- Team Grid ---------- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

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

@media (max-width: 500px) {
	.team-grid {
		grid-template-columns: 1fr;
	}
}

.team-member {
	text-align: center;
}

.team-member__image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 1rem;
	transition: transform 0.3s ease;
}

.team-member:hover .team-member__image {
	transform: scale(1.05);
}

.team-member__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0 0 0.25rem;
}

.team-member__role {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	margin: 0;
}

/* ---------- CTA Banner ---------- */
.cta-banner {
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
	border-radius: 8px;
	text-align: center;
	padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem);
}

.cta-banner h2,
.cta-banner p {
	color: var(--wp--preset--color--white);
}

/* ---------- Testimonials ---------- */
.testimonial-card {
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 1.5rem;
}

.testimonial-card > * {
	margin-top: 0;
	margin-bottom: 0;
}

.testimonial-card > * + * {
	margin-top: 0.5rem;
}

.testimonial-card:hover {
	transform: none;
	box-shadow: none;
}

.testimonial-card__quote {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-600);
	margin: 0 0 0.75rem;
	padding: 0;
	border: none;
}

.testimonial-card__quote p {
	margin: 0;
}

.testimonial-card figcaption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.testimonial-card__author {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary);
}

.testimonial-card__role {
	font-size: 0.8rem;
	color: var(--wp--preset--color--neutral-600);
}

/* ---------- Contact Info ---------- */
.contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-info-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
	display: flex;
	gap: 1rem;
	align-items: center;
}

.contact-info-list li:last-child {
	border-bottom: none;
}

/* ---------- Contact Form 7 Overrides ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.9rem 1.25rem;
	border: 2px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	transition: border-color 0.25s ease;
	background: var(--wp--preset--color--white);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	border: none;
	padding: 0.9rem 2.5rem;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-light);
}

/* ---------- Scroll Sentinel ---------- */
.scroll-sentinel {
	position: absolute;
	top: 100px;
	height: 1px;
	width: 1px;
	pointer-events: none;
}

/* ---------- Utility Classes ---------- */
.text-center { text-align: center; }
.text-white { color: var(--wp--preset--color--white); }
.text-accent { color: var(--wp--preset--color--accent); }

.bg-light {
	background-color: #f7f5f2;
}

.bg-dark {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* ---------- Legal Page Content ---------- */
.legal-content h2 {
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	margin-top: clamp(2.5rem, 4vw, 3.5rem) !important;
	margin-bottom: 1rem !important;
}

.legal-content h3 {
	color: var(--wp--preset--color--secondary);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 2rem !important;
	margin-bottom: 0.5rem !important;
}

.legal-content ul {
	padding-left: 1.25rem;
}

.legal-content ul li {
	padding-left: 0.5rem;
	margin-bottom: 0.5rem;
}

.legal-content ul li::marker {
	color: var(--wp--preset--color--accent);
}

.overflow-hidden {
	overflow: hidden;
}

/* ---------- Project Detail Meta ---------- */
.project-meta-sidebar {
	display: grid;
	gap: 1.5rem;
}

.project-meta-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.project-meta-item:last-child {
	border-bottom: none;
}

.project-meta-label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--neutral-600);
	margin-bottom: 0.25rem;
}

.project-meta-value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Project detail: stack content + sidebar on tablet */
@media (max-width: 782px) {
	.project-meta-sidebar {
		margin-top: 2rem;
	}
}

/* ---------- Trust Bar ---------- */
.trust-bar {
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.trust-bar .wp-block-heading {
	color: var(--wp--preset--color--neutral-600) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.2em !important;
}

.trust-bar__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 2rem;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}

.trust-bar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 120px;
	opacity: 0.85;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.trust-bar__logo:hover {
	opacity: 1;
	transform: scale(1.12);
}

.trust-bar__logo-img {
	max-height: 120px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
}

.trust-bar__logo[title="A Golden State"] .trust-bar__logo-img {
	max-height: 120px;
	max-width: 140px;
	transform: scale(1.05);
}

@media (max-width: 600px) {
	.trust-bar__logos {
		gap: 1.5rem;
	}

	.trust-bar__logo {
		flex: 0 1 90px;
	}

	.trust-bar__logo-img {
		max-height: 80px;
		max-width: 110px;
	}
}

/* ---------- Services Grid ---------- */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.services-grid.services-grid--2col {
	grid-template-columns: repeat(2, 1fr);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* On large screens, How It Works 2col stays 2x2 but gets wider */
@media (min-width: 1400px) {
	.services-grid.services-grid--2col {
		max-width: 1100px;
		gap: 2.5rem;
	}
}

.services-grid--3col {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.services-grid,
	.services-grid.services-grid--2col,
	.services-grid--2col,
	.services-grid--3col {
		grid-template-columns: 1fr;
	}
}


@media (max-width: 600px) {
	.services-grid,
	.services-grid--2col,
	.services-grid--3col {
		grid-template-columns: 1fr;
	}
}

.service-card {
	background: var(--wp--preset--color--white);
	border-radius: 8px;
	padding: 2.25rem 2rem 2rem;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-top: 3px solid var(--wp--preset--color--accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Override WP is-layout-flow margins inside service cards */
.service-card.is-layout-flow > * {
	margin-block-start: 0 !important;
	margin-top: 0;
	margin-bottom: 0;
}

.service-card.is-layout-flow > * + * {
	margin-block-start: 0.75rem !important;
	margin-top: 0.75rem;
}

.service-card > * {
	margin-top: 0;
	margin-bottom: 0;
}

.service-card > * + * {
	margin-top: 0.75rem;
}

.service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--wp--preset--color--accent);
}

/* Step number circles in How It Works cards */
.service-card > p.has-accent-color:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white) !important;
	font-size: 1.25rem !important;
	line-height: 1 !important;
	margin: 0 auto 0.5rem;
}

a.service-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

/* Fix: WordPress is-layout-flow injects margin-block-start on non-first
   children, which misaligns items in CSS Grid layouts. */
.services-grid.is-layout-flow > *,
.stats-grid.is-layout-flow > * {
	margin-block-start: 0;
}

/* ---------- Questionnaire Form ---------- */
.questionnaire-form {
	background: var(--wp--preset--color--white);
	border-radius: 8px;
	padding: 2.5rem 3rem;
	border: 1px solid var(--wp--preset--color--neutral-200);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* On wider screens, add breathing room inside the form card */
@media (min-width: 1200px) {
	.questionnaire-form {
		padding: 3rem 3.5rem;
	}
}

.questionnaire-form .wpcf7-form h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 2rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.questionnaire-form .wpcf7-form h3:first-child {
	margin-top: 0;
}

.questionnaire-form .wpcf7-form p {
	margin-bottom: 1rem;
}

.questionnaire-form .wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--primary);
}

/* Make CF7 control wrappers stretch so inputs fill their container */
.questionnaire-form .wpcf7-form-control-wrap {
	display: block;
}

/* Grid overflow items (e.g. 4th field in 3-col grid) - span wider */
@media (min-width: 768px) {
	.questionnaire-form .form-grid > p:last-child:nth-child(3n + 1) {
		grid-column: 1 / span 2;
	}
	.questionnaire-form .form-grid > p:only-child {
		grid-column: 1 / span 2;
	}
}

/* Grid for grouped fields */
.questionnaire-form .form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem 1.25rem;
}

@media (max-width: 768px) {
	.questionnaire-form .form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
	.questionnaire-form .form-grid {
		grid-template-columns: 1fr;
	}
}

.questionnaire-form .form-grid p {
	margin-bottom: 0;
}

.questionnaire-form .wpcf7 select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium, 8px);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	transition: border-color 0.25s ease;
	background: var(--wp--preset--color--white);
}

.questionnaire-form .wpcf7 select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.questionnaire-form .wpcf7-radio,
.questionnaire-form .wpcf7-checkbox {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 0.4rem 0;
}

.questionnaire-form .wpcf7-radio label,
.questionnaire-form .wpcf7-checkbox label {
	font-weight: 400;
	font-family: var(--wp--preset--font-family--body);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
}

.questionnaire-form .wpcf7 input[type="submit"] {
	margin-top: 1.5rem;
	width: 100%;
	padding: 1rem;
	font-size: 1rem;
}

/* ---------- Footer Responsive ---------- */
@media (max-width: 782px) {
	footer .wp-block-columns {
		flex-direction: column !important;
		gap: 2rem !important;
	}

	footer .wp-block-column {
		flex-basis: 100% !important;
	}

	footer .wp-block-column:first-child {
		text-align: center;
	}

	footer .wp-block-column:first-child .wp-block-site-logo {
		margin-left: auto;
		margin-right: auto;
	}

	footer .wp-block-column ul {
		padding-left: 0;
	}
}

/* ---------- Responsive Navigation ---------- */
@media (max-width: 768px) {
	.site-header {
		padding: 1rem;
	}

	.site-header.is-scrolled {
		padding: 0.5rem 1rem;
	}
}

/* ---------- Mobile Navigation Hamburger ---------- */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container-open svg {
	width: 32px;
	height: 32px;
}

/* Full-screen overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	max-width: 320px;
	margin: 0 auto;
	width: 100%;
}

/* Override desktop pill styles inside overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.1em 0.25em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white) !important;
	background: transparent;
	border: none;
	border-radius: 0;
	text-decoration: none;
	backdrop-filter: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent) !important;
	background: transparent;
	border: none;
	padding-left: 0.5em;
}

/* Close button styling */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

/* ==========================================================================
   14" Laptop (≤ 1400px wide or ≤ 800px tall)
   Scales down header logo + nav, trims hero height on short screens.
   ========================================================================== */

/* Width-based: tighter header + hero at laptop widths */
@media (max-width: 1400px) {
	.site-header .wp-block-navigation a {
		margin: 0 0.5em;
		font-size: 0.78rem;
	}

	.site-header .wp-block-navigation .wp-block-navigation-item:last-child a {
		padding: 0.4em 1em;
	}

	.hero-content-card {
		margin-left: 5vw;
		width: min(720px, calc(100% - 4rem));
	}

	/* Give hero breathing room below the fixed header */
	.hero-section,
	.hero-section.wp-block-cover {
		padding-top: 5rem !important;
	}

	/* Editorial heroes stay full-height at laptop widths */
	.hero-section--editorial,
	.hero-section--editorial.wp-block-cover {
		padding-top: 5rem !important;
	}
}

/* Tablet: center hero card instead of left-aligned */
@media (max-width: 1024px) {
	.hero-section {
		align-items: center;
	}

	.hero-content-card {
		margin-left: auto;
		margin-right: auto;
	}

	/* Editorial heroes stay left-aligned, vertically centered on tablet */
	.hero-section--editorial {
		align-items: stretch;
		justify-content: center !important;
	}
}

/* Height-based: scale hero on short laptop screens (768px panels).
   min-width: 783px prevents these from firing on mobile in landscape. */
@media (max-height: 800px) and (min-width: 783px) {
	.hero-section {
		min-height: 100vh;
	}

	/* Tighter hero card padding so heading + text + buttons fit */
	.hero-content-card {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.hero-content-card .wp-block-heading {
		font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
		line-height: 1.15;
	}

	.hero-content-card .has-large-font-size {
		font-size: clamp(0.85rem, 1.4vw, 1.05rem) !important;
	}

	.hero-section .wp-block-buttons .wp-block-button__link {
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		padding-left: 1.8em;
		padding-right: 1.8em;
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   Mobile / Tablet Responsive -rules below target ≤ 782px.
   ========================================================================== */

/* On mobile, always show header background (no transparent-to-solid transition) */
@media (max-width: 782px) {
	.site-header {
		background-color: var(--wp--preset--color--primary);
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
	}
}

/* Header & footer logo: scale down on tablet/mobile.
   !important is required to override WordPress inline style="width:Xpx". */
@media (max-width: 782px) {
	.site-header .wp-block-site-logo img {
		width: 200px !important;
		height: auto !important;
	}

	footer .wp-block-site-logo img {
		width: 200px !important;
		height: auto !important;
	}
}

@media (max-width: 480px) {
	.site-header .wp-block-site-logo img {
		width: 150px !important;
	}

	footer .wp-block-site-logo img {
		width: 150px !important;
	}
}

/* Hero: fit within one viewport on mobile so CTA + watermark are
   visible without scrolling.  56px offset clears the sticky CTA bar.
   height (not min-height) prevents the cover block from expanding. */
@media (max-width: 782px) {
	.hero-section,
	.hero-section.wp-block-cover {
		height: calc(100svh - 56px) !important;
		min-height: unset !important;
		max-height: calc(100svh - 56px) !important;
		padding-top: 5rem !important;
		padding-bottom: 2.5rem !important;
		justify-content: center !important;
		overflow: hidden;
	}

	/* Editorial heroes: content centered, clears sticky bar */
	.hero-section--editorial,
	.hero-section--editorial.wp-block-cover {
		height: calc(100svh - 56px) !important;
		min-height: unset !important;
		max-height: calc(100svh - 56px) !important;
		justify-content: center !important;
		padding-top: 4rem !important;
		padding-bottom: 2.5rem !important;
	}

	.hero-editorial {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
		padding-bottom: 0 !important;
	}

	/* Kill WP is-layout-flow margins inside hero content */
	.hero-section .wp-block-cover__inner-container.is-layout-flow > * {
		margin-block-start: 0 !important;
	}

	/* Compact hero heading so multi-line titles fit one screen */
	.hero-section .has-xxx-large-font-size {
		font-size: clamp(1.45rem, 6vw, 1.8rem) !important;
		line-height: 1.1 !important;
	}

	/* Tighter hero body text */
	.hero-section .has-large-font-size {
		font-size: 0.9rem !important;
		line-height: 1.35 !important;
	}

	/* Compact eyebrow spacing */
	.hero-editorial__eyebrow {
		margin-bottom: 0.5rem !important;
	}

	/* Smaller CTA buttons on mobile */
	.hero-section .wp-block-button__link {
		padding: 0.6em 1.3em !important;
		font-size: 0.85rem !important;
	}

	.hero-section .wp-block-buttons {
		gap: 0.4rem !important;
	}

	/* Tighter spacing between hero elements */
	.hero-editorial .has-large-font-size {
		margin-top: 0.5rem !important;
		margin-bottom: 0.6rem !important;
	}

	.hero-editorial .wp-block-buttons {
		margin-top: 0.5rem !important;
	}

	/* Let the background image show through more on mobile */
	.hero-section:not(.wp-block-cover)::before {
		opacity: 0.72;
	}

	/* Darken hero overlay on mobile for better text readability */
	.hero-section.wp-block-cover .wp-block-cover__background {
		opacity: 0.72 !important;
	}

	/* Override WP inline padding on hero content cards */
	.hero-content-card {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) !important;
	}

	/* Less vertical padding between sections on mobile */
	.section-padding {
		padding-top: clamp(2rem, 5vw, 4rem);
		padding-bottom: clamp(2rem, 5vw, 4rem);
	}
}


/* ---------- Tablet / Mid-range Refinements ---------- */
@media (max-width: 1024px) {
	/* Tighten grid gaps on tablet */
	.portfolio-grid {
		gap: 1.5rem;
	}

	.services-grid {
		gap: 1.5rem;
	}

	/* Reduce section heading margin on tablet */
	.section-padding {
		padding-top: clamp(3rem, 6vw, 6rem);
		padding-bottom: clamp(3rem, 6vw, 6rem);
	}

	/* Reduce service card padding on tablet */
	.service-card {
		padding: 2rem 1.5rem;
	}

	/* Trust bar: tighter logo spacing on tablet */
	.trust-bar__logos {
		gap: 1.5rem;
	}

	.trust-bar__logo-img {
		max-height: 100px;
		max-width: 140px;
	}

	/* CTA banner: less padding on tablet */
	.cta-banner {
		padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
	}
}

@media (max-width: 782px) {
	/* Portfolio grid: smaller gap on mobile */
	.portfolio-grid {
		gap: 1.25rem;
	}

	/* Work gallery: tighter gap */
	.work-gallery {
		gap: 1rem;
	}

	/* Team grid: tighter gap */
	.team-grid {
		gap: 1.5rem;
	}
}

/* Stats grid: 2x2 on small phones instead of single column */
@media (max-width: 500px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 1rem;
	}

	.stat-item__number {
		font-size: 2rem;
	}
}

/* ---------- What Happens Next (Questionnaire) ---------- */
/* Warm background panel matching the homepage How It Works aesthetic */
.questionnaire-form ~ .section-padding-sm {
	background: var(--wp--preset--color--bg-light);
	border-radius: 12px;
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

/* Service cards inside the section: match How It Works card dimensions */
.questionnaire-form ~ .section-padding-sm .service-card {
	text-align: center;
}

/* Contact fallback line: subtle separator + muted treatment */
.questionnaire-form ~ .section-padding-sm > p:last-child {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-500);
}

/* Questionnaire form: less padding on mobile */
@media (max-width: 600px) {
	.questionnaire-form {
		padding: 1.5rem 1.25rem;
	}
}

/* CTA banner: smaller radius on mobile */
@media (max-width: 600px) {
	.cta-banner {
		border-radius: var(--wp--custom--border-radius--medium, 8px);
	}
}

/* Work gallery: horizontal scroll on mobile instead of hiding */
@media (max-width: 600px) {
	.work-gallery {
		grid-template-columns: none;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
		padding-bottom: 0.5rem;
	}

	.work-gallery .work-gallery__item {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}

	.work-gallery::-webkit-scrollbar {
		height: 4px;
	}

	.work-gallery::-webkit-scrollbar-track {
		background: var(--wp--preset--color--neutral-200);
		border-radius: 2px;
	}

	.work-gallery::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--accent);
		border-radius: 2px;
	}
}

/* Testimonials: horizontal scroll on mobile instead of hiding */
@media (max-width: 600px) {
	.testimonials-grid {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}

	.testimonials-grid > .wp-block-column {
		flex: 0 0 85% !important;
		scroll-snap-align: start;
	}

	.testimonials-grid::-webkit-scrollbar {
		height: 4px;
	}

	.testimonials-grid::-webkit-scrollbar-track {
		background: var(--wp--preset--color--neutral-200);
		border-radius: 2px;
	}

	.testimonials-grid::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--accent);
		border-radius: 2px;
	}
}

/* ---------- Footer: Instagram Link ---------- */
footer .footer-contact a[href*="instagram.com"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0;
	text-decoration: none;
}

footer .footer-contact a[href*="instagram.com"]::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8e8e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
}

footer .footer-contact a[href*="instagram.com"]::after {
	content: "@plumbdawg_millionaire";
	font-size: 0.9375rem;
	color: var(--wp--preset--color--neutral-200);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ---------- Mobile Footer: Hybrid Compact Layout ---------- */
@media (max-width: 782px) {
	/* Center all footer sections */
	footer .footer-columns .wp-block-column {
		text-align: center;
	}

	/* Tighten gap between stacked footer sections */
	footer .footer-columns {
		gap: 1.5rem !important;
	}

	/* Center the logo */
	footer .footer-brand .wp-block-site-logo {
		display: flex;
		justify-content: center;
	}

	/* Quick Links: 2-column grid instead of vertical list */
	footer .footer-nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		line-height: 2 !important;
	}

	footer .footer-nav ul li {
		margin: 0;
	}

	/* Contact: side-by-side tappable pill buttons */
	footer .footer-contact {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}

	footer .footer-contact > .wp-block-heading {
		flex: 0 0 100%;
		margin-bottom: 0;
	}

	footer .footer-contact > p {
		margin: 0 !important;
	}

	footer .footer-contact a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.75rem 1.5rem;
		min-height: 48px;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 100px;
		text-decoration: none;
		transition: background 0.25s ease;
		font-size: 0.875rem;
		color: var(--wp--preset--color--neutral-200);
	}

	/* Hide original text only on links that have icon + label replacements */
	footer .footer-contact a[href^="mailto:"],
	footer .footer-contact a[href^="tel:"],
	footer .footer-contact a[href*="instagram.com"] {
		font-size: 0;
	}

	footer .footer-contact a:hover {
		background: rgba(255, 255, 255, 0.15);
	}

	/* Icon (::before) + short label (::after) replace long text */
	footer .footer-contact a::before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	footer .footer-contact a::after {
		font-size: 0.9375rem;
		color: var(--wp--preset--color--neutral-200);
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	/* Envelope icon + "Email Us" */
	footer .footer-contact a[href^="mailto:"]::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8e8e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 4 10 9 10-9'/%3E%3C/svg%3E");
	}

	footer .footer-contact a[href^="mailto:"]::after {
		content: "Email Us";
	}

	/* Phone icon + "Call Us" */
	footer .footer-contact a[href^="tel:"]::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8e8e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.11 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	}

	footer .footer-contact a[href^="tel:"]::after {
		content: "Call Us";
	}

	/* Instagram icon + "Follow Us" */
	footer .footer-contact a[href*="instagram.com"]::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e8e8e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E");
	}

	footer .footer-contact a[href*="instagram.com"]::after {
		content: "@plumbdawg_millionaire";
	}
}

/* ---------- Sticky Mobile CTA ---------- */
.sticky-mobile-cta {
	display: none;
}

@media (max-width: 782px) {
	.sticky-mobile-cta {
		display: flex !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: var(--wp--preset--color--primary);
		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
		padding: 0;
		gap: 0;
	}

	.sticky-mobile-cta__link {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--primary);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
		font-size: 0.95rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.sticky-mobile-cta__phone {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem 1.25rem;
		color: var(--wp--preset--color--white);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 600;
		font-size: 0.85rem;
		white-space: nowrap;
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* Add bottom padding to body so sticky CTA doesn't cover footer content */
	body {
		padding-bottom: 56px;
	}
}

/* ==========================================================================
   Large Screen Responsiveness (1400px+ / 1800px+)
   ========================================================================== */

@media (min-width: 1400px) {
	/* Scale up hero typography */
	.hero-content-card .wp-block-heading {
		font-size: clamp(3rem, 4vw, 4.5rem);
	}

	/* Wider hero card */
	.hero-content-card {
		width: min(960px, calc(100% - 6rem));
	}

	/* 4-column portfolio grid */
	.portfolio-grid--cols-3 {
		grid-template-columns: repeat(4, 1fr);
	}

	/* More spacious stats */
	.stats-grid {
		gap: 3rem;
	}

	/* More generous service card padding on wide screens */
	.service-card {
		padding: 2.5rem;
	}

	/* What We Build 3-col: wider gap for breathing room */
	.services-grid:not(.services-grid--2col) {
		gap: 2.5rem;
	}

	/* Larger section padding */
	.section-padding {
		padding-top: clamp(5rem, 8vw, 10rem);
		padding-bottom: clamp(5rem, 8vw, 10rem);
	}
}

@media (min-width: 1800px) {
	/* Even larger hero text */
	.hero-content-card .wp-block-heading {
		font-size: 5rem;
	}

	.hero-content-card {
		width: min(1100px, calc(100% - 8rem));
	}

	/* Work gallery stays 3-col on wide screens for larger images */
	.work-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Scale up stat numbers */
	.stat-item__number {
		font-size: 5rem;
	}

	/* Wider trust bar spacing on large screens */
	.trust-bar__logos {
		gap: 3rem;
		max-width: 1100px;
	}
}

/* ---------- @plumbdawg_millionaire Watermark ---------- */
/* Frosted glass pill badge in the bottom-right of every hero section.
   .hero-section has position:relative, so ::after positions against it
   regardless of whether it's a plain group or wp-block-cover variant. */
.hero-section::after {
	content: "@plumbdawg_millionaire";
	position: absolute;
	bottom: 1.5rem;
	right: 2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	padding: 0.45em 1.2em;
	z-index: 3;
	pointer-events: none;
}

/* Reposition watermark on mobile - smaller, centered at bottom */
@media (max-width: 782px) {
	.hero-section::after {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		bottom: 1rem;
		font-size: 0.6rem;
		padding: 0.35em 1em;
	}
}

/* Override WP has-global-padding on hero content card */
.hero-content-card.has-global-padding {
	padding-left: var(--wp--preset--spacing--50) !important;
	padding-right: var(--wp--preset--spacing--50) !important;
}

/* Override WP is-layout-flow margins inside testimonial cards */
.testimonial-card.is-layout-flow > * {
	margin-block-start: 0 !important;
}

.testimonial-card.is-layout-flow > * + * {
	margin-block-start: 0.5rem !important;
}

/* ---------- CTA Social Proof Tag ---------- */
.cta-social-tag {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.05em;
	text-align: center;
}

.cta-social-tag a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-weight: 600;
}

.cta-social-tag a:hover {
	color: var(--wp--preset--color--accent-light);
}

/* ---------- Instagram Callout ---------- */
.ig-callout {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 0.6rem 1rem 0.6rem 0;
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 1rem;
}

.ig-callout__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-600);
	white-space: nowrap;
}

.ig-callout__handle a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ig-callout__handle a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Long Text Overflow Protection ---------- */
/* Prevent long email addresses and URLs from causing horizontal scroll */
@media (max-width: 600px) {
	a[href^="mailto:"],
	.project-meta-value {
		overflow-wrap: break-word;
		word-break: break-all;
	}
}

/* ---------- Mobile Landscape: Hero ---------- */
/* On phones in landscape, the viewport height is very short (320-440px).
   Use max-height instead of max-width so we catch all phone sizes,
   including larger models (iPhone Plus/Max) that exceed 900px in landscape. */
@media (max-height: 500px) and (orientation: landscape) {
	.hero-section,
	.hero-section.wp-block-cover {
		min-height: auto !important;
		padding-top: 5rem !important;
		padding-bottom: 2rem !important;
	}

	/* Compact the hero content card so it fits the short viewport */
	.hero-content-card {
		padding: 1rem 1.25rem !important;
	}

	/* Hide sticky CTA in landscape - reclaim precious vertical space */
	.sticky-mobile-cta {
		display: none !important;
	}

	body {
		padding-bottom: 0;
	}
}