/* ============================================================
   contact.css — loaded on /contact and /about.
   ============================================================ */

/* ===== CTA box (reused on contact) ===== */
.cta-section { padding: 100px 0 60px; }
.cta-box {
	position: relative; max-width: 980px; margin: 0 auto;
	padding: 50px 44px; border-radius: 24px;
	background:
		radial-gradient(600px 300px at 50% 0%, rgba(103, 211, 204, .25), transparent 60%),
		linear-gradient(180deg, rgba(15, 33, 30, .8), rgba(7, 17, 15, .8));
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(103, 211, 204, .35);
	overflow: hidden;
}
.cta-box::before {
	content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px;
	background: linear-gradient(135deg, rgba(103, 211, 204, .5), transparent 50%, rgba(103, 211, 204, .3) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
.cta-content { position: relative; z-index: 1; max-width: 720px; }
.cta-content h2 {
	font-size: clamp(26px, 3.6vw, 34px); font-weight: 800;
	line-height: 1.2; margin-bottom: 14px; color: var(--text-main); letter-spacing: -.01em;
}
.cta-content p { color: var(--text-soft); font-size: 16px; line-height: 1.7; margin-bottom: 22px; }
.cta-bullets { list-style: none; display: grid; gap: 10px; }
.cta-bullets li {
	font-size: 14px; color: var(--text-soft); line-height: 1.5;
	padding-left: 30px; position: relative;
}
.cta-bullets li::before {
	content: "✓"; position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--gradient-1); color: var(--text-invert);
	font-size: 11px; font-weight: 900;
	display: grid; place-items: center;
	box-shadow: 0 4px 12px var(--glow-strong);
}

/* ===== Office cards ===== */
.contact-offices { max-width: 980px; margin: 60px auto 0; }
.contact-offices-head { text-align: center; margin-bottom: 36px; }
.contact-offices-head h3 {
	font-size: clamp(24px, 3.2vw, 32px); font-weight: 800;
	color: var(--text-main); letter-spacing: -.01em; line-height: 1.2; margin-top: 10px;
}
.offices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.office-card {
	position: relative; padding: 30px 28px; border-radius: 18px;
	background: linear-gradient(180deg, rgba(15, 33, 30, .65), rgba(7, 17, 15, .65));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-subtle);
	display: flex; gap: 22px;
	transition: all .35s cubic-bezier(.2, .8, .2, 1);
	overflow: hidden;
}
.office-card::before {
	content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
	background: linear-gradient(135deg, rgba(103, 211, 204, .4), transparent 50%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s; pointer-events: none;
}
.office-card:hover { transform: translateY(-4px); border-color: rgba(103, 211, 204, .4); }
.office-card:hover::before { opacity: 1; }
.office-flag {
	font-size: 38px; line-height: 1; flex-shrink: 0;
	width: 64px; height: 64px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(103, 211, 204, .15), rgba(103, 211, 204, .03));
	border: 1px solid var(--border-subtle);
}
.office-body { flex: 1; min-width: 0; }
.office-tag {
	display: inline-block;
	font-family: var(--mono); font-size: 10px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--accent-mid);
	padding: 4px 10px; border-radius: 100px;
	background: rgba(103, 211, 204, .08);
	border: 1px solid rgba(103, 211, 204, .25);
	margin-bottom: 8px;
}
.office-body h4 {
	font-size: 22px; font-weight: 700;
	color: var(--text-main);
	margin-bottom: 14px; letter-spacing: -.01em;
}
.office-rows { display: grid; gap: 10px; }
.office-row {
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 13.5px; color: var(--text-soft); line-height: 1.55;
}
.office-row svg {
	width: 16px; height: 16px;
	color: var(--accent-mid);
	flex-shrink: 0; margin-top: 2px;
}
.office-row a { color: var(--text-soft); transition: color .25s ease; }
.office-row a:hover { color: var(--accent-mid); }

/* ===== About page grid ===== */
.about-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
	max-width: 980px; margin: 0 auto;
}
.about-card {
	position: relative; padding: 32px 28px; border-radius: 20px;
	background: linear-gradient(180deg, rgba(15, 33, 30, .6), rgba(7, 17, 15, .6));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-subtle);
	transition: all .4s cubic-bezier(.2, .8, .2, 1);
	overflow: hidden;
}
.about-card:hover { transform: translateY(-6px); border-color: rgba(103, 211, 204, .4); }
.about-icon {
	width: 56px; height: 56px; border-radius: 14px;
	background: linear-gradient(135deg, rgba(103, 211, 204, .25), rgba(103, 211, 204, .05));
	border: 1px solid rgba(103, 211, 204, .4);
	display: grid; place-items: center;
	margin-bottom: 20px;
}
.about-icon svg { width: 28px; height: 28px; color: var(--accent-mid); }
.about-card h3 { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 12px; letter-spacing: -.01em; }
.about-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }

/* === About page — Team cards (Founder + Director) === */
.about-team-wrap {
	max-width: 980px;
	margin: 80px auto 0;
	text-align: center;
}
.about-team-title {
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 32px;
	color: var(--text-main);
}
.about-team-wrap .about-grid { max-width: none; margin: 0; }
.about-team-card { text-align: left; }
.about-team-photo {
	width: 140px !important; height: 140px !important;
	border-radius: 50% !important;
	overflow: hidden;
	padding: 0 !important;
	background: var(--bg-elev);
	border: 2px solid var(--accent-mid);
	box-shadow: 0 8px 24px rgba(103, 211, 204, 0.25);
}
.about-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-team-role {
	font-family: var(--mono);
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-mid) !important;
	margin-bottom: 14px !important;
}

/* Responsive */
@media (max-width: 800px) {
	.cta-box { padding: 36px 24px; }
	.offices-grid { grid-template-columns: 1fr; }
	.about-grid { grid-template-columns: 1fr; }
	.about-team-wrap { margin-top: 60px; }
	.about-team-photo { width: 80px !important; height: 80px !important; }
	.office-card { flex-direction: column; gap: 18px; }
	.office-flag { width: 56px; height: 56px; font-size: 32px; }
}