/*
 * Palette sampled from HER OWN BUSINESS CARD, 2026-09-29.
 *
 * set-palette.py seeded this sheet and its header described that seed for
 * three revisions after it had stopped being true. The card is the source of
 * truth now — she designed it, she prints it, and it is the thing the site was
 * asked to look like.
 *
 *   RoyalT purple    #4F1C55  structure: headings, buttons, footer, the ink
 *                             (the panel behind the crown on her logo)
 *   Antique gold     #7E6328  the accent, and the only gold that carries text
 *   Champagne        #A8925E  rules, ornaments, fills — the card's mid gold
 *   Light champagne  #E0CEA6  the light accent, for dark grounds only
 *
 * The card's golds are ANTIQUE, not brassy. The site ran #C9A44A for three
 * revisions, which is a full step brighter and reads costume beside her
 * printed material. Measured off the card: highlight #F2E4CA, mid #B1A084,
 * deep #8D6729.
 *
 * Ground is white with a pearl tint (#F7F5F1) for alternating bands — her card
 * is a warm pearl (#E7E8E3), and pure white sections with pearl between them
 * is that, at screen brightness. Her brief: "my colors are purple and gold I
 * use white to add the more luxurious feel to it."
 *
 * Measured (WCAG), against white:
 *   brand              12.9:1
 *   white on brand     12.9:1
 *   coral (gold)        5.7:1   carries text
 *   dune (champagne)    3.0:1   LARGE TEXT AND FILLS ONLY
 *   accent-lt on deep  13.1:1   light gold on the purple footer
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--tsp-brand:      #4F1C55;
	--tsp-brand-mid:  #6B3272;
	--tsp-brand-lt:   #C6AECB;
	--tsp-brand-pale: #F5F0F6;

	--tsp-accent:       #4F1C55;
	--tsp-accent-mid:   #6B3272;

	/*
	 * --accent-lt is the LIGHT accent: every rule below uses it on a dark
	 * ground (the utility bar, ::selection, .tsp-eyebrow--light, the monogram
	 * tile on --deep, the creed call, the hero phone number).
	 *
	 * set-palette.py handed it the deep service blue #2F4E7A, which put the
	 * hero's phone number at 2.41:1 on the near-black hero — the single most
	 * important thing in the hero, and the least readable thing on the page.
	 * themes/CLAUDE.md trap 24 is the same failure ("when a copy's
	 * --accent-lt is itself dark"). hero-contrast.py passed it, because it
	 * measures the containing span and this color is on a nested <strong>.
	 *
	 * Her gold is the right value here and is genuinely hers: 7.9:1 on the
	 * hero, 8.9:1 on --deep.
	 */
	--tsp-accent-lt:    #E0CEA6;
	--tsp-accent-metal: linear-gradient(135deg, #3E1247 0%, #64266E 52%, #4F1C55 100%);

	--tsp-surf:       #7C6386;
	--tsp-surf-dk:    #5F4869;
	--tsp-surf-pale:  #F5F0F6;

	--tsp-coral:      #7E6328;
	--tsp-coral-br:   #A8925E;
	--tsp-coral-dk:   #6B541F;
	--tsp-coral-pale: #FAF6EC;

	--tsp-dune:       #A8925E;
	--tsp-dune-dk:    #7E6328;
	--tsp-dune-pale:  #FAF6EC;

	--tsp-sand:       #E0CEA6;
	--tsp-sand-dp:    #C9B68C;

	--tsp-red:        #7E6328;

	--tsp-deep:       #2A0733;
	--tsp-deep-dk:    #1B0422;
	--tsp-deep-lt:    #3E1247;
	--tsp-stone:      #7C7184;

	--tsp-ink:        #1C0A22;
	--tsp-body:       #4A4050;
	--tsp-muted:      #6E6474;
	--tsp-faint:      #9A93A0;

	--tsp-white:      #FFFFFF;
	--tsp-shell:      #FFFFFF;
	--tsp-tint:       #F7F5F1;
	--tsp-tint-2:     #F0EEE8;
	--tsp-sky:        #F5F0F6;
	--tsp-line:       #E6E2DA;
	--tsp-line-soft:  #F1EEE8;

	--tsp-display:    'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
	--tsp-body-font:  'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

	--tsp-wrap:       1280px;
	--tsp-gutter:     clamp(1.25rem, 4vw, 3rem);
	--tsp-band:       clamp(4rem, 8vw, 7rem);

	--tsp-header-h:   146px;
	--tsp-bar-max:    146px;
	--tsp-bar-min:    82px;
	/*
	 * HER OWN MARK is the masthead now (Adam, 2026-09-29). It is a STACKED
	 * composition — crown over script over two lines of type — so it is
	 * height-constrained where the drawn wordmark it replaced was
	 * width-constrained. A stacked mark needs more height to carry the same
	 * presence: 92px of it spans only ~123px, against ~490px for the old
	 * lockup. The bar is 128px, so this is the most it can take and still
	 * breathe. It shrinks with --tsp-shrink exactly as before.
	 */
	--tsp-logo-max:   118px;
	--tsp-logo-min:   64px;
	--tsp-shrink:     0;

	--tsp-ease:       cubic-bezier(.22, .61, .36, 1);
	--tsp-shadow:     0 1px 2px rgba(36, 2, 43, .05), 0 8px 24px -12px rgba(36, 2, 43, .16);
	--tsp-shadow-lg:  0 2px 4px rgba(36, 2, 43, .06), 0 20px 48px -20px rgba(36, 2, 43, .24);
}


@media (max-width: 1040px) {
	:root {
		--tsp-header-h: 114px;
		--tsp-bar-max:  114px;
		--tsp-bar-min:  70px;
		--tsp-logo-max: 84px;
		--tsp-logo-min: 52px;
	}
}

/* ------------------------------------------------------------------ base -- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--tsp-shell);
	color: var(--tsp-body);
	font-family: var(--tsp-body-font);
	font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.tsp-locked { overflow: hidden; }

img, svg { max-width: 100%; display: block; }

a { color: var(--tsp-deep-lt); text-decoration: none; transition: color .2s var(--tsp-ease); }
a:hover { color: var(--tsp-deep); }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--tsp-display);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--tsp-ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.03rem + .4vw, 1.3rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--tsp-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--tsp-accent-lt); color: var(--tsp-ink); }

.tsp-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tsp-skip {
	position: absolute; top: -100px; left: 1rem; z-index: 200;
	padding: .75rem 1.25rem;
	background: var(--tsp-deep); color: #fff; font-weight: 600;
	transition: top .2s var(--tsp-ease);
}
.tsp-skip:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------- layout -- */

.tsp-wrap {
	width: 100%;
	max-width: var(--tsp-wrap);
	margin-inline: auto;
	padding-inline: var(--tsp-gutter);
}

.tsp-wrap--narrow { max-width: 60rem; }

.tsp-section { position: relative; padding-block: var(--tsp-band); }

.tsp-section--tint { background: var(--tsp-tint); }

/* The two navy bands. Full-bleed color is the only thing on a light site that
   gives the eye a place to rest, so there are exactly two per page and they are
   always separated by white. */
.tsp-section--dark {
	background: var(--tsp-deep);
	color: rgba(255, 255, 255, .82);
}

.tsp-section--dark h1,
.tsp-section--dark h2,
.tsp-section--dark h3 { color: #fff; }

/* ------------------------------------------------------------- typography -- */

.tsp-eyebrow {
	display: inline-block;
	margin-bottom: .9rem;
	font-family: var(--tsp-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}

.tsp-eyebrow--light { color: var(--tsp-accent-lt); }

.tsp-rule {
	display: block;
	width: 56px; height: 3px;
	margin: 1.1rem 0 1.4rem;
	background: var(--tsp-accent-metal);
	border-radius: 3px;
}
.tsp-head--center .tsp-rule, .tsp-closer .tsp-rule { margin-inline: auto; }

.tsp-lede {
	font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
	line-height: 1.65;
	color: var(--tsp-muted);
	max-width: 56ch;
}

.tsp-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.tsp-head--center { margin-inline: auto; text-align: center; }
.tsp-head--center .tsp-lede { margin-inline: auto; }
.tsp-head--light .tsp-lede { color: rgba(255, 255, 255, .8); }

.tsp-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
}
@media (max-width: 720px) {
	.tsp-head--split { flex-direction: column; align-items: flex-start; }
}

.tsp-prose { color: var(--tsp-body); }
.tsp-prose p { margin-bottom: 1.1em; }

.tsp-prose--editor h2,
.tsp-prose--editor h3 { margin: 2rem 0 .75rem; }
.tsp-prose--editor ul,
.tsp-prose--editor ol { margin: 0 0 1.2em 1.25rem; list-style: disc; }
.tsp-prose--editor ol { list-style: decimal; }
.tsp-prose--editor li { margin-bottom: .4em; }
.tsp-prose--article { font-size: 1.05rem; }
.tsp-prose--article p { margin-bottom: 1.3em; }

.tsp-pull {
	margin: 1.75rem 0 0;
	padding: 1.1rem 1.4rem;
	border-left: 3px solid var(--tsp-accent);
	background: var(--tsp-tint);
	border-radius: 0 4px 4px 0;
	font-family: var(--tsp-display);
	font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--tsp-ink);
}

/* --------------------------------------------------------------- buttons -- */

.tsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.6rem;
	border: 1px solid var(--tsp-deep);
	border-radius: 4px;
	background: var(--tsp-deep);
	color: #fff;
	font-family: var(--tsp-display);
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s var(--tsp-ease), box-shadow .2s var(--tsp-ease), background .2s var(--tsp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.tsp-btn:hover {
	background: var(--tsp-deep-dk);
	border-color: var(--tsp-deep-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(36, 2, 43, .5);
}
.tsp-btn:active { transform: translateY(0); }

/*
 * The primary call to action.
 *
 * Three things here were inherited from a gold-era build and were all wrong
 * once the gradient became navy: a comment claiming the fill was gold, dark
 * navy ink (#2F0239) sitting on a navy gradient — effectively invisible — and
 * a gold drop shadow. White on #4F045F is 9.8:1 and needs no argument.
 */
.tsp-btn--accent {
	background: var(--tsp-accent-metal);
	border-color: transparent;
	color: #FFFFFF;
}
.tsp-btn--accent:hover {
	background: var(--tsp-accent-metal);
	filter: brightness(1.08);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -12px rgba(79, 4, 95, .55);
}

.tsp-btn--ghost {
	background: transparent;
	border-color: var(--tsp-line);
	color: var(--tsp-deep);
}
.tsp-btn--ghost:hover {
	background: var(--tsp-tint);
	border-color: var(--tsp-deep);
	color: var(--tsp-deep);
	box-shadow: none;
}

.tsp-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.tsp-btn--ghost-light:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
	box-shadow: none;
}

.tsp-btn--sm { padding: .68rem 1.1rem; font-size: .74rem; }
.tsp-btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.tsp-btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------- utility -- */

.tsp-utility {
	position: relative;
	z-index: 60;
	background: var(--tsp-deep);
	color: rgba(255, 255, 255, .72);
	font-size: .78rem;
}

.tsp-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
	padding-block: .35rem;
}

.tsp-utility__tagline {
	margin: 0;
	font-family: var(--tsp-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-accent-lt);
	white-space: nowrap;
}

.tsp-utility__list { display: flex; align-items: center; gap: 1.4rem; }

.tsp-utility__list a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: rgba(255, 255, 255, .82);
}
.tsp-utility__list a:hover { color: #fff; }

.tsp-icon { flex-shrink: 0; color: var(--tsp-accent-lt); transition: color .2s var(--tsp-ease); }
.tsp-utility__list a:hover .tsp-icon { color: #fff; }

@media (max-width: 1040px) {
	/* Gone entirely on mobile. It was a strip of navy holding a phone number and
	   an email in 12px type — the phone is now a proper button in the masthead,
	   which is a real target and does not cost a band of color above the logo. */
	.tsp-utility { display: none; }
}

/* ------------------------------------------------------------- language -- */

/*
 * EN / ES.
 *
 * A segmented pair rather than a dropdown: with exactly two languages a select
 * costs a tap to discover what it even contains, and both labels visible is its
 * own advertisement — a Spanish speaker sees "ES" without hunting for it, which
 * is the whole point of the feature.
 *
 * The inactive side is a link and the active side is not, so keyboard order
 * carries no dead stop and screen readers get aria-current on the live one.
 */
.tsp-lang {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.tsp-lang__on,
.tsp-lang__off {
	display: inline-block;
	padding: .18rem .55rem;
	border-radius: 999px;
	line-height: 1.5;
}

.tsp-lang__on {
	background: #fff;
	color: var(--tsp-deep);
}

.tsp-utility__list .tsp-lang__off {
	color: rgba(255, 255, 255, .8);
	transition: background .18s var(--tsp-ease), color .18s var(--tsp-ease);
}

.tsp-utility__list .tsp-lang__off:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/*
 * In the drawer the bar is on white, not on the deep band, so the whole thing
 * inverts. It also spells the languages out — there is room for "Español" on a
 * phone and it reads as a promise rather than a two-letter code.
 */
.tsp-lang--drawer {
	align-self: center;
	background: var(--tsp-sky);
	font-size: .82rem;
}

.tsp-lang--drawer .tsp-lang__on {
	background: var(--tsp-brand);
	color: #fff;
}

.tsp-lang--drawer .tsp-lang__off {
	color: var(--tsp-accent);
}

.tsp-lang--drawer .tsp-lang__off:hover {
	background: rgba(47, 78, 122, .12);
}

/* --------------------------------------------------------------- header -- */

/* Constant-height shell; only the bar inside it moves. Collapsing the header
   itself would shorten the document mid-scroll and drag the page up under the
   reader — see themes/CLAUDE.md. */
.tsp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--tsp-header-h);
	pointer-events: none;
}

.tsp-header__bar {
	pointer-events: auto;
	background: #fff;
	border-bottom: 1px solid var(--tsp-line);
	box-shadow: 0 8px 24px -18px rgba(36, 2, 43, calc(1.4 * var(--tsp-shrink)));
}

.tsp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: calc(var(--tsp-bar-max) + (var(--tsp-bar-min) - var(--tsp-bar-max)) * var(--tsp-shrink));
}

.tsp-brand { display: inline-flex; flex-shrink: 0; }
.tsp-logo { display: inline-flex; align-items: center; gap: .65rem; }

.tsp-logo__img {
	height: calc(var(--tsp-logo-max) + (var(--tsp-logo-min) - var(--tsp-logo-max)) * var(--tsp-shrink));
	width: auto;
}

.tsp-logo__mark { display: inline-flex; }
.tsp-logo__mark svg { width: 40px; height: 40px; }
.tsp-logo--footer .tsp-logo__mark svg { width: 46px; height: 46px; }

.tsp-logo__text { display: flex; flex-direction: column; line-height: 1.05; }

.tsp-logo__name {
	font-family: var(--tsp-display);
	font-size: 1.32rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--tsp-deep);
}

.tsp-logo__sub {
	margin-top: .18rem;
	font-family: var(--tsp-display);
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}

.tsp-logo--footer .tsp-logo__name { color: #fff; }
.tsp-logo--footer .tsp-logo__img { height: 74px; }

/* ------------------------------------------------------------------ nav -- */

.tsp-nav { margin-inline: auto; }
.tsp-nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }

.tsp-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: .35rem;
	font-family: var(--tsp-display);
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tsp-ink);
}

.tsp-nav__list a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--tsp-accent-metal);
	transition: width .25s var(--tsp-ease);
}

.tsp-nav__list a:hover { color: var(--tsp-deep); }
.tsp-nav__list a:hover::after,
.tsp-nav__list .is-current > a::after,
.tsp-nav__list .current-menu-item > a::after { width: 100%; }
.tsp-nav__list .is-current > a,
.tsp-nav__list .current-menu-item > a { color: var(--tsp-deep); }

.tsp-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.tsp-burger {
	display: none;
	padding: .55rem;
	background: none;
	border: 1px solid var(--tsp-line);
	border-radius: 4px;
	cursor: pointer;
}
.tsp-burger__box { display: block; width: 20px; }
.tsp-burger__box i {
	display: block; height: 2px; background: var(--tsp-deep);
	transition: transform .25s var(--tsp-ease), opacity .2s var(--tsp-ease);
}
.tsp-burger__box i + i { margin-top: 4px; }
.tsp-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tsp-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.tsp-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
	.tsp-nav { display: none; }
	.tsp-burger { display: block; }
}
@media (max-width: 620px) {
	/* The "Talk to an agent" button goes; the call button stays. Excluded by
	   name rather than by raising specificity elsewhere — this rule is more
	   specific than .tsp-callnow and would otherwise win silently. */
	.tsp-header__actions .tsp-btn:not(.tsp-callnow) { display: none; }
}

/* --------------------------------------------------------------- drawer -- */

.tsp-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.5rem;
	padding: calc(var(--tsp-header-h) + 1.75rem) var(--tsp-gutter) 2.5rem;
	background: #fff;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s var(--tsp-ease), visibility .28s var(--tsp-ease);
}

.tsp-drawer[hidden] { display: flex; }
.tsp-drawer.is-open { opacity: 1; visibility: visible; }

.tsp-drawer__nav .tsp-nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; }
.tsp-drawer__nav .tsp-nav__list a { padding-block: .7rem; font-size: 1.3rem; letter-spacing: .04em; }

.tsp-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.tsp-drawer__call {
	font-family: var(--tsp-display);
	font-size: 1.05rem;
	font-weight: 400;
	text-align: center;
	color: var(--tsp-deep);
}

/* --------------------------------------------------------------- figures -- */

.tsp-figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--tsp-tint-2);
}

.tsp-figure img { width: 100%; height: 100%; object-fit: cover; }

.tsp-figure--cover { position: absolute; inset: 0; border-radius: 0; }
.tsp-figure--tall { aspect-ratio: 4 / 5; }
.tsp-figure--portrait { aspect-ratio: 3 / 4; }
.tsp-figure--wide { aspect-ratio: 16 / 10; }
.tsp-figure--hero { aspect-ratio: 16 / 9; border-radius: 8px; }
.tsp-figure--lead { margin-bottom: 2rem; }

.tsp-figure--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 12rem;
	background:
		repeating-linear-gradient(135deg, transparent 0 12px, rgba(36, 2, 43, .03) 12px 24px),
		var(--tsp-tint-2);
}

.tsp-figure__mark { opacity: .5; }
.tsp-figure__note {
	font-family: var(--tsp-display);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tsp-faint);
}


/* ─────────────────────────────── the PHONE hero scrim (trap 58 / trap 42)
   The desktop scrim is a LEFT-weighted band, which is right when the copy
   occupies the left half. On a phone the copy is full width, so the right-hand
   stop (alpha .06) sat directly under the lede.

   Scored offline against all three phone stills rather than measured on the
   one frame headless Chrome happened to be showing — scrim-score.py composites
   these exact stops over every still and reports the worst pixel under each
   block of type. Before: eyebrow 2.44, h1 2.39, lede 2.07 on the Atlanta
   frame, needing 4.5/3/4.5. After: every block clears on every frame.

   Shaped to the text, not raised to a floor: it opens at .18 across the top
   where only the lockup sits, so the photograph still reads. */
@media (max-width: 900px) {
	.tsp-hero__scrim {
		/* Full width on a phone, and reaching higher than before: the eyebrow
		   starts at 24% of the hero, above where the old band began. */
		background: linear-gradient(to bottom,
			rgba(16, 18, 22, .20) 0%,
			rgba(16, 18, 22, .46) 18%,
			rgba(16, 18, 22, .74) 30%,
			rgba(16, 18, 22, .74) 80%,
			rgba(16, 18, 22, .68) 92%,
			rgba(16, 18, 22, .66) 100%);
	}
}

/* ---------------------------------------------------------------- banner -- */

.tsp-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(16rem, 38vh, 22rem);
	padding-block: clamp(4rem, 9vh, 6rem) clamp(2rem, 5vh, 3rem);
	overflow: hidden;
	background: var(--tsp-deep-dk);
}

.tsp-banner__media { position: absolute; inset: 0; z-index: 0; }
/*
 * The banner scrim, strengthened on the left where the type sits.
 *
 * The inherited values (.62 -> .46 -> .30) were tuned against a dark
 * photograph. Behind these New Orleans street shots — bright stucco, bright
 * sky — the white title measured only 4.97:1 and the small gold eyebrow
 * 2.36:1, a FAIL (themes/CLAUDE.md trap 24: this lineage hides light eyebrows
 * on light-ish bands, and no markup check sees it).
 *
 * Deepened on the text side only, still clearing to nearly untouched
 * photograph on the right, which is the treatment Adam kept on Cynthia
 * (memory feedback_hero_treatment: no heavy overlay, no boxes).
 */
.tsp-banner__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(16, 18, 22, .78) 0%, rgba(16, 18, 22, .62) 55%, rgba(16, 18, 22, .34) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .30) 0%, rgba(16, 18, 22, .18) 50%, rgba(16, 18, 22, .46) 100%);
}

.tsp-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.tsp-banner__title { color: #fff; }
.tsp-banner__lede { color: rgba(255, 255, 255, .85); }

/*
 * The eyebrow on a banner is the smallest type on the darkest ground, so it
 * gets a lighter gold than --accent-lt rather than relying on the scrim
 * alone. Trap 24's remedy, applied in the other direction: there the copied
 * --accent-lt was too dark, here it is a mid gold under 12px caps.
 */
.tsp-banner .tsp-eyebrow--light { color: #E3C67E; }

/* Banners with no photograph still need to be navy, not a white void. */
.tsp-banner:not(:has(.tsp-banner__media)) { background: var(--tsp-deep); }

/* ----------------------------------------------------------------- split -- */

.tsp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.tsp-split--reverse .tsp-split__media { order: 2; }
.tsp-split--reverse .tsp-split__body { order: 1; }
.tsp-split__body .tsp-lede { margin-bottom: 1.25rem; }
.tsp-split__body .tsp-btn { margin-top: 1.5rem; }

@media (max-width: 900px) {
	.tsp-split { grid-template-columns: 1fr; }
	.tsp-split--reverse .tsp-split__media,
	.tsp-split--reverse .tsp-split__body { order: initial; }
	/*
	 * The inherited rule here was `aspect-ratio: 16 / 11` — a LANDSCAPE box
	 * for the two PORTRAIT frames. With object-fit: cover that takes the
	 * crop off the top and bottom, so under 900px the first thing lost is
	 * the top of the head. Desktop looked perfect, which is why it survived
	 * the whole lineage (memory feedback_headshot_frames).
	 *
	 * Tanesha's headshot is 534x800 — 2:3, taller than either frame. A frame
	 * may be taller than the source, never wider, so these keep their own
	 * portrait ratios at every width and any unavoidable crop comes off the
	 * bottom rather than the crown.
	 *
	 * NOTE: `--portrait` is overridden again further down (aspect-ratio: auto,
	 * object-fit: contain), which is LATER at the same specificity and so
	 * wins — her headshot renders uncropped at its own 2:3 either way. This
	 * rule is what protects `--tall`, and `--portrait` if that later block
	 * ever goes.
	 */
	.tsp-figure--tall     { aspect-ratio: 4 / 5; }
	.tsp-figure--portrait { aspect-ratio: 3 / 4; }
	.tsp-figure--tall img, .tsp-figure--portrait img { object-position: center top; }
}

/* ----------------------------------------------------------- cards, grid -- */

.tsp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}

.tsp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .28s var(--tsp-ease), box-shadow .28s var(--tsp-ease), border-color .28s var(--tsp-ease);
}

.tsp-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--tsp-shadow-lg);
}

.tsp-card__media { position: relative; display: block; }
.tsp-card__media .tsp-figure { border-radius: 0; }
.tsp-card__media img { transition: transform .5s var(--tsp-ease); }
.tsp-card:hover .tsp-card__media img { transform: scale(1.035); }

.tsp-card__status {
	position: absolute;
	top: .75rem; left: .75rem;
	padding: .35rem .7rem;
	border-radius: 3px;
	background: var(--tsp-deep);
	color: #fff;
	font-family: var(--tsp-display);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* A sold listing should not look like an available one. */
.tsp-status--sold,
.tsp-status--closed { background: var(--tsp-ink); }
.tsp-status--pending,
.tsp-status--under-contract { background: var(--tsp-accent); color: #FFFFFF; }
.tsp-status--coming-soon { background: var(--tsp-deep-lt); }

.tsp-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.5rem; }

.tsp-card__price {
	margin-bottom: .35rem;
	font-family: var(--tsp-display);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--tsp-deep);
}

.tsp-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.tsp-card__title a { color: var(--tsp-ink); }
.tsp-card__title a:hover { color: var(--tsp-deep); }

.tsp-card__addr {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .9rem;
	font-size: .88rem;
	color: var(--tsp-muted);
}
.tsp-card__addr .tsp-icon { color: var(--tsp-accent); }

.tsp-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--tsp-line-soft);
	font-size: .84rem;
	color: var(--tsp-body);
}
.tsp-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.tsp-card__specs .tsp-icon { color: var(--tsp-deep-lt); }

.tsp-card__date {
	margin-bottom: .4rem;
	font-family: var(--tsp-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}
.tsp-card__text { font-size: .93rem; color: var(--tsp-muted); margin-bottom: 1rem; }

.tsp-count {
	margin-bottom: 1.75rem;
	font-size: .88rem;
	color: var(--tsp-muted);
}

/* --------------------------------------------------------------- services -- */

.tsp-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}

.tsp-service {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.6rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	color: inherit;
	transition: transform .28s var(--tsp-ease), box-shadow .28s var(--tsp-ease), border-color .28s var(--tsp-ease);
}
.tsp-service:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--tsp-shadow-lg);
	color: inherit;
}

.tsp-service__num {
	margin-bottom: .9rem;
	font-family: var(--tsp-display);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--tsp-accent);
}
.tsp-service__title { margin-bottom: .5rem; }
.tsp-service__text { font-size: .93rem; color: var(--tsp-muted); margin-bottom: 1.25rem; }

.tsp-service__link {
	margin-top: auto;
	font-family: var(--tsp-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-deep);
}
.tsp-service__link::after {
	content: ' \2192';
	display: inline-block;
	transition: transform .25s var(--tsp-ease);
}
.tsp-service:hover .tsp-service__link::after,
.tsp-card:hover .tsp-service__link::after { transform: translateX(4px); }

/* --------------------------------------------------------------- pillars -- */

.tsp-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
}

.tsp-pillar {
	padding: 1.75rem 1.5rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
}
.tsp-pillar__title { margin-bottom: .6rem; font-size: 1.05rem; }
.tsp-pillar__body { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }

/* ----------------------------------------------------------------- steps -- */

.tsp-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.5rem;
}
.tsp-step { padding-top: 1.5rem; border-top: 2px solid var(--tsp-line); }
.tsp-step__num {
	display: block;
	margin-bottom: .7rem;
	font-family: var(--tsp-display);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1;
	color: var(--tsp-accent);
}
.tsp-step__title { margin-bottom: .4rem; }
.tsp-step__text { font-size: .92rem; color: var(--tsp-muted); margin: 0; }

/* ------------------------------------------------------------------ team -- */

.tsp-team { display: grid; gap: 2rem; }

.tsp-member {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
}

@media (max-width: 760px) {
	.tsp-member { grid-template-columns: 1fr; }
}

.tsp-member__photo { position: relative; }

.tsp-member__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	background: var(--tsp-deep);
	color: var(--tsp-accent-lt);
	font-family: var(--tsp-display);
	font-size: 3.5rem;
	font-weight: 400;
	letter-spacing: .04em;
}

.tsp-member__name { margin-bottom: .2rem; }
.tsp-member__role {
	font-family: var(--tsp-display);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}
.tsp-member__bio { color: var(--tsp-body); margin-bottom: 1.1rem; }
.tsp-member__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.tsp-member__contact a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.tsp-member__contact .tsp-icon { color: var(--tsp-accent); }

.tsp-joinus {
	margin-top: 2rem;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--tsp-tint);
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	text-align: center;
}
.tsp-joinus h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.tsp-joinus p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.4rem; color: var(--tsp-muted); }

/* -------------------------------------------------------------- listing -- */

.tsp-listing { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.tsp-listing__head { margin-bottom: 1.75rem; }

.tsp-crumb { font-size: .82rem; color: var(--tsp-faint); margin-bottom: 1rem; }
.tsp-crumb span { margin-inline: .4rem; }

.tsp-listing__titles {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.tsp-listing__addr {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
	color: var(--tsp-muted);
}
.tsp-listing__addr .tsp-icon { color: var(--tsp-accent); }
.tsp-listing__price { text-align: right; }
.tsp-listing__amount {
	font-family: var(--tsp-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 400;
	color: var(--tsp-deep);
	margin-bottom: .4rem;
}
.tsp-listing__price .tsp-card__status { position: static; display: inline-block; }

.tsp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
	gap: 1px;
	margin-top: 1.75rem;
	background: var(--tsp-line);
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	overflow: hidden;
}
.tsp-facts li { padding: 1.1rem 1.25rem; background: #fff; text-align: center; }
.tsp-facts__value {
	display: block;
	font-family: var(--tsp-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--tsp-ink);
}
.tsp-facts__label {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tsp-faint);
}

.tsp-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) { .tsp-listing__body { grid-template-columns: 1fr; } }

.tsp-listing__galleryhead { margin-top: 2.5rem; }
.tsp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.tsp-askbox {
	position: sticky;
	top: calc(var(--tsp-header-h) + 1.5rem);
	padding: 1.75rem 1.6rem;
	background: var(--tsp-tint);
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
}
.tsp-askbox h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.tsp-askbox p { font-size: .92rem; color: var(--tsp-muted); margin-bottom: 1.25rem; }
.tsp-askbox__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin-top: .9rem;
	font-family: var(--tsp-display);
	font-weight: 400;
	color: var(--tsp-deep);
}

/* ----------------------------------------------------------------- empty -- */

.tsp-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 34rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	background: var(--tsp-tint);
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
}
.tsp-empty__mark { opacity: .7; }
.tsp-empty h2 { font-size: 1.3rem; }
.tsp-empty p { color: var(--tsp-muted); margin-bottom: .5rem; }

/* ------------------------------------------------------------------ faqs -- */

.tsp-faqs { display: grid; gap: .75rem; }

.tsp-faq {
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 6px;
}
.tsp-faq[open] { border-color: var(--tsp-deep-lt); }

.tsp-faq__q {
	position: relative;
	padding: 1.15rem 3rem 1.15rem 1.35rem;
	font-family: var(--tsp-display);
	font-size: 1rem;
	font-weight: 400;
	color: var(--tsp-ink);
	cursor: pointer;
	list-style: none;
}
.tsp-faq__q::-webkit-details-marker { display: none; }
.tsp-faq__q:hover { color: var(--tsp-deep); }

.tsp-faq__q::after,
.tsp-faq__q::before {
	content: '';
	position: absolute;
	right: 1.35rem; top: 50%;
	width: 12px; height: 2px;
	background: var(--tsp-accent);
	transition: transform .25s var(--tsp-ease);
}
.tsp-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.tsp-faq__q::after { transform: translateY(-50%); }
.tsp-faq[open] .tsp-faq__q::before { transform: translateY(-50%) rotate(0deg); }

.tsp-faq__a { margin: 0; padding: 0 3rem 1.35rem 1.35rem; color: var(--tsp-muted); }

/* ---------------------------------------------------------------- contact -- */

.tsp-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) { .tsp-contact { grid-template-columns: 1fr; } }

.tsp-contact__form .tsp-form { margin-top: 1.75rem; }

.tsp-contact__aside {
	display: grid;
	gap: 1px;
	background: var(--tsp-line);
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	overflow: hidden;
}
.tsp-contact__block { padding: 1.4rem 1.5rem; background: #fff; }
.tsp-contact__heading {
	margin-bottom: .4rem;
	font-family: var(--tsp-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}
.tsp-contact__big {
	display: inline-block;
	font-family: var(--tsp-display);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--tsp-ink);
	word-break: break-word;
}
.tsp-contact__big:hover { color: var(--tsp-deep); }
.tsp-contact__note, .tsp-contact__text { margin: .3rem 0 0; font-size: .9rem; color: var(--tsp-muted); }
.tsp-contact__text { color: var(--tsp-body); }

.tsp-contact__seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
	background: var(--tsp-deep);
}
.tsp-contact__seal p {
	margin: 0;
	font-family: var(--tsp-display);
	font-size: .78rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .82);
}
.tsp-contact__seal .tsp-mark { filter: brightness(1.6); }

/* ------------------------------------------------------------------ form -- */

.tsp-form { display: grid; gap: 1rem; }
.tsp-field { display: grid; gap: .4rem; min-width: 0; }
.tsp-field__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1rem;
}

.tsp-field label {
	font-family: var(--tsp-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}
.tsp-field label span { color: var(--tsp-accent); }

.tsp-field input,
.tsp-field select,
.tsp-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 5px;
	color: var(--tsp-ink);
	font-family: var(--tsp-body-font);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s var(--tsp-ease), box-shadow .2s var(--tsp-ease);
	-webkit-appearance: none;
	appearance: none;
}

.tsp-field textarea { resize: vertical; min-height: 8rem; }

.tsp-field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--tsp-deep) 50%),
		linear-gradient(135deg, var(--tsp-deep) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
	cursor: pointer;
}

.tsp-field input:focus,
.tsp-field select:focus,
.tsp-field textarea:focus {
	border-color: var(--tsp-deep-lt);
	box-shadow: 0 0 0 3px rgba(47, 78, 122, .12);
	outline: none;
}

.tsp-field input::placeholder, .tsp-field textarea::placeholder { color: var(--tsp-faint); }

/* Off-screen rather than display:none — some bots skip explicitly hidden
   fields, and this one is meant to be filled in. */
.tsp-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.tsp-form__note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.tsp-form__note.is-ok { color: #1E7A4C; }
.tsp-form__note.is-bad { color: #C0392B; }
.tsp-form.is-sending { opacity: .6; pointer-events: none; }

.tsp-alert {
	padding: .9rem 1.15rem;
	margin-bottom: 1.5rem;
	border-left: 3px solid var(--tsp-deep);
	background: var(--tsp-tint);
	border-radius: 0 4px 4px 0;
	font-size: .94rem;
}
.tsp-alert--ok { border-left-color: #1E7A4C; color: #1E7A4C; }
.tsp-alert--bad { border-left-color: #C0392B; color: #C0392B; }

/* ---------------------------------------------------------------- closer -- */

.tsp-closer {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--tsp-deep);
	color: rgba(255, 255, 255, .82);
	text-align: center;
	overflow: hidden;
}

.tsp-closer::before {
	content: '';
	position: absolute;
	top: -45%; left: 50%;
	width: 44rem; height: 44rem;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(120, 140, 169, .17) 0%, transparent 62%);
	pointer-events: none;
}

.tsp-closer__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.tsp-closer__title { color: #fff; }
.tsp-closer__lede { color: rgba(255, 255, 255, .82); margin-inline: auto; margin-top: 1rem; }
.tsp-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }

/* ----------------------------------------------------------------- posts -- */

.tsp-posts { display: grid; gap: 2.25rem; }
.tsp-post { padding-bottom: 2.25rem; border-bottom: 1px solid var(--tsp-line); }
.tsp-post__date {
	font-family: var(--tsp-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}
.tsp-post__title { margin: .4rem 0 .6rem; }
.tsp-post__excerpt { color: var(--tsp-muted); margin: 0; }

.tsp-backlink { margin-top: 2.5rem; font-family: var(--tsp-display); font-weight: 400; }

.tsp-pagination { margin-top: 2.75rem; }
.tsp-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.tsp-pagination .page-numbers {
	padding: .5rem .9rem;
	border: 1px solid var(--tsp-line);
	border-radius: 4px;
	color: var(--tsp-body);
	font-size: .88rem;
}
.tsp-pagination .page-numbers.current,
.tsp-pagination .page-numbers:hover {
	border-color: var(--tsp-deep);
	background: var(--tsp-deep);
	color: #fff;
}

/* --------------------------------------------- syndicated legal documents -- */

/* Light site, so the plugin's inline color:#000000 is survivable here — but it
   is still forced to the body color so legal pages match everything else. */
.bb-legal-container,
.bb-legal-container * { color: var(--tsp-body) !important; }
.bb-legal-container { max-width: 70ch; }
.bb-legal-container h1,
.bb-legal-container h2,
.bb-legal-container h3,
.bb-legal-container strong,
.bb-legal-container b { color: var(--tsp-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--tsp-display); }
.bb-legal-container p, .bb-legal-container li { margin-bottom: 1em; }
.bb-legal-container ul, .bb-legal-container ol { margin: 0 0 1.25em 1.25rem; list-style: disc; }
.bb-legal-container ol { list-style: decimal; }
.bb-legal-container a { color: var(--tsp-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--tsp-line); margin: 2rem 0; }

/* ---------------------------------------------------------------- reveal -- */

@media (prefers-reduced-motion: no-preference) {
	html.js [data-tsp-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .7s var(--tsp-ease), transform .7s var(--tsp-ease);
	}
	html.js [data-tsp-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------------ misc -- */

@media (max-width: 620px) {
	.tsp-section { padding-block: clamp(3rem, 10vw, 4rem); }
	.tsp-card__body { padding: 1.15rem; }
	.tsp-service { padding: 1.6rem 1.3rem; }
	.tsp-listing__titles { flex-direction: column; align-items: flex-start; }
	.tsp-listing__price { text-align: left; }
}

body.admin-bar .tsp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tsp-header { top: 46px; } }

/* -------------------------------------------------------- nav dropdowns -- */

.tsp-nav__item { position: relative; display: flex; align-items: center; gap: .2rem; }

/* The chevron is a button, not decoration: on a touch screen there is no hover,
   so the parent link has to stay a link and something else has to open the
   submenu. */
.tsp-nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem;
	background: none;
	border: 0;
	color: var(--tsp-ink);
	cursor: pointer;
	transition: transform .2s var(--tsp-ease);
}
.tsp-nav__item.is-open > .tsp-nav__toggle { transform: rotate(180deg); }

.tsp-nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 6px;
	box-shadow: var(--tsp-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s var(--tsp-ease), transform .2s var(--tsp-ease), visibility .2s var(--tsp-ease);
	z-index: 20;
}

.tsp-nav__item:hover > .tsp-nav__sub,
.tsp-nav__item:focus-within > .tsp-nav__sub,
.tsp-nav__item.is-open > .tsp-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tsp-nav__sub a {
	display: block;
	padding: .55rem 1.1rem;
	font-size: .78rem;
	text-transform: none;
	letter-spacing: .01em;
	color: var(--tsp-body);
}
.tsp-nav__sub a::after { display: none; }
.tsp-nav__sub a:hover { background: var(--tsp-tint); color: var(--tsp-deep); }

/* In the drawer every submenu is an accordion, collapsed by default.
 *
 * They used to be forced open, which turned six top-level items into fourteen
 * rows and pushed the bottom of the menu off a phone screen entirely. Collapsed,
 * the whole menu fits without scrolling and each section opens on a tap. */
.tsp-drawer__nav .tsp-nav__list { width: 100%; gap: 0; }

.tsp-drawer__nav .tsp-nav__item {
	display: grid;
	/* A centred row with the chevron pinned right: three columns where the outer
	   two are equal, so the label lands on the true center rather than being
	   pushed left by the arrow's width. */
	grid-template-columns: 3rem 1fr 3rem;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--tsp-line);
}

.tsp-drawer__nav .tsp-nav__item > a {
	grid-column: 2;
	padding-block: 1rem;
	font-size: 1.06rem;
	text-align: center;
}
.tsp-drawer__nav .tsp-nav__item > a::after { display: none; }

/* The row is the control, so it should look like one under the finger. */
.tsp-drawer__nav .tsp-nav__item.has-children { cursor: pointer; }
.tsp-drawer__nav .tsp-nav__item.has-children:active { background: var(--tsp-tint); }

/* A proper hit target — the chevron is the control that opens the section, and
   on a phone it has to be thumb-sized rather than icon-sized. */
.tsp-drawer__nav .tsp-nav__toggle {
	grid-column: 3;
	display: inline-flex;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--tsp-deep);
}

.tsp-drawer__nav .tsp-nav__sub {
	grid-column: 1 / -1;
	background: var(--tsp-tint);
	position: static;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: none;
	transform: none;
	visibility: visible;
	opacity: 1;
	/* Collapsed by default.
	 *
	 * NOT the grid-template-rows: 0fr trick — that declares a single track, so
	 * only the first child collapses and every item after it lands in an
	 * implicit auto row and stays visible. It looked like the accordion worked
	 * until a submenu had more than one entry. max-height is unfashionable and
	 * correct. */
	display: block;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	opacity: 0;
	transition: max-height .3s var(--tsp-ease), opacity .2s var(--tsp-ease), padding .3s var(--tsp-ease);
}

.tsp-drawer__nav .tsp-nav__item.is-open > .tsp-nav__sub {
	/* Comfortably past the tallest submenu (three items); the transition eases
	   on the real height because the content is shorter than the cap. */
	max-height: 22rem;
	opacity: 1;
	padding-bottom: .6rem;
}

.tsp-drawer__nav .tsp-nav__sub a {
	padding: .55rem 0;
	font-size: .95rem;
	font-weight: 500;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tsp-body);
}

/* ----------------------------------------------------------- credentials -- */

/* White, not navy. It sat directly beneath a navy-scrimmed hero and the two ran
   together as one undifferentiated slab of blue. */
.tsp-creds { background: #fff; border-bottom: 1px solid var(--tsp-line); }

.tsp-creds__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 13rem), 1fr));
	gap: 1px;
	background: var(--tsp-line);
}

.tsp-creds__list li {
	padding: 1.5rem 1.25rem;
	background: #fff;
	text-align: center;
}

.tsp-creds__label {
	display: block;
	font-family: var(--tsp-display);
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--tsp-deep);
}
.tsp-creds__note {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--tsp-muted);
}

/* ----------------------------------------------------------------- paths -- */

.tsp-paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tsp-path {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .28s var(--tsp-ease), box-shadow .28s var(--tsp-ease);
}
.tsp-path:hover { transform: translateY(-4px); box-shadow: var(--tsp-shadow-lg); }

.tsp-path__media .tsp-figure { border-radius: 0; }
.tsp-path__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.tsp-path__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.tsp-path__text { color: var(--tsp-muted); margin-bottom: 1.5rem; }

/* ----------------------------------------------------------------- creed -- */

.tsp-creed__inner { max-width: 52rem; margin-inline: auto; text-align: center; }

.tsp-creed__quote { margin: 0; }

.tsp-creed__goal {
	font-family: var(--tsp-display);
	font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.95rem);
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	margin-bottom: 1.5rem;
}

.tsp-creed__close {
	font-size: clamp(1rem, .97rem + .3vw, 1.12rem);
	color: var(--tsp-accent-lt);
	font-weight: 500;
}

.tsp-creed__attrib {
	margin-top: 1.25rem;
	font-family: var(--tsp-display);
	font-size: .76rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.tsp-creed__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
	margin-top: 2rem;
}

/* ------------------------------------------------------- valuation call -- */

.tsp-valuecta {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--tsp-tint);
	border: 1px solid var(--tsp-line);
	border-left: 4px solid var(--tsp-accent-mid);
	border-radius: 8px;
}
@media (max-width: 820px) { .tsp-valuecta { grid-template-columns: 1fr; } }

.tsp-valuecta h2 { margin-bottom: .6rem; }
.tsp-valuecta p { color: var(--tsp-muted); margin: 0; }
.tsp-valuecta__act { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }

.tsp-valuecta__call {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--tsp-display);
	font-weight: 400;
	color: var(--tsp-deep);
}
.tsp-valuecta__call .tsp-icon { color: var(--tsp-accent-mid); }

/* Both step lists are four items. auto-fit put three on one row and left the
   fourth stranded beside a hole, so the count is pinned instead: four across,
   then two, then one. Two never orphans a four-item list. */
.tsp-steps--wide { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1120px) { .tsp-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .tsp-steps--wide { grid-template-columns: 1fr; } }

/* Pillars sit on navy by default; this is the variant for a light band. */
.tsp-pillars--light .tsp-pillar {
	background: #fff;
	border-color: var(--tsp-line);
}
.tsp-pillars--light .tsp-pillar__title { color: var(--tsp-ink); }
.tsp-pillars--light .tsp-pillar__body { color: var(--tsp-muted); }

/* ---------------------------------------------------------------- footer -- */

/* Same structure as themes/brokerboost-flagship, but white.
 *
 * The flagship paints it with --bbt-primary. Here the closing band above it is
 * already navy, so a navy footer made the bottom fifth of every page one
 * continuous blue block with a hairline through it. White separates the two and
 * lets the logo sit on its own background without a plate. */

/*
 * The footer, continuous with the closer above it.
 *
 * It used to be white with a cream legal strip, which meant the bottom of every
 * page was three surfaces in a row: a glowing navy band, a hard edge, white, and
 * then cream. The glow Adam liked was doing its work and then hitting a wall an
 * inch below.
 *
 * Now the closer and the footer share one ground, with no border between them,
 * and a second much wider glow sits at the top of the footer continuing the same
 * light. Read together they are one object: light falls from the closer's
 * headline and dies out somewhere around the legal line.
 *
 * Everything else is subtraction — the logo came down from 96px, the columns
 * tightened, and the legal strip is now a darker shelf rather than a different
 * material.
 */
.tsp-foot {
	position: relative;
	background: var(--tsp-deep);
	color: rgba(255, 255, 255, .70);
	overflow: hidden;
}

/* The continuation of the closer's light. Wider and fainter than the one above
   it, so it reads as the same source falling further rather than a second lamp. */
.tsp-foot::before {
	content: '';
	position: absolute;
	top: -70%; left: 50%;
	width: 74rem; height: 52rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(120, 140, 169, .10) 0%, transparent 64%);
	pointer-events: none;
}

.tsp-foot__in {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4.5vw, 68px);
	padding-block: clamp(40px, 5vw, 60px);
}

.tsp-foot__brand { flex: 1 1 300px; }
.tsp-foot__col { flex: 0 1 190px; }

.tsp-foot__brand .tsp-logo { margin-bottom: .9rem; }
.tsp-foot__brand .tsp-logo__img { height: 64px; }

.tsp-foot__name { margin: 0; font-family: var(--tsp-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.tsp-foot__firm {
	margin: 2px 0 12px;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* --tsp-accent is a dark blue and vanishes here; the light tint is the only
	   member of the brand family that survives on this ground. */
	color: var(--tsp-brand-lt);
}
.tsp-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }

.tsp-foot__h {
	margin: 0 0 12px;
	font-family: var(--tsp-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.tsp-foot__menu { list-style: none; margin: 0; padding: 0; }
.tsp-foot__menu a,
.tsp-foot__link {
	display: block;
	padding: 4px 0;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	font-size: .92rem;
	transition: color .18s var(--tsp-ease);
}
.tsp-foot__menu a:hover,
.tsp-foot__link:hover { color: #fff; text-decoration: none; }

.tsp-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.tsp-foot__social { margin: 14px 0 0; font-size: .88rem; }
.tsp-foot__social a { color: var(--tsp-brand-lt); }

/* A darker shelf rather than a different material. The hairline is white at low
   alpha so it reads as a fold in the same surface, not a seam between two. */
.tsp-foot__legal {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .09);
	background: rgba(0, 0, 0, .18);
}
.tsp-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.tsp-foot__legal-in p { margin: 0 0 6px; }
.tsp-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.tsp-foot__legal-in a:hover { color: #fff; }

.tsp-foot__legalnav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 10px 0; }
.tsp-foot__legalnav a { text-decoration: underline; text-underline-offset: 2px; }

.tsp-foot__eho { display: flex; align-items: center; gap: 8px; }

/* The Equal Housing mark is now real SVG geometry — see tsp_eho_mark(). */
.tsp-eho { flex: 0 0 auto; opacity: .85; }

/* --------------------------------------------------------- property search -- */

/* A mockup. It has to look like a working search or it undersells the site, and
   it has to be obviously a form or nobody will try it. */

.tsp-searchband {
	position: relative;
	z-index: 5;
	/* Rides up over the hero so it reads as part of it. */
	margin-top: -3.5rem;
	padding-bottom: 1rem;
}
@media (max-width: 900px) { .tsp-searchband { margin-top: -1.5rem; } }

.tsp-section--searchtop { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tsp-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.tsp-search {
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 10px;
	box-shadow: var(--tsp-shadow-lg);
}

.tsp-search--page { box-shadow: var(--tsp-shadow); }

.tsp-search__row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr auto;
	gap: .75rem;
	align-items: end;
}
@media (max-width: 900px) {
	.tsp-search__row { grid-template-columns: 1fr 1fr; }
	.tsp-search__field--wide { grid-column: 1 / -1; }
	.tsp-search__submit { grid-column: 1 / -1; }
}

.tsp-search__field { display: grid; gap: .3rem; min-width: 0; }

.tsp-search__field label {
	font-family: var(--tsp-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}

.tsp-search__field input,
.tsp-search__field select {
	width: 100%;
	padding: .7rem .8rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 5px;
	color: var(--tsp-ink);
	font-family: var(--tsp-body-font);
	font-size: .95rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s var(--tsp-ease), box-shadow .2s var(--tsp-ease);
}

.tsp-search__field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--tsp-deep) 50%),
		linear-gradient(135deg, var(--tsp-deep) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.4rem;
	cursor: pointer;
}

.tsp-search__field input:focus,
.tsp-search__field select:focus {
	border-color: var(--tsp-deep-lt);
	box-shadow: 0 0 0 3px rgba(47, 78, 122, .12);
	outline: none;
}

.tsp-search__submit .tsp-btn { width: 100%; padding-block: .78rem; }

.tsp-search__more { margin-top: .85rem; }
.tsp-search__more summary {
	display: inline-block;
	font-family: var(--tsp-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsp-deep-lt);
	cursor: pointer;
	list-style: none;
}
.tsp-search__more summary::-webkit-details-marker { display: none; }
.tsp-search__more summary::after { content: ' +'; }
.tsp-search__more[open] summary::after { content: ' \2013'; }

.tsp-search__row--more {
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid var(--tsp-line-soft);
}

/* ------------------------------------------------------------------ creed -- */

.tsp-creed__call {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255, 255, 255, .86);
	font-size: .98rem;
}
.tsp-creed__call strong { color: var(--tsp-accent-lt); }
.tsp-creed__call:hover { color: #fff; }
.tsp-creed__call .tsp-icon { color: var(--tsp-accent-lt); }

.tsp-glyph { color: var(--tsp-faint); }

/* ---------------------------------------------------------------- slider -- */

/* A real horizontal scroller with scroll-snap, not a JS carousel. Trackpad,
   swipe, keyboard and the arrow buttons all work without special-casing any of
   them — the buttons just call scrollBy(). */

.tsp-slider__controls { display: flex; align-items: center; gap: .5rem; }

.tsp-slider__btn {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 50%;
	color: var(--tsp-deep);
	cursor: pointer;
	transition: background .2s var(--tsp-ease), border-color .2s var(--tsp-ease), opacity .2s var(--tsp-ease);
}
.tsp-slider__btn:hover { background: var(--tsp-deep); border-color: var(--tsp-deep); color: #fff; }
.tsp-slider__btn[disabled] { opacity: .35; cursor: default; }
.tsp-slider__btn[disabled]:hover { background: #fff; border-color: var(--tsp-line); color: var(--tsp-deep); }

.tsp-slider__track {
	display: grid;
	grid-auto-flow: column;
	/* Likewise a floor that is not zero, so the track overflows. */
	/* The cap used to be a flat 21rem, which is narrower than the container on
	   any phone above ~400px: a 336px card sat in a 390px track and left ~54px
	   of dead space on the right, so the carousel read as left-aligned rather
	   than centred. Falling back to 100% of the track means the card fills the
	   width on a phone and still peeks the next one on a tablet. */
	grid-auto-columns: min(84vw, 21rem, 100%);
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for the card hover lift and its shadow, which would otherwise be
	   clipped by the scroll container. */
	padding: .5rem .25rem 1.5rem;
	margin-inline: -.25rem;
	scrollbar-width: thin;
}

.tsp-slider__track::-webkit-scrollbar { height: 6px; }
.tsp-slider__track::-webkit-scrollbar-thumb { background: var(--tsp-line); border-radius: 6px; }
.tsp-slider__track::-webkit-scrollbar-track { background: transparent; }

.tsp-slider__slide { scroll-snap-align: start; min-width: 0; }

/*
 * On a phone the card is centred in the viewport with a symmetric peek either
 * side, rather than sitting flush against the left gutter with one card showing
 * on the right. Both are legitimate; this one reads as deliberate rather than
 * as a grid that happened to be cut off, which is the point on a site whose job
 * is to look more expensive than the client's current one.
 *
 * The negative margin lets the track escape the wrap's gutter so the peeking
 * cards run to the screen edge; the matching scroll-padding is what actually
 * centers the snap target, and without it the first and last cards cannot reach
 * the middle.
 */
/*
 * ON A PHONE THE CARD GOES ALL THE WAY ACROSS (Adam, 2026-09-28).
 *
 * It used to be 78vw with an 11vw peek either side, on the theory that a
 * centred card with a symmetric peek "reads as deliberate". On a 390px screen
 * that is a 304px card with 43px of dead gutter down both edges, and what it
 * actually reads as is a card that did not fit. A listing photograph is the
 * most expensive thing on the page and it was being shown at 78% of the width
 * available to it.
 *
 * Now the card spans the full content width, one per screen, and the track
 * still scrolls and snaps. The 1.5rem right padding is what makes the next
 * card peek by a sliver so the row is still legibly a scroller -- without it a
 * full-width card looks like a static image.
 */
@media (max-width: 899px) {
	.tsp-slider__track {
		grid-auto-columns: 100%;
		margin-inline: 0;
		padding-inline: 0 1.5rem;
		scroll-padding-inline: 0;
	}
	.tsp-slider__slide { scroll-snap-align: start; }
}
.tsp-slider__slide .tsp-card { height: 100%; }

@media (min-width: 900px) {
	/* A FIXED track width, not minmax(0, …).
	 *
	 * With a zero minimum every column is allowed to shrink, and a grid inside
	 * an overflow container will always take that offer — so twelve slides
	 * collapsed to 80px each and squeezed into the visible width instead of
	 * overflowing. scrollWidth equalled clientWidth, which is the tell: nothing
	 * to scroll, because nothing overflowed. A single length forces the track to
	 * that size and the container to scroll. */
	.tsp-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

.tsp-home .tsp-header__bar {
	position: relative;
	background: rgba(255, 255, 255, var(--tsp-shrink));
	border-bottom-color: rgba(232, 226, 236, var(--tsp-shrink));
}

/*
 * A ground for the masthead while it is over the photograph.
 *
 * The white nav, the gold lockup subline and the outlined button all sit on
 * whatever the hero happens to be showing, and one of the three frames is a
 * sunlit oak canopy. Measured against the bright patches of it: nav 2.86:1,
 * subline 2.38:1, the "Talk to Tanesha" outline 1.83:1 — all needing 4.5.
 *
 * Note the measurement that MISSED it first: averaging the darker half of the
 * region called it 14:1. On dappled foliage there is no single background
 * value, and the dark leaf-gaps flatter it enormously. The number that matters
 * is the bright end — the 90th percentile — because that is where the glyphs
 * disappear.
 *
 * A short top-down wash fixes all three at once and fades out before the
 * headline, so it reads as depth rather than as a bar. It rides the same
 * --tsp-shrink as the white background, so it is gone once the header goes
 * solid and is never doubled up.
 */
.tsp-home .tsp-header__bar::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 190%;
	pointer-events: none;
	opacity: calc(1 - var(--tsp-shrink));
	background: linear-gradient(to bottom,
		rgba(16, 18, 22, .62) 0%,
		rgba(16, 18, 22, .52) 52%,
		rgba(16, 18, 22, .00) 100%);
}
.tsp-home .tsp-header__inner { position: relative; z-index: 1; }

/* The light state: only while over the photograph. */
.tsp-home .tsp-header:not(.is-solid) .tsp-nav__list > li > a,
.tsp-home .tsp-header:not(.is-solid) .tsp-nav__toggle,
.tsp-home .tsp-header:not(.is-solid) .tsp-callnow {
	color: #fff;
}

.tsp-home .tsp-header:not(.is-solid) .tsp-burger__box i { background: #fff; }

/* The hover underline is a gold-era gradient; on the photograph it reads as
   mud, so it becomes plain white until the bar arrives. */
.tsp-home .tsp-header:not(.is-solid) .tsp-nav__list > li > a::after { background: #fff; }

.tsp-header .tsp-nav__list > li > a,
.tsp-header .tsp-nav__toggle,
.tsp-header .tsp-callnow { transition: color .28s var(--tsp-ease); }

/* The submenu panel is its own white surface and is never part of the swap. */
.tsp-home .tsp-nav__sub a { color: var(--tsp-body); }

/*
 * The masthead CTA. Solid navy on a navy photograph disappears, so over the
 * hero it is an outlined button and fills in once the bar is there.
 */
.tsp-header__actions .tsp-btn--sm { transition: background .28s var(--tsp-ease), border-color .28s var(--tsp-ease); }

.tsp-home .tsp-header:not(.is-solid) .tsp-header__actions .tsp-btn--sm {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .75);
	color: #fff;
}

/* The light lockup sits on top of the dark one and fades out as the bar lands. */
.tsp-logo { position: relative; }
.tsp-logo__img--light {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--tsp-ease);
}
.tsp-home .tsp-header:not(.is-solid) .tsp-logo__img--light { opacity: 1; }
html:not(.js) .tsp-home .tsp-header__bar { background: #fff; }
html:not(.js) .tsp-logo__img--light { display: none; }

.tsp-rent__all { margin: 1.5rem 0 0; }

.tsp-note__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.6rem;
}

.tsp-note__actions .tsp-btn { flex: 1 1 auto; justify-content: center; }

/* ------------------------------------------------------- agent page -- */

/*
 * The facts block. This is what carries the eight agents who have neither a bio
 * nor a review: a direct line, an email and a state license number, presented
 * as a proper specification rather than as leftovers. A definition list because
 * that is genuinely what it is, which also gives screen readers the pairing.
 */
.tsp-agentfacts {
	display: grid;
	gap: .85rem 2rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--tsp-line);
}

@media (min-width: 560px) {
	.tsp-agentfacts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

.tsp-agentfacts dt {
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}

.tsp-agentfacts dd {
	margin: .3rem 0 0;
	font-family: var(--tsp-display);
	font-size: 1.02rem;
	color: var(--tsp-ink);
	/* License numbers and long emails must not push the column open. */
	overflow-wrap: anywhere;
}

.tsp-agentfacts a { color: var(--tsp-accent); }
.tsp-agentfacts a:hover { text-decoration: underline; }

.tsp-agent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 1.9rem;
}

/* The monogram at portrait size, for an agent with no headshot yet. */
.tsp-agentcard__initials--lg {
	border-radius: 8px;
	font-size: clamp(3.5rem, 9vw, 6rem);
	letter-spacing: .04em;
}

/* Sized in em so the mark tracks the caption rather than being pinned to a
   pixel size that stops matching the moment the type scale changes. */
.tsp-gmark {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	/* The optical center of the G sits slightly above the text baseline. */
	transform: translateY(.04em);
}

/* ----------------------------------------------------------- agent cards -- */

/*
 * The team slider's card. Narrower than a property card on purpose — a
 * portrait, a name and a role is the whole job, and fitting more of them in
 * view is what makes fifteen people read as a roster rather than a queue.
 */
.tsp-slider--team .tsp-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }

@media (min-width: 900px) {
	.tsp-slider--team .tsp-slider__track { grid-auto-columns: calc((100% - 5rem) / 5); }
}

.tsp-agentcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
	overflow: hidden;
	color: inherit;
	transition: transform .25s var(--tsp-ease), box-shadow .25s var(--tsp-ease), border-color .25s var(--tsp-ease);
}

.tsp-agentcard:hover {
	transform: translateY(-4px);
	border-color: var(--tsp-brand-lt);
	box-shadow: var(--tsp-shadow);
}

.tsp-agentcard__photo { position: relative; background: var(--tsp-sky); }

/* The monogram, for anyone whose headshot has not arrived. */
.tsp-agentcard__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	font-family: var(--tsp-display);
	font-size: 2.4rem;
	color: var(--tsp-brand);
	background: var(--tsp-sky);
}

.tsp-agentcard__body { padding: .95rem 1rem 1.15rem; }

.tsp-agentcard__name {
	display: block;
	font-family: var(--tsp-display);
	font-size: 1.12rem;
	line-height: 1.2;
	color: var(--tsp-ink);
}

.tsp-agentcard__role {
	display: block;
	margin-top: .3rem;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}

.tsp-agentcard:hover .tsp-agentcard__name { color: var(--tsp-accent); }

/* --------------------------------------------------------------- filters -- */

.tsp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--tsp-line);
}

.tsp-filter {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 999px;
	color: var(--tsp-body);
	font-family: var(--tsp-display);
	font-size: .78rem;
	font-weight: 400;
	transition: background .2s var(--tsp-ease), border-color .2s var(--tsp-ease), color .2s var(--tsp-ease);
}
.tsp-filter:hover { border-color: var(--tsp-deep); color: var(--tsp-deep); }

.tsp-filter.is-on {
	background: var(--tsp-deep);
	border-color: var(--tsp-deep);
	color: #fff;
}

.tsp-filter__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding-inline: .3rem;
	border-radius: 999px;
	background: var(--tsp-tint-2);
	color: var(--tsp-muted);
	font-size: .68rem;
}
.tsp-filter.is-on .tsp-filter__n { background: rgba(255, 255, 255, .18); color: #fff; }

/* --------------------------------------------------------------- headshot -- */

/* Her headshot is square, so it gets a square frame. It was being forced into a
   3/4 portrait, which cropped it and blew it up far larger than the section
   needed. Capped so it sits beside the text rather than dominating it. */
.tsp-figure--square { aspect-ratio: 1 / 1; }

.tsp-split__media--headshot { max-width: 26rem; margin-inline: auto; }

/* A placeholder that fills whatever frame it lands in — the card, the slider,
   the single-property hero — rather than collapsing to its min-height. */
.tsp-figure--empty.tsp-figure--wide,
.tsp-figure--empty.tsp-figure--hero,
.tsp-figure--empty.tsp-figure--square { min-height: 0; }

.tsp-listing__repd {
	margin: 0 0 .4rem;
	font-family: var(--tsp-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}

/* The representation line is the reason a sold listing is worth showing. */
.tsp-card__repd {
	margin-bottom: .5rem;
	font-family: var(--tsp-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}

/* ------------------------------------------------------- mobile call button -- */

/* Desktop already carries the number in the utility bar, so this is the phone's
   home only on the sizes where that bar is hidden. */
.tsp-callnow { display: none; }

@media (max-width: 1040px) {
	.tsp-callnow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		white-space: nowrap;
		/* Flat fill, not the metal gradient the other gold buttons use. That
		   gradient runs dark at the corners and bright through the middle, which
		   is fine across a 200px button and reads as a smudge across a 43px one. */
		background: var(--tsp-accent-lt);
		background-image: none;
		border-color: var(--tsp-accent-lt);
		color: var(--tsp-deep);
		/* A real touch target. It was 43x39 — under the 44px minimum and visibly
		   squatter than the burger sitting next to it. */
		min-height: 44px;
		min-width: 44px;
		padding: .6rem 1rem;
		border-radius: 6px;
	}

	.tsp-callnow:hover {
		background: var(--tsp-accent-mid);
		background-image: none;
		border-color: var(--tsp-accent-mid);
		color: var(--tsp-deep);
		box-shadow: none;
	}

	/* The brand navy, so it picks up the logo sitting beside it. */
	.tsp-callnow .tsp-icon { color: var(--tsp-deep); width: 17px; height: 17px; }
}

/* Below this the words go and the icon carries it — at 380px a labelled button
   plus a burger leaves the logo nowhere to sit. */
@media (max-width: 400px) {
	/* Icon only, and square — a squashed rectangle with a glyph floating in it
	   is what made this look broken. */
	.tsp-callnow span { display: none; }
	.tsp-callnow { padding: 0; width: 44px; height: 44px; }
}

/* ------------------------------------------------------------ team roster -- */

/* Six members, so a grid rather than six full-width rows. The broker keeps the
   wide treatment because she is the reason to choose the brokerage. */
@media (min-width: 860px) {
	.tsp-team { grid-template-columns: 1fr 1fr; }
	.tsp-team .tsp-member:first-child { grid-column: 1 / -1; }
	.tsp-team .tsp-member:not(:first-child) { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }

	/* A two-person brokerage. :nth-child(2):last-child matches only when the
	   second member is also the final one, so a roster of two gets two full
	   cards instead of one wide card and one stranded half beside a hole. Three
	   or more still pair up as before. */
	.tsp-team .tsp-member:nth-child(2):last-child {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

.tsp-member__license {
	margin: .75rem 0 0;
	font-family: var(--tsp-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-faint);
}

/* A card with no bio should sit tight rather than leave the gap the bio left. */
.tsp-member__bio:empty { display: none; }

/* A heading section immediately above another section doubles its vertical
   padding, which reads as a missing block rather than as breathing room. */
.tsp-section--flush { padding-bottom: 0; }
.tsp-head--tight { margin-bottom: 0; }

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See tsp_listing_media() for why most synced
   listings arrive without one. It has to read as a designed panel, because on
   this site it is the common case. */
.tsp-plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	padding: 2rem 1.5rem;
	text-align: center;
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .022) 14px 28px),
		linear-gradient(160deg, #3B0347 0%, var(--tsp-deep) 55%, #2B0234 100%);
}

.tsp-plate__addr {
	font-family: var(--tsp-display);
	font-size: clamp(1.05rem, 1.9vw, 1.45rem);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-wrap: balance;
}

.tsp-plate__rule {
	width: 42px;
	height: 2px;
	background: var(--tsp-accent);
}

.tsp-plate__city {
	font-family: var(--tsp-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* The hero on a single listing is far taller than a card, so it needs room. */
.tsp-figure--hero.tsp-plate { min-height: clamp(15rem, 34vw, 26rem); }

.tsp-foot__blurb--sm { font-size: .82rem; }

/*
 * The hero search panel: light frosted glass over the photograph.
 *
 * It was a 62% warm-charcoal veil carried over from the previous client, which
 * on a blue-green aerial read as a dirty smudge. This is the opposite — a light
 * material that lifts the photograph rather than covering it.
 *
 * Two things make it read as glass rather than as a flat white box: a real blur
 * doing the work at low opacity, and `saturate()`, which keeps the water and
 * the greenery showing through in color instead of going milky gray. The inner
 * hairline is the classic glass edge — a light top rim catching the light.
 *
 * The panel is light, so the labels flip to ink. That is the whole reason the
 * old rules cannot simply have their alpha lowered: white-on-light would fail.
 */
.tsp-search--hero {
	background: rgba(255, 255, 255, .52);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 18px 44px rgba(36, 2, 43, .28),
		inset 0 1px 0 rgba(255, 255, 255, .55);
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
}

.tsp-search--hero .tsp-search__field label { color: var(--tsp-ink); }

/*
 * The fields stay solidly white so they still read as things you type into —
 * on a translucent panel an equally translucent input disappears into it. The
 * hairline border is what separates white-on-light; without it the fields merge
 * into the glass.
 */
.tsp-search--hero .tsp-search__field input,
.tsp-search--hero .tsp-search__field select {
	background: #fff;
	border-color: rgba(36, 2, 43, .14);
}

.tsp-search--hero .tsp-search__field input::placeholder { color: var(--tsp-faint); }

.tsp-search--hero .tsp-search__more summary { color: var(--tsp-body); }
.tsp-search--hero .tsp-search__more summary:hover { color: var(--tsp-accent); }

/*
 * Safari on iOS honors backdrop-filter; a browser that does not would render a
 * 52%-white box with no blur, which is legible but flat. Give those a more
 * opaque panel so the type never sits on a half-transparent ground.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tsp-search--hero { background: rgba(255, 255, 255, .88); }
}

/* The disclosure and the result line. */
.tsp-search__more { margin-top: .8rem; }

.tsp-search__more summary {
	font-family: var(--tsp-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tsp-muted);
	cursor: pointer;
}

.tsp-search__row--more {
	grid-template-columns: repeat(3, 1fr);
	margin-top: .75rem;
}
@media (max-width: 900px) { .tsp-search__row--more { grid-template-columns: 1fr 1fr; } }

.tsp-search__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin: 1rem 0 0;
	font-size: .95rem;
	color: var(--tsp-body);
}

.tsp-search__clear {
	font-family: var(--tsp-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tsp-accent);
}

/* ============================================================= markets === */

/*
 * The market grid.
 *
 * Each card is an area's own boundary, drawn from OpenStreetMap geometry —
 * see TYN_Areas. The shape is the picture, so it gets the space a photograph
 * would and the caption sits under it rather than over it.
 *
 * Cards whose outline has not been cached yet carry .tsp-market--noshape and
 * simply center their caption. That has to look deliberate, because on a cold
 * cache it is what every card looks like.
 */

.tsp-markets__grid {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1040px) { .tsp-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .tsp-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

.tsp-market__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	height: 100%;
	padding: 1.5rem 1rem 1.25rem;
	/* White, not the cream ground — a cream card on a cream page has no edge. */
	background: var(--tsp-white);
	border: 1px solid var(--tsp-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .22s var(--tsp-ease), transform .22s var(--tsp-ease), box-shadow .22s var(--tsp-ease);
}

.tsp-market__link:hover {
	border-color: var(--tsp-accent);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -20px rgba(16, 10, 12, .4);
}

.tsp-market__shape {
	display: block;
	width: 96px; height: 96px;
	margin-bottom: .55rem;
}

/* The silhouette itself. Filled rather than stroked: at this size a 1px
   outline of a municipal boundary is a gray haze, and a solid shape reads as
   a place. */
.tsp-market__shape .tsp-shape { width: 100%; height: 100%; display: block; }
.tsp-market__shape .tsp-shape path {
	fill: var(--tsp-accent);
	opacity: .16;
	transition: opacity .22s var(--tsp-ease);
}
.tsp-market__link:hover .tsp-shape path { opacity: .34; }

.tsp-market__name {
	font-family: var(--tsp-display);
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--tsp-ink);
}

.tsp-market__note {
	color: var(--tsp-muted);
	font-size: .82rem;
	line-height: 1.45;
}

.tsp-market__cta {
	margin-top: .55rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tsp-accent);
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .22s var(--tsp-ease), transform .22s var(--tsp-ease);
}
.tsp-market__link:hover .tsp-market__cta,
.tsp-market__link:focus-visible .tsp-market__cta { opacity: 1; transform: none; }

/* Keep the caption vertically centred when there is no shape to sit under. */
.tsp-market--noshape .tsp-market__link { justify-content: center; padding-block: 2.25rem; }

/* ================================================================ pair === */

.tsp-pair__photo {
	margin: 2.5rem auto 0;
	max-width: 900px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 26px 60px -34px rgba(16, 10, 12, .55);
}
.tsp-pair__photo img { display: block; width: 100%; height: auto; }

.tsp-pair__grid {
	margin-top: 2.25rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	max-width: 900px;
	margin-inline: auto;
}
@media (max-width: 780px) { .tsp-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.tsp-pair__name { margin: 0 0 .15rem; font-family: var(--tsp-display); font-size: 1.5rem; color: var(--tsp-ink); }
.tsp-pair__role {
	margin: 0 0 .7rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--tsp-accent);
}
.tsp-pair__bio  { margin: 0 0 .9rem; color: var(--tsp-body); font-size: .95rem; }
.tsp-pair__more {
	font-size: .82rem; font-weight: 600; color: var(--tsp-accent); text-decoration: none;
}
.tsp-pair__more:hover { text-decoration: underline; }

/* ================================================== mobile header controls ==
 *
 * The call button and the menu button sit next to each other and were built at
 * different times, which showed: 44px tall with a 6px radius and a flat red
 * fill against roughly 38px with a 4px radius and a hairline border. Two
 * controls a thumb-width apart have to look like one set of controls, or the
 * masthead reads as unfinished before a word of the site is read.
 *
 * So the burger is now the same 44px square with the same radius, and it takes
 * the hero omnibar's glass — blur plus a desaturating filter, which is what
 * keeps the surface neutral over whatever photograph is behind it rather than
 * picking up its color. The call button stays solid: these should be the same
 * SIZE, not the same weight. Calling is the thing worth doing, and the button
 * that does it should be the one with the fill.
 */

.tsp-burger {
	width: 44px;
	height: 44px;
	padding: 0;
	display: none;
	place-items: center;
	border-radius: 6px;
	border: 1px solid rgba(36, 2, 43, .12);
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(18px) saturate(.6);
	backdrop-filter: blur(18px) saturate(.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
	transition: background .25s var(--tsp-ease), border-color .25s var(--tsp-ease),
	            transform .18s var(--tsp-ease);
}

@media (max-width: 1040px) { .tsp-burger { display: grid; } }

/* A press that answers. Nothing else in the masthead moves on tap. */
.tsp-burger:active { transform: scale(.94); }

.tsp-burger__box { width: 18px; }
.tsp-burger__box i { height: 1.5px; border-radius: 1px; }
.tsp-burger__box i + i { margin-top: 4.5px; }

/*
 * Over the home hero the header is transparent and the backdrop is a dark
 * photograph, so a white glass would be a bright chip on a dark scene and the
 * white bars inside it would disappear. Same material, inverted: a dark tint
 * with a white hairline, which reads as frosted rather than as a hole.
 */
.tsp-home .tsp-header:not(.is-solid) .tsp-burger {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Browsers without backdrop-filter get a solid chip instead of a see-through
   one — legible either way, which is the only requirement. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tsp-burger { background: rgba(255, 255, 255, .92); }
	.tsp-home .tsp-header:not(.is-solid) .tsp-burger { background: rgba(36, 2, 43, .42); }
}

/* The X state fills in, so the control that closes the drawer is unmistakably
   the live one while the drawer is open. */
.tsp-burger[aria-expanded="true"],
.tsp-home .tsp-header:not(.is-solid) .tsp-burger[aria-expanded="true"] {
	background: var(--tsp-accent-mid);
	border-color: var(--tsp-accent-mid);
	box-shadow: none;
}
.tsp-burger[aria-expanded="true"] .tsp-burger__box i,
.tsp-home .tsp-header:not(.is-solid) .tsp-burger[aria-expanded="true"] .tsp-burger__box i {
	background: #fff;
}

/* ============================================================ drawer entry ==
 *
 * The drawer was a flat white sheet cross-fading in — correct, and inert. On a
 * phone this panel IS the navigation, so it is worth the few frames it takes to
 * feel like something opened rather than something appeared.
 *
 * Three things happen at once. The panel is the same glass as the omnibar and
 * the menu button, so the three surfaces are visibly one material. It settles
 * down and up to its resting size instead of arriving there. And the links
 * arrive in sequence, which is what makes a list read as a list rather than as
 * a block of text that faded in.
 *
 * The stagger is nth-child rather than an inline --i, so this is a stylesheet
 * change with no markup behind it and nothing to keep in sync. Eight items is
 * more than these menus carry; past that the last ones share the final delay,
 * which is the right failure — a ninth link is late, never missing.
 */

.tsp-drawer {
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(30px) saturate(1.1);
	backdrop-filter: blur(30px) saturate(1.1);
	transform: translateY(-10px) scale(.985);
	transform-origin: 50% 0;
	transition:
		opacity .3s var(--tsp-ease),
		visibility .3s var(--tsp-ease),
		transform .42s cubic-bezier(.16, .84, .32, 1);
}

.tsp-drawer.is-open { transform: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tsp-drawer { background: rgba(255, 255, 255, .97); }
}

/* Resting state of every row: down and out. */
.tsp-drawer__nav .tsp-nav__item,
.tsp-drawer__foot > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity .34s var(--tsp-ease),
		transform .44s cubic-bezier(.16, .84, .32, 1);
}

.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item,
.tsp-drawer.is-open .tsp-drawer__foot > * {
	opacity: 1;
	transform: none;
}

/* 55ms apart. Fast enough that the whole menu is settled in about a third of a
   second, slow enough to read as a sequence rather than a flicker. */
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(1) { transition-delay: .06s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(2) { transition-delay: .115s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(3) { transition-delay: .17s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(4) { transition-delay: .225s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(5) { transition-delay: .28s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(6) { transition-delay: .335s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(7) { transition-delay: .39s; }
.tsp-drawer.is-open .tsp-drawer__nav .tsp-nav__item:nth-child(n+8) { transition-delay: .445s; }

.tsp-drawer.is-open .tsp-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.tsp-drawer.is-open .tsp-drawer__foot > *:nth-child(2) { transition-delay: .455s; }

/* Closing runs immediately and together. A staggered exit makes a menu feel
   slow to dismiss, which is the one thing a menu must never feel. */
.tsp-drawer:not(.is-open) .tsp-drawer__nav .tsp-nav__item,
.tsp-drawer:not(.is-open) .tsp-drawer__foot > * { transition-delay: 0s; }

/*
 * Honor the OS setting. Someone who has asked for less motion still needs the
 * menu, so the panel and the rows still change state — they just do it without
 * travelling or waiting their turn.
 */
@media (prefers-reduced-motion: reduce) {
	.tsp-drawer,
	.tsp-drawer.is-open,
	.tsp-drawer__nav .tsp-nav__item,
	.tsp-drawer__foot > * {
		transform: none;
		transition-duration: .01ms;
		transition-delay: 0s !important;
	}
	.tsp-burger { transition-duration: .01ms; }
}

/*
 * While the drawer is open the header still floats above it, and over the home
 * hero that header is in its light state -- so the white lockup was sitting on
 * the drawer's near-white glass and all but disappeared. The dark lockup is
 * always rendered underneath it, so fading the light one out is the whole fix.
 *
 * Driven by a body class rather than :has() so it works the same everywhere,
 * and kept separate from tsp-locked, which the inquiry modal also sets --
 * that one opens over a dark scrim where the light logo is correct.
 */
body.tsp-nav-open .tsp-logo__img--light,
body.tsp-nav-open.tsp-home .tsp-header:not(.is-solid) .tsp-logo__img--light { opacity: 0; }

/* ============================================== the brand rule, repeated ==
 *
 * One motif carries the whole palette: a four-part bar under every section
 * heading, running the coast from the water to the dune — Atlantic teal, surf
 * aqua, sunset coral, sea-grass.
 *
 * This is the difference between a colorful site and a site that could not
 * pick a color. Five hues scattered across five unrelated components reads as
 * indecision; the same five in one shape, repeated on every heading, reads as
 * a brand. Yessenia Storing's pine / sandstone / red heading rule is the same
 * idea, and themes/CLAUDE.md trap 12 is the rule that produced it: the lockup
 * gets a short two-tone rule carrying the brand colors, never a monogram.
 *
 * The colors in it are FILLS. Aqua at 2.4:1 and sea-grass at 2.8:1 could not
 * carry a word, and in a 3px bar they never have to.
 */
.tsp-rule {
	/* Four stops, hard-edged, no blending — gradients between these hues go
	   muddy through the teal/coral midpoint. Widened to 72px so four bands are
	   each still legible rather than four slivers. */
	width: 72px;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
	box-shadow: inset 0 0 0 1px rgba(36, 2, 43, .07);
}

/*
 * Coral is the call to action, teal is the furniture.
 *
 * The gradient here was three hardcoded hexes of flag red (#8E1B29 / #C6293C /
 * #B22234) left over from the theme this was copied from. Swapping the :root
 * tokens did not touch them and a grep for the old client's NAME did not find
 * them either — this is trap 16 exactly, and it survived until the rendered
 * page was sampled pixel by pixel and the button came back #AF363F on a site
 * with no crimson in its palette.
 *
 * Sunset coral is 4.1:1 on the cream ground: right for a button, and it is the
 * only warm thing on a mostly teal-and-sand page, so it is unmistakably the
 * thing to press.
 */
.tsp-btn--accent {
	background: linear-gradient(135deg, var(--tsp-coral-dk) 0%, var(--tsp-coral-br) 58%, var(--tsp-coral) 100%);
	border-color: transparent;
	color: #fff;
}
.tsp-btn--accent:hover {
	background: linear-gradient(135deg, var(--tsp-coral-dk) 0%, var(--tsp-coral-br) 58%, var(--tsp-coral) 100%);
	filter: brightness(1.07);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(138, 106, 23, .55);
}

/* The same four-part brand rule the hero closes on, above the footer — so the
   page opens and closes on the same motif that sits under every heading. */
.tsp-foot::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
}

/* The stat band gets the full brand rule as its top edge, so the credentials
   strip reads as a ribbon rather than a gray band. */
.tsp-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%) 1; }

/* Eyebrows run teal, not coral. Coral is reserved for the thing to press —
   spending it on every section label is what makes an accent stop working. */
.tsp-eyebrow:not(.tsp-eyebrow--light) { color: var(--tsp-brand); }

.tsp-nav__list > li > a::after { background: var(--tsp-coral); }

/* One red button state, on the primary call to action only. */
.tsp-btn--accent:hover {
	background: var(--tsp-red);
	border-color: var(--tsp-red);
	color: #fff;
}

/* The portrait frame follows the photograph rather than imposing a ratio on
   it: aspect-ratio: auto + object-fit: contain means the headshot is shown
   whole, at its own 2:3, and nothing is ever cropped off the crown. This is
   the rule that actually governs --portrait at every width. */
.tsp-split__media--portrait { max-width: 24rem; margin-inline: auto; }

.tsp-figure--portrait { aspect-ratio: auto; }

.tsp-figure--portrait img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}

@media (max-width: 900px) {
	.tsp-split__media--portrait { max-width: 19rem; }
}

/* The brokerage mark in the footer. White artwork on the near-black ground it
   was recoloured for; capped so it sits under his own name rather than beside
   it, which is the way the relationship actually reads. */
.tsp-foot__firmmark {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	margin-top: 1.5rem;
	opacity: .92;
}

@media (max-width: 560px) { .tsp-foot__firmmark { max-width: 180px; } }

/*
 * At 900px and under the <picture> swaps in hero-mobile.jpg, a 3:4 crop with
 * the flag right of center. A phone shows about two-thirds of its width, so it
 * is pulled right to keep the flag and the porch; a tablet shows the full width
 * and loses height instead, so it is pulled up to keep the top of the flag.
 */
@media (max-width: 900px) {
	.tsp-hero__poster { object-position: 60% 30%; }
}

/* ==================================================== the floating call ==
 *
 * Red, white and blue rather than a single brand color: a white pill with a
 * navy label, an Old Glory red icon plate, and the three-part band along the
 * bottom edge that the hero and the footer also carry. White is the ground
 * because the pill sits over photographs and a purple pill on a
 * purple-scrimmed hero disappears.
 */
.tsp-callbar {
	position: fixed;
	right: clamp(.9rem, 2vw, 1.5rem);
	bottom: clamp(.9rem, 2vw, 1.5rem);
	z-index: 80;
}

.tsp-callbar__call {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 1.15rem .8rem .7rem;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 14px 34px -12px rgba(36, 2, 43, .55), 0 2px 6px rgba(36, 2, 43, .16);
	text-decoration: none;
	overflow: hidden;
	transition: transform .22s var(--tsp-ease), box-shadow .22s var(--tsp-ease);
}
.tsp-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(36, 2, 43, .6); }

/* The four-color brand rule, along the bottom edge of the pill — the same
   motif as the rule under every heading, so the pill belongs to the site. */
.tsp-callbar__call::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
}

.tsp-callbar__ico {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--tsp-red);
	color: #fff;
}
.tsp-callbar__ico svg { width: 17px; height: 17px; }

/*
 * The face variant of the icon plate — her headshot in a ring, with the phone
 * as a small badge on it. Same treatment as the Monica Hudson build.
 *
 * A shade larger than the plain plate (2.9 vs 2.35rem) because a face needs
 * the room to be a face; the pill's own padding absorbs it. The double
 * box-shadow is the ring: white first so the photo is lifted off the pill,
 * then gold, which is the one palette color that reads against both the
 * white pill and her yellow dress.
 */
.tsp-callbar__ico--face {
	position: relative;
	width: 2.9rem;
	height: 2.9rem;
	background: none;
}
.tsp-callbar__face {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	/* The file is already cut with her eyes ~40% down, so this stays neutral. */
	object-position: center;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tsp-dune);
}
.tsp-callbar__badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--tsp-brand);
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.tsp-callbar__badge svg { width: 11px; height: 11px; }

/*
 * .tsp-icon colors every icon with --accent-lt, which is the gold. On the
 * purple badge that is only 2.6:1 and the glyph half-disappears. White on
 * --brand is 13.9:1 (Monica's build hit the same thing the other way round).
 */
.tsp-callbar__badge .tsp-icon { color: #fff; }

.tsp-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.tsp-callbar__txt strong {
	font-family: var(--tsp-display);
	font-size: .95rem;
	font-weight: 400;
	color: var(--tsp-brand);
}
.tsp-callbar__txt em {
	font-style: normal;
	font-size: .82rem;
	font-weight: 600;
	color: var(--tsp-red);
	letter-spacing: .01em;
}

/* ================================================ mobile: logo and hero ==
 *
 * The lockup is stacked, so the same height that reads well on a desktop bar
 * swallows a phone masthead.
 */
@media (max-width: 720px) {
	/*
	 * The masthead overflowed: measured at a 500px viewport the burger's right
	 * edge sat at 521px, so scrollWidth beat clientWidth by 21px and the button
	 * was partly off-screen. Logo 290 + actions 187 does not fit in 500.
	 *
	 * The header's Call Now is what goes. The floating pill carries the number
	 * on every screen and is closer to the thumb, so a second call control in
	 * the masthead was buying nothing and costing the burger its place.
	 */
	.tsp-header__actions .tsp-callnow { display: none; }
	.tsp-header__inner { gap: .75rem; }

	/*
	 * Size the logo through the tokens, not with height:auto.
	 *
	 * The height is a calc that interpolates on --tsp-shrink, which is what
	 * makes the masthead shrink as you scroll. Overriding it with height:auto
	 * — which an earlier pass here did — pins the logo at one size and quietly
	 * removes the shrink on phones, where the bar can least afford the room.
	 * max-width stays only as a guard against a very wide lockup.
	 */
	/*
	 * 44px was right for the WIDE WORDMARK lockup this used to carry — a
	 * 5.3:1 image where 44px of height still gave ~230px of readable name.
	 * The masthead is now her emblem plus real text, so this number governs
	 * the EMBLEM alone, and 44px of a 1.09:1 crown is the "miniscule" Adam
	 * called out. The type beside it no longer depends on this at all.
	 *
	 * Overriding the tokens rather than the height keeps the shrink working,
	 * which is the point of the comment above.
	 */
	:root { --tsp-logo-max: 84px; --tsp-logo-min: 52px; }
	.tsp-logo--header .tsp-logo__img { max-width: 52vw; }
}

/* ------------------------------------------- drawer: is-open, and only that --
 *
 * `.tsp-nav__item:focus-within > .tsp-nav__sub` is (0,3,0) and the drawer's own
 * collapsed rule is (0,2,0), so focus-within wins inside the drawer too. On a
 * phone the tapped link keeps focus, which pinned the section open — the first
 * tap worked and the section could then never be collapsed again.
 *
 * Hover and focus-within are a desktop affordance. In the drawer the only thing
 * that opens a section is is-open, set by the tap handler.
 */
.tsp-drawer__nav .tsp-nav__item:hover > .tsp-nav__sub,
.tsp-drawer__nav .tsp-nav__item:focus-within > .tsp-nav__sub {
	opacity: 0;
	max-height: 0;
	padding-bottom: 0;
}

.tsp-drawer__nav .tsp-nav__item.is-open > .tsp-nav__sub,
.tsp-drawer__nav .tsp-nav__item.is-open:hover > .tsp-nav__sub,
.tsp-drawer__nav .tsp-nav__item.is-open:focus-within > .tsp-nav__sub {
	opacity: 1;
	max-height: 22rem;
	padding-bottom: .6rem;
}


/* ================================================ no dark bands anywhere ==
 *
 * Adam asked for dark, was shown dark, rejected it — and then rejected
 * light-with-dark-bands as still too dark (memory: feedback_dark_themes_too_dark).
 * The settled answer for this lineage is FULLY light, so the one remaining
 * near-black band on the page is converted here rather than by editing the
 * template that asks for it. Keeping the `--dark` class name means the
 * markup and every sibling theme still read the same; only what it means
 * changed.
 *
 * It still has to be a BAND — a page of unbroken cream has no rhythm. So it
 * becomes the most saturated light thing on the site: a pale-aqua-to-sand
 * wash, edged top and bottom with the brand rule, carrying ink type.
 */
.tsp-section--dark {
	background: linear-gradient(168deg, var(--tsp-surf-pale) 0%, var(--tsp-shell) 46%, var(--tsp-sand) 100%);
	color: var(--tsp-body);
	position: relative;
}
.tsp-section--dark::before,
.tsp-section--dark::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
}
.tsp-section--dark::before { top: 0; }
.tsp-section--dark::after  { bottom: 0; }

.tsp-section--dark h1,
.tsp-section--dark h2,
.tsp-section--dark h3 { color: var(--tsp-ink); }

/* The creed sat white-on-near-black. Same hierarchy, inverted. */
.tsp-creed__goal   { color: var(--tsp-ink); }
.tsp-creed__close  { color: var(--tsp-brand); font-weight: 600; }
.tsp-creed__attrib { color: var(--tsp-muted); }
.tsp-creed__call   { color: var(--tsp-body); }
.tsp-creed__call strong,
.tsp-creed__call .tsp-icon { color: var(--tsp-brand); }
.tsp-creed__call:hover { color: var(--tsp-ink); }

/* ======================================= the town grid carries the thesis ==
 *
 * The grid carries three metros, three towns each. The nine-town
 * grid is where that is easiest to SHOW rather than state: the first four are
 * barrier islands and the last four are the mainland behind them, so the
 * islands are washed in surf aqua and the mainland in sand. Read the grid
 * and the split explains itself before the copy does.
 *
 * It also fixes a real flatness problem. These cards were white on cream with
 * a hairline border and a faint map outline, and on a page sold on its color
 * they were the largest and dullest block in it.
 *
 * The wash is a tint behind the card, never behind the text: the name and note
 * keep ink and body colors at full contrast on a ground no darker than 8%.
 */
.tsp-market:nth-child(-n+4) .tsp-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--tsp-surf-pale) 100%);
	border-color: #DCCDDF;
}
.tsp-market:nth-child(n+5) .tsp-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 100%);
	border-color: #E9DBC6;
}

/* A color chip on the top edge of every card — aqua for an island, sand-deep
   for the mainland — so the grouping survives at phone width where the cards
   stack into a single column and the two-by-four reading is lost. */
.tsp-market__link { position: relative; overflow: hidden; }
.tsp-market__link::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.tsp-market:nth-child(-n+4) .tsp-market__link::before { background: var(--tsp-surf); }
.tsp-market:nth-child(n+5)  .tsp-market__link::before { background: var(--tsp-sand-dp); }

.tsp-market:nth-child(-n+4) .tsp-market__link:hover { border-color: var(--tsp-surf-dk); }
.tsp-market:nth-child(n+5)  .tsp-market__link:hover { border-color: var(--tsp-dune-dk); }

/* The map outline was a pale gray wash that read as a smudge on three cards
   and was invisible on the five whose boundary never resolved. Give it the
   band's own color so it reads as intentional artwork either way. */
.tsp-market:nth-child(-n+4) .tsp-market__shape svg * { fill: var(--tsp-surf); opacity: .5; }
.tsp-market:nth-child(n+5)  .tsp-market__shape svg * { fill: var(--tsp-sand-dp); opacity: .62; }

/* ------------------------------------------------- the closer, also light --
 *
 * Same call as .tsp-section--dark above: this was a near-black block sitting
 * directly on top of an already-dark footer, which stacked into roughly a
 * third of the page being dark on a site briefed as fully light. It keeps its
 * weight by being the most saturated light band instead — teal-tinted, edged
 * with the brand rule — so the eye still stops on it.
 */
.tsp-closer {
	background: linear-gradient(168deg, var(--tsp-surf-pale) 0%, var(--tsp-shell) 52%, var(--tsp-sand) 100%);
	color: var(--tsp-body);
	border-top: 4px solid transparent;
	border-image: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%) 1;
}
.tsp-closer::before {
	background: radial-gradient(circle, rgba(47, 78, 122, .16) 0%, transparent 62%);
}
.tsp-closer__title { color: var(--tsp-ink); }
.tsp-closer__lede  { color: var(--tsp-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.tsp-closer .tsp-eyebrow { color: var(--tsp-brand); }

/* --------------------------------------------------- footer contrast fixes --
 *
 * scripts/contrast-audit.js checked 48 elements on the home page and failed
 * three, all in the footer and all marginal: the two column headings at
 * 4.27:1 and the phone number at 4.32:1, against 4.5:1 required. Marginal is
 * still failing, and these are small text on a dark ground, which is the
 * combination people actually struggle with.
 */
.tsp-foot__h { color: rgba(255, 255, 255, .62); }
.tsp-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }

/* The floating call pill's number sat on --tsp-coral, which is 4.32:1 on the
   pill's white ground — right for a button fill, wrong for 13px text. The
   darker coral is 5.2:1 and is visually the same color at this size. */
.tsp-callbar__txt em { color: var(--tsp-coral-dk); }

/* The closer's secondary button was .tsp-btn--ghost-light: a white outline
   with white type, drawn for the near-black band this section used to be. On
   the light band it is now, it was a pale ghost on cream — present, rendered,
   effectively invisible. Same class of mistake as trap 4. Inside the closer it
   becomes a teal outline instead. */
.tsp-closer .tsp-btn--ghost-light {
	border-color: var(--tsp-brand);
	color: var(--tsp-brand);
}
.tsp-closer .tsp-btn--ghost-light:hover {
	background: var(--tsp-brand);
	border-color: var(--tsp-brand);
	color: #fff;
}

/* "1 Atlantic Avenue, Ocean / City, NJ 08226" — the footer column is narrow
   enough to break the town in half. Keep the city-state-zip together. */
.tsp-foot__addr { text-wrap: balance; }

/* The license line under an agent's name was --tsp-faint, which is 2.7:1 on
   the card — fine as a decorative gray, and this is not decorative. California
   (and most states) require the number to be legible in advertising. */
.tsp-member__license { color: var(--tsp-muted); }

/* === upgrade-lineage: frames and figures === */
/*
 * Added by scripts/upgrade-lineage.py. See that file for why each exists.
 */

/* A transparent GROUP cutout: wide, anchored to the bottom of a soft brand
   panel, never cropped. */
.tsp-split__media--team { max-width: none; width: 100%; }
.tsp-figure--team {
	aspect-ratio: auto;
	margin: 0;
	padding: 1.5rem 1rem 0;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--tsp-shell) 0%, var(--tsp-tint-2) 100%);
	overflow: hidden;
	position: relative;
}
.tsp-figure--team img {
	display: block; width: 100%; height: auto;
	object-fit: contain; object-position: center bottom;
}

/* NO HEADSHOT: a photograph of the market in the agent's slot. Cropped to a
   calm landscape, because it is a place and cropping a place costs nothing —
   the opposite rule from a face. */
.tsp-split__media--scene { max-width: none; width: 100%; }
.tsp-figure--scene {
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--tsp-shadow-lg);
}
.tsp-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figures set large; word labels untouched. */
.tsp-creds__label--num {
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--tsp-brand);
}
.tsp-creds__label--num + .tsp-creds__note {
	margin-top: .55rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
}

/* A small SQUARE headshot (homes.com serves 300x300): centred and capped so it
   is never enlarged past its source, instead of cropped into a portrait frame
   that loses the sides of the face. 'shape' => 'square' in team(). */
.tsp-split__media--square { max-width: 22rem; margin-inline: auto; }
.tsp-split__media--square .tsp-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .tsp-split__media--square { max-width: 17rem; } }

/* === install-features: feature sections === */
/*
 * Added by scripts/install-features.py. Tones use the theme's four roles, so
 * each site's sections come out in its own palette.
 */
.tsp-tone--brand { --tone: var(--tsp-brand); --tone-pale: var(--tsp-brand-pale); }
.tsp-tone--coral { --tone: var(--tsp-coral); --tone-pale: var(--tsp-coral-pale); }
.tsp-tone--surf  { --tone: var(--tsp-surf-dk); --tone-pale: var(--tsp-surf-pale); }
.tsp-tone--dune  { --tone: var(--tsp-dune-dk); --tone-pale: var(--tsp-dune-pale); }

.tsp-feat__note { max-width: 44rem; margin: 2.25rem auto 0; text-align: center; color: var(--tsp-muted); font-size: .95rem; }

/* journey: a line that draws, stops that pop in turn */
.tsp-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.tsp-journey::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--tsp-brand), var(--tsp-coral), var(--tsp-dune), var(--tsp-surf)); transform-origin: left center; }
.tsp-journey__stop { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.tsp-journey__dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--tsp-white);
	border: 3px solid var(--tone); color: var(--tone); font-weight: 700; font-size: .85rem; position: relative; z-index: 1; box-shadow: 0 6px 18px -10px var(--tone); }
.tsp-journey__when { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 600; margin-top: .35rem; }
.tsp-journey__label { font-family: var(--tsp-display); font-size: 1.3rem; line-height: 1.15; color: var(--tsp-ink); font-weight: 400; }
.tsp-journey__body { color: var(--tsp-body); font-size: .95rem; line-height: 1.55; }

/* bento: colored tiles, one big counting number */
.tsp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tsp-bento__tile { position: relative; border-radius: 18px; padding: 1.6rem 1.5rem 1.7rem; background: var(--tone-pale); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
	overflow: hidden; transition: transform .35s var(--tsp-ease), box-shadow .35s var(--tsp-ease); }
.tsp-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.tsp-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--tsp-shadow-lg); }
.tsp-bento__tile--wide { grid-column: span 2; }
.tsp-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.tsp-bento__tile--big::after { display: none; }
.tsp-bento__tile--big .tsp-bento__title, .tsp-bento__tile--big .tsp-bento__body { color: #fff; }
.tsp-bento__big { display: block; font-family: var(--tsp-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.tsp-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone); font-weight: 700; margin-bottom: .9rem; }
.tsp-bento__title { font-family: var(--tsp-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--tsp-ink); font-weight: 400; }
.tsp-bento__body { margin: 0; color: var(--tsp-body); font-size: .95rem; line-height: 1.55; }

/* split: two panels facing each other */
.tsp-splitfeat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.tsp-splitfeat__panel { border-radius: 20px; padding: 2rem 1.9rem; background: var(--tone-pale); border-top: 5px solid var(--tone); }
.tsp-splitfeat__eye { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tone); }
.tsp-splitfeat__title { font-family: var(--tsp-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: .35rem 0 .7rem; color: var(--tsp-ink); font-weight: 400; }
.tsp-splitfeat__body { color: var(--tsp-body); margin: 0 0 1rem; }
.tsp-splitfeat__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tsp-splitfeat__points li { position: relative; padding-left: 1.4rem; color: var(--tsp-body); }
.tsp-splitfeat__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone); }
.tsp-splitfeat__join { align-self: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--tsp-ink); color: #fff; font-family: var(--tsp-display); font-size: 1.25rem; }

/* timeline: years down a drawn line */
.tsp-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.tsp-timeline::before { content: ""; position: absolute; left: 6.2rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 3px;
	background: linear-gradient(180deg, var(--tsp-brand), var(--tsp-coral), var(--tsp-dune), var(--tsp-surf)); transform-origin: top center; }
.tsp-timeline__item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 2.2rem; padding-block: .9rem; position: relative; }
.tsp-timeline__item::before { content: ""; position: absolute; left: 5.85rem; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--tsp-white); border: 3px solid var(--tone); }
.tsp-timeline__when { text-align: right; font-family: var(--tsp-display); font-size: 1.6rem; line-height: 1.2; color: var(--tone); }
.tsp-timeline__card strong { display: block; font-family: var(--tsp-display); font-weight: 400; font-size: 1.3rem; color: var(--tsp-ink); margin-bottom: .25rem; }
.tsp-timeline__card p { margin: 0; color: var(--tsp-body); }

@media (max-width: 900px) {
	.tsp-journey { grid-template-columns: 1fr; gap: 1.4rem; padding-left: .2rem; }
	.tsp-journey::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 3px; height: auto; transform-origin: top center; }
	.tsp-journey__stop { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
	.tsp-journey__stop > :not(.tsp-journey__dot) { grid-column: 2; }
	.tsp-journey__dot { grid-row: span 3; }
	.tsp-bento { grid-template-columns: 1fr 1fr; }
	.tsp-splitfeat { grid-template-columns: 1fr; }
	.tsp-splitfeat__join { justify-self: center; }
}
@media (max-width: 560px) {
	.tsp-bento { grid-template-columns: 1fr; }
	.tsp-bento__tile--wide { grid-column: auto; }
	.tsp-timeline::before { left: 4.4rem; }
	.tsp-timeline__item { grid-template-columns: 3.6rem 1fr; gap: 1.6rem; }
	.tsp-timeline__item::before { left: 4.05rem; }
	.tsp-timeline__when { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
	html.js .tsp-journey::before { transform: scaleX(0); transition: transform 1.4s var(--tsp-ease) .15s; }
	html.js .tsp-journey.is-in::before { transform: scaleX(1); }
	html.js .tsp-journey .tsp-journey__stop { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--tsp-ease), transform .6s var(--tsp-ease); transition-delay: calc(.25s + var(--i) * .18s); }
	html.js .tsp-journey.is-in .tsp-journey__stop { opacity: 1; transform: none; }
	html.js .tsp-journey .tsp-journey__dot { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .18s); }
	html.js .tsp-journey.is-in .tsp-journey__dot { transform: none; }
	html.js .tsp-timeline::before { transform: scaleY(0); transition: transform 1.6s var(--tsp-ease) .1s; }
	html.js .tsp-timeline.is-in::before { transform: scaleY(1); }
	html.js .tsp-timeline .tsp-timeline__item { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--tsp-ease), transform .6s var(--tsp-ease); transition-delay: calc(.2s + var(--i) * .2s); }
	html.js .tsp-timeline.is-in .tsp-timeline__item { opacity: 1; transform: none; }
	html.js .tsp-splitfeat__panel[data-tsp-reveal] { transform: translateX(calc((var(--i) * 2 - 1) * 28px)); }
	html.js .tsp-splitfeat__panel[data-tsp-reveal].is-in { transform: none; }
	html.js .tsp-splitfeat__join[data-tsp-reveal] { transform: scale(.3) rotate(-90deg); transition-delay: .35s; }
	html.js .tsp-splitfeat__join[data-tsp-reveal].is-in { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.js .tsp-journey::before { transform: scaleY(0); }
	html.js .tsp-journey.is-in::before { transform: scaleY(1); }
}

/* Four tiles sit 2 x 2; a 'wide' tile would leave a hole in a three-column row. */
@media (min-width: 561px) {
	.tsp-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsp-bento:has(> :nth-child(4):last-child) .tsp-bento__tile--wide { grid-column: auto; }
}

/* HUD's official Equal Housing Opportunity artwork, on the dark footer.
   Inverted to white rather than recoloured: the mark is black line art and
   this keeps it the mark rather than a tinted version of it. A redrawn house
   is approved by nobody (themes/CLAUDE.md, the Larry Mullinix launch rules). */
.tsp-eho--official { width: auto; height: 34px; vertical-align: middle; filter: brightness(0) invert(1); opacity: .88; }


/* ---- "Experience Matters" -------------------------------------------------
 * The section under the hero is named now, not a bare row of figures
 * (themes/CLAUDE.md, "The first three sections"). The heading is what makes
 * four numbers read as a claim about the agent rather than as a widget, and it
 * is what the non-coded template his first fifty clients run has always had.
 *
 * The band keeps its hairline grid; the head sits above it with air, centred,
 * and collapses to the list alone on a phone where the numbers are the point.
 */
.tsp-creds__head {
	text-align: center;
	padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.tsp-creds__head .tsp-eyebrow { display: block; }
.tsp-creds__title {
	margin: .45rem 0 0;
	font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
	line-height: 1.12;
}
.tsp-creds__list { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 620px) {
	.tsp-creds__head { padding-top: clamp(2rem, 8vw, 2.6rem); }
}

/* ---- "How much is your home worth?" --------------------------------------
   The address-capture band, ported from his own site (Adam, 2026-09-23).
   Copy on the left, one field and a button on the right; it stacks on a phone
   with the field first, because on a phone the field IS the section. */
.tsp-valcta__in {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.tsp-valcta__title { margin: .35rem 0 0; }
.tsp-valcta__points {
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}
.tsp-valcta__points li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: 1.02rem;
	color: var(--tsp-body);
}
.tsp-valcta__points .tsp-icon { margin-top: .28rem; color: var(--tsp-brand); }

.tsp-valcta__form {
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 2px;
	padding: clamp(1.3rem, 3vw, 2rem);
}
.tsp-valcta__label {
	display: block;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-muted);
	margin-bottom: .6rem;
}
.tsp-valcta__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.tsp-valcta__row input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .85rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: var(--tsp-ink);
	background: var(--tsp-tint);
	border: 1px solid var(--tsp-line);
	border-radius: 2px;
}
.tsp-valcta__row input:focus-visible {
	outline: none;
	border-color: var(--tsp-brand);
	box-shadow: 0 0 0 3px var(--tsp-brand-pale);
}
.tsp-valcta__row .tsp-btn { flex: 0 0 auto; }
.tsp-valcta__note {
	margin: .85rem 0 0;
	font-size: .86rem;
	color: var(--tsp-muted);
}

@media (max-width: 860px) {
	/*
	 * Copy first, then the field. It shipped the other way round — the form was
	 * pulled above the heading on the theory that "on a phone the field IS the
	 * section" — and that lands a phone visitor on a bare address box with the
	 * question it answers scrolled off underneath it. The heading is what makes
	 * typing your address make sense, so it goes first (Adam, 2026-09-23).
	 */
	.tsp-valcta__in { grid-template-columns: 1fr; gap: 1.6rem; }
	.tsp-valcta__form { order: 0; }
	.tsp-valcta__row .tsp-btn { flex: 1 1 100%; }
	.tsp-valcta__points { margin-top: 1.1rem; }
}

@keyframes tsp-kb {
	0%       { opacity: 0; transform: scale(1.000); }
	5%       { opacity: 1; }
	33.333%  { opacity: 1; transform: scale(1.085); }
	38%      { opacity: 0; transform: scale(1.098); }
	100%     { opacity: 0; transform: scale(1.000); }
}

/* A media query that re-shows something hidden in a base rule HAS TO SAY
   `display` (trap 58). Nothing hides these; this re-states it so a later
   edit cannot reintroduce that bug. */
@media (max-width: 900px) {
	.tsp-hero__frame { display: block; }
	.tsp-hero__frame > img { object-position: center 50%; }
}

/* ────────────────────────────────────────────────────── welcome signature */
.tsp-welcome__sign {
	margin: 1.6rem 0 1.4rem;
	line-height: 1.35;
}
.tsp-welcome__sign strong {
	display: block;
	font-family: var(--tsp-display);
	font-weight: 400;
	font-size: 1.22rem;
	color: var(--tsp-brand);
}
.tsp-welcome__sign span {
	font-size: .78rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}

/* ───────────────────────────────────────────────── the four services
   Her four, in her words. Hairline cards on white, a gold rule that draws
   itself on hover, and a number rather than an icon — the luxury register is
   restraint, and an icon set would be four more things to look at. */
.tsp-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1px;
	margin-top: clamp(2rem, 4vw, 3rem);
	background: var(--tsp-line);
	border: 1px solid var(--tsp-line);
}

.tsp-services__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: clamp(1.6rem, 2.6vw, 2.3rem);
	background: #fff;
}

/* The gold hairline that grows across the top on hover. Transform only, so
   it cannot reflow the card under the pointer. */
.tsp-services__card::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: var(--tsp-dune);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s var(--tsp-ease);
}
.tsp-services__card:hover::before,
.tsp-services__card:focus-within::before { transform: scaleX(1); }

.tsp-services__num {
	font-family: var(--tsp-display);
	font-size: .82rem;
	letter-spacing: .14em;
	color: var(--tsp-dune-dk);
}

.tsp-services__title {
	margin: 0;
	font-family: var(--tsp-display);
	font-weight: 400;
	font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
	line-height: 1.22;
	color: var(--tsp-brand);
}

.tsp-services__body {
	margin: 0;
	flex: 1 1 auto;
	font-size: .95rem;
	line-height: 1.66;
	color: var(--tsp-body);
}

.tsp-services__link {
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsp-coral-dk);
}
.tsp-services__link:hover { color: var(--tsp-brand); }

/* The whole card is the target, so the little link does not have to be hit
   exactly on a phone. The <a> keeps its own focus ring for the keyboard. */
.tsp-services__link::after { content: ''; position: absolute; inset: 0; }

/* ───────────────────────────────────────────────────── the two lead cards
   The point of the page. Equal weight: one for somebody ready to talk, one
   for somebody who is not and will still leave an email for the guide. */
.tsp-capture__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

.tsp-capture__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding: clamp(1.8rem, 3vw, 2.6rem);
	border: 1px solid var(--tsp-line);
	border-radius: 4px;
	background: #fff;
}

/* The guide card is the quieter of the two on purpose — a consultation is
   the better lead, so it gets the solid button and the white ground. */
.tsp-capture__card--guide {
	background: var(--tsp-brand-pale);
	border-color: transparent;
}

.tsp-capture__eye {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tsp-dune-dk);
}

.tsp-capture__title {
	margin: 0;
	font-family: var(--tsp-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
	line-height: 1.18;
	color: var(--tsp-brand);
}

.tsp-capture__body {
	margin: 0 0 .6rem;
	flex: 1 1 auto;
	font-size: .95rem;
	line-height: 1.68;
	color: var(--tsp-body);
}

.tsp-capture__call {
	margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
	text-align: center;
	font-size: .95rem;
	color: var(--tsp-muted);
}
.tsp-capture__call a { color: var(--tsp-brand); text-decoration: none; }
.tsp-capture__call a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────── quiet button
   A text-weight link-button for the secondary action, so a section can end
   on something other than another filled rectangle. */
.tsp-btn--quiet {
	background: none;
	background-image: none;
	border: 1px solid var(--tsp-line);
	color: var(--tsp-brand);
	box-shadow: none;
}
.tsp-btn--quiet:hover {
	border-color: var(--tsp-brand);
	background: var(--tsp-brand-pale);
	box-shadow: none;
}

/* ───────────────────────────────────── three metros, not nine towns
   The grid is `repeat(4, 1fr)`, written for the eight- and nine-card versions
   this build used to carry. With three cards that left a quarter of the row
   empty and the row reading as though a card had failed to load. */
.tsp-markets__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .tsp-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .tsp-markets__grid { grid-template-columns: 1fr; gap: .75rem; } }

/* The metro cards carry more copy than a town card did, so they need the room
   and the outline can be a little larger. */
.tsp-market__shape svg { max-height: 5.5rem; }

/* ────────────────────────────────────── the guide page's request block
   Copy on the left, form on the right, so the ask sits beside the reason
   rather than a screen below it. */
.tsp-guideform {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.tsp-guideform__call { margin-top: 1.1rem; font-size: .95rem; color: var(--tsp-muted); }
.tsp-guideform__call a { color: var(--tsp-brand); text-decoration: none; }
.tsp-guideform__form {
	padding: clamp(1.4rem, 2.6vw, 2rem);
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 4px;
}
@media (max-width: 900px) { .tsp-guideform { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════ 2026-09-29 — HER BUSINESS CARD ══
   Adam: "rework the site and styling on the homepage especially to be more
   like her business card". The card's design language is three things, and
   all three are cheap in CSS:

     1. a gold hairline with a small diamond at its center, fading at the ends
     2. elegant serif headings in SMALL CAPS
     3. a letterspaced sans strapline flanked by short dotted rules

   Everything below supersedes an earlier rule in this sheet.
   ═════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── the rule, as her card draws it
   Replaces the four-colour bar this lineage ships. That bar was four hard
   stops of brand colour — legible, and nothing whatsoever to do with her
   printed material. Hers is a hairline that fades in from nothing, carries a
   small lozenge at the centre, and fades out again. */
.tsp-rule {
	position: relative;
	width: min(230px, 62%);
	height: 1px;
	margin: 1.35rem 0 1.5rem;
	border-radius: 0;
	box-shadow: none;
	background: linear-gradient(90deg,
		rgba(168, 146, 94, 0) 0%,
		rgba(168, 146, 94, .85) 26%,
		rgba(168, 146, 94, .85) 74%,
		rgba(168, 146, 94, 0) 100%);
}

/* The lozenge. Rotated square with a hairline ring, sitting on the theme's
   own ground so the rule appears to pass behind it. */
.tsp-rule::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 7px; height: 7px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--tsp-shell);
	box-shadow: 0 0 0 1px var(--tsp-dune), inset 0 0 0 2px var(--tsp-shell), inset 0 0 0 3px var(--tsp-dune);
}
/* On a tinted band the lozenge's fill has to follow the band, or it reads as
   a white chip sitting on top of the rule. */
.tsp-section--tint .tsp-rule::after,
.tsp-capture .tsp-rule::after { background: var(--tsp-tint); box-shadow: 0 0 0 1px var(--tsp-dune), inset 0 0 0 2px var(--tsp-tint), inset 0 0 0 3px var(--tsp-dune); }
.tsp-head--center .tsp-rule, .tsp-closer .tsp-rule { margin-inline: auto; }

/* ─────────────────────────────── small caps, the card's heading voice
   "Elevating the Standard in Real Estate" is set as large initial caps with
   small caps for the rest. Instrument Serif has no true small-cap set, so
   this is the honest approximation: the real thing where the browser has it,
   and letterspaced caps at a reduced size where it does not. */
.tsp-smallcaps {
	font-family: var(--tsp-display);
	font-variant-caps: small-caps;
	font-feature-settings: 'smcp' 1, 'c2sc' 0;
	letter-spacing: .055em;
	font-weight: 400;
}

/* Her strapline lives in the 2026-09-29 block at the foot of this sheet.
   The version that was here styled it as ONE string with ::before/::after
   rules and round dots, and hid all three under 560px — which left the phone
   with a wrapped two-line block and nothing holding it together, and which
   also hid the lozenge after the markup changed to two sentences. Removed
   rather than overridden: two competing definitions of one component is how
   the ornament ended up display:none with no rule saying so nearby. */

/* ─────────────────────────────────── her tagline, the card's centrepiece */
.tsp-tagline {
	margin: 0 0 .85rem;
	font-family: var(--tsp-display);
	font-variant-caps: small-caps;
	font-weight: 400;
	font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem);
	line-height: 1.25;
	letter-spacing: .045em;
	color: var(--tsp-coral-dk);
}
.tsp-tagline--light { color: var(--tsp-accent-lt); }

/* ───────────────────────────────── her whole mark, in the footer
   The masthead carries her EMBLEM plus set type (see tsp_logo()); the footer
   is where the complete four-level mark appears at a size that can carry its
   own two lines of small print. */
.tsp-foot__mark {
	display: block;
	width: clamp(10.5rem, 17vw, 14.5rem);
	height: auto;
	margin: 0 0 1.25rem;
}

/* ═════════════════════════════════════ 2026-09-29 — HER LOGO NEEDS A DARK BAR
   Adam: "the logo looks really bad, like a thick white border around the whole
   thing... also blurry."

   Both were the same mistake: the masthead logo had been rebuilt from a 912px
   JPEG of her business card — 238 real pixels of artwork upscaled 5x (the
   blur), keyed off the card's ivory, which preserved a light glow baked into
   that artwork (the border).

   Her MASTER file solves both: 2560x2193 PNG with real alpha, off her own
   website. Nothing is keyed, nothing is upscaled, nothing is recoloured.

   But it is drawn for a DARK ground — white script, white "REALTOR GROUP,
   LLC", and a panel that fades to black. On the white bar it washes out to
   grey ghosting and the panel's foot reads as a black block. Rendered at
   104/76/62/46px on both grounds before deciding; it is not close.

   So the bar is hers instead. Deep purple at every scroll position, the same
   as the footer, which bookends the page — and her mark sits on the ground it
   was designed for, unmodified and sharp. The hero scrim still handles the
   transparent state over the photograph.
   ═════════════════════════════════════════════════════════════════════════ */

.tsp-header__bar,
.tsp-home .tsp-header__bar {
	background: var(--tsp-deep);
	border-bottom-color: rgba(224, 206, 166, .16);
}


/* The light foreground is now the ONLY foreground — it was scoped to
   `.tsp-home .tsp-header:not(.is-solid)`, i.e. the front page before the
   scroll. With a dark bar everywhere it applies everywhere, including inner
   pages, which never had a dark masthead before. */
.tsp-header .tsp-nav__list > li > a,
.tsp-header .tsp-nav__toggle,
.tsp-header .tsp-callnow { color: #fff; }
.tsp-header .tsp-burger__box i { background: #fff; }
.tsp-header .tsp-nav__list > li > a::after { background: var(--tsp-accent-lt); }
.tsp-header .tsp-nav__list > li > a:hover { color: var(--tsp-accent-lt); }

.tsp-header .tsp-header__actions .tsp-btn--sm {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	background: none;
	background-image: none;
}
.tsp-header .tsp-header__actions .tsp-btn--sm:hover {
	color: var(--tsp-deep);
	background: var(--tsp-accent-lt);
	border-color: var(--tsp-accent-lt);
}

/* One file for both states now, so there is nothing to cross-fade and the
   --light copy must not sit at opacity 0 on inner pages. */
.tsp-logo__img--light { opacity: 1; }
.tsp-logo__img:not(.tsp-logo__img--light) { opacity: 0; }

/* The utility strip above the bar is already this purple; with the bar the
   same colour the two would merge into one slab. A hairline separates them. */
.tsp-utility { border-bottom: 1px solid rgba(224, 206, 166, .14); }

/* ═══════════════════════════════ 2026-09-29 — THE HORIZONTAL MASTHEAD LOCKUP
   Adam: "lets make the logo even larger to start out on desktop... the logo is
   miniscule on mobile and i want to rework the sites header to work with her
   logo on all devices."

   The arithmetic behind this is in tsp_logo(). Short version: her logo stacks
   four levels, and its bottom two lines are 7.2% and 3.2% of its height. At
   any bar height a phone can carry, those are 2-5px. The mark was never going
   to work as a single image in a horizontal bar.

   So the emblem is the image and the wording is text. The emblem still scales
   with --tsp-shrink; the type is sized per breakpoint and never falls below
   about 11px.
   ═════════════════════════════════════════════════════════════════════════ */

.tsp-logo--header {
	display: inline-flex;
	align-items: center;
	gap: clamp(.5rem, .9vw, .85rem);
	min-width: 0;
}

.tsp-logo__emblem {
	flex: 0 0 auto;
	height: calc(var(--tsp-logo-max) + (var(--tsp-logo-min) - var(--tsp-logo-max)) * var(--tsp-shrink));
	width: auto;
	/* The crown's gold is dark-edged and sits on a photograph at scroll 0; a
	   soft drop shadow keeps it off the foliage without touching the artwork. */
	filter: drop-shadow(0 2px 6px rgba(12, 2, 16, .45));
}

.tsp-logo__words {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .22em;
	min-width: 0;
}

/* Her "REALTOR GROUP, LLC", set rather than scaled — the display serif, in
   small caps, which is how her card sets the same words. */
.tsp-logo__name {
	font-family: var(--tsp-display);
	font-variant-caps: small-caps;
	font-weight: 400;
	font-size: calc(1.42rem + (1.06rem - 1.42rem) * var(--tsp-shrink));
	line-height: 1;
	letter-spacing: .035em;
	color: #fff;
	white-space: nowrap;
}

/* "VETERAN OWNED BROKERAGE" — her card's descriptor, her gold. */
.tsp-logo__sub {
	font-size: calc(.63rem + (.55rem - .63rem) * var(--tsp-shrink));
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tsp-accent-lt);
	white-space: nowrap;
}

/*
 * PHONE. The emblem gets most of the growth and the type stops shrinking —
 * 11px letterspaced caps is the floor at which "VETERAN OWNED BROKERAGE" is
 * still a phrase rather than a texture. The burger sits at the right, so the
 * lockup has roughly 250px to live in at 390px wide and this fits it.
 */
@media (max-width: 900px) {
	.tsp-logo--header { gap: .5rem; }
	.tsp-logo__name { font-size: calc(1.12rem + (0.92rem - 1.12rem) * var(--tsp-shrink)); }
	.tsp-logo__sub  { font-size: calc(.56rem + (.5rem - .56rem) * var(--tsp-shrink)); letter-spacing: .15em; }
}

/*
 * The descriptor only goes on the genuinely narrow phones.
 *
 * It was set to hide under 400px, which took it off a 390px iPhone — the most
 * common width there is — for no reason: the sub-line stacks UNDER the name,
 * so it costs no width at all, and "VETERAN OWNED BROKERAGE" at this size is
 * narrower than "Realtor Group, LLC" above it. Measured at 360px: emblem 72 +
 * name ~180 + burger 56 + gutters ~32 = 340 of 360.
 *
 * 330px is where the name itself starts to crowd the burger.
 */
@media (max-width: 330px) {
	.tsp-logo__sub { display: none; }
	.tsp-logo__name { font-size: calc(1.0rem + (0.88rem - 1.0rem) * var(--tsp-shrink)); }
}

/* ══════════════════════════════════ 2026-09-29 — HER STRAPLINE, ON ITS OWN
   The credentials strip is gone (she never asked for one). Her card's closing
   line takes the band, and it is marked up as two sentences with an ornament
   between them so it can break where SHE would break it.

   These rules supersede the earlier .tsp-strap block, which centred one string
   and simply dropped its rules on a phone — leaving a wrapped two-line block
   with nothing holding it together.
   ═════════════════════════════════════════════════════════════════════════ */

.tsp-strapband {
	background: #fff;
	border-bottom: 1px solid var(--tsp-line);
	padding-block: clamp(1.5rem, 3.4vw, 2.4rem);
}

.tsp-strap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(.6rem, 1.6vw, 1.1rem);
	margin: 0;
	text-align: center;
}

.tsp-strap__t {
	font-size: clamp(.72rem, .64rem + .3vw, .86rem);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tsp-coral-dk);
	white-space: nowrap;
}

/* The hairlines that top and tail it on her card. They fade outward from the
   type, and they are the first thing to go when there is no room for them. */
.tsp-strap__rule {
	flex: 0 1 clamp(2rem, 9vw, 6rem);
	height: 1px;
	background: linear-gradient(90deg, rgba(168,146,94,0), rgba(168,146,94,.9));
}
.tsp-strap__rule:last-child {
	background: linear-gradient(90deg, rgba(168,146,94,.9), rgba(168,146,94,0));
}

/* Her lozenge, not a bullet — the same diamond that sits on the rule under
   every heading, so the page has one ornament rather than two. */
.tsp-strap__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	transform: rotate(45deg);
	background: none;
	border-radius: 0;
	box-shadow: 0 0 0 1px var(--tsp-dune), inset 0 0 0 2px #fff, inset 0 0 0 3px var(--tsp-dune);
}

/*
 * PHONE. "Built on Service. Defined by Results." at this letterspacing is
 * ~330px of type, which does fit a 390px screen and does NOT fit a 360px one
 * — and when it wrapped it broke mid-phrase with the rules stranded beside it.
 *
 * So below 620px it breaks deliberately: the two sentences stack, the side
 * rules go, and the lozenge sits between them as a centred ornament. That is
 * how her card would set it in a narrow column.
 */
@media (max-width: 620px) {
	.tsp-strap {
		flex-direction: column;
		gap: .55rem;
		letter-spacing: .18em;
	}
	.tsp-strap__rule { display: none; }
	.tsp-strap__t { font-size: .74rem; letter-spacing: .18em; }
	.tsp-strap__dot { width: 5px; height: 5px; }
}

/* The light variant keeps working wherever it is reused. */
.tsp-strap--light .tsp-strap__t { color: var(--tsp-accent-lt); }
.tsp-strap--light .tsp-strap__rule { background: linear-gradient(90deg, rgba(224,206,166,0), rgba(224,206,166,.9)); }
.tsp-strap--light .tsp-strap__rule:last-child { background: linear-gradient(90deg, rgba(224,206,166,.9), rgba(224,206,166,0)); }
.tsp-strap--light .tsp-strap__dot { box-shadow: 0 0 0 1px var(--tsp-accent-lt), inset 0 0 0 2px var(--tsp-deep), inset 0 0 0 3px var(--tsp-accent-lt); }

/* The strip without its heading — themes/CLAUDE.md: the boxes are stronger
   than a titled "Experience Matters" section precisely because they do not
   take up much space. The band's own padding was sized for a heading above
   it. */
.tsp-creds--bare { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
.tsp-creds--bare .tsp-creds__list { margin-top: 0; }

/* The strip was ONE COLUMN on a phone — 538px of it, four full-width rows,
   which is the "takes up too much space" fault themes/CLAUDE.md records in the
   agent's own words and the reason the Experience Matters section came out.

   The cause is a single pixel. The base rule is
   `repeat(auto-fit, minmax(min(50%, 13rem), 1fr))` with `gap: 1px`, so at a
   350px list two 175px tracks plus the gap measure 351px, auto-fit drops to
   one column, and the section triples in height. Nothing errors and the sheet
   reads as correct — auto-fit is doing exactly what it is told.

   So the phone gets an explicit 2x2 instead of a fraction that has to clear a
   gap, and the list's bottom margin goes: that margin was sized to sit under
   a heading, and the bare strip has none (themes/CLAUDE.md traps 62, 85).
   Declared at the END of the sheet, because the base rule is at :1825 and a
   media query adds no specificity (trap 51). */
@media (max-width: 640px) {

	.tsp-creds__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tsp-creds__list li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1.15rem .7rem;
	}

	.tsp-creds__note { font-size: .76rem; }

	.tsp-creds--bare .tsp-creds__list { margin-bottom: 0; }
}

/* ═══════════════════════ 2026-09-29 — THE STRAPLINE IS THE BAND UNDER THE HERO
   The credentials strip came out (Adam: "i dont think theyre very strong"), so
   "Built on Service. Defined by Results." is now the ONLY thing between the
   hero and the welcome — the first thing a visitor reads after the headline.

   It was set as fine print: .72–.86rem uppercase sans at .22em, which is the
   treatment for a line sitting UNDER something else. Alone in a band it reads
   as a caption with nothing to caption. Adam: "improve the built on service
   defined by results to be styled better like luxury."

   So it takes the treatment her own card gives its display line — Instrument
   Serif in SMALL CAPS, which is the whole difference: small caps keep the
   even colour of letterspaced capitals while the ascenders on B, S, D and R
   still rise, so it reads as typography rather than as a label. `text-
   transform` has to go to `none` or the text arrives already uppercase and
   `font-variant-caps` has nothing lowercase left to shrink — the rule applies,
   computes, and changes nothing.

   The band gets the four-colour brand rule the strip used to carry, so her
   palette still draws the line under the hero, and a warm tint ground so it
   reads as a considered pause rather than more white page. #6B541F on
   #F7F5F1 is 6.62:1.

   Declared at the END of the sheet: the base .tsp-strap block is at :4583 and
   its phone override at :4635, and a media query adds no specificity
   (themes/CLAUDE.md trap 51).

   The .tsp-creds rules stay in the sheet, unused. TSP_Content::credentials()
   is still populated, so restoring the strip is one `if` in front-page.php and
   it should not also be a styling job.
   ═════════════════════════════════════════════════════════════════════════ */

.tsp-strapband {
	background: var(--tsp-tint);
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%) 1;
	/* NOT border-bottom. `border-image` paints on every side that has a
	   width, so a 1px bottom border rendered the four-colour gradient a
	   second time, 200px below the first — two brand bars around one line.
	   (The old .tsp-creds carried exactly this bug: its `border-bottom: 1px
	   solid var(--tsp-line)` at :1823 is why the strip appeared to have the
	   rule underneath it rather than on top.) An inset shadow draws the
	   hairline without a border for border-image to find. */
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--tsp-line);
	padding-block: clamp(2.9rem, 6.4vw, 5rem);
}

.tsp-strap {
	gap: clamp(.9rem, 2.4vw, 1.9rem);
}

.tsp-strap__t {
	font-family: var(--tsp-display);
	font-weight: 400;
	font-size: clamp(1.3rem, .98rem + 1.5vw, 2.2rem);
	font-variant-caps: small-caps;
	text-transform: none;
	letter-spacing: .05em;
	line-height: 1.1;
	color: var(--tsp-coral-dk);
}

/* Longer than they were, because they are now holding up display type rather
   than a caption, and they sit on the tint. */
.tsp-strap__rule {
	flex: 0 1 clamp(2.5rem, 11vw, 8.5rem);
	background: linear-gradient(90deg, rgba(168,146,94,0), rgba(168,146,94,.85));
}
.tsp-strap__rule:last-child {
	background: linear-gradient(90deg, rgba(168,146,94,.85), rgba(168,146,94,0));
}

/* The lozenge's inner fills are the GROUND punched out of the ring, so they
   follow the band's colour. Left at #fff they draw a white square on the tint. */
.tsp-strap__dot {
	width: 9px;
	height: 9px;
	box-shadow:
		0 0 0 1px var(--tsp-dune),
		inset 0 0 0 2px var(--tsp-tint),
		inset 0 0 0 3px var(--tsp-dune);
}

/* PHONE. The two sentences still stack and the side rules still go — at this
   size the line is ~2.5x wider than it was and could not stay on one row at
   any width worth having. The lozenge stays as the centred ornament between
   them, which is how her card sets a narrow column. */
@media (max-width: 620px) {

	.tsp-strapband { padding-block: clamp(2.4rem, 9vw, 3.4rem); }

	.tsp-strap {
		flex-direction: column;
		gap: .45rem;
	}

	.tsp-strap__t {
		font-size: clamp(1.25rem, 1.02rem + 1.6vw, 1.7rem);
		letter-spacing: .045em;
	}

	.tsp-strap__dot { width: 8px; height: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE HILAL STANDARD, ported 2026-10-12 (themes/CLAUDE.md, top section).
   Adam: "give tanesha the newest template."

   This theme is the pre-October lineage, so the hero, the preloader, the
   valuation bar and the section under the hero were lifted out of
   themes/andrew-millar by tmp/tanesha/hilal/apply.py: every rule whose
   selector touches .amr-hero*, .amr-pre*, .amr-stand* or .amr-kick5, in
   source order, with every older .tsp-hero* rule here removed first so the
   two generations cannot fight (traps 51, 101).

   Tokens the parent has and this theme did not are declared first. The
   button rim and the name's glow are tints of HER OWN palette, not gold:
   Adam, 2026-10-12 — "the color shouldnt always be gold, it should match
   that brokers color template". Hers is the deep purple and the dune gold
   off her business card, so the glow is a pale gold and the rim a light
   dune.

   A build's own rules go BELOW the end marker. Never edit above it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	--tsp-btn-rim:  #C9B687;
	--tsp-btn-glow: #E8D9B2;
	--tsp-gold:     #A8925E;
	--tsp-gold-lt:  #E0CEA6;
	--tsp-radius:   14px;
	--tsp-scrim5:   12, 18, 22;
	--tsp-rule4: linear-gradient(90deg,
		var(--tsp-brand) 0 25%, var(--tsp-surf) 25% 50%,
		var(--tsp-coral) 50% 75%, var(--tsp-dune) 75% 100%);
}
@keyframes tsp-kb {
	0%       { opacity: 0; transform: scale(1.000); }
	4%       { opacity: 1; }
	33.333%  { opacity: 1; transform: scale(1.090); }
	38%      { opacity: 0; transform: scale(1.103); }
	100%     { opacity: 0; transform: scale(1.000); }
}
@keyframes tsp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tsp-rise6 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tsp-name-fill {
		45% { color: var(--tsp-btn-glow); text-shadow: 0 0 22px var(--tsp-btn-glow); }
		100% { color: #fff; text-shadow: 0 2px 24px rgba(10, 12, 16, .35); }
	}
@keyframes tsp-name-safe { to { color: #fff; } }
@keyframes tsp-pre-in { to { opacity: 1; transform: none; } }
@keyframes tsp-pre-line { to { transform: scaleX(1); } }
@keyframes tsp-pre-safety { to { opacity: 0; visibility: hidden; } }
.tsp-hero__title { text-shadow: 0 1px 2px rgba(10, 22, 26, .55), 0 2px 18px rgba(10, 22, 26, .45); }
.tsp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 74vh, 42rem);
	padding-block: clamp(5rem, 10vh, 7rem);
	overflow: hidden;
	background: #061518;
}
.tsp-hero__media { position: absolute; inset: 0; z-index: 0; }
.tsp-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		
		linear-gradient(to bottom, rgba(16, 30, 34, 0) 16%, rgba(16, 30, 34, .30) 30%, rgba(16, 30, 34, .30) 62%, rgba(16, 30, 34, 0) 78%),
		linear-gradient(to right, rgba(16, 30, 34, .58) 0%, rgba(16, 30, 34, .40) 44%, rgba(16, 30, 34, .06) 76%, rgba(16, 30, 34, .12) 100%),
		linear-gradient(to bottom, rgba(16, 30, 34, .14) 0%, rgba(16, 30, 34, .00) 38%, rgba(16, 30, 34, .26) 100%);
}
.tsp-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.tsp-hero__title { color: #fff; }
.tsp-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }
.tsp-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.tsp-hero__note {
	margin-top: 1.35rem;
	font-size: .84rem;
	color: rgba(255, 255, 255, .62);
}
.tsp-home .tsp-hero { margin-top: calc(var(--tsp-header-h) * -1); }
.tsp-home .tsp-hero__inner { padding-top: var(--tsp-header-h); }
html:not(.js) .tsp-home .tsp-hero { margin-top: 0; }
html:not(.js) .tsp-home .tsp-hero__inner { padding-top: 0; }
.tsp-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.35rem;
	font-family: var(--tsp-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: #fff;
}
.tsp-hero__phone .tsp-icon { color: var(--tsp-accent-lt); }
.tsp-hero__phone:hover { color: var(--tsp-accent-lt); }
.tsp-hero__phone + .tsp-hero__note { margin-top: .5rem; }
.tsp-hero__phone strong { color: var(--tsp-accent-lt); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
	.tsp-hero__phone { font-size: 1.02rem; align-items: flex-start; }
	.tsp-hero__phone .tsp-icon { margin-top: .3rem; }
}
.tsp-hero__search { margin: 1.75rem 0 1.25rem; max-width: 62rem; }
.tsp-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 5px;
	z-index: 3;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
}
.tsp-hero__poster, .tsp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}
.tsp-hero__video {
	opacity: 0;
	transition: opacity .9s var(--tsp-ease);
	pointer-events: none;
}
.tsp-hero__video.is-ready { opacity: 1; }
@media (max-width: 900px) {
	.tsp-hero__poster { object-position: 60% 30%; }
}
.tsp-hero__kb {
	position: absolute;
	inset: 0;
	overflow: hidden;   
	z-index: 0;
}
.tsp-hero__frame {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	will-change: opacity, transform;
	animation: tsp-kb 27s linear infinite;
}
.tsp-hero__frame:first-child { opacity: 1; }
.tsp-hero__frame > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}
@media (prefers-reduced-motion: reduce) {
	.tsp-hero__frame { animation: none; opacity: 0; }
	.tsp-hero__frame:first-child { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
	.tsp-hero__frame { display: block; }
	.tsp-hero__frame > img { object-position: center 50%; }
}
@media (max-width: 900px) {
	.tsp-home .tsp-hero { padding-top: 0; }
}
.tsp-hero__phone strong, .tsp-hero__phone .tsp-icon { color: #fff; }
@media (max-width: 900px) {
	.tsp-home .tsp-hero__inner { padding-top: calc(var(--tsp-header-h) + 2.75rem); }
}
.tsp-mast--transparent.tsp-home .tsp-hero3 .tsp-hero__inner { padding-top: 0; }
.tsp-mast--transparent.tsp-home .tsp-hero3 { padding-top: calc(var(--tsp-header-h) + clamp(2.5rem, 6vh, 4.5rem)); }
@media (max-width: 900px) {
	.tsp-mast--transparent.tsp-home .tsp-hero3 { padding-top: calc(var(--tsp-header-h) + 2.75rem); }
}
.tsp-hero3 {
	min-height: clamp(34rem, 78vh, 46rem);
	padding-block: clamp(3.5rem, 8vh, 6rem);
	background: var(--tsp-deep);
}
.tsp-hero3__grid {
	position: relative; z-index: 2; width: 100%;
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 23.5rem);
	gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.tsp-hero3__copy { max-width: 43rem; }
.tsp-hero3 .tsp-hero__title { font-size: clamp(2.25rem, 1.25rem + 3.5vw, 3.9rem); line-height: 1.08; letter-spacing: -.022em; }
.tsp-hero3 .tsp-hero__lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); max-width: 40ch; color: #fff; }
.tsp-hero3__eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.tsp-hero3__eyebrow::before { content: ""; width: 2.6rem; height: 2px; background: var(--tsp-gold-lt); }
.tsp-hero3__chips { display: flex; flex-wrap: wrap; gap: .55rem 0; margin-top: 1.6rem; }
.tsp-hero3__chips li {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: 0 1.1rem; color: #fff; font-size: .9rem; font-weight: 600; letter-spacing: .01em;
	border-left: 1px solid rgba(255, 255, 255, .45);
	text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}
.tsp-hero3__chips li:first-child { padding-left: 0; border-left: 0; }
.tsp-hero3__chips .tsp-li { width: 1.25rem; height: 1.25rem; color: var(--tsp-gold-lt); flex: none; }
.tsp-hero3 .tsp-hero__actions { margin-top: 1.9rem; }
.tsp-hero3 .tsp-hero__phone strong, .tsp-hero3 .tsp-hero__phone .tsp-icon { color: #fff; }
.tsp-hero3__card {
	background: #fff; border-radius: var(--tsp-radius); border-top: 5px solid var(--tsp-gold);
	padding: clamp(1.5rem, 2.4vw, 2.1rem); box-shadow: 0 30px 60px -28px rgba(16, 18, 22, .7), 0 2px 6px rgba(16, 18, 22, .18);
	display: grid; gap: .85rem;
}
.tsp-hero3__card-eye { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tsp-accent); }
.tsp-hero3__card-title { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); line-height: 1.12; margin: 0 0 .35rem; color: var(--tsp-deep); }
.tsp-hero3__card input {
	width: 100%; font: inherit; font-size: 1rem; color: var(--tsp-ink);
	padding: .95rem 1rem; border: 1px solid #C9CED6; border-radius: 8px; background: #FBFAF7;
}
.tsp-hero3__card input::placeholder { color: var(--tsp-faint); }
.tsp-hero3__card input:focus { outline: 2px solid var(--tsp-accent); outline-offset: 1px; border-color: var(--tsp-accent); }
.tsp-hero3__card .tsp-btn { justify-content: center; padding-block: 1rem; background: var(--tsp-deep); border-color: var(--tsp-deep); color: #fff; }
.tsp-hero3__card .tsp-btn:hover { background: var(--tsp-accent); border-color: var(--tsp-accent); }
.tsp-hero3__card-points { display: grid; gap: .4rem; margin-top: .35rem; }
.tsp-hero3__card-points li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--tsp-body); }
.tsp-hero3__card-points .tsp-li { width: 1.05rem; height: 1.05rem; color: var(--tsp-accent); stroke-width: 2.4; flex: none; }
.tsp-hero3 .tsp-hero__scrim {
	background:
		linear-gradient(to right, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .50) 42%, rgba(16, 18, 22, .12) 68%, rgba(16, 18, 22, .16) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .10) 0%, rgba(16, 18, 22, .22) 50%, rgba(16, 18, 22, .30) 100%);
}
@media (max-width: 900px) {
	.tsp-hero3 { min-height: 0; padding-block: 2.6rem 2.4rem; }
	.tsp-hero3__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.tsp-hero3 .tsp-hero__title { font-size: clamp(2.05rem, 1.5rem + 2.6vw, 2.6rem); }
	.tsp-hero3__chips { flex-direction: column; gap: .5rem; }
	.tsp-hero3__chips li { padding: 0; border-left: 0; }
	.tsp-hero3 .tsp-hero__scrim {
		background: linear-gradient(to bottom, rgba(16, 18, 22, .58) 0%, rgba(16, 18, 22, .56) 62%, rgba(16, 18, 22, .40) 100%);
	}
}
.tsp-hero3__face, .tsp-hero3__eye-short { display: none; }
@media (max-width: 640px) {
	.tsp-hero3__eye-full { display: none; }
	.tsp-hero3__eye-short { display: inline; }
	.tsp-hero3__who { display: flex; align-items: center; gap: .8rem; margin-bottom: .45rem; }
	.tsp-hero3__who .tsp-hero3__eyebrow { margin-bottom: 0; gap: .55rem; }
	.tsp-hero3__who:not(.tsp-hero3__who--face) .tsp-hero3__eyebrow::before { width: 1.4rem; }
	.tsp-hero3__who--face .tsp-hero3__eyebrow::before { display: none; }
	.tsp-hero3__who--face .tsp-hero3__face {
		display: block; flex: none; width: 52px; height: 52px; margin: 4px;
		border-radius: 50%; object-fit: cover;
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tsp-accent), 0 6px 16px rgba(10, 12, 16, .45);
	}
	.tsp-hero3 { padding-block: 1.5rem 1.6rem; }
	.tsp-mast--transparent.tsp-home .tsp-hero3 { padding-top: calc(var(--tsp-header-h) + .35rem); }
	.tsp-mast--light .tsp-hero3, .tsp-mast--dark .tsp-hero3 { padding-top: .35rem; }
	.tsp-hero3__grid { gap: .75rem; }
	.tsp-hero3 .tsp-hero__title { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 2.05rem); line-height: 1.06; }
	.tsp-hero3 .tsp-hero__lede { font-size: 1rem; line-height: 1.45; margin-top: .7rem; }
	.tsp-hero3__chips { flex-direction: row; flex-wrap: wrap; gap: .3rem 0; margin-top: .6rem; }
	.tsp-hero3__chips li { gap: .3rem; padding: 0 .5rem; font-size: .75rem; border-left: 1px solid rgba(255, 255, 255, .45); }
	.tsp-hero3__chips li:first-child { padding-left: 0; border-left: 0; }
	.tsp-hero3__chips .tsp-li { width: .95rem; height: .95rem; }
	.tsp-hero3 .tsp-hero__actions { margin-top: .7rem; gap: .6rem; }
	.tsp-hero3 .tsp-hero__actions .tsp-btn { flex: 1 1 0; justify-content: center; min-height: 46px; padding: .7rem .5rem; }
	.tsp-hero3 .tsp-hero__phone { margin-top: .2rem; min-height: 44px; align-items: center; font-size: 1rem; }
	.tsp-hero3 .tsp-hero__phone .tsp-icon { margin-top: 0; }
	.tsp-hero3__card { padding: .8rem 1.1rem 1.1rem; gap: .5rem; }
	.tsp-hero3__card-title { margin-bottom: 0; font-size: 1.4rem; }
	.tsp-hero3__card input { padding-block: .75rem; line-height: 1.3; }
	.tsp-hero3__card .tsp-btn { padding-block: .85rem; min-height: 44px; }
	.tsp-hero3__card-points { display: none; }
}
@media (max-width: 380px) {
	.tsp-hero3__chips .tsp-li { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.tsp-hero3__who, .tsp-hero3 .tsp-hero__lede, .tsp-hero3__chips, .tsp-hero3 .tsp-hero__actions, .tsp-hero3 .tsp-hero__phone, .tsp-hero3__card { animation: tsp-rise .55s var(--tsp-ease) both; }
	.tsp-hero3__who { animation-delay: .05s; }
	.tsp-hero3 .tsp-hero__lede { animation-delay: .12s; }
	.tsp-hero3__chips { animation-delay: .19s; }
	.tsp-hero3 .tsp-hero__actions { animation-delay: .26s; }
	.tsp-hero3 .tsp-hero__phone { animation-delay: .33s; }
	.tsp-hero3__card { animation-delay: .30s; }
}
.tsp-hero__kb:not(.is-live) .tsp-hero__frame { animation: none; }
.tsp-hero__kb:not(.is-live) .tsp-hero__frame:first-child { opacity: 1; transform: scale(var(--tsp-kb-s0, 1.012)); }
@media (prefers-reduced-motion: reduce) {
	.tsp-hero__kb .tsp-hero__frame:first-child, .tsp-hero__kb:not(.is-live) .tsp-hero__frame:first-child { transform: none; }
}
.tsp-kick5 {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 1.25rem;
	font-family: var(--tsp-body-font);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--tsp-brand);
}
.tsp-kick5::before {
	content: '';
	flex: none;
	width: 32px; height: 2px;
	background: var(--tsp-rule4);
}
.tsp-intro5__head .tsp-kick5 { margin-bottom: 1rem; }
.tsp-nums5 .tsp-kick5 { color: #fff; }
@media (max-width: 900px) {
	.tsp-rev5__head .tsp-kick5 { grid-column: 1 / -1; }
}
.tsp-list5 .tsp-kick5 { margin-bottom: 1.1rem; }
.tsp-creed5 .tsp-kick5 { justify-content: center; }
.tsp-creed5 .tsp-kick5::after { content: ''; flex: none; width: 32px; height: 2px; background: var(--tsp-rule4); }
.tsp-creed5--photo .tsp-kick5 { color: #fff; }
.tsp-lead5--photo .tsp-kick5 { color: #fff; }
@media (max-width: 640px) {
	.tsp-kick5 { letter-spacing: .2em; gap: .7rem; }
}
.tsp-hero6 {
	display: flex; align-items: stretch;
	padding-block: 0;
	min-height: clamp(36rem, 82vh, 47rem);
	background: var(--tsp-deep);
}
.tsp-hero6 > .tsp-wrap { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; }
.tsp-mast--transparent.tsp-home .tsp-hero6 { padding-top: var(--tsp-header-h); }
html:not(.js) .tsp-mast--transparent.tsp-home .tsp-hero6 { padding-top: 0; }
.tsp-hero6.tsp-hero6--a .tsp-hero__inner {
	max-width: none; width: 100%;
	padding-block: clamp(2.5rem, 6.5vh, 4rem) clamp(3rem, 8.5vh, 5.25rem);
}
.tsp-mast--light .tsp-hero6, .tsp-mast--dark .tsp-hero6 { min-height: clamp(30rem, calc(82vh - var(--tsp-header-h) - 2.5rem), 44rem); }
.tsp-mast--transparent.tsp-home .tsp-hero6::before {
	content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0;
	height: calc(var(--tsp-header-h) + 7rem); pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(16, 18, 22, .56) 0,
		rgba(16, 18, 22, .46) calc(var(--tsp-header-h) * .7),
		rgba(16, 18, 22, .24) var(--tsp-header-h),
		rgba(16, 18, 22, .1) calc(var(--tsp-header-h) + 3rem),
		rgba(16, 18, 22, 0) 100%);
}
.tsp-mast--transparent.tsp-home .tsp-hero6 .tsp-hero__scrim {
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tsp-header-h) * .7), #000 calc(var(--tsp-header-h) + 2.5rem));
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tsp-header-h) * .7), #000 calc(var(--tsp-header-h) + 2.5rem));
}
.tsp-hero6 .tsp-hero__scrim {
	background:
		linear-gradient(to right, rgba(12, 18, 22, .62) 0%, rgba(12, 18, 22, .58) 34%, rgba(12, 18, 22, .38) 50%, rgba(12, 18, 22, .12) 66%, rgba(12, 18, 22, 0) 82%),
		linear-gradient(to bottom, rgba(12, 18, 22, .1) 0%, rgba(12, 18, 22, 0) 36%, rgba(12, 18, 22, .12) 70%, rgba(12, 18, 22, .12) 100%);
}
.tsp-hero6__copy { max-width: 40rem; }
.tsp-hero6__kicker {
	display: flex; align-items: center; gap: .85rem;
	margin: 0 0 1.5rem;
	font-family: var(--tsp-body-font);
	font-size: .6875rem; font-weight: 600; line-height: 1.4;
	letter-spacing: .26em; text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}
.tsp-hero6__kicker::before { content: ''; flex: none; width: 32px; height: 2px; background: var(--tsp-gold-lt); }
.tsp-hero6__face { display: none; }
.tsp-hero6 .tsp-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.2rem + 3vw, 3.75rem);
	line-height: 1.09;
	letter-spacing: -.014em;
	text-wrap: balance;
	color: #fff;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .35), 0 2px 22px rgba(10, 12, 16, .3);
}
.tsp-hero6--long .tsp-hero__title { font-size: clamp(2.2rem, 1.05rem + 2.7vw, 3.3rem); }
.tsp-hero6 .tsp-hero__lede {
	margin: 1.4rem 0 0;
	max-width: 30rem;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	line-height: 1.55;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .45);
}
.tsp-hero6__chips {
	list-style: none; margin: 1.15rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .3rem 0;
	font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
	color: #fff; text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}
.tsp-hero6__chips li:not(:last-child)::after { content: '\00B7'; margin: 0 .7rem; opacity: .8; }
.tsp-hero6__act { margin-top: 2.75rem; max-width: 35rem; }
.tsp-hero6__bar {
	display: flex; align-items: center;
	width: 100%; max-width: 35rem;
	padding: 6px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(8, 26, 41, .18), 0 22px 44px -20px rgba(8, 26, 41, .6);
	transition: box-shadow .2s var(--tsp-ease);
}
.tsp-hero6__bar:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--tsp-gold-lt), 0 22px 44px -20px rgba(8, 26, 41, .6); }
.tsp-hero6__pin { flex: none; width: 20px; height: 20px; margin-left: .95rem; color: var(--tsp-faint); }
.tsp-hero6__bar input {
	flex: 1 1 auto; min-width: 0;
	height: 52px; padding: 0 .9rem 0 .7rem;
	border: 0; outline: 0; background: transparent; box-shadow: none; border-radius: 0;
	font: 400 1.0625rem/1.2 var(--tsp-body-font);
	color: var(--tsp-ink);
}
.tsp-hero6__bar input::placeholder { color: var(--tsp-muted); opacity: 1; }
.tsp-hero6__go {
	flex: none;
	height: 52px; padding: 0 1.5rem;
	border: 0; border-radius: 5px;
	background: var(--tsp-coral); color: #fff;
	font: 600 .8125rem/1 var(--tsp-body-font);
	letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .2s var(--tsp-ease), transform .08s var(--tsp-ease);
}
.tsp-hero6__go:hover { background: var(--tsp-coral-dk); }
.tsp-hero6__go:focus-visible { background: var(--tsp-coral-dk); outline: 2px solid var(--tsp-deep); outline-offset: 2px; }
.tsp-hero6__go:active { transform: scale(.985); }
.tsp-hero6__note {
	width: fit-content; max-width: 100%;
	margin: .9rem 0 0;
	font-size: .8125rem; font-weight: 500; line-height: 1.4;
	color: #fff; opacity: .92;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 0 14px rgba(10, 12, 16, .35);
}
.tsp-hero6__go--solo {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 15rem; height: 58px; padding: 0 2.2rem;
	font-size: .84rem; border-radius: 6px; text-decoration: none;
	box-shadow: 0 18px 36px -18px rgba(8, 26, 41, .6);
}
.tsp-hero6__go--solo:focus-visible { outline-color: #fff; }
.tsp-hero6.tsp-hero6--search .tsp-hero6__act { max-width: 46rem; }
@media (prefers-reduced-motion: no-preference) {
	.tsp-hero6__kicker, .tsp-hero6 .tsp-hero__lede, .tsp-hero6__chips, .tsp-hero6__act { animation: tsp-rise6 .55s var(--tsp-ease) both; }
	.tsp-hero6__kicker { animation-delay: .04s; }
	.tsp-hero6 .tsp-hero__lede { animation-delay: .1s; }
	.tsp-hero6__chips { animation-delay: .14s; }
	.tsp-hero6__act { animation-delay: .18s; }
}
@media (max-width: 900px) {
	.tsp-hero6 .tsp-hero__scrim {
		background: linear-gradient(to bottom, rgba(12, 18, 22, .12) 0%, rgba(12, 18, 22, .22) 14%, rgba(12, 18, 22, .54) 28%, rgba(12, 18, 22, .6) 100%);
	}
	.tsp-mast--transparent.tsp-home .tsp-hero6::before {
		background: linear-gradient(to bottom,
			rgba(16, 18, 22, .6) 0,
			rgba(16, 18, 22, .52) calc(var(--tsp-header-h) * .7),
			rgba(16, 18, 22, .28) var(--tsp-header-h),
			rgba(16, 18, 22, .12) calc(var(--tsp-header-h) + 3rem),
			rgba(16, 18, 22, 0) 100%);
	}
}
@media (min-width: 641px) and (max-width: 900px) {
	.tsp-hero6 { min-height: min(78vh, 40rem); }
}
@media (max-width: 640px) {
	.tsp-hero6 { min-height: 26rem; }
	.tsp-mast--light .tsp-hero6, .tsp-mast--dark .tsp-hero6 { min-height: 26rem; }
	.tsp-hero6 > .tsp-wrap { align-items: flex-start; }
	.tsp-hero6.tsp-hero6--a .tsp-hero__inner { padding-block: 4.3125rem 2.1rem; }
	.tsp-hero6 .tsp-hero__scrim {
		background: linear-gradient(to bottom, rgba(12, 18, 22, .1) 0, rgba(12, 18, 22, .14) 84px, rgba(12, 18, 22, .32) 140px, rgba(12, 18, 22, .54) 172px, rgba(12, 18, 22, .6) 100%);
	}
	.tsp-mast--transparent.tsp-home .tsp-hero6 .tsp-hero__scrim {
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tsp-header-h) * .6), #000 calc(var(--tsp-header-h) + .75rem));
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .22) calc(var(--tsp-header-h) * .6), #000 calc(var(--tsp-header-h) + .75rem));
	}
	.tsp-hero6__kicker { margin-bottom: 1rem; gap: .7rem; letter-spacing: .22em; }
	.tsp-hero6__kicker::before { width: 22px; }
	.tsp-hero6__kicker--face::before { display: none; }
	.tsp-hero6__kicker--face .tsp-hero6__face {
		display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
		box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(10, 12, 16, .4);
	}
	.tsp-hero6 .tsp-hero__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.35rem); line-height: 1.1; }
	.tsp-hero6 .tsp-hero__title br { display: none; }
	.tsp-hero6--long .tsp-hero__title { font-size: clamp(1.8rem, 1.1rem + 3.2vw, 2.1rem); }
	.tsp-hero6 .tsp-hero__lede { margin-top: 1rem; max-width: none; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
	.tsp-hero6__chips { margin-top: .85rem; font-size: .78rem; }
	.tsp-hero6__act { margin-top: 1.6rem; max-width: none; }
	.tsp-hero6__bar { flex-wrap: wrap; max-width: none; padding: 5px; }
	.tsp-hero6__pin { margin-left: .7rem; }
	.tsp-hero6__bar input { flex: 1 1 0; height: 50px; font-size: 1rem; }
	.tsp-hero6__go { flex: 1 1 100%; height: 50px; margin-top: 5px; font-size: .8125rem; }
	.tsp-hero6__go--solo { width: 100%; height: 54px; margin-top: 0; }
	.tsp-hero6__note { display: none; }
}
.tsp-rv__head .tsp-kick5 { margin-bottom: .75rem; }
@media (min-width: 641px) {
	.tsp-rv__head .tsp-kick5 { margin-bottom: 1rem; }
}
.tsp-pact7__copy .tsp-kick5 { margin-bottom: .9rem; }
.tsp-hero6__bar--light {
	box-shadow: 0 0 0 1px var(--tsp-line), 0 16px 32px -22px rgba(var(--tsp-scrim5), .45);
	background: var(--tsp-shell);
}
.tsp-hero6__bar--light:focus-within { box-shadow: 0 0 0 2px var(--tsp-brand), 0 16px 32px -22px rgba(var(--tsp-scrim5), .45); }
.tsp-hero6__note--light { color: var(--tsp-muted); opacity: 1; text-shadow: none; }
@media (max-width: 899px) {
	.tsp-pact7__card .tsp-hero6__bar { max-width: none; }
}
@media (max-width: 640px) {
	.tsp-hero6__kicker--face { margin-top: -1.75rem; }
	.tsp-hero6:has(.tsp-hero6__kicker--face) .tsp-hero__scrim {
		background: linear-gradient(to bottom, rgba(12, 18, 22, .1) 0, rgba(12, 18, 22, .14) 56px, rgba(12, 18, 22, .32) 112px, rgba(12, 18, 22, .54) 144px, rgba(12, 18, 22, .6) 100%);
	}
}
.tsp-ab7__body .tsp-kick5 { margin-bottom: 1.1rem; }
.tsp-hero6__go, .tsp-hero6__go--solo { border-radius: 8px; }
.tsp-closer9 .tsp-kick5 { justify-content: center; margin-bottom: 1rem; }
@media (max-width: 640px) {
	.tsp-pg7 .tsp-pact7__copy .tsp-kick5 { margin-bottom: .55rem; }
}
.tsp-contact__form .tsp-kick5 { margin-bottom: 1rem; }
.tsp-front .tsp-hero6 > .tsp-wrap { justify-content: center; }
.tsp-front .tsp-hero6__inner { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tsp-front .tsp-hero6__copy { max-width: 56rem; display: flex; flex-direction: column; align-items: center; }
.tsp-front .tsp-hero6__kicker { justify-content: center; }
.tsp-front .tsp-hero6__kicker::after { content: ''; flex: none; width: 32px; height: 2px; background: var(--tsp-gold-lt); }
.tsp-front .tsp-hero6 .tsp-hero__title { max-width: 22ch; }
.tsp-front .tsp-hero6 .tsp-hero__title--pair { display: flex; flex-direction: column; align-items: center; max-width: none; font-size: inherit; line-height: 1; }
.tsp-hero6__name { display: block; letter-spacing: -.03em; white-space: nowrap; }
.tsp-hero6 .tsp-hero__title .tsp-hero6__br { display: none; }
@media (max-width: 600px) {
	.tsp-hero6 .tsp-hero__title .tsp-hero6__br { display: inline; }
}
.tsp-hero6__claim { display: block; letter-spacing: -.012em; text-wrap: balance; }
.tsp-hero6__word { display: inline-block; white-space: nowrap; }
.tsp-hero6__ltr { display: inline-block; }
.tsp-front .tsp-hero6 .tsp-hero__lede { margin-inline: auto; }
.tsp-front .tsp-hero6__chips { justify-content: center; }
.tsp-front .tsp-hero6__act { width: 100%; max-width: 34rem; margin-inline: auto; }
.tsp-front .tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) { margin-top: 0; margin-inline: auto; max-width: 34rem; }
.tsp-front .tsp-hero6__note { margin-inline: auto; }
.tsp-front .tsp-hero6.tsp-hero6--search .tsp-hero6__act { max-width: 46rem; }
@media (min-width: 901px) {
	.tsp-mast--transparent.tsp-home .tsp-hero6 { min-height: clamp(42rem, 94vh, 58rem); }
	.tsp-front .tsp-hero6 > .tsp-wrap { padding-bottom: 2.5rem; }
	.tsp-front .tsp-hero6__kicker { margin-bottom: 2.1rem; font-size: .72rem; letter-spacing: .3em; }
	.tsp-front .tsp-hero6 .tsp-hero__title--pair { gap: 1.5rem; }
	.tsp-hero6__name { font-size: min(clamp(3.8rem, 1rem + 7.4vw, 8rem), calc((100vw - 6rem) / (var(--tsp-name-ch, 12) * .44))); line-height: .92; }
	.tsp-hero6__claim { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.55rem); line-height: 1.14; max-width: 27ch; }
	.tsp-front .tsp-hero6 .tsp-hero__lede { margin-top: 1.6rem; max-width: 32rem; }
	.tsp-front .tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) { padding: 8px; border-radius: 14px; }
	.tsp-front .tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input { height: 54px; font-size: 1.02rem; }
	.tsp-front .tsp-hero6 .tsp-hero6__go { height: 54px; }
	.tsp-front .tsp-hero6__note { margin-top: 1rem; letter-spacing: .02em; }
	.tsp-front .tsp-hero6 .tsp-hero__scrim {
		background:
			radial-gradient(ellipse 62% 58% at 50% 52%, rgba(12, 18, 22, .72) 0%, rgba(12, 18, 22, .6) 55%, rgba(12, 18, 22, .3) 100%),
			linear-gradient(to bottom, rgba(12, 18, 22, .1) 0%, rgba(12, 18, 22, .26) 26%, rgba(12, 18, 22, .26) 40%, rgba(12, 18, 22, .08) 60%, rgba(12, 18, 22, .16) 100%);
	}
	.tsp-front .tsp-hero6 .tsp-hero__video.is-ready ~ .tsp-hero__scrim {
		background:
			radial-gradient(ellipse 62% 58% at 50% 52%, rgba(12, 18, 22, .5) 0%, rgba(12, 18, 22, .4) 55%, rgba(12, 18, 22, .16) 100%),
			linear-gradient(to bottom, rgba(12, 18, 22, .08) 0%, rgba(12, 18, 22, .14) 26%, rgba(12, 18, 22, .14) 40%, rgba(12, 18, 22, .04) 60%, rgba(12, 18, 22, .12) 100%);
		transition: background .9s ease;
	}
	.tsp-mast--transparent.tsp-home .tsp-hero6::before {
		background: linear-gradient(to bottom,
			rgba(16, 18, 22, .64) 0,
			rgba(16, 18, 22, .56) calc(var(--tsp-header-h) * .7),
			rgba(16, 18, 22, .28) var(--tsp-header-h),
			rgba(16, 18, 22, .1) calc(var(--tsp-header-h) + 3rem),
			rgba(16, 18, 22, 0) 100%);
	}
}
@media (max-width: 900px) {
	.tsp-mast--transparent.tsp-home .tsp-hero6 { min-height: min(84svh, 39rem); }
	.tsp-mast--transparent.tsp-home .tsp-hero6 > .tsp-wrap { align-items: center; padding-top: 1.25rem; padding-bottom: 2.75rem; }
	.tsp-mast--transparent.tsp-home .tsp-hero6 .tsp-hero6__inner { padding-top: 0; padding-bottom: 0; }
	.tsp-front .tsp-hero6__kicker { margin-bottom: 1.35rem; }
	.tsp-front .tsp-hero6__kicker--face::after { display: none; }
	.tsp-front .tsp-hero6 .tsp-hero__title--pair { gap: 1rem; }
	.tsp-hero6__name { font-size: min(clamp(3.2rem, 15.5vw, 4.4rem), calc((100vw - 3rem) / (var(--tsp-name-ch, 12) * .44))); line-height: .95; }
	.tsp-hero6__claim { font-size: clamp(1.3rem, 5.7vw, 1.7rem); line-height: 1.18; }
	.tsp-front .tsp-hero6__act { margin-top: 2rem; }
}
@media (max-width: 600px) {
	.tsp-hero6__name { font-size: min(clamp(3.2rem, 15.5vw, 4.4rem), calc((100vw - 3rem) / (var(--tsp-line-ch, 12) * .44))); }
}
@media (min-width: 761px) {
	.tsp-front .tsp-hero6__name { white-space: nowrap; }
	.tsp-front .tsp-hero6__act { margin-top: 2.2rem; }
	.tsp-front .tsp-hero6:not(.tsp-hero6--search) .tsp-hero6__act, .tsp-front .tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) { width: min(max(var(--tsp-name-w, 34rem), 29rem), 60rem); max-width: 100%; }
	.tsp-front .tsp-hero6__claim { max-width: min(max(var(--tsp-name-w, 34rem), 27rem), 60rem); }
	.tsp-front .tsp-hero6 .tsp-hero6__go { padding-inline: 1.35rem; }
}
.tsp-front .tsp-hero6.tsp-hero::after { height: 12px; }
@media (max-width: 640px) {
	.tsp-front .tsp-hero6.tsp-hero::after { height: 9px; }
}
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) {
	padding: 7px;
	background: linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)), rgb(16 17 19 / 36%);
	border: 1px solid rgb(255 255 255 / 50%);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgb(10 11 12 / 30%), inset 0 1px 0 rgb(255 255 255 / 45%);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
}
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light):focus-within {
	border-color: rgb(255 255 255 / 90%);
	box-shadow: 0 18px 44px rgb(10 11 12 / 30%), inset 0 1px 0 rgb(255 255 255 / 45%), 0 0 0 3px rgb(255 255 255 / 28%);
}
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) .tsp-hero6__pin { color: #fff; opacity: .92; }
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input { background: transparent; color: #fff; caret-color: #fff; }
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input::placeholder { color: rgb(255 255 255 / 92%); opacity: 1; }
.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	transition: background-color 99999s ease-out 0s;
}
@media (max-width: 640px) {
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light), .tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light):focus-within {
		position: relative;
		gap: 9px; padding: 0;
		background: none; border: 0; border-radius: 0; box-shadow: none;
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input {
		flex: 1 1 100%;
		height: 54px; padding: 0 1rem 0 2.85rem;
		background: linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 12%)), rgb(16 17 19 / 36%);
		border: 1px solid rgb(255 255 255 / 50%);
		border-radius: 10px;
		box-shadow: 0 14px 34px rgb(10 11 12 / 28%), inset 0 1px 0 rgb(255 255 255 / 45%);
		-webkit-backdrop-filter: blur(22px) saturate(1.5);
		backdrop-filter: blur(22px) saturate(1.5);
	}
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light):focus-within input { border-color: rgb(255 255 255 / 90%); }
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) .tsp-hero6__pin {
		position: absolute; z-index: 1; left: 1rem; top: 17px; margin: 0; pointer-events: none;
	}
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) .tsp-hero6__go { height: 52px; margin-top: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) { background: rgb(14 15 16 / 62%); }
	@media (max-width: 640px) {
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) { background: none; }
	.tsp-hero6 .tsp-hero6__bar:not(.tsp-hero6__bar--light) input { background: rgb(14 15 16 / 62%); }
}
}
.tsp-hero6__go {
	background: linear-gradient(var(--tsp-coral-br), var(--tsp-coral-dk)) !important;
	background-size: auto !important; background-repeat: no-repeat !important;
	border: 1px solid var(--tsp-btn-rim) !important;
	border-radius: 9px;
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(10, 11, 12, .2) !important;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease;
}
.tsp-hero6__go:hover {
	transform: translateY(-2px); filter: brightness(1.08);
	box-shadow: 0 16px 34px rgba(10, 11, 12, .28) !important;
}
.tsp-front .tsp-hero6 .tsp-hero6__go {
	position: relative; isolation: isolate; overflow: hidden;
	background: none !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
	box-shadow: 0 12px 30px rgba(10, 11, 12, .3) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	border-radius: 9px; font-size: .8rem; letter-spacing: .12em;
}
.tsp-front .tsp-hero6 .tsp-hero6__go::before {
	content: ''; position: absolute; z-index: -1; inset: 0;
	background: linear-gradient(var(--tsp-coral-br), var(--tsp-coral-dk));
	opacity: .8; transition: opacity .3s ease; pointer-events: none;
}
.tsp-front .tsp-hero6 .tsp-hero6__go::after {
	content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -60%; width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	transform: skewX(-22deg); transition: left .9s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}
.tsp-front .tsp-hero6 .tsp-hero6__go:hover {
	filter: none;
	box-shadow: 0 18px 36px rgba(10, 11, 12, .36) !important;
}
.tsp-front .tsp-hero6 .tsp-hero6__go:hover::before { opacity: .94; }
.tsp-front .tsp-hero6 .tsp-hero6__go:hover::after { left: 130%; }
@media (max-width: 640px) {
	.tsp-front .tsp-hero6 .tsp-hero6__go { border-radius: 10px; box-shadow: 0 14px 34px rgba(10, 11, 12, .3) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tsp-front .tsp-hero6 .tsp-hero6__go::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	html.js .tsp-front .tsp-hero6__ltr {
		color: rgba(255, 255, 255, .14);
		animation: tsp-name-safe .01s linear 6s forwards;
	}
	html.js.tsp-go .tsp-front .tsp-hero6__ltr {
		animation: tsp-name-fill .95s ease calc(.15s + var(--i) * var(--tsp-name-step, 95ms)) forwards;
	}
}
.tsp-pre { display: none; }
html.js .tsp-pre {
	position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
	background: var(--tsp-deep-dk); color: #fff;
	transition: opacity .8s ease, visibility 0s linear .8s, transform .9s cubic-bezier(.7, 0, .2, 1);
	animation: tsp-pre-safety .5s ease 4.6s forwards;
}
html.js .tsp-pre.is-out { opacity: 0; visibility: hidden; transform: translateY(-2.5%); }
.tsp-pre__in { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; padding-inline: 1.5rem; text-align: center; }
.tsp-pre__crest { width: 132px; height: 132px; object-fit: contain; opacity: 0; transform: scale(.94); animation: tsp-pre-in .9s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
.tsp-pre__line { display: block; width: 168px; height: 2px; background: linear-gradient(90deg, var(--tsp-dune), var(--tsp-coral), var(--tsp-dune)); transform: scaleX(0); transform-origin: left center; animation: tsp-pre-line 1.3s cubic-bezier(.6, 0, .2, 1) .45s forwards; }
.tsp-pre__name { font-family: var(--tsp-display); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; opacity: 0; animation: tsp-pre-in .8s ease .8s forwards; }
.tsp-pre--nomark .tsp-pre__in { flex-direction: column-reverse; gap: 1.35rem; }
.tsp-pre--nomark .tsp-pre__name { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem); letter-spacing: -.02em; animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
	html.js .tsp-pre { display: none; }
}
.tsp-stand { background: var(--tsp-tint); padding-block: clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--tsp-line); }
.tsp-stand__say { max-width: 62rem; }
.tsp-stand__quote { margin: 1.1rem 0 0; padding: 0; border: 0; }
.tsp-stand__say > .tsp-stand__quote:first-child { margin-top: 0; }
.tsp-stand__quote p {
	margin: 0; font-family: var(--tsp-display); font-weight: 400; color: var(--tsp-ink);
	font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
.tsp-stand__quote p::before { content: '\201C'; color: var(--tsp-coral); }
.tsp-stand__quote p::after { content: '\201D'; color: var(--tsp-coral); }
.tsp-stand__by { margin-top: 1.1rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tsp-muted); }
.tsp-stand__facts {
	list-style: none; margin: clamp(2rem, 4vw, 3.25rem) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tsp-ink);
}
.tsp-stand__facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tsp-stand__facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
.tsp-stand__facts--1 { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.tsp-stand__facts li { padding: 1.4rem 1.5rem 0 0; }
.tsp-stand__facts li + li { padding-left: 1.5rem; border-left: 1px solid var(--tsp-line); }
.tsp-stand__label { position: relative; display: block; padding-bottom: .7rem; font-family: var(--tsp-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.01em; color: var(--tsp-ink); }
.tsp-stand__label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--tsp-coral); transform-origin: left center; }
.tsp-stand__note { display: block; margin-top: .7rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tsp-muted); }
@media (max-width: 760px) {
	.tsp-stand__facts, .tsp-stand__facts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsp-stand__facts li { padding: 1.1rem .75rem 1.1rem 0; }
	.tsp-stand__facts li + li { padding-left: 0; border-left: 0; }
	.tsp-stand__facts li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--tsp-line); }
	.tsp-stand__facts li:nth-child(n+3) { border-top: 1px solid var(--tsp-line); }
	.tsp-stand__label { font-size: 1.45rem; }
}
.tsp-stand.is-armed .tsp-stand__w { opacity: .2; transition: opacity .28s ease; will-change: opacity; }
.tsp-stand.is-armed .tsp-stand__facts { position: relative; border-top-color: transparent; }
.tsp-stand.is-armed .tsp-stand__facts::before {
	content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--tsp-ink);
	transform: scaleX(0); transform-origin: left center; transition: transform 1.3s cubic-bezier(.6, 0, .2, 1);
}
.tsp-stand.is-armed.is-in .tsp-stand__facts::before { transform: scaleX(1); }
.tsp-stand.is-armed .tsp-stand__facts li { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.tsp-stand.is-armed.is-in .tsp-stand__facts li { opacity: 1; transform: none; }
.tsp-stand.is-armed.is-in .tsp-stand__facts li:nth-child(1) { transition-delay: .25s; }
.tsp-stand.is-armed.is-in .tsp-stand__facts li:nth-child(2) { transition-delay: .4s; }
.tsp-stand.is-armed.is-in .tsp-stand__facts li:nth-child(3) { transition-delay: .55s; }
.tsp-stand.is-armed.is-in .tsp-stand__facts li:nth-child(4) { transition-delay: .7s; }
.tsp-stand.is-armed .tsp-stand__label::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.6, 0, .2, 1); }
.tsp-stand.is-armed.is-in li:nth-child(1) .tsp-stand__label::after { transform: scaleX(1); transition-delay: .7s; }
.tsp-stand.is-armed.is-in li:nth-child(2) .tsp-stand__label::after { transform: scaleX(1); transition-delay: .85s; }
.tsp-stand.is-armed.is-in li:nth-child(3) .tsp-stand__label::after { transform: scaleX(1); transition-delay: 1s; }
.tsp-stand.is-armed.is-in li:nth-child(4) .tsp-stand__label::after { transform: scaleX(1); transition-delay: 1.15s; }
.tsp-stand .tsp-stand__in[data-tsp-reveal] { opacity: 1; transform: none; }

/* The header/sitewide half of every rule the hero shares with the
   button. keep_sel() drops these with their hero sibling, and without
   them the one-button rule stops at the hero (janet-mccarthy, 2026-10-12). */
.tsp-btn--accent, .tsp-header .tsp-btn.tsp-btn--sm {
	background: linear-gradient(var(--tsp-coral-br), var(--tsp-coral-dk)) !important;
	background-size: auto !important; background-repeat: no-repeat !important;
	border: 1px solid var(--tsp-btn-rim) !important;
	border-radius: 9px;
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(10, 11, 12, .2) !important;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease;
}
.tsp-btn--accent:hover, .tsp-header .tsp-btn.tsp-btn--sm:hover {
	transform: translateY(-2px); filter: brightness(1.08);
	box-shadow: 0 16px 34px rgba(10, 11, 12, .28) !important;
}
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm {
	position: relative; isolation: isolate; overflow: hidden;
	background: none !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
	box-shadow: 0 12px 30px rgba(10, 11, 12, .3) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	border-radius: 9px; font-size: .8rem; letter-spacing: .12em;
}
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm::before {
	content: ''; position: absolute; z-index: -1; inset: 0;
	background: linear-gradient(var(--tsp-coral-br), var(--tsp-coral-dk));
	opacity: .8; transition: opacity .3s ease; pointer-events: none;
}
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm::after {
	content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -60%; width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	transform: skewX(-22deg); transition: left .9s cubic-bezier(.4, 0, .2, 1); pointer-events: none;
}
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm:hover {
	filter: none;
	box-shadow: 0 18px 36px rgba(10, 11, 12, .36) !important;
}
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm:hover::before { opacity: .94; }
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-btn.tsp-btn--sm:hover::after { left: 130%; }
/* ═══════════════ end THE HILAL STANDARD (ported) ═══════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   HER OWN RULES, below THE HILAL STANDARD. Never move these above it.

   The masthead. On 2026-09-29 the bar was made her deep purple at every
   scroll position, because her logo is drawn for a dark ground and washes
   out on white. The standard wants it TRANSPARENT over the hero, and that
   still works for her: the mark carries its own purple panel, and the
   hero's ::before wash (ported, stronger than the hand-built one it
   replaced) keeps the nav readable. So the purple survives where it earns
   its place — every inner page, and the home page once you scroll — and
   the hero is full-bleed under a transparent bar, which is the look.
   ───────────────────────────────────────────────────────────────────────── */
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-header__bar {
	background: transparent;
	border-bottom-color: transparent;
}

/* The lineage's own bar wash would sit on top of the hero's ::before and the
   two would compound to near-black. One wash, and it is the standard's. */
.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-header__bar::before {
	opacity: 0;
}

/* The standing facts: two of her four labels run to two lines ("Veteran and
   woman-owned", "Houston, New Orleans, Atlanta"), which dropped their notes
   below the one-line ones and made the row ragged — trap 62's complaint about
   the figure strip, in the section that replaced it. Stretch the cells and
   push the note to the foot so the notes line up whatever the label does. */
.tsp-stand__facts li {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tsp-stand__facts .tsp-stand__note { margin-top: auto; }

/* THE LOCKUP OVER THE PHOTOGRAPH, on a phone.
   Scored over all three phone crops (tmp/tanesha/hilal-score.py, which reads
   the scrim and the text boxes off the live page because the September scorer
   modelled the old left-aligned hero — trap 16): every block passed except her
   gold subline, at 3.18 / 3.51 / 4.30 against 4.5. It is the one line in the
   masthead that is not white, and trap 66 is explicit that scoring it as white
   overstates it by about a stop.

   Two ways out were measured. Darkening the masthead wash enough to carry the
   gold needs its top stop at .78 — a near-black bar across the top of the
   photograph, and trap 42 already records .72 as looking like one. Setting the
   line WHITE passes on the wash as it is, costs no photograph, and matches the
   logo's own "Realtor Group, LLC", which is white: the lockup simply reads as
   one piece over the picture. The gold stays everywhere it earns its place —
   every inner page, and the home page once the purple bar arrives — where it
   sits on her deep purple at 9.7:1.

   The small lift of the wash is for the lockup's margin only; the kicker and
   the claim sit below where it has faded to nothing, so it cannot help them
   and they pass on the hero scrim (1.08 and 1.10 of the requirement). */
@media (max-width: 900px) {

	.tsp-mast--transparent.tsp-home .tsp-header:not(.is-solid) .tsp-logo__sub {
		color: #fff;
	}

	.tsp-mast--transparent.tsp-home .tsp-hero6::before {
		background: linear-gradient(to bottom,
			rgba(16, 18, 22, .67) 0,
			rgba(16, 18, 22, .58) calc(var(--tsp-header-h) * .7),
			rgba(16, 18, 22, .31) var(--tsp-header-h),
			rgba(16, 18, 22, .11) calc(var(--tsp-header-h) + 3rem),
			rgba(16, 18, 22, 0) 100%);
	}
}

/* THE PRELOADER CARRIES HER FULL LOGO, not the emblem.
   Adam, 2026-10-13: "put her full logo on the preloader, i think its the one
   in the footer..." — it is: assets/img/logo-mark.png, the file footer.php
   renders, now copied to preloader-mark.png padded square.

   Two things follow from the swap, and neither is optional:

   1. The lockup already says REALTOR GROUP, LLC, so the cover's own name line
      (profile()['brand_word'], printed by the ported Hilal block) repeated the
      wordmark directly under a picture of it. It goes.
   2. 132px was sized for an emblem. Her lockup's smallest line —
      "Commercial/Residential Services" — is 28px of a 592px file, so at 132 it
      renders about 6px tall and turns to mush, which is trap 3 happening on
      the first thing a prospect sees. At 260 it is about 12px and reads.

   Capped by viewport width too: on a 390px phone a 260px mark with the
   lockup's own internal margins is close to edge to edge. */
.tsp-pre__crest {
	width: min(260px, 62vw);
	height: auto;
}

.tsp-pre:not(.tsp-pre--nomark) .tsp-pre__name { display: none; }
/* Scoped, not blanket: with no mark file the ported block adds .tsp-pre--nomark
   and the cover becomes the line and the NAME. Hiding the name unconditionally
   would make that fallback an empty purple screen — a branch no working site
   ever renders, which is exactly the kind that survives a theme copy (trap 6). */

/* The rule was 168px under a 132px emblem; it keeps its proportion under the
   wider mark rather than reading as a short dash. */
.tsp-pre__line { width: min(210px, 50vw); }

/* ─────────────────────────────────────────────────── HER SOCIAL PROFILES
   Adam, 2026-10-13, after her call: the profiles with their icons, in the
   footer "pretty prominently" and in a couple of other places. One rule set,
   three placements (footer / contact aside / her own page), because
   tsp_social_links() renders the same markup everywhere.

   Discs rather than bare glyphs: they sit on three different grounds (the
   dark footer, the warm contact aside, white) and a bare mark gets lost on at
   least one of them. The ring is her gold, which is what the rest of the site
   uses to say "this is a thing you press". */
.tsp-social { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.tsp-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 1px solid var(--tsp-dune);
	color: var(--tsp-deep);
	background: transparent;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.tsp-social__link:hover,
.tsp-social__link:focus-visible {
	background: var(--tsp-dune);
	border-color: var(--tsp-dune);
	color: #fff;
	transform: translateY(-1px);
}
.tsp-social .tsp-icon { width: 17px; height: 17px; }

/* Zillow has no mark in the set, so its initial IS the mark and has to sit on
   the same optical baseline as the drawn ones. */
.tsp-social__word {
	font-family: var(--tsp-display);
	font-size: 1.02rem;
	line-height: 1;
}

/* LABELLED (the contact page): the disc opens into a pill. */
.tsp-social--labelled { flex-direction: column; align-items: stretch; gap: .45rem; }
.tsp-social--labelled .tsp-social__link {
	width: auto;
	height: auto;
	justify-content: flex-start;
	/* .5rem gave a 41px pill. Touch targets want 44 (measured, not guessed). */
	padding: .62rem .95rem;
	border-radius: 999px;
	min-height: 44px;
}
.tsp-social__label { font-size: .84rem; letter-spacing: .04em; }

/* IN THE FOOTER the ground is her deep purple, so the marks are light and the
   row is given real space — this is the "prominently" half of the ask. */
.tsp-social--foot { margin-top: 1.5rem; gap: .7rem; }
.tsp-social--foot .tsp-social__link {
	width: 3.1rem;
	height: 3.1rem;
	border-color: rgba(224, 206, 166, .42);
	color: var(--tsp-accent-lt);
}
.tsp-social--foot .tsp-social__link:hover,
.tsp-social--foot .tsp-social__link:focus-visible {
	background: var(--tsp-accent-lt);
	border-color: var(--tsp-accent-lt);
	color: var(--tsp-deep);
}

.tsp-social--agent { margin: 0 0 1.3rem; }

@media (max-width: 640px) {
	/* Thumb-sized in the footer, which is where a phone visitor meets them. */
	.tsp-social--foot .tsp-social__link { width: 3rem; height: 3rem; }
	.tsp-social--foot { justify-content: flex-start; }
}

/* ═══════ THE HERO DOES NOT FLASH (2026-10-13; themes/CLAUDE.md trap 129) ═══════
   Adam: "his hero container that holds his name is flashing on the animation
   and this has been an ongoing issue." Two causes, found on 2026-10-12 by
   switching one effect off at a time on his device (melissa-dalton,
   debbie-adams); no capture on the build machine shows either.

   1. THE NAME. Each letter used to animate its COLOR and a blurred shadow,
      which repaints the whole headline block every frame, while the Ken Burns
      photographs were already moving underneath. Now nothing is repainted:
      a letter is the palette's light tint and fades in by OPACITY on its own
      layer; a white copy of the same glyph (::after, from data-ch) fades in
      over it a moment later. And the photographs do not start moving until
      the name has finished (html.tsp-kbgo, added by the script at the end of
      functions.php about 3s after the cover lifts, or after 9s whatever
      happens). Paused, a frame sits exactly where its animation begins.

   2. THE VIDEO ARRIVING. On desktop the loop faded in over a still of another
      place, and the shade snapped to the video's strength in the same frame
      (a gradient does not transition). With a video (.tsp-hero6--video) the
      picture under it is the video's own first frame (front-page.php,
      hero-video-poster.jpg), the other stills are off on desktop, and the
      shade is ONE strength before and after. Re-score the text on your loop. */
html.js .tsp-front .tsp-hero6__ltr {
	animation: none !important;
	position: relative;
	color: #fff;
	text-shadow: 0 2px 24px rgba(10, 12, 16, .35);
}
@media (prefers-reduced-motion: no-preference) {
	html.js .tsp-front .tsp-hero6__ltr {
		color: var(--tsp-btn-glow, #fff);
		opacity: .14;
		will-change: opacity;
		transition: opacity .5s ease-out;
		transition-delay: calc(.15s + var(--i, 0) * var(--tsp-name-step, 95ms));
	}
	html.js .tsp-front .tsp-hero6__ltr::after {
		content: attr(data-ch);
		position: absolute; left: 0; top: 0;
		color: #fff;
		text-shadow: none;
		opacity: 0;
		will-change: opacity;
		transition: opacity .6s ease-out;
		transition-delay: calc(.6s + var(--i, 0) * var(--tsp-name-step, 95ms));
	}
	html.js.tsp-go .tsp-front .tsp-hero6__ltr,
	html.js.tsp-go .tsp-front .tsp-hero6__ltr::after { opacity: 1; }
	html.js:not(.tsp-kbgo) .tsp-front .tsp-hero__kb.is-live .tsp-hero__frame { animation-play-state: paused; }
}
@media (min-width: 901px) {
	.tsp-front .tsp-hero6.tsp-hero6--video .tsp-hero__scrim,
	.tsp-front .tsp-hero6.tsp-hero6--video .tsp-hero__video.is-ready ~ .tsp-hero__scrim {
		background: radial-gradient(ellipse 62% 58% at 50% 52%, rgba(12, 18, 22, .5) 0%, rgba(12, 18, 22, .4) 55%, rgba(12, 18, 22, .16) 100%), linear-gradient(to bottom, rgba(12, 18, 22, .08) 0%, rgba(12, 18, 22, .14) 26%, rgba(12, 18, 22, .14) 40%, rgba(12, 18, 22, .04) 60%, rgba(12, 18, 22, .12) 100%);
		transition: none;
	}
	.tsp-front .tsp-hero6--video .tsp-hero__frame:not(:first-child) { display: none; }
	.tsp-front .tsp-hero6--video .tsp-hero__kb .tsp-hero__frame:first-child { animation: none; opacity: 1; transform: none; }
}
/* ═══════ end THE HERO DOES NOT FLASH ═══════ */


/* ═══════════════════════════════════════════════════════════════════════════
   THE REVIEW CARDS AND HOME LISTINGS — ported 2026-10-15 from themes/andrew-millar.

   Adam: "improve taneshas testimonials and properties to the new template."
   The home page's reviews were a grid of serif quote figures with five stars
   hardcoded into the markup; they are now the ROUND 5 colored cards, one bold
   card in her purple and pale washes of her gold around it. Her featured
   listings had NO section on the home page at all and now have one.

   Extracted by tmp/tanesha/reviews/apply.py: every rule whose selector
   mentions rv, rvc, list3, list5, clamp, more, h5 or quote, in source order
   with the media wrappers, and every old .tsp-quote* rule here removed first
   (traps 51, 101, 130).

   A build's own rules go BELOW the end marker.
   ═══════════════════════════════════════════════════════════════════════════ */

.tsp-quote {
	margin: 0;
	padding: 1.9rem 1.6rem;
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 8px;
}
.tsp-quote__stars { color: var(--tsp-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.tsp-quote blockquote { margin: 0 0 1.1rem; color: var(--tsp-body); }
.tsp-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.tsp-quote__name { font-family: var(--tsp-display); font-weight: 400; color: var(--tsp-ink); font-size: .92rem; }
.tsp-quote__via { font-size: .8rem; color: var(--tsp-faint); }
.tsp-quote__via--google {
	display: inline-flex;
	align-items: center;
	gap: .32em;
}
.tsp-quote__via--google > span { line-height: 1; }
.tsp-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--tsp-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tsp-quote__full[hidden] { display: none; }
.tsp-rev3__card .tsp-quote__stars { color: var(--tsp-gold); position: relative; }
.tsp-quote__stars { color: var(--tsp-dune-dk); }
.tsp-rev3__card .tsp-quote__stars { color: var(--tsp-dune-dk); }
html.tsp-clamp .tsp-rev4__text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
html.tsp-clamp .tsp-rev3__card--lead .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
@media (max-width: 900px) {
	html.tsp-clamp .tsp-rev3__card--lead .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 6; line-clamp: 6; }
	.tsp-rev4__card:not(.tsp-rev3__card--lead) .tsp-quote__stars { margin-bottom: .45rem; font-size: .85rem; }
	html.tsp-clamp .tsp-rev4__card:not(.tsp-rev3__card--lead) .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
}
.tsp-h5 {
	font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	max-width: 20ch;
	text-wrap: balance;
}
@media (min-width: 641px) {
	.tsp-list5 { padding-block: var(--tsp-band5); }
}
.tsp-list5 { background: var(--tsp-shell); }
.tsp-intro5__head .tsp-h5 { max-width: 18ch; }
.tsp-rev5__head .tsp-quote__stars { margin: .9rem 0 0; font-size: .95rem; letter-spacing: .3em; }
html.tsp-clamp .tsp-rev5__lead .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
html.tsp-clamp .tsp-rev5__card .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 3; line-clamp: 3; }
.tsp-rev5 .tsp-quote__name { font-family: var(--tsp-display); font-size: 1.15rem; color: var(--tsp-ink); }
.tsp-rev5 .tsp-quote__via { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tsp-muted); }
@media (max-width: 900px) {
	.tsp-rev5__head .tsp-quote__stars { grid-column: 2; grid-row: 3; margin: .3rem 0 0; align-self: start; }
	html.tsp-clamp .tsp-rev5__lead .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 5; line-clamp: 5; }
	html.tsp-clamp .tsp-rev5__card .tsp-rev4__text:not(.is-open) { -webkit-line-clamp: 3; line-clamp: 3; }
}
.tsp-list5 .tsp-head--split { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.tsp-list5 .tsp-kick5 { margin-bottom: 1.1rem; }
.tsp-list5 .tsp-slider__btn { width: 3rem; height: 3rem; background: transparent; border-color: var(--tsp-ink); color: var(--tsp-ink); }
.tsp-list5 .tsp-slider__btn:hover { background: var(--tsp-ink); border-color: var(--tsp-ink); color: #fff; }
.tsp-list5 .tsp-slider__btn[disabled], .tsp-list5 .tsp-slider__btn[disabled]:hover { background: transparent; border-color: var(--tsp-line); color: var(--tsp-faint); opacity: 1; }
.tsp-list5 .tsp-slider__controls { gap: .6rem; }
.tsp-list5 .tsp-slider__controls .tsp-btn { margin-left: .9rem; }
.tsp-list5 .tsp-slider__track { scrollbar-width: none; padding: 0; margin-inline: 0; scroll-padding-inline: 0; }
.tsp-list5 .tsp-slider__track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
	.tsp-list5 .tsp-slider__track { grid-auto-columns: calc((100% - 4rem) / 2.3); gap: 2rem; }
}
.tsp-list5 .tsp-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.tsp-list5 .tsp-card:hover { transform: none; box-shadow: none; }
.tsp-list5 .tsp-card__media { overflow: hidden; border-radius: var(--tsp-radius5); }
.tsp-list5 .tsp-figure--wide { aspect-ratio: 3 / 2; }
.tsp-list5 .tsp-card__media img { transition: transform 1.6s var(--tsp-ease); }
.tsp-list5 .tsp-card:hover .tsp-card__media img { transform: scale(1.05); }
.tsp-list5 .tsp-card__status {
	top: 1rem; left: 1rem;
	padding: .35rem .6rem;
	border-radius: 2px;
	background: rgba(255, 255, 255, .92);
	color: var(--tsp-ink);
	font-family: var(--tsp-body-font);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
}
.tsp-list5 .tsp-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.5rem;
	row-gap: .45rem;
	align-items: baseline;
	padding: 1.2rem 0 0;
}
.tsp-list5 .tsp-card__title { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.1; }
.tsp-list5 .tsp-card__price { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.1; color: var(--tsp-brand); }
.tsp-list5 .tsp-card__addr, .tsp-list5 .tsp-card__specs {
	margin: 0; padding: 0; border: 0;
	font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--tsp-muted);
}
.tsp-list5 .tsp-card__addr { grid-column: 1; grid-row: 2; }
.tsp-list5 .tsp-card__specs { grid-column: 2; grid-row: 2; gap: 0; justify-content: flex-end; }
.tsp-list5 .tsp-card__addr .tsp-icon, .tsp-list5 .tsp-card__specs .tsp-icon { display: none; }
.tsp-list5 .tsp-card__specs li + li::before { content: '\00B7'; margin-inline: .55em; }
@media (max-width: 640px) {
	.tsp-list5 .tsp-head--split { margin-bottom: 1.4rem; }
	.tsp-list5 .tsp-slider__btn { width: 2.75rem; height: 2.75rem; }
	.tsp-list5 .tsp-card__body { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; padding-top: .9rem; }
	.tsp-list5 .tsp-card__price { grid-column: 1; grid-row: 1; font-size: 1.5rem; }
	.tsp-list5 .tsp-card__title { grid-row: 2; font-size: 1.3rem; }
	.tsp-list5 .tsp-card__addr { grid-row: 3; margin-top: .2rem; }
	.tsp-list5 .tsp-card__specs { grid-column: 1; grid-row: 4; justify-content: flex-start; }
	.tsp-list5 .tsp-card__addr, .tsp-list5 .tsp-card__specs { letter-spacing: .14em; }
}
.tsp-spec5__intro .tsp-h5 { max-width: 16ch; }
@media (max-width: 640px) {
	.tsp-h5, .tsp-intro5__head .tsp-h5, .tsp-spec5__intro .tsp-h5 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tsp-list5 .tsp-card__media img { transition: none; }
	.tsp-list5 .tsp-card:hover .tsp-card__media img { transform: none; }
}
@media (max-width: 900px) {
	.tsp-rev5__head .tsp-rev5__plain ~ .tsp-quote__stars { grid-column: 1 / -1; grid-row: auto; }
}
.tsp-head h2:not(.tsp-h5) {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.06;
	letter-spacing: -.02em;
}
@media (min-width: 901px) {
	.tsp-list5 { overflow-x: clip; }
	.tsp-list5 .tsp-slider__track {
		margin-right: calc(-1 * max(var(--tsp-gutter), (100vw - var(--tsp-wrap)) / 2 + var(--tsp-gutter)));
		padding-right: var(--tsp-gutter);
		scroll-padding-right: var(--tsp-gutter);
	}
}
@media (max-width: 640px) {
	.tsp-list5 .tsp-card__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
	.tsp-list5 .tsp-card__price, .tsp-list5 .tsp-card__title, .tsp-list5 .tsp-card__specs { grid-column: 1 / -1; }
	.tsp-list5 .tsp-card__addr { grid-column: 1; }
	.tsp-list5 .tsp-card__repd { grid-column: 2; grid-row: 3; align-self: end; margin: 0; white-space: nowrap; }
	.tsp-list5 { padding-bottom: 2rem; }
}
@media (min-width: 641px) {
	.tsp-rv { padding-block: var(--tsp-band5); }
	.tsp-rv.tsp-rv--page { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--tsp-band5); }
}
.tsp-rv.tsp-rv--page { padding-top: 2rem; }
.tsp-rv__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "grid" "more";
}
.tsp-rv__head { grid-area: head; min-width: 0; margin-bottom: 1.25rem; }
.tsp-rv__grid { grid-area: grid; }
.tsp-rv .tsp-rv__more { grid-area: more; margin: 0; padding-top: 1rem; }
.tsp-rv__head .tsp-kick5 { margin-bottom: .75rem; }
.tsp-rv__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; }
.tsp-rv__total {
	margin: 0;
	font-family: var(--tsp-display);
	font-weight: 400;
	font-size: clamp(2.75rem, 1.5rem + 3.6vw, 4.5rem);
	line-height: .95;
	letter-spacing: -.025em;
	color: var(--tsp-ink);
}
.tsp-rv__total strong { font-weight: 400; color: var(--tsp-coral-dk); }
.tsp-rv__plain { margin: 0; }
.tsp-rv__stars {
	flex: none;
	font-size: 1.1rem;
	line-height: 1;
	letter-spacing: .14em;
	color: var(--tsp-coral-dk);
	white-space: nowrap;
	transform: translateY(-.2em);
}
.tsp-rv__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	min-height: 52px;
	padding: 0 1.25rem;
	border: 1px solid var(--tsp-ink);
	border-radius: 999px;
	font-family: var(--tsp-body-font);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--tsp-ink);
	transition: background-color .25s var(--tsp-ease), color .25s var(--tsp-ease);
}
.tsp-rv__all .tsp-arrow5 { width: 22px; }
@media (hover: hover) {
	.tsp-rv__all:hover { background: var(--tsp-ink); color: #fff; }
	.tsp-rv__all:hover .tsp-arrow5 { transform: translateX(4px); }
}
.tsp-rv__all:focus-visible { outline: 3px solid var(--tsp-brand); outline-offset: 3px; }
.tsp-rvc {
	--rv-bg: #fff;
	--rv-line: transparent;
	--rv-ink: var(--tsp-ink);
	--rv-meta: var(--tsp-body);
	--rv-accent: var(--tsp-brand);
	--rv-on-accent: #fff;
	--rv-star: var(--tsp-rv-star);
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 1.5rem;
	border: 1px solid var(--rv-line);
	border-radius: 16px;
	background: var(--rv-bg);
	color: var(--rv-ink);
}
.tsp-rvc--c1 {
	--rv-bg: var(--tsp-rvb-bg); --rv-line: var(--tsp-rvb-bg);
	--rv-ink: var(--tsp-rvb-ink); --rv-meta: var(--tsp-rvb-ink);
	--rv-accent: var(--tsp-rvb-ink); --rv-on-accent: var(--tsp-rvb-bg);
	--rv-star: var(--tsp-rvb-ink);
}
.tsp-rvc--c2 { --rv-bg: var(--tsp-rvs2-bg); --rv-line: var(--tsp-rvs2-line); --rv-accent: var(--tsp-rvs2-accent); }
.tsp-rvc--c3 { --rv-bg: var(--tsp-rvs3-bg); --rv-line: var(--tsp-rvs3-line); --rv-accent: var(--tsp-rvs3-accent); }
.tsp-rvc--c4 { --rv-bg: var(--tsp-rvs4-bg); --rv-line: var(--tsp-rvs4-line); --rv-accent: var(--tsp-rvs4-accent); }
.tsp-rvc__top {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 1.5rem;
	margin-bottom: .85rem;
}
.tsp-rvc__stars { font-size: 1rem; line-height: 1; letter-spacing: .12em; color: var(--rv-star); white-space: nowrap; }
.tsp-rvc__mark {
	margin-left: auto;
	font-family: var(--tsp-display);
	font-size: 4.5rem;
	line-height: 1;
	height: 1.5rem;
	color: var(--rv-accent);
	opacity: .55;
}
.tsp-rvc__text {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	font-family: var(--tsp-body-font);
	font-style: normal;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--rv-ink);
	overflow-wrap: break-word;
}
.tsp-rvc__more {
	margin: -.9rem 0 .75rem;
	padding: 0;
	min-height: 44px;
	background: none;
	border: 0;
	font: inherit;
	font-family: var(--tsp-body-font);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--rv-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	cursor: pointer;
}
.tsp-rvc__more[hidden] { display: none; }
.tsp-rvc__more:focus-visible { outline: 2px solid var(--rv-ink); outline-offset: 2px; border-radius: 4px; }
.tsp-rvc__by {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}
.tsp-rvc__av {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 50%;
	background: var(--rv-accent);
	color: var(--rv-on-accent);
	font-family: var(--tsp-body-font);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1;
}
.tsp-rvc__who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tsp-rvc .tsp-quote__name { font-family: var(--tsp-body-font); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--rv-ink); }
.tsp-rvc .tsp-quote__via { font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; color: var(--rv-meta); }
.tsp-rvc .tsp-gmark { box-sizing: content-box; width: .95em; height: .95em; padding: 2px; border-radius: 50%; background: #fff; transform: none; }
.tsp-rv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
html.tsp-clamp .tsp-rvc__text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
html.tsp-clamp .tsp-rvc--lead .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 6; line-clamp: 6; }
html.tsp-clamp .tsp-rv__grid--all .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
@media (max-width: 640px) {
	.tsp-rv:not(.tsp-rv--page) .tsp-rv__grid > .tsp-rvc:nth-child(n+4) { display: none; }
}
@media (min-width: 641px) {
	.tsp-rv__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head more" "grid grid"; column-gap: 1.5rem; }
	.tsp-rv--page .tsp-rv__in { display: block; }
	.tsp-rv__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
	.tsp-rv__head .tsp-kick5 { margin-bottom: 1rem; }
	.tsp-rv .tsp-rv__more { align-self: end; margin: 0; padding-bottom: calc(clamp(1.5rem, 3vw, 2.5rem) + .5rem); }
	.tsp-rv__all { display: inline-flex; min-height: 46px; font-size: .9rem; }
	.tsp-rv__stars { font-size: 1.2rem; }
	.tsp-rv__grid { gap: 1rem; }
	.tsp-rvc { padding: 1.75rem; border-radius: 18px; }
	.tsp-rv__grid--n2, .tsp-rv__grid--n3, .tsp-rv__grid--n4, .tsp-rv__grid--n5, .tsp-rv__grid--n6, .tsp-rv__grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsp-rv__grid--n3 > .tsp-rvc--lead, .tsp-rv__grid--n5 > :first-child { grid-column: 1 / -1; }
	.tsp-rv__grid--n1 { grid-template-columns: minmax(0, 52rem); }
	.tsp-rvc--lead { padding: clamp(1.75rem, 3.2vw, 2.5rem); }
	.tsp-rvc--lead .tsp-rvc__text { font-size: clamp(1.2rem, .85rem + .75vw, 1.5rem); line-height: 1.48; letter-spacing: -.008em; }
	.tsp-rvc--lead .tsp-rvc__mark { font-size: 6rem; }
	html.tsp-clamp .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 5; line-clamp: 5; }
	html.tsp-clamp .tsp-rvc--lead .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
	html.tsp-clamp .tsp-rv__grid--n2 .tsp-rvc__text:not(.is-open), html.tsp-clamp .tsp-rv__grid--all .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 7; line-clamp: 7; }
}
@media (min-width: 1041px) {
	.tsp-rv__grid { gap: 1.25rem; }
	.tsp-rvc { padding: 2rem; }
	.tsp-rv__grid--n3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
	.tsp-rv__grid--n3 > .tsp-rvc--lead { grid-column: 1; grid-row: 1 / span 2; }
	html.tsp-clamp .tsp-rv__grid--n3 .tsp-rvc--lead .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 9; line-clamp: 9; }
	html.tsp-clamp .tsp-rv__grid--n3 .tsp-rvc:not(.tsp-rvc--lead) .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 4; line-clamp: 4; }
	.tsp-rv__grid--n5, .tsp-rv__grid--n6, .tsp-rv__grid--all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tsp-rv__grid--n5 > :first-child { grid-column: span 2; }
	.tsp-rv--one .tsp-rv__in {
		grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
		grid-template-areas: "head grid" "more grid";
		column-gap: clamp(2rem, 5vw, 5rem);
	}
	.tsp-rv--one .tsp-rv__head { align-self: end; margin-bottom: 1.5rem; }
	.tsp-rv.tsp-rv--one .tsp-rv__more { align-self: start; margin: 0; padding: 0; }
	.tsp-rv--one .tsp-rv__grid--n1 { grid-template-columns: minmax(0, 1fr); }
	html.tsp-clamp .tsp-rv__grid--n1 .tsp-rvc__text:not(.is-open) { -webkit-line-clamp: 8; line-clamp: 8; }
}
@media (prefers-reduced-motion: reduce) {
	.tsp-rv__all, .tsp-rv__all .tsp-arrow5 { transition: none; }
	.tsp-rv__all:hover .tsp-arrow5 { transform: none; }
}
.tsp-pmore__head .tsp-h5 { margin: 0; }
.tsp-rvc--c1 { --rv-star: var(--tsp-rvb-star, var(--tsp-rvb-ink)); }
.tsp-rvc--c2 { --rv-star: var(--tsp-rvs2-star, var(--tsp-rv-star)); }
.tsp-rvc--c3 { --rv-star: var(--tsp-rvs3-star, var(--tsp-rv-star)); }
.tsp-rvc--c4 { --rv-star: var(--tsp-rvs4-star, var(--tsp-rv-star)); }
.tsp-rv__head--page { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tsp-rv--page .tsp-filters + .tsp-rv__head--page { margin-top: 1.5rem; }
@media (min-width: 901px) {
	.tsp-pg7 .tsp-list5 .tsp-slider__track:has(> .tsp-slider__slide:nth-child(2):last-child) {
		grid-auto-columns: calc((100% - 2rem) / 2);
		margin-right: 0; padding-right: 0;
	}
	.tsp-pg7 .tsp-list5 .tsp-slider__track:has(> .tsp-slider__slide:only-child) {
		grid-auto-columns: min(100%, 52rem);
		margin-right: 0; padding-right: 0;
	}
}
.tsp-rv__all { min-height: 48px; }
.tsp-cards.tsp-list5 { padding-block: 0; overflow: visible; }
@media (min-width: 900px) {
	.tsp-list5 .tsp-slider--one .tsp-slider__track { grid-auto-columns: minmax(0, 34rem); }
}
.tsp-rv--one .tsp-rv__plain { max-width: none; }
/* ═══════════ end THE REVIEW CARDS AND HOME LISTINGS ═══════════ */

/* HER REVIEW-CARD PALETTE.
   The ported ROUND 5 rules read --<x>-rvb-* and --<x>-rvs2/3/4-*, which
   set-palette.py writes into :root. The port harvests rules by SELECTOR, and
   :root is not one, so every card first came across colorless: white cards
   with black text, which is the one thing the round-5 treatment exists to
   replace (trap 101 — a ported fix arriving without the line that makes it
   work).

   Declared by hand because set-palette.py cannot run twice on a finished
   theme (trap 31). HER colors, not the parent's teal, salmon and sage.

   SECOND PASS, 2026-10-15. Adam: "better colors for the testimonials." The
   first set was pale to the point of looking unfinished — three near-whites
   with a tint in them. These carry real color: the bold card is her purple,
   then her lilac, her gold and the sand off the same ramp, each deep enough
   to read as a chosen color rather than a wash.

   Measured, not eyeballed. Text pairs held to 4.5:1 and the stars, which are
   graphics, to 3:1, as the parent's own note requires:

     lead   ink 12.89  star 9.20
     lilac  ink  9.10  star 4.76
     gold   ink  6.74  star 3.91
     sand   ink  6.90  star 4.11 */
:root {
	--tsp-rvb-bg:       #4F1C55;
	--tsp-rvb-ink:      #FFFFFF;
	--tsp-rvb-star:     #E8D9B2;

	--tsp-rvs2-bg:      #DCCCE6;
	--tsp-rvs2-accent:  #3E2149;
	--tsp-rvs2-line:    #DCCCE6;
	--tsp-rvs2-star:    #6B4B78;

	--tsp-rvs3-bg:      #F2E4C0;
	--tsp-rvs3-accent:  #5E4A18;
	--tsp-rvs3-line:    #F2E4C0;
	--tsp-rvs3-star:    #8A6C22;

	--tsp-rvs4-bg:      #E7DAC2;
	--tsp-rvs4-accent:  #55431A;
	--tsp-rvs4-line:    #E7DAC2;
	--tsp-rvs4-star:    #7E6328;

	--tsp-rv-star:      #8A6C22;
}

/* TWO TOKENS THE PORTS REFERENCE AND NEVER BROUGHT.
   Adam, 2026-10-15: "recent closings section has no spaing above or below it."
   It had `padding-block: var(--tsp-band5)` and --tsp-band5 was declared
   nowhere, so the declaration was invalid at computed-value time and the
   padding resolved to 0 — on BOTH new sections, reviews and listings, while
   every older section sat at 112px.

   This is the third time in this theme that a block ported by selector left a
   :root token behind (trap 101): the review-card colors, the clamp script,
   and now the band. The sweep that finds all of them at once is every
   `var(--tsp-*)` in the sheet minus every `--tsp-*:` declared in it — five of
   the seven hits are set inline on the element by front-page.php and carry
   fallbacks, and these two were the real ones. Worth re-running after any
   port. */
:root {
	--tsp-band5:   clamp(5rem, 9vw, 8.5rem);
	--tsp-radius5: 6px;
}


/* ───────────────────────────────── MEET THE AGENT (SLEEK HOME 2026-10-04)
   Adam, 2026-10-15: "i think we can greatly improve the Welcome / Real estate
   is personal. section to be better more like our newer meet your agent
   sections... color, etc."

   Her Welcome was a plain two-column split: a photograph, a heading, a
   paragraph and a text link. The current treatment puts the portrait in an
   offset COLOR frame, sets her name very large, carries the role and firm on
   one small line, caps the bio and adds hairline badges and the one button.

   Only .meet3 and .meet5 came across — split, figure, prose, h5 and kick5 are
   already here from the lineage, so harvesting them again would have put two
   generations of the same rules in one sheet (trap 51). */
.tsp-meet3__media { position: relative; }
.tsp-meet3__media .tsp-figure { overflow: visible; }
.tsp-meet3__media img { border-radius: 10px; box-shadow: 18px 18px 0 0 var(--tsp-gold), 0 24px 48px -28px rgba(16, 18, 22, .55); }
.tsp-meet3 h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.tsp-meet3__badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.5rem; margin: 1.6rem 0 .4rem; }
.tsp-meet3__badges li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; color: var(--tsp-ink); font-size: .95rem; line-height: 1.35; }
.tsp-meet3__badges .tsp-li {
	flex: none; width: 1.45rem; height: 1.45rem; padding: .28rem; border-radius: 50%;
	background: var(--tsp-accent); color: #fff; stroke-width: 2.6;
}
@media (max-width: 640px) {
	.tsp-meet3__badges { grid-template-columns: minmax(0, 1fr); }
	.tsp-meet3__media img { box-shadow: 10px 10px 0 0 var(--tsp-gold); }
}
@media (min-width: 641px) {
	.tsp-meet5 { padding-block: var(--tsp-band5); }
}
.tsp-meet5 { background: var(--tsp-shell); }
.tsp-meet5 .tsp-split {
	grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
	gap: clamp(3rem, 8vw, 8rem);
}
.tsp-meet5 .tsp-split__media--portrait { max-width: 31rem; margin-inline: 0; }
.tsp-meet5__media img {
	border-radius: var(--tsp-radius5);
	box-shadow: 14px 14px 0 0 var(--tsp-gold);
}
.tsp-meet5 .tsp-split__media--portrait img {
	aspect-ratio: 5 / 7;
	object-fit: cover;
}
.tsp-meet5 .tsp-meet5__name { max-width: none; font-size: clamp(2.6rem, 1.5rem + 4vw, 4.75rem); line-height: .98; }
.tsp-meet5__firm {
	margin: .9rem 0 1.6rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}
.tsp-meet5 .tsp-prose { max-width: 46ch; font-size: clamp(1rem, .95rem + .28vw, 1.15rem); line-height: 1.75; }
.tsp-meet5 .tsp-prose p { margin: 0; }
.tsp-meet5__badges { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 1.9rem 0 .6rem; max-width: 30rem; border-bottom: 1px solid var(--tsp-line); }
.tsp-meet5__badges li { align-items: center; padding: .85rem 0; border-top: 1px solid var(--tsp-line); font-weight: 500; font-size: .95rem; }
.tsp-meet5__badges .tsp-li { display: none; }
@media (max-width: 900px) {
	.tsp-meet5 .tsp-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.tsp-meet5 .tsp-split__media--portrait { max-width: 19rem; margin-inline: auto; }
	.tsp-meet5__media img { box-shadow: 10px 10px 0 0 var(--tsp-gold); }
}
@media (max-width: 640px) {
	.tsp-meet5 .tsp-split__media--portrait { max-width: 15.5rem; }
	.tsp-meet5__firm { margin-bottom: 1.1rem; }
	.tsp-meet5 .tsp-prose { line-height: 1.6; }
	.tsp-meet5__badges { margin-top: 1.3rem; }
	.tsp-meet5 .tsp-split__body .tsp-btn { margin-top: 1.1rem; width: 100%; }
}
.tsp-firmcase .tsp-meet5 .tsp-meet5__firm { text-transform: none; letter-spacing: .06em; font-size: .8rem; }
.tsp-meet5 .tsp-split__media--portrait img { aspect-ratio: 4 / 5; object-position: 50% 0; }
.tsp-meet5.tsp-meet5--nophoto .tsp-split { grid-template-columns: minmax(0, 1fr); }
.tsp-meet5--nophoto .tsp-split__body { max-width: 46rem; }
.tsp-meet5__firm { text-wrap: balance; }
.tsp-meet5 .tsp-split { grid-template-columns: minmax(0, var(--tsp-portrait-max)) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6.5rem); align-items: center; max-width: calc(var(--tsp-portrait-max) + 44rem); margin-inline: auto; }
.tsp-meet5 .tsp-split__media--portrait { max-width: var(--tsp-portrait-max); }
@media (max-width: 900px) {
	.tsp-meet5 .tsp-split { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
	.tsp-meet5 .tsp-split__media--portrait { max-width: min(19rem, calc(var(--tsp-portrait-max) * .68)); }
}
@media (max-width: 640px) {
	.tsp-meet5 .tsp-split__media--portrait { max-width: min(15.5rem, calc(var(--tsp-portrait-max) * .615)); }
}

/* THE PORTRAIT FRAME, measured against her file.
   `--<x>-portrait-max` is the Hilal standard's one per-build size knob and it
   has NO fallback in the rules that read it, so an undefined token made the
   declaration invalid and her headshot rendered at the full column width —
   about 1000px of face across the page.

   The rule is the file's width / 2.4 (feedback_headshot_frames: never frame
   wider than the source; trap 132). tanesha.jpg is 1020x1450, so 425px /
   26.6rem, not the parent's 31rem default, which assumes a 1190px file. */
:root { --tsp-portrait-max: 26.5rem; }


/* ONE BUTTON, SITEWIDE — the Hilal standard's own definition.
   Adam's "make her website so much better": the hero's valuation button was
   gold with a 1px lighter rim and 9px corners, and every other button on the
   site was the old lineage's flat deep-purple 4px rectangle. The hero port
   only harvested button rules that happened to SHARE a selector list with a
   hero rule, and these do not: they are `.<x>-btn:not(...)` on their own.

   Taken from the parent's final block, minus anything scoped to .amr-header
   or .amr-mast--*, which is the parent's glass masthead treatment and would
   fight her deep-purple bar. */
.tsp-btn:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow) {
	border-radius: 9px; border-width: 1px;
	font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	padding-inline: 1.5rem; min-height: 50px;
	transition: background .3s ease, color .3s ease, border-color .3s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.tsp-btn:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow):hover {
	background: linear-gradient(var(--tsp-coral-br), var(--tsp-coral-dk)); border-color: var(--tsp-btn-rim); color: #fff; transform: translateY(-2px);
}

/* THE BUTTON'S RESTING FILL.
   The ported rules set the geometry (9px, tracked capitals) and put the gold
   only on :hover, so every button sat in the old lineage's flat deep purple
   while the hero's was gold. The standard is one button sitewide: glass over
   a photograph, "the same color solid elsewhere".

   NOT the parent's `linear-gradient(--coral-br, --coral-dk)`. Her --coral-br
   is #A8925E and white on it measures 3.03:1 — that is themes/CLAUDE.md's
   trap-33 amendment exactly ("white on --coral-br is 3.9:1 — every accent
   button on the site, and nothing in the palette pipeline checks it"). The top
   stop is darkened to #8A6C22 instead, which keeps the gold and measures:

     white on #8A6C22  4.94:1      white on #6B541F  7.21:1

   Same selector chain as the ported rule so it wins on source order, not by
   inventing specificity (trap 51). */
.tsp-btn:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow) {
	background: linear-gradient(#8A6C22, #6B541F);
	border-color: var(--tsp-btn-rim);
	color: #fff;
}
.tsp-btn:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow):hover {
	background: linear-gradient(#96762A, #765D23);
	border-color: var(--tsp-btn-rim);
	color: #fff;
}

/* The ghost button keeps its outline; it only needed the new geometry.
   Written with the SAME :not() chain plus its own class, because the rule
   above is (0,4,0) and a plain `.tsp-btn--ghost` at (0,2,0) loses on
   specificity however far down the sheet it sits — "View all" came out gold
   (trap 51). */
.tsp-btn.tsp-btn--ghost:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow) {
	background: transparent;
	border-color: var(--tsp-line);
	color: var(--tsp-deep);
}
.tsp-btn.tsp-btn--ghost:not(.tsp-btn--accent):not(.tsp-btn--sm):not(.tsp-callnow):hover {
	background: var(--tsp-tint);
	border-color: var(--tsp-coral-dk);
	color: var(--tsp-deep);
}

/* THE PROPERTY SLIDER SCROLLED VERTICALLY INSIDE ITS OWN FRAME.
   Adam, 2026-10-15: "you are able to scroll up and down within the properties
   frame." Measured on the live page: clientHeight 431, scrollHeight 447, so
   16px of vertical scroll inside a carousel that should only move sideways.

   Nobody asked for it. The rule declares `overflow-x: auto` alone — but per
   spec, when one axis is not `visible` the other computes to `auto` rather
   than staying visible. So every horizontal scroller in this lineage is also
   a vertical one wherever its content is a pixel taller than its box, and the
   track's own `padding: .5rem .25rem 1.5rem` (there to stop the card's hover
   lift being clipped) is what makes it taller.

   Locking the axis is the fix a carousel wants anyway: the padding still
   gives the lift its room INSIDE the scrollport, and only the overflow beyond
   it is clipped. Verified after deploying that no card is visually cut. */
.tsp-slider__track {
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

/* ...and the CAUSE, which the lock alone would only have hidden.
   The cards carry data-tsp-reveal, so until the observer fires they rest at
   `translateY(16px); opacity: 0`. A transform contributes to SCROLLABLE
   OVERFLOW, so that 16px is exactly the vertical scroll: measured
   clientHeight 431, scrollHeight 447, card rect 16px below the slide while
   `offsetTop` said they were level — offsetTop ignores transforms, which is
   what sent me looking at the wrong element twice.

   Worse than the scrolling: the observer watches the VIEWPORT, and the cards
   past the right edge of the track are never in it. They were sitting at
   opacity 0 — so scrolling the carousel sideways revealed blank space where
   the fourth and fifth listings should be.

   Inside a horizontal scroller the reveal has nothing to earn: the cards
   arrive with the section. */
/* `html.js` is on the reveal rule, so this needs it too — a bare
   `.tsp-slider__track [data-tsp-reveal]` is (0,1,1) against (0,2,0) and loses
   however far down the sheet it sits (trap 51). */
html.js .tsp-slider__track [data-tsp-reveal],
html.js .tsp-slider__track [data-tsp-reveal].is-in {
	opacity: 1;
	transform: none;
}


/* ───────────────────────────── THE LEAD BAND (SLEEK HOME 2026-10-04)
   Adam, 2026-10-15: "lets add the nice footer form that we have on new demo
   template sites."

   The home page ended on two cards that LINK to a form, which is the thing
   this band was written to replace: "they exist to get the agent leads, so
   the page ends on the form itself, not on a button that opens one."

   Only .lead5 came across; form, kick5, h5 and wrap are already here. */
.tsp-lead5 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 8.5vw, 8rem);
	background: linear-gradient(168deg, var(--tsp-surf-pale) 0%, var(--tsp-shell) 52%, var(--tsp-sand) 100%);
	color: var(--tsp-body);
}
.tsp-lead5__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tsp-lead5--photo { background: var(--tsp-deep); color: #fff; }
.tsp-lead5--photo::before {
	content: '';
	position: absolute; inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 64% 72% at 18% 55%,
		rgba(var(--tsp-scrim5), var(--tsp-scrim-lead, .6)) 0%,
		rgba(var(--tsp-scrim5), var(--tsp-scrim-lead, .6)) 46%,
		rgba(var(--tsp-scrim5), calc(var(--tsp-scrim-lead, .6) * .25)) 100%);
}
.tsp-lead5__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: center;
}
.tsp-lead5__title { max-width: none; font-size: clamp(2.6rem, 1.5rem + 4.2vw, 5rem); line-height: .98; }
.tsp-lead5__text { margin: 1.4rem 0 0; max-width: 30ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.55; }
.tsp-lead5__call {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-top: 2.1rem;
	padding-block: .35rem;
	font-family: var(--tsp-display);
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--tsp-brand);
	border-bottom: 1px solid currentColor;
}
.tsp-lead5__call .tsp-icon { width: .55em; height: .55em; }
.tsp-lead5__call:hover { color: var(--tsp-ink); }
.tsp-lead5 .tsp-lead5__firm { margin-top: 1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--tsp-muted); }
.tsp-lead5--photo .tsp-lead5__copy { text-shadow: 0 1px 22px rgba(var(--tsp-scrim5), .55); }
.tsp-lead5--photo .tsp-kick5, .tsp-lead5--photo .tsp-lead5__title, .tsp-lead5--photo .tsp-lead5__text, .tsp-lead5--photo .tsp-lead5__call, .tsp-lead5--photo .tsp-lead5__call:hover, .tsp-lead5--photo .tsp-lead5__call .tsp-icon, .tsp-lead5--photo .tsp-lead5__firm { color: #fff; }
.tsp-lead5--photo .tsp-lead5__call:hover { border-bottom-width: 2px; }
.tsp-lead5__card {
	scroll-margin-top: calc(var(--tsp-header-h, 4.5rem) + 1rem);
	padding: clamp(1.4rem, 3vw, 2.5rem);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 30px 70px -30px rgba(var(--tsp-scrim5), .55);
	color: var(--tsp-body);
}
.tsp-lead5__card-title { margin-bottom: 1.2rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); }
.tsp-lead5__card .tsp-field textarea { height: 5.4rem; min-height: 0; }
@media (max-width: 900px) {
	.tsp-lead5__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.tsp-lead5--photo::before { background: rgba(var(--tsp-scrim5), var(--tsp-scrim-lead, .58)); }
}
@media (max-width: 640px) {
	.tsp-lead5 { padding-block: 2.75rem; }
	.tsp-lead5__text { margin-top: .9rem; }
	.tsp-lead5__call { margin-top: 1.3rem; font-size: 2rem; }
	.tsp-lead5__card .tsp-form { gap: .65rem; }
	.tsp-lead5__card .tsp-field { gap: .25rem; }
	.tsp-lead5__card .tsp-field__row { gap: .65rem; }
	.tsp-lead5__card-title { margin-bottom: .8rem; }
	.tsp-lead5__card .tsp-field textarea { height: 4.6rem; }
	.tsp-lead5--photo .tsp-lead5__img {
		inset: 0 0 auto 0;
		height: 30rem;
		-webkit-mask-image: linear-gradient(#000 66%, transparent);
		mask-image: linear-gradient(#000 66%, transparent);
	}
	.tsp-lead5--photo::before { bottom: auto; height: 30rem; -webkit-mask-image: linear-gradient(#000 66%, transparent); mask-image: linear-gradient(#000 66%, transparent); }
}
.tsp-lead5__form { scroll-margin-top: calc(var(--tsp-header-h, 4.5rem) + 5rem); }
.tsp-firmcase .tsp-lead5 .tsp-lead5__firm { text-transform: none; letter-spacing: .06em; font-size: .8rem; }
@media (min-width: 901px) {
	.tsp-lead5--photo::before {
		background:
			radial-gradient(ellipse 60% 62% at 20% 50%,
				rgba(var(--tsp-scrim5), var(--tsp-scrim-lead, .6)) 0%,
				rgba(var(--tsp-scrim5), var(--tsp-scrim-lead, .6)) 45%,
				rgba(var(--tsp-scrim5), 0) 100%),
			linear-gradient(to top, rgba(var(--tsp-scrim5), .18), rgba(var(--tsp-scrim5), 0) 55%);
	}
}
.tsp-lead5--photo .tsp-lead5__call:hover { border-bottom-width: 1px; box-shadow: 0 1px 0 0 currentColor; }
.tsp-lead5--photo .tsp-lead5__call:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.tsp-lead5--photo .tsp-lead5__copy a:focus-visible { outline-color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   THE POPUP AS THE AGENT CARD — ported 2026-10-15 from themes/andrew-millar.

   Adam: "imrpvoe taneshas popup contact form too..."
   Hers was a white panel with a heading and the form. It is now the ROUND 5
   card: her purple panel carrying her face, name, firm and review total on
   one side, the short form on the other, and a drawn thank-you. The words
   follow the button that opened it, from TSP_Content::contexts().

   Extracted by tmp/tanesha/pop/apply.py: every rule whose selector mentions
   pop or modal, in source order with the media wrappers, and every old
   .tsp-modal* rule here removed first (traps 51, 101, 130).

   A build's own rules go BELOW the end marker.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The three tokens the ported block reads and nothing here declared (trap 101).
   Measured on her own palette, not guessed:
     pop-ground  her purple lead, the same #4F1C55 as the bold review card.
                 Every line on that panel is #fff: 12.89:1.
     pop-star    a lighter tint of her gold #A8925E, hue kept. 6.60:1 on the
                 purple against the 3:1 graphics bar; the dune itself is 4.26
                 and reads muddy on that ground.
     ink-rgb     her --tsp-ink #1C0A22 as channels, for the veil and shadows. */
:root {
	--tsp-pop-ground: #4F1C55;
	--tsp-pop-star:   #D8B65A;
	--tsp-ink-rgb:    28, 10, 34;
}
@keyframes tsp-pop-spin { to { transform: rotate(360deg); } }
@keyframes tsp-pop-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tsp-pop-ring { from { stroke-dashoffset: 158; } to { stroke-dashoffset: 0; } }
@keyframes tsp-pop-mark { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes tsp-pop-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tsp-modal__head .tsp-rule { margin-inline: auto; }
.tsp-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tsp-gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--tsp-ease), visibility .25s var(--tsp-ease);
}
.tsp-modal[hidden] { display: flex; }
.tsp-modal.is-open { opacity: 1; visibility: visible; }
.tsp-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(14, 38, 48, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tsp-modal__panel {
	position: relative;
	width: 100%;
	max-width: 38rem;
	max-height: min(90vh, 52rem);
	overflow-y: auto;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--tsp-shadow-lg);
	transform: translateY(14px) scale(.99);
	transition: transform .3s var(--tsp-ease);
}
.tsp-modal.is-open .tsp-modal__panel { transform: translateY(0) scale(1); }
.tsp-modal__panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--tsp-accent-metal);
	border-radius: 10px 10px 0 0;
}
.tsp-modal__close {
	position: absolute;
	top: .8rem; right: .8rem;
	width: 2.25rem; height: 2.25rem;
	display: flex; align-items: center; justify-content: center;
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--tsp-muted);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--tsp-ease), border-color .2s var(--tsp-ease);
}
.tsp-modal__close:hover { color: var(--tsp-deep); border-color: var(--tsp-line); }
.tsp-modal__head { margin-bottom: 1.6rem; text-align: center; }
.tsp-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.tsp-modal__lede { margin: 0; font-size: .94rem; color: var(--tsp-muted); }
.tsp-modal__panel--sm { max-width: 34rem; }
.tsp-modal__head { margin-bottom: 1.25rem; }
.tsp-modal__head h2 { margin-bottom: .45rem; padding-inline: 1.75rem; }
@media (max-width: 640px) {
	.tsp-modal { padding: .75rem; }
	.tsp-modal__panel { max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 1.6rem 1.1rem 1.1rem; }
	.tsp-modal__head { margin-bottom: .85rem; }
	.tsp-modal__head h2 { font-size: 1.35rem; line-height: 1.2; margin-bottom: .35rem; }
	.tsp-modal__lede { font-size: .9rem; line-height: 1.4; }
	.tsp-modal .tsp-form { gap: .6rem; }
	.tsp-modal .tsp-field { gap: .25rem; }
	.tsp-modal .tsp-field__row { gap: .6rem; }
	.tsp-modal .tsp-field textarea { min-height: 4.6rem; }
	.tsp-modal .tsp-form__hint { margin-top: -.2rem; }
}
.tsp-modal__close { top: .35rem; right: .35rem; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; }
.tsp-modal__head h2 { padding-inline: 2.4rem; }
.tsp-pop {
	
	
	--tsp-pop-band:   linear-gradient(90deg, var(--tsp-surf) 0 33.34%, var(--tsp-coral) 33.34% 66.67%, var(--tsp-dune) 66.67% 100%);
	--tsp-pop-wash:   .88;
	--tsp-pop-out:    cubic-bezier(.16, 1, .3, 1);
	--tsp-pop-in:     cubic-bezier(.5, 0, .9, .4);
	z-index: 310;
	padding: 24px;
	transition: opacity .26s linear, visibility .26s linear;
	-webkit-tap-highlight-color: transparent;
}
.tsp-pop .tsp-modal__veil {
	background: rgba(var(--tsp-ink-rgb), .62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.tsp-pop .tsp-modal__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 30rem;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	padding: 0;
	overflow: hidden;
	background: var(--tsp-shell);
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(var(--tsp-ink-rgb), .12), 0 32px 72px -24px rgba(var(--tsp-ink-rgb), .55);
	outline: 0;
	opacity: 0;
	transform: translateY(18px) scale(.975);
	transition: transform .26s var(--tsp-pop-in), opacity .2s linear;
}
.tsp-pop.is-open .tsp-modal__panel {
	opacity: 1;
	transform: none;
	transition: transform .42s var(--tsp-pop-out), opacity .22s linear;
}
.tsp-pop .tsp-modal__panel::before { content: none; }
.tsp-pop .tsp-modal__panel.is-dragging { transition: none !important; }
.tsp-pop__id {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	min-height: 88px;
	padding: 20px 68px 18px 20px;
	color: #fff;
	background-color: var(--tsp-pop-ground);
	overflow: hidden;
}
.tsp-pop__id::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 6px;
	background: var(--tsp-pop-band);
}
.tsp-pop__id::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(160deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .16) 100%);
	pointer-events: none;
}
.tsp-pop__card { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.tsp-pop__scene { display: none; }
.tsp-pop__handle { display: none; }
.tsp-pop__face {
	flex: none;
	display: block;
	width: 58px; height: 58px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--tsp-brand-pale);
	box-shadow: 0 0 0 2px var(--tsp-pop-ground), 0 0 0 4px var(--tsp-dune);
	margin-left: 4px;
}
.tsp-pop__who { min-width: 0; }
.tsp-pop__name {
	margin: 0;
	font-family: var(--tsp-display);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.005em;
	color: #fff;
	overflow-wrap: anywhere;
}
.tsp-pop__firm {
	margin: 5px 0 0;
	font-family: var(--tsp-body-font);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	opacity: .9;
}
.tsp-firmcase .tsp-pop__firm { text-transform: none; letter-spacing: .04em; font-size: .8125rem; }
.tsp-pop__about { display: none; }
.tsp-pop__proof {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 7px 0 0;
	font-family: var(--tsp-body-font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
}
.tsp-pop__stars { display: flex; color: var(--tsp-dune); }
.tsp-pop__stars svg { display: block; width: 70px; height: 14px; }
.tsp-pop .tsp-modal__close {
	top: 18px; right: 12px;
	z-index: 2;
	width: 48px; height: 48px;
	min-width: 48px; min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 0;
	transition: background .18s linear, transform .18s var(--tsp-ease);
}
.tsp-pop .tsp-modal__close:hover { background: rgba(255, 255, 255, .3); color: #fff; border-color: transparent; }
.tsp-pop .tsp-modal__close:active { transform: scale(.92); }
.tsp-pop .tsp-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tsp-pop__body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px 20px 20px;
	background: var(--tsp-shell);
}
.tsp-pop .tsp-modal__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; text-align: left; }
.tsp-pop__headtxt { min-width: 0; flex: 1 1 auto; }
.tsp-pop .tsp-modal__head h2 {
	margin: 0;
	padding: 0;
	font-family: var(--tsp-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--tsp-ink);
	text-wrap: balance;
}
.tsp-pop__line {
	margin: 4px 0 0;
	font-family: var(--tsp-body-font);
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--tsp-muted);
}
.tsp-pop__line[hidden], .tsp-pop__thumb[hidden], .tsp-pop [hidden] { display: none !important; }
.tsp-pop__line.is-address {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tsp-brand);
	text-wrap: balance;
}
.tsp-pop__line.is-address::before {
	content: '';
	flex: none;
	width: 15px; height: 15px;
	margin-top: 2px;
	background: var(--tsp-coral);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8a5.2 5.2 0 0 0-5.2 5.2c0 3.7 4.3 8.5 4.7 8.9a.7.7 0 0 0 1 0c.4-.4 4.7-5.2 4.7-8.9A5.2 5.2 0 0 0 8 .8zm0 7.1a1.9 1.9 0 1 1 0-3.8 1.9 1.9 0 0 1 0 3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8a5.2 5.2 0 0 0-5.2 5.2c0 3.7 4.3 8.5 4.7 8.9a.7.7 0 0 0 1 0c.4-.4 4.7-5.2 4.7-8.9A5.2 5.2 0 0 0 8 .8zm0 7.1a1.9 1.9 0 1 1 0-3.8 1.9 1.9 0 0 1 0 3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tsp-pop__thumb {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 12px;
	object-fit: cover;
	background: var(--tsp-tint);
	box-shadow: 0 0 0 1px var(--tsp-line);
}
.tsp-pop .tsp-form { display: grid; gap: 9px; margin: 0; }
.tsp-pop .tsp-form.is-sending { opacity: 1; }
.tsp-pop .tsp-field { gap: 4px; margin: 0; }
.tsp-pop .tsp-field__row { display: grid; grid-template-columns: 1fr; gap: 9px; }
.tsp-pop .tsp-form > .tsp-field--addr { order: 1; }
.tsp-pop .tsp-form > .tsp-field--name { order: 2; }
.tsp-pop .tsp-form > .tsp-field__row { order: 3; }
.tsp-pop .tsp-form > .tsp-form__hint { order: 4; }
.tsp-pop .tsp-form > .tsp-field--message { order: 5; }
.tsp-pop .tsp-form > .tsp-form__note { order: 6; }
.tsp-pop .tsp-form > .tsp-form__note[data-tsp-reach-note] { order: 4; }
.tsp-pop .tsp-form > .tsp-form__send { order: 7; }
.tsp-pop .tsp-field label {
	font-family: var(--tsp-body-font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tsp-ink);
	transition: color .15s linear;
}
.tsp-pop .tsp-field label span { color: inherit; }
.tsp-pop .tsp-field label .tsp-form__opt { font-weight: 400; font-style: normal; color: var(--tsp-muted); }
.tsp-pop .tsp-field:focus-within > label { color: var(--tsp-brand); }
.tsp-pop .tsp-field input, .tsp-pop .tsp-field textarea {
	width: 100%;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--tsp-stone);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	font-family: var(--tsp-body-font);
	font-size: max(1rem, 16px);
	line-height: 1.35;
	color: var(--tsp-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s linear, box-shadow .15s linear, background .15s linear;
}
.tsp-pop .tsp-field input { height: 48px; min-height: 48px; }
.tsp-pop .tsp-field textarea {
	height: 48px; min-height: 48px; max-height: 132px;
	padding-block: 12px;
	resize: none;
	overflow-y: auto;
}
.tsp-pop .tsp-field input::placeholder, .tsp-pop .tsp-field textarea::placeholder { color: var(--tsp-faint); opacity: 1; }
.tsp-pop .tsp-field input:hover, .tsp-pop .tsp-field textarea:hover { border-color: var(--tsp-brand); }
.tsp-pop .tsp-field input:focus, .tsp-pop .tsp-field textarea:focus {
	outline: 0;
	border-color: var(--tsp-brand);
	box-shadow: 0 0 0 1px var(--tsp-brand), 0 0 0 4px var(--tsp-surf);
}
.tsp-pop .tsp-field input[aria-invalid="true"] {
	border-color: #B4301F;
	box-shadow: 0 0 0 1px #B4301F;
	background: #FFF8F6;
}
.tsp-pop .tsp-form__hint, .tsp-pop .tsp-form__note[data-tsp-reach-note] {
	min-height: 2.8em;
	margin: -3px 0 -2px;
	font-size: .8125rem;
	line-height: 1.4;
}
.tsp-pop .tsp-form__hint { color: var(--tsp-muted); }
.tsp-pop .tsp-form:has(.tsp-form__note[data-tsp-reach-note]) .tsp-form__hint { display: none; }
.tsp-pop .tsp-form__note { min-height: 0; margin: 0; font-size: .8125rem; line-height: 1.4; }
.tsp-pop .tsp-form__note:empty { display: none; }
.tsp-pop .tsp-form__note:not(.is-bad) {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.tsp-pop .tsp-form__note.is-bad {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-weight: 600;
	color: #A3281A;
}
.tsp-pop .tsp-form__note.is-bad::before {
	content: '!';
	flex: none;
	width: 16px; height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: #B4301F;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	color: #fff;
}
.tsp-pop .tsp-form__send {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 54px; min-height: 54px;
	margin-top: 2px;
	padding: 0 20px;
	border: 0;
	border-radius: 12px;
	background: var(--tsp-coral);
	box-shadow: 0 10px 22px -12px var(--tsp-coral-dk);
	font-family: var(--tsp-body-font);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	transition: background .18s linear, transform .1s var(--tsp-ease), box-shadow .18s linear;
}
.tsp-pop .tsp-form__send:hover {
	background: var(--tsp-coral-dk);
	border-color: transparent;
	color: #fff;
	transform: none;
	box-shadow: 0 12px 24px -12px var(--tsp-coral-dk);
}
.tsp-pop .tsp-form__send:active { transform: scale(.985); }
.tsp-pop .tsp-form__send:focus-visible { outline: 2px solid var(--tsp-deep); outline-offset: 3px; }
.tsp-pop .tsp-form__send::after {
	content: '';
	flex: none;
	width: 18px; height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h11M10 4.5L14.5 9 10 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s var(--tsp-ease);
}
.tsp-pop .tsp-form__send:hover::after { transform: translateX(3px); }
.tsp-pop .tsp-form.is-sending .tsp-form__send { pointer-events: none; background: var(--tsp-coral-dk); }
.tsp-pop .tsp-form.is-sending .tsp-form__send::after {
	-webkit-mask: none; mask: none;
	background: none;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	width: 16px; height: 16px;
	animation: tsp-pop-spin .7s linear infinite;
}
.tsp-pop__done { display: none; }
.tsp-pop.is-sent .tsp-pop__head, .tsp-pop.is-sent .tsp-form { display: none; }
.tsp-pop.is-sent .tsp-pop__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	padding: 20px 8px;
	text-align: center;
	outline: 0;
}
.tsp-pop__tick {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 76px; height: 76px;
	border-radius: 50%;
	background: var(--tsp-surf-pale);
	color: var(--tsp-coral);
}
.tsp-pop__tick svg { display: block; width: 76px; height: 76px; }
.tsp-pop__tick-ring { stroke: var(--tsp-surf); stroke-dasharray: 158; stroke-dashoffset: 0; transform-origin: 50% 50%; transform: rotate(-90deg); }
.tsp-pop__tick-mark { stroke-dasharray: 34; stroke-dashoffset: 0; }
.tsp-pop__tick--face { background: none; box-shadow: 0 0 0 3px var(--tsp-shell), 0 0 0 5px var(--tsp-dune); }
.tsp-pop__tick--face img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.tsp-pop__tick--face svg {
	position: absolute;
	right: -8px; bottom: -6px;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--tsp-coral);
	box-shadow: 0 0 0 3px var(--tsp-shell);
	color: #fff;
}
.tsp-pop__tick--face .tsp-pop__tick-ring { stroke: transparent; }
.tsp-pop__tick--face .tsp-pop__tick-mark { stroke-width: 5; }
.tsp-pop.is-sent .tsp-pop__tick { animation: tsp-pop-pop .5s var(--tsp-pop-out) both; }
.tsp-pop.is-sent .tsp-pop__tick-ring { animation: tsp-pop-ring .6s .1s var(--tsp-ease) both; }
.tsp-pop.is-sent .tsp-pop__tick-mark { animation: tsp-pop-mark .34s .5s var(--tsp-ease) both; }
.tsp-pop.is-sent .tsp-pop__done-title, .tsp-pop.is-sent .tsp-pop__done-text, .tsp-pop.is-sent .tsp-pop__done-rule, .tsp-pop.is-sent .tsp-pop__done-btn { animation: tsp-pop-rise .5s .28s var(--tsp-pop-out) both; }
.tsp-pop.is-sent .tsp-pop__done-text { animation-delay: .34s; }
.tsp-pop.is-sent .tsp-pop__done-rule { animation-delay: .4s; }
.tsp-pop.is-sent .tsp-pop__done-btn { animation-delay: .46s; }
.tsp-pop__done-title {
	margin: 20px 0 0;
	font-family: var(--tsp-display);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--tsp-ink);
	overflow-wrap: anywhere;
}
.tsp-pop__done-text {
	max-width: 22em;
	margin: 10px 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tsp-body);
}
.tsp-pop__done-rule {
	display: block;
	width: 72px; height: 4px;
	margin: 22px 0 0;
	border-radius: 2px;
	background: var(--tsp-rule4);
}
.tsp-pop__done-btn {
	min-width: 168px;
	height: 52px;
	margin: 24px 0 0;
	padding: 0 28px;
	border: 0;
	border-radius: 12px;
	background: var(--tsp-brand);
	font-family: var(--tsp-body-font);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background .18s linear, transform .1s var(--tsp-ease);
}
.tsp-pop__done-btn:hover { background: var(--tsp-deep); color: #fff; }
.tsp-pop__done-btn:active { transform: scale(.985); }
.tsp-pop__done-btn:focus-visible { outline: 2px solid var(--tsp-deep); outline-offset: 3px; }
.tsp-pop .tsp-pop__card, .tsp-pop .tsp-pop__head, .tsp-pop .tsp-form {
	opacity: 0;
	transform: translateY(10px);
	transition: none;
}
.tsp-pop.is-open .tsp-pop__card, .tsp-pop.is-open .tsp-pop__head, .tsp-pop.is-open .tsp-form {
	opacity: 1;
	transform: none;
	transition: opacity .32s linear, transform .5s var(--tsp-pop-out);
}
.tsp-pop.is-open .tsp-pop__card { transition-delay: .1s; }
.tsp-pop.is-open .tsp-pop__head { transition-delay: .16s; }
.tsp-pop.is-open .tsp-form { transition-delay: .22s; }
@media (max-width: 640px) {
	.tsp-pop { align-items: flex-end; padding: 0; }
	.tsp-pop .tsp-modal__panel {
		max-width: none;
		max-height: calc(100vh - 10px);
		max-height: calc(100dvh - 10px);
		border-radius: 28px 28px 0 0;
		box-shadow: 0 -18px 50px -18px rgba(var(--tsp-ink-rgb), .5);
		opacity: 1;
		transform: translateY(104%);
		transition: transform .26s var(--tsp-pop-in);
	}
	.tsp-pop.is-open .tsp-modal__panel {
		transform: none;
		transition: transform .42s var(--tsp-pop-out);
	}
	.tsp-pop__id { min-height: 92px; padding: 22px 68px 18px 16px; touch-action: none; -webkit-user-select: none; user-select: none; }
	.tsp-pop__handle {
		display: block;
		position: absolute;
		top: 8px; left: 50%;
		width: 40px; height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: #fff;
		opacity: .42;
	}
	.tsp-pop .tsp-modal__close { top: 22px; }
	.tsp-pop__body {
		padding: 12px 16px 16px;
		padding-bottom: max(16px, env(safe-area-inset-bottom));
	}
	.tsp-pop .tsp-modal__head { margin-bottom: 10px; }
	.tsp-pop .tsp-modal__head h2 { font-size: 1.625rem; }
	.tsp-pop .tsp-form { gap: 8px; }
	.tsp-pop .tsp-field__row { gap: 8px; }
}
@media (max-width: 640px) and (max-height: 620px) {
	.tsp-pop__id { min-height: 68px; padding-top: 18px; padding-bottom: 14px; }
	.tsp-pop__name { font-size: 1.375rem; }
	.tsp-pop__face { width: 44px; height: 44px; }
	.tsp-pop .tsp-modal__close { top: 12px; }
	.tsp-pop__body { padding-top: 10px; }
	.tsp-pop .tsp-modal__head { margin-bottom: 8px; }
	.tsp-pop .tsp-modal__head h2 { font-size: 1.4375rem; }
	.tsp-pop .tsp-form { gap: 7px; }
	.tsp-pop .tsp-field__row { grid-template-columns: 1fr 1fr; gap: 8px; }
	.tsp-pop .tsp-field input, .tsp-pop .tsp-field textarea { height: 46px; min-height: 46px; }
	.tsp-pop .tsp-field textarea { padding-block: 11px; }
	.tsp-pop .tsp-form__send { height: 50px; min-height: 50px; }
}
@media (min-width: 641px) and (max-width: 899px) and (max-height: 620px) {
	.tsp-pop .tsp-field__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.tsp-pop .tsp-modal__panel {
		flex-direction: row;
		max-width: 880px;
		min-height: 548px;
		background: #fff;
	}
	.tsp-pop__id {
		flex: 0 0 328px;
		align-items: center;
		min-height: 0;
		padding: 44px 40px 44px 36px;
	}
	.tsp-pop__id::after {
		left: auto; top: 0; right: 0; bottom: 0;
		width: 6px; height: auto;
		background: linear-gradient(180deg,
			var(--tsp-surf) 0 33.34%, var(--tsp-coral) 33.34% 66.67%, var(--tsp-dune) 66.67% 100%);
	}
	.tsp-pop__id::before {
		background:
			radial-gradient(90% 60% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .2) 100%);
	}
	.tsp-pop__card { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.tsp-pop__face {
		width: 120px; height: 120px;
		margin: 0 0 28px 5px;
		box-shadow: 0 0 0 3px var(--tsp-pop-ground), 0 0 0 5px var(--tsp-dune);
	}
	.tsp-pop__name { font-size: 2.375rem; line-height: 1.02; letter-spacing: -.015em; }
	.tsp-pop__firm { margin-top: 12px; font-size: .75rem; letter-spacing: .2em; }
	.tsp-pop__about {
		display: block;
		margin: 24px 0 0;
		padding-top: 22px;
		border-top: 1px solid rgba(255, 255, 255, .26);
		font-family: var(--tsp-body-font);
		font-size: 1.0625rem;
		line-height: 1.5;
		color: #fff;
	}
	.tsp-pop__proof { margin-top: 20px; font-size: .875rem; gap: 10px; }
	.tsp-pop__stars svg { width: 80px; height: 16px; }
	.tsp-pop__panel--scene .tsp-pop__scene {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%; height: 100%;
		object-fit: cover;
	}
	.tsp-pop__panel--scene .tsp-pop__id::before {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .22) 100%),
			var(--tsp-pop-ground);
		opacity: var(--tsp-pop-wash);
		z-index: 1;
	}
	.tsp-pop__panel--scene .tsp-pop__card { z-index: 2; }
	.tsp-pop__panel--scene .tsp-pop__id::after { z-index: 2; }
	.tsp-pop__panel:not(.tsp-pop__panel--face) .tsp-pop__name { font-size: 2.75rem; }
	.tsp-pop .tsp-modal__close {
		top: 16px; right: 16px;
		background: var(--tsp-brand-pale);
		color: var(--tsp-ink);
	}
	.tsp-pop .tsp-modal__close:hover { background: var(--tsp-brand-lt); color: var(--tsp-ink); }
	.tsp-pop .tsp-modal__close:focus-visible { outline-color: var(--tsp-deep); }
	.tsp-pop__body {
		justify-content: center;
		padding: 44px 48px 40px;
		background: #fff;
	}
	.tsp-pop .tsp-modal__head { margin-bottom: 20px; padding-right: 40px; }
	.tsp-pop .tsp-modal__head h2 { font-size: 2.125rem; }
	.tsp-pop__line { margin-top: 8px; font-size: 1rem; }
	.tsp-pop__line.is-address { font-size: .9375rem; }
	.tsp-pop__thumb { width: 64px; height: 64px; }
	.tsp-pop .tsp-form { gap: 13px; }
	.tsp-pop .tsp-field { gap: 6px; }
	.tsp-pop .tsp-field__row { grid-template-columns: 1fr 1fr; gap: 14px; }
	.tsp-pop .tsp-field input { height: 50px; min-height: 50px; }
	.tsp-pop .tsp-field textarea { height: 76px; min-height: 76px; }
	.tsp-pop .tsp-form__hint, .tsp-pop .tsp-form__note[data-tsp-reach-note] { min-height: 1.4em; margin: -5px 0 -2px; }
	.tsp-pop .tsp-form__send { height: 56px; min-height: 56px; }
	.tsp-pop__tick--face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tsp-dune); }
	.tsp-pop__tick--face svg { box-shadow: 0 0 0 3px #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.tsp-pop, .tsp-pop .tsp-modal__panel, .tsp-pop.is-open .tsp-modal__panel, .tsp-pop .tsp-pop__card, .tsp-pop .tsp-pop__head, .tsp-pop .tsp-form, .tsp-pop.is-open .tsp-pop__card, .tsp-pop.is-open .tsp-pop__head, .tsp-pop.is-open .tsp-form, .tsp-pop .tsp-form__send, .tsp-pop .tsp-form__send::after, .tsp-pop .tsp-modal__close, .tsp-pop .tsp-field label, .tsp-pop__done-btn { transition: none !important; }
	.tsp-pop .tsp-modal__panel { transform: none; opacity: 0; }
	.tsp-pop.is-open .tsp-modal__panel { opacity: 1; }
	.tsp-pop .tsp-pop__card, .tsp-pop .tsp-pop__head, .tsp-pop .tsp-form { transform: none; }
	.tsp-pop.is-sent .tsp-pop__tick, .tsp-pop.is-sent .tsp-pop__tick-ring, .tsp-pop.is-sent .tsp-pop__tick-mark, .tsp-pop.is-sent .tsp-pop__done-title, .tsp-pop.is-sent .tsp-pop__done-text, .tsp-pop.is-sent .tsp-pop__done-rule, .tsp-pop.is-sent .tsp-pop__done-btn { animation: none !important; }
	.tsp-pop .tsp-form.is-sending .tsp-form__send::after { animation-duration: 1.6s; }
}
.tsp-pop__stars { color: var(--tsp-pop-star); }
.tsp-pop .tsp-form__send { border-radius: 8px; }
/* ═══════════ end THE POPUP AS THE AGENT CARD ═══════════ */

/* Her name on the popup card breaks at the hyphen, not at the space.
   ---------------------------------------------------------------------------
   At 1440 the panel gives the name a 252px column at 38px Instrument Serif, and
   "Tanesha Royal-Spear" measures about 275px — so it wraps, and a literal
   hyphen is a break opportunity the browser takes first. The card read
   "Tanesha Royal-" over "Spear", which looks like a typesetting fault rather
   than a surname.

   Two lines are right here; the line it breaks on is what was wrong. No CSS
   stops it — `word-break: keep-all` was deployed and measured on the live card
   and Chrome broke at the hyphen anyway. tsp_nb_words() puts each word in its
   own nowrap span instead, so the break falls to the space and the card reads
   "Tanesha" / "Royal-Spear" with the name still at full size. Dropping the
   type to ~32px would fit one line and make the largest thing on the card the
   smallest it has been.

   overflow-wrap stays at `break-word` as the guard for a name too long for the
   box; "Royal-Spear" measures 159px against the 252 available. */
.tsp-pop__name { overflow-wrap: break-word; }
.tsp-pop__name .tsp-nb { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   THE PROOF BAND — 2026-10-16

   Adam picked treatment B off lab/strapband.html and asked for a sunset behind
   it. Was: 202px of cream, one line of small gold type, nothing to look at.

   The photograph is Houston at golden hour (CREDITS.md). The type sits over
   the brightest part of it — the sun reflected down a glass tower, dead centre
   — so the scrim is shaped to the text rather than laid flat over the whole
   picture: it opens to almost nothing at the top and bottom edges, where the
   sky and the tower bases carry the band, and closes through the middle third
   where the words are. Flat coverage strong enough for the gold would have
   turned a golden-hour photograph into a grey slab (trap 111).

   Measured on the rendered pixels, not on the tokens — see the session notes.

   These rules supersede the .tsp-strap block above for the home page. The old
   .tsp-strap* classes stay: /testimonials/ still uses the inline variant.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The band closes on her four-colour rule as well as opening on one.
   Without it the photograph butts straight into the lead band's cathedral sky
   and the two read as one picture cut in half. NOT a border-bottom: the rule
   above is drawn with `border-image`, which paints every side that has a
   width, and the comment on .tsp-strapband records what that cost last time.
   The inherited inset hairline goes too — a pale line over a photograph. */
.tsp-strapband--photo { box-shadow: none; }
.tsp-strapband--photo::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	z-index: 1;
	background: linear-gradient(90deg,
		var(--tsp-brand) 0%,   var(--tsp-brand) 25%,
		var(--tsp-surf)  25%,  var(--tsp-surf)  50%,
		var(--tsp-coral) 50%,  var(--tsp-coral) 75%,
		var(--tsp-dune)  75%,  var(--tsp-dune)  100%);
}
.tsp-strapband--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.4rem, 8vw, 5.4rem);
	text-align: center;
	background: var(--tsp-deep);
}
.tsp-strapband__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	z-index: -2;
}
.tsp-strapband__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(28, 10, 34, .14) 0%,
			rgba(28, 10, 34, .62) 28%,
			rgba(28, 10, 34, .58) 50%,
			rgba(28, 10, 34, .38) 72%,
			rgba(28, 10, 34, .16) 100%),
		radial-gradient(78% 86% at 50% 50%,
			rgba(28, 10, 34, .26) 0%,
			rgba(28, 10, 34, 0) 74%);
}
.tsp-strap5 { margin: 0; }
.tsp-strap5__t {
	display: block;
	font-family: var(--tsp-display);
	font-size: clamp(1.9rem, 4.8vw, 3.2rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: .005em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .46);
}
.tsp-strap5__t--2 { color: var(--tsp-sand); }

.tsp-strap5__facts {
	display: grid;
	gap: 0;
	width: min(100%, 42rem);
	margin: clamp(1.9rem, 4.4vw, 2.8rem) auto 0;
	/* Rules, not a panel. Filling the container and letting it show through a
	   1px gap is the lineage's trick for cells that have their own solid
	   background; over a photograph the cells are transparent, so the fill
	   painted a translucent grey rectangle across the whole row. */
	border-block: 1px solid rgba(255, 255, 255, .30);
}
.tsp-strap5__f + .tsp-strap5__f { border-left: 1px solid rgba(255, 255, 255, .30); }
.tsp-strap5__facts--2 { grid-template-columns: repeat(2, 1fr); }
.tsp-strap5__facts--3 { grid-template-columns: repeat(3, 1fr); }
.tsp-strap5__f {
	padding: clamp(1rem, 2.4vw, 1.5rem) .75rem;
	background: transparent;
}
.tsp-strap5__k {
	display: block;
	font-family: var(--tsp-display);
	font-size: clamp(1.3rem, 2.9vw, 1.95rem);
	line-height: 1.12;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .44);
}
.tsp-strap5__v {
	display: block;
	margin-top: .5rem;
	font-family: var(--tsp-body-font);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #F2E9DA;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* The two boxes stack on a phone, so the divider runs across, not down, and
   the scrim's middle has to cover a taller block of type. */
@media (max-width: 620px) {
	/* At 430 the band crops to mostly sky, which is where the sand line sits:
	   2.56:1 before this. Dropping the focal point puts the tower mass under
	   the type so the scrim does not have to do all of it (trap 42). */
	.tsp-strapband__img { object-position: 50% 62%; }
	.tsp-strap5__facts--2,
	.tsp-strap5__facts--3 { grid-template-columns: 1fr; width: min(100%, 23rem); }
	.tsp-strap5__f + .tsp-strap5__f { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .30); }
	.tsp-strapband__scrim {
		background:
			linear-gradient(180deg,
				rgba(28, 10, 34, .22) 0%,
				rgba(28, 10, 34, .70) 20%,
				rgba(28, 10, 34, .66) 62%,
				rgba(28, 10, 34, .28) 100%);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   OFF-MARKET & DISTRESSED PROPERTY — 2026-10-16

   Her own page (templates/off-market.php, copy in TSP_Content::offmarket()).

   The two halves get different grounds on purpose: buyers sit on the page's
   own cream, homeowners on her brand panel. Someone behind on their mortgage
   is not reading the same page as someone hunting a deal, and the change of
   ground is what tells them where their half begins.

   Every class the template names is declared here — the sweep before writing
   this found sixteen with no rule, which is a page the browser styles with
   defaults and reads as a stylesheet that did not deploy (trap 51).
   ═══════════════════════════════════════════════════════════════════════════ */
.tsp-om__intro {
	width: min(100%, 52rem);
	margin-inline: auto;
	text-align: center;
}
.tsp-om__intro p {
	margin: 0 0 1.1em;
	font-size: clamp(1rem, 1.6vw, 1.1rem);
	line-height: 1.75;
	color: var(--tsp-body);
}
.tsp-om__intro p:last-child { margin-bottom: 0; }

/* The four specialties. Two across, never four: the bodies run to about 40
   words each and four columns makes them columns of single words. */
.tsp-om__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.2rem, 3vw, 2.2rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.tsp-om__card {
	padding: clamp(1.4rem, 3vw, 2rem);
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px -34px rgba(42, 7, 51, .5);
}
.tsp-om__card-title {
	margin: 0 0 .6rem;
	font-family: var(--tsp-display);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--tsp-brand);
}
.tsp-om__card-body {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--tsp-body);
}

/* The two send points. */
.tsp-om__act {
	width: min(100%, 48rem);
	margin-inline: auto;
	text-align: center;
}
.tsp-om__act h2 {
	margin: .4rem 0 .9rem;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	line-height: 1.18;
}
.tsp-om__act p {
	margin: 0 0 1.1em;
	font-size: clamp(1rem, 1.6vw, 1.08rem);
	line-height: 1.75;
	color: var(--tsp-body);
}
.tsp-om__act p:last-of-type { margin-bottom: 0; }
.tsp-om__act-go {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	margin-top: clamp(1.4rem, 3vw, 2rem);
}
.tsp-om__act-sub {
	font-size: .9rem;
	line-height: 1.6;
	color: var(--tsp-muted);
}

/* The homeowners half, on her brand panel. */
.tsp-om__owners {
	background: linear-gradient(135deg, #3E1247 0%, #64266E 52%, #4F1C55 100%);
}
.tsp-om__act--dark h2 { color: #fff; }
.tsp-om__act--dark p { color: rgba(255, 255, 255, .92); }
.tsp-om__act--dark .tsp-om__act-sub { color: var(--tsp-sand); }

/* Her foreclosure.com links, one per metro. */
.tsp-om__links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.9rem, 2.2vw, 1.4rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.tsp-om__link {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.4rem);
	background: #fff;
	border: 1px solid var(--tsp-line);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .18s linear, transform .18s var(--tsp-ease), box-shadow .18s linear;
}
.tsp-om__link:hover,
.tsp-om__link:focus-visible {
	border-color: var(--tsp-dune);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -26px rgba(42, 7, 51, .55);
}
.tsp-om__link-city {
	font-family: var(--tsp-display);
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	line-height: 1.1;
	color: var(--tsp-brand);
}
.tsp-om__link-state {
	flex: 1;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--tsp-muted);
}
.tsp-om__link-go { display: flex; color: var(--tsp-dune-dk); }
.tsp-om__link-go svg { display: block; width: 18px; height: 18px; }
.tsp-om__links-note {
	width: min(100%, 40rem);
	margin: clamp(1.4rem, 3vw, 2rem) auto 0;
	text-align: center;
	font-size: .9rem;
	line-height: 1.7;
	color: var(--tsp-muted);
}

@media (max-width: 820px) {
	.tsp-om__grid  { grid-template-columns: 1fr; }
	.tsp-om__links { grid-template-columns: 1fr; }
}

/* The off-market band on the home page (2026-10-16). Quiet: it is a signpost
   to her page, not a second copy of it. */
.tsp-omband__in {
	width: min(100%, 46rem);
	margin-inline: auto;
	text-align: center;
}
.tsp-omband__title {
	margin: .4rem 0 .8rem;
	font-size: clamp(1.45rem, 3.2vw, 2.2rem);
	line-height: 1.18;
}
.tsp-omband__body {
	margin: 0 0 clamp(1.3rem, 3vw, 1.9rem);
	font-size: clamp(.98rem, 1.6vw, 1.06rem);
	line-height: 1.75;
	color: var(--tsp-body);
}

/* ------------------------------------------------ roster headshot, 2026-10-16 --
   Adam: "on her about page her headshot is cropped incorrectly." The roster
   card put her 1374x2048 full-length portrait (2:3) in a SQUARE frame cut from
   the centre, which showed the key and her jacket and took her face off the
   top. A 4:5 frame anchored near the top keeps head and shoulders. */
.tsp-member__photo .tsp-figure--square { aspect-ratio: 4 / 5; }
.tsp-member__photo .tsp-figure--square img { object-position: 50% 6%; }

/* ------------------------------------------- agent sign in, 2026-10-16 --
   The footer pill for the agent portal, ported from themes/lavonne-hoskins
   (the round-5 pill with its round-9 ink): white on the dark footer. */
.tsp-foot__legal-in .tsp-foot__signin { margin: 14px 0 6px; }
.tsp-foot__legal-in .tsp-signin {
	display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
	padding: 0 1.1rem 0 .95rem; border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 999px; background: rgba(255, 255, 255, .06);
	font-size: .875rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
	color: #fff; text-decoration: none;
	transition: background-color .25s var(--tsp-ease), border-color .25s var(--tsp-ease), color .25s var(--tsp-ease);
}
.tsp-signin__lock, .tsp-signin__go { flex: none; color: currentColor; opacity: .82; transition: transform .25s var(--tsp-ease), opacity .25s var(--tsp-ease); }
.tsp-foot__legal-in .tsp-signin:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (hover: hover) {
	.tsp-foot__legal-in .tsp-signin:hover { background: #fff; border-color: #fff; color: var(--tsp-deep); }
	.tsp-signin:hover .tsp-signin__go { transform: translateX(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tsp-signin, .tsp-signin__lock, .tsp-signin__go { transition: none; }
}

/* ------------------------------------------ license disclosures, 2026-10-17 --
   One line per state, names exactly as each registry records them, the two
   offices, and the two TREC links (22 TAC 531.18 / 531.20 want those at 10pt
   or more; the legal band is .76rem, about 9pt, so they get their own size). */
.tsp-foot__lics { list-style: none; margin: 4px 0 6px; padding: 0; }
.tsp-foot__lics li { margin: 0 0 2px; }
.tsp-foot__lics strong { color: rgba(255, 255, 255, .78); font-weight: 600; }
.tsp-foot__offices { margin: 0 0 8px; }
.tsp-foot__legal-in .tsp-foot__trec { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 10px 0 8px; font-size: 14px; line-height: 1.5; }
.tsp-foot__legal-in .tsp-foot__trec a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Her buying steps are THREE since 2026-10-18 (two of the four she sent were
   the same step). `.tsp-steps--wide` is repeat(4, 1fr) at :1755, which would
   leave a hole two-thirds the width of a card — the ragged row trap 85 is
   about. Declared here, below the 1120px and 620px overrides, so it wins at
   desktop and loses to them where it should (trap 51).
   The bodies are hers and run long, so three across is also the right measure. */
.tsp-steps--wide:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1120px) {
	.tsp-steps--wide:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.tsp-steps--wide:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   CALENDLY 2026-10-19 — "Book a consultation"

   She asked for booking so clients do not have to call. Two places only:
   the home "Talk to Tanesha." band, under her own "Not sure if now is the
   right time?" paragraph, and the top of the contact page's column.

   The call pill, the phone number and every form are untouched: this is
   another way to reach her, not a replacement for calling.
   ------------------------------------------------------------------ */

.tsp-lead5__book { margin: 2.1rem 0 0; }

/* The number follows the button, so it no longer needs the full gap of its
   own. Same specificity as the base rule, later in source, so it wins. */
.tsp-lead5__book + .tsp-lead5__call { margin-top: 1.2rem; }

.tsp-contact__book { margin: 1rem 0 0; }

/* Meet your agent: the two actions in a row, wrapping on a phone rather than
   squeezing. The button styles are the lineage's two looks, so they are
   already different colours; nothing here sets a colour. */
.tsp-meet5__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem 1rem; }
/* stretch, not center: --ghost carries a 1px border the filled button does not,
   so side by side they measured 50px against 44px and sat visibly uneven. */

/* FOOTER BAND TEXT 2026-10-19 — Adam: "the text on the footer paragraphs need
   to be smaller, it doesnt look good."

   The "Talk to Tanesha." band. Its base rule caps at 1.3rem, which measured
   20.8px at 1440 against 17px body copy, and her Get in Touch copy is four
   long paragraphs at that size. Down to body size: 17px at 1440, 16px on a
   phone. The real site footer was already 12-14px and is untouched.

   The measure is widened at the same time so the lines stay the same LENGTH in
   pixels; otherwise smaller type in a 30ch column just makes the band taller.
   Same specificity as the base rule, later in source (trap 51). */
.tsp-lead5__text { font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.6; max-width: 46ch; }

@media (max-width: 560px) {
	.tsp-meet5__actions { display: grid; gap: .75rem; }
	/* Stacked and full width, so the 1px border on --ghost shows as a 6px
	   height difference between two buttons one above the other. */
	.tsp-meet5__actions .tsp-btn { width: 100%; min-height: 3.125rem; justify-content: center; text-align: center; }
}

/* The firm name under the number, not jammed against it.
   `.tsp-lead5 .tsp-lead5__firm` already carries `margin-top: 1rem`, which does
   nothing: tsp_firm_tag() emits a <span>, and a top margin is inert on an
   inline box. So the firm ran on from the last digit with no gap at all
   ("3324ROYALT REALTOR") and wrapped mid-name on a phone. Pre-dates the
   booking button; found while looking at that band at 390.
   Same selector and specificity as the base rule, later in source, so it wins
   without !important. The tag itself stays: TX and FL both want the firm
   beside the point of contact. */
.tsp-lead5 .tsp-lead5__firm { display: block; }
.tsp-contact__book .tsp-btn { width: 100%; justify-content: center; text-align: center; }

@media (max-width: 900px) {
	.tsp-lead5__book { margin-top: 1.6rem; }
	.tsp-lead5__book .tsp-btn { width: 100%; justify-content: center; text-align: center; }
	.tsp-lead5__book + .tsp-lead5__call { margin-top: 1rem; }
}


/* ------------------------------------------------------------------
   HER COPY ROUND 2026-10-19 — "What Sets RoyalT Apart" and the footer

   The four pillar CARDS on /about/ and /tanesha/ are now her own prose, so
   the section needs a readable measure rather than a grid. The footer gained
   a heading above two paragraphs.
   ------------------------------------------------------------------ */

.tsp-apart { max-width: 62ch; margin-inline: auto; }
.tsp-apart__p { margin: 0 0 1.15rem; font-size: 1.0625rem; line-height: 1.7; color: var(--tsp-body); }
.tsp-apart__p:last-of-type { margin-bottom: 1.6rem; }

/* Her sign-off, the same line she ends her bio with. */
.tsp-apart__close {
	margin: 0;
	font-family: var(--tsp-display);
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
	line-height: 1.25;
	color: var(--tsp-brand);
	text-align: center;
}

/* The footer heading above her two About paragraphs, matching the column
   headings already in that footer. */
.tsp-foot__abouth {
	margin: 0 0 .55rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.tsp-foot__blurb + .tsp-foot__blurb { margin-top: .7rem; }

@media (max-width: 900px) {
	.tsp-apart__p { font-size: 1rem; }
}