/*
 * Top Tier Realty palette — taken from the logo they supplied, not invented.
 *
 *   Warm black    #16140F  the T in their monogram: headings, buttons, ink
 *   Logo gold     #8A6424  the dark end of the mark's gradient: text-safe gold,
 *                          links, the accent button (white on it 5.3:1)
 *   Gold metal    gradient #93692A → #7A5720 → #A87C35 (fills, rules, seal)
 *   Champagne     #FBF8F2  the ground; #F6F0E4 the tint band
 *   Vineyard sage #6F7D5C  and merlot #7A2E3B — Temecula wine country, the
 *                          region they sell; small fills and tone panels only
 *
 * Fully light (feedback_dark_themes_too_dark), including the footer.
 *
 * Measured (WCAG, on #FBF8F2):
 *   ink 17.4:1 · body 10.7:1 · muted 5.7:1 · faint 4.7:1
 *   gold text 5.0:1 · white on gold 5.3:1 · merlot 8.7:1
 *   sage 4.2:1 — fills and large type only; --ttr-surf-dk (6.2:1) for text
 */

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

:root {
	--ttr-brand:      #16140F;
	--ttr-brand-mid:  #3A342B;
	--ttr-brand-lt:   #B9AE9B;
	--ttr-brand-pale: #F1ECE2;

	--ttr-accent:       #8A6424;
	--ttr-accent-mid:   #A87C35;
	--ttr-accent-lt:    #D9B67A;
	--ttr-accent-metal: linear-gradient(135deg, #93692A 0%, #7A5720 52%, #8A6424 100%);
	--ttr-gold-sheen:   linear-gradient(90deg, #C9A05A 0%, #E6C98F 45%, #B8894A 70%, #8A6424 100%);

	--ttr-surf:       #6F7D5C;
	--ttr-surf-dk:    #56623F;
	--ttr-surf-pale:  #EEF0E8;

	--ttr-coral:      #8A6424;
	--ttr-coral-br:   #A87C35;
	--ttr-coral-dk:   #6F4F1B;
	--ttr-coral-pale: #F7F1E6;

	--ttr-dune:       #7A2E3B;
	--ttr-dune-dk:    #5E2230;
	--ttr-dune-pale:  #F5ECEC;

	--ttr-sand:       #E8D9B8;
	--ttr-sand-dp:    #D9C08E;

	--ttr-red:        #7A2E3B;

	--ttr-deep:       #16140F;
	--ttr-deep-dk:    #0C0B08;
	--ttr-deep-lt:    #2A261E;
	--ttr-stone:      #6E675C;

	--ttr-ink:        #16140F;
	--ttr-body:       #3E3A33;
	--ttr-muted:      #696258;
	--ttr-faint:      #756E63;

	--ttr-white:      #FFFFFF;
	--ttr-shell:      #FBF8F2;
	--ttr-tint:       #F6F0E4;
	--ttr-tint-2:     #EFE6D4;
	--ttr-sky:        #F1ECE2;
	--ttr-line:       #E6DCC8;
	--ttr-line-soft:  #F0E9DC;

	--ttr-display:    'Cormorant Garamond', 'Cormorant', ui-serif, Georgia, 'Times New Roman', serif;
	--ttr-body-font:  'Jost', 'Futura', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

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

	--ttr-header-h:   104px;
	--ttr-bar-max:    104px;
	--ttr-bar-min:    76px;
	--ttr-logo-max:   66px;
	--ttr-logo-min:   48px;
	--ttr-shrink:     0;

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


@media (max-width: 1040px) {
	:root {
		--ttr-header-h: 88px;
		--ttr-bar-max:  88px;
		--ttr-bar-min:  64px;
		--ttr-logo-max: 54px;
		--ttr-logo-min: 42px;
	}
}

/* ------------------------------------------------------------------ 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(--ttr-shell);
	color: var(--ttr-body);
	font-family: var(--ttr-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: clip;
}

body.ttr-locked { overflow: hidden; }

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

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

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--ttr-display);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--ttr-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(--ttr-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--ttr-accent-lt); color: var(--ttr-ink); }

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

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

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

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

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

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

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

/* The two navy bands. Full-bleed colour 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. */
.ttr-section--dark {
	background: var(--ttr-deep);
	color: rgba(255, 255, 255, .82);
}

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

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

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

/*
 * trap 24: the light eyebrow sits over PHOTOGRAPHS — page banners and the
 * hero — whose brightness we do not control. --accent-lt is a mid-tone
 * (#6F7D5C) and measures about 5:1 on a dark scrim but far less on a
 * bright frame of a Ken Burns loop. A pale warm cream reads on all of
 * them, and it carries the gold rather than the blue.
 */
.ttr-eyebrow--light { color: var(--ttr-eyebrow-lt); }

/* On the hero specifically the eyebrow sits on a photograph rather than a flat
   dark band, and the brand light blue disappears into the water. Near-white with
   a slight shadow holds it without turning it into a second headline. */
.ttr-hero .ttr-eyebrow--light {
	color: rgba(255, 255, 255, .95);
	text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 1px 14px rgba(10, 12, 16, .5);
}

.ttr-hero__title { text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45); }

.ttr-rule {
	display: block;
	width: 56px; height: 3px;
	margin: 1.1rem 0 1.4rem;
	background: var(--ttr-accent-metal);
	border-radius: 3px;
}

.ttr-head--center .ttr-rule,
.ttr-closer .ttr-rule,
.ttr-modal__head .ttr-rule { margin-inline: auto; }

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

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

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

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

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

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

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

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

.ttr-btn:hover {
	background: var(--ttr-deep-dk);
	border-color: var(--ttr-deep-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(22, 20, 15, .5);
}
.ttr-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 (#2A261E) sitting on a navy gradient — effectively invisible — and
 * a gold drop shadow. White on #8A6424 is 9.8:1 and needs no argument.
 */
.ttr-btn--accent {
	background: var(--ttr-accent-metal);
	border-color: transparent;
	color: #FFFFFF;
}
.ttr-btn--accent:hover {
	background: var(--ttr-accent-metal);
	filter: brightness(1.08);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -12px rgba(138, 100, 36, .55);
}

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

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

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

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

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

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

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

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

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

.ttr-icon { flex-shrink: 0; color: var(--ttr-accent-lt); transition: color .2s var(--ttr-ease); }
.ttr-utility__list a:hover .ttr-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 colour above the logo. */
	.ttr-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.
 */
.ttr-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;
}

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

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

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

.ttr-utility__list .ttr-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.
 */
.ttr-lang--drawer {
	align-self: center;
	background: var(--ttr-sky);
	font-size: .82rem;
}

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

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

.ttr-lang--drawer .ttr-lang__off:hover {
	background: rgba(111, 125, 92, .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. */
.ttr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--ttr-header-h);
	pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1040px) {
	.ttr-nav { display: none; }
	.ttr-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 .ttr-callnow and would otherwise win silently. */
	.ttr-header__actions .ttr-btn:not(.ttr-callnow) { display: none; }
}

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

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

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

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

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

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

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

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

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

.ttr-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(22, 20, 15, .03) 12px 24px),
		var(--ttr-tint-2);
}

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

/* ------------------------------------------------------------------ hero -- */

.ttr-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 74vh, 42rem);
	padding-block: clamp(5rem, 10vh, 7rem);
	overflow: hidden;
	background: #0C0B08;
}

.ttr-hero__media { position: absolute; inset: 0; z-index: 0; }

/* Warm, not navy.
 *
 * The hero is a house at golden hour, and a navy scrim was arguing with it —
 * the sky went slate, the lit windows went grey, and the one genuinely
 * attractive thing about the photograph was suppressed to make room for a brand
 * colour it did not need. The scrim is now a deep warm brown, which darkens
 * exactly as much for the text but reads as dusk rather than as a blue filter.
 *
 * The amber wash on the right is doing the opposite job: it sits over the part
 * of the frame with no text on it and lifts the water, so the colour is
 * strongest where the eye is free to enjoy it.
 *
 * Temperature matters here. The copied theme scrimmed in warm brown, which over
 * a blue-green aerial reads as dirt on the lens. This one is a deep ocean blue
 * drawn from --ttr-deep, so the photograph stays in the same family as the logo.
 * The photograph is also a top-down aerial and therefore busy edge to edge —
 * there is no empty sky to drop type onto — so the left side is scrimmed harder
 * than a normal hero would need. */
/*
 * A LIGHT hero. This is the fifth version of this decision in the repo and it
 * is settled: Adam has rejected dark twice and rejected light-with-dark-bands
 * as still too dark. The version inherited here scrimmed the left edge at 0.92
 * navy, which turned a bright aerial of a sunlit barrier island into a navy
 * panel with a photograph faintly behind it.
 *
 * So the scrim is low and NEUTRAL — a warm-grey dark rather than navy, because
 * a blue scrim over blue water grades the footage toward the brand colour,
 * which is the thing not to do. Legibility comes from the text shadow on
 * .ttr-hero__title and .ttr-hero__lede instead, which darkens only the pixels
 * immediately behind the letterforms and leaves the picture alone. Measured
 * with scripts/hero-contrast.py, not eyeballed.
 */
.ttr-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		/*
		 * A BAND, not a blanket. The headline measured 2.58:1 against the
		 * brightest stretch of beach behind it and large text needs 3:1, so
		 * the fix is a soft horizontal band of extra density across the rows
		 * the type actually occupies — roughly 26% to 66% of the hero — while
		 * the sky at the top and the surf at the bottom stay as bright as the
		 * footage shot them. Darkening the whole picture to fix one line is
		 * what produced the navy panel this replaced.
		 */
		linear-gradient(to bottom, rgba(16, 18, 22, 0) 16%, rgba(16, 18, 22, .30) 30%, rgba(16, 18, 22, .30) 62%, rgba(16, 18, 22, 0) 78%),
		linear-gradient(to right, rgba(16, 18, 22, .58) 0%, rgba(16, 18, 22, .40) 44%, rgba(16, 18, 22, .06) 76%, rgba(16, 18, 22, .12) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .14) 0%, rgba(16, 18, 22, .00) 38%, rgba(16, 18, 22, .26) 100%);
}

/*
 * The phone needs a DIFFERENT band, not a stronger one.
 *
 * On a phone the copy runs full width and the call line sits at 85-89% of the
 * hero — below 78%, where the desktop band has already faded to nothing. And
 * because this is a Ken Burns loop there is no single "the hero photo" to
 * measure: hero-contrast.py reads whichever frame Chrome happens to be
 * showing (traps 42 and 58).
 *
 * Scored offline against ALL THREE phone crops, the desktop scrim at phone
 * width failed six of twelve measurements — the lede on every frame (2.59,
 * 3.37, 2.81) and the call line on frame one (3.49) — while the live tool
 * reported one failure. With the band below, the worst of the twelve is
 * 4.64:1. Re-measure with tmp/top-tier-realty/phone-scrim.py after ANY reframe.
 *
 * This replaces all three gradients deliberately: a `background:` on this
 * element replaces the lot, so a single "stronger" gradient here measures
 * WORSE than the three it removed (trap 24 amendment).
 */
@media (max-width: 900px) {
	.ttr-hero__scrim {
		background:
			linear-gradient(to bottom, rgba(16, 18, 22, 0) 8%, rgba(16, 18, 22, .38) 20%, rgba(16, 18, 22, .38) 74%, rgba(16, 18, 22, .50) 84%, rgba(16, 18, 22, .50) 92%, rgba(16, 18, 22, .40) 100%),
			linear-gradient(to right, rgba(16, 18, 22, .44) 0%, rgba(16, 18, 22, .34) 60%, rgba(16, 18, 22, .26) 100%),
			linear-gradient(to bottom, rgba(16, 18, 22, .10) 0%, rgba(16, 18, 22, .00) 35%, rgba(16, 18, 22, .22) 100%);
	}
}

.ttr-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.ttr-hero__title { color: #fff; }
.ttr-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }

.ttr-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.ttr-hero__note {
	margin-top: 1.35rem;
	font-size: .84rem;
	color: rgba(255, 255, 255, .62);
}

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

.ttr-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(--ttr-deep-dk);
}

.ttr-banner__media { position: absolute; inset: 0; z-index: 0; }
.ttr-banner__scrim {
	position: absolute;
	inset: 0;
	/*
	 * Shaped to the TEXT, not raised as a flat floor (trap 58). The banner is
	 * align-items: flex-end, so the type sits in the bottom third — that is
	 * where the band is strong, and the top two thirds stay light enough to
	 * read the photograph.
	 *
	 * Measured, not guessed: at 430px the /heroes/ lede ran 3.94:1 over the
	 * sunlit bungalow with the old ramp, because on a phone the copy runs full
	 * width across the bright right-hand side that the desktop gradient
	 * deliberately leaves alone (trap 42).
	 */
	background:
		linear-gradient(to right, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .48) 55%, rgba(16, 18, 22, .38) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .18) 0%, rgba(16, 18, 22, .10) 40%, rgba(16, 18, 22, .50) 76%, rgba(16, 18, 22, .68) 100%);
}

.ttr-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.ttr-banner__title { color: #fff; }
/* Full white. At .85 over a photograph this is the line that fails, and it
   is the line carrying the page's actual argument. */
.ttr-banner__lede { color: #fff; }

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

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

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

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

@media (max-width: 900px) {
	.ttr-split { grid-template-columns: 1fr; }
	.ttr-split--reverse .ttr-split__media,
	.ttr-split--reverse .ttr-split__body { order: initial; }
	.ttr-figure--tall, .ttr-figure--portrait { aspect-ratio: 16 / 11; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------------------------------------------------------- quotes -- */

.ttr-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1.5rem;
}

.ttr-quote {
	margin: 0;
	padding: 1.9rem 1.6rem;
	background: #fff;
	border: 1px solid var(--ttr-line);
	border-radius: 8px;
}
.ttr-quote__stars { color: var(--ttr-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.ttr-quote blockquote { margin: 0 0 1.1rem; color: var(--ttr-body); }
.ttr-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.ttr-quote__name { font-family: var(--ttr-display); font-weight: 400; color: var(--ttr-ink); font-size: .92rem; }
.ttr-quote__via { font-size: .8rem; color: var(--ttr-muted); }
/* The Facebook "Recommends" badge — ttr_review_rating(). The dot needs a gap
   or it reads as one word: "●Recommends". */
.ttr-quote__rec {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ttr-coral-dk);
	margin-bottom: .75rem;
}
.ttr-quote__rec span { font-size: .6rem; line-height: 1; }

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

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

.ttr-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(--ttr-line);
	border-radius: 8px;
}

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

.ttr-member__photo { position: relative; }

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

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

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

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

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

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

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

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

.ttr-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) { .ttr-listing__body { grid-template-columns: 1fr; } }

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

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

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

.ttr-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(--ttr-tint);
	border: 1px solid var(--ttr-line);
	border-radius: 8px;
}
.ttr-empty__mark { opacity: .7; }
.ttr-empty h2 { font-size: 1.3rem; }
.ttr-empty p { color: var(--ttr-muted); margin-bottom: .5rem; }

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

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

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

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

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

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

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

.ttr-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) { .ttr-contact { grid-template-columns: 1fr; } }

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

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

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

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

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

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

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

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

.ttr-field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ttr-deep) 50%),
		linear-gradient(135deg, var(--ttr-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;
}

.ttr-field input:focus,
.ttr-field select:focus,
.ttr-field textarea:focus {
	border-color: var(--ttr-deep-lt);
	box-shadow: 0 0 0 3px rgba(111, 125, 92, .12);
	outline: none;
}

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

/* The call/text consent box — its own row, never pre-ticked. */
.ttr-field--consent { margin-top: .25rem; }
.ttr-consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--ttr-muted);
	cursor: pointer;
}
.ttr-consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--ttr-brand); }
.ttr-consent a { color: var(--ttr-coral-dk); }

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

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

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

/* ----------------------------------------------------------------- modal -- */

.ttr-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ttr-gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ttr-ease), visibility .25s var(--ttr-ease);
}
.ttr-modal[hidden] { display: flex; }
.ttr-modal.is-open { opacity: 1; visibility: visible; }

.ttr-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(22, 20, 15, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ttr-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(--ttr-shadow-lg);
	transform: translateY(14px) scale(.99);
	transition: transform .3s var(--ttr-ease);
}
.ttr-modal.is-open .ttr-modal__panel { transform: translateY(0) scale(1); }

.ttr-modal__panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--ttr-accent-metal);
	border-radius: 10px 10px 0 0;
}

.ttr-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(--ttr-muted);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--ttr-ease), border-color .2s var(--ttr-ease);
}
.ttr-modal__close:hover { color: var(--ttr-deep); border-color: var(--ttr-line); }

.ttr-modal__head { margin-bottom: 1.6rem; text-align: center; }
.ttr-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.ttr-modal__lede { margin: 0; font-size: .94rem; color: var(--ttr-muted); }

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

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

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

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

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

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

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

.ttr-pagination { margin-top: 2.75rem; }
.ttr-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.ttr-pagination .page-numbers {
	padding: .5rem .9rem;
	border: 1px solid var(--ttr-line);
	border-radius: 4px;
	color: var(--ttr-body);
	font-size: .88rem;
}
.ttr-pagination .page-numbers.current,
.ttr-pagination .page-numbers:hover {
	border-color: var(--ttr-deep);
	background: var(--ttr-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 colour so legal pages match everything else. */
.bb-legal-container,
.bb-legal-container * { color: var(--ttr-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(--ttr-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--ttr-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(--ttr-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--ttr-line); margin: 2rem 0; }

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

@media (prefers-reduced-motion: no-preference) {
	html.js [data-ttr-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .7s var(--ttr-ease), transform .7s var(--ttr-ease);
	}
	html.js [data-ttr-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) {
	.ttr-section { padding-block: clamp(3rem, 10vw, 4rem); }
	.ttr-card__body { padding: 1.15rem; }
	.ttr-service { padding: 1.6rem 1.3rem; }
	.ttr-listing__titles { flex-direction: column; align-items: flex-start; }
	.ttr-listing__price { text-align: left; }
}

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

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

.ttr-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. */
.ttr-nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem;
	background: none;
	border: 0;
	color: var(--ttr-ink);
	cursor: pointer;
	transition: transform .2s var(--ttr-ease);
}
.ttr-nav__item.is-open > .ttr-nav__toggle { transform: rotate(180deg); }

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

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

.ttr-nav__sub a {
	display: block;
	padding: .55rem 1.1rem;
	font-size: .78rem;
	text-transform: none;
	letter-spacing: .01em;
	color: var(--ttr-body);
}
.ttr-nav__sub a::after { display: none; }
.ttr-nav__sub a:hover { background: var(--ttr-tint); color: var(--ttr-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. */
.ttr-drawer__nav .ttr-nav__list { width: 100%; gap: 0; }

.ttr-drawer__nav .ttr-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 centre 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(--ttr-line);
}

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

/* The row is the control, so it should look like one under the finger. */
.ttr-drawer__nav .ttr-nav__item.has-children { cursor: pointer; }
.ttr-drawer__nav .ttr-nav__item.has-children:active { background: var(--ttr-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. */
.ttr-drawer__nav .ttr-nav__toggle {
	grid-column: 3;
	display: inline-flex;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--ttr-deep);
}

.ttr-drawer__nav .ttr-nav__sub {
	grid-column: 1 / -1;
	background: var(--ttr-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(--ttr-ease), opacity .2s var(--ttr-ease), padding .3s var(--ttr-ease);
}

.ttr-drawer__nav .ttr-nav__item.is-open > .ttr-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ttr-creed__quote { margin: 0; }

.ttr-creed__goal {
	font-family: var(--ttr-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;
}

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

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

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

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

.ttr-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(--ttr-tint);
	border: 1px solid var(--ttr-line);
	border-left: 4px solid var(--ttr-accent-mid);
	border-radius: 8px;
}
@media (max-width: 820px) { .ttr-valuecta { grid-template-columns: 1fr; } }

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

.ttr-valuecta__call {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--ttr-display);
	font-weight: 400;
	color: var(--ttr-deep);
}
.ttr-valuecta__call .ttr-icon { color: var(--ttr-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. */
.ttr-steps--wide { grid-template-columns: repeat(4, 1fr); }

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

.ttr-quotes__more { margin-top: 2rem; text-align: center; }

/* Pillars sit on navy by default; this is the variant for a light band. */
.ttr-pillars--light .ttr-pillar {
	background: #fff;
	border-color: var(--ttr-line);
}
.ttr-pillars--light .ttr-pillar__title { color: var(--ttr-ink); }
.ttr-pillars--light .ttr-pillar__body { color: var(--ttr-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.
 */
.ttr-foot {
	position: relative;
	background: var(--ttr-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. */
.ttr-foot::before {
	content: '';
	position: absolute;
	top: -70%; left: 50%;
	width: 74rem; height: 52rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(217, 182, 122, .10) 0%, transparent 64%);
	pointer-events: none;
}

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

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

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

.ttr-foot__name { margin: 0; font-family: var(--ttr-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.ttr-foot__firm {
	margin: 2px 0 12px;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* --ttr-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(--ttr-brand-lt);
}
.ttr-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }

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

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

.ttr-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.ttr-foot__social { margin: 14px 0 0; font-size: .88rem; }
.ttr-foot__social a { color: var(--ttr-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. */
.ttr-foot__legal {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .09);
	background: rgba(0, 0, 0, .18);
}
.ttr-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.ttr-foot__legal-in p { margin: 0 0 6px; }
.ttr-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.ttr-foot__legal-in a:hover { color: #fff; }

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

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

/* The Equal Housing mark is now real SVG geometry — see ttr_eho_mark(). */
.ttr-eho { flex: 0 0 auto; opacity: .85; }
/*
 * HUD's mark is black line art and this lineage's footer legal band is
 * near-black, so the compliance mark ships present, rendered and invisible
 * (trap 48). Knock it to white there. The artwork itself is never redrawn.
 */
.ttr-eho--official { width: 34px; height: 34px; }

/* ── The Ken Burns hero (trap 58) ─────────────────────────────────────────
 * Three stacked <picture>s, one keyframe animation, offset by a third of the
 * cycle. Only opacity and transform animate. The per-frame delay comes from
 * TTR_Content::hero_frames() rather than being computed from --i here,
 * because computing it is exactly how the sequence ends up playing 1, 3, 2.
 */
.ttr-hero__kb { position: absolute; inset: 0; overflow: hidden; }

.ttr-hero__frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity, transform;
	transform-origin: var(--origin, 50% 50%);
	animation: ttr-kb 27s var(--ttr-ease) infinite;
	animation-delay: var(--delay, 0s);
}

.ttr-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--origin, 50% 50%);
	display: block;
}

/*
 * The fades MUST overlap. With three frames a third of a 27s cycle apart, the
 * next frame starts fading in at exactly 33.3%. An out-fade that finishes at
 * 33% therefore leaves every frame at opacity 0 for a moment — measured at
 * t=9s and t=18s, all three read 0.00 — and the hero flashes its background
 * twice a cycle. The outgoing frame therefore has to HOLD past 33.3% and fade out
 * over 35%-45%, so it is still fully opaque when the next one starts. Measured
 * across the whole cycle, total opacity now never drops below 1.00.
 */
@keyframes ttr-kb {
	0%   { opacity: 0; transform: scale(1.00); }
	5%   { opacity: 1; }
	35%  { opacity: 1; }
	45%  { opacity: 0; transform: scale(1.09); }
	100% { opacity: 0; transform: scale(1.09); }
}

/* Frame one is also the fallback: with motion reduced, or if the animation
   never starts, it stays visible rather than the hero being three transparent
   pictures over nothing. */
.ttr-hero__frame:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ttr-hero__frame { animation: none; opacity: 0; }
	.ttr-hero__frame:first-child { opacity: 1; transform: none; }
}

/* The program disclaimer at the foot of the Heroes page. Small, quiet, and
   deliberately NOT one of the tone tokens, which are fills only (trap 33). */
.ttr-finenote {
	margin: 2.25rem auto 0;
	max-width: 62ch;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--ttr-muted);
	text-align: center;
}
.ttr-foot__legal .ttr-eho--official,
.ttr-foot__eho .ttr-eho--official { filter: brightness(0) invert(1); opacity: .9; }

/* --------------------------------------------------------- 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. */

.ttr-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) { .ttr-searchband { margin-top: -1.5rem; } }

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

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

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

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

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

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

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

.ttr-search__field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ttr-deep) 50%),
		linear-gradient(135deg, var(--ttr-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;
}

.ttr-search__field input:focus,
.ttr-search__field select:focus {
	border-color: var(--ttr-deep-lt);
	box-shadow: 0 0 0 3px rgba(111, 125, 92, .12);
	outline: none;
}

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

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

.ttr-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(--ttr-line-soft);
}

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

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

.ttr-glyph { color: var(--ttr-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(). */

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

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

.ttr-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;
}

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

.ttr-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
 * centres 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) {
	.ttr-slider__track {
		grid-auto-columns: 100%;
		margin-inline: 0;
		padding-inline: 0 1.5rem;
		scroll-padding-inline: 0;
	}
	.ttr-slider__slide { scroll-snap-align: start; }
}
.ttr-slider__slide .ttr-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. */
	.ttr-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

/* ------------------------------------------------- masthead over the hero -- */

/*
 * On the front page the masthead floats over the hero photograph and resolves
 * to the normal white bar as you scroll. Everywhere else it is opaque from the
 * first pixel, because only the front page has a dark image to float over.
 *
 * Two mechanisms, deliberately:
 *
 *   - the BACKGROUND interpolates continuously off --ttr-shrink, so the bar
 *     arrives smoothly rather than snapping;
 *   - the FOREGROUND (nav text, logo, CTA) swaps on the .is-solid class the
 *     scroll handler sets past 60%, with a transition doing the blending.
 *
 * The foreground is not interpolated through the same variable on purpose.
 * Doing so makes legibility depend on a value JS rewrites every frame, and the
 * failure mode is white text on a white bar. A class is either present or not,
 * so the worst case is "solid too early", never "invisible".
 *
 * The hero is pulled up under the masthead rather than the masthead being taken
 * out of flow — a fixed bar would force every other page to compensate for it.
 */
.ttr-home .ttr-hero { margin-top: calc(var(--ttr-header-h) * -1); }
.ttr-home .ttr-hero__inner { padding-top: var(--ttr-header-h); }

/*
 * TWO background layers, and the order is the whole point.
 *
 * The nav is white 12.8px type floating over three photographs that all have
 * sky across the top. Measured offline across every frame of the loop, the
 * worst pixel under the nav band ran 1.48:1 — while hero-contrast.py printed
 * PASS throughout, because it reads the hero's own text block and never looks
 * at the masthead (themes/CLAUDE.md trap 42 amendment).
 *
 * The first-listed background layer paints ON TOP, so the white bar is listed
 * first and the dark wash second. As --ttr-shrink rises the white becomes
 * opaque and simply occludes the wash, which is why this never doubles up and
 * needs no second opacity to keep in sync.
 */
.ttr-home .ttr-header__bar {
	background:
		linear-gradient(to bottom, rgba(255, 255, 255, var(--ttr-shrink)) 0%, rgba(255, 255, 255, var(--ttr-shrink)) 100%),
		/* Measured in the BAR's own coordinates: the bar is 129px of an 828px
		   hero, so 61% of the bar is 9.5% of the hero, which is where the nav
		   baseline sits. Reaching 0 by 90% keeps the wash from ending on a
		   visible hard edge over the photograph. Worst pixel under the nav
		   across all three frames: 6.93:1, up from 1.48:1. */
		linear-gradient(to bottom, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .46) 61%, rgba(16, 18, 22, 0) 90%);
	border-bottom-color: rgba(228, 222, 210, var(--ttr-shrink));
}

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

.ttr-home .ttr-header:not(.is-solid) .ttr-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. */
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__list > li > a::after { background: #fff; }

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

/* The submenu panel is its own white surface and is never part of the swap. */
.ttr-home .ttr-nav__sub a { color: var(--ttr-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.
 */
.ttr-header__actions .ttr-btn--sm { transition: background .28s var(--ttr-ease), border-color .28s var(--ttr-ease); }

.ttr-home .ttr-header:not(.is-solid) .ttr-header__actions .ttr-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. */
.ttr-logo { position: relative; }
.ttr-logo__img--light {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--ttr-ease);
}
.ttr-home .ttr-header:not(.is-solid) .ttr-logo__img--light { opacity: 1; }

/* No JS: .is-solid is never added and --ttr-shrink never moves, so the masthead
   would sit transparent forever over a hero that has been pulled up under it.
   The document only gains .js once the inline script in header.php runs. */
html:not(.js) .ttr-home .ttr-hero { margin-top: 0; }
html:not(.js) .ttr-home .ttr-hero__inner { padding-top: 0; }
html:not(.js) .ttr-home .ttr-header__bar { background: #fff; }
html:not(.js) .ttr-logo__img--light { display: none; }

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

/* ------------------------------------------------------ search notice -- */

/*
 * Reuses the inquiry modal's veil and panel wholesale — it is the same object,
 * just carrying a message instead of a form. Only the width and the button row
 * differ, so only those are declared.
 */
.ttr-modal__panel--sm { max-width: 34rem; }

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

.ttr-note__actions .ttr-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 licence 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.
 */
.ttr-agentfacts {
	display: grid;
	gap: .85rem 2rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ttr-line);
}

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

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

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

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

.ttr-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. */
.ttr-agentcard__initials--lg {
	border-radius: 8px;
	font-size: clamp(3.5rem, 9vw, 6rem);
	letter-spacing: .04em;
}

/* ------------------------------------------------- review attribution -- */

.ttr-quote__via--google {
	display: inline-flex;
	align-items: center;
	gap: .32em;
}

/* 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. */
.ttr-gmark {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	/* The optical centre of the G sits slightly above the text baseline. */
	transform: translateY(.04em);
}

.ttr-quote__via--google > span { line-height: 1; }

/* ----------------------------------------------------------- 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.
 */
.ttr-slider--team .ttr-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }

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

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

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

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

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

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

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

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

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

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

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

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

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

.ttr-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(--ttr-tint-2);
	color: var(--ttr-muted);
	font-size: .68rem;
}
.ttr-filter.is-on .ttr-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. */
.ttr-figure--square { aspect-ratio: 1 / 1; }

.ttr-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. */
.ttr-figure--empty.ttr-figure--wide,
.ttr-figure--empty.ttr-figure--hero,
.ttr-figure--empty.ttr-figure--square { min-height: 0; }

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

/* ------------------------------------------------------- hero phone, card -- */

.ttr-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.35rem;
	font-family: var(--ttr-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: #fff;
}
.ttr-hero__phone .ttr-icon { color: var(--ttr-accent-lt); }
.ttr-hero__phone:hover { color: #FFFFFF; }
.ttr-hero__phone + .ttr-hero__note { margin-top: .5rem; }

/* The representation line is the reason a sold listing is worth showing. */
.ttr-card__repd {
	margin-bottom: .5rem;
	font-family: var(--ttr-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ttr-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. */
.ttr-callnow { display: none; }

@media (max-width: 1040px) {
	.ttr-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(--ttr-accent-lt);
		background-image: none;
		border-color: var(--ttr-accent-lt);
		color: var(--ttr-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;
	}

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

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

/* Below this the words go and the icon carries it — at 380px a labeled 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. */
	.ttr-callnow span { display: none; }
	.ttr-callnow { padding: 0; width: 44px; height: 44px; }
}

.ttr-hero__phone strong { color: #FFFFFF; font-weight: 700; white-space: nowrap; }

@media (max-width: 520px) {
	.ttr-hero__phone { font-size: 1.02rem; align-items: flex-start; }
	.ttr-hero__phone .ttr-icon { margin-top: .3rem; }
}

/* ------------------------------------------------------------ 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) {
	.ttr-team { grid-template-columns: 1fr 1fr; }
	.ttr-team .ttr-member:first-child { grid-column: 1 / -1; }
	.ttr-team .ttr-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. */
	.ttr-team .ttr-member:nth-child(2):last-child {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

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

/* A card with no bio should sit tight rather than leave the gap the bio left. */
.ttr-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. */
.ttr-section--flush { padding-bottom: 0; }
.ttr-head--tight { margin-bottom: 0; }

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See ttr_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. */
.ttr-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, #3A342B 0%, var(--ttr-deep) 55%, #1F1C16 100%);
}

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

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

.ttr-plate__city {
	font-family: var(--ttr-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. */
.ttr-figure--hero.ttr-plate { min-height: clamp(15rem, 34vw, 26rem); }

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

/* ------------------------------------------------------------ hero search --
   This brokerage is on the IDX plan, so the search sits inside the hero. It has
   to stay legible over a photograph, which the page variant never has to do:
   the panel is translucent-dark rather than white, and the labels invert. */
.ttr-hero__search { margin: 1.75rem 0 1.25rem; max-width: 62rem; }

/*
 * 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 colour instead of going milky grey. 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.
 */
.ttr-search--hero {
	background: rgba(255, 255, 255, .52);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 18px 44px rgba(22, 20, 15, .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);
}

.ttr-search--hero .ttr-search__field label { color: var(--ttr-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.
 */
.ttr-search--hero .ttr-search__field input,
.ttr-search--hero .ttr-search__field select {
	background: #fff;
	border-color: rgba(22, 20, 15, .14);
}

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

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

/*
 * Safari on iOS honours 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))) {
	.ttr-search--hero { background: rgba(255, 255, 255, .88); }
}

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

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

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

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

.ttr-search__clear {
	font-family: var(--ttr-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ttr-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 .ttr-market--noshape and
 * simply centre their caption. That has to look deliberate, because on a cold
 * cache it is what every card looks like.
 */

.ttr-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) { .ttr-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .ttr-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

.ttr-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(--ttr-white);
	border: 1px solid var(--ttr-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .22s var(--ttr-ease), transform .22s var(--ttr-ease), box-shadow .22s var(--ttr-ease);
}

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

.ttr-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 grey haze, and a solid shape reads as
   a place. */
.ttr-market__shape .ttr-shape { width: 100%; height: 100%; display: block; }
.ttr-market__shape .ttr-shape path {
	fill: var(--ttr-accent);
	opacity: .16;
	transition: opacity .22s var(--ttr-ease);
}
.ttr-market__link:hover .ttr-shape path { opacity: .34; }

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

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

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

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

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

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

.ttr-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) { .ttr-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.ttr-pair__name { margin: 0 0 .15rem; font-family: var(--ttr-display); font-size: 1.5rem; color: var(--ttr-ink); }
.ttr-pair__role {
	margin: 0 0 .7rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ttr-accent);
}
.ttr-pair__bio  { margin: 0 0 .9rem; color: var(--ttr-body); font-size: .95rem; }
.ttr-pair__more {
	font-size: .82rem; font-weight: 600; color: var(--ttr-accent); text-decoration: none;
}
.ttr-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 colour. 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.
 */

.ttr-burger {
	width: 44px;
	height: 44px;
	padding: 0;
	display: none;
	place-items: center;
	border-radius: 6px;
	border: 1px solid rgba(22, 20, 15, .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(--ttr-ease), border-color .25s var(--ttr-ease),
	            transform .18s var(--ttr-ease);
}

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

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

.ttr-burger__box { width: 18px; }
.ttr-burger__box i { height: 1.5px; border-radius: 1px; }
.ttr-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.
 */
.ttr-home .ttr-header:not(.is-solid) .ttr-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))) {
	.ttr-burger { background: rgba(255, 255, 255, .92); }
	.ttr-home .ttr-header:not(.is-solid) .ttr-burger { background: rgba(22, 20, 15, .42); }
}

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

.ttr-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(--ttr-ease),
		visibility .3s var(--ttr-ease),
		transform .42s cubic-bezier(.16, .84, .32, 1);
}

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

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

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

.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item,
.ttr-drawer.is-open .ttr-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. */
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(1) { transition-delay: .06s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(2) { transition-delay: .115s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(3) { transition-delay: .17s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(4) { transition-delay: .225s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(5) { transition-delay: .28s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(6) { transition-delay: .335s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(7) { transition-delay: .39s; }
.ttr-drawer.is-open .ttr-drawer__nav .ttr-nav__item:nth-child(n+8) { transition-delay: .445s; }

.ttr-drawer.is-open .ttr-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.ttr-drawer.is-open .ttr-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. */
.ttr-drawer:not(.is-open) .ttr-drawer__nav .ttr-nav__item,
.ttr-drawer:not(.is-open) .ttr-drawer__foot > * { transition-delay: 0s; }

/*
 * Honour 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) {
	.ttr-drawer,
	.ttr-drawer.is-open,
	.ttr-drawer__nav .ttr-nav__item,
	.ttr-drawer__foot > * {
		transform: none;
		transition-duration: .01ms;
		transition-delay: 0s !important;
	}
	.ttr-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 ttr-locked, which the inquiry modal also sets --
 * that one opens over a dark scrim where the light logo is correct.
 */
body.ttr-nav-open .ttr-logo__img--light,
body.ttr-nav-open.ttr-home .ttr-header:not(.is-solid) .ttr-logo__img--light { opacity: 0; }

/* ============================================== the shore 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 colourful site and a site that could not
 * pick a colour. 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 colours, never a monogram.
 *
 * The colours 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.
 */
.ttr-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(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-dune)  100%);
	box-shadow: inset 0 0 0 1px rgba(22, 20, 15, .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.
 */
.ttr-btn--accent {
	background: linear-gradient(135deg, var(--ttr-coral-dk) 0%, var(--ttr-coral-br) 58%, var(--ttr-coral) 100%);
	border-color: transparent;
	color: #fff;
}
.ttr-btn--accent:hover {
	background: linear-gradient(135deg, var(--ttr-coral-dk) 0%, var(--ttr-coral-br) 58%, var(--ttr-coral) 100%);
	filter: brightness(1.07);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(156, 107, 30, .55);
}

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

/* The stat band gets the full shore rule as its top edge, so the credentials
   strip reads as a ribbon rather than a grey band. */
.ttr-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
		var(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-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. */
.ttr-eyebrow:not(.ttr-eyebrow--light) { color: var(--ttr-brand); }

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

/* The hero closes on the shore rule, full width — the same four colours in the
   same order as the bar under every heading and in the favicon. */
.ttr-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 5px;
	z-index: 3;
	background: linear-gradient(90deg,
		var(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-dune)  100%);
}

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

/* The portrait frame follows the photograph rather than imposing a square on
   it — his headshot is 4:5 and a square crop takes off his hair and his arms. */
.ttr-split__media--portrait { max-width: 24rem; margin-inline: auto; }

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

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

@media (max-width: 900px) {
	.ttr-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. */
.ttr-foot__firmmark {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	margin-top: 1.5rem;
	opacity: .92;
}

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


/* ================================================ the hero video loop ==
 *
 * The poster is a real <img> so it paints with the page; the video fades in
 * over it only once it can actually play, or the fade shows a black box while
 * the first frames arrive.
 */
.ttr-hero__poster,
.ttr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

.ttr-hero__video {
	opacity: 0;
	transition: opacity .9s var(--ttr-ease);
	pointer-events: none;
}

.ttr-hero__video.is-ready { opacity: 1; }

/*
 * At 900px and under the <picture> swaps in hero-mobile.jpg, a 3:4 crop with
 * the flag right of centre. 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) {
	.ttr-hero__poster { object-position: 60% 30%; }
}

/* ==================================================== the floating call ==
 *
 * Red, white and blue rather than a single brand colour: 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 navy pill on a navy-scrimmed
 * hero disappears.
 */
.ttr-callbar {
	position: fixed;
	right: clamp(.9rem, 2vw, 1.5rem);
	bottom: clamp(.9rem, 2vw, 1.5rem);
	z-index: 80;
}

.ttr-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(22, 20, 15, .55), 0 2px 6px rgba(22, 20, 15, .16);
	text-decoration: none;
	overflow: hidden;
	transition: transform .22s var(--ttr-ease), box-shadow .22s var(--ttr-ease);
}
.ttr-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(22, 20, 15, .6); }

/* The flag band, along the bottom edge of the pill. */
.ttr-callbar__call::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-dune)  100%);
}

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

.ttr-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.ttr-callbar__txt strong {
	font-family: var(--ttr-display);
	font-size: .95rem;
	font-weight: 400;
	color: var(--ttr-brand);
}
.ttr-callbar__txt em {
	font-style: normal;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ttr-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.
	 */
	.ttr-header__actions .ttr-callnow { display: none; }
	.ttr-header__inner { gap: .75rem; }

	/*
	 * Size the logo through the tokens, not with height:auto.
	 *
	 * The height is a calc that interpolates on --ttr-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.
	 */
	/*
	 * 72/46, not the lineage's 44/30. This is the size most prospects see —
	 * Adam texts the link — and at 44px Rex Homes' stacked mark leaves a
	 * wordmark about eleven pixels tall (themes/CLAUDE.md trap 12
	 * amendment). This block re-declares the token AFTER the :root at the
	 * top of the sheet, so it is the one that actually decides.
	 */
	:root { --ttr-logo-max: 72px; --ttr-logo-min: 46px; }
	.ttr-logo--header .ttr-logo__img { max-width: 52vw; }
}

/* ------------------------------------------- drawer: is-open, and only that --
 *
 * `.ttr-nav__item:focus-within > .ttr-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.
 */
.ttr-drawer__nav .ttr-nav__item:hover > .ttr-nav__sub,
.ttr-drawer__nav .ttr-nav__item:focus-within > .ttr-nav__sub {
	opacity: 0;
	max-height: 0;
	padding-bottom: 0;
}

.ttr-drawer__nav .ttr-nav__item.is-open > .ttr-nav__sub,
.ttr-drawer__nav .ttr-nav__item.is-open:hover > .ttr-nav__sub,
.ttr-drawer__nav .ttr-nav__item.is-open:focus-within > .ttr-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 shore rule, carrying ink type.
 */
.ttr-section--dark {
	background: linear-gradient(168deg, var(--ttr-surf-pale) 0%, var(--ttr-shell) 46%, var(--ttr-sand) 100%);
	color: var(--ttr-body);
	position: relative;
}
.ttr-section--dark::before,
.ttr-section--dark::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-dune)  100%);
}
.ttr-section--dark::before { top: 0; }
.ttr-section--dark::after  { bottom: 0; }

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

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

/* ======================================= the town grid carries the thesis ==
 *
 * The eight-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 colour
 * 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 colours at full contrast on a ground no darker than 8%.
 */
.ttr-market:nth-child(-n+4) .ttr-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--ttr-surf-pale) 100%);
	border-color: #D9D4E4;
}
.ttr-market:nth-child(n+5) .ttr-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, #F5F0E8 100%);
	border-color: #E6DAC7;
}

/* A colour 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. */
.ttr-market__link { position: relative; overflow: hidden; }
.ttr-market__link::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.ttr-market:nth-child(-n+4) .ttr-market__link::before { background: var(--ttr-surf); }
.ttr-market:nth-child(n+5)  .ttr-market__link::before { background: var(--ttr-sand-dp); }

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

/* The map outline was a pale grey 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 colour so it reads as intentional artwork either way. */
.ttr-market:nth-child(-n+4) .ttr-market__shape svg * { fill: var(--ttr-surf); opacity: .5; }
.ttr-market:nth-child(n+5)  .ttr-market__shape svg * { fill: var(--ttr-sand-dp); opacity: .62; }

/* ------------------------------------------------- the closer, also light --
 *
 * Same call as .ttr-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 shore rule — so the eye still stops on it.
 */
.ttr-closer {
	background: linear-gradient(168deg, var(--ttr-surf-pale) 0%, var(--ttr-shell) 52%, var(--ttr-sand) 100%);
	color: var(--ttr-body);
	border-top: 4px solid transparent;
	border-image: linear-gradient(90deg,
		var(--ttr-brand) 0%,   var(--ttr-brand) 25%,
		var(--ttr-surf)  25%,  var(--ttr-surf)  50%,
		var(--ttr-coral) 50%,  var(--ttr-coral) 75%,
		var(--ttr-dune)  75%,  var(--ttr-dune)  100%) 1;
}
.ttr-closer::before {
	background: radial-gradient(circle, rgba(111, 125, 92, .16) 0%, transparent 62%);
}
.ttr-closer__title { color: var(--ttr-ink); }
.ttr-closer__lede  { color: var(--ttr-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.ttr-closer .ttr-eyebrow { color: var(--ttr-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.
 */
.ttr-foot__h { color: rgba(255, 255, 255, .62); }
.ttr-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }

/* The floating call pill's number sat on --ttr-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 colour at this size. */
.ttr-callbar__txt em { color: var(--ttr-coral-dk); }

/* The closer's secondary button was .ttr-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. */
.ttr-closer .ttr-btn--ghost-light {
	border-color: var(--ttr-brand);
	color: var(--ttr-brand);
}
.ttr-closer .ttr-btn--ghost-light:hover {
	background: var(--ttr-brand);
	border-color: var(--ttr-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. */
.ttr-foot__addr { text-wrap: balance; }

/* The licence line under an agent's name was --ttr-faint, which is 2.7:1 on
   the card — fine as a decorative grey, and this is not decorative. California
   (and most states) require the number to be legible in advertising. */
.ttr-member__license { color: var(--ttr-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. */
.ttr-split__media--team { max-width: none; width: 100%; }
.ttr-figure--team {
	aspect-ratio: auto;
	margin: 0;
	padding: 1.5rem 1rem 0;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--ttr-shell) 0%, var(--ttr-tint-2) 100%);
	overflow: hidden;
	position: relative;
}
.ttr-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. */
.ttr-split__media--scene { max-width: none; width: 100%; }
.ttr-figure--scene {
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--ttr-shadow-lg);
}
.ttr-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figures set large; word labels untouched. */
.ttr-creds__label--num {
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--ttr-brand);
}
.ttr-creds__label--num + .ttr-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(). */
.ttr-split__media--square { max-width: 22rem; margin-inline: auto; }
.ttr-split__media--square .ttr-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .ttr-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.
 */
/*
 * --tone and --tone-pale are FILLS. themes/CLAUDE.md trap 33: every build in
 * this lineage finds inherited rules using them for TYPE, and the splitfeat
 * eyebrow is the one that recurs — measured here at 4.08:1, gold on its own
 * pale wash. --tone-ink is the text-safe partner; it is what the rules below
 * use, and it is the only one allowed to colour a letter.
 */
.ttr-tone--brand { --tone: var(--ttr-brand); --tone-pale: var(--ttr-brand-pale); --tone-ink: var(--ttr-brand); }
.ttr-tone--coral { --tone: var(--ttr-coral); --tone-pale: var(--ttr-coral-pale); --tone-ink: var(--ttr-coral-dk); }
.ttr-tone--surf  { --tone: var(--ttr-surf-dk); --tone-pale: var(--ttr-surf-pale); --tone-ink: var(--ttr-surf-dk); }
.ttr-tone--dune  { --tone: var(--ttr-dune-dk); --tone-pale: var(--ttr-dune-pale); --tone-ink: var(--ttr-dune-dk); }

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

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

/* bento: coloured tiles, one big counting number */
.ttr-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ttr-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(--ttr-ease), box-shadow .35s var(--ttr-ease); }
.ttr-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.ttr-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--ttr-shadow-lg); }
.ttr-bento__tile--wide { grid-column: span 2; }
.ttr-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.ttr-bento__tile--big::after { display: none; }
.ttr-bento__tile--big .ttr-bento__title, .ttr-bento__tile--big .ttr-bento__body { color: #fff; }
.ttr-bento__big { display: block; font-family: var(--ttr-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.ttr-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone-ink, var(--tone)); font-weight: 700; margin-bottom: .9rem; }
.ttr-bento__title { font-family: var(--ttr-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--ttr-ink); font-weight: 400; }
.ttr-bento__body { margin: 0; color: var(--ttr-body); font-size: .95rem; line-height: 1.55; }

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

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

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

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

	/*
	 * themes/CLAUDE.md trap 55. The split panels rest at translateX(±28px) and
	 * the timeline items at translateX(18px) until the IntersectionObserver
	 * reveals them. A desktop gutter swallows that; a 390px viewport does not,
	 * so the document is ~398px wide and drags sideways for the whole scroll —
	 * and because the panel is not revealed until you reach it, no screenshot
	 * taken at the top of the page can see it.
	 *
	 * Under 900px both reveals go vertical. It reads the same, and it is the
	 * direction the reader is already moving. This block sits BELOW the rules
	 * it overrides (trap 51) — a media query adds no specificity, so source
	 * order is the only thing deciding this.
	 */
	html.js .ttr-timeline .ttr-timeline__item { transform: translateY(18px); }
	html.js .ttr-splitfeat__panel[data-ttr-reveal] { transform: translateY(18px); }
}

/* long reviews: the first 46 words, and the rest in place (never cut off) */
.ttr-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ttr-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ttr-quote__full[hidden] { display: none; }

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

/*
 * ── Tokens set-palette.py does not own ────────────────────────────────────
 *
 * themes/CLAUDE.md trap 60: the generated neutrals carry a hue nobody chose,
 * and the WCAG table the script prints says nothing about them. On this build
 * the brand IS violet, so a violet-leaning grey ramp is right and has been
 * left alone — but --ttr-eyebrow-lt has to be declared, because the light
 * eyebrow is the one piece of type in this lineage that sits over a
 * photograph whose brightness changes frame to frame.
 *
 * Declared last so it wins on source order without editing the block above
 * (trap 51).
 */
:root {
	--ttr-eyebrow-lt: #F0E4CC;
}

/* ── Agent portal (bb-agent-portal) ──────────────────────────────────────
 * The sign-in link in the footer colophon, and the portal's own accent so the
 * page Mike manages his listings on wears his colours rather than the
 * plugin's. The plugin's stylesheet only loads on the portal page; this
 * theme's loads everywhere, which is why both live here.
 */
.bbap-footer-link {
	display: inline-block;
	margin-top: .85rem;
	font-size: .76rem;
	letter-spacing: .04em;
	color: var(--ttr-brand-lt);
	text-decoration: none;
	opacity: .75;
	transition: opacity .2s var(--ttr-ease);
}
.bbap-footer-link:hover { opacity: 1; text-decoration: underline; }

/*
 * Doubled class on purpose. The plugin declares its own
 * `.bbap { --bbap-accent: #1d1d1f }` and its stylesheet loads AFTER this one,
 * so a plain `.bbap` here ties on specificity and loses on source order — the
 * sign-in button came out near-black (trap 51). `.bbap.bbap` wins whatever the
 * enqueue order turns out to be, without reaching for !important.
 */
.bbap.bbap {
	--bbap-accent: var(--ttr-brand);
	--bbap-accent-ink: #ffffff;
}

/* Mike's own stacked logo in the footer — emblem over wordmark, so it needs
   height rather than width. The masthead's wide drawn lockup is unaffected. */
.ttr-logo--footer .ttr-logo__img { height: auto; width: auto; max-height: 104px; max-width: 74vw; }
@media (max-width: 720px) {
	.ttr-logo--footer .ttr-logo__img { max-height: 88px; }
}

/* ── The call pill's face (trap 59) ──────────────────────────────────────
 * The disc grows from the glyph plate's 2.35rem, because 2.35rem is not
 * enough face to recognise anybody by — which is the entire point of putting
 * a face there. White ring then a brand ring, because it floats over
 * photographs and a bare circle dissolves into them.
 */
.ttr-callbar__ico--face {
	position: relative;
	width: 2.9rem;
	height: 2.9rem;
	background: none;          /* .ttr-callbar__ico sets a fill; a coloured
	                              ring inside the photograph looks like a bug */
}
.ttr-callbar__face {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ttr-brand);
}
.ttr-callbar__badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--ttr-brand);
	box-shadow: 0 0 0 2px #fff;
}
.ttr-callbar__badge svg { width: 11px; height: 11px; }
/* .ttr-icon colours every glyph with the brand, which is this badge's own
   fill — the phone vanished into it. White on violet. */
.ttr-callbar__badge .ttr-icon { color: #fff; }

/* The compact roster card's link, where the bio would otherwise be. */
.ttr-member__more {
	display: inline-block;
	margin-top: .35rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ttr-brand);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--ttr-brand) 35%, transparent);
	padding-bottom: 1px;
}
.ttr-member__more:hover { border-bottom-color: var(--ttr-brand); }

/* Compact roster (the home page): two cards abreast. The full-width row is
   built around a bio filling the right column, and with the bio gone it left
   half the card empty. */
/*
 * The roster's desktop rules give the FIRST member a full-width row
 * (`:first-child { grid-column: 1 / -1 }`) and, on a two-person firm, the
 * second one too — a deliberate treatment for cards carrying a bio.
 *
 * With the bio gone those rows are half empty, so compact mode has to undo
 * BOTH of them. `.ttr-team--compact .ttr-member:first-child` ties the original
 * on specificity (0,2,1) and wins on source order, which is the only reason
 * this works — a plain `.ttr-team--compact .ttr-member` would lose (trap 51).
 */
.ttr-team--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ttr-team--compact .ttr-member { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 1.5rem; }

@media (min-width: 900px) {
	.ttr-team--compact .ttr-member:first-child,
	.ttr-team--compact .ttr-member:nth-child(2):last-child {
		grid-column: auto;
		grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
	}
}

@media (max-width: 899px) {
	.ttr-team--compact { grid-template-columns: 1fr; }
}


/* ---- "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.
 */
.ttr-creds__head {
	text-align: center;
	padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.ttr-creds__head .ttr-eyebrow { display: block; }
.ttr-creds__title {
	margin: .45rem 0 0;
	font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
	line-height: 1.12;
}
.ttr-creds__list { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 620px) {
	.ttr-creds__head { padding-top: clamp(2rem, 8vw, 2.6rem); }
}


/* ========================================================================== *
 *  TOP TIER REALTY — the layer on top of the lineage.
 *
 *  Everything below overrides rules above it on source order (trap 51), so a
 *  change to the Top Tier look is made HERE, not by editing the inherited
 *  rule several hundred lines up and hoping it wins.
 * ========================================================================== */

/* ---- type: Cormorant is lighter and smaller on the body than Instrument, so
   the display sizes come up a step and the weight goes to 500. ---- */
h1, h2, h3, h4 { font-family: var(--ttr-display); font-weight: 500; letter-spacing: -.005em; color: var(--ttr-ink); }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.1vw, 3rem); line-height: 1.08; }
h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); line-height: 1.15; }
body { font-family: var(--ttr-body-font); font-weight: 400; color: var(--ttr-body); background: var(--ttr-shell); }
.ttr-lede { font-weight: 400; }

.ttr-eyebrow {
	font-family: var(--ttr-body-font);
	font-weight: 500;
	font-size: .74rem;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.ttr-eyebrow:not(.ttr-eyebrow--light) { color: var(--ttr-accent); }
.ttr-eyebrow--light,
.ttr-banner .ttr-eyebrow--light,
.ttr-hero .ttr-eyebrow--light { color: #fff; text-shadow: 0 1px 12px rgba(16, 18, 22, .55); }

/* ---- the rule under every heading: their own logo ornament, a gold line
   broken by a diamond (the bottom row of the lockup they supplied). ---- */
.ttr-rule {
	position: relative;
	display: block;
	width: 7.5rem;
	height: 9px;
	margin: 1.1rem 0 1.35rem;
	background:
		linear-gradient(90deg, var(--ttr-accent-mid), var(--ttr-accent-lt)) left center / calc(50% - 10px) 1px no-repeat,
		linear-gradient(90deg, var(--ttr-accent-lt), var(--ttr-accent-mid)) right center / calc(50% - 10px) 1px no-repeat;
	border: 0;
	border-image: none;
}
.ttr-rule::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 7px; height: 7px;
	background: var(--ttr-accent);
	transform: translate(-50%, -50%) rotate(45deg);
}
.ttr-head--center .ttr-rule,
.ttr-creed .ttr-rule,
.ttr-guide__intro .ttr-rule { margin-inline: auto; }

/* ---- buttons: warm black, and the logo gold for the thing to press ---- */
.ttr-btn {
	font-family: var(--ttr-body-font);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .78rem;
	border-radius: 2px;
	background: var(--ttr-brand);
	color: #fff;
	border: 1px solid var(--ttr-brand);
}
.ttr-btn:hover { background: var(--ttr-brand-mid); border-color: var(--ttr-brand-mid); color: #fff; }
.ttr-btn--accent,
.ttr-btn--accent:visited {
	background: var(--ttr-accent-metal);
	border-color: #7A5720;
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ttr-btn--accent:hover { background: linear-gradient(135deg, #7A5720, #5F4318); border-color: #5F4318; color: #fff; }
.ttr-btn--ghost { background: transparent; color: var(--ttr-ink); border-color: var(--ttr-brand); }
.ttr-btn--ghost:hover { background: var(--ttr-brand); color: #fff; }
.ttr-btn--ghost-light { background: rgba(16, 18, 22, .18); color: #fff; border-color: rgba(255, 255, 255, .85); }
.ttr-btn--ghost-light:hover { background: #fff; color: var(--ttr-ink); border-color: #fff; }

/* ---- utility bar and masthead: light, solid, everywhere ---- */
.ttr-utility { background: var(--ttr-sky); color: var(--ttr-body); border-bottom: 1px solid var(--ttr-line); }
.ttr-utility a, .ttr-utility__tagline { color: var(--ttr-body); }
.ttr-utility a:hover { color: var(--ttr-accent); }
.ttr-utility__tagline { letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; }

.ttr-header__bar { background: var(--ttr-shell); border-bottom: 1px solid var(--ttr-line); }

/*
 * The home page does NOT float the masthead over the hero on this site. The
 * lineage pulled the hero up under a transparent bar with a white logo; here
 * the logo is the client's own full-colour artwork and only reads on ivory,
 * and a transparent bar over a Ken Burns loop is the trap-42 contrast problem
 * on every frame. So the bar is simply solid, as on every other page.
 */
.ttr-home .ttr-hero { margin-top: 0; }
.ttr-home .ttr-hero__inner { padding-top: 0; }
.ttr-home .ttr-header__bar,
.ttr-home .ttr-header:not(.is-solid) .ttr-header__bar { background: var(--ttr-shell); border-bottom-color: var(--ttr-line); }
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__list > li > a,
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__toggle,
.ttr-home .ttr-header:not(.is-solid) .ttr-callnow { color: var(--ttr-ink); }
.ttr-home .ttr-header:not(.is-solid) .ttr-burger__box i { background: var(--ttr-ink); }
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__list > li > a::after { background: var(--ttr-accent); }
.ttr-home .ttr-header:not(.is-solid) .ttr-header__actions .ttr-btn--sm { background: var(--ttr-brand); border-color: var(--ttr-brand); color: #fff; }
.ttr-home .ttr-header:not(.is-solid) .ttr-burger,
.ttr-home .ttr-header:not(.is-solid) .ttr-burger[aria-expanded="true"] { background: transparent; }
.ttr-home .ttr-header:not(.is-solid) .ttr-burger[aria-expanded="true"] .ttr-burger__box i { background: var(--ttr-ink); }
.ttr-logo__img--light { display: none !important; }

.ttr-nav__list > li > a {
	font-family: var(--ttr-body-font);
	font-weight: 500;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ttr-ink);
}
.ttr-nav__list > li > a::after { background: var(--ttr-accent); }
.ttr-nav__sub { border-top: 2px solid var(--ttr-accent); }

/* The client's lockup is 6.6:1 — size by height, never let a max-width
   condense it (trap 86). */
.ttr-logo--header .ttr-logo__img {
	width: auto;
	object-fit: contain;
	object-position: left center;
}
@media (max-width: 720px) {
	:root { --ttr-logo-max: 38px; --ttr-logo-min: 34px; }
	.ttr-logo--header .ttr-logo__img { height: auto; width: min(62vw, 250px); max-width: none; }
}

/* ---- hero ---- */
.ttr-hero { min-height: clamp(34rem, 82vh, 50rem); background: #1B1A16; }
.ttr-hero__inner {
	max-width: var(--ttr-wrap);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}
.ttr-hero__copy { max-width: 44rem; }
.ttr-hero__title {
	font-size: clamp(2.9rem, 1.6rem + 4.4vw, 5.6rem);
	font-weight: 500;
	line-height: 1.0;
	color: #fff;
	text-shadow: 0 2px 28px rgba(16, 18, 22, .45), 0 1px 3px rgba(16, 18, 22, .35);
}
.ttr-hero__lede {
	font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
	line-height: 1.6;
	color: #fff;
	max-width: 40ch;
	text-shadow: 0 1px 14px rgba(16, 18, 22, .6), 0 1px 2px rgba(16, 18, 22, .4);
}
.ttr-hero__phone { color: #fff; text-shadow: 0 1px 10px rgba(16, 18, 22, .6); }
.ttr-hero__phone strong { color: #fff; }
.ttr-hero__phone .ttr-icon { color: var(--ttr-accent-lt); }

/*
 * The scrim: white type on a soft NEUTRAL shadow on the text side only,
 * clearing to untouched photograph on the right (feedback_hero_treatment:
 * ~.60 at the edge → .50 at 40% → .26 at 60% → 0 at 80%, plus a light bottom
 * fade). Replaces all three inherited layers at once (trap 24 amendment).
 */
.ttr-hero__scrim {
	background:
		linear-gradient(to right, rgba(12, 12, 12, .62) 0%, rgba(12, 12, 12, .50) 38%, rgba(12, 12, 12, .26) 60%, rgba(12, 12, 12, 0) 80%),
		linear-gradient(to bottom, rgba(12, 12, 12, .10) 0%, rgba(12, 12, 12, 0) 30%, rgba(12, 12, 12, .28) 100%);
}
@media (max-width: 900px) {
	.ttr-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; }
	.ttr-hero { min-height: calc(100svh - var(--ttr-header-h)); align-items: flex-end; padding-block: 3rem 2.5rem; }
	.ttr-hero__scrim {
		background:
			linear-gradient(to bottom, rgba(12, 12, 12, .18) 0%, rgba(12, 12, 12, .12) 22%, rgba(12, 12, 12, .46) 46%, rgba(12, 12, 12, .60) 72%, rgba(12, 12, 12, .66) 100%);
	}
}

/* The seal — the #3 ranking, set like a medal. A badge, not a box around the
   copy (feedback_hero_treatment rules out bubbles behind the text). */
.ttr-seal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(12rem, 16vw, 15rem);
	aspect-ratio: 1;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	color: var(--ttr-ink);
	background: radial-gradient(circle at 50% 38%, #FFFDF8 0%, #F7F0E1 70%, #EFE3C8 100%);
	box-shadow: 0 18px 50px -18px rgba(12, 12, 12, .55), 0 0 0 1px rgba(255, 255, 255, .6);
	transition: transform .4s var(--ttr-ease);
}
.ttr-seal:hover { transform: translateY(-3px) rotate(-1.5deg); }
.ttr-seal__ring {
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 2px solid transparent;
	background: var(--ttr-gold-sheen) border-box;
	-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.ttr-seal__big {
	font-family: var(--ttr-display);
	font-weight: 600;
	font-size: clamp(3.6rem, 2.4rem + 3vw, 5rem);
	line-height: .9;
	background: linear-gradient(160deg, #A87C35 0%, #6F4F1B 55%, #8A6424 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ttr-seal__label { margin-top: .35rem; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ttr-seal__rule { width: 2.4rem; height: 1px; margin: .55rem 0 .45rem; background: var(--ttr-accent); }
.ttr-seal__by { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ttr-accent); font-weight: 600; }
.ttr-seal__name { margin-top: .3rem; font-family: var(--ttr-display); font-style: italic; font-size: 1.05rem; color: var(--ttr-body); }
@media (max-width: 900px) {
	.ttr-seal { width: 8.75rem; justify-self: start; order: -1; }
	.ttr-seal__big { font-size: 3rem; }
	.ttr-seal__label { font-size: .5rem; letter-spacing: .14em; }
	.ttr-seal__by { font-size: .52rem; }
	.ttr-seal__name { font-size: .82rem; margin-top: .15rem; }
	.ttr-seal__rule { margin: .35rem 0 .3rem; }
}

/* ---- Experience Matters ---- */
.ttr-creds { background: var(--ttr-shell); border-block: 0; }
.ttr-creds__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--ttr-line);
}
.ttr-creds__list li { padding: clamp(1.6rem, 3vw, 2.4rem) 1rem; text-align: center; border-left: 1px solid var(--ttr-line); }
.ttr-creds__list li:first-child { border-left: 0; }
.ttr-creds__label,
.ttr-creds__label--num {
	display: block;
	font-family: var(--ttr-display);
	font-weight: 600;
	font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem);
	line-height: 1;
	background: linear-gradient(160deg, #A87C35 0%, #7A5720 60%, #8A6424 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ttr-creds__note { display: block; margin-top: .7rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ttr-body); font-weight: 500; }
@media (max-width: 780px) {
	.ttr-creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ttr-creds__list li:nth-child(3) { border-left: 0; }
	.ttr-creds__list li:nth-child(n+3) { border-top: 1px solid var(--ttr-line); }
	.ttr-creds__note { font-size: .64rem; letter-spacing: .12em; }
}

/* ---- Meet Jim ---- */
.ttr-meet .ttr-split { align-items: center; }
.ttr-meet .ttr-split__media { position: relative; }
.ttr-meet .ttr-split__media .ttr-figure { border-radius: 2px; box-shadow: 18px 18px 0 -1px var(--ttr-tint-2); }
.ttr-meet__tag {
	position: absolute;
	left: 1rem; bottom: 1rem;
	padding: .45rem .8rem;
	background: rgba(251, 248, 242, .94);
	border-left: 3px solid var(--ttr-accent);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ttr-ink);
	font-weight: 500;
}
.ttr-meet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.ttr-meet__actions .ttr-btn { margin-top: 0; }
.ttr-meet__call { display: inline-flex; align-items: center; gap: .5rem; color: var(--ttr-ink); text-decoration: none; font-weight: 500; }
.ttr-meet__call .ttr-icon { color: var(--ttr-accent); }

/* ---- Awards & Recognition ---- */
.ttr-awards { background: var(--ttr-shell); }
.ttr-awards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}
.ttr-award {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.2rem 1.25rem 1.9rem;
	background: #fff;
	border: 1px solid var(--ttr-line);
	border-top: 3px solid transparent;
	border-image: var(--ttr-gold-sheen) 1;
	border-image-width: 3px 0 0 0;
}
.ttr-award__laurel { color: var(--ttr-accent-mid); height: 0; overflow: visible; }
.ttr-award__laurel svg { display: block; transform: translateY(-.4rem); opacity: .7; }
.ttr-award__big {
	position: relative;
	margin-top: -1.2rem;
	font-family: var(--ttr-display);
	font-weight: 600;
	font-size: clamp(2.2rem, 1.7rem + 1.4vw, 2.9rem);
	line-height: 1;
	color: var(--ttr-accent);
	min-height: 3.2rem;
	display: flex;
	align-items: center;
}
.ttr-award__title { margin-top: .6rem; font-family: var(--ttr-display); font-size: 1.2rem; font-weight: 500; color: var(--ttr-ink); line-height: 1.2; }
.ttr-award__by { margin-top: .55rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ttr-muted); font-weight: 500; }
.ttr-awards__links { margin: 1.75rem 0 0; text-align: center; font-size: .82rem; color: var(--ttr-muted); }
.ttr-awards__links a { color: var(--ttr-accent); text-underline-offset: 3px; }
@media (max-width: 900px) { .ttr-awards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ttr-award { padding: 1.9rem .8rem 1.5rem; } .ttr-award__title { font-size: 1.05rem; } }

/* ---- reviews ---- */
.ttr-trustindex { margin: 0 auto 2.5rem; max-width: 72rem; min-height: 4rem; }
.ttr-quote { background: #fff; border: 1px solid var(--ttr-line); border-radius: 2px; position: relative; }
.ttr-quote__mark {
	display: block;
	font-family: var(--ttr-display);
	font-size: 3.6rem;
	line-height: .6;
	height: 1.6rem;
	color: var(--ttr-accent-lt);
}
.ttr-quote blockquote { font-size: .98rem; line-height: 1.7; color: var(--ttr-body); }
.ttr-quote__name { font-family: var(--ttr-body-font); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ttr-accent); }
.ttr-quote__more { color: var(--ttr-ink); }

/* ---- the roster: six people, three across, photograph on top ---- */
.ttr-team--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.ttr-team--compact .ttr-member,
.ttr-team--compact .ttr-member:first-child,
.ttr-team--compact .ttr-member:nth-child(2):last-child {
	grid-column: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid var(--ttr-line);
}
.ttr-team--compact .ttr-member__photo .ttr-figure { aspect-ratio: 3 / 4; border-radius: 0; }
.ttr-team--compact .ttr-member__photo img { object-position: 50% 12%; }
.ttr-team--compact .ttr-member__body { padding: 1.25rem 1.25rem 1.4rem; text-align: center; }
.ttr-team--compact .ttr-member__body .ttr-rule { margin: .6rem auto .8rem; width: 5rem; }
.ttr-team--compact .ttr-member__name { font-size: 1.55rem; margin: 0; }
.ttr-team--compact .ttr-member__role { margin: .2rem 0 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ttr-muted); }
@media (max-width: 900px) { .ttr-team--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
	.ttr-team--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
	.ttr-team--compact .ttr-member__body { padding: .9rem .6rem 1rem; }
	.ttr-team--compact .ttr-member__name { font-size: 1.2rem; }
	.ttr-team--compact .ttr-member__role { font-size: .58rem; letter-spacing: .1em; }
	.ttr-team--compact .ttr-member__more { font-size: .78rem; }
}

/* ---- steps and guides ---- */
.ttr-steps--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ttr-steps--wide { grid-template-columns: 1fr; } }
.ttr-step__num { font-family: var(--ttr-display); color: var(--ttr-accent); font-weight: 600; }

.ttr-guide__intro { text-align: center; }
.ttr-guide {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
}
.ttr-guide__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.6rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ttr-line);
	border-left: 3px solid var(--ttr-accent-mid);
}
.ttr-guide__num {
	font-family: var(--ttr-display);
	font-weight: 600;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--ttr-accent);
	min-width: 2.6rem;
}
.ttr-guide__title { margin: .1rem 0 .45rem; font-size: 1.45rem; }
.ttr-guide__text { margin: 0; line-height: 1.65; }
.ttr-guide__cta { margin: 2.5rem 0 0; text-align: center; }
@media (max-width: 820px) { .ttr-guide { grid-template-columns: 1fr; } }

/* ---- buyer questionnaire ---- */
.ttr-quest__group { margin: 0 0 1.75rem; padding: 1.5rem 1.5rem .5rem; border: 1px solid var(--ttr-line); background: #fff; }
.ttr-quest__group legend { padding: 0 .5rem; font-family: var(--ttr-display); font-size: 1.35rem; color: var(--ttr-ink); }
.ttr-quest__label { display: block; margin-bottom: .55rem; font-weight: 500; color: var(--ttr-ink); font-size: .92rem; }
.ttr-quest__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ttr-quest__opt { position: relative; cursor: pointer; }
.ttr-quest__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ttr-quest__opt span { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--ttr-line); border-radius: 999px; font-size: .86rem; background: var(--ttr-shell); transition: all .2s var(--ttr-ease); }
.ttr-quest__opt input:checked + span { background: var(--ttr-brand); color: #fff; border-color: var(--ttr-brand); }
.ttr-quest__opt input:focus-visible + span { outline: 2px solid var(--ttr-accent); outline-offset: 2px; }

/* ---- listings pages ---- */
.ttr-empty--listing { max-width: 40rem; margin: 0 auto; text-align: center; padding: clamp(2rem, 5vw, 3.5rem); background: #fff; border: 1px solid var(--ttr-line); }
.ttr-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.5rem; }

/* ---- banners: neutral scrim, white type (trap 66) ---- */
.ttr-banner { background: #1B1A16; border-bottom: 3px solid transparent; border-image: var(--ttr-gold-sheen) 1; }
.ttr-banner h1, .ttr-banner .ttr-banner__title { color: #fff; text-shadow: 0 2px 22px rgba(16, 18, 22, .5); }

/* ---- the mission, and the closer: light bands with a gold edge ---- */
.ttr-creed { background: linear-gradient(180deg, var(--ttr-tint) 0%, var(--ttr-shell) 100%); border-top: 1px solid var(--ttr-line); }
.ttr-creed__goal { font-family: var(--ttr-display); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.35; color: var(--ttr-ink); }
.ttr-creed__close { font-family: var(--ttr-body-font); letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: var(--ttr-accent); font-weight: 600; }
.ttr-closer {
	background: linear-gradient(170deg, var(--ttr-tint) 0%, var(--ttr-shell) 55%, var(--ttr-tint-2) 100%);
	border-top: 3px solid transparent;
	border-image: var(--ttr-gold-sheen) 1;
}
.ttr-closer::before { background: radial-gradient(circle, rgba(217, 182, 122, .18) 0%, transparent 62%); }
.ttr-closer .ttr-eyebrow { color: var(--ttr-accent); }

/* ---- footer: light, like the rest (feedback_dark_themes_too_dark) ---- */
.ttr-foot { background: var(--ttr-tint); color: var(--ttr-body); border-top: 1px solid var(--ttr-line); }
.ttr-foot::before { background: radial-gradient(ellipse at center, rgba(217, 182, 122, .16) 0%, transparent 64%); }
.ttr-foot::after { display: none; }
.ttr-foot a { color: var(--ttr-ink); }
.ttr-foot a:hover { color: var(--ttr-accent); }
.ttr-foot__h { font-family: var(--ttr-body-font); font-weight: 600; font-size: .7rem; letter-spacing: .22em; color: var(--ttr-accent); }
.ttr-foot__blurb { color: var(--ttr-body); }
.ttr-foot__menu a, .ttr-foot__link, .ttr-foot__addr, .ttr-foot__social, .ttr-foot__social a { color: var(--ttr-body); }
.ttr-foot em { color: var(--ttr-muted); }
.ttr-foot__brand .ttr-logo__img,
.ttr-logo--footer .ttr-logo__img { height: auto; width: min(15rem, 70vw); max-height: none; max-width: none; }
.ttr-foot__legal { background: var(--ttr-sky); border-top: 1px solid var(--ttr-line); color: var(--ttr-muted); }
.ttr-foot__legal a, .ttr-foot__legal p { color: var(--ttr-muted); }
.ttr-foot__license { color: var(--ttr-body) !important; max-width: 70ch; }
/* HUD's mark is black line art: on this light footer it needs no inversion
   (trap 48 is about dark footers). */
.ttr-foot .ttr-eho--official, .ttr-foot__eho img { filter: none !important; opacity: .85; }

/* ---- floating call pill ---- */
.ttr-callbar__call { background: #fff; border: 1px solid var(--ttr-line); }
.ttr-callbar__ico--face .ttr-callbar__face { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ttr-accent); }
.ttr-callbar__badge { background: var(--ttr-accent); }

/* ---- market cards: sage then champagne, the region's colours ---- */
.ttr-market__name { font-family: var(--ttr-display); font-weight: 500; }
.ttr-market__cta { color: var(--ttr-accent); }

/* ---- property cards ---- */
.ttr-card, .ttr-propcard { border-radius: 2px; }

/* ---- agent portal: brand it (trap 51 amendment — .bbap.bbap wins) ---- */
.bbap.bbap { --bbap-accent: #8A6424; --bbap-ink: #16140F; }

/* ---- round two, after the first screenshots ---- */

/* The lineage's four-colour "shore rule" under the hero and over the stats is
   another client's motif; Top Tier's edge is one line of their gold. */
.ttr-hero::after { background: var(--ttr-gold-sheen); height: 3px; }
.ttr-creds { border-top: 0; border-image: none; }

/* Awards: the laurel collided with every figure wider than "#3". A short gold
   diamond rule above the figure instead — the logo's own ornament again. */
.ttr-award__laurel { display: none; }
.ttr-award__big { margin-top: 0; }
.ttr-award::before {
	content: '';
	display: block;
	width: 4.5rem;
	height: 9px;
	margin-bottom: 1rem;
	background:
		linear-gradient(90deg, transparent, var(--ttr-accent-mid)) left center / calc(50% - 8px) 1px no-repeat,
		linear-gradient(90deg, var(--ttr-accent-mid), transparent) right center / calc(50% - 8px) 1px no-repeat,
		linear-gradient(var(--ttr-accent), var(--ttr-accent)) center / 6px 6px no-repeat;
}

/* Home page: the Trustindex wall is dozens of cards long. Show the first rows,
   fade, and send the rest to /testimonials/ where it runs in full. */
.ttr-reviews .ttr-trustindex {
	max-height: 1040px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .ttr-reviews .ttr-trustindex { max-height: 1200px; } }

/* Phones: the floating call pill already carries Jim's number, and it sits
   exactly where the hero's own call line lands — one of them has to go. */
@media (max-width: 900px) { .ttr-hero__phone { display: none; } }

/* ---- round three (Adam, 2026-09-28) ---- */

/* The call pill: Jim's face larger, the phone badge small and pushed OUT to
   the disc's edge so it never sits on his face, and the pill no longer clips
   it. The four-colour band along the bottom was another client's motif. */
.ttr-callbar__call { overflow: visible; padding: .55rem 1.2rem .55rem .55rem; }
.ttr-callbar__call::after { display: none; }
.ttr-callbar__ico--face { width: 3.25rem; height: 3.25rem; }
.ttr-callbar__face { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ttr-accent) !important; }
.ttr-callbar__badge {
	right: -6px;
	bottom: -4px;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--ttr-accent);
	box-shadow: 0 0 0 2px #fff;
}
.ttr-callbar__badge svg { width: 9px; height: 9px; }

/* Trustindex: never show a review rated 3 stars or below (Adam, 2026-09-28:
   "hide that one star"). Every review card carries data-rating from
   Trustindex itself, so this needs no change in the Trustindex account and
   covers any low review that arrives later. The summary line above the cards
   is Trustindex's own and is unchanged. */
.ti-review-item[data-rating^="1"],
.ti-review-item[data-rating^="2"],
.ti-review-item[data-rating^="3"],
.ti-review-item[data-rating^="0"] { display: none !important; }

/* The per-agent contact band */
.ttr-agentform__photo { max-width: 12rem; margin-bottom: 1.25rem; }
.ttr-agentform__photo .ttr-figure { aspect-ratio: 3 / 4; border-radius: 2px; }
.ttr-contact__big--sm { font-size: 1rem; word-break: break-all; }

/* ---- the hero fits one screen (Adam, 2026-09-29) ------------------------
 * Viewport height minus the bars above it: the utility strip (given a fixed
 * height here so the sum is exact, and absent under 1040px) and the masthead
 * shell, which is a fixed-height --ttr-header-h by design (trap 2). svh, not
 * vh, so a phone's collapsing address bar never pushes the buttons below the
 * fold. The floor only protects a very short laptop window.
 */
:root { --ttr-utility-h: 0px; }
@media (min-width: 1041px) {
	:root { --ttr-utility-h: 41px; }
	/* Measured on the live page: the strip renders 41px tall (inner + its
	   own padding + border), so the sum uses 41, not a guess. */
	.ttr-utility { height: 41px; box-sizing: border-box; overflow: hidden; }
}
.ttr-hero {
	height: calc(100vh - var(--ttr-header-h) - var(--ttr-utility-h));
	height: calc(100svh - var(--ttr-header-h) - var(--ttr-utility-h));
	min-height: 30rem;
	max-height: none;
	padding-block: clamp(1.5rem, 4vh, 3rem);
	box-sizing: border-box;
}
.ttr-hero__title { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.8rem); line-height: 1.02; max-width: 16ch; }
.ttr-hero__lede { margin-top: 1rem; }
.ttr-hero__actions { margin-top: 1.5rem; }
@media (max-height: 760px) and (min-width: 901px) {
	.ttr-hero__title { font-size: clamp(2.3rem, 1.2rem + 3vw, 3.8rem); }
	.ttr-seal { width: 11rem; }
	.ttr-seal__big { font-size: 3.4rem; }
}
@media (max-width: 900px) {
	.ttr-hero {
		min-height: 0;
		align-items: flex-end;
		padding-block: 1.25rem 1.5rem;
	}
	.ttr-hero__inner { gap: 1rem; }
	.ttr-hero__title { font-size: clamp(2.1rem, 8.6vw, 2.8rem); }
	.ttr-hero__lede { font-size: 1rem; line-height: 1.5; }
	.ttr-hero__actions { margin-top: 1.1rem; gap: .6rem; }
	.ttr-hero__actions .ttr-btn--lg { padding-block: .85rem; }
	.ttr-seal { width: 7.25rem; }
	.ttr-seal__big { font-size: 2.4rem; }
	.ttr-seal__label { font-size: .45rem; }
	.ttr-seal__by, .ttr-seal__name { font-size: .48rem; }
	.ttr-seal__name { font-size: .72rem; }
}
/* The floating call pill sits over the bottom of a phone screen; the hero's
   buttons have to finish above it. */
@media (max-width: 900px) { .ttr-hero { padding-bottom: 5.75rem; } }

/* Desktop: the balloon is frame one and sits upper-right, so the seal moves
   to the lower right instead of covering it (2026-09-29). */
@media (min-width: 901px) {
	.ttr-hero__inner { align-self: stretch; align-items: center; }
	.ttr-seal { align-self: end; margin-bottom: clamp(0rem, 2vh, 1.5rem); }
}
@media (min-width: 901px) {
	/* Clear the floating call pill in the bottom-right corner (~5rem tall). */
	.ttr-seal { width: clamp(11rem, 14vw, 13rem); margin-bottom: 5.5rem; }
}
/* "Top 25" is twice the width of "#3" — set it a step smaller in the seal. */
.ttr-seal__big { font-size: clamp(2.6rem, 1.8rem + 2vw, 3.6rem); white-space: nowrap; }
@media (max-width: 900px) { .ttr-seal__big { font-size: 1.75rem; } }

/* H1 as two lines: the claim, then the place in italic gold-white. */
.ttr-hero__title { max-width: 13ch; }
.ttr-hero__title-a, .ttr-hero__title-b { display: block; }
.ttr-hero__title-b {
	margin-top: .15em;
	font-style: italic;
	font-weight: 500;
	font-size: .62em;
	color: #F3E4C4;
	max-width: none;
}
@media (max-width: 900px) { .ttr-hero__title { max-width: 12ch; } .ttr-hero__title-b { font-size: .7em; } }

/* Seal copy stays inside the ring. */
.ttr-seal__by { font-size: .56rem; letter-spacing: .1em; }
.ttr-seal__label { font-size: .58rem; letter-spacing: .16em; }
@media (max-width: 900px) {
	.ttr-seal { width: 7.75rem; }
	.ttr-seal__big { font-size: 1.55rem; }
	.ttr-seal__label { font-size: .42rem; letter-spacing: .1em; }
	.ttr-seal__by { font-size: .42rem; letter-spacing: .06em; }
	.ttr-seal__name { font-size: .66rem; }
}
.ttr-hero__title { max-width: 19ch; }
.ttr-hero__copy { max-width: 48rem; }
@media (max-width: 900px) { .ttr-hero__title { max-width: 15ch; } }

/* ---- phones: the seal becomes a badge, and the hero never clips ----------
 * Adam, 2026-09-29: on a phone the circle sat at the top and was cut off. The
 * hero had a fixed height, so on a short phone (667px) the content was taller
 * than the box and overflow:hidden ate the top of it. Now the hero is AT LEAST
 * one screen and grows past it if the copy needs to, and the seal is a one-line
 * badge under the buttons rather than a 7rem circle above the eyebrow.
 */
@media (max-width: 900px) {
	.ttr-hero {
		height: auto;
		min-height: calc(100svh - var(--ttr-header-h));
		padding-top: 2rem;
	}
	.ttr-seal {
		order: 2;
		justify-self: start;
		flex-direction: row;
		align-items: baseline;
		gap: .55rem;
		width: auto;
		aspect-ratio: auto;
		padding: .5rem .95rem .5rem .8rem;
		border-radius: 999px;
		background: rgba(251, 248, 242, .95);
		box-shadow: 0 8px 22px -12px rgba(12, 12, 12, .6);
	}
	.ttr-seal:hover { transform: none; }
	.ttr-seal__ring, .ttr-seal__rule, .ttr-seal__name { display: none; }
	.ttr-seal__big { font-size: 1.25rem; line-height: 1; }
	.ttr-seal__label { margin: 0; font-size: .6rem; letter-spacing: .12em; }
	.ttr-seal__by { font-size: .6rem; letter-spacing: .08em; }
	.ttr-seal__by::before { content: '· '; color: var(--ttr-accent); }
}
@media (max-width: 380px) {
	.ttr-seal { flex-wrap: wrap; row-gap: .1rem; }
	.ttr-seal__by { flex-basis: 100%; padding-left: 0; }
	.ttr-seal__by::before { content: ''; }
}

/* Phones: the circle is hidden and the in-flow badge takes its place. This
   replaces the pill-shaped seal tried just above — its text wrapped. */
.ttr-badge { display: none; }
@media (max-width: 900px) {
	.ttr-hero .ttr-seal { display: none; }
	.ttr-badge {
		display: inline-flex;
		align-items: center;
		gap: .7rem;
		margin-top: 1rem;
		padding: .45rem .9rem .45rem .5rem;
		border-radius: 999px;
		background: rgba(251, 248, 242, .95);
		box-shadow: 0 8px 22px -12px rgba(12, 12, 12, .6);
		text-decoration: none;
		color: var(--ttr-ink);
	}
	.ttr-badge__big {
		display: grid;
		place-items: center;
		min-width: 3.1rem;
		height: 2.3rem;
		padding: 0 .55rem;
		border-radius: 999px;
		background: var(--ttr-accent-metal);
		color: #fff;
		font-family: var(--ttr-display);
		font-weight: 600;
		font-size: 1.05rem;
		white-space: nowrap;
	}
	.ttr-badge__txt { display: flex; flex-direction: column; line-height: 1.2; }
	.ttr-badge__label { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
	.ttr-badge__by { font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ttr-accent); white-space: nowrap; }
	.ttr-hero__actions { margin-top: 1rem; }
	.ttr-hero { padding-top: 1.5rem; }
}
/* Phones: the two hero buttons share one row, which shortens the hero enough
   that the floating call pill no longer lands on the second one. */
@media (max-width: 900px) {
	.ttr-hero__actions { flex-wrap: nowrap; gap: .5rem; }
	.ttr-hero__actions .ttr-btn--lg { flex: 1 1 0; padding-inline: .6rem; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; text-align: center; justify-content: center; }
}

/* ==== the BLACK masthead (Adam, 2026-09-29: "they have black signs") =====
 * Header only, to start. Warm black like the T in their monogram, the utility
 * strip a shade darker, a gold hairline underneath like the rule in the logo.
 * The page below stays light.
 */
.ttr-utility { background: #0C0B08; border-bottom: 1px solid rgba(217, 182, 122, .18); }
.ttr-utility, .ttr-utility a, .ttr-utility__tagline { color: rgba(243, 233, 214, .78); }
.ttr-utility a:hover { color: #E6C98F; }
.ttr-utility .ttr-icon { color: #C9A05A; }

.ttr-header__bar,
.ttr-home .ttr-header__bar,
.ttr-home .ttr-header:not(.is-solid) .ttr-header__bar {
	background: #16140F;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(201, 160, 90, .15), rgba(230, 201, 143, .7) 50%, rgba(201, 160, 90, .15)) 1;
}
.ttr-header.is-solid .ttr-header__bar { box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .7); }

.ttr-nav__list > li > a,
.ttr-nav__toggle,
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__list > li > a,
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__toggle { color: #F3E9D6; }
.ttr-nav__list > li > a:hover,
.ttr-nav__item.is-current > a { color: #E6C98F; }
.ttr-nav__list > li > a::after,
.ttr-home .ttr-header:not(.is-solid) .ttr-nav__list > li > a::after { background: #C9A05A; }

/* Dropdowns match the bar. */
.ttr-nav__sub { background: #1E1B15; border-top: 2px solid #C9A05A; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75); }
.ttr-nav__sub a,
.ttr-home .ttr-nav__sub a { color: rgba(243, 233, 214, .88); }
.ttr-nav__sub a:hover { background: rgba(217, 182, 122, .12); color: #E6C98F; }
/* ...but not inside the light phone drawer, which keeps the body's colours. */
.ttr-drawer__nav .ttr-nav__sub { background: transparent; border-top: 0; box-shadow: none; }
.ttr-drawer__nav .ttr-nav__sub a, .ttr-drawer__nav .ttr-nav__list > li > a, .ttr-drawer__nav .ttr-nav__toggle { color: var(--ttr-ink); }

/* The CTA: logo gold on black, the thing to press. */
.ttr-header__actions .ttr-btn--sm,
.ttr-home .ttr-header:not(.is-solid) .ttr-header__actions .ttr-btn--sm {
	background: var(--ttr-accent-metal);
	border-color: #A87C35;
	color: #fff;
}
.ttr-header__actions .ttr-btn--sm:hover { background: linear-gradient(135deg, #B8894A, #8A6424); color: #fff; }

/* Phones: burger and call button, both readable on black. */
.ttr-burger,
.ttr-home .ttr-header:not(.is-solid) .ttr-burger { border-color: rgba(243, 233, 214, .35); background: transparent; }
.ttr-burger__box i,
.ttr-home .ttr-header:not(.is-solid) .ttr-burger__box i,
.ttr-home .ttr-header:not(.is-solid) .ttr-burger[aria-expanded="true"] .ttr-burger__box i { background: #F3E9D6; }
@media (max-width: 1040px) {
	.ttr-callnow,
	.ttr-home .ttr-header:not(.is-solid) .ttr-callnow { background: var(--ttr-accent-metal); border-color: #A87C35; color: #fff; }
	.ttr-callnow .ttr-icon { color: #fff; }
}

/* ---- area cards: two counties, 20 areas (2026-09-29) -------------------
 * The lineage grid was fixed at 4 across with a tone split at card 5 (trap
 * 85). Now it fills automatically and every card takes one tone per county.
 */
.ttr-markets__county {
	margin: 2.5rem 0 1rem;
	font-family: var(--ttr-body-font);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ttr-accent);
	display: flex;
	align-items: center;
	gap: 1rem;
}
.ttr-markets__county::after { content: ''; flex: 1; height: 1px; background: var(--ttr-line); }
.ttr-markets__grid--areas {
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .9rem;
}
.ttr-markets__grid--areas .ttr-market .ttr-market__link { min-height: 0; padding: 1.1rem 1.1rem 1rem; }
.ttr-markets__grid--areas .ttr-market .ttr-market__link::before { background: var(--ttr-accent-mid); }
.ttr-markets__grid--areas .ttr-market .ttr-market__shape svg * { fill: var(--ttr-accent-lt); opacity: .55; }
.ttr-markets__grid--areas .ttr-market .ttr-market__link:hover { border-color: var(--ttr-accent); }
.ttr-markets__grid--areas .ttr-market__name { font-size: 1.35rem; }
.ttr-markets__grid--areas .ttr-market__shape { height: 4.5rem; }
@media (max-width: 620px) {
	.ttr-markets__grid--areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.ttr-markets__grid--areas .ttr-market__name { font-size: 1.1rem; }
	.ttr-markets__grid--areas .ttr-market__cta { font-size: .66rem; }
}

/* ---- the seal and the phone badge go dark, like the header and their signs ---- */
.ttr-seal {
	background: radial-gradient(circle at 50% 38%, #2A261E 0%, #16140F 72%, #0C0B08 100%);
	color: #F3E9D6;
	box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(217, 182, 122, .35);
}
.ttr-seal__big {
	background: linear-gradient(160deg, #F0D9A8 0%, #D9B67A 45%, #B8894A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ttr-seal__label { color: #F3E9D6; }
.ttr-seal__rule { background: #C9A05A; }
.ttr-seal__by { color: #D9B67A; }
.ttr-seal__name { color: rgba(243, 233, 214, .8); }
@media (max-width: 900px) {
	.ttr-badge { background: rgba(22, 20, 15, .92); color: #F3E9D6; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(217, 182, 122, .35); }
	.ttr-badge__label { color: #F3E9D6; }
	.ttr-badge__by { color: #D9B67A; }
}
/* Partial last rows (7 and 13 areas) centre rather than hang left. */
.ttr-markets__grid--areas { display: flex; flex-wrap: wrap; justify-content: center; }
.ttr-markets__grid--areas > .ttr-market { flex: 0 0 calc((100% - 4 * .9rem) / 5); }
@media (max-width: 1040px) { .ttr-markets__grid--areas > .ttr-market { flex-basis: calc((100% - 3 * .9rem) / 4); } }
@media (max-width: 780px)  { .ttr-markets__grid--areas > .ttr-market { flex-basis: calc((100% - 2 * .9rem) / 3); } }
@media (max-width: 620px)  { .ttr-markets__grid--areas > .ttr-market { flex-basis: calc((100% - .6rem) / 2); } }

/* Closed-sales disclaimer (Top Tier, 2026-09-29) and the agent sign-in link. */
.ttr-soldnote {
	margin: 0 0 1.5rem;
	padding: .8rem 1rem;
	border-left: 3px solid var(--ttr-accent-mid);
	background: var(--ttr-tint);
	font-size: .92rem;
	color: var(--ttr-body);
}
.ttr-slider__note { margin: .25rem 0 0; font-size: .92rem; color: var(--ttr-muted); }
.ttr-utility__signin { border: 1px solid rgba(217, 182, 122, .45); border-radius: 2px; padding: .15rem .6rem; color: #E6C98F !important; letter-spacing: .08em; }
.ttr-utility__signin:hover { background: rgba(217, 182, 122, .12); }

/* Read more on the home page's Meet Jim bio (2026-10-05). */
html.js .ttr-more__rest:not(.is-open) { display: none; }
.ttr-more__rest p { margin-top: 1em; }
.ttr-more__btn { display: none; }
html.js .ttr-more__btn {
	display: inline-block;
	margin-top: .9rem;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ttr-accent);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ttr-accent);
	cursor: pointer;
}
html.js .ttr-more__btn:hover { color: var(--ttr-ink); border-bottom-color: var(--ttr-ink); }

/* ------------------------------------------------ phone links on a computer -- */

/* Kelli, 2026-10-05: clicking the number on a Mac raises a FaceTime prompt,
   which is macOS's doing, not ours. With a mouse the number is there to be
   read, not clicked; on a touch screen it still dials. */
@media (hover: hover) and (pointer: fine) {
	a[href^="tel:"] { pointer-events: none; cursor: default; }
}