/* ---------------------------------------------------------------------
 * PMBO - Hire-us / agency page
 * --------------------------------------------------------------------- */

.pmbo-team-page {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0f172a;
	line-height: 1.55;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.pmbo-team-page * { box-sizing: border-box; }

.pmbo-team-page > section {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(2rem, 5vw, 4rem) 1.25rem;
}

/* ============= HERO ============= */
.pmbo-team-hero {
	max-width: none !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	left: 50%;
	right: 50%;
	width: 100vw;
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(3rem, 7vw, 5.5rem) 1.25rem clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(1100px 460px at 80% -10%, rgba(99,102,241,.18), transparent 60%),
		radial-gradient(900px 400px at -10% 110%, rgba(6,182,212,.16), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.pmbo-team-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.pmbo-team-hero-bg .pmbo-blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(60px);
	opacity: .55;
}
.pmbo-team-hero-bg .pmbo-blob-1 { width: 380px; height: 380px; top: -100px; left: -60px; background: radial-gradient(closest-side, #818cf8, transparent); }
.pmbo-team-hero-bg .pmbo-blob-2 { width: 320px; height: 320px; bottom: -100px; right: -40px; background: radial-gradient(closest-side, #22d3ee, transparent); }

.pmbo-team-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

.pmbo-team-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(99,102,241,.12);
	color: #4f46e5;
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.pmbo-team-eyebrow .pmbo-pulse {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 0 rgba(16,185,129,.6);
	animation: pmboTeamPulse 2s ease-out infinite;
}
@keyframes pmboTeamPulse {
	0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
	70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.pmbo-team-hero h1 {
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.08;
	margin: 0 0 1rem;
	font-weight: 800;
	letter-spacing: -.02em;
}
.pmbo-team-hero h1 em {
	font-style: normal;
	background: linear-gradient(90deg, #4f46e5, #06b6d4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pmbo-team-lead {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: #334155;
	margin: 0 auto 1.5rem;
	max-width: 60ch;
}

.pmbo-team-hero-ctas {
	display: flex;
	gap: .65rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.pmbo-team-page .pmbo-btn {
	appearance: none;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #0f172a;
	padding: .8rem 1.25rem;
	border-radius: 999px;
	font-size: .98rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.pmbo-team-page .pmbo-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.12); }
.pmbo-team-page .pmbo-btn-primary { background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); color: #fff; border: 0; }
.pmbo-team-page .pmbo-btn-primary:hover { filter: brightness(1.06); }
.pmbo-team-page .pmbo-btn-large { padding: 1rem 1.6rem; font-size: 1.05rem; }

.pmbo-team-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	color: #64748b;
	font-size: .9rem;
}
.pmbo-team-hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.pmbo-team-hero-trust svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============= SECTION HEAD ============= */
.pmbo-team-section-head {
	text-align: center;
	margin: 0 auto 1.75rem;
	max-width: 720px;
}
.pmbo-team-section-head .pmbo-kicker,
.pmbo-team-page .pmbo-kicker {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 999px;
	background: rgba(6,182,212,.12);
	color: #0e7490;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .65rem;
}
.pmbo-team-section-head h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: 0 0 .35rem;
	font-weight: 800;
	letter-spacing: -.01em;
}
.pmbo-team-section-sub { color: #64748b; margin: 0; }

/* ============= SERVICES ============= */
.pmbo-team-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.pmbo-team-service {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 1.4rem 1.2rem 1.3rem;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pmbo-team-service:hover {
	transform: translateY(-3px);
	border-color: rgba(79,70,229,.3);
	box-shadow: 0 18px 40px -22px rgba(15,23,42,.2);
}
.pmbo-team-service-ic {
	display: inline-flex;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2ff, #ecfeff);
	color: #4f46e5;
	align-items: center;
	justify-content: center;
	margin-bottom: .65rem;
}
.pmbo-team-service-ic svg { width: 22px; height: 22px; }
.pmbo-team-service h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.pmbo-team-service p { font-size: .92rem; color: #334155; margin: 0; }

/* ============= TEAM PEOPLE ============= */
.pmbo-team-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}
.pmbo-team-person {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 1.6rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	position: relative;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pmbo-team-person:hover {
	transform: translateY(-4px);
	border-color: rgba(79,70,229,.4);
	box-shadow: 0 22px 50px -22px rgba(15,23,42,.25);
}
.pmbo-team-person--featured {
	background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
	border-color: #6366f1;
	box-shadow: 0 0 0 2px rgba(99,102,241,.18), 0 22px 50px -22px rgba(99,102,241,.4);
}
.pmbo-team-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #4f46e5, #06b6d4);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .25rem .7rem;
	border-radius: 99px;
	white-space: nowrap;
}
.pmbo-team-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: .04em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 24px -10px rgba(15,23,42,.3), inset 0 0 0 3px rgba(255,255,255,.4);
	margin-bottom: .25rem;
}
.pmbo-team-person h3 { font-size: 1.25rem; margin: 0; font-weight: 800; }
.pmbo-team-role { font-size: .92rem; color: #4f46e5; font-weight: 600; margin: 0; }
.pmbo-team-loc { font-size: .82rem; color: #64748b; margin: 0; }
.pmbo-team-bio { font-size: .94rem; color: #1f2937; margin: .4rem 0 0; }

.pmbo-team-skills {
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.pmbo-team-skills li {
	font-size: .76rem;
	font-weight: 600;
	background: #eef2ff;
	color: #3730a3;
	padding: .25rem .6rem;
	border-radius: 999px;
	border: 1px solid rgba(99,102,241,.18);
}
.pmbo-team-person--featured .pmbo-team-skills li:nth-child(2n) { background: #ecfeff; color: #0e7490; border-color: rgba(6,182,212,.25); }

.pmbo-team-links {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-top: .4rem;
}
.pmbo-team-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .9rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter .15s, transform .12s, box-shadow .15s;
}
.pmbo-team-link svg { width: 16px; height: 16px; }
.pmbo-team-link--upwork   { background: #14a800; color: #fff; }
.pmbo-team-link--linkedin { background: #0a66c2; color: #fff; }
.pmbo-team-link            { background: #0f172a; color: #fff; }
.pmbo-team-link:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(15,23,42,.3); color: #fff; }

/* ============= TESTIMONIALS WRAPPER ============= */
.pmbo-team-testimonials { position: relative; background: #f8fafc; max-width: none !important; margin-left: -50vw !important; margin-right: -50vw !important; left: 50%; right: 50%; width: 100vw; }

/* ============= CONTACT CTA ============= */
.pmbo-team-contact { padding-bottom: clamp(3rem, 6vw, 5rem); }
.pmbo-team-contact-card {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #fff;
	border-radius: 22px;
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.5rem;
	align-items: center;
	box-shadow: 0 30px 60px -30px rgba(15,23,42,.5);
	position: relative;
	overflow: hidden;
}
.pmbo-team-contact-card::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	height: 80%;
	background: radial-gradient(closest-side, rgba(99,102,241,.4), transparent 70%);
	pointer-events: none;
}
.pmbo-team-contact-card .pmbo-kicker { background: rgba(255,255,255,.1); color: #c7d2fe; }
.pmbo-team-contact-card h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 .5rem; font-weight: 800; color: #ffffff; letter-spacing: -.01em; }
.pmbo-team-contact-card p { color: #cbd5e1; margin: 0; }
.pmbo-team-contact-ctas { display: flex; flex-direction: column; gap: .5rem; }
.pmbo-team-contact .pmbo-btn { width: 100%; justify-content: center; gap: .5rem; }
/* Lock down icon size inside the contact CTAs - without an explicit
 * constraint inline SVGs render at their natural / SVG-spec default
 * which on some browsers is "fill the container", blowing up to 100%.
 */
.pmbo-team-contact .pmbo-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.pmbo-team-wa { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }
.pmbo-team-wa:hover { background: #1ebe59 !important; color: #fff !important; }

@media (max-width: 720px) {
	.pmbo-team-contact-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.pmbo-team-eyebrow .pmbo-pulse { animation: none; }
	.pmbo-team-service,
	.pmbo-team-person { transition: none; }
}