/* ============================================================
   MISTER WOOD — DESIGN SYSTEM  v2
   Constraints: no element shadows, no rounded corners.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
	--green:        #8dbe46;
	--green-dark:   #6ea52e;
	--green-xdark:  #4f7c1e;
	--green-light:  #b3d46a;
	--green-tint:   #f2f8e8;

	--ink-950:  #0d0e10;
	--ink-900:  #16181c;
	--ink-700:  #2e3035;
	--ink-500:  #62666e;
	--ink-300:  #9fa3ab;
	--ink-100:  #e3e4e7;
	--ink-50:   #f2f3f5;

	--white:    #ffffff;
	--off-white:#fafaf8;

	--border:   #dddfe3;

	--font:     'PT Sans', sans-serif;
	--font-alt: 'Source Sans 3', sans-serif;

	--ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--t1: 0.18s ease;
	--t2: 0.32s ease;
	--t3: 0.58s var(--ease);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
	font-family: var(--font);
	background: var(--white);
	color: var(--ink-700);
	margin: 0; padding: 0;
	-webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { border: 0; max-width: 100%; display: block; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 {
	font: 800 56px/1.05 var(--font);
	color: var(--ink-950);
	margin: 0;
	letter-spacing: -1.5px;
}
h2 {
	font: 700 32px/1.1 var(--font);
	color: var(--ink-950);
	margin: 0;
	letter-spacing: -0.5px;
}
h3 {
	font: 600 12px/1 var(--font);
	color: var(--green-dark);
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 16px 0;
}
h3::before {
	content: '— ';
	letter-spacing: 0;
}

p {
	font: 300 17px/1.75 var(--font-alt);
	color: var(--ink-500);
	margin: 0 0 16px 0;
}
p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	h1 { font-size: 36px; letter-spacing: -0.5px; }
	h2 { font-size: 24px; }
	p  { font-size: 15px; }
}

/* ── SCROLL-REVEAL ───────────────────────────────────────── */
[data-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="up"]    { transform: translateY(36px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-reveal-stagger] > *.is-visible { opacity: 1; transform: none; }

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes scanline {
	from { transform: scaleX(0); transform-origin: left; }
	to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes messengerPulse {
	0%, 100% { outline: 3px solid transparent; outline-offset: 3px; }
	50%       { outline: 3px solid rgba(141,190,70,0.45); outline-offset: 6px; }
}

/* ── LAYOUT HELPERS ──────────────────────────────────────── */
.content-wrap {
	margin: auto;
	width: 90%;
	max-width: 1100px;
	position: relative;
}
.content-wrap-wide {
	margin: auto;
	width: 90%;
	max-width: 1400px;
	position: relative;
}
@media (max-width: 1280px) {
	.content-wrap, .content-wrap-wide { width: 90%; }
}

@media (min-width: 1025px) { .only-mobile { display: none !important; } }
@media (max-width: 1024px) { .only-pc    { display: none !important; } }

/* ── TOP BAR ─────────────────────────────────────────────── */
#top-section {
	padding: 14px 40px;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}
#top-section .logo img {
	transition: opacity var(--t2);
	max-height: 52px;
	width: auto;
}
#top-section .logo:hover img { opacity: 0.75; }

.direct-contact {
	border-right: 1px solid var(--ink-100);
	gap: 12px;
}
.direct-contact > .icon > i {
	color: var(--green);
	font-size: 24px;
}
.direct-contact > .content {
	font: 300 12px/1.4 var(--font-alt);
	color: var(--ink-300);
	letter-spacing: 0.3px;
}
.direct-contact > .content > p {
	font: 700 15px/1 var(--font);
	color: var(--ink-900);
	margin: 3px 0 0 0;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--ink-500);
	border-radius: 0 !important;
	transition: background var(--t2), color var(--t2), border-color var(--t2);
}
	.social-icon:hover {
		background: var(--green);
		border-color: var(--green);
		color: #fff;
	}
	.social-icon > i { font-size: 15px; }

/* ── STICKY NAVIGATION ───────────────────────────────────── */
#menu-section {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(0,0,0,0.06);
	z-index: 100;
	padding: 0 4%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	transition: background var(--t3), padding var(--t3);
}

#menu-section.scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: none; /* Enforce no-shadow constraint */
	border-bottom: 1px solid var(--green);
	padding: 0 4%;
}

.menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 24px 0;
	margin: 0;
	font: 700 15px/1 var(--font);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ink-900);
	cursor: pointer;
	text-decoration: none !important;
	transition: color var(--t2);
}

.menu-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--t3) cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-item:hover { color: var(--green-dark); }
.menu-item:hover::before { transform: scaleX(1); }

.menu-item-hidden {
	background: var(--ink-950);
	border-top: 3px solid var(--green);
	padding: 8px 0;
}
	.menu-item-sub {
		font: 600 13px var(--font);
		letter-spacing: 0.5px;
		padding: 14px 24px;
		color: var(--ink-300);
		text-transform: uppercase;
		transition: all var(--t2);
	}
	.menu-item-sub:hover {
		color: var(--green-light);
		background: rgba(255,255,255,0.03);
		padding-left: 28px;
	}

/* ── MOBILE NAV ──────────────────────────────────────────── */
#mobile-top-line {
	background: var(--white);
	border-bottom: 1px solid var(--border);
	padding: 10px 16px;
}
.mobile-social { color: var(--ink-700); font-size: 18px; }

.mobile-nav__button {
	font: 700 12px/1 var(--font);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ink-900);
	border-bottom: 1px solid var(--ink-100);
	padding: 18px 0;
	transition: color var(--t1), padding-left var(--t2);
}
	.mobile-nav__button:hover { color: var(--green-dark); padding-left: 8px; }

/* ── BANNER ──────────────────────────────────────────────── */
#banner-section {
	height: 700px;
	background: var(--ink-950);
	border-bottom: none;
	position: relative;
	overflow: hidden;
}
#banner-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(0,0,0,0.62) 0%,
		rgba(0,0,0,0.22) 55%,
		rgba(0,0,0,0.05) 100%
	);
	z-index: 2;
	pointer-events: none;
}

.banner-button-wrap {
	z-index: 9;
	bottom: 48px;
}
	.banner-button {
		display: inline-block;
		font: 700 14px/1 var(--font);
		letter-spacing: 2px;
		text-transform: uppercase;
		padding: 18px 56px;
		background: var(--green);
		color: #fff;
		border: 2px solid var(--green);
		cursor: pointer;
		transition: color var(--t2), background var(--t2), border-color var(--t2);
	}
	.banner-button:hover {
		background: transparent;
		border-color: #fff;
		color: #fff;
	}

#main-slider { opacity: 0; transition: opacity 1.2s ease; }
#main-slider.loaded-banner { opacity: 1; }

@media (max-width: 1024px) {
	#banner-section { height: 280px; }
	#banner-section::after { display: none; }
}

/* ── ABOUT ───────────────────────────────────────────────── */
#about-section {
	padding: 100px 0;
	background: var(--white);
	overflow: visible;
}
	#about-section > .content-wrap {
		display: flex;
		gap: 80px;
		align-items: center;
	}

	.about-image {
		flex: 0 0 460px;
		position: relative;
	}
	/* Geometric L-bracket top-left */
	.about-image::after {
		content: '';
		position: absolute;
		top: -14px;
		left: -14px;
		width: 56px;
		height: 56px;
		border-top: 3px solid var(--green);
		border-left: 3px solid var(--green);
		pointer-events: none;
		transition: width var(--t3), height var(--t3);
	}
	.about-image:hover::after { width: 88px; height: 88px; }
	/* Bottom-right bracket */
	.about-image::before {
		content: '';
		position: absolute;
		bottom: -14px;
		right: -14px;
		width: 56px;
		height: 56px;
		border-bottom: 3px solid var(--green);
		border-right: 3px solid var(--green);
		pointer-events: none;
		transition: width var(--t3), height var(--t3);
	}
	.about-image:hover::before { width: 88px; height: 88px; }

	.about-image > img {
		display: block;
		width: 100%;
		position: relative;
		z-index: 1;
		transition: transform var(--t3);
	}
	.about-image:hover > img { transform: scale(1.015); }

	.about-content {
		flex: 1;
		min-width: 0;
	}
	.about-content > h3 { margin-bottom: 12px; }
	.about-content > h1 { margin-bottom: 28px; }

	.about-content > .highlighted {
		display: block;
		font: 600 16px/1.5 var(--font);
		color: var(--green-dark);
		padding: 16px 20px;
		border-left: 3px solid var(--green);
		background: var(--green-tint);
		margin: 28px 0;
	}

	.about-content > .bottom {
		padding: 24px 0;
	}
	.about-content > .bottom > .direct-contact {
		padding: 0;
		border: 0;
	}

@media (max-width: 1024px) {
	#about-section { padding: 64px 0; }
	#about-section > .content-wrap { flex-direction: column; gap: 48px; }
	.about-image { flex: none; width: 100%; }
	.about-image::before, .about-image::after { display: none; }
	.about-content > .navigator { text-align: center; }
}

/* ── REFERENCES ─────────────────────────────────────────── */
#references-section {
	padding: 140px 0;
	background: var(--white);
	text-align: center;
	position: relative;
	overflow: hidden;
}
	#references-section.albums { background: var(--white); }

#references-section::before { display: none; }

#references-section > .content-wrap {
	position: relative;
	z-index: 1;
}

#references-section h3 {
	color: var(--green-dark);
	font: 700 12px/1 var(--font);
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 12px;
}
#references-section h1 {
	color: var(--ink-950);
	font-size: 52px;
	letter-spacing: -1.5px;
	line-height: 1.05;
}

.references-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 72px;
	padding: 0 5%;
	font-size: 1rem;
}

.reference-item-wrapper {
	padding: 0;
	width: 100% !important;
	display: block;
}

/* All cards: fixed uniform aspect ratio */
.reference-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: var(--ink-100);
	aspect-ratio: 4 / 3; /* every thumbnail is identical */
	border: 1px solid var(--border);
	transition: border-color var(--t2);
}
.reference-item:hover { border-color: var(--green); }

/* No first-child featured span — all equal */
.reference-item-wrapper:first-child {
	grid-column: auto;
	grid-row: auto;
}

/* Image fills card uniformly */
.reference-item > .image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.reference-item > .image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease);
}
.reference-item:hover > .image > img { transform: scale(1.06); }

/* Dark overlay — appears on hover only */
.reference-item > .image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0,0,0,0.65) 0%,
		rgba(0,0,0,0.1) 60%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity var(--t2);
}
.reference-item:hover > .image::after { opacity: 1; }

/* Title hidden until hover, slides up */
.reference-item > .title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 20px 18px;
	z-index: 2;
	transform: translateY(100%);
	transition: transform var(--t3);
	height: auto;
	display: flex;
	align-items: flex-end;
	border-top: none;
}
.reference-item:hover > .title { transform: translateY(0); }

.reference-item > .title > p {
	display: block;
	padding: 0;
	font: 700 14px/1.2 var(--font);
	letter-spacing: 0.3px;
	color: var(--white);
	margin: 0;
}

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

@media (max-width: 600px) {
	.references-list { grid-template-columns: 1fr; }
	#references-section h1 { font-size: 36px; }
}

/* ── INQUIRY CTA ─────────────────────────────────────────── */
#inquiry-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 80px 20px;
	/* Remove the height set by index.css */
	height: auto !important;
}

#inquiry-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10,11,13,0.72);
	z-index: 1;
}

.inquiry-box {
	position: relative !important;
	z-index: 3;
	/* Override absolute positioning from index.css */
	left: auto !important;
	top: auto !important;
	-webkit-transform: none !important;
	transform: none !important;
	width: 100%;
	max-width: 700px;
	padding: 0;
	background: transparent;
	text-align: center;
	color: var(--white);
}

/* Remove the decorative pseudo-border from index.css */
.inquiry-box::before { display: none !important; }
.inquiry-box > div { position: relative; z-index: 4; }

.inquiry-box h1 {
	font-size: 48px;
	color: var(--white);
	letter-spacing: -1px;
	margin-bottom: 8px;
}
/* Green accent bar below h1 */
.inquiry-box h1::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--green);
	margin: 20px auto 0;
	transform-origin: left;
}

.inquiry-box p {
	font: 300 16px/1.8 var(--font-alt);
	color: rgba(255,255,255,0.75);
	max-width: 560px;
	margin: 24px auto 0;
}

.inquiry-box .button-wrapper {
	margin-top: 40px;
}

@media (max-width: 1024px) {
	#inquiry-section { min-height: auto; padding: 64px 20px; }
	.inquiry-box h1 { font-size: 28px; }
	.inquiry-box p  { font-size: 14px; }
}

/* ── SERVICES ────────────────────────────────────────────── */
#services-section {
	padding: 140px 0;
	background: var(--white);
	background-image: none !important;
	position: relative;
	text-align: center;
}

#services-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
}

.services-wrapper { margin: 0; }

.services-placeholder {
	margin: 64px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1200px;
	padding: 0 5%;
}

.service-wrapper {
	padding: 0;
	width: 100%;
}

.service-box {
	position: relative;
	background: var(--white);
	border: 1px solid var(--border);
	padding: 48px 40px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	transition: all var(--t3);
	overflow: hidden;
}

/* Hover Accent Block */
.service-box::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t3) cubic-bezier(0.25, 1, 0.5, 1);
	z-index: 1;
}

.service-box:hover {
	transform: translateY(-4px);
	border-color: rgba(141,190,70,0.4);
	background: var(--ink-50);
}
.service-box:hover::before { 
	transform: scaleX(1); 
	transform-origin: left; 
}

.service-box > * { position: relative; z-index: 2; width: 100%; }

.service-icon { 
	margin-bottom: 32px; 
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--green-tint);
	border: 1px solid rgba(141,190,70,0.2);
}
.service-icon img {
	height: 32px;
	width: auto;
	display: block;
	transition: transform var(--t3), filter var(--t2);
	filter: hue-rotate(50deg) brightness(0.9); /* Subtly shift original icon coloring */
}
.service-box:hover .service-icon img {
	transform: scale(1.1);
	filter: hue-rotate(0deg) brightness(1);
}

.service-box h2 {
	font: 700 20px/1.3 var(--font);
	color: var(--ink-950);
	padding: 0;
	margin: 0 0 16px 0;
	border-bottom: none;
	transition: color var(--t2);
}

.service-box p, 
.service-box div.content-text {
	font: 400 15px/1.7 var(--font-alt);
	color: var(--ink-500);
	margin: 0;
}

@media (max-width: 1024px) {
	.services-placeholder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.services-placeholder { grid-template-columns: 1fr; gap: 16px; }
	.service-box { padding: 32px 24px; }
}
		}
		.service-box:hover .service-icon img { transform: translateY(-5px); }

	/* Green variant */
	.service-box.green {
		background: var(--green);
		border: 1px solid var(--green-dark);
		border-top: 3px solid var(--green-xdark);
		color: rgba(255,255,255,0.88);
		font-size: 15px;
	}
	.service-box.green::before { display: none; }
	.service-box.green h2 {
		color: #fff;
		border-bottom-color: rgba(255,255,255,0.22);
	}

@media (max-width: 1024px) {
	.service-wrapper { width: 100%; }
	.service-box { height: auto; }
}

/* ── REVIEWS ─────────────────────────────────────────────── */
#reviews-section {
	padding: 120px 0;
	background: #111;
	text-align: center;
	position: relative;
}
	#reviews-section > h3 { color: var(--green-light); margin-bottom: 8px; }
	#reviews-section > h1 { color: var(--white); margin-bottom: 64px; }

/* Asymmetrical Bento Grid for 5 cards */
.reviews-wrapper {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
	padding: 0 5%;
	max-width: 1440px;
	margin: 0 auto;
	align-items: stretch;
}

/* Base card wrapper ensures full height filling */
.review-wrapper {
	padding: 0;
	width: 100%; /* Override 20% width from index.css */
	height: auto;
}

/* Span definitions */
.review-wrapper:nth-child(1) { grid-column: span 4; }
.review-wrapper:nth-child(2) { grid-column: span 4; }
.review-wrapper:nth-child(3) { grid-column: span 4; }
.review-wrapper:nth-child(4) { grid-column: 3 / span 4; } /* Centers bottom row */
.review-wrapper:nth-child(5) { grid-column: 7 / span 4; }

.review-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--ink-900);
	padding: 40px;
	height: 100%;
	text-align: left;
	position: relative;
	transition: all var(--t3);
	border: 1px solid rgba(255,255,255,0.03);
	border-left: 3px solid rgba(141,190,70,0.1);
	text-decoration: none !important;
	overflow: hidden;
}

	.review-box:hover {
		background: #111316;
		border-left-color: var(--green);
		transform: translateY(-4px);
	}

/* Quote icon watermark */
.review-box::before {
	content: '\201C';
	position: absolute;
	top: -20px;
	left: 10px;
	font-size: 140px;
	line-height: 1;
	color: rgba(255,255,255,0.02);
	font-family: Georgia, serif;
	z-index: 0;
	pointer-events: none;
}

/* Flex order flip: Content first, Author bottom */
.review-top {
	order: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dashed rgba(255,255,255,0.1);
	position: relative;
	z-index: 2;
}

.review-content {
	order: 1;
	font: 400 16px/1.8 var(--font-alt);
	color: var(--ink-100);
	position: relative;
	z-index: 2;
}

.review-thumbnail { flex: 0 0 48px; }
.review-thumbnail > img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 0 !important;
	filter: grayscale(100%);
	transition: filter var(--t2);
}
.review-box:hover .review-thumbnail > img {
	filter: grayscale(0%);
}

.review-name {
	flex: 1;
	min-width: 0;
	font: 700 15px/1.3 var(--font);
	color: var(--white);
}
	.review-name > p {
		margin: 4px 0 0;
		font: 300 13px/1.2 var(--font-alt);
		color: var(--ink-500);
	}

.review-icon {
	flex: 0 0 24px;
	opacity: 0.5;
	transition: opacity var(--t2);
}
.review-box:hover .review-icon {
	opacity: 1;
}

/* Responsiveness */
@media (max-width: 1280px) {
	.reviews-wrapper { gap: 16px; padding: 0 20px; }
	.review-wrapper:nth-child(1),
	.review-wrapper:nth-child(2),
	.review-wrapper:nth-child(3),
	.review-wrapper:nth-child(4),
	.review-wrapper:nth-child(5) {
		grid-column: span 6;
	}
	.review-wrapper:nth-child(5) { grid-column: 4 / span 6; }
}

@media (max-width: 1024px) {
	.reviews-wrapper { display: flex; flex-direction: column; gap: 16px; }
	.review-wrapper { width: 100%; height: auto; }
	.review-box { padding: 32px 24px; }
}

/* ── CONTACT FORM ────────────────────────────────────────── */
#forms-section {
	background: var(--ink-950);
	padding: 0;
	margin: 0;
	position: relative;
	overflow: hidden;
}

/* Giant decorative watermark — only on the right (dark) side, so use the form-col */
#forms-section::before {
	content: 'MW';
	position: absolute;
	top: -60px;
	right: -40px;
	font: 900 320px/1 var(--font);
	color: rgba(255,255,255,0.02);
	pointer-events: none;
	letter-spacing: -10px;
	z-index: 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 680px;
	position: relative;
	z-index: 1;
}

/* ── LEFT COLUMN ─── */
.contact-identity {
	padding: 100px 72px 100px 8%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	border-right: 1px solid rgba(255,255,255,0.07);
}

.contact-eyebrow {
	font: 700 12px/1 var(--font);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--green);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.contact-eyebrow::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 2px;
	background: var(--green);
}

.contact-headline {
	font: 900 68px/0.95 var(--font);
	color: var(--white);
	margin: 0;
	letter-spacing: -2px;
}
.contact-headline em {
	font-style: normal;
	color: var(--green);
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 8px;
}

.contact-detail-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 0;
	border-top: 1px solid rgba(255,255,255,0.07);
	text-decoration: none !important;
	transition: padding-left var(--t3);
}
.contact-detail-item:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.contact-detail-item:hover { padding-left: 10px; }

.cd-label {
	font: 700 11px/1 var(--font);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink-300);
}
.cd-label i { color: var(--green); margin-right: 6px; }

.cd-value {
	font: 400 18px/1 var(--font-alt);
	color: var(--white);
}
a.contact-detail-item:hover .cd-value { color: var(--green-light); }

.contact-tagline {
	font: 400 14px/1.6 var(--font-alt);
	color: var(--ink-500);
	max-width: 320px;
	border-left: 2px solid rgba(141,190,70,0.3);
	padding-left: 16px;
}

/* ── RIGHT COLUMN ─── */
.contact-form-col {
	padding: 100px 8% 100px 72px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	background: rgba(255,255,255,0.02);
}

.form-lead {
	font: 700 22px/1.2 var(--font);
	color: var(--white);
	margin: 0;
	letter-spacing: -0.3px;
}

.inquiry-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* Floating label field */
.cf-field {
	position: relative;
}
.cf-field--full { grid-column: 1 / -1; }

.cf-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 60px;
	padding: 22px 16px 8px;
	font: 400 16px/1 var(--font-alt);
	color: var(--white);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-bottom: 2px solid rgba(255,255,255,0.15);
	outline: none;
	transition: all var(--t2);
	border-radius: 0 !important;
}
.cf-input:focus {
	background: rgba(141,190,70,0.06);
	border-color: var(--green);
	border-bottom-color: var(--green);
}

.cf-textarea {
	height: 140px;
	padding: 32px 16px 12px;
	resize: none;
	line-height: 1.6;
}

/* The floating label */
.cf-label {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	font: 400 15px/1 var(--font-alt);
	color: var(--ink-300);
	pointer-events: none;
	transition: all var(--t2);
}
.cf-field--full .cf-label { top: 22px; transform: none; }

/* Animate label up when input is focused or has content */
.cf-input:focus ~ .cf-label,
.cf-input:not(:placeholder-shown) ~ .cf-label {
	top: 10px;
	transform: none;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--green);
}
/* For textarea */
.cf-field--full .cf-input:focus ~ .cf-label,
.cf-field--full .cf-input:not(:placeholder-shown) ~ .cf-label {
	top: 10px;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--green);
}

.cf-req { color: var(--green); }

/* Consent checkbox row */
.cf-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font: 400 13px/1.6 var(--font-alt);
	color: var(--ink-300);
}
.cf-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--green);
	border-radius: 0 !important;
}
.cf-consent a { color: var(--green-light); text-decoration: none; }
.cf-consent a:hover { text-decoration: underline; }

/* Submit button */
.cf-submit { margin-top: 8px; }

.cf-send-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 40px;
	font: 700 13px/1 var(--font);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.cf-send-btn i { font-size: 20px; transition: transform var(--t2); }
.cf-send-btn:hover i { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1100px) {
	.contact-headline { font-size: 52px; }
	.contact-identity { padding: 80px 48px 80px 5%; }
	.contact-form-col { padding: 80px 5% 80px 48px; }
}

@media (max-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-identity {
		padding: 80px 5%;
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,0.07);
	}
	.contact-headline { font-size: 52px; }
	.contact-form-col { padding: 64px 5%; }
	.cf-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.contact-headline { font-size: 40px; letter-spacing: -1px; }
}

/* keep old .contact-us/.contact-line selectors harmless */
.contact-us, .contact-line, .contact-line-left, .contact-line-right,
.forms-left, .forms-right, .form-single, .input-wrapper { all: unset; display: none; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.green-button {
	display: inline-block;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	font: 700 13px/1 var(--font);
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 30px;
	background: var(--green);
	color: #fff;
	border: 2px solid var(--green);
	transition: color var(--t2), border-color var(--t2), background var(--t2);
	z-index: 0;
}
	.green-button::after {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--green-dark);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--t3);
		z-index: -1;
	}
	.green-button:hover { background: var(--green-dark); border-color: var(--green-dark); }
	.green-button:hover::after { transform: scaleX(1); }

/* ── MESSENGER ───────────────────────────────────────────── */
#messenger-icon {
	border: 1px solid var(--border);
	border-radius: 0 !important;
	background: var(--white);
	transition: transform var(--t2), border-color var(--t2);
	animation: messengerPulse 3.5s ease infinite;
}
	#messenger-icon:hover {
		transform: scale(1.1);
		border-color: var(--green);
		width: 60px !important;
		height: 60px !important;
		right: 30px !important;
		bottom: 30px !important;
	}

/* ── FOOTER ──────────────────────────────────────────────── */
#footer-section {
	padding: 18px 24px;
	background: var(--ink-950);
	color: var(--ink-300);
	font: 400 11px/1 var(--font);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	border-top: 2px solid var(--green);
}

/* ── OVERRIDE ROUNDED CORNERS FROM index.css ─────────────── */
.social-icon,
#messenger-icon,
.review-thumbnail > img {
	border-radius: 0 !important;
}

/* ── SCOPED p OVERRIDES ──────────────────────────────────── */
/* Prevent global p reset from breaking specific areas */
.review-name > p {
	font: 300 11px var(--font-alt) !important;
	color: var(--ink-300) !important;
	margin: 3px 0 0 !important;
}
.direct-contact > .content > p {
	font: 700 15px/1 var(--font) !important;
	color: var(--ink-900) !important;
	margin: 3px 0 0 0 !important;
}
.mobile-sub-hidden .mobile-sub-button { font-size: 13px; }