/* the hero carries the form, so columns align to the top, not center */
.page-hero .ph-grid.contact { align-items: start; }

/* left-column office / contact details */
.contact-info { display: flex; flex-direction: column; gap: 1.6rem; margin-top: .4rem; }
.ci-block { display: flex; align-items: flex-start; gap: .9rem; }
.ci-ic {
	flex: none; width: 40px; height: 40px; border-radius: 11px;
	background: var(--accent-tint); color: var(--accent);
	display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.contact-info h2 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.01em; }
.contact-info address { font-style: normal; font-size: .95rem; color: var(--body); line-height: 1.7; margin: 0; }
.contact-info address a { color: var(--accent); text-decoration: none; }
.contact-info address a:hover { text-decoration: underline; }

/* the form card */
.demo-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(20,45,80,.10);
	padding: clamp(1.6rem, 3vw, 2.4rem);
}
.demo-card h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .4rem; }
.demo-card .dc-sub { font-size: .95rem; color: var(--body); margin-bottom: 1.4rem; }

/* Mautic form skin, scoped to the demo-card (form-agnostic) */
.demo-card .mauticform-row { margin-bottom: 1.05rem; }
.demo-card .mauticform-innerform label {
	display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem;
}
/* Float labels: placeholder-only when empty; once a field is focused or filled,
   its label fades in as a small chip on the field's top edge, so captions persist
   after typing/autofill. The JS unhides Mautic's sr-only labels and toggles
   .has-value per row. */
.demo-card .mauticform-row:not(.mauticform-checkboxgrp) { position: relative; }
.demo-card .mauticform-row:not(.mauticform-checkboxgrp) .mauticform-label {
	position: absolute; top: -.55rem; left: 14px; z-index: 1;
	margin: 0; padding: 0 .4rem; background: #fff; border-radius: 4px;
	font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--accent-dk);
	opacity: 0; transform: translateY(4px); pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(:focus) .mauticform-label,
.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-input:not(:placeholder-shown)) .mauticform-label,
.demo-card .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-textarea:not(:placeholder-shown)) .mauticform-label,
.demo-card .mauticform-row.has-value:not(.mauticform-checkboxgrp) .mauticform-label {
	opacity: 1; transform: none;
}
/* Fields with no placeholder (e.g. the "Are you a human?" captcha) can't use the
   float-label pattern - there's no caption to fall back on while the label is
   hidden - so their label stays a normal, always-visible block label above the
   field. The JS adds .no-float to any row whose field has no placeholder. */
.demo-card .mauticform-row.no-float .mauticform-label {
	position: static; opacity: 1; transform: none;
	margin: 0 0 .4rem; padding: 0; background: none;
	font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
	.demo-card .mauticform-label { transition: none; }
}
.demo-card .mauticform-input,
.demo-card .mauticform-selectbox,
.demo-card .mauticform-textarea {
	width: 100%; box-sizing: border-box;
	font-family: inherit; font-size: .95rem; color: var(--ink);
	background: #fbfcfd; border: 1px solid #d6dbe3; border-radius: 10px;
	padding: .68rem .9rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.demo-card .mauticform-input:focus,
.demo-card .mauticform-selectbox:focus,
.demo-card .mauticform-textarea:focus {
	outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0,100,120,.14);
}
.demo-card .mauticform-helpmessage {
	font-size: .82rem; color: var(--muted); margin-bottom: .3rem;
}
.demo-card .mauticform-errormsg {
	display: block; color: #c2333f; font-size: .82rem; margin-top: .3rem;
}
/* checkbox groups (Privacy Policy + Keep in touch) */
.demo-card .mauticform-checkboxgrp-row { display: flex; align-items: flex-start; gap: .55rem; }
.demo-card .mauticform-checkboxgrp-checkbox { flex: none; width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--accent); }
.demo-card .mauticform-checkboxgrp-label { font-weight: 400; font-size: .85rem; color: var(--body); line-height: 1.5; margin: 0; }
/* the privacy-policy link ships from Mautic with inline color:white (built for
   the old teal panel); force it visible on the white card */
.demo-card .mauticform-checkboxgrp a { color: var(--accent) !important; }
.demo-card .mauticform-button-wrapper { margin-top: .4rem; }
.demo-card .mauticform-button {
	display: block; width: 100%;
	font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff;
	background: var(--btn-ink); border: 0; border-radius: 999px;
	padding: .85rem 1.5rem; cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.demo-card .mauticform-button:hover { background: #183a94; transform: translateY(-1px); }
.demo-card .mauticform-button:disabled,
.demo-card .mauticform-button.submitting { opacity: .65; cursor: default; transform: none; }
.demo-card .mauticform-post-success { color: var(--accent-dk); font-weight: 600; }