/* Axis Agents — front end
   Palette: pink #f72585 · purple #a855f7 · cyan #00c8ff · gold #ffb830 · navy #12082A
   Everything is namespaced .axis- so it can't collide with Elementor. */

.axis-team,
.axis-modal {
	--axis-pink: #f72585;
	--axis-purple: #a855f7;
	--axis-cyan: #00c8ff;
	--axis-gold: #ffb830;
	--axis-navy: #12082a;
	--axis-ink: #1c1230;
	--axis-muted: #6b6480;
	--axis-line: rgba(18, 8, 42, 0.1);
	--axis-card: #ffffff;
	--axis-frame: linear-gradient(135deg, #f72585 0%, #a855f7 38%, #00c8ff 72%, #ffb830 100%);
	--axis-radius: 22px;
	--axis-cols: 4;

	color: var(--axis-ink);
	font-family: inherit;
	line-height: 1.6;
}

.axis-team *,
.axis-team *::before,
.axis-team *::after,
.axis-modal *,
.axis-modal *::before,
.axis-modal *::after {
	box-sizing: border-box;
}

.axis-team[data-columns="2"] { --axis-cols: 2; }
.axis-team[data-columns="3"] { --axis-cols: 3; }
.axis-team[data-columns="5"] { --axis-cols: 5; }

.axis-team .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Shared bits ---------- */

.axis-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: linear-gradient(90deg, var(--axis-pink), var(--axis-purple), var(--axis-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.axis-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 28px;
}

.axis-section-title {
	margin: 0;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--axis-navy);
}

.axis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 999px;
	border: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.axis-btn svg { flex: 0 0 auto; }

.axis-btn-join,
.axis-btn-primary {
	background: linear-gradient(120deg, var(--axis-pink), var(--axis-purple) 55%, var(--axis-cyan));
	color: #fff;
	box-shadow: 0 10px 24px -10px rgba(247, 37, 133, 0.75);
}

.axis-btn-join:hover,
.axis-btn-primary:hover,
.axis-btn-join:focus-visible,
.axis-btn-primary:focus-visible {
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 16px 30px -12px rgba(168, 85, 247, 0.8);
}

.axis-btn-secondary {
	background: #fff;
	color: var(--axis-navy);
	border: 2px solid rgba(18, 8, 42, 0.14);
}

.axis-btn-secondary:hover,
.axis-btn-secondary:focus-visible {
	border-color: var(--axis-purple);
	color: var(--axis-purple);
	transform: translateY(-2px);
}

.axis-link-btn {
	background: none;
	border: 0;
	padding: 0;
	color: var(--axis-purple);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- Owner intro ---------- */

.axis-owner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
	padding: clamp(24px, 4vw, 48px);
	margin-bottom: clamp(36px, 6vw, 72px);
	border-radius: 32px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(0, 200, 255, 0.12), transparent 55%),
		radial-gradient(120% 140% at 0% 100%, rgba(247, 37, 133, 0.12), transparent 55%),
		#fff;
	box-shadow: 0 30px 60px -40px rgba(18, 8, 42, 0.5);
}

.axis-owner-title {
	margin: 0 0 16px;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--axis-navy);
}

.axis-owner-body p {
	margin: 0 0 14px;
	color: #4a4360;
}

.axis-owner-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.axis-btn-outline {
	background: #fff;
	color: var(--axis-navy);
	border: 2px solid rgba(18, 8, 42, 0.16);
}

.axis-btn-outline:hover,
.axis-btn-outline:focus-visible {
	border-color: var(--axis-pink);
	color: var(--axis-pink);
	transform: translateY(-2px);
}

.axis-owner-sig {
	margin: 18px 0 22px;
	font-weight: 700;
	font-style: italic;
	color: var(--axis-navy);
}

.axis-owner-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

/* ---------- Filters ---------- */

.axis-filters {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 auto 32px;
	padding: 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--axis-line);
	backdrop-filter: blur(8px);
}

.axis-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.axis-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 240px;
	min-width: 200px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--axis-line);
	background: #fff;
	color: var(--axis-muted);
}

.axis-search input {
	flex: 1;
	border: 0;
	outline: 0;
	background: none;
	padding: 11px 0;
	font: inherit;
	font-size: 15px;
	color: var(--axis-ink);
	min-width: 0;
}

.axis-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--axis-line);
	background: #fff;
	color: var(--axis-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.18s ease;
}

.axis-chip:hover { border-color: var(--axis-purple); }

.axis-chip[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--axis-pink), var(--axis-purple));
	border-color: transparent;
	color: #fff;
}

.axis-chip-gold[aria-pressed="true"] {
	background: linear-gradient(120deg, #b8860b, #ffd76a 45%, #ffb830);
	color: #3b2a00;
}

.axis-chip-pastel[aria-pressed="true"] {
	background: linear-gradient(120deg, #ffd6e8, #e0d4ff 55%, #cdf1ff);
	color: #4b2a63;
}

.axis-select {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 280px;
	min-width: 0;
	font-size: 12px;
	font-weight: 800;
	color: var(--axis-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.axis-select > span {
	flex: 0 0 auto;
	white-space: nowrap;
}

.axis-select select {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--axis-ink);
	padding: 9px 34px 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--axis-line);
	background: #fff;
	text-overflow: ellipsis;
}

.axis-count {
	margin: 0 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--axis-muted);
}

.axis-noresults,
.axis-empty {
	text-align: center;
	padding: 40px 0;
	color: var(--axis-muted);
}

/* ---------- Grid + cards ---------- */

.axis-grid {
	display: grid;
	grid-template-columns: repeat(var(--axis-cols), minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}

.axis-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px 18px 22px;
	border-radius: var(--axis-radius);
	background: var(--axis-card);
	border: 1px solid var(--axis-line);
	overflow: hidden;
	text-align: center;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.axis-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--axis-frame);
	opacity: 0;
	transition: opacity 0.22s ease;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.axis-card:hover,
.axis-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 28px 50px -28px rgba(18, 8, 42, 0.55);
}

.axis-card:hover::after,
.axis-card:focus-within::after { opacity: 1; }

.axis-card-open {
	position: absolute;
	inset: 0;
	z-index: 4;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: inherit;
}

.axis-card-open:focus-visible {
	outline: 3px solid var(--axis-purple);
	outline-offset: 3px;
}

/* Gradient photo frame */
.axis-card-frame {
	position: relative;
	width: 100%;
	max-width: 240px;
	margin: 0 auto 16px;
	padding: 5px;
	border-radius: 20px;
	background: var(--axis-frame);
}

.axis-card-photo {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #f2eefb;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.axis-card-photo img,
.axis-modal-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.axis-card-initials {
	font-size: 46px;
	font-weight: 800;
	color: var(--axis-purple);
}

/* Gold frame gets a glow + shimmer */
.axis-frame-gold .axis-card-frame,
.axis-frame-gold.axis-modal-frame {
	box-shadow: 0 0 0 1px rgba(255, 184, 48, 0.45), 0 14px 34px -14px rgba(212, 160, 23, 0.85);
}

.axis-frame-gold .axis-card-frame::before {
	content: "";
	position: absolute;
	inset: -40%;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%);
	animation: axis-shimmer 5.5s ease-in-out infinite;
	pointer-events: none;
	border-radius: inherit;
}

@keyframes axis-shimmer {
	0%, 65% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}

/* Agency Owner frame — a slowly rotating jewel ring + crown medallion.
   The angle animates through a registered custom property; browsers without
   @property support fall back to a static ring, which still looks right. */
@property --axis-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.axis-frame-owner .axis-card-frame,
.axis-modal-frame.axis-frame-owner {
	padding: 6px;
	background: conic-gradient(
		from var(--axis-angle, 0deg),
		#12082a 0%,
		#a855f7 15%,
		#f72585 32%,
		#ffb830 50%,
		#00c8ff 68%,
		#a855f7 85%,
		#12082a 100%
	);
	box-shadow:
		0 0 0 1px rgba(255, 184, 48, 0.55),
		0 18px 44px -18px rgba(168, 85, 247, 0.9);
	animation: axis-ring-turn 12s linear infinite;
}

.axis-frame-owner .axis-card-frame { margin-bottom: 30px; }

@keyframes axis-ring-turn {
	to { --axis-angle: 360deg; }
}

.axis-crown {
	position: absolute;
	left: 50%;
	bottom: -19px;
	transform: translateX(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 7px;
	border-radius: 50%;
	background: #fff;
	color: #a97800;
	box-shadow:
		0 0 0 2px #ffb830,
		0 0 0 5px #fff,
		0 8px 18px -8px rgba(18, 8, 42, 0.75);
}

.axis-crown-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.axis-modal-frame.axis-frame-owner {
	position: relative;
	margin-bottom: 30px;
}

.axis-modal-frame.axis-frame-owner .axis-crown {
	box-shadow: 0 0 0 2px #ffb830;
}

.axis-card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
}

.axis-card-name {
	margin: 0 0 2px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--axis-navy);
}

.axis-card-role {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--axis-purple);
}

.axis-card-tagline {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--axis-muted);
}

/* Specialty tags — small, colour-coded, one colour per specialty. */
.axis-spec-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.axis-spec-tag {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--tag, #5f3dc4);
	background: var(--tag-bg, rgba(95, 61, 196, 0.11));
	border: 1px solid var(--tag-br, rgba(95, 61, 196, 0.32));
}

.axis-spec-tags-sm {
	justify-content: center;
}

.axis-spec-tags-sm .axis-spec-tag {
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
}

.axis-spec-more {
	color: var(--axis-muted);
	background: rgba(18, 8, 42, 0.06);
	border-color: rgba(18, 8, 42, 0.12);
}

.axis-booked {
	align-self: center;
	max-width: 100%;
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--axis-navy);
	background: linear-gradient(120deg, rgba(255, 184, 48, 0.22), rgba(247, 37, 133, 0.14));
	border-radius: 999px;
	padding: 7px 14px;
	display: inline-block;
}

.axis-booked strong { color: var(--axis-pink); }

.axis-booked-lg {
	display: block;
	text-align: center;
	font-size: 14px;
	margin: 0 0 16px;
}

.axis-card-cta {
	display: block;
	width: 100%;
	margin-top: auto;
	padding-top: 2px;
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--axis-pink);
}

.axis-card-cta::after {
	content: " →";
	transition: margin 0.18s ease;
}

.axis-card:hover .axis-card-cta::after { margin-left: 4px; }

/* ---------- Award bars ----------
   Straight, stacked, centred under the photo. They wrap instead of clipping,
   so the full wording is always readable however long it is, and two awards
   stack cleanly instead of colliding in the corners. */

.axis-card-awards {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 5px;
	width: 100%;
}

.axis-award-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 7px 12px;
	border-radius: 10px;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: 0.07em;
	line-height: 1.35;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
}

.axis-award-bar svg {
	flex: 0 0 auto;
	opacity: 0.85;
}

.axis-award-bar-gold {
	background: linear-gradient(100deg, #ffdf9b, #ffb830 55%, #f0a505);
	color: #402d05;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.axis-award-bar-pastel {
	background: linear-gradient(100deg, #ffd6e8, #e6d6ff 52%, #cdf1ff);
	color: #4a2b66;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---------- Modal ---------- */

.axis-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}

.axis-modal[hidden] { display: none; }

.axis-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 5, 28, 0.72);
	backdrop-filter: blur(6px);
	animation: axis-fade 0.2s ease;
}

.axis-modal-panel {
	position: relative;
	width: min(1020px, 100%);
	max-height: min(90vh, 900px);
	overflow: auto;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
	animation: axis-pop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
	-webkit-overflow-scrolling: touch;
}

@keyframes axis-fade { from { opacity: 0; } }
@keyframes axis-pop {
	from { opacity: 0; transform: translateY(18px) scale(0.97); }
}

.axis-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--axis-navy);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 8px 18px -8px rgba(0, 0, 0, 0.7);
}

.axis-modal-close:hover,
.axis-modal-close:focus-visible {
	background: var(--axis-pink);
	color: #fff;
}

.axis-modal-grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
}

.axis-modal-aside {
	padding: 30px 26px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(168, 85, 247, 0.55), transparent 60%),
		linear-gradient(180deg, #1c0f3f 0%, var(--axis-navy) 100%);
}

.axis-modal-frame {
	width: 176px;
	margin: 0 auto 18px;
	padding: 5px;
	border-radius: 50%;
	background: var(--axis-frame);
}

.axis-modal-photo {
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #2a1a52;
	display: flex;
	align-items: center;
	justify-content: center;
}

.axis-modal-name {
	margin: 0 0 3px;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
}

.axis-modal-role {
	margin: 0 0 16px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--axis-gold);
}

.axis-modal-meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 14px;
	text-align: left;
}

.axis-modal-meta li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.86);
	word-break: break-word;
}

.axis-modal-meta svg { flex: 0 0 auto; color: var(--axis-cyan); }
.axis-modal-meta a { color: #fff; text-decoration: underline; }

.axis-available {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	background: rgba(0, 200, 255, 0.15);
	color: #9beaff;
}

.axis-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #38f5a8;
	box-shadow: 0 0 0 4px rgba(56, 245, 168, 0.22);
}

.axis-modal-aside .axis-booked {
	background: rgba(255, 184, 48, 0.16);
	color: #ffe3a8;
}

.axis-modal-aside .axis-booked strong { color: var(--axis-gold); }

.axis-modal-actions {
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.axis-modal-actions .axis-btn-secondary {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.axis-modal-actions .axis-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

.axis-mini-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.axis-socials ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.axis-socials a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: all 0.18s ease;
}

.axis-socials a:hover {
	background: linear-gradient(120deg, var(--axis-pink), var(--axis-purple));
	transform: translateY(-2px);
	color: #fff;
}

/* Share block, in the navy sidebar under the social row. */
.axis-share {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.axis-modal .axis-share-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s ease;
}

.axis-modal .axis-share-toggle:hover,
.axis-modal .axis-share-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.18) !important;
	border-color: #fff !important;
}

.axis-share-menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.axis-share-menu[hidden] { display: none; }

.axis-modal .axis-share-opt {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

.axis-modal .axis-share-opt:hover,
.axis-modal .axis-share-opt:focus-visible {
	background: linear-gradient(120deg, var(--axis-pink), var(--axis-purple)) !important;
	transform: translateY(-2px);
}

.axis-share-note {
	margin: 10px 0 0;
	min-height: 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: #9beaff;
	word-break: break-all;
}

.axis-modal-main { padding: 34px 32px 34px; }

.axis-modal-awards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.axis-award {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.axis-award-gold {
	background: linear-gradient(100deg, #ffe9b0, #ffb830);
	color: #45300a;
}

.axis-award-pastel {
	background: linear-gradient(100deg, #ffd6e8, #e0d4ff 55%, #cdf1ff);
	color: #4a2b66;
}

.axis-modal-block { margin-bottom: 26px; }

.axis-block-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--axis-muted);
}

.axis-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--axis-gold);
}

.axis-bio p {
	margin: 0 0 12px;
	color: #443c5c;
	font-size: 15.5px;
}

.axis-tags,
.axis-certs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.axis-tags li,
.axis-certs li {
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(18, 8, 42, 0.05);
	font-size: 13px;
	font-weight: 600;
	color: var(--axis-navy);
}

.axis-certs li {
	background: rgba(255, 184, 48, 0.16);
	color: #7a5300;
}

.axis-reviews {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.axis-review {
	position: relative;
	padding: 16px 18px;
	border-radius: 16px;
	background: #faf8ff;
	border: 1px solid var(--axis-line);
}

.axis-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--axis-gold);
	margin-bottom: 6px;
}

.axis-review-text {
	margin: 0 0 8px;
	font-size: 15px;
	color: #443c5c;
}

.axis-review-by {
	margin: 0;
	font-size: 13px;
	color: var(--axis-muted);
}

.axis-review-by strong { color: var(--axis-navy); }
.axis-review-by span::before { content: " · "; }

body.axis-modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.axis-grid { grid-template-columns: repeat(min(var(--axis-cols), 3), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.axis-owner { grid-template-columns: 1fr; }
	.axis-owner-photo { order: -1; max-width: 420px; margin: 0 auto; }
	.axis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.axis-modal-grid { grid-template-columns: 1fr; }
	.axis-modal-main { padding: 26px 22px 30px; }
	.axis-count { margin-left: 0; }
}

@media (max-width: 560px) {
	.axis-grid { grid-template-columns: 1fr; }
	.axis-card-frame { max-width: 260px; }
	.axis-card-awards { max-width: 320px; margin-inline: auto; }
	.axis-modal { padding: 0; }
	.axis-modal-panel { border-radius: 0; max-height: 100vh; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.axis-team *,
	.axis-modal * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Theme guard ----------
   Some themes (and Elementor) style bare <button> elements with a filled
   background at a specificity that beats a single class. The card's open
   button covers the whole card, so a stray theme background paints over the
   photo and the name. These rules re-assert our own styling and win on
   specificity without needing !important anywhere except the invisible
   overlay button, where transparency is not negotiable. */

.axis-team button,
.axis-modal button {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	min-height: 0;
}

.axis-team .axis-card .axis-card-open,
.axis-team .axis-card .axis-card-open:hover,
.axis-team .axis-card .axis-card-open:focus,
.axis-team .axis-card .axis-card-open:active {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit;
	border-radius: inherit;
	text-shadow: none;
}

.axis-team .axis-filters .axis-chip {
	background: #fff;
	color: var(--axis-ink);
	border: 1px solid var(--axis-line);
	box-shadow: none;
	padding: 9px 16px;
	border-radius: 999px;
}

.axis-team .axis-filters .axis-chip[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--axis-pink), var(--axis-purple));
	border-color: transparent;
	color: #fff;
}

.axis-team .axis-filters .axis-chip-gold[aria-pressed="true"] {
	background: linear-gradient(120deg, #b8860b, #ffd76a 45%, #ffb830);
	color: #3b2a00;
}

.axis-team .axis-filters .axis-chip-pastel[aria-pressed="true"] {
	background: linear-gradient(120deg, #ffd6e8, #e0d4ff 55%, #cdf1ff);
	color: #4b2a63;
}

.axis-team button.axis-link-btn {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	color: var(--axis-purple);
}

.axis-modal button.axis-modal-close {
	background: var(--axis-navy) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 8px 18px -8px rgba(0, 0, 0, 0.7) !important;
	padding: 0 !important;
	opacity: 1 !important;
}

.axis-modal button.axis-modal-close svg {
	fill: currentColor !important;
	color: #fff !important;
}

.axis-modal button.axis-modal-close:hover,
.axis-modal button.axis-modal-close:focus {
	background: var(--axis-pink) !important;
	color: #fff !important;
}

/* Theme rules like `img { height: auto }` can collapse the framed photo. */
.axis-team .axis-card-photo img,
.axis-modal .axis-modal-photo img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.axis-card-photo,
.axis-modal-photo {
	min-height: 120px;
}

/* ---------- Theme guard, part two ----------
   The theme styles <select> and <input> with !important, which was crushing
   the filter dropdowns to about 60px and tinting the search field teal.
   Matching !important here is the only thing that wins, so geometry and
   colour are locked down and the native dropdown arrow is replaced with our
   own so it can never overlap the label text. */

.axis-team .axis-filters .axis-filter-row {
	align-items: center;
}

.axis-team .axis-filters .axis-select {
	display: flex !important;
	flex: 1 1 100% !important;
	align-items: center;
	gap: 12px;
	min-width: 0 !important;
	max-width: 620px !important;
	max-width: none !important;
}

.axis-team .axis-filters .axis-select > span {
	flex: 0 0 auto;
	white-space: nowrap;
}

.axis-team .axis-filters .axis-select select {
	flex: 1 1 auto !important;
	display: block !important;
	width: 100% !important;
	min-width: 300px !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 40px 10px 16px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	text-transform: none !important;
	font-variant: normal !important;
	letter-spacing: normal !important;
	text-indent: 0 !important;
	text-overflow: ellipsis;
	color: var(--axis-ink) !important;
	border: 1px solid var(--axis-line) !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: rgba(18, 8, 42, 0.18) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	outline: 0 !important;
	outline-offset: 2px;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b6480'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
}

.axis-team .axis-filters .axis-select select:focus {
	border-color: var(--axis-purple) !important;
	outline: 2px solid var(--axis-purple);
}

/* Search field: keep the pill white, whatever the theme does to inputs. */
.axis-team .axis-filters .axis-search {
	flex: 1 1 100% !important;
	background: #fff !important;
	border: 1px solid var(--axis-line) !important;
	border-radius: 999px !important;
	padding: 0 16px !important;
}

.axis-team .axis-filters .axis-search input,
.axis-team .axis-filters .axis-search input[type="search"] {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--axis-ink) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* The open dropdown is drawn by the browser; these are the only parts of it
   that CSS can reach, and they stop the theme's tint appearing in the list. */
.axis-team .axis-filters .axis-select select option {
	background-color: #fff !important;
	color: var(--axis-ink) !important;
	text-transform: none !important;
	font-size: 15px !important;
	padding: 8px 12px !important;
}

@media (max-width: 700px) {
	.axis-team .axis-filters .axis-select {
		flex-wrap: wrap;
		max-width: none !important;
	}

	.axis-team .axis-filters .axis-select select {
		min-width: 0 !important;
	}
}

/* ---------- Standalone agent page (/agents/name/) ----------
   The same profile markup as the popup, unpinned from the overlay. */

.axis-profile-wrap {
	padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 40px);
}

.axis-profile {
	max-width: 1020px;
	margin: 0 auto;
}

.axis-profile-panel {
	border-radius: 26px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 34px 70px -40px rgba(18, 8, 42, 0.6);
	border: 1px solid var(--axis-line);
}

.axis-profile .axis-modal-grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
}

.axis-profile .axis-modal-aside {
	padding: 36px 28px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(168, 85, 247, 0.55), transparent 60%),
		linear-gradient(180deg, #1c0f3f 0%, var(--axis-navy) 100%);
}

.axis-profile .axis-modal-main {
	padding: 40px 36px;
}

.axis-profile-back {
	margin: 22px 0 0;
	text-align: center;
	font-weight: 700;
}

.axis-profile-back a {
	color: var(--axis-purple);
	text-decoration: none;
}

.axis-profile-back a:hover { text-decoration: underline; }

.axis-fullpage-link {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	color: #9beaff;
	text-decoration: underline;
}

.axis-fullpage-link:hover { color: #fff; }

@media (max-width: 900px) {
	.axis-profile .axis-modal-grid { grid-template-columns: 1fr; }
	.axis-profile .axis-modal-main { padding: 28px 22px 34px; }
}

/* Optional card lines */
.axis-card-location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--axis-muted);
}

.axis-card-location svg { color: var(--axis-pink); }

.axis-card-langs {
	margin: 0 0 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 200, 255, 0.12);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #0b6a85;
}