/* =============================================================
   ADW FGA Block — Full accordion styles
   Ported from adw-listing-ordering/src/scss/listing.scss so
   this block works on any page, not just FGA taxonomy archives.
   ============================================================= */

/* ── Bootstrap-like grid needed for accordion layout ────────── */
.adw-fga-wrap .adw-fga-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.adw-fga-wrap .adw-fga-gutter-none {
	margin-right: 0;
	margin-left: 0;
}

.adw-fga-wrap .adw-fga-col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

/* ── Column widths ───────────────────────────────────────────── */
.adw-fga-wrap .aw-fga-list-rank {
	-ms-flex: 0 0 8.333333%;
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
	padding-left: 30px;
}

.adw-fga-wrap .aw-fga-list-rank .rank-listings {
	color: #e51000;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.adw-fga-wrap .aw-fga-list-growth {
	-ms-flex: 0 0 11.333333%;
	flex: 0 0 11.333333%;
	max-width: 11.333333%;
}

.adw-fga-wrap .aw-fga-list-name {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.adw-fga-wrap .aw-fga-list-industry {
	-ms-flex: 1;
	flex: 1;
}

.adw-fga-wrap .aw-fga-list-size {
	-ms-flex: 0 0 22%;
	flex: 0 0 22%;
	max-width: 22%;
}

/* ── Growth indicator (green up-arrow) ──────────────────────── */
.adw-fga-wrap .adw-fga-growth {
	position: relative;
	display: inline-block;
	min-width: 70px;
	padding-right: 12px;
}

.adw-fga-wrap .adw-fga-growth::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 8px 5px;
	border-color: transparent transparent #26cd0d transparent;
	position: absolute;
	right: 0;
	top: 11px;
}

/* ── Column header row ───────────────────────────────────────── */
.adw-fga-wrap .adw-fga-accordion-heading {
	display: block !important;
	background: #d8d8d8;
	padding: 8px 10px;
}

.adw-fga-wrap .adw-fga-accordion-heading p {
	color: #000;
	letter-spacing: normal;
	font-size: 14px;
	margin: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

/* ── Accordion head row ──────────────────────────────────────── */
.adw-fga-wrap .accordion_head {
	background: #fff;
	padding: 14px 10px;
	color: #000;
	font-weight: 400;
	font-size: 16px;
	margin: 0;
	cursor: pointer;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
	transition: background 0.2s, color 0.2s;
	align-items: center;
}

/* Alternating stripe managed by JS (update() sets fga-row-alt on odd
   visible-position rows) so it stays correct after filtering/pagination. */
.adw-fga-wrap .adw-fga-entity.fga-row-alt .accordion_head {
	background: #f2f2f2;
}

/* 7 chained classes to beat adw-listing-ordering custom.css's 6-class !important rule. */
.adw-fga-page.year_listing .adw-fga-wrap.adw-fga-main .accordion_container .accordion_head:hover,
.adw-fga-page.year_listing .adw-fga-wrap.adw-fga-main .accordion_container .accordion_head.active_accordion {
	background: #282828 !important;
	background-color: #282828 !important;
	color: #fff !important;
}

/* Fallback for pages where the outer element lacks /adw-fga-main */
.adw-fga-wrap .accordion_head:hover,
.adw-fga-wrap .accordion_head.active_accordion {
	background: #282828 !important;
	background-color: #282828 !important;
	color: #fff !important;
}

/* 7-class specificity — beats adw-listing-ordering's 6-class rules on children */
.adw-fga-page.year_listing .adw-fga-wrap.adw-fga-main .accordion_container .accordion_head:hover > *,
.adw-fga-page.year_listing .adw-fga-wrap.adw-fga-main .accordion_container .accordion_head.active_accordion > * {
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* Fallback (no /adw-fga-main on wrapper) */
.adw-fga-wrap .accordion_head:hover > *,
.adw-fga-wrap .accordion_head.active_accordion > * {
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
}

.adw-fga-wrap .accordion_head:hover .rank-listings,
.adw-fga-wrap .accordion_head.active_accordion .rank-listings {
	color: #fff !important;
}

/* Plus icon on desktop */
@media ( min-width: 768px ) {
	.adw-fga-wrap .accordion_head {
		padding: 24px 10px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23282828' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 97% 50%;
		background-size: 13px;
	}

	.adw-fga-wrap .accordion_head:hover,
	.adw-fga-wrap .accordion_head.active_accordion {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 10h24v4h-24z'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: 97% 50% !important;
		background-size: 13px !important;
	}
}

/* ── Accordion body (expanded detail) ───────────────────────── */
/* Color pinned (not inherited) so this light card stays legible even when
   the theme's dark mode flips body text to white — see .adw-fga-col-primary
   below, which already pins its own color for the same reason. */
.adw-fga-wrap .accordion_body {
	background: #f2f2f2;
	color: #282828;
}

/* Left dark column */
.adw-fga-wrap .accordion_body .adw-fga-col-primary {
	background: #282828;
	color: #fff;
	padding: 40px;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.adw-fga-wrap .accordion_body .adw-fga-col-primary .adw-fga-field {
	padding-bottom: 8px;
}

.adw-fga-wrap .accordion_body .adw-fga-col-primary .adw-fga-field-label {
	color: #b4b4b4;
	font-size: 13px;
	display: block;
}

.adw-fga-wrap .accordion_body .adw-fga-col-primary .adw-fga-field-value {
	font-size: 15px;
}

.adw-fga-wrap .accordion_body .adw-fga-company-name .adw-fga-field-value {
	font-size: 17px;
	font-weight: 600;
}

/* Past ranking — one chip per year, instead of run-on inline text, so
   each year/rank pair reads as its own unit at a glance. Subtle/translucent
   rather than solid-colored: this is historical data, not a category pill. */
.adw-fga-wrap .adw-fga-rank-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

/* Links to that agency's entry on its year — .adw-fga-rank-chip is an <a>,
   so reset link defaults and add a hover/focus state to read as clickable. */
.adw-fga-wrap .adw-fga-rank-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	text-decoration: none !important; /* the theme's base `a { text-decoration: underline }` otherwise wins */
	transition:
		background 140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		border-color 140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

.adw-fga-wrap .adw-fga-rank-chip:hover,
.adw-fga-wrap .adw-fga-rank-chip:focus-visible {
	background: rgba( 255, 255, 255, 0.16 );
	border-color: rgba( 255, 255, 255, 0.3 );
}

.adw-fga-wrap .adw-fga-rank-chip-year {
	font-size: 11px;
	color: #b4b4b4;
}

.adw-fga-wrap .adw-fga-rank-chip-num {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

/* Distinction pills (Women-Led / Minority-Owned) — solid color, set apart
   from the plain outlined pills used for Specialty/Capabilities/Region. */
.adw-fga-wrap .adw-fga-distinctions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 12px;
}

/* One shared color for every distinction pill — a muted slate that sits
   quietly against both the dark card and the light secondary column,
   without competing with the brand-red rank/growth accents. */
.adw-fga-wrap .adw-fga-distinction-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	background: #5b6b7a;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Middle content column */
.adw-fga-wrap .adw-fga-col-secondary {
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 1;
	flex: 1;
}

.adw-fga-wrap .adw-fga-col-secondary-lead {
	-ms-flex: 0 0 58.333333%;
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
	padding: 0 25px;
	margin-top: 35px;
	margin-bottom: 25px;
}

.adw-fga-wrap .adw-fga-subtitle {
	color: #E50000;
	font-size: 22px;
	padding-bottom: 15px;
	font-weight: 400;
	display: block;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.adw-fga-wrap .adw-fga-desc {
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 40px;
	padding: 16px 24px;
}

.adw-fga-wrap .adw-fga-desc p {
	padding: 0 !important;
	margin: 0 0 20px 0 !important;
}

/* Sponsor banner (per-agency ad image, editor-uploaded). Capped to this
   site's registered "medium" image size (652×367 — see wp_get_attachment_image()
   call in render.php) so the cap never forces an upscale past native
   resolution, while still rendering noticeably larger than a thumbnail. */
.adw-fga-wrap .adw-fga-ad-banner {
	max-width: 640px;
	margin: 0 24px 24px;
}

.adw-fga-wrap .adw-fga-ad-banner img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Right capabilities column */
.adw-fga-wrap .adw-fga-col-secondary-inner {
	-ms-flex: 0 0 41.666667%;
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
	padding: 0 25px;
	margin-top: 35px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	max-height: 574px;
}

.adw-fga-wrap .adw-fga-col-secondary-inner::before {
	content: "";
	border-left: 1px solid #b8b8b8;
	position: absolute;
	top: 0;
	height: 100%;
	left: 0;
}

/* ── Accordion body: narrow left column + one wide middle column ──
   The dark facts/distinctions card stays a left column; description,
   capabilities and the sponsor banner now stack top-to-bottom as ONE
   wide middle column (previously split into a separate 58/41 desc +
   capabilities pair with a divider). Below 992px the existing
   @media(max-width:991px) block (lower specificity, but uncontested
   here) still stacks both columns to full width. */
@media ( min-width: 992px ) {
	.adw-fga-wrap .accordion_body .adw-fga-col-primary {
		flex: 0 0 30%;
		max-width: 30%;
	}

	.adw-fga-wrap .accordion_body .adw-fga-col-secondary {
		flex: 1 1 0%;
		max-width: none;
	}
}

.adw-fga-wrap .accordion_body .adw-fga-col-secondary {
	display: block;
}

.adw-fga-wrap .accordion_body .adw-fga-col-secondary-inner {
	max-width: 100%;
	overflow: visible;
	max-height: none;
	border-top: 1px solid #d8d8d8;
	padding-top: 20px;
}

.adw-fga-wrap .accordion_body .adw-fga-col-secondary-inner::before {
	content: none;
}

.adw-fga-wrap .accordion_body .adw-fga-ad-banner {
	margin-top: 20px;
}

/* Grey/white and same 13px size as .adw-fga-field-label — only the pills
   below carry color/weight now, so labels stay quiet and consistent
   everywhere they appear. */
.adw-fga-wrap .adw-fga-field-header {
	color: #6b6b6b;
	font-size: 13px;
	padding-bottom: 5px;
	font-weight: 400;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-top: 10px;
}

/* On the dark primary column, use the same light grey as .adw-fga-field-label
   instead — #6b6b6b above is tuned for the light secondary-column background. */
.adw-fga-wrap .accordion_body .adw-fga-col-primary .adw-fga-field-header {
	color: #b4b4b4;
}

/* Capability pills */
/* !important on display/width: adw-listing-ordering/assets/custom.css has
   `.year_listing span.full-cap-listings { display:block; width:100% }`,
   which outranks a plain 2-class selector (2 classes + element type beats
   2 classes) and stretches these into full-width bars instead of pills. */
/* Same muted slate as .adw-fga-distinction-pill, so every pill in the
   accordion — distinctions, Specialty, Region, Capabilities — reads as
   one consistent, quiet system rather than a rainbow of categories. */
.adw-fga-wrap .full-cap-listings {
	padding: 4px 12px;
	border-radius: 999px;
	border: none;
	background: #5b6b7a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	display: inline-block !important;
	width: auto !important;
	margin-bottom: 3px;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.adw-fga-filter-bar {
	padding: 12px 15px 8px;
	background: #fff;
}

.adw-fga-filter-bar__inner {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.adw-fga-filter-item {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 4px;
}

.adw-fga-filter-item label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.adw-fga-filter-item select {
	min-width: 150px;
	height: 36px;
	font-size: 14px;
	color: #333;
	border: 1px solid #b4b4b4;
	border-radius: 0;
	padding: 0 0.6rem;
	background: #fff;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.adw-fga-filter__reset {
	padding: 6px 14px;
	background: #282828;
	color: #fff;
	border: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
	white-space: nowrap;
	height: 36px;
}

.adw-fga-filter__reset:hover {
	background: #000;
}

.adw-fga-filter__reset--link {
	background: none;
	color: inherit;
	height: auto;
	padding: 0;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	font-size: inherit;
}

.adw-fga-count {
	margin: 6px 0 0;
	font-size: 12px;
	color: #888;
	min-height: 1em;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Misc ────────────────────────────────────────────────────── */
.adw-fga-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.adw-fga-no-results {
	padding: 20px;
	text-align: center;
	color: #555;
	font-size: 14px;
	border: 1px dashed #ccc;
	margin-top: 0;
}

.adw-fga-empty {
	padding: 20px;
	color: #555;
}

/* ── Block editor — agency list UI ──────────────────────────── */
.adw-fga-editor-wrap {
	padding: 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.adw-fga-editor-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px;
	text-align: center;
	gap: 12px;
}

.adw-fga-editor-icon {
	font-size: 2.5rem;
}

.adw-fga-editor-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px;
	color: #757575;
}

.adw-fga-editor-list__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	background: #1e1e1e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}

.adw-fga-editor-list__header span:nth-child(1) { width: 28px; flex-shrink: 0; }
.adw-fga-editor-list__header span:nth-child(2) { width: 70px; flex-shrink: 0; }
.adw-fga-editor-list__header span:nth-child(3) { flex: 1; }
.adw-fga-editor-list__header span:nth-child(4) { width: 120px; flex-shrink: 0; }

/* Individual row */
.adw-fga-erow {
	border-bottom: 1px solid #e8e8e8;
}

.adw-fga-erow__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	cursor: pointer;
	background: #fff;
	transition: background 0.15s;
	user-select: none;
}

.adw-fga-erow:nth-child(even) .adw-fga-erow__head {
	background: #f9f9f9;
}

.adw-fga-erow__head:hover,
.adw-fga-erow--open .adw-fga-erow__head {
	background: #282828 !important;
	color: #fff;
}

.adw-fga-erow__rank {
	width: 28px;
	flex-shrink: 0;
	font-size: 12px;
	color: #e51000;
	font-weight: 700;
}

.adw-fga-erow--open .adw-fga-erow__rank,
.adw-fga-erow__head:hover .adw-fga-erow__rank {
	color: #ff6b5b;
}

.adw-fga-erow__growth {
	width: 70px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: #26cd0d;
}

.adw-fga-erow__name {
	flex: 1;
	font-size: 14px;
}

.adw-fga-erow__type {
	width: 120px;
	flex-shrink: 0;
	font-size: 12px;
	color: #888;
}

.adw-fga-erow--open .adw-fga-erow__type {
	color: #bbb;
}

.adw-fga-erow__toggle {
	margin-left: auto;
	font-size: 10px;
	flex-shrink: 0;
}

/* Expanded description area */
.adw-fga-erow__body {
	padding: 16px 16px 20px;
	background: #f5f5f5;
	border-top: 1px solid #ddd;
}

.adw-fga-erow__meta {
	font-size: 12px;
	color: #888;
	margin: 0 0 10px;
}

.adw-fga-erow__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
	margin-bottom: 6px;
}

.adw-fga-erow__desc {
	min-height: 80px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.5;
	cursor: text;
}

.adw-fga-erow__desc:focus {
	outline: 2px solid #007cba;
	outline-offset: -1px;
}

/* ── Block editor preview (legacy) ──────────────────────────── */
.adw-fga-editor-preview {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	border: 2px dashed #ccc;
	border-radius: 4px;
	background: #f9f9f9;
	text-align: center;
}

.adw-fga-editor-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.adw-fga-editor-label { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.4rem; }
.adw-fga-editor-hint { color: #666; font-size: 0.85rem; margin: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media ( max-width: 991px ) {
	.adw-fga-wrap .adw-fga-col-primary {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding: 15px;
	}

	.adw-fga-wrap .adw-fga-col-secondary,
	.adw-fga-wrap .adw-fga-col-secondary-lead,
	.adw-fga-wrap .adw-fga-col-secondary-inner {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding: 15px;
	}

	.adw-fga-wrap .adw-fga-col-secondary-inner::before {
		content: none;
	}
}

@media ( max-width: 767px ) {
	.adw-fga-wrap .aw-fga-list-rank {
		-ms-flex: 0 0 11%;
		flex: 0 0 11%;
		max-width: 11%;
		padding-left: 0;
	}

	.adw-fga-wrap .aw-fga-list-growth {
		-ms-flex: 0 0 22%;
		flex: 0 0 22%;
		max-width: 22%;
	}

	.adw-fga-wrap .aw-fga-list-name {
		-ms-flex: 0 0 38%;
		flex: 0 0 38%;
		max-width: 38%;
	}

	/* The row's data cells add up to exactly 100%, so a slightly wider
	   real-world render (a long agency name, growth percentage, etc.) is
	   enough to wrap industry onto its own line. Rather than fight that,
	   push it to the row's right edge (margin-left:auto on its own wrapped
	   flex line) and right-align its text within that. */
	.adw-fga-wrap .aw-fga-list-industry {
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		max-width: 60%;
		margin-left: auto;
		text-align: right;
	}

	.adw-fga-wrap .aw-fga-list-size {
		display: none;
	}

	/* The "Specialty" column header is a fixed 29% width, same as the data
	   cells — fine for a data value, but the label text itself doesn't fit
	   that narrow on a phone and wraps onto its own line, breaking the header
	   row's alignment with the columns below it. Drop the label (the value
	   still shows per-row under the company name) and let "Agency" fill the
	   freed space. */
	.adw-fga-wrap .adw-fga-accordion-heading .aw-fga-list-industry {
		display: none;
	}
	.adw-fga-wrap .adw-fga-accordion-heading .aw-fga-list-name {
		-ms-flex: 1;
		flex: 1;
		max-width: none;
	}

	.adw-fga-filter-bar__inner {
		-ms-flex-direction: column;
		flex-direction: column;
		align-items: center;
	}

	.adw-fga-filter-item select {
		min-width: 100%;
		width: 100%;
	}

	/* Instant, no fade/slide-in on mobile — the entrance transition below is a
	   desktop nicety, not worth the perceived lag on a small screen. */
	.adw-fga-filter-bar,
	.adw-fga-filter-bar.fga-filter-bar--ready {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =============================================================
   Animations & transitions
   ============================================================= */

/* ── Timing custom properties ────────────────────────────────── */
.adw-fga-wrap {
	--fga-ease-spring: cubic-bezier( 0.34, 1.56, 0.64, 1 );
	--fga-ease-out:    cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
	--fga-ease-in:     cubic-bezier( 0.55, 0, 1, 0.45 );
	--fga-ease-snappy: cubic-bezier( 0.2, 0, 0, 1 );
	--fga-dur-micro:   140ms;
	--fga-dur-fast:    220ms;
	--fga-dur-base:    340ms;
	--fga-dur-enter:   540ms;
}

/* ── Filter bar entrance ─────────────────────────────────────── */
/* Base state: invisible, shifted up. JS adds fga-filter-bar--ready on init. */
.adw-fga-filter-bar {
	opacity: 0;
	transform: translateY( -8px );
}

.adw-fga-filter-bar.fga-filter-bar--ready {
	opacity: 1;
	transform: translateY( 0 );
	transition:
		opacity  320ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ) 200ms,
		transform 320ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ) 200ms;
}

/* ── Row entrance (IntersectionObserver-driven) ──────────────── */
/*
 * Rows start invisible and off-position. When the observer fires,
 * JS adds .fga-visible and sets --fga-i for stagger timing.
 * Motion blur (filter: blur) is cleared at the mid-point via a
 * separate keyframe that runs concurrently.
 */
@keyframes fga-row-enter {
	from {
		opacity: 0.55;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Rows are always visible — opacity:0 would make accordion heads unreadable
   even when the row is in the active/open state.
   The entrance animation is a visual bonus; it must not gate content. */
.adw-fga-wrap .adw-fga-entity.fga-visible {
	will-change: transform, opacity;
	animation: fga-row-enter 200ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ) both;
	animation-delay: calc( var( --fga-i, 0 ) * 6ms );
	animation-fill-mode: both;
}

/* ── Rank number ─────────────────────────────────────────────── */
/* No separate entrance animation — the rank appears with the row.
   A separate animation created a visible sequence: numbers, then data,
   then the whole row spring — which felt like three animations. */
.adw-fga-wrap .rank-listings {
	display: inline-block;
}

/* ── Accordion body — CSS-transition height ──────────────────── */
/*
 * JS sets inline height values; the transition is declared here.
 * Open: 400ms smooth curve. Close: 220ms ease-in (fast exit).
 */
.adw-fga-wrap .accordion_body {
	transition: height 400ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Close transition is applied by removing is-open, but we need the faster
   curve only when closing. We achieve this by targeting the non-open state
   directly. The JS sets height to 0 after the reflow, so a faster transition
   reads as "closing". We override here so the close path uses ease-in. */
.adw-fga-wrap .accordion_body:not( .is-open ) {
	transition: height 220ms var( --fga-ease-in, cubic-bezier( 0.55, 0, 1, 0.45 ) );
}

/* Accordion body inner content — fade + lift when opening */
.adw-fga-wrap .accordion_body .adw-fga-row {
	will-change: transform, opacity;
	opacity: 0;
	transform: translateY( 10px ) scale( 0.99 );
	transition:
		opacity   200ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ),
		transform 200ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

.adw-fga-wrap .accordion_body.is-open .adw-fga-row {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

/* When closing, content fades out immediately with no delay */
.adw-fga-wrap .accordion_body:not( .is-open ) .adw-fga-row {
	opacity: 0;
	transform: translateY( 10px ) scale( 0.99 );
	transition:
		opacity   120ms var( --fga-ease-in, cubic-bezier( 0.55, 0, 1, 0.45 ) ),
		transform 120ms var( --fga-ease-in, cubic-bezier( 0.55, 0, 1, 0.45 ) );
}

/* ── Accordion container — highlight shadow when row is active ── */
.adw-fga-wrap .accordion_container {
	transition: box-shadow 300ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

.adw-fga-wrap .accordion_container:has( .accordion_head.active_accordion ) {
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.08 );
}

/* ── Accordion head ──────────────────────────────────────────── */
/* Base transitions for background/color/box-shadow */
.adw-fga-wrap .accordion_head {
	box-shadow: inset 3px 0 0 transparent;
	transition:
		background  150ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		color       150ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		box-shadow  300ms var( --fga-ease-out,    cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

/* Keyboard focus ring — visible only for keyboard navigation */
.adw-fga-wrap .accordion_head:focus {
	outline: none;
}
.adw-fga-wrap .accordion_head:focus-visible {
	outline: 3px solid #e51000;
	outline-offset: -3px;
}

/* Red left-accent stripe on active */
.adw-fga-wrap .accordion_head.active_accordion {
	box-shadow: inset 3px 0 0 #e51000;
}

/* Agency name text — subtle horizontal nudge on hover/active */
.adw-fga-wrap .list_company_name {
	display: inline-block;
	transition: transform 150ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

.adw-fga-wrap .accordion_head:hover .list_company_name,
.adw-fga-wrap .accordion_head.active_accordion .list_company_name {
	transform: translateX( 2px );
}

/* Growth value — glow + color on hover / active */
.adw-fga-wrap .accordion_head .adw-fga-growth {
	transition:
		color       150ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		text-shadow 150ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

.adw-fga-wrap .accordion_head:hover .adw-fga-growth,
.adw-fga-wrap .accordion_head.active_accordion .adw-fga-growth {
	color: #26cd0d;
	text-shadow: 0 0 20px rgba( 38, 205, 13, 0.4 );
}

/* ── Filter — OUT: item being hidden ─────────────────────────── */
.adw-fga-wrap .adw-fga-entity.fga-out {
	will-change: transform, opacity;
	opacity: 0;
	transform: scale( 0.95 ) translateY( -6px );
	transition:
		opacity   160ms var( --fga-ease-in, cubic-bezier( 0.55, 0, 1, 0.45 ) ),
		transform 160ms var( --fga-ease-in, cubic-bezier( 0.55, 0, 1, 0.45 ) );
	pointer-events: none;
}

/* ── Filter — IN: item appearing (spring entrance, faster) ───── */
@keyframes fga-filter-enter {
	from {
		opacity: 0;
		transform: translateY( 28px ) scale( 0.97 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

.adw-fga-wrap .adw-fga-entity.fga-in {
	will-change: transform, opacity;
	animation: fga-filter-enter 360ms var( --fga-ease-spring, cubic-bezier( 0.34, 1.56, 0.64, 1 ) ) both;
	/* --fga-filter-i is capped at 10 in JS */
	animation-delay: calc( var( --fga-filter-i, 0 ) * 22ms );
}

/* ── Pagination direction-aware transitions ──────────────────── */
/*
 * JS sets data-direction="next" or "prev" on .adw-fga-wrap before
 * the page update, and removes it 400ms after.
 * fga-in is applied to incoming items; fga-out to outgoing items.
 */
@keyframes fga-page-enter-next {
	from {
		opacity: 0;
		transform: translateX( 40px );
	}
	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

@keyframes fga-page-enter-prev {
	from {
		opacity: 0;
		transform: translateX( -40px );
	}
	to {
		opacity: 1;
		transform: translateX( 0 );
	}
}

.adw-fga-wrap[data-direction="next"] .adw-fga-entity.fga-out {
	transform: translateX( -40px );
	opacity: 0;
	transition:
		opacity   280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ),
		transform 280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

.adw-fga-wrap[data-direction="prev"] .adw-fga-entity.fga-out {
	transform: translateX( 40px );
	opacity: 0;
	transition:
		opacity   280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ),
		transform 280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

.adw-fga-wrap[data-direction="next"] .adw-fga-entity.fga-in {
	animation: fga-page-enter-next 280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ) both;
	animation-delay: calc( var( --fga-filter-i, 0 ) * 22ms );
}

.adw-fga-wrap[data-direction="prev"] .adw-fga-entity.fga-in {
	animation: fga-page-enter-prev 280ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) ) both;
	animation-delay: calc( var( --fga-filter-i, 0 ) * 22ms );
}

/* ── Filter selects — focus ring ─────────────────────────────── */
.adw-fga-filter-item select {
	transition:
		border-color 140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		box-shadow   140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

.adw-fga-filter-item select:focus {
	outline: none;
	border-color: #282828;
	box-shadow: 0 0 0 2px rgba( 40, 40, 40, 0.15 );
}

/* ── Reset button ────────────────────────────────────────────── */
.adw-fga-filter__reset {
	will-change: transform;
	transition:
		background 140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) ),
		transform  80ms  var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

.adw-fga-filter__reset:active {
	transform: scale( 0.96 );
}

/* ── Agency count fade ───────────────────────────────────────── */
.adw-fga-count {
	transition: opacity 200ms var( --fga-ease-out, cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) );
}

/* ── Capability pills — subtle hover ────────────────────────── */
.adw-fga-wrap .full-cap-listings {
	transition: filter 140ms var( --fga-ease-snappy, cubic-bezier( 0.2, 0, 0, 1 ) );
}

/* filter, not a hard-coded background: works uniformly across the
   per-field accent colors (specialty/region/capabilities) above. */
.adw-fga-wrap .full-cap-listings:hover {
	filter: brightness( 0.85 );
}

/* ── Pagination ──────────────────────────────────────────────── */
.adw-fga-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 16px 8px;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.adw-fga-pagination__info {
	font-size: 13px;
	color: #777;
	letter-spacing: 0.01em;
}

.adw-fga-pagination__info strong {
	color: #282828;
	font-weight: 700;
}

.adw-fga-pagination__controls {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	justify-content: center;
}

.adw-fga-page-btn {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #d0d0d0;
	background: #fff;
	color: #282828;
	font-size: 13px;
	font-weight: 600;
	font-family: "Flama", "Helvetica Neue", Helvetica, Arial, sans-serif;
	cursor: pointer;
	will-change: transform;
	transition:
		background    150ms var( --fga-ease-spring, cubic-bezier( 0.34, 1.56, 0.64, 1 ) ),
		color         150ms var( --fga-ease-spring, cubic-bezier( 0.34, 1.56, 0.64, 1 ) ),
		border-color  150ms var( --fga-ease-spring, cubic-bezier( 0.34, 1.56, 0.64, 1 ) ),
		transform     150ms var( --fga-ease-spring, cubic-bezier( 0.34, 1.56, 0.64, 1 ) );
	line-height: 1;
}

.adw-fga-page-btn:hover:not( :disabled ):not( .is-active ) {
	background: #282828;
	color: #fff;
	border-color: #282828;
	transform: scale( 1.04 );
}

/* Press / active state — fast snap down */
.adw-fga-page-btn:active:not( :disabled ):not( .is-active ) {
	transform: scale( 0.94 );
	transition-duration: 80ms;
}

.adw-fga-page-btn.is-active {
	background: #e51000;
	color: #fff;
	border-color: #e51000;
	cursor: default;
	/* No scale on press for active page button */
}

.adw-fga-page-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.adw-fga-page-prev,
.adw-fga-page-next {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0 14px;
}

.adw-fga-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 36px;
	color: #999;
	font-size: 14px;
	pointer-events: none;
	user-select: none;
}

@media ( max-width: 767px ) {
	.adw-fga-page-prev,
	.adw-fga-page-next {
		font-size: 11px;
		padding: 0 10px;
	}
}

/* ── Respect reduced motion ──────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {

	/* ── Kill all animations ── */
	.adw-fga-wrap .adw-fga-entity,
	.adw-fga-wrap .adw-fga-entity.fga-visible,
	.adw-fga-wrap .adw-fga-entity.fga-in,
	.adw-fga-wrap[data-direction="next"] .adw-fga-entity.fga-in,
	.adw-fga-wrap[data-direction="prev"] .adw-fga-entity.fga-in {
		animation: none !important;
		animation-delay: 0ms !important;
	}

	/* Ensure rows are always visible with no fill-mode remnants */
	.adw-fga-wrap .adw-fga-entity,
	.adw-fga-wrap .adw-fga-entity.fga-visible,
	.adw-fga-wrap .adw-fga-entity.fga-in {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	/* ── Kill all transitions ── */
	.adw-fga-filter-bar,
	.adw-fga-filter-bar.fga-filter-bar--ready,
	.adw-fga-wrap .accordion_body,
	.adw-fga-wrap .accordion_body:not( .is-open ),
	.adw-fga-wrap .accordion_body .adw-fga-row,
	.adw-fga-wrap .accordion_body:not( .is-open ) .adw-fga-row,
	.adw-fga-wrap .accordion_container,
	.adw-fga-wrap .accordion_head,
	.adw-fga-wrap .list_company_name,
	.adw-fga-wrap .accordion_head .adw-fga-growth,
	.adw-fga-wrap .adw-fga-entity.fga-out,
	.adw-fga-wrap[data-direction="next"] .adw-fga-entity.fga-out,
	.adw-fga-wrap[data-direction="prev"] .adw-fga-entity.fga-out,
	.adw-fga-filter-item select,
	.adw-fga-filter__reset,
	.adw-fga-count,
	.adw-fga-wrap .full-cap-listings,
	.adw-fga-page-btn {
		transition: none !important;
	}

	/* Show filter bar immediately — no slide-in */
	.adw-fga-filter-bar {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Accordion opens/closes instantly — no height animation */
	.adw-fga-wrap .accordion_body {
		height: auto !important;
		overflow: visible !important;
	}

	/* Accordion body content visible immediately — no fade-in */
	.adw-fga-wrap .accordion_body.is-open .adw-fga-row,
	.adw-fga-wrap .accordion_body .adw-fga-row {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Suppress scroll behaviour triggered by JS smooth scroll */
	.adw-fga-wrap {
		scroll-behavior: auto !important;
	}
}

/* =============================================================
   Year navigation + category tabs — self-contained, so nothing
   depends on the theme or SabaiApps CSS after cutover.
   ============================================================= */

.adw-fga-year-nav {
	margin: 0 0 8px;
	border-bottom: 1px solid #e3e3e5;
}
.adw-fga-year-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.adw-fga-year-nav li {
	margin: 0;
}
.adw-fga-year-nav a {
	display: inline-block;
	padding: 10px 16px;
	color: #55575d;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.adw-fga-year-nav a:hover,
.adw-fga-year-nav a:focus {
	color: #111;
}
.adw-fga-year-nav a.active {
	color: #111;
	border-bottom-color: #111;
}

.adw-fga-tabs {
	margin: 14px 0 22px;
}
.adw-fga-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.adw-fga-tabs li {
	margin: 0;
}
.adw-fga-tabs a {
	display: inline-block;
	padding: 8px 15px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	background: #f1f1f3;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.adw-fga-tabs a:hover,
.adw-fga-tabs a:focus {
	background: #e4e4e8;
	color: #111;
}
.adw-fga-tabs a.active {
	background: #111;
	color: #fff;
}

/* Hero + intro. Fixed to production's real hero proportions (e.g.
   FGA-desk-3220x972.jpg — a wide, short banner) rather than height:auto,
   so the fallback placeholder (a generic 16:9 image, much taller than
   that) renders at the same height as a real hero instead of towering
   over the page. object-fit: cover crops evenly top/bottom for anything
   that isn't already this ratio; correctly-cropped hero uploads are
   unaffected. */
.adw-fga-hero-image {
	position: relative;
	aspect-ratio: 3220 / 972;
	overflow: hidden;
}
.adw-fga-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.adw-fga-page-title {
	margin: 18px 0 6px;
}
.adw-fga-intro {
	margin: 28px 0 10px;
	padding: 0 20px;
	color: #55575d;
}
.adw-fga-ad-slot {
	margin: 16px 0;
	text-align: center;
}

/* Agency description + website in the expanded row */
.adw-fga-desc {
	margin: 0 0 12px;
	line-height: 1.55;
	color: #2c2c2e;
}
.adw-fga-desc p {
	margin: 0 0 10px;
}
.adw-fga-website {
	word-break: break-all;
}

/* Draft-year marker (only editors see draft years in the nav) */
.adw-fga-draft-tag {
	font-size: 0.78em;
	font-weight: 600;
	color: #d63638;
}
.adw-fga-year-nav a.adw-fga-year-draft {
	opacity: 0.85;
}

/* =============================================================
   Prod parity: year picker over hero image, prod-style tabs,
   title carried by the hero image.
   ============================================================= */

/* Desktop overlay vs. mobile normal-flow block — self-contained show/hide,
   deliberately NOT the theme's Bootstrap d-*/d-md-* utilities, so this never
   depends on assumptions about that utility CSS being present/scoped as
   expected on this virtual (non-post, non-archive) template. */
.adw-fga-hero-overlay-meta {
	display: block;
}
.adw-fga-hero-mobile-meta {
	display: none;
}

/* "Presented by" sponsor badge overlaid front and center, directly above the
   year nav (which anchors to the hero image's own bottom: 24px). ~1.5x a
   typical small credit on desktop, where there's room for it. Logo sizing is
   height-constrained + object-fit:contain rather than a fixed aspect-ratio
   box, since sponsor logos come in wildly different shapes (wide wordmarks,
   square marks, etc.) and this scales any of them evenly without cropping or
   stretching. A translucent white card keeps the label legible over any
   hero image. */
.adw-fga-hero-image .adw-fga-sponsor {
	position: absolute;
	bottom: 78px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: rgba( 255, 255, 255, 0.72 );
	padding: 12px 20px;
	border-radius: 17px;
}
.adw-fga-sponsor__label {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #55575d;
	white-space: nowrap;
}
.adw-fga-sponsor__logo-link {
	display: inline-flex;
	align-items: center;
}
.adw-fga-sponsor__logo {
	display: block;
	height: 46px;
	max-height: 46px;
	width: auto;
	object-fit: contain;
}

/* Year picker overlaid on the bottom of the hero image (as on prod). Anchored
   to .adw-fga-hero-image (fixed aspect-ratio) rather than .adw-fga-hero (the
   whole header) so growing/shrinking intro copy never shifts its position. */
.adw-fga-hero {
	position: relative;
}
.adw-fga-hero-image .adw-fga-year-nav {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	margin: 0;
	border: 0;
	z-index: 3;
}
.adw-fga-hero-image .adw-fga-year-nav ul {
	justify-content: center;
	gap: 18px;
}
.adw-fga-hero-image .adw-fga-year-nav a {
	color: #fff;
	border: 0;
	padding: 1px 10px 2px;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}
.adw-fga-hero-image .adw-fga-year-nav a.active {
	background: #000;
	color: #fff;
}

/* Mobile: the year picker + sponsor badge come off the hero image entirely,
   rendered as a separate normal-flow block below it (.adw-fga-hero-mobile-meta,
   shown below instead of .adw-fga-hero-overlay-meta) — a short, narrow hero
   has no room to overlay both without clipping or overlapping the intro copy,
   and this also lets the image crop in tighter on the centered logo instead
   of competing for space. The year picker here is a plain <select>
   (adw_fga_render_year_select()), not the tab-list nav, so it's simple
   normal-flow content with no absolute positioning and no opening animation. */
@media ( max-width: 767px ) {
	.adw-fga-hero-overlay-meta {
		display: none;
	}
	.adw-fga-hero-mobile-meta {
		display: block;
		text-align: center;
		padding: 16px 20px 0;
	}
	.adw-fga-hero-image {
		aspect-ratio: 4 / 3;
	}
	.adw-fga-hero-mobile-meta .adw-fga-sponsor {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	/* Mobile gets its own logo size instead of reusing the desktop value verbatim. */
	.adw-fga-hero-mobile-meta .adw-fga-sponsor__logo {
		display: block;
		height: 46px;
		max-height: 28px;
		margin-bottom: 22px;
		width: auto;
		object-fit: contain;
	}
	.adw-fga-year-select {
		margin-top: 14px;
	}
	.adw-fga-year-select__control {
		min-width: 160px;
		height: 40px;
		font-size: 15px;
		font-weight: 700;
		color: #333;
		text-align: center;
		border: 1px solid #b4b4b4;
		padding: 0 12px;
		background: #fff;
	}
}

/* The title is carried by the hero image (as on prod). Keep it for SEO/a11y
   but hide it visually so it doesn't duplicate the image text. */
.adw-fga-page-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Prod-style category tabs: uppercase, rounded-top, white active tab,
   white-on-dark inactive. Overrides the earlier pill styling. */
.adw-fga-tabs ul {
	gap: 2px;
	align-items: flex-end;
}
.adw-fga-tabs a,
.adw-fga-tabs .tablinks {
	background: transparent;
	color: #fff;
	border-radius: 5px 5px 0 0;
	padding: 16px 14px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.adw-fga-tabs a:hover,
.adw-fga-tabs a:focus,
.adw-fga-tabs .tablinks:hover,
.adw-fga-tabs .tablinks:focus {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}
.adw-fga-tabs a.active,
.adw-fga-tabs .tablinks.active {
	background: #fff;
	color: #000;
}

/* Deep-link anchors (#agency-name): offset the jump for the sticky header. */
.adw-fga-entity {
	scroll-margin-top: 100px;
}

/* Tab bar redesign — overrides the legacy dark-pill styling from adw-listing-ordering/custom.css, scoped to .adw-fga-tabs. Colors use Bootstrap's dark-mode vars with light-mode fallbacks. */

.adw-fga-tabs,
.year_listing nav.tabs.--jsfied {
	position: relative;
	margin: 0 0 32px !important;
	border-bottom: 1px solid var( --bs-border-color, #e4e4e8 );
	background: transparent !important;
}
.adw-fga-tabs .-primary {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	/* Keep at 0 — doAdapt() sums offsetWidth without accounting for gap, so any gap here under-measures the row. */
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	/* Must stay visible, not hidden — overflow-x:hidden forces overflow-y:auto too, which clips the "More" dropdown below it. */
	overflow-x: visible !important;
}
/* Fallback for when create_more_structure() hasn't run (yet, or at all) — no "More" button exists to hide overflow, so scroll instead of clipping it away. */
.adw-fga-tabs:not( .--jsfied ) .-primary {
	overflow-x: auto !important;
	/* Explicit styling, not scrollbar-width:thin/OS defaults — macOS overlay scrollbars auto-hide and would look just as "invisible". */
	scrollbar-width: thin;
	scrollbar-color: var( --bs-secondary-color, #6b6b74 ) transparent;
}
.adw-fga-tabs:not( .--jsfied ) .-primary::-webkit-scrollbar {
	height: 6px;
	display: block;
}
.adw-fga-tabs:not( .--jsfied ) .-primary::-webkit-scrollbar-thumb {
	background: var( --bs-secondary-color, #6b6b74 );
	border-radius: 3px;
}
.adw-fga-tabs:not( .--jsfied ) .-primary::-webkit-scrollbar-track {
	background: transparent;
}
.adw-fga-tabs .-primary > li {
	flex: 0 0 auto !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.adw-fga-tabs .-primary > li:first-child,
.adw-fga-tabs .-primary > li:last-child {
	border-radius: 0 !important;
}
.adw-fga-tabs .-primary > li > a,
.adw-fga-tabs .-primary > li > button {
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 16px 18px !important;
	margin: 0 !important;
	background: transparent !important;
	color: var( --bs-secondary-color, #6b6b74 ) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
	white-space: nowrap;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.adw-fga-tabs .-primary > li > a:hover,
.adw-fga-tabs .-primary > li > button:hover {
	background: transparent !important;
	color: var( --bs-heading-color, #111 ) !important;
	border-bottom-color: var( --bs-border-color, #d7d7db ) !important;
	border-radius: 0 !important;
}
.adw-fga-tabs .-primary > li > a.active,
.adw-fga-tabs .-primary > li > a:active,
.adw-fga-tabs .-primary > li > button:active {
	background: transparent !important;
	color: var( --bs-heading-color, #111 ) !important;
	border-bottom-color: var( --bs-aw-primary, #e50000 ) !important;
	border-radius: 0 !important;
}

/* "More" toggle — plain tab styling, not the legacy boxed dark pill. */
.adw-fga-tabs .-primary .-more {
	position: relative !important;
	margin-left: auto !important;
	padding: 0 !important;
	background: transparent !important;
}
.adw-fga-tabs .-primary .-more > button {
	position: static !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 16px 18px !important;
	background: transparent !important;
	border-bottom: 3px solid transparent !important;
	color: var( --bs-secondary-color, #6b6b74 ) !important;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.adw-fga-tabs .-primary .-more > button::before {
	content: 'More';
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: inherit;
}
.adw-fga-tabs .-primary .-more > button span.selected_category {
	display: none !important;
}
.adw-fga-tabs .-primary .-more > button span.arrow {
	position: static !important;
	float: none !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 9px !important;
	height: 9px !important;
	margin: 0 !important;
	display: inline-flex !important;
	transition: transform 0.15s ease;
}
.adw-fga-tabs .-primary .-more > button span.arrow svg {
	width: 9px !important;
	height: 9px !important;
	display: block;
}
.adw-fga-tabs .-primary .-more > button .arrow_path {
	fill: var( --bs-secondary-color, #6b6b74 ) !important;
	opacity: 1 !important;
}
.adw-fga-tabs .-primary .-more:hover > button,
.adw-fga-tabs .-primary .-more.active > button,
.adw-fga-tabs.--show-secondary .-primary .-more > button {
	color: var( --bs-heading-color, #111 ) !important;
	background: transparent !important;
}
.adw-fga-tabs .-primary .-more:hover > button .arrow_path,
.adw-fga-tabs .-primary .-more.active > button .arrow_path,
.adw-fga-tabs.--show-secondary .-primary .-more > button .arrow_path {
	fill: var( --bs-heading-color, #111 ) !important;
	opacity: 1 !important;
}
.adw-fga-tabs .-primary .-more.active > button {
	border-bottom-color: var( --bs-aw-primary, #e50000 ) !important;
}
.adw-fga-tabs.--show-secondary .-primary .-more > button span.arrow {
	transform: rotate( 180deg );
}

/* Dropdown panel — flips with the page background, not the legacy hardcoded-dark list. */
.adw-fga-tabs .-secondary {
	min-width: 220px !important;
	max-width: 280px !important;
	margin-top: 8px !important;
	padding: 6px !important;
	background: var( --bs-body-bg, #fff ) !important;
	border-radius: 10px !important;
	border: 1px solid var( --bs-border-color, #ececef ) !important;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.14 ) !important;
}
.adw-fga-tabs .-secondary li {
	background: transparent !important;
	padding: 0 !important;
}
.adw-fga-tabs .-secondary a,
.adw-fga-tabs .-secondary button {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	background: transparent !important;
	color: var( --bs-body-color, #333 ) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em;
	text-align: left !important;
	border: 0 !important;
	border-radius: 6px !important;
	text-decoration: none !important;
}
.adw-fga-tabs .-secondary a:hover,
.adw-fga-tabs .-secondary button:hover {
	background: var( --bs-tertiary-bg, #f4f4f6 ) !important;
	color: var( --bs-heading-color, #111 ) !important;
}
.adw-fga-tabs .-secondary a.active,
.adw-fga-tabs .-secondary button.active {
	background: var( --bs-tertiary-bg, #f4f4f6 ) !important;
	color: var( --bs-aw-primary, #e50000 ) !important;
}

@media ( max-width: 767px ) {
	.adw-fga-tabs .-primary {
		flex-wrap: nowrap !important;
		/* Same as base rule: must stay visible or the "More" dropdown gets clipped. */
		overflow-x: visible !important;
	}
	.adw-fga-tabs .-primary > li {
		flex: 0 0 auto !important;
	}
	.adw-fga-tabs .-primary > li > a,
	.adw-fga-tabs .-primary > li > button {
		padding: 14px 14px !important;
		font-size: 12px !important;
	}
	/* doAdapt()'s fit-as-many-as-possible measurement doesn't leave enough room
	   on a narrow screen without overflowing the page horizontally. Skip it
	   entirely on mobile: collapse straight to a single full-width "More"
	   toggle showing the active category, with every option one tap away in
	   the dropdown — no scrolling, no overflow, regardless of category count. */
	.adw-fga-tabs .-primary > li:not( .-more ) {
		display: none !important;
	}
	.adw-fga-tabs .-primary .-more {
		margin-left: 0 !important;
		width: 100%;
	}
	.adw-fga-tabs .-primary .-more > button {
		width: 100%;
		justify-content: space-between !important;
	}
	.adw-fga-tabs .-primary .-more > button::before {
		content: none;
	}
	.adw-fga-tabs .-primary .-more > button span.selected_category {
		display: inline !important;
	}
	.adw-fga-tabs .-primary .-more > button span.arrow {
		position: static !important;
		float: none !important;
		width: 9px !important;
		height: 9px !important;
	}
}