/* ─────────────────────────────────────────────────────────────────────────
   CONTACT — page-specific styles, matched to approved v21 mockup.
   All classes scoped with .ct- prefix so contact.css can co-exist
   with the shared mv-form-* chrome used elsewhere on the site.

   Sections:
     1. .ct-hero            dark forest, watermark, big serif h1
     2. .ct-section + grid  message form + direct contact aside
     3. .ct-map-*           address + Google Maps iframe
     4. .ct-social-*        Instagram / Facebook / LinkedIn cards
   ───────────────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════
   HERO — split layout (copy left 2fr, image right 3fr)
   Mirrors About + hub pages. ACF supplies the right-column image with
   focal-point. Empty image state shows a dark forest gradient.
   ═════════════════════════════════════════════════════════════════════ */
.ct-hero{
	background:var(--surface-forest,#1B3A2D);
	min-height:88vh;
	display:grid;grid-template-columns:2fr 3fr;
	align-items:center;
	overflow:hidden;
	position:relative;
	color:#fff;
}
.ct-hero-copy{
	padding:100px 64px 80px;
	display:flex;flex-direction:column;justify-content:center;
	position:relative;z-index:1;
}
.ct-hero-img{
	height:88vh;
	background:linear-gradient(160deg,#2D5C45,#1B3A2D);
	background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center;
	position:relative;z-index:0;
}
.ct-hero-img-ph{
	font-size:11px;letter-spacing:.07em;
	color:rgba(200,216,192,.2);
	text-align:center;line-height:2;
}
.ct-hero-brow{
	font-size:11px;font-weight:500;
	letter-spacing:.16em;text-transform:uppercase;
	color:var(--on-dark-body);
	margin-bottom:20px;
}
.ct-hero-h{
	font-family:var(--font-heading);
	font-size:clamp(42px,5.5vw,64px);
	font-weight:400;line-height:1.08;
	margin:0;
	max-width:480px;
	text-wrap:balance;
	letter-spacing:-.01em;
	color:#fff;
}


/* ═════════════════════════════════════════════════════════════════════
   GENERIC SECTION CHROME — scoped to contact page
   ═════════════════════════════════════════════════════════════════════ */
.ct-section{padding:96px 64px;}
.ct-section-cream{background:var(--surface-cream);}
.ct-section-white{background:#fff;}
.ct-section-inner{max-width:1152px;margin:0 auto;}
.ct-section-header{max-width:720px;margin-bottom:48px;}
.ct-s-h2{
	font-family:var(--font-heading);
	font-size:clamp(28px,3.5vw,44px);
	font-weight:500;
	line-height:1.15;
	color:var(--on-light-h);
	margin:0;
	text-wrap:balance;
	letter-spacing:-.005em;
}


/* ═════════════════════════════════════════════════════════════════════
   MESSAGE SECTION — form + direct contact aside (3fr/2fr grid)
   ═════════════════════════════════════════════════════════════════════ */
.ct-contact-grid{
	display:grid;
	grid-template-columns:3fr 2fr;
	gap:72px;
	align-items:start;
	margin-top:16px;
}


/* ── FORM ────────────────────────────────────────────────────────────── */
.ct-contact-form{
	display:flex;flex-direction:column;gap:16px;
	position:relative;
}
.ct-form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}
.ct-form-field{
	display:flex;flex-direction:column;
}
.ct-form-label{
	font-size:12px;font-weight:500;
	letter-spacing:.08em;text-transform:uppercase;
	color:var(--on-cream-label);
	margin-bottom:8px;
}
.ct-form-optional{
	text-transform:none;letter-spacing:0;
	color:rgba(27,58,45,.35);
	font-size:12px;
	font-weight:400;
}


/* ── INPUTS / SELECT / TEXTAREA ──────────────────────────────────────── */
.ct-form-input,
.ct-form-select,
.ct-form-textarea{
	width:100%;
	padding:14px 16px;
	font-size:15px;
	font-family:inherit;
	color:var(--on-light-h);
	background:#fff;
	border:1px solid rgba(27,58,45,.18);
	border-radius:6px;
	outline:none;
	transition:border-color .2s;
	min-height:48px;
	-webkit-appearance:none;
}
.ct-form-input:focus,
.ct-form-select:focus,
.ct-form-textarea:focus{
	border-color:var(--hub-residency);
}
.ct-form-select{
	appearance:none;
	-webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B3A2D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
	padding-right:40px;
	cursor:pointer;
}
.ct-form-textarea{
	min-height:140px;
	resize:vertical;
	line-height:1.6;
	padding-top:14px;
}


/* ── HONEYPOT — off-screen ──────────────────────────────────────────── */
.ct-honeypot{
	position:absolute;
	left:-5000px;
	width:1px;height:1px;
	overflow:hidden;
}


/* ── MARKETING CONSENT CHECKBOX ─────────────────────────────────────── */
.ct-form-consent{
	display:flex;align-items:flex-start;gap:12px;
	margin-top:16px;padding:16px 18px;
	background:rgba(255,255,255,.5);
	border:1px solid rgba(27,58,45,.08);
	border-radius:6px;
	cursor:pointer;
}
.ct-form-consent input[type="checkbox"]{
	margin-top:2px;
	flex-shrink:0;
	accent-color:var(--hub-residency);
}
.ct-form-consent-text{
	font-size:13px;
	color:var(--on-light-body);
	line-height:1.6;
	text-wrap:pretty;
}
.ct-form-consent-text a{
	color:var(--hub-residency);
	text-decoration:underline;
	text-underline-offset:2px;
}


/* ── SUBMIT BUTTON ───────────────────────────────────────────────────── */
.ct-form-btn{
	display:inline-flex;align-items:center;justify-content:center;
	height:52px;padding:0 32px;
	background:var(--surface-forest);
	color:#fff;
	border:none;border-radius:6px;
	font-size:15px;font-weight:500;
	font-family:inherit;cursor:pointer;
	margin-top:12px;
	align-self:flex-start;
	transition:opacity .2s;
	-webkit-appearance:none;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	gap:8px;
}
.ct-form-btn:hover{opacity:.88;}
.ct-form-btn:disabled{opacity:.5;cursor:wait;}


/* ── SUCCESS + STATUS messages ──────────────────────────────────────── */
.ct-form-success{
	padding:20px 24px;
	background:rgba(59,109,17,.08);
	border-left:3px solid var(--hub-residency);
	border-radius:4px;
	font-size:15px;
	color:var(--on-light-h);
	line-height:1.6;
	margin-top:12px;
}
.ct-form-success[hidden]{display:none;}

.ct-form-status{
	font-size:14px;
	color:var(--on-light-body);
	margin-top:8px;
}
.ct-form-status:empty{display:none;}


/* ── INPUT ERROR STATE ──────────────────────────────────────────────── */
.ct-form-input-error,
.ct-form-input.ct-form-input-error,
.ct-form-select.ct-form-input-error,
.ct-form-textarea.ct-form-input-error{
	border-color:#a02d1a;
}


/* ═════════════════════════════════════════════════════════════════════
   DIRECT CONTACT ASIDE
   ═════════════════════════════════════════════════════════════════════ */
.ct-contact-direct{
	background:#fff;
	border-radius:10px;
	padding:36px 32px;
	border:1px solid rgba(27,58,45,.08);
}
.ct-direct-h{
	font-family:var(--font-heading);
	font-size:22px;font-weight:500;
	color:var(--on-light-h);
	margin:0 0 24px 0;
	line-height:1.2;
}
.ct-direct-list{
	display:flex;flex-direction:column;gap:20px;
}
.ct-direct-row{
	display:flex;
	align-items:flex-start;
	gap:16px;
}
.ct-direct-icon{
	width:40px;height:40px;
	border-radius:50%;
	background:var(--surface-cream);
	color:var(--hub-residency);
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;
}
.ct-direct-icon svg{
	width:18px;height:18px;
}
.ct-direct-icon img{width:18px;height:18px;object-fit:contain;display:block;}
.ct-direct-content{flex:1;min-width:0;}
.ct-direct-label{
	font-size:11px;font-weight:500;
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--on-cream-label);
	display:block;
}
.ct-direct-value{
	font-size:16px;font-weight:500;
	color:var(--on-light-h);
	margin:4px 0 0 0;
	line-height:1.4;
	word-break:break-word;
}
.ct-direct-value a{
	color:inherit;
	text-decoration:none;
}
.ct-direct-value a:hover{
	color:var(--hub-residency);
}
.ct-direct-hours{
	font-size:13px;
	color:var(--on-light-body);
	margin:2px 0 0 0;
}


/* ═════════════════════════════════════════════════════════════════════
   FIND US — address + map iframe (2fr/3fr grid)
   ═════════════════════════════════════════════════════════════════════ */
.ct-map-grid{
	display:grid;
	grid-template-columns:2fr 3fr;
	gap:56px;
	align-items:start;
	margin-top:16px;
}
.ct-map-aside{padding-top:8px;}
.ct-map-address{
	font-family:var(--font-heading);
	font-size:22px;
	font-weight:500;
	color:var(--on-light-h);
	line-height:1.4;
	margin:0 0 20px 0;
	text-wrap:balance;
}
.ct-map-actions{
	display:flex;gap:12px;flex-wrap:wrap;
}
.ct-map-directions{
	display:inline-flex;
	align-items:center;gap:8px;
	font-size:14px;font-weight:500;
	color:var(--surface-forest);
	border:1.5px solid rgba(27,58,45,.25);
	background:transparent;
	padding:12px 22px;
	border-radius:6px;
	min-height:44px;
	text-decoration:none;
	transition:background .2s,border-color .2s;
	-webkit-tap-highlight-color:transparent;
}
.ct-map-directions:hover{
	background:rgba(27,58,45,.05);
	border-color:rgba(27,58,45,.4);
}
.ct-map-embed{
	width:100%;
	aspect-ratio:4/3;
	border-radius:8px;
	overflow:hidden;
	background:linear-gradient(145deg,#D9E4D1,#B0BFA1);
	border:1px solid rgba(27,58,45,.08);
}
.ct-map-embed iframe{
	width:100%;height:100%;
	border:none;display:block;
}


/* ═════════════════════════════════════════════════════════════════════
   FOLLOW US — social cards
   ═════════════════════════════════════════════════════════════════════ */
.ct-social-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
	margin-top:24px;
}
.ct-social-card{
	background:#fff;
	border:1px solid rgba(27,58,45,.08);
	border-radius:10px;
	padding:28px;
	display:flex;
	align-items:center;
	gap:18px;
	text-decoration:none;
	color:inherit;
	transition:border-color .2s,transform .2s;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
}
.ct-social-card:hover{
	border-color:rgba(27,58,45,.2);
	transform:translateY(-2px);
}
.ct-social-card-icon{
	width:44px;height:44px;
	border-radius:50%;
	background:var(--surface-cream);
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;
	color:var(--hub-residency);
}
.ct-social-card-icon svg{
	width:22px;height:22px;
}
.ct-social-card-icon img{width:22px;height:22px;object-fit:contain;display:block;}
.ct-social-card-text{flex:1;min-width:0;}
.ct-social-card-name{
	font-size:15px;font-weight:500;
	color:var(--on-light-h);
}
.ct-social-card-handle{
	font-size:13px;
	color:var(--on-light-body);
	margin-top:2px;
}


/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤860px)
   ═════════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
	.ct-hero{
		grid-template-columns:1fr;
		grid-template-rows:auto auto;
		min-height:auto;
		align-items:stretch;
	}
	.ct-hero-img{grid-row:1;height:60vh;min-height:360px;max-height:580px;}
	.ct-hero-copy{grid-row:2;padding:48px 24px 56px;}

	.ct-section{padding:64px 24px;}
	.ct-section-header{margin-bottom:32px;}

	.ct-contact-grid{
		grid-template-columns:1fr;
		gap:40px;
	}
	.ct-form-row{
		grid-template-columns:1fr;
		gap:12px;
	}
	.ct-form-btn{width:100%;}
	.ct-contact-direct{padding:32px 28px;}

	.ct-map-grid{
		grid-template-columns:1fr;
		gap:32px;
	}
	.ct-map-aside{padding-top:0;}
	.ct-map-address{font-size:19px;}

	.ct-social-grid{
		grid-template-columns:1fr;
		gap:12px;
	}
}


/* ═════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile (≤480px)
   ═════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
	.ct-hero-copy{padding:40px 20px 48px;}
	.ct-hero-h{font-size:36px;line-height:1.1;max-width:100%;}

	.ct-section{padding:48px 20px;}

	.ct-contact-direct{padding:28px 24px;}
}