/**
 * The Team page template (template-team.php). Mobile first: phone styles, then 600 px and 900 px.
 * Every colour comes from tokens.css. Gold text on white is gold-800 when small and gold-700
 * when large (3:1 or better); gold-500 is only ever a fill.
 */

/* The hero bleeds to the screen edge, so the page drops GeneratePress's width cap and padding. */
.seymour-team-page .site.grid-container {
	max-width: none;
}

.seymour-team-page .site-content {
	padding: 0;
}

.seymour-team-page .content-area {
	width: 100%;
}

.seymour-team-page .site-main,
.seymour-team-page .inside-article {
	margin: 0;
	padding: 0;
}

.seymour-tp {
	overflow-x: clip;
}

/* ------------------------------------------------------------------
 * Hero: the photo fills the band; white fades over it from the top-left, so the navy text
 * sits on white and the photo shows on the right. On phones the white covers more.
 * ------------------------------------------------------------------ */

.seymour-tp-hero {
	align-items: center;
	background: var(--white);
	display: flex;
	isolation: isolate;
	min-height: 520px;
	overflow: hidden;
	padding: var(--space-8) 0 calc(var(--space-8) + 48px);
	position: relative;
}

.seymour-tp-hero__image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: 70% center;
	position: absolute;
	width: 100%;
	z-index: -2;
}

.seymour-tp-hero::after {
	background:
		radial-gradient(ellipse 90% 80% at 0% 0%, var(--white) 30%, rgba(255, 255, 255, 0) 75%),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82) 70%, rgba(255, 255, 255, 0.55));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.seymour-tp-hero__text > * {
	max-width: 34rem;
}

.seymour-tp-hero__title {
	color: var(--navy);
	font-size: var(--fs-display);
	line-height: 1.05;
	margin: 0;
}

.seymour-tp-hero__title em {
	color: var(--gold-700);
	font-style: italic;
}

.seymour-tp-hero__sub {
	color: var(--ink);
	font-size: var(--fs-lead);
	margin: var(--space-4) 0 0;
}

.seymour-tp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
}

/* The gold button: a gold fill with navy text (about 7:1). */
.seymour-button.seymour-tp-button--gold {
	background: var(--gold-500);
	border-color: var(--gold-500);
	color: var(--navy-900);
}

.seymour-button.seymour-tp-button--gold:hover {
	background: var(--gold-200);
	border-color: var(--gold-200);
	color: var(--navy-900);
}

.seymour-tp-hero--no-photo::after {
	display: none;
}

/* ------------------------------------------------------------------
 * Credentials bar: a white card that overlaps the bottom of the hero.
 * ------------------------------------------------------------------ */

.seymour-tp-stats-wrap {
	margin-top: -48px;
	position: relative;
	z-index: 1;
}

.seymour-tp-stats {
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(21, 42, 69, 0.12);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: var(--space-4) var(--space-3);
}

.seymour-tp-stat {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-3) var(--space-2);
	text-align: center;
}

.seymour-tp-stat__value {
	color: var(--navy);
	font-family: var(--font-serif);
	font-size: var(--fs-h2);
	font-variation-settings: var(--font-serif-settings);
	line-height: 1.1;
}

.seymour-tp-stat__label {
	color: var(--grey-600);
	font-size: var(--fs-meta);
	line-height: 1.35;
}

.seymour-tp-stat__note {
	color: var(--grey-600);
	display: block;
	font-size: var(--fs-eyebrow);
	line-height: 1.35;
}

.seymour-tp-stat__label a {
	color: inherit;
	text-decoration-color: var(--line);
}

/* ------------------------------------------------------------------
 * Jethro's feature.
 * ------------------------------------------------------------------ */

.seymour-tp-lead {
	display: grid;
	gap: var(--space-6);
	padding-bottom: var(--space-section);
	padding-top: var(--space-section);
}

.seymour-tp-lead__photo {
	max-width: 300px;
}

.seymour-tp-lead__photo img {
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	box-shadow: 0 16px 36px rgba(21, 42, 69, 0.16);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.seymour-tp-eyebrow {
	color: var(--gold-800);
	font-size: var(--fs-eyebrow);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-eyebrow);
	margin: 0 0 var(--space-2);
	text-transform: uppercase;
}

.seymour-tp-lead__name {
	color: var(--navy);
	font-size: var(--fs-h1);
	margin: 0;
}

.seymour-tp-lead__intro {
	color: var(--ink);
	margin-top: var(--space-4);
	max-width: var(--measure);
}

.seymour-tp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
}

.seymour-tp-chips li {
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--navy);
	font-size: var(--fs-meta);
	margin: 0;
	padding: var(--space-1) var(--space-3);
}

.seymour-tp-lead__more {
	margin: var(--space-5) 0 0;
}

/* ------------------------------------------------------------------
 * The team: white cards on cream.
 * ------------------------------------------------------------------ */

.seymour-tp-team {
	background: var(--cream);
	padding: var(--space-section) 0;
	scroll-margin-top: var(--space-6);
}

.seymour-tp-team__eyebrow,
.seymour-tp-team__title {
	text-align: center;
}

.seymour-tp-team__title {
	color: var(--navy);
	font-size: var(--fs-h1);
	margin: 0 0 var(--space-6);
}

.seymour-tp-cards {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.seymour-tp-card {
	align-items: center;
	background: var(--white);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--space-6) var(--space-4);
	position: relative;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}

.seymour-tp-card:hover,
.seymour-tp-card:focus-within {
	box-shadow: 0 12px 28px rgba(21, 42, 69, 0.12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.seymour-tp-card,
	.seymour-tp-card:hover,
	.seymour-tp-card:focus-within {
		transform: none;
		transition: none;
	}
}

.seymour-tp-card__photo {
	height: 88px;
	margin-bottom: var(--space-4);
	width: 88px;
}

.seymour-tp-card__photo img {
	border-radius: 50%;
	display: block;
	height: 88px;
	object-fit: cover;
	object-position: center top;
	width: 88px;
}

.seymour-tp-initials {
	align-items: center;
	border-radius: 50%;
	display: flex;
	font-family: var(--font-serif);
	font-size: var(--fs-h3);
	font-variation-settings: var(--font-serif-settings);
	height: 100%;
	justify-content: center;
	width: 100%;
}

.seymour-tp-initials--navy { background: var(--navy); color: var(--gold-500); }
.seymour-tp-initials--gold { background: var(--gold-700); color: var(--white); }
.seymour-tp-initials--ink { background: var(--navy-900); color: var(--gold-500); }
.seymour-tp-initials--sand { background: var(--gold-500); color: var(--navy-900); }

.seymour-tp-initials--large {
	aspect-ratio: 4 / 5;
	background: var(--navy);
	border-radius: 16px;
	color: var(--gold-500);
	font-size: var(--fs-display);
}

.seymour-tp-card__name {
	color: var(--navy);
	font-size: var(--fs-h4);
	margin: 0;
}

.seymour-tp-card__name a {
	color: inherit;
	text-decoration: none;
}

.seymour-tp-card__name a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold-800);
	text-underline-offset: 0.2em;
}

.seymour-tp-card__name a:focus-visible {
	outline: none;
}

.seymour-tp-card:focus-within {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.seymour-tp-card__role {
	color: var(--gold-800);
	font-size: var(--fs-eyebrow);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-eyebrow);
	margin: var(--space-2) 0 0;
	text-transform: uppercase;
}

.seymour-tp-card__blurb {
	color: var(--grey-600);
	font-size: var(--fs-meta);
	margin: var(--space-3) 0 0;
}

/* ------------------------------------------------------------------
 * 600 px and up.
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {
	.seymour-tp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * 900 px and up: the photo shows on the right of the hero, the bar runs in one row of four
 * with gold rules between, Jethro's photo sits beside his words, and four cards to a row.
 * ------------------------------------------------------------------ */

@media (min-width: 900px) {
	.seymour-tp-hero {
		min-height: 620px;
	}

	/* Solid white over the first 40% of the hero, fading out by 75%. */
	.seymour-tp-hero::after {
		background:
			radial-gradient(ellipse 80% 100% at 0% 0%, var(--white) 40%, rgba(255, 255, 255, 0.85) 58%, rgba(255, 255, 255, 0) 85%),
			linear-gradient(100deg, var(--white) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 75%);
	}

	/* The photo runs 113% wide from the left edge, so the church (55% across the photo) lands
	 * about 62% across the hero, under the soft edge of the fade, and the right side is cropped. */
	.seymour-tp-hero__image {
		height: auto;
		inset: auto;
		left: 0;
		min-height: 100%;
		top: 50%;
		transform: translateY(-50%);
		width: 113%;
	}

	.seymour-tp-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: var(--space-5) var(--space-4);
	}

	.seymour-tp-stat + .seymour-tp-stat {
		border-left: 1px solid rgba(201, 168, 76, 0.45);
	}

	.seymour-tp-lead {
		align-items: center;
		gap: var(--space-8);
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.seymour-tp-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The basis of the Davisville Village claim, at the foot of the page. */
.seymour-tp-footnote {
	color: var(--grey-600);
	font-size: var(--fs-eyebrow);
	margin: 0;
	padding-bottom: var(--space-5);
	padding-top: var(--space-5);
}

/* The hero runs to the screen's left edge on wide screens (Kaz, October 22, 2026): the headline,
 * buttons and the credentials card start where the logo does, under the white fade, instead of
 * in a centred column with empty white to their left. The card keeps its usual width. */
@media (min-width: 1200px) {
	.seymour-tp-hero__text.seymour-container,
	.seymour-tp-stats-wrap.seymour-container {
		margin-left: 0;
		max-width: none;
		padding-left: calc(max(var(--gutter), 16px) + 48px); /* half an inch in from the logo's edge (Kaz, October 22, 2026) */
		padding-right: max(var(--gutter), 16px);
	}

	.seymour-tp-stats-wrap .seymour-tp-stats {
		max-width: calc(var(--container) - 2 * var(--gutter));
	}

	/* The photo shows further left, now that the words sit against the left edge. */
	.seymour-tp-hero::after {
		/* A lighter fade (Kaz, October 22, 2026): the photo shows through behind the words. */
		background:
			radial-gradient(ellipse 55% 100% at 0% 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0) 80%),
			linear-gradient(100deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.78) 36%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0) 66%);
	}

	.seymour-tp-hero__image {
		width: 100%;
	}
}

/* The #1 claim's basis, beside "2026*" in the credentials card, in small type (Kaz, October 22,
 * 2026; Jet approved the move from the foot of the page). */
.seymour-tp-stat__basis,
.seymour-tp-stat__line {
	display: block;
}

.seymour-tp-stat__basis {
	color: var(--grey-600);
	font-size: 11px;
	line-height: 1.35;
	margin-top: 2px;
}

@media (min-width: 1200px) {
	.seymour-tp-hero__text > .seymour-tp-hero__sub {
		max-width: none;
	}

	.seymour-tp-hero__line {
		display: block;
		white-space: nowrap;
	}
}

/* Team cards (Kaz, October 22, 2026): three to a row from 900 px, so Rick starts the second row
 * beside Judy and Lindsey; bigger photos; Dan's and Kaz's headshots cropped in so their faces
 * fill the circle the way Eroika's does. */
.seymour-tp-card__photo,
.seymour-tp-card__photo img,
.seymour-tp-card__photo .seymour-tp-initials {
	height: 112px;
	width: 112px;
}

.seymour-tp-card__photo {
	border-radius: 50%;
	overflow: hidden;
}

.seymour-tp-card__photo .seymour-tp-initials {
	font-size: 26px;
}

.seymour-tp-card--dan-sublett .seymour-tp-card__photo img {
	transform: scale(1.45);
	transform-origin: 53% 0%;
}

.seymour-tp-card--kaz-purugganan .seymour-tp-card__photo img {
	transform: scale(1.3);
	transform-origin: 37% 22%;
}

@media (min-width: 900px) {
	.seymour-tp-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The credentials card's figures in gold (Kaz, October 22, 2026): the same gold as "agent" in the
 * headline, the darker gold the design standard uses on white so they keep their contrast. */
.seymour-tp-stat__value {
	color: var(--gold-700);
}

/* "(realty sales statistics)" at the footnote's size (Kaz, October 22, 2026). */
.seymour-tp-stat__note {
	font-size: 11px;
	margin-top: 2px;
}

/* Jethro's two buttons under his credentials (Kaz, October 26, 2026). */
.seymour-tp-lead__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}