/* =========================================================================
   Contact page (page-contact.php) — hero + a working contact form.
   ========================================================================= */
.bublr-contact { background: var(--cream, #F5F2EB); color: var(--black, #0A0A0A); overflow: hidden; }

/* ---------- Hero ---------- */
.bublr-contact-hero {
	position: relative;
	padding: clamp(120px, 16vw, 200px) 0 clamp(30px, 5vw, 56px);
	text-align: center;
}
.bublr-contact-hero__b { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.bublr-contact-hero__b--1 { width: 360px; height: 360px; top: -110px; right: -90px; background: var(--mint-green, #7FE5A8); opacity: 0.45; }
.bublr-contact-hero__b--2 { width: 300px; height: 300px; bottom: -140px; left: -110px; background: var(--powder, #B8DDE8); opacity: 0.4; }
.bublr-contact-hero .container { position: relative; z-index: 1; }
.bublr-contact-hero__title { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin: 18px 0 0; }
.bublr-contact-hero__sub { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--grey-4, #667085); max-width: 540px; margin: 22px auto 0; }

/* ---------- Body: form + aside ---------- */
.bublr-contact-body { padding: 0 0 clamp(90px, 12vw, 150px); }
.bublr-contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}

/* ---------- Form ---------- */
.bublr-contact-form {
	background: #fff;
	border: 1px solid rgba(10, 11, 14, 0.07);
	border-radius: 26px;
	padding: clamp(26px, 3vw, 40px);
	box-shadow: 0 30px 70px -44px rgba(10, 60, 40, 0.4);
}
.bublr-contact-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bublr-contact-field { display: block; margin-bottom: 18px; }
.bublr-contact-field > span {
	display: block;
	font-family: var(--font-head, "Poppins", sans-serif);
	font-size: 13.5px; font-weight: 600;
	color: var(--black, #0A0A0A);
	margin-bottom: 8px;
}
.bublr-contact-field input,
.bublr-contact-field textarea {
	width: 100%;
	font-family: var(--font-body, sans-serif);
	font-size: 15.5px;
	color: var(--black, #0A0A0A);
	background: var(--cream, #F5F2EB);
	border: 1px solid rgba(10, 11, 14, 0.1);
	border-radius: 14px;
	padding: 13px 15px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.bublr-contact-field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.bublr-contact-field input:focus,
.bublr-contact-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: color-mix(in srgb, var(--mint, #2BC47E) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint-green, #7FE5A8) 28%, transparent);
}
.bublr-contact-field input::placeholder,
.bublr-contact-field textarea::placeholder { color: #9aa5a0; }
.bublr-contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bublr-contact-submit { margin-top: 4px; }
.bublr-contact-msg { margin: 14px 0 0; font-size: 14.5px; font-weight: 500; min-height: 1.2em; }
.bublr-contact-msg.is-ok { color: var(--mint-deep, #1B9E66); }
.bublr-contact-msg.is-err { color: #c0392b; }

/* ---------- Aside ---------- */
.bublr-contact-aside { display: flex; flex-direction: column; gap: 16px; }
.bublr-contact-card {
	background: #fff;
	border: 1px solid rgba(10, 11, 14, 0.07);
	border-radius: 22px;
	padding: 26px 24px;
	box-shadow: 0 20px 50px -40px rgba(10, 60, 40, 0.36);
}
.bublr-contact-card h2 {
	font-family: var(--font-head, "Poppins", sans-serif);
	font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
	margin: 0 0 8px;
}
.bublr-contact-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey-4, #667085); }
.bublr-contact-card a { color: var(--mint-deep, #1B9E66); font-weight: 600; text-decoration: none; }
.bublr-contact-card a:hover { text-decoration: underline; }

@media (max-width: 820px) {
	.bublr-contact-grid { grid-template-columns: 1fr; max-width: 560px; }
	.bublr-contact-frow { grid-template-columns: 1fr; gap: 0; }
}