/**
 * Agent profile page.
 *
 * Scoped under .propseller-agent-profile so nothing leaks into the rest of the site, and so
 * the specificity beats Listify's and the child theme's global heading/typography rules
 * (several of which are !important).
 *
 * Design reference: Figma "Agent Profile Page" — desktop 7889:4308, mobile 7889:4311.
 */

.propseller-agent-profile {
	/* Brand tokens mirror listify-child/style.css :root, with the two the child theme lacks. */
	--ap-blue: var(--propseller-blue, #3f5cd6);
	--ap-steel: var(--steel-blue, #8a9deb);
	--ap-metallic: var(--metallic-blue, #eceffb);
	--ap-gold: var(--gold-yellow, #ffb400);
	--ap-onyx: var(--onyx-black, #221f2b);
	--ap-ash: var(--ash-grey, #6b6d84);
	--ap-coal: #2b2935;
	--ap-mercury: #efefef;
	--ap-border: #dcdcdc;
	--ap-white: #fff;

	--ap-container: 1140px;
	--ap-gutter: 24px;
	--ap-section-y: 100px;

	--ap-radius: 10px;
	--ap-radius-lg: 16px;
	--ap-card-shadow: 0 0 50px rgba(34, 31, 43, 0.1);

	--ap-serif: "Source Serif Pro", Georgia, serif;
	--ap-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Listify wraps everything in a padded, max-width #content; these sections are full-bleed. */
.propseller-agent-profile #content.site-content {
	margin: 0;
	padding: 0;
	max-width: none;
}

.ap-page {
	font-family: var(--ap-sans);
	color: var(--ap-onyx);
}

.ap-page *,
.ap-page *::before,
.ap-page *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */

.ap-page .ap-section {
	position: relative;
	padding: var(--ap-section-y) var(--ap-gutter);
	overflow: hidden;
}

.ap-page .ap-container {
	width: 100%;
	max-width: var(--ap-container);
	margin: 0 auto;
}

.ap-page .ap-section-header {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin-bottom: 50px;
}

.ap-page .ap-section-header--center {
	align-items: center;
	text-align: center;
}

.ap-page .ap-section-header--split {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

.ap-page .ap-heading {
	margin: 0;
	padding: 0;
	font-family: var(--ap-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ap-onyx);
	text-transform: none;
}

.ap-page .ap-heading__accent {
	font-family: var(--ap-serif);
	font-style: italic;
	font-weight: 600;
	color: var(--ap-blue);
}

.ap-page .ap-eyebrow {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.ap-page .ap-eyebrow--blue {
	color: var(--ap-blue);
}

.ap-page .ap-eyebrow--steel {
	color: var(--ap-steel);
}

.ap-page .ap-rule {
	display: block;
	width: 40px;
	height: 4px;
	background: var(--ap-blue);
	border-radius: 4px;
}

.ap-page .ap-rule--full {
	width: 100%;
	height: 1px;
	background: rgba(34, 31, 43, 0.12);
	border-radius: 0;
}

/* Dark sections invert the palette. */
.ap-page .ap-hero,
.ap-page .ap-awards,
.ap-page .ap-tours,
.ap-page .ap-contact {
	color: var(--ap-white);
}

.ap-page .ap-hero .ap-heading,
.ap-page .ap-awards .ap-heading,
.ap-page .ap-tours .ap-heading,
.ap-page .ap-contact .ap-heading {
	color: var(--ap-white);
}

.ap-page .ap-tours .ap-heading__accent,
.ap-page .ap-contact .ap-heading__accent {
	color: var(--ap-steel);
}

/* ---------------------------------------------------------------------------
   Stars
   --------------------------------------------------------------------------- */

.ap-page .ap-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	flex: none;
}

.ap-page .ap-stars__star {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.ap-page .ap-stars__star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ap-page .ap-stars--gold {
	color: var(--ap-gold);
}

.ap-page .ap-stars--light {
	color: var(--ap-steel);
}

.ap-page .ap-stars__star.is-empty {
	opacity: 0.25;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.ap-page .ap-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
}

.ap-page .ap-cta-slot {
	display: flex;
}

.ap-page .ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 51px;
	padding: 12px 50px;
	border-radius: 3px;
	border: 1px solid transparent;
	font-family: var(--ap-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ap-page .ap-btn svg {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
}

.ap-page .ap-btn--primary,
.ap-page .ap-btn--primary:visited {
	background: var(--ap-blue);
	border-color: var(--ap-blue);
	color: var(--ap-white);
}

.ap-page .ap-btn--primary:hover,
.ap-page .ap-btn--primary:focus {
	background: #3450c2;
	border-color: #3450c2;
	color: var(--ap-white);
}

.ap-page .ap-btn--ghost,
.ap-page .ap-btn--ghost:visited {
	background: transparent;
	border-color: var(--ap-white);
	color: var(--ap-white);
}

.ap-page .ap-btn--ghost:hover,
.ap-page .ap-btn--ghost:focus {
	background: var(--ap-white);
	border-color: var(--ap-white);
	color: var(--ap-onyx);
}

.ap-page .ap-btn:focus-visible {
	outline: 2px solid var(--ap-steel);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */

.ap-page .ap-hero {
	background-image: linear-gradient(113.29deg, #221f2b 25.59%, #42404f 166.54%);
}

.ap-page .ap-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.ap-page .ap-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	max-width: 600px;
}

.ap-page .ap-breadcrumb {
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-white);
	margin-bottom: 26px;
}

.ap-page .ap-breadcrumb a,
.ap-page .ap-breadcrumb > span:first-child,
.ap-page .ap-breadcrumb__sep {
	color: var(--ap-ash);
	text-decoration: none;
}

.ap-page .ap-breadcrumb a:hover {
	color: var(--ap-white);
	text-decoration: underline;
}

.ap-page .ap-hero__region {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 26px;
	color: var(--ap-steel);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.ap-page .ap-hero__region svg {
	display: block;
	width: 10px;
	height: 15px;
	flex: none;
}

.ap-page .ap-hero__name {
	margin: 0;
	font-family: var(--ap-serif);
	font-size: 50px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ap-white);
	text-transform: none;
}

.ap-page .ap-hero__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-white);
}

.ap-page .ap-hero__cea {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ap-ash);
}

.ap-page .ap-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 12px 0 0;
	padding: 8px 20px;
	border: 1px solid var(--ap-blue);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
	color: var(--ap-white);
	font-size: 16px;
	line-height: 1.5;
}

.ap-page .ap-rating-pill__score,
.ap-page .ap-rating-pill__count {
	font-weight: 700;
}

.ap-page .ap-rating-pill__divider {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.4);
}

.ap-page .ap-hero .ap-buttons {
	margin-top: 12px;
}

/* Portrait card: fixed 523px square in the design, fluid below that. Inner offsets are
   percentages of the card so the crop holds at any width. */
.ap-page .ap-hero__portrait {
	position: relative;
	flex: none;
	width: min(523px, 100%);
	aspect-ratio: 1 / 1;
	border-radius: var(--ap-radius-lg);
	overflow: hidden;
	background-image: linear-gradient(77.34deg, #221f2b 13.74%, #42404f 100%);
	box-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
}

.ap-page .ap-hero__portrait::before {
	content: "";
	position: absolute;
	left: 36.52%;
	top: 30.59%;
	width: 114.72%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(
		circle,
		rgba(63, 92, 214, 1) 0%,
		rgba(63, 92, 214, 0.92) 16%,
		rgba(63, 92, 214, 0.6) 28%,
		rgba(63, 92, 214, 0.22) 40%,
		rgba(63, 92, 214, 0) 56%
	);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ap-page .ap-hero__portrait img {
	position: absolute;
	top: -1.91%;
	left: calc(50% - 3.16%);
	width: 132.7%;
	height: 139.77%;
	max-width: none;
	transform: translateX(-50%);
	object-fit: cover;
	object-position: top center;
}

/* ---------------------------------------------------------------------------
   2. At a Glance
   --------------------------------------------------------------------------- */

.ap-page .ap-glance {
	background: var(--ap-metallic);
}

.ap-page .ap-glance__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-page .ap-glance__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.ap-page .ap-glance__item + .ap-glance__item::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 50%;
	width: 1px;
	height: 200px;
	background: rgba(34, 31, 43, 0.12);
	transform: translateY(-50%);
}

.ap-page .ap-glance__value {
	margin: 0;
	font-family: var(--ap-serif);
	font-size: 60px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ap-blue);
}

.ap-page .ap-glance__label {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ap-onyx);
}

.ap-page .ap-glance__description {
	margin: 12px 0 0;
	max-width: 32ch;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ap-ash);
}

/* ---------------------------------------------------------------------------
   3. About
   --------------------------------------------------------------------------- */

.ap-page .ap-about {
	background: var(--ap-white);
}

.ap-page .ap-about__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.ap-page .ap-about__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	width: 100%;
	max-width: 550px;
}

.ap-page .ap-about__bio p {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-about__bio p:last-child {
	margin-bottom: 0;
}

.ap-page .ap-about__languages {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.ap-page .ap-about__languages span {
	color: var(--ap-ash);
}

.ap-page .ap-about__coverage {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.ap-page .ap-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-page .ap-pill {
	padding: 12px 20px;
	border-radius: 50px;
	background: var(--ap-metallic);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-types {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-page .ap-types__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1.5;
}

.ap-page .ap-types__item img {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
}

.ap-page .ap-credentials {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: min(523px, 100%);
	padding: 40px;
	border-radius: var(--ap-radius-lg);
	background: var(--ap-metallic);
	box-shadow: var(--ap-card-shadow);
}

.ap-page .ap-credentials__title {
	margin: 0;
	font-family: var(--ap-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ap-onyx);
	text-transform: none;
}

.ap-page .ap-credentials__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-page .ap-credentials__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-credentials__check {
	display: flex;
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 5px;
	color: var(--ap-blue);
}

.ap-page .ap-credentials__check svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ap-page .ap-credentials__highlight {
	padding-top: 40px;
	border-top: 1px solid rgba(34, 31, 43, 0.12);
}

.ap-page .ap-credentials__highlight-value {
	margin: 0 0 16px;
	font-family: var(--ap-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 36px;
	line-height: 1.5;
	color: var(--ap-blue);
}

.ap-page .ap-credentials__highlight-description {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-ash);
}

/* ---------------------------------------------------------------------------
   4. Awards
   --------------------------------------------------------------------------- */

.ap-page .ap-awards {
	background: var(--ap-onyx);
}

.ap-page .ap-awards__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 50px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ap-steel);
}

.ap-page .ap-awards__eyebrow::before,
.ap-page .ap-awards__eyebrow::after {
	content: "";
	width: 60px;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
}

.ap-page .ap-awards__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-page .ap-award {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 5px;
}

/* The laurel asset is landscape (105 x 30) and stands up via a -90deg rotation. A rotated
   element keeps its pre-rotation layout box, so the wrapper owns the upright 30 x 105 box
   and the image is rotated inside it. */
.ap-page .ap-award__wreath {
	position: relative;
	display: block;
	width: 30px;
	height: 105px;
	flex: none;
}

.ap-page .ap-award__wreath img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 105px;
	height: 30px;
	max-width: none;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.ap-page .ap-award__wreath--left {
	transform: scaleX(-1);
}

.ap-page .ap-award__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 180px;
	text-align: center;
}

.ap-page .ap-award__name {
	font-family: var(--ap-serif);
	font-size: 20px;
	line-height: 1.5;
	color: var(--ap-white);
}

.ap-page .ap-award__description {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ap-white);
}

.ap-page .ap-award__year {
	font-size: 9px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--ap-ash);
}

/* ---------------------------------------------------------------------------
   5. Meet the agent
   --------------------------------------------------------------------------- */

.ap-page .ap-meet {
	background: var(--ap-metallic);
}

.ap-page .ap-meet__inner {
	display: grid;
	grid-template-columns: minmax(0, 523px) minmax(0, 550px);
	grid-template-areas:
		"media head"
		"media quote";
	align-content: center;
	justify-content: space-between;
	column-gap: 40px;
	row-gap: 50px;
}

.ap-page .ap-meet__head {
	grid-area: head;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.ap-page .ap-meet__media {
	grid-area: media;
	align-self: center;
	justify-self: center;
}

.ap-page .ap-meet__quote {
	grid-area: quote;
	align-self: start;
}

.ap-page .ap-meet__intro {
	margin: 0;
	padding-left: 12px;
	border-left: 4px solid rgba(34, 31, 43, 0.15);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-quote {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ap-page .ap-quote__mark {
	display: flex;
	flex: none;
	width: 30px;
	height: 25px;
	color: var(--ap-blue);
}

.ap-page .ap-quote__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ap-page .ap-quote p {
	margin: 0;
	padding-top: 8px;
	font-family: var(--ap-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-video-card {
	position: relative;
	display: block;
	width: min(337px, 100%);
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: var(--ap-radius);
	overflow: hidden;
	background: none;
	box-shadow: var(--ap-card-shadow);
	aspect-ratio: 337 / 600;
}

.ap-page .ap-video-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap-page .ap-video-card.is-playable {
	cursor: pointer;
}

.ap-page .ap-video-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(34, 31, 43, 0.6);
	color: var(--ap-white);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.ap-page .ap-video-card:hover .ap-video-card__play {
	background: var(--ap-blue);
}

/* ---------------------------------------------------------------------------
   6. Home tours
   --------------------------------------------------------------------------- */

.ap-page .ap-tours {
	background: var(--ap-onyx);
}

.ap-page .ap-tours__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.ap-page .ap-tours__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
	width: 100%;
	max-width: 550px;
}

.ap-page .ap-tours__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-white);
}

.ap-page .ap-tours__playlist {
	width: 100%;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.ap-page .ap-tours__entry {
	margin: 0;
	border-left: 4px solid transparent;
	margin-left: -1px;
	transition: border-color 0.2s ease;
}

.ap-page .ap-tours__entry.is-active {
	border-left-color: var(--ap-blue);
}

.ap-page .ap-tours__button {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 30px 0 30px 24px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: var(--ap-ash);
	transition: color 0.2s ease;
}

.ap-page .ap-tours__entry.is-active .ap-tours__button,
.ap-page .ap-tours__button:hover {
	color: var(--ap-white);
}

.ap-page .ap-tours__number {
	flex: none;
	font-family: var(--ap-serif);
	font-style: italic;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.5;
	color: inherit;
}

.ap-page .ap-tours__entry.is-active .ap-tours__number {
	color: var(--ap-steel);
}

.ap-page .ap-tours__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: inherit;
}

.ap-page .ap-tours__media {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: min(523px, 100%);
}

.ap-page .ap-phone {
	position: relative;
	width: min(341px, 100%);
	aspect-ratio: 341 / 700;
	flex: none;
}

.ap-page .ap-phone__screen {
	position: absolute;
	left: 48.97%;
	top: 50%;
	width: 92.08%;
	height: 96.86%;
	border-radius: var(--ap-radius-lg);
	overflow: hidden;
	transform: translate(-50%, -50%);
	background: var(--ap-coal);
}

.ap-page .ap-phone__screen img {
	position: absolute;
	left: 50%;
	top: 0;
	width: 122.3%;
	height: 100%;
	max-width: none;
	transform: translateX(-50%);
	object-fit: cover;
}

/* Added by agent-profile.js only when the active tour actually has a video. */
.ap-page .ap-phone__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(34, 31, 43, 0.6);
	color: var(--ap-white);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ap-page .ap-phone__play:hover,
.ap-page .ap-phone__play:focus-visible {
	background: var(--ap-blue);
}

.ap-page .ap-phone__frame {
	position: absolute;
	left: -4.91%;
	top: -2.61%;
	width: 109.81%;
	height: 105.24%;
	max-width: none;
	pointer-events: none;
}

.ap-page .ap-tours__progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: none;
}

.ap-page .ap-tours__dot {
	width: 8px;
	height: 8px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.2);
	transition: height 0.2s ease, background-color 0.2s ease;
}

.ap-page .ap-tours__dot.is-active {
	height: 32px;
	background: var(--ap-blue);
}

/* ---------------------------------------------------------------------------
   7-9. Carousels and cards
   --------------------------------------------------------------------------- */

.ap-page .ap-listings,
.ap-page .ap-reviews {
	background: var(--ap-white);
}

.ap-page .ap-transactions {
	background: var(--ap-metallic);
}

/* Swiper needs room for the card shadows, hence the negative-margin gutter. */
.ap-page .ap-swiper {
	width: auto;
	margin: 0 -20px;
	padding: 20px;
	overflow: hidden;
}

.ap-page .ap-swiper .swiper-wrapper {
	align-items: stretch;
}

.ap-page .ap-swiper .swiper-slide {
	height: auto;
}

.ap-page .ap-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 10px 10px 30px;
	border: 1px solid var(--ap-mercury);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-card-shadow);
	position: relative;
}

.ap-page .ap-card--listing {
	background: var(--ap-metallic);
}

.ap-page .ap-card--transaction {
	background: var(--ap-white);
}

.ap-page .ap-card__media {
	position: relative;
	border-radius: var(--ap-radius);
	overflow: hidden;
	flex: none;
}

.ap-page .ap-card--listing .ap-card__media {
	aspect-ratio: 340 / 210;
}

.ap-page .ap-card--transaction .ap-card__media {
	aspect-ratio: 243 / 150;
}

.ap-page .ap-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap-page .ap-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.ap-page .ap-card--transaction .ap-card__body {
	gap: 20px;
}

/* inline-block, not flex: the badge copy mixes text and <strong>, and flex would drop the
   whitespace between them. */
.ap-page .ap-badge {
	display: inline-block;
	margin: 0;
	padding: 8px 10px;
	border-radius: 50px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ap-white);
	text-align: center;
}

.ap-page .ap-badge strong {
	font-weight: 700;
}

.ap-page .ap-badge--dark {
	position: absolute;
	top: 10px;
	left: 10px;
	background-image: linear-gradient(71.3deg, #221f2b 0%, #42404f 100%);
	z-index: 1;
}

.ap-page .ap-badge--blue {
	background: var(--ap-blue);
}

.ap-page .ap-card__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-card__price {
	margin: 0;
	font-family: var(--ap-serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-card__meta {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ap-ash);
}

.ap-page .ap-card__link {
	position: absolute;
	inset: 0;
	/* The status badge carries z-index:1; without this the link is dead under it. */
	z-index: 2;
	border-radius: var(--ap-radius);
}

/* Review cards */
.ap-page .ap-card--review {
	gap: 30px;
	padding: 30px 30px 40px;
	background: var(--ap-metallic);
	align-items: flex-start;
}

.ap-page .ap-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.ap-page .ap-card__quote p {
	margin: 0;
	font-family: var(--ap-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-card__author {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}

.ap-page .ap-card__author-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ap-onyx);
}

.ap-page .ap-card__author-context {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ap-ash);
}

.ap-page .ap-reviews__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ap-ash);
}

.ap-page .ap-reviews__summary strong {
	color: var(--ap-onyx);
	font-weight: 700;
}

/* Filters */
.ap-page .ap-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 30px;
}

.ap-page .ap-filter {
	padding: 12px 16px;
	border: 1px solid var(--ap-border);
	border-radius: 8px;
	background: transparent;
	font-family: var(--ap-sans);
	font-size: 16px;
	line-height: 24px;
	color: var(--ap-onyx);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-page .ap-filter:hover {
	border-color: var(--ap-blue);
}

.ap-page .ap-filter.is-active {
	background: var(--ap-blue);
	border-color: var(--ap-blue);
	color: var(--ap-white);
}

/* Arrows */
.ap-page .ap-arrows {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

.ap-page .ap-section-header--split .ap-arrows {
	margin-top: 0;
}

.ap-page .ap-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ap-blue);
	color: var(--ap-white);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.ap-page .ap-arrow svg {
	display: block;
	width: 34px;
	height: 34px;
}

.ap-page .ap-arrow:hover {
	background: #3450c2;
}

.ap-page .ap-arrow.swiper-button-disabled,
.ap-page .ap-arrow[disabled] {
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}

/* Carousels are hidden entirely once every slide is filtered out. */
.ap-page .ap-carousel.is-empty {
	display: none;
}

/* Fallback when Swiper never loads: a plain scroll-snap row, arrows removed. */
.ap-page.ap-no-swiper .ap-swiper .swiper-wrapper {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ap-page.ap-no-swiper .ap-swiper .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

.ap-page.ap-no-swiper .ap-swiper .swiper-slide {
	flex: 0 0 min(320px, 78%);
	scroll-snap-align: start;
}

.ap-page.ap-no-swiper .ap-arrows {
	display: none;
}

/* Video players inherit the poster's frame. */
.ap-page .ap-video-player {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: var(--ap-onyx);
}

.ap-page .ap-video-card.is-playing {
	background: var(--ap-onyx);
}

/* ---------------------------------------------------------------------------
   10. Contact
   --------------------------------------------------------------------------- */

.ap-page .ap-contact {
	padding-top: 140px;
	padding-bottom: 140px;
	background: var(--ap-onyx);
	isolation: isolate;
}

.ap-page .ap-contact__background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -2;
}

.ap-page .ap-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(34, 31, 43, 0.8);
	z-index: -1;
}

.ap-page .ap-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.ap-page .ap-contact__subheading {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ap-white);
}

.ap-page .ap-contact .ap-buttons {
	justify-content: center;
	margin-top: 16px;
}

.ap-page .ap-contact__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.ap-page .ap-contact__meta a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.ap-page .ap-contact__meta a:hover {
	color: var(--ap-white);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.propseller-agent-profile {
		--ap-section-y: 80px;
	}

	.ap-page .ap-hero__name {
		font-size: 42px;
	}

	.ap-page .ap-glance__value {
		font-size: 48px;
	}

	.ap-page .ap-credentials {
		padding: 32px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — the second Figma frame. Every split section stacks.
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.propseller-agent-profile {
		--ap-section-y: 60px;
		--ap-gutter: 20px;
	}

	.ap-page .ap-heading {
		font-size: 28px;
	}

	.ap-page .ap-section-header {
		gap: 24px;
		margin-bottom: 30px;
	}

	.ap-page .ap-section-header--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.ap-page .ap-section-header--split .ap-arrows {
		justify-content: flex-start;
		margin-top: 0;
	}

	/* Hero: portrait between the breadcrumb and the name, everything centred. */
	.ap-page .ap-hero__inner {
		flex-direction: column;
		gap: 0;
	}

	.ap-page .ap-hero__body {
		display: contents;
	}

	.ap-page .ap-breadcrumb {
		order: 1;
		width: 100%;
		margin-bottom: 24px;
		text-align: center;
		font-size: 16px;
	}

	.ap-page .ap-hero__portrait {
		order: 2;
		align-self: center;
		width: min(313px, 100%);
		margin-bottom: 32px;
	}

	.ap-page .ap-hero__region {
		order: 3;
		justify-content: center;
		width: 100%;
		margin-bottom: 20px;
		font-size: 14px;
	}

	.ap-page .ap-hero__name {
		order: 4;
		width: 100%;
		margin-bottom: 8px;
		font-size: 36px;
		text-align: center;
	}

	.ap-page .ap-hero__title {
		order: 5;
		width: 100%;
		margin-bottom: 8px;
		text-align: center;
	}

	.ap-page .ap-hero__cea {
		order: 6;
		width: 100%;
		margin-bottom: 24px;
		text-align: center;
	}

	.ap-page .ap-rating-pill {
		order: 7;
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 0 24px;
	}

	.ap-page .ap-hero .ap-buttons {
		order: 8;
		width: 100%;
		margin-top: 0;
	}

	.ap-page .ap-buttons,
	.ap-page .ap-cta-slot,
	.ap-page .ap-btn {
		width: 100%;
	}

	.ap-page .ap-btn {
		padding: 12px 24px;
	}

	/* Stats stack with horizontal rules between them. */
	.ap-page .ap-glance__list {
		flex-direction: column;
		gap: 40px;
	}

	.ap-page .ap-glance__item + .ap-glance__item::before {
		left: 50%;
		top: -20px;
		width: min(300px, 80%);
		height: 1px;
		transform: translateX(-50%);
	}

	.ap-page .ap-glance__value {
		font-size: 44px;
	}

	.ap-page .ap-glance__description {
		max-width: none;
	}

	/* About */
	.ap-page .ap-about__inner {
		flex-direction: column;
		gap: 40px;
	}

	.ap-page .ap-about__body,
	.ap-page .ap-credentials {
		max-width: none;
		width: 100%;
	}

	.ap-page .ap-credentials__highlight-value {
		font-size: 28px;
	}

	/* Awards: one per view, swipeable. */
	.ap-page .ap-awards__eyebrow {
		margin-bottom: 30px;
		font-size: 14px;
	}

	.ap-page .ap-awards__eyebrow::before,
	.ap-page .ap-awards__eyebrow::after {
		width: 40px;
	}

	/* justify-content:center would clip both ends of a scroll container, so the row starts
	   at the first award and each one snaps to centre instead. */
	.ap-page .ap-awards__list {
		gap: 0;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ap-page .ap-awards__list::-webkit-scrollbar {
		display: none;
	}

	.ap-page .ap-award {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	/* Meet */
	.ap-page .ap-meet__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"media"
			"quote";
		row-gap: 36px;
	}

	.ap-page .ap-meet__head {
		align-self: auto;
		gap: 24px;
	}

	.ap-page .ap-quote p {
		font-size: 20px;
	}

	/* Home tours */
	.ap-page .ap-tours__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.ap-page .ap-tours__body {
		max-width: none;
		gap: 24px;
	}

	.ap-page .ap-tours__button {
		padding: 20px 0 20px 20px;
		gap: 20px;
	}

	.ap-page .ap-tours__number {
		font-size: 24px;
	}

	.ap-page .ap-tours__title {
		font-size: 18px;
	}

	.ap-page .ap-tours__media {
		width: 100%;
	}

	/* The vertical dot rail is desktop-only; on mobile the playlist is the indicator. */
	.ap-page .ap-tours__progress {
		display: none;
	}

	/* Carousels bleed to the screen edge so the next card peeks in. */
	.ap-page .ap-swiper {
		margin: 0 calc(var(--ap-gutter) * -1);
		padding: 20px var(--ap-gutter);
	}

	.ap-page .ap-card--review {
		padding: 24px 24px 32px;
		gap: 24px;
	}

	.ap-page .ap-card__quote p {
		font-size: 18px;
	}

	.ap-page .ap-filters {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: calc(var(--ap-gutter) * -1);
		margin-right: calc(var(--ap-gutter) * -1);
		padding: 0 var(--ap-gutter);
	}

	.ap-page .ap-filters::-webkit-scrollbar {
		display: none;
	}

	.ap-page .ap-filter {
		flex: none;
	}

	/* Contact */
	.ap-page .ap-contact {
		padding-top: 60px;
		padding-bottom: 0;
	}

	.ap-page .ap-contact__inner {
		padding-bottom: 220px;
	}

	.ap-page .ap-contact__background {
		height: auto;
		top: auto;
		bottom: 0;
		object-position: center bottom;
	}

	.ap-page .ap-contact::before {
		background: linear-gradient(180deg, var(--ap-onyx) 0%, var(--ap-onyx) 55%, rgba(34, 31, 43, 0.75) 100%);
	}

	.ap-page .ap-contact__meta {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.ap-page .ap-heading {
		font-size: 26px;
	}

	.ap-page .ap-hero__name {
		font-size: 32px;
	}

	.ap-page .ap-award__body {
		width: 200px;
	}
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ap-page *,
	.ap-page *::before,
	.ap-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}