/**
 * 220 Listings — Staff Profiles Stylesheet
 *
 * Owns every Staff Profile shortcode and template:
 *   • Vertical card grid + horizontal card list
 *   • Card Profile single (default layout)
 *   • Prestige Profile, Private Bank Profile, Hero Profile singles
 *
 * Lazy-loaded by AssetLoader::has_staff_content() — only enqueued when
 * the page surfaces Staff content (singular, archive, or shortcode).
 *
 * Colors reference --220-color-* custom properties set by the plugin
 * Settings page (see ColorSettings.php).
 *
 * Companion stylesheets:
 *   • 220-listings-shared.css — Buttons, contact links, social, pagination, a11y
 *
 * @package TwoTwenty\Listings
 */

/* ==========================================================================
   Staff List · Vertical Card Grid
   --------------------------------------------------------------------------
   Default [220_staff_list] layout. Responsive 1–4 column CSS grid of
   .twotwenty-vcard tiles (photo + identity + contact rows + CTA).
   ========================================================================== */

/* Cap each card's width via minmax(0, …) so rows with fewer cards
 * than columns center cleanly instead of stretching to fill the
 * row. justify-content:center pulls partial rows toward the middle
 * of the grid container. (T2 / round 1 — handles the 1–2 staff case
 * gracefully.) */
.twotwenty-layout-vertical-card {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 280px));
	justify-content: center;
	gap: 22px;
	padding: 0;
	margin: 0 20px 32px;
}

.twotwenty-layout-vertical-card.twotwenty-columns-1 { grid-template-columns: minmax(0, 320px); }
.twotwenty-layout-vertical-card.twotwenty-columns-2 { grid-template-columns: repeat(2, minmax(0, 320px)); }
.twotwenty-layout-vertical-card.twotwenty-columns-3 { grid-template-columns: repeat(3, minmax(0, 280px)); }
.twotwenty-layout-vertical-card.twotwenty-columns-4 { grid-template-columns: repeat(4, minmax(0, 280px)); }

/* Card shell */
.twotwenty-vcard {
	background: #ffffff;
	border-radius: var(--220-radius, 10px);
	border: 1px solid var(--220-color-border, #e2e2e8);
	box-shadow: var(--220-shadow, 0 2px 8px rgba(0,0,0,0.07));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.twotwenty-vcard:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,0.12);
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--220-color-border, #e2e2e8) 60%, var(--220-color-primary, #2D5F8A));
}

/* Photo */
.twotwenty-vcard-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--220-color-primary, #2D5F8A);
}

/* Blurred, scaled-up copy of the same photo fills the letterboxed space
   left by object-fit: contain on tall/wide/square uploads. Only paints
   when the template sets --220-photo-bg (i.e. a real photo exists);
   otherwise it's transparent and the solid background shows through. */
.twotwenty-vcard-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(18px);
	transform: scale(1.15);
}

.twotwenty-vcard-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.4s ease;
}

.twotwenty-vcard:hover .twotwenty-vcard-img {
	transform: scale(1.04);
}

.twotwenty-vcard-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		160deg,
		var(--220-color-primary, #2D5F8A),
		color-mix(in srgb, var(--220-color-primary, #2D5F8A) 75%, black)
	);
	color: rgba(255, 255, 255, 0.18);
}

/* Specialty badge */
.twotwenty-vcard-badge {
	position: absolute;
	z-index: 2;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.93);
	color: color-mix(in srgb, var(--220-color-accent, #c9972b) 80%, black);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
}

/* Accent bar */
.twotwenty-vcard-bar {
	height: 3px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black),
		var(--220-color-accent, #c9972b),
		color-mix(in srgb, var(--220-color-accent, #c9972b) 80%, white)
	);
	flex-shrink: 0;
}

/* Card body */
.twotwenty-vcard-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	text-align: center;
}

.twotwenty-vcard-name {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--220-staff-name, var(--220-color-primary, #2D5F8A));
	margin: 0 0 3px;
	line-height: 1.25;
	text-wrap: pretty;
}

.twotwenty-vcard-position {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--220-staff-position, var(--220-color-accent, #c9972b));
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 5px;
}

.twotwenty-vcard-license {
	font-size: 0.8em;
	color: var(--220-color-secondary, #777777);
	margin: 0 0 4px;
}

.twotwenty-vcard-license strong {
	font-weight: 600;
	color: var(--220-color-secondary, #555555);
}

.twotwenty-vcard-divider {
	height: 1px;
	background: var(--220-color-border, #e2e2e8);
	margin: 8px 0 16px;
}

.twotwenty-vcard-bio {
	font-size: 0.85em;
	color: var(--220-color-secondary, #555555);
	line-height: 1.65;
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}

/* Social icon row that replaces the mini bio on the vertical card.
 * (T1 / feedback round 1.) */
.twotwenty-vcard-socials {
	margin: 0 0 12px;
}
.twotwenty-vcard-socials .twotwenty-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
/* !important on color here (and on every other .twotwenty-social-icon rule
   below) because when this list renders inside a Beaver Builder row/module,
   its global link-color rule — .fl-builder-content a:not(.fl-builder-submenu-link)
   — has higher specificity (adds a bare "a" type selector) than our two-class
   selector and would otherwise win, same as the CTA button !importants
   elsewhere in this file. */
.twotwenty-vcard-socials .twotwenty-social-icon {
	display: inline-flex;
	padding: 5px;
	border-radius: var(--220-social-icon-radius, 6px);
	color: var(--220-social-icon-color, currentColor) !important;
	background: var(--220-social-icon-bg, transparent);
	transition: background 0.15s, color 0.15s;
}
.twotwenty-vcard-socials .twotwenty-social-icon:hover {
	color: var(--220-social-icon-hover-color, currentColor) !important;
	background: var(--220-social-icon-bg-hover, transparent);
}

/* Contact rows */
.twotwenty-vcard-contacts {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 16px;
}

.twotwenty-vcard-contact-row {
	font-size: 0.85em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Small inline glyph used by list-card phone/email rows where the
 * helper-rendered link no longer carries its own SVG (B1). Distinct
 * from .twotwenty-contact-icon (the chunky 28px contact-strip badge). */
.twotwenty-contact-glyph {
	flex-shrink: 0;
	color: var(--220-color-primary, #2D5F8A);
}

.twotwenty-card-phone,
.twotwenty-card-email {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* CTA */
.twotwenty-vcard-cta {
	margin-top: auto;
}

.twotwenty-vcard-cta .twotwenty-btn-primary {
	background: var(--220-staff-btn-bg, var(--220-color-primary, #2D5F8A));
	color: var(--220-staff-btn-text, #ffffff) !important;
	border-color: var(--220-staff-btn-border, transparent);
}

.twotwenty-vcard-cta .twotwenty-btn-primary:hover,
.twotwenty-vcard-cta .twotwenty-btn-primary:focus-visible {
	background: var(--220-staff-btn-bg-hover, color-mix(in srgb, var(--220-color-primary, #2D5F8A) 83%, black));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, transparent));
}

/* ==========================================================================
   Whole-card click target (staff cards)

   Each staff layout (vertical, horizontal, minimal grid) has a primary
   "View Profile" / "Learn More" anchor inside the card. The ::after
   pseudo-element on that anchor is sized to cover the whole card via
   inset: 0, so a click anywhere on the card surface navigates to the
   profile permalink. Phone, email, and social-icon links sit above the
   overlay via z-index so they keep their direct-action behavior
   (tel:, mailto:, external link) without being intercepted.
   ========================================================================== */

.twotwenty-vcard,
.twotwenty-card.twotwenty-staff-card,
.twotwenty-card.twotwenty-staff-card-minimal {
	position: relative;
	cursor: pointer;
}

.twotwenty-vcard .twotwenty-vcard-cta > a::after,
.twotwenty-card.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary::after,
.twotwenty-card.twotwenty-staff-card-minimal > .twotwenty-card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.twotwenty-vcard-contact-row a,
.twotwenty-vcard-socials a,
.twotwenty-card-phone a,
.twotwenty-card-email a,
.twotwenty-card-email-minimal a {
	position: relative;
	z-index: 2;
}

.twotwenty-card.twotwenty-staff-card,
.twotwenty-card.twotwenty-staff-card-minimal {
	transition: box-shadow 0.2s ease;
}
.twotwenty-card.twotwenty-staff-card:hover,
.twotwenty-card.twotwenty-staff-card-minimal:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.twotwenty-card.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary {
	background: var(--220-staff-btn-bg, var(--220-color-primary, #2D5F8A));
	color: var(--220-staff-btn-text, #ffffff) !important;
	border-color: var(--220-staff-btn-border, transparent);
}

.twotwenty-card.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary:hover,
.twotwenty-card.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary:focus-visible {
	background: var(--220-staff-btn-bg-hover, color-mix(in srgb, var(--220-color-primary, #2D5F8A) 83%, black));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, transparent));
}

/* ==========================================================================
   Staff List · Horizontal Info Card List
   --------------------------------------------------------------------------
   [220_staff_list layout="horizontal-card"] / Settings → Staff List Layout.
   Responsive grid (1–4 columns, default 2) of wide .twotwenty-staff-card
   rows: square photo on the left, identity + contact + CTA on the right.
   Used by list-horizontal-card.php.
   ========================================================================== */
/* Scoped with the .twotwenty-staff-list ancestor class (always present
 * alongside .twotwenty-layout-horizontal-card on the real staff-list
 * wrapper, see list-horizontal-card.php) — NOT just .twotwenty-layout-
 * horizontal-card alone. The Recommended Professional list templates
 * reuse that exact same layout class name on their own <ul> for a
 * completely different (flex-based) layout; without this qualifier,
 * whichever of 220-listings-staff.css / 220-listings-recommended-
 * professionals.css happens to load later would silently clobber the
 * other's rendering whenever both stylesheets are active on the same
 * page — exactly what a staff profile's "Assigned Recommended
 * Professionals" block causes for the first time. */
.twotwenty-staff-list.twotwenty-layout-horizontal-card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	gap: 20px;
	padding: 0;
	margin: 0 20px 32px;
}

.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-1 { grid-template-columns: minmax(0, 720px); }
.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Wraps each horizontal card as the query container. A @container rule
   can only restyle DESCENDANTS of its container, never the container
   element itself — so the card can't be its own query container if we
   want the query to change the card's own flex-direction. This wrapper
   is the container; the card (and everything in it) is the descendant
   the query below actually restyles. Lets the query react to how narrow
   THIS card has actually rendered (e.g. a 3-4 column grid can squeeze
   each card well below its viewport-width breakpoint even on a large
   screen), rather than only the page's own @media breakpoints. */
.twotwenty-staff-hcard-cell {
	container-type: inline-size;
	container-name: staff-hcard;
}

.twotwenty-card.twotwenty-staff-card {
	display: flex;
	align-items: stretch;
	height: 100%;
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: var(--220-radius, 10px);
	box-shadow: var(--220-shadow, 0 2px 8px rgba(0,0,0,0.07));
	overflow: hidden;
}

.twotwenty-staff-card > .twotwenty-card-photo {
	/* Scales smoothly with the card's own width (cqi = 1% of the query
	   container's inline-size — see .twotwenty-staff-hcard-cell): 35% of
	   the card, floored at 200px (reached at 571px, comfortably above the
	   430px @container stack point further down, so a normal 2-column
	   card just settles at this floor instead of ever needing to stack).
	   A 1-column card tops out at 720px (250px photo) since its own grid
	   track is capped there, but 2-4 column cards can render much wider
	   on a big screen -- this keeps scaling up with them (with a generous
	   380px backstop) instead of flatlining at a size that looks tiny
	   against a much wider card. The @container rule further down
	   overrides this with a plain 100% once actually stacked. */
	width: clamp(200px, 35cqi, 380px);
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	align-self: center;
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		160deg,
		var(--220-color-primary, #2D5F8A),
		color-mix(in srgb, var(--220-color-primary, #2D5F8A) 75%, black)
	);
}

/* Blurred, scaled-up copy of the same photo fills the letterboxed space
   left by object-fit: contain — same treatment as the vertical card and
   minimal grid (and Recommended Professionals). Keeps the whole photo
   visible instead of cropping it to fill the frame. Only paints when the
   template sets --220-photo-bg (a real photo exists). */
.twotwenty-staff-card > .twotwenty-card-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(16px);
	transform: scale(1.15);
}

.twotwenty-staff-card > .twotwenty-card-photo .twotwenty-card-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twotwenty-staff-card > .twotwenty-card-photo .twotwenty-card-img-placeholder {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.22);
}

.twotwenty-staff-card > .twotwenty-card-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	/* Name/position/license/contact rows/button below are all sized in em
	   (or inherit this font-size), so they scale together as one unit — a
	   16px floor (reached at 601px, comfortably above the 430px
	   @container stack point further down, so a normal 2-column card
	   just settles here instead of ever needing to stack), growing with
	   the card up to a 22px ceiling so text keeps real presence on wider
	   2-4 column cards instead of flatlining at a size that looks small
	   against them. Bounds are px, not rem: rem is relative to the
	   theme's <html> font-size, which themes/page builders often reset
	   to something other than the assumed 16px (e.g. the common 62.5%
	   trick), which would silently shrink or grow every bound here. */
	font-size: clamp(16px, 2.66cqi, 22px);
	/* !important: themes commonly force center-aligned text on headings/
	   paragraphs inside their content area (e.g. Beaver Builder rich-text
	   defaults), which otherwise beats plain inheritance from this
	   container on large screens where left alignment is intended. */
	text-align: left !important;
}

.twotwenty-staff-card .twotwenty-card-name {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--220-staff-name, var(--220-color-primary, #2D5F8A));
	margin: 0 0 3px;
	line-height: 1.25;
	text-wrap: pretty;
	text-align: left !important;
}

.twotwenty-staff-card .twotwenty-card-position {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--220-staff-position, var(--220-color-accent, #c9972b));
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 5px;
	text-align: left !important;
}

.twotwenty-staff-card .twotwenty-card-license {
	font-size: 0.8em;
	color: var(--220-color-secondary, #777777);
	margin: 0 0 4px;
	text-align: left !important;
}

.twotwenty-staff-card .twotwenty-card-phone,
.twotwenty-staff-card .twotwenty-card-email {
	font-size: 0.85em;
	color: var(--220-color-secondary, #555555);
	margin: 5px 0 0;
	justify-content: flex-start !important;
}

.twotwenty-staff-card .twotwenty-card-phone a,
.twotwenty-staff-card .twotwenty-card-email a {
	color: inherit;
	text-decoration: none;
}

.twotwenty-staff-card .twotwenty-card-phone a:hover,
.twotwenty-staff-card .twotwenty-card-email a:hover {
	text-decoration: underline;
}

.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary {
	margin-top: auto;
	align-self: flex-end;
	/* em, not px, so the button shrinks in step with the fluid content
	   font-size above instead of staying a fixed size while the text
	   around it scales down. */
	padding: 0.5em 1em;
}

/* ==========================================================================
   Staff List · Minimal Card Grid
   --------------------------------------------------------------------------
   [220_staff_list layout="minimal-grid"] / Settings → Staff List Layout.
   Compact grid (1–4 columns, default 3): square photo, name, position, and
   an email row beneath. Used by list-minimal-grid.php.
   ========================================================================== */
/* Scoped with .twotwenty-staff-list — see the matching comment on
 * .twotwenty-layout-horizontal-card above for why (the Recommended
 * Professional Minimal Grid template reuses this exact same class name
 * on its own <ul>). */
.twotwenty-staff-list.twotwenty-layout-minimal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 240px));
	justify-content: center;
	gap: 20px;
	padding: 0;
	margin: 0 20px 32px;
}

.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-1 { grid-template-columns: minmax(0, 320px); }
.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-3 { grid-template-columns: repeat(3, minmax(0, 240px)); }
.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-4 { grid-template-columns: repeat(4, minmax(0, 220px)); }

.twotwenty-card.twotwenty-staff-card-minimal {
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: var(--220-radius, 10px);
	box-shadow: var(--220-shadow, 0 2px 8px rgba(0,0,0,0.07));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.twotwenty-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.twotwenty-card-photo-minimal {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		160deg,
		var(--220-color-primary, #2D5F8A),
		color-mix(in srgb, var(--220-color-primary, #2D5F8A) 75%, black)
	);
}

.twotwenty-card-photo-minimal::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(16px);
	transform: scale(1.15);
}

.twotwenty-card-photo-minimal .twotwenty-card-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twotwenty-card-photo-minimal .twotwenty-card-img-placeholder {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.22);
}

.twotwenty-card-content-minimal {
	padding: 14px 16px 12px;
	text-align: center;
}

.twotwenty-card-content-minimal .twotwenty-card-name {
	font-size: 1em;
	font-weight: 700;
	color: var(--220-staff-name, var(--220-color-primary, #2D5F8A));
	margin: 0 0 2px;
	line-height: 1.25;
	text-wrap: pretty;
}

.twotwenty-card-content-minimal .twotwenty-card-position {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--220-staff-position, var(--220-color-accent, #c9972b));
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0;
}

.twotwenty-card-phone-minimal,
.twotwenty-card-email-minimal {
	justify-content: center;
	padding: 2px 16px;
	font-size: 0.8em;
	color: var(--220-color-secondary, #555555);
}

.twotwenty-card-phone-minimal:last-child,
.twotwenty-card-email-minimal:last-child {
	padding-bottom: 14px;
}

.twotwenty-card-phone-minimal a,
.twotwenty-card-email-minimal a {
	color: inherit;
	text-decoration: none;
}

.twotwenty-card-phone-minimal a:hover,
.twotwenty-card-email-minimal a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Staff Single · Card Profile (default layout)
   --------------------------------------------------------------------------
   Hero banner + two-column body (photo/contact sidebar on the left, identity
   card and bio on the right). Used by templates/staff/single-card-profile.php
   when staff_single_layout = "card-profile".
   ========================================================================== */

.twotwenty-single-profile {
	padding: 0;
}

/* Hero banner */
.twotwenty-hero-banner {
	width: 100%;
	height: 220px;
	background: var(--220-color-primary, #2D5F8A);
	background-image: linear-gradient(
		135deg,
		var(--220-color-primary, #2D5F8A) 0%,
		color-mix(in srgb, var(--220-color-primary, #2D5F8A) 75%, black) 100%
	);
	position: relative;
}

/* Gold rule at banner bottom */
.twotwenty-hero-banner::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--220-color-accent, #c9972b),
		color-mix(in srgb, var(--220-color-accent, #c9972b) 80%, white),
		transparent
	);
}

/* Container */
.twotwenty-hero-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 28px 56px;
}

/* Hero text — overlaps banner bottom */
.twotwenty-hero-header {
	padding-top: 40px;
	margin-bottom: 28px;
}

.twotwenty-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--220-color-accent, #c9972b);
	margin-bottom: 10px;
}

.twotwenty-hero-eyebrow::before {
	content: '';
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}

.twotwenty-hero-name {
	font-size: 2em;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 6px;
	line-height: 1.15;
}

.twotwenty-hero-sub {
	font-size: 0.95em;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	font-weight: 300;
}

/* Two-column layout */
.twotwenty-profile-columns {
	display: grid;
	grid-template-columns: var(--220-staff-hero-sidebar-width, 240px) 1fr;
	gap: 0 32px;
	align-items: start;
}

/* ── Sidebar ── */
.twotwenty-profile-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Photo */
.twotwenty-profile-photo-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--220-radius, 10px);
	overflow: hidden;
	border: 3px solid #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	background: var(--220-color-bg-light, #f0f4ff);
}

.twotwenty-profile-photo-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(20px);
	transform: scale(1.15);
}

.twotwenty-profile-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twotwenty-profile-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		160deg,
		var(--220-color-primary, #2D5F8A),
		color-mix(in srgb, var(--220-color-primary, #2D5F8A) 75%, black)
	);
	color: rgba(255, 255, 255, 0.18);
}

/* Contact card */
.twotwenty-contact-card {
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: var(--220-radius, 10px);
	padding: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.twotwenty-contact-card-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--220-color-secondary, #888888);
	margin: 0 0 12px;
}

.twotwenty-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.twotwenty-contact-item:last-child {
	margin-bottom: 0;
}

.twotwenty-contact-icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--220-color-bg-light, #f0f4ff);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--220-color-primary, #2D5F8A);
}

.twotwenty-contact-detail {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.twotwenty-contact-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--220-color-secondary, #888888);
}

.twotwenty-contact-val {
	font-size: 0.88em;
	color: var(--220-color-secondary, #333333);
	text-decoration: none;
	word-break: break-word;
}

.twotwenty-contact-val:hover {
	color: var(--220-color-primary, #2D5F8A);
}

.twotwenty-address-line {
	display: block;
}

/* CTA */
.twotwenty-profile-cta {
	/* margin handled by sidebar gap */
}

.twotwenty-profile-cta-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-primary {
	background: var(--220-staff-btn-bg, var(--220-color-primary, #2D5F8A));
	color: var(--220-staff-btn-text, #ffffff) !important;
	border-color: var(--220-staff-btn-border, transparent);
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-primary:hover,
.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-primary:focus-visible {
	background: var(--220-staff-btn-bg-hover, color-mix(in srgb, var(--220-color-primary, #2D5F8A) 83%, black));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, transparent));
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-secondary {
	background: var(--220-staff-btn2-bg, transparent);
	color: var(--220-staff-btn2-text, var(--220-color-primary, #2D5F8A)) !important;
	border-color: var(--220-staff-btn2-border, var(--220-color-primary, #2D5F8A));
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-secondary:hover,
.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-secondary:focus-visible {
	background: var(--220-staff-btn2-bg-hover, var(--220-color-primary, #2D5F8A));
	color: var(--220-staff-btn2-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn2-border-hover, var(--220-staff-btn2-border, var(--220-color-primary, #2D5F8A)));
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-tertiary {
	background: var(--220-staff-btn3-bg, transparent);
	color: var(--220-staff-btn3-text, var(--220-color-primary, #2D5F8A)) !important;
	border-color: var(--220-staff-btn3-border, var(--220-color-primary, #2D5F8A));
}

.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-tertiary:hover,
.twotwenty-card-profile .twotwenty-profile-cta .twotwenty-btn-tertiary:focus-visible {
	background: var(--220-staff-btn3-bg-hover, var(--220-color-primary, #2D5F8A));
	color: var(--220-staff-btn3-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn3-border-hover, var(--220-staff-btn3-border, var(--220-color-primary, #2D5F8A)));
}

/* Social */
.twotwenty-profile-social-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--220-color-secondary, #888888);
	margin: 0 0 8px;
}

/* ── Main content ── */
.twotwenty-profile-main {
	padding-top: 16px;
}

/* Identity block — name / title / company / NMLS badge card */
.twotwenty-profile-identity {
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: var(--220-radius, 10px);
	padding: 24px 28px 20px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.twotwenty-profile-identity::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black),
		var(--220-color-accent, #c9972b),
		color-mix(in srgb, var(--220-color-accent, #c9972b) 80%, white)
	);
}

.twotwenty-profile-identity .twotwenty-license-badge {
	display: inline-flex;
	margin-bottom: 12px;
}

.twotwenty-profile-name {
	font-size: 2em;
	font-weight: 700;
	color: var(--220-color-primary, #2D5F8A);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 5px;
	text-wrap: pretty;
}

.twotwenty-profile-position {
	font-size: 0.82em;
	font-weight: 700;
	color: color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 3px;
}

.twotwenty-profile-company {
	font-size: 0.9em;
	color: var(--220-color-secondary, #555555);
	font-weight: 300;
}

/* License badge (standalone + inside identity block) */
.twotwenty-license-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: 100px;
	padding: 4px 14px;
	font-size: 0.85em;
	color: var(--220-color-secondary, #555555);
	margin-bottom: 20px;
}

.twotwenty-license-badge strong {
	color: var(--220-color-primary, #2D5F8A);
	font-weight: 700;
}

/* Bio section */
.twotwenty-profile-bio-heading {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--220-color-primary, #2D5F8A);
	margin: 0 0 14px;
	line-height: 1.2;
}

.twotwenty-profile-bio-content {
	font-size: 1em;
	line-height: 1.75;
	color: var(--220-color-secondary, #333333);
}

.twotwenty-profile-bio-content p {
	margin: 0 0 16px;
}

.twotwenty-profile-bio-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Staff List + Card Profile · Responsive Overrides
   --------------------------------------------------------------------------
   Breakpoint-driven adjustments for the vertical-card grid and the default
   single Card Profile. Variant-specific responsive rules for Prestige /
   Private / Hero singles live further down in their own block.
   ========================================================================== */

@media (max-width: 1024px) {
	.twotwenty-layout-vertical-card {
		grid-template-columns: repeat(2, 1fr);
	}

	.twotwenty-layout-vertical-card.twotwenty-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.twotwenty-staff-list.twotwenty-layout-horizontal-card,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-2,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-3,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.twotwenty-staff-list.twotwenty-layout-minimal-grid,
	.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Compound-scoped with .twotwenty-single-profile.twotwenty-hero-profile
	   (both classes live on the same wrapper element) so this genuinely
	   OUTRANKS the unconditional .twotwenty-hero-profile .twotwenty-profile-
	   columns rule further down the file — equal specificity would still
	   lose to it regardless of this @media block's condition, since that
	   rule sits later in source order than this one. */
	.twotwenty-single-profile.twotwenty-hero-profile .twotwenty-profile-columns {
		grid-template-columns: 200px 1fr;
		gap: 0 24px;
	}

	.twotwenty-hero-container {
		padding: 0 20px 40px;
	}
}

/* Stack the photo above the content only once the card gets genuinely
   cramped -- both the photo (floors at 200px below 571px) and the text
   (floors at 16px below 601px) are already sitting at their comfortable
   minimum well above this threshold, so a normal 2-column desktop card
   stays side-by-side and just leans on that fluid floor instead of
   flipping to the full-width stacked layout. This is a safety net for
   the extreme case (3-4 columns squeezing a card well below that,
   even on a wide screen), not the everyday 2-column behavior. Runs
   independently of the page-level @media breakpoints below. Placed
   after the theme-conflict text-align/justify-content !important fixes
   above so its own !important rules can still win here. */
@container staff-hcard (max-width: 430px) {
	.twotwenty-card.twotwenty-staff-card {
		flex-direction: column;
	}

	.twotwenty-staff-card > .twotwenty-card-photo {
		width: 100%;
		min-width: 0;
		aspect-ratio: 1 / 1;
	}

	/* Once stacked, the photo is full-width, so it can end up much bigger
	   than the base rule's side-by-side sizing ever anticipated -- text
	   sized for a cramped strip next to a photo looks lost under a large
	   square photo. Rescale text against the stacked card's own width
	   (up to 430px, the widest a stacked card gets now) instead of
	   leaving it pinned at the narrow-phone floor regardless of how much
	   room a moderately-narrow stacked column actually has. */
	.twotwenty-staff-card > .twotwenty-card-content {
		font-size: clamp(16px, 5.5cqi - 1.6px, 22px);
	}

	.twotwenty-staff-card > .twotwenty-card-content,
	.twotwenty-staff-card .twotwenty-card-name,
	.twotwenty-staff-card .twotwenty-card-position,
	.twotwenty-staff-card .twotwenty-card-license {
		text-align: center !important;
	}

	.twotwenty-staff-card .twotwenty-card-phone,
	.twotwenty-staff-card .twotwenty-card-email {
		justify-content: center !important;
	}

	.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary {
		align-self: center;
		/* Undo the side-by-side layout's margin-top: auto (bottom-pin).
		   Two cards can still land in the same grid row here (stacking is
		   per-card, not per-row), and if the grid stretches a shorter card
		   to match a taller row-mate, auto would push the button to the
		   very bottom of that inflated height, stranding it far below the
		   text with a big gap. A fixed gap keeps it right after the
		   content regardless of the card's outer height. */
		margin-top: 14px;
	}
}

@media (max-width: 767px) {
	.twotwenty-layout-vertical-card,
	.twotwenty-layout-vertical-card.twotwenty-columns-2,
	.twotwenty-layout-vertical-card.twotwenty-columns-3,
	.twotwenty-layout-vertical-card.twotwenty-columns-4 {
		grid-template-columns: 1fr;
	}

	.twotwenty-staff-list.twotwenty-layout-horizontal-card,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-2,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-3,
	.twotwenty-staff-list.twotwenty-layout-horizontal-card.twotwenty-columns-4 {
		grid-template-columns: 1fr;
	}

	.twotwenty-card.twotwenty-staff-card {
		flex-direction: column;
	}

	.twotwenty-staff-card > .twotwenty-card-photo {
		width: 100%;
		aspect-ratio: 1 / 1;
	}

	.twotwenty-staff-card > .twotwenty-card-content,
	.twotwenty-staff-card .twotwenty-card-name,
	.twotwenty-staff-card .twotwenty-card-position,
	.twotwenty-staff-card .twotwenty-card-license {
		text-align: center !important;
	}

	.twotwenty-staff-card .twotwenty-card-phone,
	.twotwenty-staff-card .twotwenty-card-email {
		justify-content: center !important;
	}

	.twotwenty-staff-card > .twotwenty-card-content > a.twotwenty-btn-primary {
		align-self: center;
	}

	.twotwenty-staff-list.twotwenty-layout-minimal-grid,
	.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-2,
	.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-3,
	.twotwenty-staff-list.twotwenty-layout-minimal-grid.twotwenty-columns-4 {
		grid-template-columns: 1fr;
	}

	/* Single profile stacks on mobile */
	.twotwenty-hero-banner {
		height: 160px;
	}

	.twotwenty-hero-name {
		font-size: 1.5em;
	}

	/* Compound-scoped — see the matching comment on the 1024px
	   breakpoint above for why this needs .twotwenty-single-profile
	   stacked with .twotwenty-hero-profile rather than just the latter. */
	.twotwenty-single-profile.twotwenty-hero-profile .twotwenty-profile-columns {
		grid-template-columns: 1fr;
	}

	.twotwenty-profile-sidebar {
		margin-top: 0;
	}

	.twotwenty-contact-card,
	.twotwenty-profile-cta,
	.twotwenty-profile-social {
		text-align: left;
	}

	.twotwenty-hero-container {
		padding: 0 16px 32px;
	}

	.twotwenty-hero-header {
		padding-top: 24px;
	}

	/* Identity block shrinks on mobile. Compound-scoped — see the
	   .twotwenty-profile-columns comment above for why. */
	.twotwenty-single-profile.twotwenty-hero-profile .twotwenty-profile-name {
		font-size: 1.5em;
	}

	.twotwenty-single-profile.twotwenty-hero-profile .twotwenty-profile-identity {
		padding: 18px 20px 16px;
	}

	/* .twotwenty-hero-profile .twotwenty-profile-main's desktop padding
	   (28px 0 0 36px) is intentionally asymmetric — 0 on the right because
	   the two-column grid's own right edge already provides the gutter,
	   36px on the left to clear the sidebar's border. Once the layout
	   stacks to one column on mobile that asymmetry reads as off-center
	   (and everything inside it, including the Lead Capture form, inherits
	   it), so reset it here to match the sidebar's own 24px horizontal
	   padding for a centered mobile column. */
	.twotwenty-single-profile.twotwenty-hero-profile .twotwenty-profile-main {
		padding: 24px 24px 0;
	}
}

/* ==========================================================================
   Staff Single · Shared Design Tokens (warm neutral palette)
   --------------------------------------------------------------------------
   Local CSS custom properties scoped to the Prestige, Private Bank, and Hero
   single profile layouts. Intentionally NOT in ColorSettings — these are
   fixed design tones from the Claude design handoff. Themes can override
   these on the cascade if a custom palette is required.
   ========================================================================== */

.twotwenty-prestige-profile,
.twotwenty-private-profile,
.twotwenty-hero-profile {
	--220-warm-bg: #f9f8f5;
	--220-warm-border: #e8e4dc;
	--220-warm-muted: #9a8c78;
	--220-warm-muted-soft: #b0a898;
	--220-tinted-sidebar-bg: oklch(97.5% 0.006 245);
	--220-tinted-sidebar-border: #e8e8ed;
	/* Beaver Builder's page-builder Global Settings (Colors) expose these
	   as --fl-global-text---body / ---heading / --fl-global-links---text /
	   ---hover. Referencing them here means a site's BB Global Settings
	   flow straight through; sites without BB fall through to the fixed
	   design-handoff tones. */
	--220-text-body: var(--fl-global-text---body, #4a4a52);
	--220-text-heading: var(--fl-global-text---heading, #1c1c1e);
	--220-link-text: var(--fl-global-links---text, var(--220-text-heading));
	--220-link-hover: var(--fl-global-links---hover, color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black));
}

/* ==========================================================================
   Staff Single · Prestige Profile Layout
   --------------------------------------------------------------------------
   Single-column flow:
     • Header: 110px photo + identity column with gold pill title badge.
     • Gold rule divider.
     • 4-column contact strip (CSS grid) with hairline dividers.
     • Body: 2-column grid (1fr 200px) — bio left, CTA + chip stack right.
   -------------------------------------------------------------------------- */

.twotwenty-prestige-profile {
	font-family: 'DM Sans', system-ui, sans-serif;
	color: var(--220-text-body);
}

.twotwenty-prestige-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 32px 72px;
}

.twotwenty-prestige-header {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.twotwenty-prestige-photo {
	position: relative;
	width: 200px;
	height: 200px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--220-color-primary, #2d5f8a);
	background: linear-gradient(
		155deg,
		var(--220-color-primary, #1a2744),
		color-mix(in srgb, var(--220-color-primary, #1a2744) 75%, white)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.18);
}

.twotwenty-prestige-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(20px);
	transform: scale(1.15);
}

.twotwenty-prestige-photo-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twotwenty-prestige-identity {
	flex: 1;
	padding-top: 6px;
	min-width: 0;
}

.twotwenty-prestige-name-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.twotwenty-prestige-name {
	font-size: 36px;
	font-weight: 600;
	color: var(--220-color-primary, #1a2744);
	line-height: 1.1;
	margin: 0;
}

.twotwenty-prestige-title-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 3px;
	background: var(--220-staff-badge-bg, var(--220-warm-bg));
	border: 1px solid var(--220-staff-badge-border, var(--220-warm-border));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--220-staff-badge-text, var(--220-warm-muted));
}

.twotwenty-prestige-company {
	color: var(--220-text-body);
	font-weight: 400;
	margin: 0 0 10px;
}

.twotwenty-prestige-company em,
.twotwenty-prestige-locale {
	font-style: italic;
}

.twotwenty-prestige-sep {
	color: var(--220-text-body);
}

.twotwenty-prestige-nmls {
	font-size: 14px;
	color: var(--220-warm-muted);
	margin: 0;
}

.twotwenty-prestige-nmls strong {
	color: var(--220-text-body);
	font-weight: 700;
}

.twotwenty-prestige-rule {
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--220-color-primary, #2d5f8a),
		color-mix(in srgb, var(--220-color-accent, #c9972b) 10%, transparent)
	);
	border-radius: 2px;
	margin: 20px 0 0;
}

/* Contact strip */
.twotwenty-prestige-contact-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-bottom: 1px solid #eeeef2;
}

.twotwenty-prestige-contact-cell {
	padding: 16px 20px 16px 0;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	border-right: 1px solid #f0f0f4;
	min-width: 0;
}

.twotwenty-prestige-contact-cell:first-child {
	padding-left: 0;
}

.twotwenty-prestige-contact-cell:not(:first-child) {
	padding-left: 20px;
}

.twotwenty-prestige-contact-cell:last-child {
	border-right: none;
}

.twotwenty-prestige-contact-icon {
	width: 28px;
	height: 28px;
	border-radius: 5px;
	background: #f5f4f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--220-color-accent, #c9972b);
	flex-shrink: 0;
}

.twotwenty-prestige-contact-detail {
	min-width: 0;
	flex: 1;
}

.twotwenty-prestige-contact-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--220-text-body);
	margin-bottom: 2px;
}

.twotwenty-prestige-contact-val {
	font-size: 14px;
	color: var(--220-text-heading);
	line-height: 1.4;
	overflow-wrap: break-word;
	word-break: break-word;
}

.twotwenty-prestige-contact-val a {
	color: var(--220-link-text);
	text-decoration: none;
}

.twotwenty-prestige-contact-val a:hover {
	color: var(--220-link-hover);
}

.twotwenty-prestige-website-link {
	display: block;
	word-break: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.twotwenty-prestige-address {
	display: block;
	font-style: normal;
}

.twotwenty-prestige-address span {
	display: block;
}

/* Body — bio is full-width since the CTA + chips + socials moved
 * into the header beside the photo. (T3 / round 1.) */
.twotwenty-prestige-body {
	display: block;
	padding: 24px 0 0;
}
.twotwenty-prestige-body-full .twotwenty-prestige-bio {
	max-width: none;
}

/* Header actions cluster — primary CTA, optional secondary CTA,
 * category chips, and social icons. Stacks under the identity
 * block, sits to the right of the photo. (T3 / round 1.) */
.twotwenty-prestige-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

/* Primary + secondary CTA sit side by side on larger screens; the
   max-width: 600px query below stacks them back to full-width on
   narrow screens, matching .twotwenty-prestige-header's breakpoint. */
.twotwenty-prestige-cta-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.twotwenty-prestige-cta-row .twotwenty-prestige-cta {
	flex: 0 1 auto;
}
/* Scoped with the .twotwenty-prestige-profile ancestor — see the
   .twotwenty-prestige-cta comment further down for why the extra
   specificity matters on singular profile pages. */
.twotwenty-prestige-profile .twotwenty-prestige-cta-secondary {
	background: var(--220-staff-btn2-bg, transparent);
	color: var(--220-staff-btn2-text, var(--220-color-primary, #1a2744)) !important;
	border: 1px solid var(--220-staff-btn2-border, var(--220-color-primary, #1a2744));
}
.twotwenty-prestige-profile .twotwenty-prestige-cta-secondary:hover,
.twotwenty-prestige-profile .twotwenty-prestige-cta-secondary:focus-visible {
	background: var(--220-staff-btn2-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn2-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn2-border-hover, var(--220-staff-btn2-border, var(--220-color-primary, #1a2744)));
}
.twotwenty-prestige-profile .twotwenty-prestige-cta-tertiary {
	background: var(--220-staff-btn3-bg, transparent);
	color: var(--220-staff-btn3-text, var(--220-color-primary, #1a2744)) !important;
	border: 1px solid var(--220-staff-btn3-border, var(--220-color-primary, #1a2744));
}
.twotwenty-prestige-profile .twotwenty-prestige-cta-tertiary:hover,
.twotwenty-prestige-profile .twotwenty-prestige-cta-tertiary:focus-visible {
	background: var(--220-staff-btn3-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn3-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn3-border-hover, var(--220-staff-btn3-border, var(--220-color-primary, #1a2744)));
}
.twotwenty-prestige-socials .twotwenty-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.twotwenty-prestige-socials .twotwenty-social-icon {
	display: inline-flex;
	padding: 5px;
	border-radius: var(--220-social-icon-radius, 6px);
	color: var(--220-social-icon-color, currentColor) !important;
	background: var(--220-social-icon-bg, transparent);
	transition: background 0.15s, color 0.15s;
}
.twotwenty-prestige-socials .twotwenty-social-icon:hover {
	color: var(--220-social-icon-hover-color, currentColor) !important;
	background: var(--220-social-icon-bg-hover, transparent);
}

.twotwenty-prestige-bio-heading {
	font-size: 22px;
	font-weight: 600;
	color: var(--220-color-primary, #1a2744);
	margin: 0 0 12px;
}

.twotwenty-prestige-bio-content {
	line-height: 1.82;
	color: var(--220-text-body);
	font-weight: 300;
	text-wrap: pretty;
}

.twotwenty-prestige-bio-content p {
	margin: 0 0 13px;
}

.twotwenty-prestige-bio-content p:last-child {
	margin-bottom: 0;
}

.twotwenty-prestige-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.twotwenty-prestige-cta {
	display: block;
	padding: 13px 16px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 5px;
	text-decoration: none;
	transition: background 0.18s, color 0.18s;
}

/* :not(.twotwenty-prestige-cta-secondary):not(.twotwenty-prestige-cta-tertiary)
   — the ghost secondary/tertiary CTAs below already set their own
   background/color/border and must not be clobbered by this rule
   despite sharing the .twotwenty-prestige-cta base class and appearing
   later in the cascade.
   Scoped with the .twotwenty-prestige-profile ancestor (matching the
   Card/Hero profile button rules) so this beats theme rules like
   ".entry-content a { color: ... !important }" that only apply inside
   the theme's own content wrapper on singular pages, not on archive/
   list views — that specificity gap is why an override could reach
   the list-card buttons but not this one. */
.twotwenty-prestige-profile .twotwenty-prestige-cta:not(.twotwenty-prestige-cta-secondary):not(.twotwenty-prestige-cta-tertiary) {
	background: var(--220-staff-btn-bg, var(--220-color-accent, #c9972b));
	color: var(--220-staff-btn-text, var(--220-color-primary, #1a2744)) !important;
	border: 1.5px solid var(--220-staff-btn-border, transparent);
}

.twotwenty-prestige-profile .twotwenty-prestige-cta:not(.twotwenty-prestige-cta-secondary):not(.twotwenty-prestige-cta-tertiary):hover,
.twotwenty-prestige-profile .twotwenty-prestige-cta:not(.twotwenty-prestige-cta-secondary):not(.twotwenty-prestige-cta-tertiary):focus-visible {
	background: var(--220-staff-btn-bg-hover, color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, transparent));
}

/* ==========================================================================
   Staff Single · Private Bank Profile Layout
   --------------------------------------------------------------------------
   Two-column grid (220px sidebar / 1fr main). Warm neutral sidebar
   (--220-warm-bg) houses the photo + outlined CTA; the main column leads
   with a Cormorant Garamond display name.
   ========================================================================== */

.twotwenty-private-profile {
	color: var(--220-text-body);
}

.twotwenty-private-wrap {
	display: grid;
	grid-template-columns: var(--220-staff-private-sidebar-width, 220px) 1fr;
	max-width: 1060px;
	margin: 0 auto;
	min-height: 480px;
	background: #ffffff;
}

.twotwenty-private-sidebar {
	background: var(--220-staff-sidebar-bg, var(--220-warm-bg));
	border-right: 1px solid var(--220-staff-sidebar-border, var(--220-warm-border));
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
}

.twotwenty-private-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(
		160deg,
		var(--220-color-primary, #1a2744),
		color-mix(in srgb, var(--220-color-primary, #1a2744) 70%, white)
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.18);
	margin-bottom: 20px;
}

.twotwenty-private-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--220-photo-bg, none);
	background-size: cover;
	background-position: center;
	filter: blur(20px);
	transform: scale(1.15);
}

.twotwenty-private-photo-img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.twotwenty-private-nmls {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--220-text-body);
	margin: 0 0 18px;
}

.twotwenty-private-rule {
	height: 1px;
	background: var(--220-warm-border);
	margin: 0 0 16px;
}

.twotwenty-private-cta-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--220-text-body);
	margin: 0 0 8px;
}

.twotwenty-private-cta {
	display: block;
	padding: 11px 16px;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 3px;
	text-decoration: none;
	transition: background 0.18s, color 0.18s;
}

/* Scoped with the .twotwenty-private-profile ancestor — see the
   .twotwenty-prestige-cta comment above for why the extra specificity
   matters on singular profile pages. */
.twotwenty-private-profile .twotwenty-private-cta:not(.twotwenty-private-cta-secondary):not(.twotwenty-private-cta-tertiary) {
	border: 1.5px solid var(--220-staff-btn-border, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn-text, var(--220-color-primary, #1a2744)) !important;
	background: var(--220-staff-btn-bg, transparent);
}

.twotwenty-private-profile .twotwenty-private-cta:not(.twotwenty-private-cta-secondary):not(.twotwenty-private-cta-tertiary):hover,
.twotwenty-private-profile .twotwenty-private-cta:not(.twotwenty-private-cta-secondary):not(.twotwenty-private-cta-tertiary):focus-visible {
	background: var(--220-staff-btn-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, var(--220-color-primary, #1a2744)));
}

.twotwenty-private-cta-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.twotwenty-private-profile .twotwenty-private-cta-secondary {
	border: 1.5px solid var(--220-staff-btn2-border, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn2-text, var(--220-color-primary, #1a2744)) !important;
	background: var(--220-staff-btn2-bg, transparent);
}

.twotwenty-private-profile .twotwenty-private-cta-secondary:hover,
.twotwenty-private-profile .twotwenty-private-cta-secondary:focus-visible {
	background: var(--220-staff-btn2-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn2-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn2-border-hover, var(--220-staff-btn2-border, var(--220-color-primary, #1a2744)));
}

.twotwenty-private-profile .twotwenty-private-cta-tertiary {
	border: 1.5px solid var(--220-staff-btn3-border, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn3-text, var(--220-color-primary, #1a2744)) !important;
	background: var(--220-staff-btn3-bg, transparent);
}

.twotwenty-private-profile .twotwenty-private-cta-tertiary:hover,
.twotwenty-private-profile .twotwenty-private-cta-tertiary:focus-visible {
	background: var(--220-staff-btn3-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn3-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn3-border-hover, var(--220-staff-btn3-border, var(--220-color-primary, #1a2744)));
}

.twotwenty-private-contact-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.twotwenty-private-socials {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.twotwenty-private-socials .twotwenty-social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.twotwenty-private-socials .twotwenty-social-icon {
	display: inline-flex;
	padding: 5px;
	border-radius: var(--220-social-icon-radius, 6px);
	color: var(--220-social-icon-color, currentColor) !important;
	background: var(--220-social-icon-bg, transparent);
	transition: background 0.15s, color 0.15s;
}
.twotwenty-private-socials .twotwenty-social-icon:hover {
	color: var(--220-social-icon-hover-color, currentColor) !important;
	background: var(--220-social-icon-bg-hover, transparent);
}

.twotwenty-private-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.twotwenty-private-contact-icon {
	color: var(--220-color-accent, #c9972b);
	margin-top: 1px;
	flex-shrink: 0;
	display: inline-flex;
}

.twotwenty-private-contact-detail {
	min-width: 0;
	flex: 1;
}

.twotwenty-private-contact-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--220-text-body);
	margin-bottom: 1px;
}

.twotwenty-private-contact-val,
.twotwenty-private-contact-detail .twotwenty-phone-link,
.twotwenty-private-contact-detail .twotwenty-email-link {
	font-size: 14px;
	color: var(--220-text-body);
	line-height: 1.4;
	text-decoration: none;
}

.twotwenty-private-contact-detail .twotwenty-phone-link,
.twotwenty-private-contact-detail .twotwenty-email-link {
	display: inline-flex;
	gap: 0;
}

.twotwenty-private-contact-detail .twotwenty-phone-link svg,
.twotwenty-private-contact-detail .twotwenty-email-link svg {
	display: none; /* icon already rendered outside */
}

/* Genuine links only — .twotwenty-private-contact-val also renders on the
   non-link <address> block, which should keep the plain body-text color. */
a.twotwenty-private-contact-val,
.twotwenty-private-contact-detail .twotwenty-phone-link,
.twotwenty-private-contact-detail .twotwenty-email-link {
	color: var(--220-link-text);
}

a.twotwenty-private-contact-val:hover,
.twotwenty-private-contact-detail .twotwenty-phone-link:hover,
.twotwenty-private-contact-detail .twotwenty-email-link:hover {
	color: var(--220-link-hover);
}

.twotwenty-private-website-link {
	display: block;
	word-break: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.twotwenty-private-main {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
}

.twotwenty-private-name {
	font-size: 42px;
	font-weight: 300;
	color: var(--220-color-primary, #1a2744);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}

.twotwenty-private-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--220-text-body);
	margin: 0 0 28px;
}

.twotwenty-private-bio-rule {
	height: 1px;
	background: var(--220-warm-border);
	margin: 0 0 22px;
}

.twotwenty-private-bio-head {
	font-size: 21px;
	font-weight: 400;
	color: var(--220-color-primary, #1a2744);
	margin: 0 0 12px;
}

.twotwenty-private-bio-content {
	line-height: 1.85;
	color: var(--220-text-body);
	font-weight: 300;
	text-wrap: pretty;
}

.twotwenty-private-bio-content p {
	margin: 0 0 13px;
}

.twotwenty-private-bio-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Staff Single · Hero Profile Layout (tinted sidebar variant)
   --------------------------------------------------------------------------
   Visual override layer that sits on top of the default .twotwenty-profile-*
   markup used by single-hero-profile.php:
     • Sidebar gets a tinted cool-grey background + right border.
     • Photo wrap gains position:relative to host a specialty badge overlay.
     • Identity block gains a short gold gradient bar above the NMLS pill.
     • Contact card loses its card styling in favor of bordered rows.
     • Social icons become outlined tiles that fill navy on hover.
   ========================================================================== */

.twotwenty-hero-profile .twotwenty-hero-container {
	max-width: 1100px;
	padding-top: 0;
}

.twotwenty-hero-profile .twotwenty-profile-columns {
	grid-template-columns: var(--220-staff-hero-sidebar-width, 240px) 1fr;
	gap: 0;
	background: #ffffff;
}

.twotwenty-hero-profile .twotwenty-profile-sidebar {
	background: var(--220-tinted-sidebar-bg);
	border-right: 1px solid var(--220-tinted-sidebar-border);
	padding: 28px 24px 36px;
	gap: 22px;
}

.twotwenty-hero-profile .twotwenty-profile-photo-wrap {
	position: relative;
	border: none;
	border-radius: 8px;
	box-shadow: none;
}

/* CTA inside tinted sidebar */
.twotwenty-profile-cta-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-primary,
.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-secondary,
.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-tertiary {
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 8px;
	padding: 13px 16px;
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-primary {
	background: var(--220-staff-btn-bg, var(--220-color-accent, #c9972b));
	color: var(--220-staff-btn-text, var(--220-color-primary, #1a2744)) !important;
	border: 1.5px solid var(--220-staff-btn-border, transparent);
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-primary:hover,
.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-primary:focus-visible {
	background: var(--220-staff-btn-bg-hover, color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black));
	color: var(--220-staff-btn-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn-border-hover, var(--220-staff-btn-border, transparent));
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-secondary {
	background: var(--220-staff-btn2-bg, transparent);
	color: var(--220-staff-btn2-text, var(--220-color-primary, #1a2744)) !important;
	border: 1.5px solid var(--220-staff-btn2-border, var(--220-color-primary, #1a2744));
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-secondary:hover,
.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-secondary:focus-visible {
	background: var(--220-staff-btn2-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn2-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn2-border-hover, var(--220-staff-btn2-border, var(--220-color-primary, #1a2744)));
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-tertiary {
	background: var(--220-staff-btn3-bg, transparent);
	color: var(--220-staff-btn3-text, var(--220-color-primary, #1a2744)) !important;
	border: 1.5px solid var(--220-staff-btn3-border, var(--220-color-primary, #1a2744));
}

.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-tertiary:hover,
.twotwenty-hero-profile .twotwenty-profile-cta .twotwenty-btn-tertiary:focus-visible {
	background: var(--220-staff-btn3-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-staff-btn3-text-hover, #ffffff) !important;
	border-color: var(--220-staff-btn3-border-hover, var(--220-staff-btn3-border, var(--220-color-primary, #1a2744)));
}

/* Contact card → bordered rows, no card wrapper */
.twotwenty-hero-profile .twotwenty-contact-card {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.twotwenty-hero-profile .twotwenty-contact-card-heading {
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--220-color-primary, #1a2744);
	margin-bottom: 12px;
}

.twotwenty-hero-profile .twotwenty-contact-item {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid var(--220-tinted-sidebar-border);
}

.twotwenty-hero-profile .twotwenty-contact-item:first-of-type {
	padding-top: 0;
}

.twotwenty-hero-profile .twotwenty-contact-item:last-of-type {
	border-bottom: none;
}

.twotwenty-hero-profile .twotwenty-contact-icon {
	width: 26px;
	height: 26px;
	background: transparent;
	color: color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black);
}

.twotwenty-hero-profile .twotwenty-contact-label {
	font-size: 12px;
	letter-spacing: 0.09em;
	color: var(--220-text-body);
}

.twotwenty-hero-profile .twotwenty-contact-val {
	font-size: 12.5px;
	color: var(--220-text-heading);
}

/* Genuine link only — .twotwenty-contact-val also renders on the fax
   <span> and the non-link <address> block, which should keep the
   heading-tone color above. */
.twotwenty-hero-profile a.twotwenty-contact-val {
	color: var(--220-link-text);
}

.twotwenty-hero-profile a.twotwenty-contact-val:hover {
	color: var(--220-link-hover);
}

.twotwenty-hero-profile .twotwenty-website-link {
	display: block;
	word-break: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* Identity block gold gradient bar */
.twotwenty-profile-identity-bar {
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--220-color-accent, #c9972b) 70%, black),
		var(--220-color-accent, #c9972b)
	);
	margin-bottom: 14px;
}

/* Tinted-sidebar: identity card sheds its white card wrapper */
.twotwenty-hero-profile .twotwenty-profile-identity {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 24px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--220-tinted-sidebar-border);
	overflow: visible;
}

.twotwenty-hero-profile .twotwenty-profile-identity::before {
	display: none; /* replaced by .twotwenty-profile-identity-bar */
}

.twotwenty-hero-profile .twotwenty-profile-main {
	padding: 28px 0 0 36px;
}

.twotwenty-hero-profile .twotwenty-profile-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin-bottom: 5px;
}

.twotwenty-hero-profile .twotwenty-profile-position {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.twotwenty-hero-profile .twotwenty-profile-company {
	font-size: 13.5px;
	color: var(--220-text-body);
}

.twotwenty-hero-profile .twotwenty-license-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	background: #f5f6f9;
	border: 1px solid var(--220-tinted-sidebar-border);
	color: var(--220-warm-muted-soft);
	margin-bottom: 12px;
	padding: 2px 10px;
	border-radius: 100px;
	font-weight: 500;
}

.twotwenty-hero-profile .twotwenty-license-badge strong {
	color: var(--220-text-body);
	font-weight: 600;
}

.twotwenty-hero-profile .twotwenty-profile-bio-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--220-color-primary, #1a2744);
	margin-bottom: 12px;
}

.twotwenty-hero-profile .twotwenty-profile-bio-content {
	font-size: 14px;
	line-height: 1.82;
	color: var(--220-text-body);
	font-weight: 300;
}

/* Shared chip styling for specialty terms (tinted-sidebar + private-bank variants) */
/* Social icons → outlined tiles with navy-fill hover. (.twotwenty-social-icon
   is the only element render_social_icons() puts inside .twotwenty-profile-social,
   so that wrapper doesn't need its own "a" selector alongside it.) */
.twotwenty-hero-profile .twotwenty-social-icon {
	background: var(--220-social-icon-bg, #ffffff);
	border: 1px solid var(--220-tinted-sidebar-border);
	border-radius: var(--220-social-icon-radius, 6px);
	color: var(--220-social-icon-color, var(--220-text-body)) !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.twotwenty-hero-profile .twotwenty-social-icon:hover {
	background: var(--220-social-icon-bg-hover, var(--220-color-primary, #1a2744));
	color: var(--220-social-icon-hover-color, #ffffff) !important;
	border-color: var(--220-social-icon-bg-hover, var(--220-color-primary, #1a2744));
}

/* ==========================================================================
   Staff Single · Prestige / Private / Hero · Responsive Overrides
   --------------------------------------------------------------------------
   Breakpoint adjustments specific to the warm-neutral single layouts above
   (everything that opts into the --220-warm-* shared tokens). Default
   Card Profile + List responsive rules live earlier in the file.
   ========================================================================== */

@media (max-width: 900px) {
	.twotwenty-prestige-body {
		grid-template-columns: 1fr;
	}

	.twotwenty-prestige-contact-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.twotwenty-prestige-contact-cell {
		border-right: 1px solid #f0f0f4;
		padding-left: 20px !important;
	}

	.twotwenty-prestige-contact-cell:nth-child(2n) {
		border-right: none;
	}

	.twotwenty-private-wrap {
		grid-template-columns: 1fr;
	}

	.twotwenty-private-sidebar {
		border-right: none;
		border-bottom: 1px solid var(--220-staff-sidebar-border, var(--220-warm-border));
	}
}

@media (max-width: 600px) {
	.twotwenty-prestige-wrap {
		padding: 24px 20px 48px;
	}

	.twotwenty-prestige-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.twotwenty-prestige-cta-row {
		flex-direction: column;
	}

	.twotwenty-prestige-photo {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.twotwenty-prestige-name {
		font-size: 28px;
	}

	.twotwenty-prestige-contact-strip {
		grid-template-columns: 1fr;
	}

	.twotwenty-prestige-contact-cell,
	.twotwenty-prestige-contact-cell:nth-child(2n) {
		border-right: none;
		border-bottom: 1px solid #f0f0f4;
		padding-left: 0 !important;
		padding-right: 0;
	}

	.twotwenty-prestige-contact-cell:last-child {
		border-bottom: none;
	}

	.twotwenty-private-main {
		padding: 28px 24px;
	}

	.twotwenty-private-name {
		font-size: 34px;
	}
}

/* ==========================================================================
   Staff List · Category-Archive Chrome
   --------------------------------------------------------------------------
   Back link + heading + count for /staff/{category}/ and
   /staff-category/{slug}/ archives (templates/staff/taxonomy-listings.php).
   Mirrors the Recommended Professionals archive chrome; the card grid itself
   is styled by the .twotwenty-layout-* rules above. Insets match the grid's
   `margin: 0 20px`. Palette tokens (--220-navy, --220-gold-*, --220-text-muted)
   are emitted globally by ColorSettings::output_css_variables(), which runs on
   the same gate as this stylesheet (AssetLoader::should_load_assets /
   has_staff_content), so they are always defined when this file loads.
   ========================================================================== */
.twotwenty-staff-back {
	/* Side gutter is owned by .twotwenty-archive-shell on the wrapper. */
	margin: 0 0 16px;
}

.twotwenty-staff-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--220-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.twotwenty-staff-back-link:hover,
.twotwenty-staff-back-link:focus {
	color: var(--220-gold-dark);
}

.twotwenty-staff-back-arrow {
	flex: none;
}

.twotwenty-staff-archive-header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	/* Side gutter is owned by .twotwenty-archive-shell on the wrapper. */
	margin: 0 0 22px;
}

.twotwenty-staff-archive-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--220-navy);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

/* Count pill — mirrors .twotwenty-rp-grid-section-count, centered against
   the heading baseline in this standalone row. */
.twotwenty-staff-archive-count {
	align-self: center;
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--220-gold-dark);
	background: var(--220-gold-light);
	border: 1px solid var(--220-gold-border);
	padding: 4px 10px;
	border-radius: 100px;
	white-space: nowrap;
}

.twotwenty-staff-archive-listing {
	margin: 0;
}

/* Secondary-term badge — shown next to the H1 when this archive is
 * filtered down to one term in the *other* Staff taxonomy (arrived via
 * a cross-taxonomy subgroup heading link, e.g. "Downtown Branch — Loan
 * Officers"). See taxonomy-listings.php's $secondary_term. */
.twotwenty-staff-archive-subterm {
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--220-text-muted);
	margin-left: 8px;
}
.twotwenty-staff-archive-subterm::before {
	content: '— ';
}

.twotwenty-staff-archive-clear-filter {
	margin: -14px 0 22px;
	font-size: 13px;
}
.twotwenty-staff-archive-clear-filter a {
	color: var(--220-text-muted);
	text-decoration: underline;
}
.twotwenty-staff-archive-clear-filter a:hover,
.twotwenty-staff-archive-clear-filter a:focus-visible {
	color: var(--220-gold-dark);
}

@media (max-width: 600px) {
	.twotwenty-staff-archive-header {
		gap: 8px;
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   Staff · Card Click Behavior — "Open Modal Popup"
   --------------------------------------------------------------------------
   Overlay + dialog injected by assets/js/220-listings-staff-modal.js. The
   dialog body is filled with the site's selected single-profile template,
   fetched via admin-ajax.php — it reuses every rule above, so nothing here
   needs to restyle profile content itself.
   ========================================================================== */

html.twotwenty-staff-modal-open {
	overflow: hidden;
}

.twotwenty-staff-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(20, 20, 24, 0.6);
}

.twotwenty-staff-modal-overlay[hidden] {
	display: none;
}

.twotwenty-staff-modal {
	/* Overridden inline by 220-listings-staff-modal.js from Settings →
	   Staff → Modal Popup Width — this is only the no-JS/no-setting
	   fallback. */
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 90vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.twotwenty-staff-modal-close {
	position: sticky;
	top: 0;
	float: right;
	margin: 10px 10px 0 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: var(--220-color-text, #1c1c1e);
	background: #ffffff;
	border: 1px solid var(--220-color-border, #e8e4dc);
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
}

.twotwenty-staff-modal-close:hover,
.twotwenty-staff-modal-close:focus-visible {
	background: var(--220-color-bg-light, #f9f8f5);
}

.twotwenty-staff-modal-loading,
.twotwenty-staff-modal-error {
	padding: 60px 24px;
	text-align: center;
	color: var(--220-color-text, #1c1c1e);
}

.twotwenty-staff-modal-error a {
	color: var(--220-color-primary, #1a2744);
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   STAFF PROFILES · Lead Capture (inquiry form section)
   ---------------------------------------------------------------
   Rendered below the profile content on every single-profile
   layout. See templates/staff/partials/lead-capture.php.
═══════════════════════════════════════════════════════════════ */
.twotwenty-staff-section-inquiry {
	margin-top: 32px;
}

/* Same top spacing as the Lead Capture section above — both are "another
   content block after the bio" on every single-profile layout, so they
   should read as evenly spaced regardless of which one comes first. */
.twotwenty-staff-section-assigned-reco-pros {
	margin-top: 32px;
}

/* Per-category sections when "Group by Category" (Settings → Staff →
   Assigned Recommended Professionals) is on — one heading + list per
   Recommended Professional Category the staff member's assigned pros
   carry, in the order Helpers::get_staff_assigned_reco_pros_grouped_by_category()
   already resolved (alphabetical or manual Sort Order, matching
   Settings → Recommended Professionals → Category Sort Order). */
.twotwenty-staff-reco-pros-group {
	margin-top: 24px;
}

.twotwenty-staff-reco-pros-group:first-of-type {
	margin-top: 12px;
}

.twotwenty-staff-reco-pros-group-heading {
	font-size: 16px;
	font-weight: 600;
	color: var(--220-color-primary, #2D5F8A);
	margin: 0 0 10px;
}

/* Minimum card width for the reco-pro list, scoped to only this
 * staff-profile block, and applying regardless of which List Layout
 * (Settings → Recommended Professionals) is active.
 *
 * Deliberately a min-width on the CARD itself, not grid-template-columns
 * on its parent: .twotwenty-rp-grid is only display:grid below an 821px
 * *viewport* width. At 821px and up it switches to display:flex (see
 * "Switches the row from CSS Grid to a wrapping flex row" further down
 * this stylesheet), and each .twotwenty-rp-grid-card gets its width from
 * `flex: 0 1 var(--220-rp-grid-card-basis, calc(...))` instead — a
 * grid-template-columns override on the parent is simply inert there,
 * since the box isn't a grid container at that width at all. A staff
 * profile's own content column can easily be narrower than 821px of
 * *viewport* width while the browser window itself is a full desktop
 * width, so this is the common case, not an edge case.
 *
 * min-width instead is honored as a hard floor by BOTH layout modes —
 * grid respects it as an implied grid-column minimum, flex respects it
 * over flex-shrink — so one rule covers every breakpoint without caring
 * which mode is currently active. flex-wrap on the parent (or the grid
 * reflowing) handles fitting fewer cards per row instead of shrinking
 * them further.
 *
 * Horizontal Card (.twotwenty-rp-hcard) has no column math at all — it's
 * a single column of full-width rows — so min-width just stops the row
 * itself (photo column + text) from compressing past a readable width;
 * the block overflows/scrolls rather than the card squeezing further if
 * the container is narrower still.
 *
 * Both selectors' higher specificity here only affects cards rendered
 * inside this block — [220_reco_pro_list] elsewhere on the site keeps its
 * normal, unaffected behavior. The minimum itself is admin-configurable
 * (Settings → Staff → Assigned Recommended Professionals → Minimum Card
 * Width), falling back to 200px.
 *
 * !important on both: same reason as the button-text/social-icon-color
 * !important rules elsewhere in this file and in
 * 220-listings-recommended-professionals.css — a theme or page-builder
 * template hosting the staff profile page (Beaver Builder, Elementor,
 * etc.) can ship its own grid/flex/list CSS at a specificity or
 * !important that would otherwise still beat this scoped rule despite it
 * being more specific than our own base rule. */
.twotwenty-staff-section-assigned-reco-pros .twotwenty-rp-grid-card {
	min-width: var( --220-staff-reco-pro-min-card-width, 200px ) !important;
}
.twotwenty-staff-section-assigned-reco-pros .twotwenty-rp-hcard {
	min-width: var( --220-staff-reco-pro-min-card-width, 200px ) !important;
}

.twotwenty-staff-section-inquiry .twotwenty-staff-h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--220-color-primary, #1a2744);
	margin: 0 0 10px;
}

.twotwenty-staff-inquiry-container {
	margin-left: auto;
	margin-right: auto;
}

.twotwenty-staff-inquiry-frame {
	background: var(--220-color-bg-light, #f9f8f5);
	border: 1px solid var(--220-color-border, #e2e2e8);
	border-radius: var(--220-radius, 10px);
	padding: 10px 0 10px 20px;
}

.twotwenty-staff-form-host,
.twotwenty-staff-inquiry-frame {
	min-width: 0;
}

.twotwenty-staff-form-host > * {
	max-width: 100%;
}

.twotwenty-staff-inquiry-frame iframe {
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   STAFF PROFILES · Single Profile — Maximum Width (Settings → Staff)
   ---------------------------------------------------------------
   Caps each single-profile layout's own container at a custom width
   on large screens only. Scoped inside min-width:1024px — above every
   layout's own internal mobile/tablet stacking breakpoint — so a
   narrow override value never fights the responsive layout below
   that. Falls back to each layout's existing default width when the
   setting is blank, so an untouched site sees no change.
═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
	.twotwenty-hero-container,
	.twotwenty-hero-profile .twotwenty-hero-container {
		max-width: var(--220-staff-single-max-width, 1100px);
	}

	.twotwenty-prestige-wrap {
		max-width: var(--220-staff-single-max-width, 1200px);
	}

	.twotwenty-private-wrap {
		max-width: var(--220-staff-single-max-width, 1060px);
	}

	/* The Card layout has no built-in max-width today (full-bleed by
	 * design) — "none" preserves that when the setting is blank. */
	.twotwenty-profile-container {
		max-width: var(--220-staff-single-max-width, none);
		margin-left: auto;
		margin-right: auto;
	}

	/* Lead Capture form — Inquiry Form Maximum Width. Same large-screens-
	 * only gating as the page-level Maximum Width above; mobile/tablet
	 * always render the form at 100% regardless of this setting. */
	.twotwenty-staff-inquiry-container {
		max-width: var(--220-staff-inquiry-max-width, none);
	}
}

/* ==========================================================================
   Staff List · Grouped Minimal Grid (Branch / Category grouping)
   --------------------------------------------------------------------------
   [220_staff_list layout="minimal-grid" group_by="branch"] (also "category",
   or the two-level "branch,category" — a section per branch with a
   category subsection nested inside). Mirrors the Recommended
   Professionals grouped-grid chrome (.twotwenty-rp-grid-section-*) using
   the same shared --220-navy/--220-gold-*/--220-text-muted tokens emitted
   globally by ColorSettings::output_css_variables(). Card markup itself
   reuses .twotwenty-staff-card-minimal, already styled above.
   ========================================================================== */
.twotwenty-staff-grid-grouped {
	max-width: 100%;
	margin: 0 0 2rem;
}

.twotwenty-staff-grid {
	display: grid;
	/* Fixed 240px max track width + justify-content: center — matches the
	 * flat (ungrouped) .twotwenty-layout-minimal-grid sizing exactly, so a
	 * grouped section's cards stay the same compact, centered size instead
	 * of stretching to fill a 1fr share of the full content width. */
	grid-template-columns: repeat(3, minmax(0, 240px));
	justify-content: center;
	gap: 20px;
	max-width: 100%;
	margin: 0 0 2rem;
	list-style: none;
	padding: 0;
}

@media (max-width: 820px) { .twotwenty-staff-grid { grid-template-columns: repeat(2, minmax(0, 240px)); } }
@media (max-width: 420px) { .twotwenty-staff-grid { grid-template-columns: minmax(0, 240px); } }

.twotwenty-staff-grid-section {
	margin: 0 0 44px;
}
.twotwenty-staff-grid-section:last-child {
	margin-bottom: 0;
}
.twotwenty-staff-grid-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	/* Match .twotwenty-staff-grid's own reserved width (3 × 240px tracks +
	 * 2 × 20px gaps) and center the same way, so the heading/divider line
	 * up with the centered card grid below instead of spanning the full
	 * (often much wider) container. */
	max-width: 760px;
	margin: 0 auto 18px;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--220-gold);
}
.twotwenty-staff-grid-section-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--220-navy);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.005em;
}
.twotwenty-staff-grid-section-heading a,
.twotwenty-staff-grid-subgroup-heading a {
	color: inherit;
	text-decoration: none;
}
.twotwenty-staff-grid-section-heading a:hover,
.twotwenty-staff-grid-section-heading a:focus-visible,
.twotwenty-staff-grid-subgroup-heading a:hover,
.twotwenty-staff-grid-subgroup-heading a:focus-visible {
	text-decoration: underline;
}
.twotwenty-staff-grid-section-count {
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--220-gold-dark);
	background: var(--220-gold-light);
	border: 1px solid var(--220-gold-border);
	padding: 4px 10px;
	border-radius: 100px;
	white-space: nowrap;
}
.twotwenty-staff-grid-section-desc {
	font-size: 13.5px;
	color: var(--220-text-muted);
	font-weight: 300;
	margin: -8px 0 18px;
	line-height: 1.55;
	max-width: 64ch;
}

/* "View all N" link rendered when max_per_section caps a grouped section. */
.twotwenty-staff-grid-section-more {
	max-width: 760px;
	margin: 14px auto 0;
	text-align: center;
}
.twotwenty-staff-grid-section-more-link {
	display: inline-block;
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--220-navy);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	text-decoration: none;
}
.twotwenty-staff-grid-section-more-link:hover {
	color: var(--220-gold-dark);
}

/* The grouped wrapper hosts its own .twotwenty-staff-grid; reset its
   margin so spacing comes from .twotwenty-staff-grid-section instead. */
.twotwenty-staff-grid-section .twotwenty-staff-grid {
	margin: 0;
}

/* Nested subgroup within a branch (e.g. "Loan Officers" under "Downtown
 * Branch") — sits below the branch's own direct staff (if any) so a
 * cross-taxonomy grouped view (group_by="branch,category") reads as
 * one section per branch with a role-tier subsection inside. */
.twotwenty-staff-grid-subgroup {
	margin: 26px 0 0;
}
.twotwenty-staff-grid-subgroup:first-child {
	margin-top: 18px;
}
.twotwenty-staff-grid-subgroup-heading {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--220-gold-dark);
	/* Same reserved width as .twotwenty-staff-grid — see the matching
	 * comment on .twotwenty-staff-grid-section-header above. */
	max-width: 760px;
	margin: 0 auto 30px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--220-border-cool);
}
.twotwenty-staff-grid-subgroup-count {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--220-text-muted);
	font-size: 13px;
}

@media (max-width: 600px) {
	.twotwenty-staff-grid-section { margin-bottom: 32px; }
	.twotwenty-staff-grid-section-heading { font-size: 20px; }
	.twotwenty-staff-grid-section-header { gap: 8px; }
}

/* ==========================================================================
   Staff · V5 Hero Search (Location / By Branch / By Name)
   --------------------------------------------------------------------------
   Mirrors the Recommended Professionals search hero
   (.twotwenty-rp-search-*) 1:1, renamed to .twotwenty-staff-search-*. Uses
   the shared --220-navy/--220-gold-* palette emitted globally by
   ColorSettings::output_css_variables() directly (no Staff-specific
   override layer/settings — the local aliases below exist only so the
   selector list can reference short names).
   ========================================================================== */
.twotwenty-staff-search-hero {
	--220-staff-search-navy: var(--220-navy-light, #4a5b87);
	--220-staff-search-navy-deep: var(--220-navy, #3a4a73);
	--220-staff-search-gold: var(--220-gold, #f5c14e);
	--220-staff-search-gold-hover: var(--220-gold-hover, #f0b528);
	--220-staff-search-gold-dark: var(--220-gold-dark, #b8860b);
	--220-staff-search-text: var(--220-text, #2a3142);
	--220-staff-search-text-muted: var(--220-text-muted, #9098a8);

	background: var(--220-staff-banner-bg, var(--220-staff-search-navy-deep));
	border-radius: 14px;
	padding: 36px 36px 30px;
	position: relative;
	overflow: hidden;
	margin: 0 0 28px;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.twotwenty-staff-search-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--220-staff-banner-eyebrow, var(--220-staff-search-gold));
	text-transform: uppercase;
	margin: 0 0 8px;
}

.twotwenty-staff-search-headline {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	/* !important: some themes apply their own heading color inside the
	   content area, which otherwise beats this single-class selector on
	   specificity alone. This headline is fully plugin-owned. */
	color: var(--220-staff-banner-headline, #fff) !important;
	line-height: 1.2;
	margin: 0 0 18px;
	max-width: 720px;
}

.twotwenty-staff-search-form {
	display: block;
	margin: 0;
}

.twotwenty-staff-search-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 12px;
	background: rgba(255, 255, 255, 0.08);
	padding: 4px;
	border-radius: 10px;
	width: fit-content;
}

.twotwenty-staff-search-tab {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	padding: 6px 14px;
	border-radius: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.twotwenty-staff-search-tab:hover {
	color: rgba(255, 255, 255, 0.95);
	border: 0 !important;
}

.twotwenty-staff-search-tab:focus-visible {
	outline: 2px solid var(--220-staff-search-gold);
	outline-offset: 2px;
}

.twotwenty-staff-search-tab:active,
.twotwenty-staff-search-tab:focus {
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.7) !important;
	border: 0 !important;
}

.twotwenty-staff-search-tab.is-active {
	background: var(--220-staff-search-btn-bg, var(--220-staff-search-gold));
	color: var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep));
}

.twotwenty-staff-search-tab.is-active:hover {
	background: var(--220-staff-search-btn-bg-hover, var(--220-staff-search-gold-hover));
	color: var(--220-staff-search-btn-text-hover, var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep)));
	border: 0 !important;
}

.twotwenty-staff-search-tab.is-active:active,
.twotwenty-staff-search-tab.is-active:focus {
	background-color: var(--220-staff-search-btn-bg, var(--220-staff-search-gold)) !important;
	color: var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep)) !important;
	border: 0 !important;
}

.twotwenty-staff-search-bar {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.25);
}

.twotwenty-staff-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 5px 18px 0px 18px;
	min-width: 0;
}

.twotwenty-staff-search-icon {
	color: var(--220-staff-search-gold-dark);
	flex-shrink: 0;
	display: inline-flex;
}

.twotwenty-staff-search-input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--220-staff-search-text);
	padding: 16px 0;
	min-width: 0;
}

.twotwenty-staff-search-input::placeholder {
	color: var(--220-staff-search-text-muted);
	opacity: 1;
}

.twotwenty-staff-search-submit {
	background: var(--220-staff-search-btn-bg, var(--220-staff-search-gold)) !important;
	color: var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep)) !important;
	border: 0;
	cursor: pointer;
	padding: 0 28px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 120ms ease, color 120ms ease;
}

.twotwenty-staff-search-submit:hover {
	background: var(--220-staff-search-btn-bg-hover, var(--220-staff-search-gold-hover)) !important;
	color: var(--220-staff-search-btn-text-hover, var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep))) !important;
	border: 0 !important;
}

.twotwenty-staff-search-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.twotwenty-staff-search-submit:active,
.twotwenty-staff-search-submit:focus {
	background-color: var(--220-staff-search-btn-bg, var(--220-staff-search-gold)) !important;
	color: var(--220-staff-search-btn-text, var(--220-staff-search-navy-deep)) !important;
	border: 0 !important;
}

.twotwenty-staff-search-submit-icon {
	display: inline-flex;
}

.twotwenty-staff-search-meta {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	flex-wrap: wrap;
}

.twotwenty-staff-search-meta a {
	background: none;
	border: 0;
	color: var(--220-staff-search-meta-text, #ffffff) !important;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0;
}

.twotwenty-staff-search-meta a:hover {
	color: var(--220-staff-search-meta-text-hover, #f2f2f2) !important;
}

.twotwenty-staff-search-meta a[hidden] {
	display: none;
}

.twotwenty-staff-search-meta a:focus-visible {
	outline: 2px solid var(--220-staff-search-gold);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.twotwenty-staff-search-hero {
		padding: 24px 20px 22px;
		border-radius: 10px;
	}

	.twotwenty-staff-search-headline {
		font-size: 20px;
	}

	.twotwenty-staff-search-bar {
		flex-direction: column;
	}

	.twotwenty-staff-search-submit {
		padding: 14px;
		justify-content: center;
		border-top: 1px solid var(--220-color-border, #e2e2e8);
	}

	.twotwenty-staff-search-tabs {
		flex-wrap: wrap;
		width: 100%;
	}
}