/*
 * Golden Key Realty.
 *
 * Light theme, drawn from the logo: a deep navy, a metallic gold, and the pale
 * sky blue that appears in one of the two roofs. On white, with a very slightly
 * cool tint for alternating bands.
 *
 * The inversion from legacy-peak is worth stating, because most of the rules
 * here are the mirror of that theme's. There the page was near-black and the
 * problem was keeping photographs from punching holes in it. Here the page is
 * white and the problem is the opposite: navy and gold are both dark and
 * saturated, so they have to be rationed or the page turns into a brochure from
 * 2006. Navy carries structure — header, footer, two full-bleed bands. Gold is
 * an accent only: rules, numerals, the primary button. Body text is a soft
 * near-black, never pure #000.
 */

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

:root {
	/* Sampled from the logo file, not from a screenshot. The wordmark is a
	   neutral charcoal (#484848) and the key is an olive-gold (#AAA104) that sits
	   at hue 57 — yellow-green, noticeably cooler and earthier than a normal
	   real-estate amber. Getting that wrong would make it look like a different
	   company, so the deeper tones below are darkened along the same hue rather
	   than shifted toward orange. */
	--gk-char:       #3A3A3A;
	--gk-char-dk:    #242424;
	--gk-char-lt:    #545454;
	--gk-stone:      #C9C9C2;

	/* Three weights of the same olive. The brand tone only reaches 2.6:1 on
	   white — fine for a large key in a logo, nowhere near AA for the small
	   uppercase eyebrows, which is where accent color actually gets used. So the
	   dark one carries text and the bright one carries fills. */
	--gk-gold:       #6F6A02;
	--gk-gold-mid:   #AAA104;
	--gk-gold-lt:    #C8BE12;
	--gk-gold-metal: linear-gradient(135deg, #8A8203 0%, #C8BE12 55%, #A79E06 100%);

	--gk-ink:        #1F1F1E;
	--gk-body:       #4E5049;
	--gk-muted:      #6E7069;
	--gk-faint:      #9A9C95;

--gk-white:      #FFFFFF;
	--gk-tint:       #F8F8F5;
	--gk-tint-2:     #F0F0EA;
	--gk-line:       #E3E3DC;
	--gk-line-soft:  #F0F0EA;

	--gk-display:    'Montserrat', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
	--gk-body-font:  'Poppins', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

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

	/* Header interpolates between these as --gk-shrink runs 0 → 1. */
	--gk-header-h:   128px;
	--gk-bar-max:    128px;
	--gk-bar-min:    76px;
	--gk-logo-max:   92px;
	--gk-logo-min:   56px;
	--gk-shrink:     0;

	--gk-ease:       cubic-bezier(.22, .61, .36, 1);
	--gk-shadow:     0 1px 2px rgba(22, 34, 58, .04), 0 8px 24px -12px rgba(22, 34, 58, .12);
	--gk-shadow-lg:  0 2px 4px rgba(22, 34, 58, .05), 0 20px 48px -20px rgba(22, 34, 58, .2);
}

@media (max-width: 1040px) {
	:root {
		--gk-header-h: 96px;
		--gk-bar-max:  96px;
		--gk-bar-min:  62px;
		--gk-logo-max: 68px;
		--gk-logo-min: 38px;
	}
}

/* ------------------------------------------------------------------ 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(--gk-white);
	color: var(--gk-body);
	font-family: var(--gk-body-font);
	font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.gkr-locked { overflow: hidden; }

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

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

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

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

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

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

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

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

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

.gkr-section--tint { background: var(--gk-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. */
.gkr-section--dark {
	background: var(--gk-char);
	color: rgba(255, 255, 255, .82);
}

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

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

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

.gkr-eyebrow--light { color: var(--gk-gold-lt); }

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

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

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

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

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

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

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

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

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

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

.gkr-btn:hover {
	background: var(--gk-char-dk);
	border-color: var(--gk-char-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(23, 55, 107, .5);
}
.gkr-btn:active { transform: translateY(0); }

/* Gold is the primary call to action. Dark ink on gold rather than white —
   white on this gold fails contrast badly. */
.gkr-btn--gold {
	background: var(--gk-gold-metal);
	border-color: transparent;
	color: #26200A;
}
.gkr-btn--gold:hover {
	background: var(--gk-gold-metal);
	filter: brightness(1.06);
	color: #26200A;
	box-shadow: 0 12px 26px -12px rgba(185, 117, 6, .55);
}

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

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

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

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

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

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

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

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

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

.gkr-icon { flex-shrink: 0; color: var(--gk-gold-lt); transition: color .2s var(--gk-ease); }
.gkr-utility__list a:hover .gkr-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. */
	.gkr-utility { display: none; }
}

/* --------------------------------------------------------------- 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. */
.gkr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--gk-header-h);
	pointer-events: none;
}

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

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

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

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

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

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

.gkr-logo__name {
	font-family: var(--gk-display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--gk-char);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gkr-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.gkr-drawer__call {
	font-family: var(--gk-display);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: var(--gk-char);
}

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

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

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

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

.gkr-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(23, 55, 107, .03) 12px 24px),
		var(--gk-tint-2);
}

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

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

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

.gkr-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 pushes the sunset further, so the warmth
 * is strongest where the eye is free to enjoy it. */
.gkr-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 88% 24%, rgba(233, 168, 20, .1) 0%, transparent 55%),
		linear-gradient(to right, rgba(24, 19, 14, .88) 0%, rgba(24, 19, 14, .62) 46%, rgba(24, 19, 14, .18) 78%, rgba(24, 19, 14, .36) 100%),
		linear-gradient(to bottom, rgba(20, 16, 12, .44) 0%, rgba(20, 16, 12, .05) 42%, rgba(20, 16, 12, .58) 100%);
}

/* 66rem, not 54rem. At the narrower width the headline broke as three lines —
   "Twenty-six years / of opening doors / in Philadelphia." — which reads as a
   list rather than a sentence and pushed the search bar down the screen. The
   extra room lets it settle into two, and the search bar underneath is capped
   at 58rem by its own stylesheet, so widening this does not stretch it. */
.gkr-hero__inner { position: relative; z-index: 2; max-width: 66rem; }
.gkr-hero__title { color: #fff; }
.gkr-hero__lede { color: rgba(255, 255, 255, .88); max-width: 58ch; margin-top: 1.25rem; }

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

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

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

.gkr-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(--gk-char-dk);
}

.gkr-banner__media { position: absolute; inset: 0; z-index: 0; }
.gkr-banner__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 26, 55, .9) 0%, rgba(10, 26, 55, .7) 55%, rgba(10, 26, 55, .5) 100%),
		linear-gradient(to bottom, rgba(10, 26, 55, .45) 0%, rgba(10, 26, 55, .3) 50%, rgba(10, 26, 55, .65) 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* A sold listing should not look like an available one. */
.gkr-status--sold,
.gkr-status--closed { background: var(--gk-ink); }
.gkr-status--pending,
.gkr-status--under-contract { background: var(--gk-gold); color: #26200A; }
.gkr-status--coming-soon { background: var(--gk-char-lt); }

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

.gkr-card__price {
	margin-bottom: .35rem;
	font-family: var(--gk-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--gk-char);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gkr-quote {
	margin: 0;
	padding: 1.9rem 1.6rem;
	background: #fff;
	border: 1px solid var(--gk-line);
	border-radius: 8px;
}
.gkr-quote__stars { color: var(--gk-gold); letter-spacing: .12em; margin-bottom: .9rem; }
.gkr-quote blockquote { margin: 0 0 1.1rem; color: var(--gk-body); }
.gkr-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.gkr-quote__name { font-family: var(--gk-display); font-weight: 700; color: var(--gk-ink); font-size: .92rem; }
.gkr-quote__via { font-size: .8rem; color: var(--gk-faint); }

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

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

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

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

.gkr-member__photo { position: relative; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gkr-field input:focus,
.gkr-field select:focus,
.gkr-field textarea:focus {
	border-color: var(--gk-char-lt);
	box-shadow: 0 0 0 3px rgba(42, 84, 152, .12);
	outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.gkr-closer::before {
	content: '';
	position: absolute;
	top: -45%; left: 50%;
	width: 44rem; height: 44rem;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(233, 168, 20, .16) 0%, transparent 62%);
	pointer-events: none;
}

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

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

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

.gkr-backlink { margin-top: 2.5rem; font-family: var(--gk-display); font-weight: 700; }

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

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

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

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

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

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

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

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

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

/* 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. */
.gkr-drawer__nav .gkr-nav__list { width: 100%; gap: 0; }

.gkr-drawer__nav .gkr-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(--gk-line);
}

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

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

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

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

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

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

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

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

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

.gkr-creds__label {
	display: block;
	font-family: var(--gk-display);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--gk-char);
}
.gkr-creds__note {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--gk-muted);
}

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

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

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

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

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

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

.gkr-creed__quote { margin: 0; }

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

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

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

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

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

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

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

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

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

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

/* Pillars sit on navy by default; this is the variant for a light band. */
.gkr-pillars--light .gkr-pillar {
	background: #fff;
	border-color: var(--gk-line);
}
.gkr-pillars--light .gkr-pillar__title { color: var(--gk-ink); }
.gkr-pillars--light .gkr-pillar__body { color: var(--gk-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. */

.gkr-foot { background: #fff; color: var(--gk-body); border-top: 1px solid var(--gk-line); }

.gkr-foot__in {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 5vw, 80px);
	padding-block: clamp(44px, 6vw, 68px);
}

.gkr-foot__brand { flex: 1 1 320px; }
.gkr-foot__col { flex: 0 1 210px; }

.gkr-foot__brand .gkr-logo { margin-bottom: 1rem; }
.gkr-foot__brand .gkr-logo__img { height: 96px; }

.gkr-foot__name { margin: 0; font-family: var(--gk-display); font-size: 1.15rem; font-weight: 700; color: var(--gk-ink); }
.gkr-foot__firm {
	margin: 2px 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gk-gold);
}
.gkr-foot__blurb { margin: 0; max-width: 42ch; color: var(--gk-muted); font-size: .95rem; }

.gkr-foot__h {
	margin: 0 0 14px;
	font-family: var(--gk-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gk-char);
}

.gkr-foot__menu { list-style: none; margin: 0; padding: 0; }
.gkr-foot__menu a,
.gkr-foot__link {
	display: block;
	padding: 5px 0;
	color: var(--gk-body);
	text-decoration: none;
	font-size: .95rem;
}
.gkr-foot__menu a:hover,
.gkr-foot__link:hover { color: var(--gk-char); text-decoration: underline; }

.gkr-foot__addr { margin: 12px 0 0; color: var(--gk-muted); font-size: .9rem; }
.gkr-foot__social { margin: 14px 0 0; font-size: .9rem; }
.gkr-foot__social a { color: var(--gk-char-lt); }

.gkr-foot__legal { border-top: 1px solid var(--gk-line); background: var(--gk-tint); }
.gkr-foot__legal-in { padding-block: 22px; font-size: .78rem; color: var(--gk-muted); line-height: 1.6; }
.gkr-foot__legal-in p { margin: 0 0 6px; }
.gkr-foot__legal-in a { color: var(--gk-char-lt); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gkr-search__field input:focus,
.gkr-search__field select:focus {
	border-color: var(--gk-char-lt);
	box-shadow: 0 0 0 3px rgba(10, 81, 153, .12);
	outline: none;
}

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

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

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

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

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

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

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

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

.gkr-slider__track {
	display: grid;
	grid-auto-flow: column;
	/* Likewise a floor that is not zero, so the track overflows. */
	grid-auto-columns: min(84vw, 21rem);
	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;
}

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

.gkr-slider__slide { scroll-snap-align: start; min-width: 0; }
.gkr-slider__slide .gkr-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. */
	.gkr-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

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

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

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

.gkr-filter.is-on {
	background: var(--gk-char);
	border-color: var(--gk-char);
	color: #fff;
}

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

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

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

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

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

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

/* ------------------------------------------------------- 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. */
.gkr-callnow { display: none; }

@media (max-width: 1040px) {
	.gkr-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(--gk-gold-lt);
		background-image: none;
		border-color: var(--gk-gold-lt);
		color: var(--gk-char);
		/* 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;
	}

	.gkr-callnow:hover {
		background: var(--gk-gold-mid);
		background-image: none;
		border-color: var(--gk-gold-mid);
		color: var(--gk-char);
		box-shadow: none;
	}

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

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

.gkr-hero__phone strong { color: var(--gk-gold-lt); font-weight: 700; white-space: nowrap; }

@media (max-width: 520px) {
	.gkr-hero__phone { font-size: 1.02rem; align-items: flex-start; }
	.gkr-hero__phone .gkr-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) {
	.gkr-team { grid-template-columns: 1fr 1fr; }
	.gkr-team .gkr-member:first-child { grid-column: 1 / -1; }
	.gkr-team .gkr-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. */
	.gkr-team .gkr-member:nth-child(2):last-child {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

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

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

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See gkr_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. */
.gkr-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, #2E2E2C 0%, var(--gk-char) 55%, #494741 100%);
}

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

.gkr-plate__rule {
	width: 42px;
	height: 2px;
	background: var(--gk-gold);
}

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

.gkr-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. */
.gkr-hero__search { margin: 1.75rem 0 1.25rem; max-width: 62rem; }

.gkr-search--hero {
	background: rgba(28, 28, 27, .62);
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gkr-search--hero .gkr-search__field label { color: rgba(255, 255, 255, .72); }

.gkr-search--hero .gkr-search__field input,
.gkr-search--hero .gkr-search__field select {
	background: rgba(255, 255, 255, .94);
	border-color: transparent;
}

.gkr-search--hero .gkr-search__more summary { color: rgba(255, 255, 255, .82); }

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

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

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

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

.gkr-search__clear {
	font-family: var(--gk-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gk-gold);
}


/* ============================================================== IDX suite ==

   The BrokerBoost IDX Suite renders the hero search bar, the property search
   page and the listing cards. Its colours already come from design tokens
   sampled out of this file, so what is left here is shape: the plugin's
   defaults are portal-shaped — full pills — and this site is square and
   editorial. These rules pull it into line.

   Selectors have to be compounded as .bbis.bbis, on the same element as the
   modifier, because that is how the plugin emits its wrapper. Writing them as
   a descendant matches nothing and fails silently.                          */

/* The bar and its tabs take the same radius as the site's own cards and
   inputs, not the 999px pill the plugin ships.

   !important, and not by laziness. The plugin's stylesheet is enqueued while
   its shortcode renders — that is, after wp_head has already printed this
   file — so WordPress emits it in the footer and it wins every tie on load
   order. It also rounds the bar through `:has(.bbis-hs__more)`, which outranks
   a plain class selector on specificity as well. Raising specificity here
   would need a selector that guesses at the plugin's wrapper nesting; this
   states the intent instead. Shape only — every colour still comes from the
   design tokens. */
.bbis.bbis .bbis-hs__form,
.bbis.bbis .bbis-hs__form--sell,
.bbis.bbis .bbis-hs__form:has(.bbis-hs__more),
.bbis.bbis .bbis-hs__field,
.bbis.bbis .bbis-hs__field:focus-within::after {
	border-radius: 8px !important;
}

/* Under a tab strip the bar's top edge belongs to the selected tab, so it
   squares off. Stated here as well as in the plugin because the !important
   above would otherwise round it straight back. */
.bbis.bbis.bbis-hs--tabbed .bbis-hs__form {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.bbis.bbis .bbis-hs__submit button { border-radius: 6px !important; }

/* The tabs sit on top of the bar, so they round at the top only — a tab with
   four rounded corners floats, and floating is what stopped it reading as a
   tab. */
.bbis.bbis .bbis-hs__tab {
	border-radius: 6px 6px 0 0 !important;
	font-family: var(--gk-display);
	letter-spacing: .12em;
}

@media (max-width: 860px) {
	.bbis.bbis .bbis-hs__form,
	.bbis.bbis .bbis-hs__form--sell,
	.bbis.bbis.bbis-hs--msimple .bbis-hs__form {
		border-radius: 8px !important;
	}
}

/* The line above the tab strip. Small and quiet — it is a caption for the
   control, not a second headline competing with the one above it. The rental
   half is emphasised because it is the thing worth knowing and the thing his
   competitors do not offer. */
.gkr-hero__searchlabel {
	margin: 0 0 .7rem;
	font-family: var(--gk-display);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .82);
}

.gkr-hero__searchlabel strong {
	color: var(--gk-gold-lt);
	font-weight: 700;
}

@media (max-width: 640px) {
	.gkr-hero__searchlabel { font-size: .76rem; }
}

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

   A banner with no photograph, for the search page — the filter bar has to be
   the first usable thing on the page, and the full-height banner pushes it
   under the fold on a laptop. */
.gkr-banner--tight {
	min-height: 0;
	padding-block: clamp(2.5rem, 6vh, 3.75rem) clamp(1.5rem, 3vh, 2rem);
}

/* ------------------------------------------------------------ IDX grids --

   The card grids the theme renders itself, on the homepage, the rentals page
   and the sales archive. The plugin's own spacing above the grid assumes a
   heading it is not printing here, so the top margin comes from the theme
   section instead. */
.gkr-idx-grid { margin-top: 2.25rem; }

.gkr-idx-grid + .gkr-quotes__more { margin-top: 2.5rem; }

/* The search shell is rendered with no theme wrapper at all, on purpose — see
   the note in templates/search.php.

   The one thing it still needs telling: this theme's search page has a banner
   above the shell, so by the time the shell starts it has already cleared the
   sticky header. The plugin's own script cannot know that — it measures the
   header and reserves its height as a top margin, which is right on a site
   where the search is the first thing on the page and is ~104px of dead white
   band here. Zeroing the variable it reads is enough; the height calculation
   uses a separate one (--bbis-ps-top, the shell's real offset) and stays
   correct, so the shell still ends exactly at the bottom of the viewport.

   The margin is zeroed rather than the variable it reads. The script writes
   that variable as an inline style on .bbis-ps__shell, and an inline
   declaration on an element always beats a value inherited from an ancestor —
   !important on the wrapper does not reach it, because importance does not
   cross inheritance. Setting the resolved property on the same element does.

   The shell's height uses a different variable (--bbis-ps-top, its real
   document offset) and is deliberately left alone, so the search still ends
   exactly at the bottom of the viewport and the window still never scrolls. */
.bbis.bbis .bbis-ps__shell { margin-top: 0 !important; }


/* ================================================ the search, made primary ==

   Search Properties is the one item the site exists for, so it is a filled
   button rather than the second of six equal links.

   The pill is drawn on the <li>, not on the <a>. The submenu chevron is a
   sibling button rather than a child of the link, so a background on the link
   alone left the chevron floating on white beside the pill, looking like a
   stray control. Backgrounding the item wraps both. */

.gkr-nav__item--primary {
	background: var(--gk-gold-mid);
	border-radius: 6px;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gkr-nav__item--primary > a {
	padding: .55rem .75rem .55rem 1.05rem;
	color: #26200A !important;
	font-weight: 700;
}

/* Without children there is no chevron, so the link carries the right edge. */
.gkr-nav__item--primary:not(.has-children) > a { padding-right: 1.05rem; }

.gkr-nav__item--primary > .gkr-nav__toggle {
	color: #26200A;
	padding-right: .7rem;
}

.gkr-nav__list .gkr-nav__item--primary > a::after { content: none; }

.gkr-nav__item--primary:hover,
.gkr-nav__item--primary:focus-within {
	background: var(--gk-gold);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(111, 106, 2, .28);
}

.gkr-nav__item--primary:hover > a,
.gkr-nav__item--primary:focus-within > a { color: #fff !important; }

.gkr-nav__item--primary:hover > .gkr-nav__toggle { color: #fff; }

/* Nothing in the bar may wrap. With the pill added, "For Sellers" and "For
   Buyers" broke across two lines and the masthead grew a second row — the
   items get tighter instead, and the drawer takes over below 1024px anyway. */
.gkr-nav__list > li > a { white-space: nowrap; }
.gkr-nav__list { gap: clamp(.55rem, 1.15vw, 1.35rem); }

@media (max-width: 1180px) {
	.gkr-nav__list a { font-size: .78rem; letter-spacing: .07em; }
	.gkr-nav__item--primary > a { padding-left: .8rem; }
}

/* In the drawer it spans the width and leads the list — on a phone this is the
   first thing a thumb reaches, which is the whole point. */
.gkr-drawer__nav .gkr-nav__item--primary {
	width: 100%;
	margin-bottom: .7rem;
	justify-content: center;
}

.gkr-drawer__nav .gkr-nav__item--primary > a {
	flex: 0 1 auto;
	padding-block: .95rem;
	font-size: 1.15rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.gkr-drawer__nav .gkr-nav__item--primary:hover { transform: none; }

/* ================================================== the search card ========

   The second invitation to search, directly under the credentials strip. Dark
   charcoal so it separates itself from the white bands either side without
   needing a photograph — this is the one band on the page that is a signpost
   rather than something to look at. */

/* Tighter than a normal section — it is a band between two others, not a
   chapter of its own — but not zero, or it collides with both. */
.gkr-searchcard { padding-block: clamp(2rem, 5vh, 3.25rem); }

.gkr-searchcard__in {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	overflow: hidden;
	padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3.2rem);
	border-radius: 12px;
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(170, 161, 4, .22) 0%, transparent 55%),
		var(--gk-char-dk);
	box-shadow: var(--gk-shadow-lg);
}

.gkr-searchcard__body { flex: 1 1 auto; min-width: 0; }

.gkr-searchcard__title {
	margin: .35rem 0 .8rem;
	color: #fff;
	font-size: clamp(1.65rem, 3.4vw, 2.5rem);
	line-height: 1.15;
}

.gkr-searchcard__text {
	margin: 0 0 1.6rem;
	max-width: 54ch;
	color: rgba(255, 255, 255, .82);
	font-size: 1.02rem;
	line-height: 1.65;
}

.gkr-searchcard__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* The ghost button is drawn for light grounds, so on the charcoal it needs the
   light treatment or it renders as dark text on dark. */
.gkr-searchcard__actions .gkr-btn--ghost {
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
}

.gkr-searchcard__actions .gkr-btn--ghost:hover {
	background: rgba(255, 255, 255, .1);
	border-color: #fff;
}

/* The mark is decoration, so it goes when the room is needed for the words. */
/* The glyph strokes with currentColor, so it needs a colour set on the wrapper
   or it inherits the body ink and disappears into the charcoal. */
.gkr-searchcard__mark {
	flex: 0 0 auto;
	width: clamp(6rem, 11vw, 10rem);
	color: var(--gk-gold-lt);
	opacity: .55;
}

.gkr-searchcard__mark svg { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
	.gkr-searchcard__mark { display: none; }
	.gkr-searchcard__actions .gkr-btn { width: 100%; justify-content: center; }
}


/* -------------------------------- the primary item's submenu, in the drawer

   Its panel sits inside the gold item, so the drawer's normal near-white
   submenu ground never showed and the links rendered muted-grey on gold —
   about 1.5:1, which is unreadable.

   White text alone would not have fixed it: white on this gold is only
   2.8:1, below the 4.5:1 AA threshold. Deepening the panel to the dark gold
   first takes white to 5.6:1, so the text is genuinely legible rather than
   merely lighter — and the darker ground reads as nested inside the item,
   which is what it is. */

.gkr-drawer__nav .gkr-nav__item--primary > .gkr-nav__sub {
	background: var(--gk-gold);
	border-radius: 0 0 6px 6px;
	padding-block: .35rem .5rem;
}

.gkr-drawer__nav .gkr-nav__item--primary > .gkr-nav__sub a {
	color: #fff;
	font-weight: 500;
}

.gkr-drawer__nav .gkr-nav__item--primary > .gkr-nav__sub a:hover,
.gkr-drawer__nav .gkr-nav__item--primary > .gkr-nav__sub a:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* With the panel open the item is one block, so only its bottom corners round. */
.gkr-drawer__nav .gkr-nav__item--primary.is-open { border-radius: 6px; }


/* --------------------------------------------------------- MLS disclaimer

   Required wherever IDX listings appear. Set small and quiet — it is a
   condition of the feed, not something to read — but not hidden, which would
   defeat the point of carrying it. */

.gkr-mlslegal {
	padding-block: 0 clamp(1.5rem, 4vh, 2.5rem);
	color: var(--gk-muted);
	font-size: .74rem;
	line-height: 1.6;
}

.gkr-mlslegal p { margin: 0 0 .5rem; }
.gkr-mlslegal img { max-height: 26px; width: auto; vertical-align: middle; margin-right: .4rem; }
.gkr-mlslegal a { color: var(--gk-muted); text-decoration: underline; }