/*
 * The Gulf of America Realty at Premiere Property Group.
 *
 * White site, drawn from a logo that is exactly two colours plus its ground:
 * a deep forest green (#1E6532) and black, on white. Sampled from the PNG, not
 * from a screenshot.
 *
 * The brief was "sleek, white background". That is the easy half. The hard half
 * is that Greg and Judy have been selling Salem real estate since 2003 and the
 * site has to look like fifty years of experience rather than like a startup —
 * so the restraint here is deliberate, not minimalism for its own sake. Lots of
 * white, one green, generous type, and almost no ornament.
 *
 * The green is unusually well behaved for a brand colour: #1E6532 is 7:1 on
 * white, so unlike the red on the Cavalry build it can carry body-weight text
 * and take white text on a fill without a second, darker variant being invented
 * for accessibility. One green does the whole job.
 *
 * Structure is a near-black with a green cast (#101A13) rather than a neutral
 * one, so the footer and the dark bands read as the same family as the tree
 * rather than as a separate grey system.
 *
 * Type is Instrument Serif for display over Instrument Sans, both self-hosted.
 * Their current site is a kvCORE template in the usual portal sans; a
 * high-contrast editorial serif is the fastest way this reads as the more
 * considered of the two.
 *
 * The palette is a Gulf sunset, which is the one thing purple, blue and gold
 * are all true of at once. On the Big Bend coast the water goes violet before
 * it goes dark and the light on it is gold for about twenty minutes; that is
 * the brief, and it is also just what Keaton Beach looks like at seven o'clock.
 *
 * Rationing: violet carries the logo, the headings and the rules. Gold is the
 * accent and nothing else -- buttons, the underline, the active state. Gold on
 * white fails contrast at body size, so it never carries text; it sits on the
 * deep indigo or under it. Sea blue is structural only, for the bands that need
 * to be neither. Body text is a warm slate, never pure #000.
 */

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

:root {
	/* Sea blue. The brand colour — it leads, and it is what most of the page is.
	   Deep enough to hold white type at 8.5:1, so it can fill a button too. */
	--goa-brand:      #1B5A80;
	--goa-brand-mid:  #24709E;
	--goa-brand-lt:   #7FB2CE;
	--goa-brand-pale: #E8F1F7;

	--goa-accent:       #1B5A80;
	--goa-accent-mid:   #24709E;
	--goa-accent-lt:    #7FB2CE;
	--goa-accent-metal: linear-gradient(135deg, #14486A 0%, #2E82B4 55%, #1B5A80 100%);

	/* Violet. The second colour, not the first — it carries the emblem, the
	   eyebrows and the section tints. Blue and violet sit four steps apart on the
	   wheel, so they read as one family at dusk rather than as two brands. */
	--goa-violet:     #4B3B87;
	--goa-violet-mid: #5C4AA3;
	--goa-violet-lt:  #9C8BD4;
	--goa-violet-pale:#EFECF8;

	/* Gold. Accent only — 2.4:1 on white, so it never carries text at body size.
	   It is the underline, the rule, and the mark on a dark ground. */
	--goa-gold:       #C9992F;
	--goa-gold-lt:    #E3B85A;
	--goa-gold-pale:  #FAF3E2;

	--goa-sea:        #1B5A80;
	--goa-sea-lt:     #7FB2CE;
	--goa-sea-pale:   #E8F1F7;

	/* Structure. Near-black with a blue cast, a shade violet at the bottom end,
	   so the footer belongs to the brand rather than to a separate grey system. */
	--goa-deep:       #14243A;
	--goa-deep-dk:    #0C1826;
	--goa-deep-lt:    #20344F;
	--goa-stone:      #86909E;

	/* Text. Warm slate, never pure black. */
	--goa-ink:        #16202E;
	--goa-body:       #45505F;
	--goa-muted:      #6A7484;
	--goa-faint:      #96A0AE;

	/* Ground. Warm sand rather than grey — a cool white under blue and gold
	   reads as clinical, and this is a coastal brokerage. */
	--goa-white:      #FFFFFF;
	--goa-tint:       #FAF8F4;
	--goa-tint-2:     #F1EEE8;
	--goa-sky:        #EAF1F7;
	--goa-line:       #E5E2DB;
	--goa-line-soft:  #F1EEE9;

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

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

	/* Header interpolates between these as --goa-shrink runs 0 → 1. */
	--goa-header-h:   112px;
	--goa-bar-max:    112px;
	--goa-bar-min:    72px;
	--goa-logo-max:   76px;
	--goa-logo-min:   48px;
	--goa-shrink:     0;

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

@media (max-width: 1040px) {
	:root {
		--goa-header-h: 96px;
		--goa-bar-max:  96px;
		--goa-bar-min:  66px;
		--goa-logo-max: 56px;
		--goa-logo-min: 36px;
	}
}

/* ------------------------------------------------------------------ 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(--goa-white);
	color: var(--goa-body);
	font-family: var(--goa-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.goa-locked { overflow: hidden; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * The page-banner eyebrow.
 *
 * parts/banner.php has always emitted `goa-eyebrow--accent`, and this rule did
 * not exist — so it fell through to the base .goa-eyebrow colour, --goa-accent,
 * which is a 6.5:1-on-white dark red. Every banner on the site is a photograph
 * under a dark scrim, or --goa-deep where there is no photograph, so the eyebrow
 * was dark red on near-black on every interior page: Buy, Sell, Rent, Listings,
 * About, Blog, Contact, Team and 404.
 *
 * It survived because a class that matches no rule renders perfectly happily.
 * Same family as the missing-fallback traps in themes/CLAUDE.md.
 */
.goa-eyebrow--accent { color: var(--goa-accent-lt); }

.goa-banner .goa-eyebrow--accent {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 12px rgba(8, 16, 10, .6);
}

/* 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. */
.goa-hero .goa-eyebrow--light {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 12px rgba(8, 32, 48, .6);
}

.goa-hero__title { text-shadow: 0 2px 28px rgba(8, 32, 48, .45); }

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

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

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

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

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

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

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

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

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

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

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

/* Green is the primary call to action, with white on it.
   Two stale comments lived here across previous builds — one claiming the fill
   was gold and needed dark ink, one explaining why a navy had to become white
   on red. Both described colours this site does not contain. White on #1E6532
   is 7:1, so this one needs no argument. */
.goa-btn--accent {
	background: var(--goa-accent-metal);
	border-color: transparent;
	color: #FFFFFF;
}
.goa-btn--accent:hover {
	background: var(--goa-accent-metal);
	filter: brightness(1.06);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -12px rgba(30, 101, 50, .55);
}

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

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

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

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

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

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

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

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

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

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



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




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

/*
 * Frosted glass rather than flat white.
 *
 * The blur is what makes it read as glass — translucent white on its own just
 * looks like a washed-out bar. saturate() ahead of the blur keeps colour
 * passing underneath from going grey, which is the thing that separates this
 * from a cheap opacity trick.
 *
 * .72 is deliberate. Below about .65 the nav text starts fighting whatever
 * scrolls under it; above .8 the effect stops being visible at all.
 */
.goa-header__bar {
	pointer-events: auto;
	background: rgba(255, 255, 255, .72);
	/* Same recipe as .goa-search--hero, the panel in the hero — that is the
	   surface this was asked to match. Alpha is the one number that differs:
	   the hero panel can afford .52 because it sits on a scrimmed photograph,
	   whereas the masthead passes over whatever the page happens to contain,
	   and below about .65 the nav starts fighting it. */
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
	border-bottom: 1px solid var(--goa-line);
	box-shadow:
		0 8px 24px -18px rgba(16, 26, 19, calc(1.4 * var(--goa-shrink))),
		inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* Anything that cannot blur gets the opaque bar back, or the nav ends up
   sitting unreadable on top of the page content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.goa-header__bar { background: #fff; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.goa-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(--goa-tint-2);
}

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

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

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

.goa-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 --goa-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. */
.goa-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(110% 85% at 82% 22%, rgba(127, 196, 232, .16) 0%, transparent 58%),
		linear-gradient(to right, rgba(8, 32, 48, .92) 0%, rgba(8, 32, 48, .78) 42%, rgba(8, 32, 48, .30) 76%, rgba(8, 32, 48, .48) 100%),
		linear-gradient(to bottom, rgba(8, 32, 48, .52) 0%, rgba(8, 32, 48, .10) 40%, rgba(8, 32, 48, .66) 100%);
}

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

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

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

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

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

.goa-banner__media { position: absolute; inset: 0; z-index: 0; }
.goa-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%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.goa-member__photo { position: relative; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.goa-creed__quote { margin: 0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The Equal Housing mark is now real SVG geometry — see goa_eho_mark(). */
.goa-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. */

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

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

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

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

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

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

/*
 * The field headings.
 *
 * These were Instrument Serif at .68rem, uppercase, tracked .1em, in
 * --goa-muted. Every one of those choices works against legibility at this
 * size: a high-contrast display serif puts its thin strokes below a pixel at
 * ~11px, uppercase removes the ascender/descender cues that let you read a
 * short word at a glance, and the muted grey is the palest text on the page
 * sitting on the busiest control.
 *
 * So: the body grotesque instead of the serif, a little larger, weighted up,
 * tracking eased off, and --goa-body for roughly 8:1 instead of 4.7:1. Still
 * uppercase, because it keeps them reading as labels rather than as content —
 * but now with the weight to survive it.
 */
.goa-search__field label {
	font-family: var(--goa-body-font);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--goa-body);
}

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

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

/* The focus ring was rgba(10,81,153) — a blue from the theme this was copied
   from, on a site with no blue in it. */
.goa-search__field input:focus,
.goa-search__field select:focus {
	border-color: var(--goa-accent-mid);
	box-shadow: 0 0 0 3px rgba(30, 101, 50, .16);
	outline: none;
}

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

.goa-search__more { margin-top: .85rem; }
.goa-search__more summary {
	display: inline-block;
	font-family: var(--goa-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* Accent, not --goa-deep-lt. This is the only clickable thing in the panel
	   that is not a button, and at near-black it read as a caption. */
	color: var(--goa-accent);
	cursor: pointer;
	list-style: none;
}
.goa-search__more summary::-webkit-details-marker { display: none; }
.goa-search__more summary::after { content: ' +'; }
.goa-search__more[open] summary::after { content: ' \2013'; }

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

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

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

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

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

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

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

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

.goa-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.
 */
@media (max-width: 899px) {
	.goa-slider__track {
		grid-auto-columns: 78vw;
		margin-inline: calc(var(--goa-gutter) * -1);
		padding-inline: 11vw;
		scroll-padding-inline: 11vw;
	}
	.goa-slider__slide { scroll-snap-align: center; }
}
.goa-slider__slide .goa-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. */
	.goa-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 --goa-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.
 */
.goa-home .goa-hero { margin-top: calc(var(--goa-header-h) * -1); }
.goa-home .goa-hero__inner { padding-top: var(--goa-header-h); }

/*
 * On the home page the bar starts invisible over the hero and becomes glass as
 * it lands. The blur has to be genuinely OFF at scroll 0 — a backdrop-filter on
 * a fully transparent bar still frosts the top of the hero photograph, which
 * looks like a rendering fault rather than a design.
 */
.goa-home .goa-header__bar {
	background: rgba(255, 255, 255, calc(.72 * var(--goa-shrink)));
	/* Was rgba(231,224,212) — the sand rule from the theme this was copied
	   from, which went visibly warm against a red-and-grey palette. */
	border-bottom-color: rgba(228, 231, 228, var(--goa-shrink));
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.goa-home .goa-header.is-solid .goa-header__bar {
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	backdrop-filter: blur(22px) saturate(1.5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.goa-home .goa-header__bar { background: rgba(255, 255, 255, var(--goa-shrink)); }
}

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

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

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

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

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

/* No JS: .is-solid is never added and --goa-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) .goa-home .goa-hero { margin-top: 0; }
html:not(.js) .goa-home .goa-hero__inner { padding-top: 0; }
html:not(.js) .goa-home .goa-header__bar { background: #fff; }
html:not(.js) .goa-logo__img--light { display: none; }

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

/* The Resident Benefits Package note under the rentals grid. Set smaller and
   quieter than body copy: it is terms, and it should read as terms rather than
   compete with the listings above it. */
.goa-rent__note {
	margin: 2.25rem auto 0;
	max-width: 62ch;
	padding-top: 1.5rem;
	border-top: 1px solid var(--goa-line);
	color: var(--goa-muted);
	font-size: .875rem;
	line-height: 1.7;
	text-align: center;
}

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

/*
 * Reuses the enquiry 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.
 */
.goa-modal__panel--sm { max-width: 34rem; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1040px) {
	.goa-callnow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		white-space: nowrap;
		/* Flat fill, not the metal gradient. 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 small one. */
		background: var(--goa-accent-mid);
		background-image: none;
		border-color: var(--goa-accent-mid);
		/* White, not the inherited var(--goa-deep). Near-black on red was a
		   leftover from the navy build — the comment under it still said "the
		   brand navy", on a brokerage whose brand has no navy in it. */
		color: #fff;

		/*
		 * Sized to match the "Talk to an agent" button beside it, exactly.
		 *
		 * These two sit side by side in the masthead actions and were visibly
		 * mismatched: .6rem/1rem padding and no set font-size here against
		 * .68rem/1.1rem at .74rem on .goa-btn--sm. Both now share one padding,
		 * one type size and one min-height, so the pair reads as a pair.
		 * 44px is also the touch-target floor.
		 */
		min-height: 44px;
		min-width: 44px;
		padding: .68rem 1.1rem;
		font-size: .74rem;
		border-radius: 6px;
	}

	.goa-callnow:hover {
		background: var(--goa-accent);
		background-image: none;
		border-color: var(--goa-accent);
		color: #fff;
		box-shadow: none;
	}

	/* Matched to the button beside it for the same reason. */
	.goa-header__actions .goa-btn--sm {
		min-height: 44px;
		padding: .68rem 1.1rem;
		font-size: .74rem;
		border-radius: 6px;
	}

	.goa-callnow .goa-icon { color: #fff; width: 17px; height: 17px; }
}

/* Below this the words go and the icon carries it — a labelled button plus a
   burger leaves the logo nowhere to sit. 480px since the 2026-09-15 lockup,
   which is wider for its height: at 430px the burger was pushed off-screen. */
/* The smallest phones: a slightly shorter lockup so logo, text button and
   burger fit a 360-390px screen without the burger spilling off the edge. */
@media (max-width: 420px) {
	:root { --goa-logo-max: 48px; --goa-logo-min: 34px; }
}

@media (max-width: 480px) {
	/* Icon only, and square — a squashed rectangle with a glyph floating in it
	   is what made this look broken. */
	.goa-callnow span { display: none; }
	.goa-callnow { padding: 0; width: 44px; height: 44px; }
}

.goa-hero__phone strong { color: var(--goa-accent-lt); font-weight: 700; white-space: nowrap; }

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

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

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

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See goa_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. */
.goa-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, var(--goa-deep-lt) 0%, var(--goa-deep) 55%, #33413A 100%);
}

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

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

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

.goa-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. */
.goa-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.
 */
.goa-search--hero {
	background: rgba(255, 255, 255, .52);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 18px 44px rgba(8, 32, 48, .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);
}

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

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

/* --goa-body here was a mid grey on a 52%-white panel over a dark photograph,
   which left the only non-button control in the hero effectively invisible. */
.goa-search--hero .goa-search__more summary { color: var(--goa-accent); }
.goa-search--hero .goa-search__more summary:hover { color: var(--goa-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))) {
	.goa-search--hero { background: rgba(255, 255, 255, .88); }
}

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

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

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

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

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

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

.goa-market__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	height: 100%;
	padding: 1.5rem 1rem 1.25rem;
	background: var(--goa-white);
	border: 1px solid var(--goa-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .22s var(--goa-ease), transform .22s var(--goa-ease), box-shadow .22s var(--goa-ease);
}

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

.goa-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. */
.goa-market__shape .goa-shape { width: 100%; height: 100%; display: block; }
.goa-market__shape .goa-shape path {
	fill: var(--goa-accent);
	opacity: .16;
	transition: opacity .22s var(--goa-ease);
}
.goa-market__link:hover .goa-shape path { opacity: .34; }

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

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

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

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

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

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

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

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

/* The parent brokerage mark in the footer. Given real size rather than being
   another line of small print — see footer.php for why it is here and not
   beside the Gysin mark in the masthead. */
.goa-foot__firmmark {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.goa-foot__at {
	font-size: .74rem;
	font-style: italic;
	color: var(--goa-faint);
	flex: none;
}
.goa-foot__firmmark img {
	display: block;
	width: auto;
	max-width: 230px;
	height: auto;
	opacity: .92;
}
@media (max-width: 780px) { .goa-foot__firmmark img { max-width: 190px; } }

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

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

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

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

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

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

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

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

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

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

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

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

/* ===================================================== the brokers' photo ==
 *
 * The "Meet your brokers" frame follows the photograph instead of imposing a
 * shape on it. The pair shot is 1360x900 — a 3:2 landscape — and the square
 * frame it used to sit in cropped a third of the width away, which took Judy
 * out of a picture of both of them.
 *
 * contain rather than cover for the same reason: on a photograph of two named
 * people, losing an edge is losing a person. Slightly wider than the old
 * square too, since a landscape image at the same height reads smaller.
 */
.goa-split__media--pair { max-width: 25rem; margin-inline: auto; }

/*
 * The frame follows the photograph, not the other way round.
 *
 * This was locked to 3/2 because the theme it came from had a landscape pair
 * shot. The only picture that exists of these two is a portrait at 0.80, so
 * object-fit: cover was cutting the top and bottom off — his hat and both of
 * their shoulders. No forced ratio: the image sets its own height and the whole
 * frame is what she sent.
 */
.goa-figure--pair { aspect-ratio: auto; }

.goa-figure--pair img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.goa-split__media--pair { max-width: 21rem; }
}

/* ================================================== all three colours ==
 *
 * Blue leads and carries the buttons, links and most of the ink. Violet was
 * only in the emblem after the palette shift, which made the site read as blue
 * and gold with a purple logo attached to it — so it takes the eyebrows and the
 * section tint, where it is the second thing seen on every band rather than a
 * one-off. Gold stays the accent it always was.
 */
.goa-eyebrow { color: var(--goa-violet); }

/* ...but not on a dark ground. --light exists for exactly that, and the violet
   rule above was written later in the file, so it was winning on the creed band
   and the footer: #4B3B87 on #14243A, which is about 1.5:1. Gold reads there,
   and it is the third colour finally doing something structural. */
.goa-eyebrow--light { color: var(--goa-gold-lt); }

.goa-section--tint { background: var(--goa-violet-pale); }

/* The rule under a heading is the one place all three meet, left to right. */
.goa-rule {
	background: linear-gradient(90deg, var(--goa-brand) 0%, var(--goa-violet) 52%, var(--goa-gold) 100%);
}

/* A market card that is not a link should not behave like one: no pointer, no
   hover lift, and the shape stops shifting under the cursor. */
.goa-market__link--static { cursor: default; }
.goa-market__link--static:hover { transform: none; box-shadow: var(--goa-shadow); }
.goa-market__link--static:hover .goa-shape path { opacity: .22; }

/* ============================================ who you are dealing with ==
 *
 * Two names and two roles, set as a list rather than a sentence, because the
 * distinction between them is the point: one holds the licence, one does not.
 * A reader skims this; a paragraph would let the difference slide past.
 */
.goa-who {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--goa-line);
}

.goa-who__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem 1rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--goa-line);
}

.goa-who__name {
	font-family: var(--goa-display);
	font-size: 1.22rem;
	color: var(--goa-ink);
	line-height: 1.2;
}

.goa-who__role {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goa-violet);
	margin-left: auto;
}

@media (max-width: 520px) {
	.goa-who__role { margin-left: 0; }
}

/* ================================================== the hero, with colour ==
 *
 * The scrim was three greys of the same near-black — correct, safe, and it
 * turned a Gulf sunset photograph into a monochrome one. The palette is
 * violet, blue and gold and none of it was reaching the largest surface on the
 * site.
 *
 * Now the wash is coloured rather than neutral: violet weighted top-left where
 * the type sits, deep blue through the middle, and a warm gold bloom on the
 * right where the sun actually is in the photograph. Same job — the headline
 * still needs a dark ground to sit on — done with the brand instead of with
 * grey.
 *
 * The tinted layers are multiply/soft-light so they colour the photograph
 * rather than paint over it; the readability layer underneath stays a plain
 * dark gradient, because contrast is not something to be clever about.
 */
.goa-home .goa-hero__scrim,
.goa-hero__scrim {
	background:
		/* the warm bloom, where the light is */
		radial-gradient(70% 60% at 84% 34%, rgba(226, 168, 74, .30) 0%, rgba(226, 168, 74, 0) 62%),
		/* violet into blue, across the type */
		linear-gradient(115deg, rgba(75, 59, 135, .70) 0%, rgba(27, 90, 128, .52) 46%, rgba(27, 90, 128, .10) 78%),
		/* and the plain dark that actually carries the contrast */
		linear-gradient(to right, rgba(10, 24, 38, .88) 0%, rgba(10, 24, 38, .70) 44%, rgba(10, 24, 38, .24) 78%, rgba(10, 24, 38, .44) 100%),
		linear-gradient(to bottom, rgba(10, 24, 38, .46) 0%, rgba(10, 24, 38, .06) 42%, rgba(10, 24, 38, .70) 100%);
}

/* A thin band of the full palette where the hero meets the page — the same
   three-colour run as the rule under a heading, at full width. */
.goa-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	z-index: 3;
	background: linear-gradient(90deg, var(--goa-violet) 0%, var(--goa-brand) 42%, var(--goa-gold) 100%);
}

/* The buying button picks up the gradient too, so the first thing a visitor is
   asked to click is the brand rather than a flat blue rectangle. */
.goa-hero__actions .goa-btn--accent,
.goa-hero__actions .goa-btn:first-child {
	background-image: linear-gradient(135deg, var(--goa-violet-mid) 0%, var(--goa-brand-mid) 62%, var(--goa-brand) 100%);
	border-color: transparent;
	box-shadow: 0 10px 26px -12px rgba(27, 90, 128, .65);
}

.goa-hero__actions .goa-btn--accent:hover,
.goa-hero__actions .goa-btn:first-child:hover {
	background-image: linear-gradient(135deg, var(--goa-violet) 0%, var(--goa-brand) 58%, var(--goa-brand-mid) 100%);
}

/* The credentials strip sat on plain white directly under all that colour and
   flattened the transition. A hairline of the palette keeps it going. */
.goa-creds { border-bottom: 1px solid var(--goa-line); }
.goa-creds__list > li + li { border-left-color: var(--goa-line); }

/* ================================================= her own words, labelled ==
 *
 * The site speaks as the brokerage everywhere else. This is the one passage in
 * first person, so it is set apart as a quotation and signed — the reader
 * should be able to tell at a glance that the voice changed on purpose.
 */
.goa-said {
	margin: 1.75rem 0 2rem;
	padding: 1.4rem 0 0 1.5rem;
	border-left: 3px solid transparent;
	border-image: linear-gradient(180deg, var(--goa-violet), var(--goa-brand) 55%, var(--goa-gold)) 1;
}

.goa-said blockquote { margin: 0; }

.goa-said blockquote p {
	margin: 0;
	font-family: var(--goa-display);
	font-size: clamp(1.15rem, 1.9vw, 1.4rem);
	line-height: 1.42;
	color: var(--goa-ink);
}

.goa-said figcaption {
	margin-top: .85rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goa-violet);
}

/* The optional text-consent box on the enquiry form (ported from larry-mullinix). */
.goa-field--consent { margin-top: .25rem; }
.goa-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--goa-muted, #5b6472);
	font-weight: 400;
}
/* .goa-field label is caps display type and .goa-field input is a full-width
   text box; neither is right for a sentence beside a checkbox. */
.goa-field .goa-consent { font-family: var(--goa-body-font); text-transform: none; letter-spacing: 0; font-size: .78rem; }
.goa-field .goa-consent span { color: var(--goa-muted); }
.goa-field .goa-consent input { width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; margin: .15rem 0 0; border: 0; box-shadow: none; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--goa-violet); }
.goa-consent a { color: var(--goa-violet); text-decoration: underline; }

/* ------------------------------------------------ community guides + hub --
 * Ported from themes/larry-mullinix (2026-09-15) for the launch SEO build:
 * templates/community.php and templates/taylor-county-big-bend-coast.php.
 */
.goa-cbanner {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	background: var(--goa-tint);
	border-bottom: 1px solid var(--goa-line);
}

.goa-cbanner__in { position: relative; z-index: 2; }
.goa-cbanner__text { max-width: 46rem; }
.goa-cbanner .goa-crumb { margin-bottom: 1.25rem; font-size: .85rem; color: var(--goa-muted); }
.goa-cbanner .goa-crumb a { color: var(--goa-accent); }

.goa-cbanner__title {
	font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
	line-height: 1.06;
}

.goa-cbanner__shape {
	position: absolute;
	right: -4%;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(18rem, 34vw, 34rem);
	z-index: 1;
	pointer-events: none;
}

.goa-cbanner__shape .goa-shape { width: 100%; height: auto; display: block; }
.goa-cbanner__shape .goa-shape path { fill: var(--goa-brand-lt); opacity: .22; }

@media (max-width: 860px) {
	.goa-cbanner__shape { right: -22%; width: 26rem; }
	.goa-cbanner__shape .goa-shape path { opacity: .14; }
}

/* Body and the facts panel. */
.goa-csplit {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (max-width: 900px) { .goa-csplit { grid-template-columns: 1fr; } }

.goa-csplit__body p { margin-bottom: 1.15rem; }
.goa-csplit__body .goa-btn { margin-top: 1rem; }

.goa-cfacts {
	padding: clamp(1.5rem, 2.6vw, 2rem);
	background: var(--goa-brand-pale);
	border: 1px solid var(--goa-line);
	border-top: 3px solid var(--goa-violet-mid);
	border-radius: 8px;
}

.goa-cfacts__h {
	font-family: var(--goa-body-font);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goa-accent);
	margin: 0 0 1.1rem;
}

.goa-cfacts dl { margin: 0; }

.goa-cfacts__row {
	padding: .85rem 0;
	border-bottom: 1px solid var(--goa-line);
}
.goa-cfacts__row:last-child { border-bottom: 0; padding-bottom: 0; }

.goa-cfacts dt {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goa-muted);
	margin-bottom: .3rem;
}

.goa-cfacts dd { margin: 0; color: var(--goa-ink); font-size: .95rem; line-height: 1.45; }

/* Where the facts came from — small, but on the page, so a reader can check. */
.goa-cfacts__src { margin: 1.1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--goa-muted); }

/* Community FAQs — native <details>, so they work with JavaScript off. */
.goa-cfaq { display: grid; gap: .75rem; margin-top: 2rem; }
.goa-cfaq__item {
	background: var(--goa-white);
	border: 1px solid var(--goa-line);
	border-radius: 8px;
	padding: 1rem 1.25rem;
}
.goa-cfaq__item summary {
	cursor: pointer;
	font-family: var(--goa-display);
	font-size: 1.12rem;
	color: var(--goa-accent);
	list-style-position: outside;
}
.goa-cfaq__item p { margin: .75rem 0 0; color: var(--goa-body); }

/* Nearby: three across. */
.goa-markets__grid--near { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 860px) { .goa-markets__grid--near { grid-template-columns: 1fr; } }

/* The hub's groups hold two or three guides each. */
.goa-markets__grid--hub { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .goa-markets__grid--hub { grid-template-columns: 1fr; } }

/* Footer: the areas column is a list of internal links, two columns wide. */
.goa-foot__menu--areas { columns: 2; column-gap: 1.5rem; }
.goa-foot__menu--areas li { break-inside: avoid; }
.goa-foot__h a { color: inherit; text-decoration: none; }
.goa-foot__h a:hover,
.goa-foot__h a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* The home grid's way into the hub. */
.goa-markets__all { margin: 2rem 0 0; text-align: center; }

/* A listing's link to its town guide. */
.goa-listing__guide { margin: 1.75rem 0 0; font-weight: 600; }
.goa-listing__guide a { color: var(--goa-accent); text-underline-offset: 3px; }

/* Breadcrumb links, anywhere. */
.goa-crumb a { color: var(--goa-accent); text-decoration: none; }
.goa-crumb a:hover { text-decoration: underline; }
.goa-crumb span { margin-inline: .4rem; }

.goa-gtoc {
	background: var(--goa-white);
	border-bottom: 1px solid var(--goa-line);
}
.goa-gtoc__in {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: .85rem;
	overflow-x: auto;          /* scrolls inside itself on a phone; the page never does */
	scrollbar-width: none;
}
.goa-gtoc__in::-webkit-scrollbar { display: none; }
.goa-gtoc__h {
	flex: 0 0 auto;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--goa-muted);
}
.goa-gtoc__list { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.goa-gtoc__list a {
	display: inline-block;
	white-space: nowrap;
	padding: .38rem .8rem;
	font-size: .85rem;
	color: var(--goa-deep);
	text-decoration: none;
	background: var(--goa-brand-pale);
	border-radius: 999px;
}
.goa-gtoc__list a:hover { background: var(--goa-line); }

.goa-guide__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.goa-guide__aside {
	position: sticky;
	top: calc(var(--goa-header-h) + 1.5rem);
	align-self: start;
}
@media (max-width: 900px) {
	.goa-guide__grid { grid-template-columns: 1fr; }
	.goa-guide__aside { position: static; order: -1; }
}

/* A jump link lands below the sticky header, not under it. */
.goa-guide__sec, #questions { scroll-margin-top: calc(var(--goa-header-h) + 1.25rem); }

.goa-guide__intro p { font-size: 1.08rem; margin-bottom: 1.15rem; }
.goa-guide__sec { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.goa-guide__sec h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.goa-guide__sec .goa-prose p { margin-bottom: 1.1rem; }

.goa-guide__list { margin: .25rem 0 1.25rem; padding-left: 1.15rem; }
.goa-guide__list li { margin-bottom: .55rem; line-height: 1.6; }

/* The checklist: ticks, not bullets. */
.goa-guide__check { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.goa-guide__check li {
	position: relative;
	padding: .9rem 1rem .9rem 2.8rem;
	background: var(--goa-tint);
	border: 1px solid var(--goa-line);
	border-radius: 8px;
	line-height: 1.55;
}
.goa-guide__check li::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: 1.05rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--goa-violet-mid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* South Dakota basics: a quiet reference box. */
.goa-guide__basics {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--goa-brand-pale);
	border: 1px solid var(--goa-line);
	border-radius: 10px;
}
.goa-guide__basics-lede { color: var(--goa-body); margin-bottom: 1.25rem; }
.goa-guide__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.75rem; margin: 0; }
.goa-guide__facts dt { font-weight: 600; color: var(--goa-ink); margin-bottom: .25rem; }
.goa-guide__facts dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--goa-body); }
@media (max-width: 640px) { .goa-guide__facts { grid-template-columns: 1fr; } }
.goa-guide__src { margin: 1.25rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--goa-muted); }

/* The closing ask. */
.goa-guide__cta {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	color: #fff;
	background: var(--goa-deep);
	border-radius: 10px;
}
.goa-guide__cta h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: .6rem; }
.goa-guide__cta p { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.goa-guide__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.goa-guide__cta .goa-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }

.goa-foot__col:has(.goa-foot__menu--areas) { flex-basis: 290px; }

/* Florida Rule 61J2-10.025(3)(a): the firm name directly above the footer's contact points. */
.goa-foot__firmname { margin: 0 0 6px; color: #fff; font-weight: 600; font-size: .92rem; }

/* The agent portal's sign-in link sits with the legal links. */
.bbap-footer-link { color: inherit; }

/* HUD's official EHO logo, drawn white on the dark footer (from larry-mullinix). */
.goa-eho--official { width: auto; height: 34px; vertical-align: middle; filter: brightness(0) invert(1); opacity: .9; }

/* Phones: the footer columns take the full width instead of 190px strips. */
@media (max-width: 600px) { .goa-foot__col { flex-basis: 100%; } }

/* ------------------------------------------------ floating text button -- */
/* parts/textbar.php, ported from larry-mullinix's callbar (2026-09-16). */
.goa-textbar {
	position: fixed;
	right: clamp(.9rem, 2vw, 1.5rem);
	bottom: clamp(.9rem, 2vw, 1.5rem);
	z-index: 80;
}
.goa-textbar__link {
	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(43, 27, 99, .55), 0 2px 6px rgba(43, 27, 99, .16);
	text-decoration: none;
	overflow: hidden;
	transition: transform .22s var(--goa-ease), box-shadow .22s var(--goa-ease);
}
.goa-textbar__link:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(43, 27, 99, .6); }
/* The brand rule along the bottom edge: violet into gold, like the logo. */
.goa-textbar__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #43298C, #6A4FB8 45%, #C9992F);
}
.goa-textbar__ico {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(160deg, #5B3FA6, #43298C);
	color: #fff;
}
.goa-textbar__ico svg { width: 17px; height: 17px; }
.goa-textbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.goa-textbar__txt strong { font-family: var(--goa-body-font); font-size: .86rem; font-weight: 600; color: #43298C; }
.goa-textbar__txt em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--goa-muted); letter-spacing: .01em; }

/* Keep the last footer line clear of the pill. */
.goa-foot__legal { padding-bottom: 5rem; }

/* The enquiry modal (z-index 120) already covers it; the phone drawer does not, so hide it there. */
body.goa-nav-open .goa-textbar { display: none; }