/* ==========================================================
   Contact page styles
   Loaded by templates/views/assets/contact.html
   ========================================================== */

/* ==========================================================
   CONTACT, page styles (all ct- scoped)
   ========================================================== */
.ct .h2 {
	font-size: clamp(2rem, 3.9vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.028em;
	text-wrap: balance;
}
.ct-head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 24px clamp(40px, 7vw, 120px);
	align-items: end;
	margin-bottom: clamp(32px, 4.2vw, 52px);
}
.ct-head .h2 {
	margin-top: 20px;
	max-width: 18ch;
}
.ct-head .lead {
	line-height: 1.7;
}

/* ---------- Hero ---------- */
.ct-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--header-h) + clamp(40px, 5.6vw, 80px)) 0 clamp(40px, 4.9vw, 60px);
}
.ct-mesh {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}
.ct-mesh span {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}
.ct-mesh .b1 {
	width: 720px;
	height: 720px;
	top: -340px;
	right: -120px;
	opacity: 0.4;
	background: radial-gradient(closest-side, var(--blue), transparent);
	animation: ct-drift1 24s ease-in-out infinite alternate;
}
.ct-mesh .b2 {
	width: 520px;
	height: 520px;
	top: 60px;
	right: 26%;
	opacity: 0.25;
	background: radial-gradient(closest-side, var(--cyan), transparent);
	animation: ct-drift2 28s ease-in-out infinite alternate;
}
.ct-mesh .b3 {
	width: 480px;
	height: 480px;
	top: 240px;
	right: -160px;
	opacity: 0.55;
	background: radial-gradient(closest-side, var(--peach), transparent);
	animation: ct-drift2 26s ease-in-out infinite alternate-reverse;
}
@keyframes ct-drift1 {
	to {
		transform: translate(-100px, 70px) scale(1.08);
	}
}
@keyframes ct-drift2 {
	to {
		transform: translate(80px, -50px) scale(0.94);
	}
}
.ct-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(rgba(16, 24, 32, 0.1) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 35%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 55% 70% at 75% 35%, #000 10%, transparent 70%);
}
.ct-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.ct-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 16px 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: inset 0 0 0 1px var(--line-strong);
	backdrop-filter: blur(8px);
	font-size: 14px;
	color: var(--ink-2);
}
.ct-pill i {
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 400 11px/1 var(--font-mono);
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #007a5a;
	background: rgba(0, 195, 137, 0.12);
}
.ct-pill i::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.2);
	animation: ct-pulse 2.4s ease-in-out infinite;
}
@keyframes ct-pulse {
	50% {
		box-shadow: 0 0 0 6px rgba(0, 195, 137, 0.06);
	}
}
.ct-hero h1 {
	margin-top: 28px;
	max-width: 14ch;
	font: 400 clamp(2.75rem, 5.6vw, 4.75rem)/1.06 var(--font-display);
	letter-spacing: -0.032em;
	text-wrap: balance;
}
.ct-hero .lead {
	margin-top: 26px;
	max-width: 50ch;
	line-height: 1.7;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.ct-clocks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}
.ct-clock {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 10px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 0 0 1px var(--line);
	backdrop-filter: blur(8px);
}
.ct-clock .ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	color: var(--blue);
	background: var(--blue-tint);
}
.ct-clock .ic svg {
	width: 17px;
	height: 17px;
}
.ct-clock.is-night .ic {
	color: var(--peri);
	background: color-mix(in srgb, var(--peri) 12%, #fff);
}
.ct-clock small {
	display: block;
	font: 400 11px/1.3 var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ct-clock b {
	display: block;
	margin-top: 2px;
	font: 400 16px/1.2 var(--font-display);
	font-variant-numeric: tabular-nums;
}

/* channel cards */
.ct-channels {
	display: grid;
	gap: 12px;
}
.ct-chan {
	--tone: var(--blue);
	--tone-2: var(--cyan);
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 20px 22px;
	border-radius: 22px;
	background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 8%, #fff), #fff 60%);
	box-shadow:
		var(--shadow-sm),
		0 0 0 1px color-mix(in srgb, var(--tone) 16%, transparent);
	transition:
		transform 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}
.ct-chan:hover {
	transform: translateY(-3px);
	box-shadow:
		var(--shadow-md),
		0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent);
}
.ct-chan .ic {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(135deg, var(--tone), var(--tone-2));
	box-shadow: 0 12px 24px -12px var(--tone);
}
.ct-chan .ic svg {
	width: 22px;
	height: 22px;
}
.ct-chan small {
	display: block;
	font: 400 11px/1.3 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ct-chan a.v,
.ct-chan span.v {
	display: block;
	margin-top: 4px;
	font: 400 1.1rem/1.3 var(--font-display);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.ct-chan a.v::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.ct-chan .go {
	position: relative;
	z-index: 1;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--ink-2);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line-strong);
	transition:
		background 0.25s,
		color 0.25s,
		box-shadow 0.25s;
}
.ct-chan .go:hover {
	color: #fff;
	background: var(--tone);
	box-shadow: none;
}
.ct-chan .go svg {
	width: 15px;
	height: 15px;
}
.ct-copy {
	position: relative;
}
.ct-copy .tip {
	position: absolute;
	right: 50%;
	bottom: calc(100% + 8px);
	transform: translate(50%, 4px);
	padding: 5px 9px;
	border-radius: 8px;
	font: 400 11.5px/1 var(--font-mono);
	color: #fff;
	background: var(--ink);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s,
		transform 0.2s;
}
.ct-copy.is-copied .tip {
	opacity: 1;
	transform: translate(50%, 0);
}

/* ---------- Form section ---------- */
.ct-form-sec {
	background: var(--cloud-dancer);
}
.ct-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 20px;
	align-items: start;
}
.ct-card {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 52px);
	border-radius: 32px;
	background: #fff;
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px var(--line);
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.ct-card::before {
	content: '';
	position: absolute;
	top: -180px;
	right: -160px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 181, 226, 0.12), transparent);
	pointer-events: none;
}
.ct-card h2 {
	position: relative;
	font: 400 clamp(1.75rem, 2.8vw, 2.4rem)/1.15 var(--font-display);
	letter-spacing: -0.025em;
}
.ct-card-sub {
	position: relative;
	margin-top: 10px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
}


/* form */
.ct-form {
	position: relative;
	display: grid;
	gap: 20px;
	margin-top: 32px;
}
.ct-topics-label {
	font: 400 11.5px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ct-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.ct-topic {
	--tone: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	color: var(--ink-2);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line-strong);
	transition:
		background 0.25s,
		color 0.25s,
		box-shadow 0.25s,
		transform 0.25s var(--ease);
}
.ct-topic i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tone);
	transition: transform 0.25s var(--ease);
}
.ct-topic:hover {
	box-shadow: inset 0 0 0 1px var(--tone);
	color: var(--ink);
}
.ct-topic[aria-pressed='true'] {
	color: color-mix(in srgb, var(--tone) 80%, #101820);
	background: color-mix(in srgb, var(--tone) 10%, #fff);
	box-shadow: inset 0 0 0 1.5px var(--tone);
}
.ct-topic[aria-pressed='true'] i {
	transform: scale(1.4);
}
.ct-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.ct-field {
	position: relative;
	display: grid;
	gap: 8px;
}
.ct-field label {
	font-size: 14px;
	color: var(--ink-2);
}
.ct-field label em {
	font-style: normal;
	color: var(--blue);
}
.ct-field input,
.ct-field textarea {
	width: 100%;
	padding: 14px 44px 14px 16px;
	border: 0;
	border-radius: 14px;
	resize: vertical;
	font: 400 15.5px/1.5 var(--font-body);
	color: var(--ink);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line-strong);
	transition:
		box-shadow 0.25s,
		background 0.25s;
}
.ct-field textarea {
	min-height: 150px;
	padding-right: 16px;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
	color: #a3a9b2;
}
.ct-field input:hover,
.ct-field textarea:hover {
	box-shadow: inset 0 0 0 1px rgba(16, 24, 32, 0.28);
}
.ct-field input:focus,
.ct-field textarea:focus {
	outline: none;
	background: #fff;
	box-shadow:
		inset 0 0 0 1.5px var(--blue),
		0 0 0 5px rgba(0, 114, 206, 0.12);
}
.ct-field .ok {
	position: absolute;
	right: 14px;
	bottom: 15px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: #00a676;
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 0.25s,
		transform 0.3s var(--ease);
	pointer-events: none;
}
.ct-field .ok svg {
	width: 11px;
	height: 11px;
}
.ct-field.is-valid .ok {
	opacity: 1;
	transform: none;
}
.ct-field.is-touched input:invalid,
.ct-field.is-touched textarea:invalid {
	box-shadow:
		inset 0 0 0 1.5px #e2774a,
		0 0 0 5px rgba(226, 119, 74, 0.1);
}
.ct-field .hint {
	font-size: 13px;
	color: #c0532b;
	min-height: 0;
}
.ct-field .text-danger {
	font-size: 13px;
	color: #c0532b;
}
.ct-count {
	position: absolute;
	right: 2px;
	top: 0;
	font: 400 11.5px/1.6 var(--font-mono);
	color: var(--subtle);
}
.ct-submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 4px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.ct-submit-row p {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13.5px;
}
.ct-submit-row p svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--subtle);
}
.ct-submit {
	height: 54px;
	padding: 0 28px;
	font-size: 15.5px;
}
.ct-submit[disabled] {
	cursor: progress;
	opacity: 0.85;
}
.ct-spin {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: ct-spin 0.8s linear infinite;
}
.ct-submit[disabled] .ct-spin {
	display: block;
}
@keyframes ct-spin {
	to {
		transform: rotate(360deg);
	}
}

/* side column */
.ct-side {
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--header-h) + 24px);
}
.ct-next {
	padding: 32px;
	border-radius: 28px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--blue) 7%, #fff), #fff 60%);
	box-shadow:
		var(--shadow-sm),
		0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent);
}
.ct-next h3 {
	font: 400 1.35rem/1.25 var(--font-display);
	letter-spacing: -0.015em;
}
.ct-steps {
	position: relative;
	display: grid;
	gap: 24px;
	margin-top: 26px;
}
.ct-steps::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(var(--blue), var(--cyan), #00a676);
	opacity: 0.35;
}
.ct-steps li {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 16px;
}
.ct-steps li > span {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 400 12px/1 var(--font-mono);
	color: var(--blue);
	background: #fff;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent);
}
.ct-steps b {
	display: block;
	font: 400 1.02rem/1.35 var(--font-display);
}
.ct-steps p {
	margin-top: 4px;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.6;
}
.ct-talk {
	position: relative;
	overflow: hidden;
	padding: 32px;
	border-radius: 28px;
	color: #fff;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(0, 181, 226, 0.3), transparent 55%),
		radial-gradient(90% 80% at 0% 100%, rgba(102, 103, 171, 0.35), transparent 60%), var(--ink);
	box-shadow: var(--shadow-lg);
}
.ct-talk small {
	font: 400 11px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cyan);
}
.ct-talk h3 {
	margin-top: 14px;
	font: 400 1.35rem/1.25 var(--font-display);
	letter-spacing: -0.015em;
}
.ct-talk p {
	margin-top: 8px;
	color: #9aa3ae;
	font-size: 14.5px;
	line-height: 1.6;
}
.ct-talk .btn {
	margin-top: 22px;
}
.ct-social {
	display: flex;
	gap: 8px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-social a {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	color: #c9ced6;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	transition:
		background 0.25s,
		color 0.25s,
		transform 0.25s var(--ease);
}
.ct-social a:hover {
	color: #fff;
	background: var(--blue);
	transform: translateY(-2px);
}
.ct-social svg {
	width: 17px;
	height: 17px;
}

/* ---------- Offices ---------- */
.ct-off-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 20px;
	align-items: stretch;
}
.ct-offices {
	display: grid;
	gap: 16px;
	align-content: start;
}
.ct-office {
	--tone: var(--blue);
	--tone-2: var(--cyan);
	position: relative;
	width: 100%;
	text-align: left;
	border: 0;
	cursor: pointer;
	padding: 28px;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
	transition:
		box-shadow 0.4s var(--ease),
		transform 0.4s var(--ease),
		background 0.4s;
}
.ct-office:hover {
	transform: translateY(-2px);
	box-shadow:
		var(--shadow-sm),
		0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
}
.ct-office.is-active {
	background: linear-gradient(155deg, color-mix(in srgb, var(--tone) 9%, #fff), #fff 60%);
	box-shadow:
		var(--shadow-md),
		0 0 0 1.5px color-mix(in srgb, var(--tone) 45%, transparent);
}
.ct-office-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.ct-office-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	font: 400 11.5px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--tone) 80%, #101820);
	background: color-mix(in srgb, var(--tone) 11%, #fff);
}
.ct-office-time {
	font: 400 12.5px/1 var(--font-mono);
	color: var(--subtle);
	font-variant-numeric: tabular-nums;
}
.ct-office h3 {
	margin-top: 20px;
	font: 400 1.5rem/1.2 var(--font-display);
	letter-spacing: -0.02em;
}
.ct-office address {
	margin-top: 10px;
	font-style: normal;
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.7;
}
.ct-office-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.ct-office-foot span {
	font-size: 13.5px;
	color: var(--muted);
}
.ct-office .link-arrow {
	position: relative;
	z-index: 1;
	font-size: 14.5px;
	color: color-mix(in srgb, var(--tone) 85%, #101820);
}
.ct-office .pin {
	position: absolute;
	top: 28px;
	right: 28px;
	display: none;
}

.ct-map {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	border-radius: 28px;
	background: var(--cloud-dancer);
	box-shadow:
		var(--shadow-md),
		0 0 0 1px var(--line);
}
.ct-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(0.85) contrast(1.02);
	transition: opacity 0.4s;
}
.ct-map.is-loading iframe {
	opacity: 0.3;
}
.ct-map-label {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	box-shadow:
		var(--shadow-md),
		0 0 0 1px var(--line);
	font-size: 14px;
	pointer-events: none;
}
.ct-map-label i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.18);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.ct-head,
	.ct-hero-grid,
	.ct-form-grid,
	.ct-off-grid {
		grid-template-columns: 1fr;
	}
	.ct-head {
		align-items: start;
	}
	.ct-side {
		position: static;
		grid-template-columns: 1fr 1fr;
	}
	.ct-map {
		min-height: 380px;
	}
}
@media (max-width: 640px) {
	.ct-row {
		grid-template-columns: 1fr;
	}
	.ct-side {
		grid-template-columns: 1fr;
	}
	.ct-chan {
		grid-template-columns: 44px 1fr auto;
		gap: 14px;
		padding: 16px;
	}
	.ct-chan .ic {
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}
	.ct-chan a.v,
	.ct-chan span.v {
		font-size: 1rem;
		word-break: break-word;
	}
	.ct-card {
		border-radius: 26px;
	}
	.ct-submit {
		width: 100%;
	}
	.ct-office,
	.ct-next,
	.ct-talk {
		padding: 24px;
	}
	.ct-map {
		min-height: 320px;
	}
}

/* ---------- Validation + captcha messages on the light card ---------- */
.ct-card .fv-msg,
.ct-card .cap-msg {
	color: #c0532b;
}
.ct-card input.is-invalid,
.ct-card textarea.is-invalid,
.ct-card .is-error .cap-input {
	box-shadow:
		inset 0 0 0 1.5px #e2774a,
		0 0 0 5px rgba(226, 119, 74, 0.1) !important;
}
.ct-card .cap-box {
	box-shadow: inset 0 0 0 1px var(--line);
}

/* hero call button (sits under the clocks) */
.ct-call {
	margin-top: 24px;
}