/*
* Palette set by scripts/set-palette.py.
*
* All reds, at Holly's request (2026-09-16): Rose Realty Group's card red (#EE100B, deepened to #D4150F so white text on it passes), a deep Rose red for structure, a soft rose and a deep maroon for the rule and the washes. No green, no gold.
*
* Rose red #A3161C structure: headings, buttons, footer, the ink
* Soft rose #E0676A fills, rules, washes — never text
* Card red #D4150F the warm accent and the thing to press
* Deep maroon #6B0F14 the fourth stop in the rule — fills only
*
* Carried in one repeated four-part rule under every heading.
* Fully light, on a warm ground.
*
* Measured (WCAG):
* brand on ground 7.4:1
* white on brand 7.8:1
* coral on ground 5.1:1
* white on coral 5.4:1
* surf on ground 3.1:1 large type / fills only
* dune on ground 11.6:1
* body on ground 8.5:1
*/
/* ---------------------------------------------------------------- tokens -- */
:root {
--hrs-brand: #C8282C; /* her red, one step darker: small red TEXT on the cream background was 4.497:1 at #D83135 */
--hrs-brand-mid: #DE4A4E;
--hrs-brand-lt: #EFA3A5;
--hrs-brand-pale: #FCEBEB;
--hrs-accent: #D83135;
--hrs-accent-mid: #DE4A4E;
--hrs-accent-lt: #E0676A;
--hrs-accent-metal: linear-gradient(135deg, #BF262A 0%, #E0474B 52%, #D83135 100%);
--hrs-surf: #E0676A;
--hrs-surf-dk: #C4393D;
--hrs-surf-pale: #FBEDED;
--hrs-coral: #D83135;
--hrs-coral-br: #E0474B;
--hrs-coral-dk: #BF262A;
--hrs-coral-pale: #FBE8E7;
--hrs-dune: #1D1B1C;
--hrs-dune-dk: #0F0E0E;
--hrs-dune-pale: #EDEBEB;
--hrs-sand: #F3D6D7;
--hrs-sand-dp: #E6B9BB;
--hrs-red: #D83135;
--hrs-deep: #D83135;
--hrs-deep-dk: #BF262A;
--hrs-deep-lt: #C8282C; /* links: text, so the text-safe red */
--hrs-stone: #6E6A6B;
--hrs-ink: #1D1B1C;
--hrs-body: #463E41;
--hrs-muted: #6A6164;
--hrs-faint: #8C8386;
--hrs-white: #FFFFFF;
--hrs-shell: #FCF8F1;
--hrs-tint: #FCF8F1;
--hrs-tint-2: #F5EDE0;
--hrs-sky: #F6E8E8;
--hrs-line: #E4DED2;
--hrs-line-soft: #F1EBE1;
--hrs-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
--hrs-body-font: 'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
--hrs-wrap: 1280px;
--hrs-gutter: clamp(1.25rem, 4vw, 3rem);
--hrs-band: clamp(4rem, 8vw, 7rem);
--hrs-header-h: 128px;
--hrs-bar-max: 128px;
--hrs-bar-min: 76px;
--hrs-logo-max: 92px;
--hrs-logo-min: 56px;
--hrs-shrink: 0;
--hrs-ease: cubic-bezier(.22, .61, .36, 1);
--hrs-shadow: 0 1px 2px rgba(19, 19, 21, .05), 0 8px 24px -12px rgba(19, 19, 21, .16);
--hrs-shadow-lg: 0 2px 4px rgba(19, 19, 21, .06), 0 20px 48px -20px rgba(19, 19, 21, .24);
}
@media (max-width: 1040px) {
:root {
--hrs-header-h: 96px;
--hrs-bar-max: 96px;
--hrs-bar-min: 62px;
--hrs-logo-max: 68px;
--hrs-logo-min: 38px;
}
}
/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 6rem;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--hrs-shell);
color: var(--hrs-body);
font-family: var(--hrs-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.hrs-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--hrs-deep-lt); text-decoration: none; transition: color .2s var(--hrs-ease); }
a:hover { color: var(--hrs-deep); }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--hrs-display);
font-weight: 400;
line-height: 1.16;
letter-spacing: -.018em;
color: var(--hrs-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(--hrs-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--hrs-accent-lt); color: var(--hrs-ink); }
.hrs-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hrs-skip {
position: absolute; top: -100px; left: 1rem; z-index: 200;
padding: .75rem 1.25rem;
background: var(--hrs-deep); color: #fff; font-weight: 600;
transition: top .2s var(--hrs-ease);
}
.hrs-skip:focus { top: 1rem; color: #fff; }
/* --------------------------------------------------------------- layout -- */
.hrs-wrap {
width: 100%;
max-width: var(--hrs-wrap);
margin-inline: auto;
padding-inline: var(--hrs-gutter);
}
.hrs-wrap--narrow { max-width: 60rem; }
.hrs-section { position: relative; padding-block: var(--hrs-band); }
.hrs-section--tint { background: var(--hrs-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. */
.hrs-section--dark {
background: var(--hrs-deep);
color: rgba(255, 255, 255, .82);
}
.hrs-section--dark h1,
.hrs-section--dark h2,
.hrs-section--dark h3 { color: #fff; }
/* ------------------------------------------------------------- typography -- */
.hrs-eyebrow {
display: inline-block;
margin-bottom: .9rem;
font-family: var(--hrs-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-eyebrow--light { color: var(--hrs-accent-lt); }
/* On the hero specifically the eyebrow sits on a photograph rather than a flat
dark band, and the brand light blue disappears into the water. Near-white with
a slight shadow holds it without turning it into a second headline. */
.hrs-hero .hrs-eyebrow--light {
color: rgba(255, 255, 255, .95);
text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 1px 14px rgba(10, 12, 16, .5);
}
.hrs-hero__title { text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45); }
.hrs-rule {
display: block;
width: 56px; height: 3px;
margin: 1.1rem 0 1.4rem;
background: var(--hrs-accent-metal);
border-radius: 3px;
}
.hrs-head--center .hrs-rule,
.hrs-closer .hrs-rule,
.hrs-modal__head .hrs-rule { margin-inline: auto; }
.hrs-lede {
font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
line-height: 1.65;
color: var(--hrs-muted);
max-width: 56ch;
}
.hrs-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.hrs-head--center { margin-inline: auto; text-align: center; }
.hrs-head--center .hrs-lede { margin-inline: auto; }
.hrs-head--light .hrs-lede { color: rgba(255, 255, 255, .8); }
.hrs-head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
max-width: none;
}
@media (max-width: 720px) {
.hrs-head--split { flex-direction: column; align-items: flex-start; }
}
.hrs-prose { color: var(--hrs-body); }
.hrs-prose p { margin-bottom: 1.1em; }
.hrs-prose--editor h2,
.hrs-prose--editor h3 { margin: 2rem 0 .75rem; }
.hrs-prose--editor ul,
.hrs-prose--editor ol { margin: 0 0 1.2em 1.25rem; list-style: disc; }
.hrs-prose--editor ol { list-style: decimal; }
.hrs-prose--editor li { margin-bottom: .4em; }
.hrs-prose--article { font-size: 1.05rem; }
.hrs-prose--article p { margin-bottom: 1.3em; }
.hrs-pull {
margin: 1.75rem 0 0;
padding: 1.1rem 1.4rem;
border-left: 3px solid var(--hrs-accent);
background: var(--hrs-tint);
border-radius: 0 4px 4px 0;
font-family: var(--hrs-display);
font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
font-weight: 400;
line-height: 1.45;
color: var(--hrs-ink);
}
/* --------------------------------------------------------------- buttons -- */
.hrs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9rem 1.6rem;
border: 1px solid var(--hrs-deep);
border-radius: 4px;
background: var(--hrs-deep);
color: #fff;
font-family: var(--hrs-display);
font-size: .82rem;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: transform .2s var(--hrs-ease), box-shadow .2s var(--hrs-ease), background .2s var(--hrs-ease);
-webkit-appearance: none;
appearance: none;
}
.hrs-btn:hover {
background: var(--hrs-deep-dk);
border-color: var(--hrs-deep-dk);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 24px -12px rgba(19, 19, 21, .5);
}
.hrs-btn:active { transform: translateY(0); }
/*
* The primary call to action.
*
* The metal gradient runs through the brand red (set-palette.py). Text on it
* is always white; white on the brand red measures 7.8:1.
*/
.hrs-btn--accent {
background: var(--hrs-accent-metal);
border-color: transparent;
color: #FFFFFF;
}
.hrs-btn--accent:hover {
background: var(--hrs-accent-metal);
filter: brightness(1.08);
color: #FFFFFF;
box-shadow: 0 12px 26px -12px rgba(42, 42, 46, .55);
}
.hrs-btn--ghost {
background: transparent;
border-color: var(--hrs-line);
color: var(--hrs-deep);
}
.hrs-btn--ghost:hover {
background: var(--hrs-tint);
border-color: var(--hrs-deep);
color: var(--hrs-deep);
box-shadow: none;
}
.hrs-btn--ghost-light {
background: transparent;
border-color: rgba(255, 255, 255, .5);
color: #fff;
}
.hrs-btn--ghost-light:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
box-shadow: none;
}
.hrs-btn--sm { padding: .68rem 1.1rem; font-size: .74rem; }
.hrs-btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.hrs-btn--block { display: flex; width: 100%; }
/* -------------------------------------------------------------- utility -- */
.hrs-utility {
position: relative;
z-index: 60;
background: var(--hrs-deep);
color: rgba(255, 255, 255, .72);
font-size: .78rem;
}
.hrs-utility__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 40px;
padding-block: .35rem;
}
.hrs-utility__tagline {
margin: 0;
font-family: var(--hrs-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hrs-accent-lt);
white-space: nowrap;
}
.hrs-utility__list { display: flex; align-items: center; gap: 1.4rem; }
.hrs-utility__list a {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, .82);
}
.hrs-utility__list a:hover { color: #fff; }
.hrs-icon { flex-shrink: 0; color: var(--hrs-accent-lt); transition: color .2s var(--hrs-ease); }
.hrs-utility__list a:hover .hrs-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. */
.hrs-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.
*/
.hrs-lang {
display: inline-flex;
align-items: center;
gap: 1px;
padding: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
}
.hrs-lang__on,
.hrs-lang__off {
display: inline-block;
padding: .18rem .55rem;
border-radius: 999px;
line-height: 1.5;
}
.hrs-lang__on {
background: #fff;
color: var(--hrs-deep);
}
.hrs-utility__list .hrs-lang__off {
color: rgba(255, 255, 255, .8);
transition: background .18s var(--hrs-ease), color .18s var(--hrs-ease);
}
.hrs-utility__list .hrs-lang__off:hover {
background: rgba(255, 255, 255, .16);
color: #fff;
}
/*
* In the drawer the bar is on white, not on the deep band, so the whole thing
* inverts. It also spells the languages out — there is room for "Español" on a
* phone and it reads as a promise rather than a two-letter code.
*/
.hrs-lang--drawer {
align-self: center;
background: var(--hrs-sky);
font-size: .82rem;
}
.hrs-lang--drawer .hrs-lang__on {
background: var(--hrs-brand);
color: #fff;
}
.hrs-lang--drawer .hrs-lang__off {
color: var(--hrs-accent);
}
.hrs-lang--drawer .hrs-lang__off:hover {
background: rgba(163, 22, 28, .12);
}
/* --------------------------------------------------------------- header -- */
/* Constant-height shell; only the bar inside it moves. Collapsing the header
itself would shorten the document mid-scroll and drag the page up under the
reader — see themes/CLAUDE.md. */
.hrs-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--hrs-header-h);
pointer-events: none;
}
.hrs-header__bar {
pointer-events: auto;
background: #fff;
border-bottom: 1px solid var(--hrs-line);
box-shadow: 0 8px 24px -18px rgba(19, 19, 21, calc(1.4 * var(--hrs-shrink)));
}
.hrs-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: calc(var(--hrs-bar-max) + (var(--hrs-bar-min) - var(--hrs-bar-max)) * var(--hrs-shrink));
}
.hrs-brand { display: inline-flex; flex-shrink: 0; }
.hrs-logo { display: inline-flex; align-items: center; gap: .65rem; }
.hrs-logo__img {
height: calc(var(--hrs-logo-max) + (var(--hrs-logo-min) - var(--hrs-logo-max)) * var(--hrs-shrink));
width: auto;
}
.hrs-logo__mark { display: inline-flex; }
.hrs-logo__mark svg { width: 40px; height: 40px; }
.hrs-logo--footer .hrs-logo__mark svg { width: 46px; height: 46px; }
.hrs-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.hrs-logo__name {
font-family: var(--hrs-display);
font-size: 1.32rem;
font-weight: 400;
letter-spacing: -.01em;
color: var(--hrs-deep);
}
.hrs-logo__sub {
margin-top: .18rem;
font-family: var(--hrs-display);
font-size: .62rem;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-logo--footer .hrs-logo__name { color: #fff; }
.hrs-logo--footer .hrs-logo__img { height: 74px; }
/* ------------------------------------------------------------------ nav -- */
.hrs-nav { margin-inline: auto; }
.hrs-nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }
.hrs-nav__list a {
position: relative;
display: inline-block;
padding-block: .35rem;
font-family: var(--hrs-display);
font-size: .8rem;
font-weight: 400;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--hrs-ink);
}
.hrs-nav__list a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--hrs-accent-metal);
transition: width .25s var(--hrs-ease);
}
.hrs-nav__list a:hover { color: var(--hrs-deep); }
.hrs-nav__list a:hover::after,
.hrs-nav__list .is-current > a::after,
.hrs-nav__list .current-menu-item > a::after { width: 100%; }
.hrs-nav__list .is-current > a,
.hrs-nav__list .current-menu-item > a { color: var(--hrs-deep); }
.hrs-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.hrs-burger {
display: none;
padding: .55rem;
background: none;
border: 1px solid var(--hrs-line);
border-radius: 4px;
cursor: pointer;
}
.hrs-burger__box { display: block; width: 20px; }
.hrs-burger__box i {
display: block; height: 2px; background: var(--hrs-deep);
transition: transform .25s var(--hrs-ease), opacity .2s var(--hrs-ease);
}
.hrs-burger__box i + i { margin-top: 4px; }
.hrs-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hrs-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hrs-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1040px) {
.hrs-nav { display: none; }
.hrs-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 .hrs-callnow and would otherwise win silently. */
.hrs-header__actions .hrs-btn:not(.hrs-callnow) { display: none; }
}
/* --------------------------------------------------------------- drawer -- */
.hrs-drawer {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1.5rem;
padding: calc(var(--hrs-header-h) + 1.75rem) var(--hrs-gutter) 2.5rem;
background: #fff;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .28s var(--hrs-ease), visibility .28s var(--hrs-ease);
}
.hrs-drawer[hidden] { display: flex; }
.hrs-drawer.is-open { opacity: 1; visibility: visible; }
.hrs-drawer__nav .hrs-nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; }
.hrs-drawer__nav .hrs-nav__list a { padding-block: .7rem; font-size: 1.3rem; letter-spacing: .04em; }
.hrs-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.hrs-drawer__call {
font-family: var(--hrs-display);
font-size: 1.05rem;
font-weight: 400;
text-align: center;
color: var(--hrs-deep);
}
/* --------------------------------------------------------------- figures -- */
.hrs-figure {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--hrs-tint-2);
}
.hrs-figure img { width: 100%; height: 100%; object-fit: cover; }
.hrs-figure--cover { position: absolute; inset: 0; border-radius: 0; }
.hrs-figure--tall { aspect-ratio: 4 / 5; }
.hrs-figure--portrait { aspect-ratio: 3 / 4; }
.hrs-figure--wide { aspect-ratio: 16 / 10; }
.hrs-figure--hero { aspect-ratio: 16 / 9; border-radius: 8px; }
.hrs-figure--lead { margin-bottom: 2rem; }
.hrs-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(19, 19, 21, .03) 12px 24px),
var(--hrs-tint-2);
}
.hrs-figure__mark { opacity: .5; }
.hrs-figure__note {
font-family: var(--hrs-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hrs-faint);
}
/* ------------------------------------------------------------------ hero -- */
.hrs-hero {
position: relative;
display: flex;
align-items: center;
min-height: clamp(30rem, 74vh, 42rem);
padding-block: clamp(5rem, 10vh, 7rem);
overflow: hidden;
background: #080809;
}
.hrs-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 --hrs-deep, so the photograph stays in the same family as the logo.
* The photograph is also a top-down aerial and therefore busy edge to edge —
* there is no empty sky to drop type onto — so the left side is scrimmed harder
* than a normal hero would need. */
/*
* A LIGHT hero. This is the fifth version of this decision in the repo and it
* is settled: Adam has rejected dark twice and rejected light-with-dark-bands
* as still too dark. The version inherited here scrimmed the left edge at 0.92
* navy, which turned a bright aerial of a sunlit barrier island into a navy
* panel with a photograph faintly behind it.
*
* So the scrim is low and NEUTRAL — a warm-grey dark rather than navy, because
* a blue scrim over blue water grades the footage toward the brand colour,
* which is the thing not to do. Legibility comes from the text shadow on
* .hrs-hero__title and .hrs-hero__lede instead, which darkens only the pixels
* immediately behind the letterforms and leaves the picture alone. Measured
* with scripts/hero-contrast.py, not eyeballed.
*/
.hrs-hero__scrim {
position: absolute;
inset: 0;
background:
/*
* A BAND, not a blanket. The headline measured 2.58:1 against the
* brightest stretch of beach behind it and large text needs 3:1, so
* the fix is a soft horizontal band of extra density across the rows
* the type actually occupies — roughly 26% to 66% of the hero — while
* the sky at the top and the surf at the bottom stay as bright as the
* footage shot them. Darkening the whole picture to fix one line is
* what produced the navy panel this replaced.
*/
linear-gradient(to bottom, rgba(16, 18, 22, 0) 16%, rgba(16, 18, 22, .30) 30%, rgba(16, 18, 22, .30) 62%, rgba(16, 18, 22, 0) 78%),
linear-gradient(to right, rgba(16, 18, 22, .58) 0%, rgba(16, 18, 22, .40) 44%, rgba(16, 18, 22, .06) 76%, rgba(16, 18, 22, .12) 100%),
linear-gradient(to bottom, rgba(16, 18, 22, .14) 0%, rgba(16, 18, 22, .00) 38%, rgba(16, 18, 22, .26) 100%);
}
/*
* Phones get the fence-and-blue-sky still, and the copy runs full width over
* its brightest clouds: lede 4.04:1 and eyebrow 3.16:1 at 430px. A firmer vertical
* band from the logo down, still neutral, never graded toward the brand.
*/
@media (max-width: 900px) {
.hrs-hero__scrim {
background:
linear-gradient(to bottom, rgba(16, 18, 22, .34) 0%, rgba(16, 18, 22, .54) 22%, rgba(16, 18, 22, .52) 80%, rgba(16, 18, 22, .36) 100%);
}
.hrs-hero__lede,
.hrs-hero .hrs-eyebrow--light,
.hrs-hero__phone strong { color: #fff; }
}
.hrs-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.hrs-hero__title { color: #fff; }
.hrs-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }
.hrs-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hrs-hero__note {
margin-top: 1.35rem;
font-size: .84rem;
color: rgba(255, 255, 255, .62);
}
/* ---------------------------------------------------------------- banner -- */
.hrs-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(--hrs-deep-dk);
}
.hrs-banner__media { position: absolute; inset: 0; z-index: 0; }
.hrs-banner__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .46) 55%, rgba(16, 18, 22, .30) 100%),
linear-gradient(to bottom, rgba(16, 18, 22, .24) 0%, rgba(16, 18, 22, .12) 50%, rgba(16, 18, 22, .42) 100%);
}
.hrs-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.hrs-banner__title { color: #fff; }
.hrs-banner__lede { color: rgba(255, 255, 255, .85); }
/* Banners with no photograph still need to be navy, not a white void. */
.hrs-banner:not(:has(.hrs-banner__media)) { background: var(--hrs-deep); }
/* ----------------------------------------------------------------- split -- */
.hrs-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.hrs-split--reverse .hrs-split__media { order: 2; }
.hrs-split--reverse .hrs-split__body { order: 1; }
.hrs-split__body .hrs-lede { margin-bottom: 1.25rem; }
.hrs-split__body .hrs-btn { margin-top: 1.5rem; }
@media (max-width: 900px) {
.hrs-split { grid-template-columns: 1fr; }
.hrs-split--reverse .hrs-split__media,
.hrs-split--reverse .hrs-split__body { order: initial; }
.hrs-figure--tall, .hrs-figure--portrait { aspect-ratio: 16 / 11; }
}
/* ----------------------------------------------------------- cards, grid -- */
.hrs-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.5rem;
}
.hrs-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--hrs-ease), box-shadow .28s var(--hrs-ease), border-color .28s var(--hrs-ease);
}
.hrs-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--hrs-shadow-lg);
}
.hrs-card__media { position: relative; display: block; }
.hrs-card__media .hrs-figure { border-radius: 0; }
.hrs-card__media img { transition: transform .5s var(--hrs-ease); }
.hrs-card:hover .hrs-card__media img { transform: scale(1.035); }
.hrs-card__status {
position: absolute;
top: .75rem; left: .75rem;
padding: .35rem .7rem;
border-radius: 3px;
background: var(--hrs-deep);
color: #fff;
font-family: var(--hrs-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
}
/* A sold listing should not look like an available one. */
.hrs-status--sold,
.hrs-status--closed { background: var(--hrs-ink); }
.hrs-status--pending,
.hrs-status--under-contract { background: var(--hrs-accent); color: #FFFFFF; }
.hrs-status--coming-soon { background: var(--hrs-deep-lt); }
.hrs-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.5rem; }
.hrs-card__price {
margin-bottom: .35rem;
font-family: var(--hrs-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--hrs-deep);
}
.hrs-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.hrs-card__title a { color: var(--hrs-ink); }
.hrs-card__title a:hover { color: var(--hrs-deep); }
.hrs-card__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .9rem;
font-size: .88rem;
color: var(--hrs-muted);
}
.hrs-card__addr .hrs-icon { color: var(--hrs-accent); }
.hrs-card__specs {
display: flex;
flex-wrap: wrap;
gap: .35rem 1.1rem;
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid var(--hrs-line-soft);
font-size: .84rem;
color: var(--hrs-body);
}
.hrs-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.hrs-card__specs .hrs-icon { color: var(--hrs-deep-lt); }
.hrs-card__date {
margin-bottom: .4rem;
font-family: var(--hrs-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-card__text { font-size: .93rem; color: var(--hrs-muted); margin-bottom: 1rem; }
.hrs-count {
margin-bottom: 1.75rem;
font-size: .88rem;
color: var(--hrs-muted);
}
/* --------------------------------------------------------------- services -- */
.hrs-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1.25rem;
}
.hrs-service {
display: flex;
flex-direction: column;
padding: 2rem 1.6rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 8px;
color: inherit;
transition: transform .28s var(--hrs-ease), box-shadow .28s var(--hrs-ease), border-color .28s var(--hrs-ease);
}
.hrs-service:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--hrs-shadow-lg);
color: inherit;
}
.hrs-service__num {
margin-bottom: .9rem;
font-family: var(--hrs-display);
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
color: var(--hrs-accent);
}
.hrs-service__title { margin-bottom: .5rem; }
.hrs-service__text { font-size: .93rem; color: var(--hrs-muted); margin-bottom: 1.25rem; }
.hrs-service__link {
margin-top: auto;
font-family: var(--hrs-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-deep);
}
.hrs-service__link::after {
content: ' \2192';
display: inline-block;
transition: transform .25s var(--hrs-ease);
}
.hrs-service:hover .hrs-service__link::after,
.hrs-card:hover .hrs-service__link::after { transform: translateX(4px); }
/* --------------------------------------------------------------- pillars -- */
.hrs-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1.25rem;
}
.hrs-pillar {
padding: 1.75rem 1.5rem;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 8px;
}
.hrs-pillar__title { margin-bottom: .6rem; font-size: 1.05rem; }
.hrs-pillar__body { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }
/* ----------------------------------------------------------------- steps -- */
.hrs-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1.5rem;
}
.hrs-step { padding-top: 1.5rem; border-top: 2px solid var(--hrs-line); }
.hrs-step__num {
display: block;
margin-bottom: .7rem;
font-family: var(--hrs-display);
font-size: 1.7rem;
font-weight: 400;
line-height: 1;
color: var(--hrs-accent);
}
.hrs-step__title { margin-bottom: .4rem; }
.hrs-step__text { font-size: .92rem; color: var(--hrs-muted); margin: 0; }
/* ---------------------------------------------------------------- quotes -- */
.hrs-quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 1.5rem;
}
.hrs-quote {
margin: 0;
padding: 1.9rem 1.6rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 8px;
}
.hrs-quote__stars { color: var(--hrs-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.hrs-quote blockquote { margin: 0 0 1.1rem; color: var(--hrs-body); }
.hrs-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.hrs-quote__name { font-family: var(--hrs-display); font-weight: 400; color: var(--hrs-ink); font-size: .92rem; }
.hrs-quote__via { font-size: .8rem; color: var(--hrs-faint); }
/* ------------------------------------------------------------------ team -- */
.hrs-team { display: grid; gap: 2rem; }
.hrs-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(--hrs-line);
border-radius: 8px;
}
@media (max-width: 760px) {
.hrs-member { grid-template-columns: 1fr; }
}
.hrs-member__photo { position: relative; }
.hrs-member__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
border-radius: 6px;
background: var(--hrs-deep);
color: var(--hrs-accent-lt);
font-family: var(--hrs-display);
font-size: 3.5rem;
font-weight: 400;
letter-spacing: .04em;
}
.hrs-member__name { margin-bottom: .2rem; }
.hrs-member__role {
font-family: var(--hrs-display);
font-size: .78rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-member__bio { color: var(--hrs-body); margin-bottom: 1.1rem; }
.hrs-member__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.hrs-member__contact a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.hrs-member__contact .hrs-icon { color: var(--hrs-accent); }
.hrs-joinus {
margin-top: 2rem;
padding: clamp(1.75rem, 4vw, 2.5rem);
background: var(--hrs-tint);
border: 1px solid var(--hrs-line);
border-radius: 8px;
text-align: center;
}
.hrs-joinus h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.hrs-joinus p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.4rem; color: var(--hrs-muted); }
/* -------------------------------------------------------------- listing -- */
.hrs-listing { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.hrs-listing__head { margin-bottom: 1.75rem; }
.hrs-crumb { font-size: .82rem; color: var(--hrs-faint); margin-bottom: 1rem; }
.hrs-crumb span { margin-inline: .4rem; }
.hrs-listing__titles {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.hrs-listing__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-top: .6rem;
color: var(--hrs-muted);
}
.hrs-listing__addr .hrs-icon { color: var(--hrs-accent); }
.hrs-listing__price { text-align: right; }
.hrs-listing__amount {
font-family: var(--hrs-display);
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
font-weight: 400;
color: var(--hrs-deep);
margin-bottom: .4rem;
}
.hrs-listing__price .hrs-card__status { position: static; display: inline-block; }
.hrs-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
gap: 1px;
margin-top: 1.75rem;
background: var(--hrs-line);
border: 1px solid var(--hrs-line);
border-radius: 8px;
overflow: hidden;
}
.hrs-facts li { padding: 1.1rem 1.25rem; background: #fff; text-align: center; }
.hrs-facts__value {
display: block;
font-family: var(--hrs-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--hrs-ink);
}
.hrs-facts__label {
display: block;
margin-top: .2rem;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--hrs-faint);
}
.hrs-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) { .hrs-listing__body { grid-template-columns: 1fr; } }
.hrs-listing__galleryhead { margin-top: 2.5rem; }
.hrs-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: 1rem;
}
.hrs-askbox {
position: sticky;
top: calc(var(--hrs-header-h) + 1.5rem);
padding: 1.75rem 1.6rem;
background: var(--hrs-tint);
border: 1px solid var(--hrs-line);
border-radius: 8px;
}
.hrs-askbox h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.hrs-askbox p { font-size: .92rem; color: var(--hrs-muted); margin-bottom: 1.25rem; }
.hrs-askbox__call {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: .9rem;
font-family: var(--hrs-display);
font-weight: 400;
color: var(--hrs-deep);
}
/* ----------------------------------------------------------------- empty -- */
.hrs-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(--hrs-tint);
border: 1px solid var(--hrs-line);
border-radius: 8px;
}
.hrs-empty__mark { opacity: .7; }
.hrs-empty h2 { font-size: 1.3rem; }
.hrs-empty p { color: var(--hrs-muted); margin-bottom: .5rem; }
/* ------------------------------------------------------------------ faqs -- */
.hrs-faqs { display: grid; gap: .75rem; }
.hrs-faq {
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 6px;
}
.hrs-faq[open] { border-color: var(--hrs-deep-lt); }
.hrs-faq__q {
position: relative;
padding: 1.15rem 3rem 1.15rem 1.35rem;
font-family: var(--hrs-display);
font-size: 1rem;
font-weight: 400;
color: var(--hrs-ink);
cursor: pointer;
list-style: none;
}
.hrs-faq__q::-webkit-details-marker { display: none; }
.hrs-faq__q:hover { color: var(--hrs-deep); }
.hrs-faq__q::after,
.hrs-faq__q::before {
content: '';
position: absolute;
right: 1.35rem; top: 50%;
width: 12px; height: 2px;
background: var(--hrs-accent);
transition: transform .25s var(--hrs-ease);
}
.hrs-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.hrs-faq__q::after { transform: translateY(-50%); }
.hrs-faq[open] .hrs-faq__q::before { transform: translateY(-50%) rotate(0deg); }
.hrs-faq__a { margin: 0; padding: 0 3rem 1.35rem 1.35rem; color: var(--hrs-muted); }
/* ---------------------------------------------------------------- contact -- */
.hrs-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) { .hrs-contact { grid-template-columns: 1fr; } }
.hrs-contact__form .hrs-form { margin-top: 1.75rem; }
.hrs-contact__aside {
display: grid;
gap: 1px;
background: var(--hrs-line);
border: 1px solid var(--hrs-line);
border-radius: 8px;
overflow: hidden;
}
.hrs-contact__block { padding: 1.4rem 1.5rem; background: #fff; }
.hrs-contact__heading {
margin-bottom: .4rem;
font-family: var(--hrs-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-contact__big {
display: inline-block;
font-family: var(--hrs-display);
font-size: 1.1rem;
font-weight: 400;
color: var(--hrs-ink);
word-break: break-word;
}
.hrs-contact__big:hover { color: var(--hrs-deep); }
.hrs-contact__note, .hrs-contact__text { margin: .3rem 0 0; font-size: .9rem; color: var(--hrs-muted); }
.hrs-contact__text { color: var(--hrs-body); }
.hrs-contact__seal {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
padding: 1.75rem 1.5rem;
text-align: center;
background: var(--hrs-deep);
}
.hrs-contact__seal p {
margin: 0;
font-family: var(--hrs-display);
font-size: .78rem;
font-weight: 400;
color: rgba(255, 255, 255, .82);
}
.hrs-contact__seal .hrs-mark { filter: brightness(1.6); }
/* ------------------------------------------------------------------ form -- */
.hrs-form { display: grid; gap: 1rem; }
.hrs-field { display: grid; gap: .4rem; min-width: 0; }
.hrs-field__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: 1rem;
}
.hrs-field label {
font-family: var(--hrs-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--hrs-muted);
}
.hrs-field label span { color: var(--hrs-accent); }
.hrs-field input,
.hrs-field select,
.hrs-field textarea {
width: 100%;
padding: .8rem .95rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 5px;
color: var(--hrs-ink);
font-family: var(--hrs-body-font);
font-size: 1rem;
line-height: 1.5;
transition: border-color .2s var(--hrs-ease), box-shadow .2s var(--hrs-ease);
-webkit-appearance: none;
appearance: none;
}
.hrs-field textarea { resize: vertical; min-height: 8rem; }
.hrs-field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--hrs-deep) 50%),
linear-gradient(135deg, var(--hrs-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;
}
.hrs-field input:focus,
.hrs-field select:focus,
.hrs-field textarea:focus {
border-color: var(--hrs-deep-lt);
box-shadow: 0 0 0 3px rgba(163, 22, 28, .12);
outline: none;
}
.hrs-field input::placeholder, .hrs-field textarea::placeholder { color: var(--hrs-faint); }
/* Off-screen rather than display:none — some bots skip explicitly hidden
fields, and this one is meant to be filled in. */
.hrs-trap {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}
.hrs-form__note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.hrs-form__note.is-ok { color: var(--hrs-deep); }
.hrs-form__note.is-bad { color: #C0392B; }
.hrs-form.is-sending { opacity: .6; pointer-events: none; }
.hrs-alert {
padding: .9rem 1.15rem;
margin-bottom: 1.5rem;
border-left: 3px solid var(--hrs-deep);
background: var(--hrs-tint);
border-radius: 0 4px 4px 0;
font-size: .94rem;
}
.hrs-alert--ok { border-left-color: var(--hrs-deep); color: var(--hrs-deep); }
.hrs-alert--bad { border-left-color: #C0392B; color: #C0392B; }
/* ----------------------------------------------------------------- modal -- */
.hrs-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: var(--hrs-gutter);
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--hrs-ease), visibility .25s var(--hrs-ease);
}
.hrs-modal[hidden] { display: flex; }
.hrs-modal.is-open { opacity: 1; visibility: visible; }
.hrs-modal__veil {
position: absolute;
inset: 0;
background: rgba(19, 19, 21, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hrs-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(--hrs-shadow-lg);
transform: translateY(14px) scale(.99);
transition: transform .3s var(--hrs-ease);
}
.hrs-modal.is-open .hrs-modal__panel { transform: translateY(0) scale(1); }
.hrs-modal__panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--hrs-accent-metal);
border-radius: 10px 10px 0 0;
}
.hrs-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(--hrs-muted);
font-size: 1.55rem;
line-height: 1;
cursor: pointer;
transition: color .2s var(--hrs-ease), border-color .2s var(--hrs-ease);
}
.hrs-modal__close:hover { color: var(--hrs-deep); border-color: var(--hrs-line); }
.hrs-modal__head { margin-bottom: 1.6rem; text-align: center; }
.hrs-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.hrs-modal__lede { margin: 0; font-size: .94rem; color: var(--hrs-muted); }
/* ---------------------------------------------------------------- closer -- */
.hrs-closer {
position: relative;
padding-block: clamp(3.5rem, 7vw, 5.5rem);
background: var(--hrs-deep);
color: rgba(255, 255, 255, .82);
text-align: center;
overflow: hidden;
}
.hrs-closer::before {
content: '';
position: absolute;
top: -45%; left: 50%;
width: 44rem; height: 44rem;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, transparent 62%);
pointer-events: none;
}
.hrs-closer__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.hrs-closer__title { color: #fff; }
.hrs-closer__lede { color: rgba(255, 255, 255, .82); margin-inline: auto; margin-top: 1rem; }
.hrs-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
/* ----------------------------------------------------------------- posts -- */
.hrs-posts { display: grid; gap: 2.25rem; }
.hrs-post { padding-bottom: 2.25rem; border-bottom: 1px solid var(--hrs-line); }
.hrs-post__date {
font-family: var(--hrs-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-post__title { margin: .4rem 0 .6rem; }
.hrs-post__excerpt { color: var(--hrs-muted); margin: 0; }
.hrs-backlink { margin-top: 2.5rem; font-family: var(--hrs-display); font-weight: 400; }
.hrs-pagination { margin-top: 2.75rem; }
.hrs-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.hrs-pagination .page-numbers {
padding: .5rem .9rem;
border: 1px solid var(--hrs-line);
border-radius: 4px;
color: var(--hrs-body);
font-size: .88rem;
}
.hrs-pagination .page-numbers.current,
.hrs-pagination .page-numbers:hover {
border-color: var(--hrs-deep);
background: var(--hrs-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(--hrs-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(--hrs-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--hrs-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(--hrs-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--hrs-line); margin: 2rem 0; }
/* ---------------------------------------------------------------- reveal -- */
@media (prefers-reduced-motion: no-preference) {
html.js [data-hrs-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity .7s var(--hrs-ease), transform .7s var(--hrs-ease);
}
html.js [data-hrs-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) {
.hrs-section { padding-block: clamp(3rem, 10vw, 4rem); }
.hrs-card__body { padding: 1.15rem; }
.hrs-service { padding: 1.6rem 1.3rem; }
.hrs-listing__titles { flex-direction: column; align-items: flex-start; }
.hrs-listing__price { text-align: left; }
}
body.admin-bar .hrs-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hrs-header { top: 46px; } }
/* -------------------------------------------------------- nav dropdowns -- */
.hrs-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. */
.hrs-nav__toggle {
display: inline-flex;
align-items: center;
padding: .25rem;
background: none;
border: 0;
color: var(--hrs-ink);
cursor: pointer;
transition: transform .2s var(--hrs-ease);
}
.hrs-nav__item.is-open > .hrs-nav__toggle { transform: rotate(180deg); }
.hrs-nav__sub {
position: absolute;
top: 100%;
left: -1rem;
min-width: 15rem;
padding: .5rem 0;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 6px;
box-shadow: var(--hrs-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .2s var(--hrs-ease), transform .2s var(--hrs-ease), visibility .2s var(--hrs-ease);
z-index: 20;
}
.hrs-nav__item:hover > .hrs-nav__sub,
.hrs-nav__item:focus-within > .hrs-nav__sub,
.hrs-nav__item.is-open > .hrs-nav__sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hrs-nav__sub a {
display: block;
padding: .55rem 1.1rem;
font-size: .78rem;
text-transform: none;
letter-spacing: .01em;
color: var(--hrs-body);
}
.hrs-nav__sub a::after { display: none; }
.hrs-nav__sub a:hover { background: var(--hrs-tint); color: var(--hrs-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. */
.hrs-drawer__nav .hrs-nav__list { width: 100%; gap: 0; }
.hrs-drawer__nav .hrs-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(--hrs-line);
}
.hrs-drawer__nav .hrs-nav__item > a {
grid-column: 2;
padding-block: 1rem;
font-size: 1.06rem;
text-align: center;
}
.hrs-drawer__nav .hrs-nav__item > a::after { display: none; }
/* The row is the control, so it should look like one under the finger. */
.hrs-drawer__nav .hrs-nav__item.has-children { cursor: pointer; }
.hrs-drawer__nav .hrs-nav__item.has-children:active { background: var(--hrs-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. */
.hrs-drawer__nav .hrs-nav__toggle {
grid-column: 3;
display: inline-flex;
justify-content: center;
width: 3rem;
height: 3rem;
color: var(--hrs-deep);
}
.hrs-drawer__nav .hrs-nav__sub {
grid-column: 1 / -1;
background: var(--hrs-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(--hrs-ease), opacity .2s var(--hrs-ease), padding .3s var(--hrs-ease);
}
.hrs-drawer__nav .hrs-nav__item.is-open > .hrs-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;
}
.hrs-drawer__nav .hrs-nav__sub a {
padding: .55rem 0;
font-size: .95rem;
font-weight: 500;
text-align: center;
text-transform: none;
letter-spacing: 0;
color: var(--hrs-body);
}
/* ----------------------------------------------------------- credentials -- */
/* White, not navy. It sat directly beneath a navy-scrimmed hero and the two ran
together as one undifferentiated slab of blue. */
.hrs-creds { background: #fff; border-bottom: 1px solid var(--hrs-line); }
.hrs-creds__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 13rem), 1fr));
gap: 1px;
background: var(--hrs-line);
}
.hrs-creds__list li {
padding: 1.5rem 1.25rem;
background: #fff;
text-align: center;
}
.hrs-creds__label {
display: block;
font-family: var(--hrs-display);
font-size: 1.02rem;
font-weight: 400;
color: var(--hrs-deep);
}
.hrs-creds__note {
display: block;
margin-top: .3rem;
font-size: .82rem;
color: var(--hrs-muted);
}
/* ----------------------------------------------------------------- paths -- */
.hrs-paths {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.hrs-path {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--hrs-ease), box-shadow .28s var(--hrs-ease);
}
.hrs-path:hover { transform: translateY(-4px); box-shadow: var(--hrs-shadow-lg); }
.hrs-path__media .hrs-figure { border-radius: 0; }
.hrs-path__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.hrs-path__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.hrs-path__text { color: var(--hrs-muted); margin-bottom: 1.5rem; }
/* ----------------------------------------------------------------- creed -- */
.hrs-creed__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.hrs-creed__quote { margin: 0; }
.hrs-creed__goal {
font-family: var(--hrs-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;
}
.hrs-creed__close {
font-size: clamp(1rem, .97rem + .3vw, 1.12rem);
color: var(--hrs-accent-lt);
font-weight: 500;
}
.hrs-creed__attrib {
margin-top: 1.25rem;
font-family: var(--hrs-display);
font-size: .76rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.hrs-creed__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
margin-top: 2rem;
}
/* ------------------------------------------------------- valuation call -- */
.hrs-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(--hrs-tint);
border: 1px solid var(--hrs-line);
border-left: 4px solid var(--hrs-accent-mid);
border-radius: 8px;
}
@media (max-width: 820px) { .hrs-valuecta { grid-template-columns: 1fr; } }
.hrs-valuecta h2 { margin-bottom: .6rem; }
.hrs-valuecta p { color: var(--hrs-muted); margin: 0; }
.hrs-valuecta__act { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.hrs-valuecta__call {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: var(--hrs-display);
font-weight: 400;
color: var(--hrs-deep);
}
.hrs-valuecta__call .hrs-icon { color: var(--hrs-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. */
.hrs-steps--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .hrs-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hrs-steps--wide { grid-template-columns: 1fr; } }
.hrs-quotes__more { margin-top: 2rem; text-align: center; }
/* Pillars sit on navy by default; this is the variant for a light band. */
.hrs-pillars--light .hrs-pillar {
background: #fff;
border-color: var(--hrs-line);
}
.hrs-pillars--light .hrs-pillar__title { color: var(--hrs-ink); }
.hrs-pillars--light .hrs-pillar__body { color: var(--hrs-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.
*/
.hrs-foot {
position: relative;
background: var(--hrs-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. */
.hrs-foot::before {
content: '';
position: absolute;
top: -70%; left: 50%;
width: 74rem; height: 52rem;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, .07) 0%, transparent 64%);
pointer-events: none;
}
.hrs-foot__in {
position: relative;
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4.5vw, 68px);
padding-block: clamp(40px, 5vw, 60px);
}
.hrs-foot__brand { flex: 1 1 300px; }
.hrs-foot__col { flex: 0 1 190px; }
.hrs-foot__brand .hrs-logo { margin-bottom: .9rem; }
.hrs-foot__brand .hrs-logo__img { height: 64px; }
.hrs-foot__name { margin: 0; font-family: var(--hrs-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.hrs-foot__firm {
margin: 2px 0 12px;
font-size: .7rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
/* --hrs-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(--hrs-brand-lt);
}
.hrs-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }
.hrs-foot__h {
margin: 0 0 12px;
font-family: var(--hrs-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .45);
}
.hrs-foot__menu { list-style: none; margin: 0; padding: 0; }
.hrs-foot__menu a,
.hrs-foot__link {
display: block;
padding: 4px 0;
color: rgba(255, 255, 255, .72);
text-decoration: none;
font-size: .92rem;
transition: color .18s var(--hrs-ease);
}
.hrs-foot__menu a:hover,
.hrs-foot__link:hover { color: #fff; text-decoration: none; }
.hrs-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.hrs-foot__social { margin: 14px 0 0; font-size: .88rem; }
.hrs-foot__social a { color: var(--hrs-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. */
.hrs-foot__legal {
position: relative;
border-top: 1px solid rgba(255, 255, 255, .09);
background: rgba(0, 0, 0, .18);
}
.hrs-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.hrs-foot__legal-in p { margin: 0 0 6px; }
.hrs-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.hrs-foot__legal-in a:hover { color: #fff; }
.hrs-foot__legalnav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 10px 0; }
.hrs-foot__legalnav a { text-decoration: underline; text-underline-offset: 2px; }
.hrs-foot__eho { display: flex; align-items: center; gap: 8px; }
/* The Equal Housing mark is now real SVG geometry — see hrs_eho_mark(). */
.hrs-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. */
.hrs-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) { .hrs-searchband { margin-top: -1.5rem; } }
.hrs-section--searchtop { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hrs-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.hrs-search {
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 10px;
box-shadow: var(--hrs-shadow-lg);
}
.hrs-search--page { box-shadow: var(--hrs-shadow); }
.hrs-search__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: .75rem;
align-items: end;
}
@media (max-width: 900px) {
.hrs-search__row { grid-template-columns: 1fr 1fr; }
.hrs-search__field--wide { grid-column: 1 / -1; }
.hrs-search__submit { grid-column: 1 / -1; }
}
.hrs-search__field { display: grid; gap: .3rem; min-width: 0; }
.hrs-search__field label {
font-family: var(--hrs-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-muted);
}
.hrs-search__field input,
.hrs-search__field select {
width: 100%;
padding: .7rem .8rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 5px;
color: var(--hrs-ink);
font-family: var(--hrs-body-font);
font-size: .95rem;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
transition: border-color .2s var(--hrs-ease), box-shadow .2s var(--hrs-ease);
}
.hrs-search__field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--hrs-deep) 50%),
linear-gradient(135deg, var(--hrs-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;
}
.hrs-search__field input:focus,
.hrs-search__field select:focus {
border-color: var(--hrs-deep-lt);
box-shadow: 0 0 0 3px rgba(163, 22, 28, .12);
outline: none;
}
.hrs-search__submit .hrs-btn { width: 100%; padding-block: .78rem; }
.hrs-search__more { margin-top: .85rem; }
.hrs-search__more summary {
display: inline-block;
font-family: var(--hrs-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hrs-deep-lt);
cursor: pointer;
list-style: none;
}
.hrs-search__more summary::-webkit-details-marker { display: none; }
.hrs-search__more summary::after { content: ' +'; }
.hrs-search__more[open] summary::after { content: ' \2013'; }
.hrs-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(--hrs-line-soft);
}
/* ------------------------------------------------------------------ creed -- */
.hrs-creed__call {
display: inline-flex;
align-items: center;
gap: .5rem;
color: rgba(255, 255, 255, .86);
font-size: .98rem;
}
.hrs-creed__call strong { color: var(--hrs-accent-lt); }
.hrs-creed__call:hover { color: #fff; }
.hrs-creed__call .hrs-icon { color: var(--hrs-accent-lt); }
.hrs-glyph { color: var(--hrs-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(). */
.hrs-slider__controls { display: flex; align-items: center; gap: .5rem; }
.hrs-slider__btn {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 50%;
color: var(--hrs-deep);
cursor: pointer;
transition: background .2s var(--hrs-ease), border-color .2s var(--hrs-ease), opacity .2s var(--hrs-ease);
}
.hrs-slider__btn:hover { background: var(--hrs-deep); border-color: var(--hrs-deep); color: #fff; }
.hrs-slider__btn[disabled] { opacity: .35; cursor: default; }
.hrs-slider__btn[disabled]:hover { background: #fff; border-color: var(--hrs-line); color: var(--hrs-deep); }
.hrs-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;
}
.hrs-slider__track::-webkit-scrollbar { height: 6px; }
.hrs-slider__track::-webkit-scrollbar-thumb { background: var(--hrs-line); border-radius: 6px; }
.hrs-slider__track::-webkit-scrollbar-track { background: transparent; }
.hrs-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) {
.hrs-slider__track {
grid-auto-columns: 78vw;
margin-inline: calc(var(--hrs-gutter) * -1);
padding-inline: 11vw;
scroll-padding-inline: 11vw;
}
.hrs-slider__slide { scroll-snap-align: center; }
}
.hrs-slider__slide .hrs-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. */
.hrs-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 --hrs-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.
*/
.hrs-home .hrs-hero { margin-top: calc(var(--hrs-header-h) * -1); }
.hrs-home .hrs-hero__inner { padding-top: var(--hrs-header-h); }
.hrs-home .hrs-header__bar {
background: rgba(255, 255, 255, var(--hrs-shrink));
border-bottom-color: rgba(228, 222, 210, var(--hrs-shrink));
}
/* The light state: only while over the photograph. */
.hrs-home .hrs-header:not(.is-solid) .hrs-nav__list > li > a,
.hrs-home .hrs-header:not(.is-solid) .hrs-nav__toggle,
.hrs-home .hrs-header:not(.is-solid) .hrs-callnow {
color: #fff;
}
.hrs-home .hrs-header:not(.is-solid) .hrs-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. */
.hrs-home .hrs-header:not(.is-solid) .hrs-nav__list > li > a::after { background: #fff; }
.hrs-header .hrs-nav__list > li > a,
.hrs-header .hrs-nav__toggle,
.hrs-header .hrs-callnow { transition: color .28s var(--hrs-ease); }
/* The submenu panel is its own white surface and is never part of the swap. */
.hrs-home .hrs-nav__sub a { color: var(--hrs-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.
*/
.hrs-header__actions .hrs-btn--sm { transition: background .28s var(--hrs-ease), border-color .28s var(--hrs-ease); }
.hrs-home .hrs-header:not(.is-solid) .hrs-header__actions .hrs-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. */
.hrs-logo { position: relative; }
.hrs-logo__img--light {
position: absolute;
inset-block-start: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity .28s var(--hrs-ease);
}
.hrs-home .hrs-header:not(.is-solid) .hrs-logo__img--light { opacity: 1; }
/* No JS: .is-solid is never added and --hrs-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) .hrs-home .hrs-hero { margin-top: 0; }
html:not(.js) .hrs-home .hrs-hero__inner { padding-top: 0; }
html:not(.js) .hrs-home .hrs-header__bar { background: #fff; }
html:not(.js) .hrs-logo__img--light { display: none; }
.hrs-rent__all { margin: 1.5rem 0 0; }
/* ------------------------------------------------------ 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.
*/
.hrs-modal__panel--sm { max-width: 34rem; }
.hrs-note__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.6rem;
}
.hrs-note__actions .hrs-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.
*/
.hrs-agentfacts {
display: grid;
gap: .85rem 2rem;
margin: 1.75rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--hrs-line);
}
@media (min-width: 560px) {
.hrs-agentfacts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.hrs-agentfacts dt {
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-muted);
}
.hrs-agentfacts dd {
margin: .3rem 0 0;
font-family: var(--hrs-display);
font-size: 1.02rem;
color: var(--hrs-ink);
/* Licence numbers and long emails must not push the column open. */
overflow-wrap: anywhere;
}
.hrs-agentfacts a { color: var(--hrs-accent); }
.hrs-agentfacts a:hover { text-decoration: underline; }
.hrs-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. */
.hrs-agentcard__initials--lg {
border-radius: 8px;
font-size: clamp(3.5rem, 9vw, 6rem);
letter-spacing: .04em;
}
/* ------------------------------------------------- review attribution -- */
.hrs-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. */
.hrs-gmark {
width: 1em;
height: 1em;
flex-shrink: 0;
/* The optical centre of the G sits slightly above the text baseline. */
transform: translateY(.04em);
}
.hrs-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.
*/
.hrs-slider--team .hrs-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }
@media (min-width: 900px) {
.hrs-slider--team .hrs-slider__track { grid-auto-columns: calc((100% - 5rem) / 5); }
}
.hrs-agentcard {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 8px;
overflow: hidden;
color: inherit;
transition: transform .25s var(--hrs-ease), box-shadow .25s var(--hrs-ease), border-color .25s var(--hrs-ease);
}
.hrs-agentcard:hover {
transform: translateY(-4px);
border-color: var(--hrs-brand-lt);
box-shadow: var(--hrs-shadow);
}
.hrs-agentcard__photo { position: relative; background: var(--hrs-sky); }
/* The monogram, for anyone whose headshot has not arrived. */
.hrs-agentcard__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
font-family: var(--hrs-display);
font-size: 2.4rem;
color: var(--hrs-brand);
background: var(--hrs-sky);
}
.hrs-agentcard__body { padding: .95rem 1rem 1.15rem; }
.hrs-agentcard__name {
display: block;
font-family: var(--hrs-display);
font-size: 1.12rem;
line-height: 1.2;
color: var(--hrs-ink);
}
.hrs-agentcard__role {
display: block;
margin-top: .3rem;
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hrs-muted);
}
.hrs-agentcard:hover .hrs-agentcard__name { color: var(--hrs-accent); }
/* --------------------------------------------------------------- filters -- */
.hrs-filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--hrs-line);
}
.hrs-filter {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .9rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 999px;
color: var(--hrs-body);
font-family: var(--hrs-display);
font-size: .78rem;
font-weight: 400;
transition: background .2s var(--hrs-ease), border-color .2s var(--hrs-ease), color .2s var(--hrs-ease);
}
.hrs-filter:hover { border-color: var(--hrs-deep); color: var(--hrs-deep); }
.hrs-filter.is-on {
background: var(--hrs-deep);
border-color: var(--hrs-deep);
color: #fff;
}
.hrs-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(--hrs-tint-2);
color: var(--hrs-muted);
font-size: .68rem;
}
.hrs-filter.is-on .hrs-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. */
.hrs-figure--square { aspect-ratio: 1 / 1; }
.hrs-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. */
.hrs-figure--empty.hrs-figure--wide,
.hrs-figure--empty.hrs-figure--hero,
.hrs-figure--empty.hrs-figure--square { min-height: 0; }
.hrs-listing__repd {
margin: 0 0 .4rem;
font-family: var(--hrs-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hrs-accent);
}
/* ------------------------------------------------------- hero phone, card -- */
.hrs-hero__phone {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.35rem;
font-family: var(--hrs-display);
font-size: 1.15rem;
font-weight: 400;
color: #fff;
}
.hrs-hero__phone .hrs-icon { color: var(--hrs-accent-lt); }
.hrs-hero__phone:hover { color: var(--hrs-accent-lt); }
.hrs-hero__phone + .hrs-hero__note { margin-top: .5rem; }
/* The representation line is the reason a sold listing is worth showing. */
.hrs-card__repd {
margin-bottom: .5rem;
font-family: var(--hrs-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--hrs-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. */
.hrs-callnow { display: none; }
@media (max-width: 1040px) {
.hrs-callnow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
white-space: nowrap;
/* Flat fill, not the metal gradient the other gold buttons use. That
gradient runs dark at the corners and bright through the middle, which
is fine across a 200px button and reads as a smudge across a 43px one. */
background: var(--hrs-accent-lt);
background-image: none;
border-color: var(--hrs-accent-lt);
color: var(--hrs-deep);
/* A real touch target. It was 43x39 — under the 44px minimum and visibly
squatter than the burger sitting next to it. */
min-height: 44px;
min-width: 44px;
padding: .6rem 1rem;
border-radius: 6px;
}
.hrs-callnow:hover {
background: var(--hrs-accent-mid);
background-image: none;
border-color: var(--hrs-accent-mid);
color: var(--hrs-deep);
box-shadow: none;
}
/* The brand navy, so it picks up the logo sitting beside it. */
.hrs-callnow .hrs-icon { color: var(--hrs-deep); width: 17px; height: 17px; }
}
/* Below this the words go and the icon carries it — at 380px a labelled button
plus a burger leaves the logo nowhere to sit. */
@media (max-width: 400px) {
/* Icon only, and square — a squashed rectangle with a glyph floating in it
is what made this look broken. */
.hrs-callnow span { display: none; }
.hrs-callnow { padding: 0; width: 44px; height: 44px; }
}
.hrs-hero__phone strong { color: var(--hrs-accent-lt); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
.hrs-hero__phone { font-size: 1.02rem; align-items: flex-start; }
.hrs-hero__phone .hrs-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) {
.hrs-team { grid-template-columns: 1fr 1fr; }
.hrs-team .hrs-member:first-child { grid-column: 1 / -1; }
.hrs-team .hrs-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. */
.hrs-team .hrs-member:nth-child(2):last-child {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
}
.hrs-member__license {
margin: .75rem 0 0;
font-family: var(--hrs-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-faint);
}
/* A card with no bio should sit tight rather than leave the gap the bio left. */
.hrs-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. */
.hrs-section--flush { padding-bottom: 0; }
.hrs-head--tight { margin-bottom: 0; }
/* ------------------------------------------------------- listing address plate --
Stands in for the listing photo. See hrs_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. */
.hrs-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(--hrs-deep-dk) 0%, var(--hrs-deep) 55%, var(--hrs-deep-dk) 100%);
}
.hrs-plate__addr {
font-family: var(--hrs-display);
font-size: clamp(1.05rem, 1.9vw, 1.45rem);
font-weight: 400;
line-height: 1.25;
color: #fff;
text-wrap: balance;
}
.hrs-plate__rule {
width: 42px;
height: 2px;
background: var(--hrs-accent);
}
.hrs-plate__city {
font-family: var(--hrs-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. */
.hrs-figure--hero.hrs-plate { min-height: clamp(15rem, 34vw, 26rem); }
.hrs-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. */
.hrs-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.
*/
.hrs-search--hero {
background: rgba(255, 255, 255, .52);
border-color: rgba(255, 255, 255, .65);
box-shadow:
0 18px 44px rgba(19, 19, 21, .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);
}
.hrs-search--hero .hrs-search__field label { color: var(--hrs-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.
*/
.hrs-search--hero .hrs-search__field input,
.hrs-search--hero .hrs-search__field select {
background: #fff;
border-color: rgba(19, 19, 21, .14);
}
.hrs-search--hero .hrs-search__field input::placeholder { color: var(--hrs-faint); }
.hrs-search--hero .hrs-search__more summary { color: var(--hrs-body); }
.hrs-search--hero .hrs-search__more summary:hover { color: var(--hrs-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))) {
.hrs-search--hero { background: rgba(255, 255, 255, .88); }
}
/* The disclosure and the result line. */
.hrs-search__more { margin-top: .8rem; }
.hrs-search__more summary {
font-family: var(--hrs-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--hrs-muted);
cursor: pointer;
}
.hrs-search__row--more {
grid-template-columns: repeat(3, 1fr);
margin-top: .75rem;
}
@media (max-width: 900px) { .hrs-search__row--more { grid-template-columns: 1fr 1fr; } }
.hrs-search__result {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .75rem;
margin: 1rem 0 0;
font-size: .95rem;
color: var(--hrs-body);
}
.hrs-search__clear {
font-family: var(--hrs-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--hrs-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 .hrs-market--noshape and
* simply centre their caption. That has to look deliberate, because on a cold
* cache it is what every card looks like.
*/
.hrs-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) { .hrs-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .hrs-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
.hrs-market__link {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
height: 100%;
padding: 1.5rem 1rem 1.25rem;
/* White, not the cream ground — a cream card on a cream page has no edge. */
background: var(--hrs-white);
border: 1px solid var(--hrs-line);
border-radius: 14px;
text-align: center;
text-decoration: none;
transition: border-color .22s var(--hrs-ease), transform .22s var(--hrs-ease), box-shadow .22s var(--hrs-ease);
}
.hrs-market__link:hover {
border-color: var(--hrs-accent);
transform: translateY(-3px);
box-shadow: 0 16px 34px -20px rgba(16, 10, 12, .4);
}
.hrs-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. */
.hrs-market__shape .hrs-shape { width: 100%; height: 100%; display: block; }
.hrs-market__shape .hrs-shape path {
fill: var(--hrs-accent);
opacity: .16;
transition: opacity .22s var(--hrs-ease);
}
.hrs-market__link:hover .hrs-shape path { opacity: .34; }
.hrs-market__name {
font-family: var(--hrs-display);
font-size: 1.2rem;
line-height: 1.15;
color: var(--hrs-ink);
}
.hrs-market__note {
color: var(--hrs-muted);
font-size: .82rem;
line-height: 1.45;
}
.hrs-market__cta {
margin-top: .55rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--hrs-accent);
opacity: 0;
transform: translateY(3px);
transition: opacity .22s var(--hrs-ease), transform .22s var(--hrs-ease);
}
.hrs-market__link:hover .hrs-market__cta,
.hrs-market__link:focus-visible .hrs-market__cta { opacity: 1; transform: none; }
/* Keep the caption vertically centred when there is no shape to sit under. */
.hrs-market--noshape .hrs-market__link { justify-content: center; padding-block: 2.25rem; }
/* ================================================================ pair === */
.hrs-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);
}
.hrs-pair__photo img { display: block; width: 100%; height: auto; }
.hrs-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) { .hrs-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.hrs-pair__name { margin: 0 0 .15rem; font-family: var(--hrs-display); font-size: 1.5rem; color: var(--hrs-ink); }
.hrs-pair__role {
margin: 0 0 .7rem;
font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--hrs-accent);
}
.hrs-pair__bio { margin: 0 0 .9rem; color: var(--hrs-body); font-size: .95rem; }
.hrs-pair__more {
font-size: .82rem; font-weight: 600; color: var(--hrs-accent); text-decoration: none;
}
.hrs-pair__more:hover { text-decoration: underline; }
/* ================================================== mobile header controls ==
*
* The call button and the menu button sit next to each other and were built at
* different times, which showed: 44px tall with a 6px radius and a flat red
* fill against roughly 38px with a 4px radius and a hairline border. Two
* controls a thumb-width apart have to look like one set of controls, or the
* masthead reads as unfinished before a word of the site is read.
*
* So the burger is now the same 44px square with the same radius, and it takes
* the hero omnibar's glass — blur plus a desaturating filter, which is what
* keeps the surface neutral over whatever photograph is behind it rather than
* picking up its colour. The call button stays solid: these should be the same
* SIZE, not the same weight. Calling is the thing worth doing, and the button
* that does it should be the one with the fill.
*/
.hrs-burger {
width: 44px;
height: 44px;
padding: 0;
display: none;
place-items: center;
border-radius: 6px;
border: 1px solid rgba(19, 19, 21, .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(--hrs-ease), border-color .25s var(--hrs-ease),
transform .18s var(--hrs-ease);
}
@media (max-width: 1040px) { .hrs-burger { display: grid; } }
/* A press that answers. Nothing else in the masthead moves on tap. */
.hrs-burger:active { transform: scale(.94); }
.hrs-burger__box { width: 18px; }
.hrs-burger__box i { height: 1.5px; border-radius: 1px; }
.hrs-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.
*/
.hrs-home .hrs-header:not(.is-solid) .hrs-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))) {
.hrs-burger { background: rgba(255, 255, 255, .92); }
.hrs-home .hrs-header:not(.is-solid) .hrs-burger { background: rgba(19, 19, 21, .42); }
}
/* The X state fills in, so the control that closes the drawer is unmistakably
the live one while the drawer is open. */
.hrs-burger[aria-expanded="true"],
.hrs-home .hrs-header:not(.is-solid) .hrs-burger[aria-expanded="true"] {
background: var(--hrs-accent-mid);
border-color: var(--hrs-accent-mid);
box-shadow: none;
}
.hrs-burger[aria-expanded="true"] .hrs-burger__box i,
.hrs-home .hrs-header:not(.is-solid) .hrs-burger[aria-expanded="true"] .hrs-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.
*/
.hrs-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(--hrs-ease),
visibility .3s var(--hrs-ease),
transform .42s cubic-bezier(.16, .84, .32, 1);
}
.hrs-drawer.is-open { transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.hrs-drawer { background: rgba(255, 255, 255, .97); }
}
/* Resting state of every row: down and out. */
.hrs-drawer__nav .hrs-nav__item,
.hrs-drawer__foot > * {
opacity: 0;
transform: translateY(14px);
transition:
opacity .34s var(--hrs-ease),
transform .44s cubic-bezier(.16, .84, .32, 1);
}
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item,
.hrs-drawer.is-open .hrs-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. */
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(1) { transition-delay: .06s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(2) { transition-delay: .115s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(3) { transition-delay: .17s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(4) { transition-delay: .225s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(5) { transition-delay: .28s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(6) { transition-delay: .335s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(7) { transition-delay: .39s; }
.hrs-drawer.is-open .hrs-drawer__nav .hrs-nav__item:nth-child(n+8) { transition-delay: .445s; }
.hrs-drawer.is-open .hrs-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.hrs-drawer.is-open .hrs-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. */
.hrs-drawer:not(.is-open) .hrs-drawer__nav .hrs-nav__item,
.hrs-drawer:not(.is-open) .hrs-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) {
.hrs-drawer,
.hrs-drawer.is-open,
.hrs-drawer__nav .hrs-nav__item,
.hrs-drawer__foot > * {
transform: none;
transition-duration: .01ms;
transition-delay: 0s !important;
}
.hrs-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 hrs-locked, which the enquiry modal also sets --
* that one opens over a dark scrim where the light logo is correct.
*/
body.hrs-nav-open .hrs-logo__img--light,
body.hrs-nav-open.hrs-home .hrs-header:not(.is-solid) .hrs-logo__img--light { opacity: 0; }
/* ============================================== the shore rule, repeated ==
*
* One motif carries the whole palette: a four-part bar under every section
* heading, running the coast from the water to the dune — Atlantic teal, surf
* aqua, sunset coral, sea-grass.
*
* This is the difference between a colourful site and a site that could not
* pick a colour. Five hues scattered across five unrelated components reads as
* indecision; the same five in one shape, repeated on every heading, reads as
* a brand. Yessenia Storing's pine / sandstone / red heading rule is the same
* idea, and themes/CLAUDE.md trap 12 is the rule that produced it: the lockup
* gets a short two-tone rule carrying the brand colours, never a monogram.
*
* The colours in it are FILLS. Aqua at 2.4:1 and sea-grass at 2.8:1 could not
* carry a word, and in a 3px bar they never have to.
*/
.hrs-rule {
/* Four stops, hard-edged, no blending — gradients between these hues go
muddy through the teal/coral midpoint. Widened to 72px so four bands are
each still legible rather than four slivers. */
width: 72px;
background: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%);
box-shadow: inset 0 0 0 1px rgba(19, 19, 21, .07);
}
/*
* Coral is the call to action, teal is the furniture.
*
* The gradient here was three hardcoded hexes of flag red (#8E1B29 / #C6293C /
* #B22234) left over from the theme this was copied from. Swapping the :root
* tokens did not touch them and a grep for the old client's NAME did not find
* them either — this is trap 16 exactly, and it survived until the rendered
* page was sampled pixel by pixel and the button came back #AF363F on a site
* with no crimson in its palette.
*
* Sunset coral is 4.1:1 on the cream ground: right for a button, and it is the
* only warm thing on a mostly teal-and-sand page, so it is unmistakably the
* thing to press.
*/
.hrs-btn--accent {
background: linear-gradient(135deg, var(--hrs-coral-dk) 0%, var(--hrs-coral-br) 58%, var(--hrs-coral) 100%);
border-color: transparent;
color: #fff;
}
.hrs-btn--accent:hover {
background: linear-gradient(135deg, var(--hrs-coral-dk) 0%, var(--hrs-coral-br) 58%, var(--hrs-coral) 100%);
filter: brightness(1.07);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 26px -12px rgba(216, 48, 52, .55);
}
/* The same four-part shore rule the hero closes on, above the footer — so the
page opens and closes on the same motif that sits under every heading. */
.hrs-foot::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
z-index: 2;
background: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%);
}
/* The stat band gets the full shore rule as its top edge, so the credentials
strip reads as a ribbon rather than a grey band. */
.hrs-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%) 1; }
/* Eyebrows run teal, not coral. Coral is reserved for the thing to press —
spending it on every section label is what makes an accent stop working. */
.hrs-eyebrow:not(.hrs-eyebrow--light) { color: var(--hrs-brand); }
.hrs-nav__list > li > a::after { background: var(--hrs-coral); }
/* The hero closes on the shore rule, full width — the same four colours in the
same order as the bar under every heading and in the favicon. */
.hrs-hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 5px;
z-index: 3;
background: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%);
}
/* One red button state, on the primary call to action only. */
.hrs-btn--accent:hover {
background: var(--hrs-red);
border-color: var(--hrs-red);
color: #fff;
}
/* The portrait frame follows the photograph rather than imposing a square on
it — his headshot is 4:5 and a square crop takes off his hair and his arms. */
.hrs-split__media--portrait { max-width: 24rem; margin-inline: auto; }
.hrs-figure--portrait { aspect-ratio: auto; }
.hrs-figure--portrait img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border-radius: 12px;
}
@media (max-width: 900px) {
.hrs-split__media--portrait { max-width: 19rem; }
}
/* The brokerage mark in the footer. White artwork on the near-black ground it
was recoloured for; capped so it sits under his own name rather than beside
it, which is the way the relationship actually reads. */
.hrs-foot__firmmark {
display: block;
width: auto;
max-width: 220px;
height: auto;
margin-top: 1.5rem;
opacity: .92;
}
@media (max-width: 560px) { .hrs-foot__firmmark { max-width: 180px; } }
/* ================================================ the hero video loop ==
*
* The poster is a real ![]()
so it paints with the page; the video fades in
* over it only once it can actually play, or the fade shows a black box while
* the first frames arrive.
*/
.hrs-hero__poster,
.hrs-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
.hrs-hero__video {
opacity: 0;
transition: opacity .9s var(--hrs-ease);
pointer-events: none;
}
.hrs-hero__video.is-ready { opacity: 1; }
/*
* At 900px and under the swaps in hero-mobile.jpg, a 3:4 crop with
* the flag right of centre. A phone shows about two-thirds of its width, so it
* is pulled right to keep the flag and the porch; a tablet shows the full width
* and loses height instead, so it is pulled up to keep the top of the flag.
*/
@media (max-width: 900px) {
.hrs-hero__poster { object-position: 60% 30%; }
}
/* ==================================================== the floating call ==
*
* Red, white and blue rather than a single brand colour: a white pill with a
* navy label, an Old Glory red icon plate, and the three-part band along the
* bottom edge that the hero and the footer also carry. White is the ground
* because the pill sits over photographs and a navy pill on a navy-scrimmed
* hero disappears.
*/
.hrs-callbar {
position: fixed;
right: clamp(.9rem, 2vw, 1.5rem);
bottom: clamp(.9rem, 2vw, 1.5rem);
z-index: 80;
}
.hrs-callbar__call {
position: relative;
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .7rem 1.15rem .8rem .7rem;
background: #fff;
border-radius: 999px;
box-shadow: 0 14px 34px -12px rgba(19, 19, 21, .55), 0 2px 6px rgba(19, 19, 21, .16);
text-decoration: none;
overflow: hidden;
transition: transform .22s var(--hrs-ease), box-shadow .22s var(--hrs-ease);
}
.hrs-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(19, 19, 21, .6); }
/* The flag band, along the bottom edge of the pill. */
.hrs-callbar__call::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%);
}
.hrs-callbar__ico {
display: grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--hrs-red);
color: #fff;
}
.hrs-callbar__ico svg { width: 17px; height: 17px; }
.hrs-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.hrs-callbar__txt strong {
font-family: var(--hrs-display);
font-size: .95rem;
font-weight: 400;
color: var(--hrs-brand);
}
.hrs-callbar__txt em {
font-style: normal;
font-size: .82rem;
font-weight: 600;
color: var(--hrs-red);
letter-spacing: .01em;
}
/* ================================================ mobile: logo and hero ==
*
* The lockup is stacked, so the same height that reads well on a desktop bar
* swallows a phone masthead.
*/
@media (max-width: 720px) {
/*
* The masthead overflowed: measured at a 500px viewport the burger's right
* edge sat at 521px, so scrollWidth beat clientWidth by 21px and the button
* was partly off-screen. Logo 290 + actions 187 does not fit in 500.
*
* The header's Call Now is what goes. The floating pill carries the number
* on every screen and is closer to the thumb, so a second call control in
* the masthead was buying nothing and costing the burger its place.
*/
.hrs-header__actions .hrs-callnow { display: none; }
.hrs-header__inner { gap: .75rem; }
/*
* Size the logo through the tokens, not with height:auto.
*
* The height is a calc that interpolates on --hrs-shrink, which is what
* makes the masthead shrink as you scroll. Overriding it with height:auto
* — which an earlier pass here did — pins the logo at one size and quietly
* removes the shrink on phones, where the bar can least afford the room.
* max-width stays only as a guard against a very wide lockup.
*/
:root { --hrs-logo-max: 44px; --hrs-logo-min: 30px; }
.hrs-logo--header .hrs-logo__img { max-width: 52vw; }
}
/* ------------------------------------------- drawer: is-open, and only that --
*
* `.hrs-nav__item:focus-within > .hrs-nav__sub` is (0,3,0) and the drawer's own
* collapsed rule is (0,2,0), so focus-within wins inside the drawer too. On a
* phone the tapped link keeps focus, which pinned the section open — the first
* tap worked and the section could then never be collapsed again.
*
* Hover and focus-within are a desktop affordance. In the drawer the only thing
* that opens a section is is-open, set by the tap handler.
*/
.hrs-drawer__nav .hrs-nav__item:hover > .hrs-nav__sub,
.hrs-drawer__nav .hrs-nav__item:focus-within > .hrs-nav__sub {
opacity: 0;
max-height: 0;
padding-bottom: 0;
}
.hrs-drawer__nav .hrs-nav__item.is-open > .hrs-nav__sub,
.hrs-drawer__nav .hrs-nav__item.is-open:hover > .hrs-nav__sub,
.hrs-drawer__nav .hrs-nav__item.is-open:focus-within > .hrs-nav__sub {
opacity: 1;
max-height: 22rem;
padding-bottom: .6rem;
}
/* ================================================ no dark bands anywhere ==
*
* Adam asked for dark, was shown dark, rejected it — and then rejected
* light-with-dark-bands as still too dark (memory: feedback_dark_themes_too_dark).
* The settled answer for this lineage is FULLY light, so the one remaining
* near-black band on the page is converted here rather than by editing the
* template that asks for it. Keeping the `--dark` class name means the
* markup and every sibling theme still read the same; only what it means
* changed.
*
* It still has to be a BAND — a page of unbroken cream has no rhythm. So it
* becomes the most saturated light thing on the site: a pale-aqua-to-sand
* wash, edged top and bottom with the shore rule, carrying ink type.
*/
.hrs-section--dark {
background: linear-gradient(168deg, var(--hrs-surf-pale) 0%, var(--hrs-shell) 46%, var(--hrs-sand) 100%);
color: var(--hrs-body);
position: relative;
}
.hrs-section--dark::before,
.hrs-section--dark::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%);
}
.hrs-section--dark::before { top: 0; }
.hrs-section--dark::after { bottom: 0; }
.hrs-section--dark h1,
.hrs-section--dark h2,
.hrs-section--dark h3 { color: var(--hrs-ink); }
/* The creed sat white-on-near-black. Same hierarchy, inverted. */
.hrs-creed__goal { color: var(--hrs-ink); }
.hrs-creed__close { color: var(--hrs-brand); font-weight: 600; }
.hrs-creed__attrib { color: var(--hrs-muted); }
.hrs-creed__call { color: var(--hrs-body); }
.hrs-creed__call strong,
.hrs-creed__call .hrs-icon { color: var(--hrs-brand); }
.hrs-creed__call:hover { color: var(--hrs-ink); }
/* ======================================= the town grid carries the thesis ==
*
* The whole site argues that Cape May County is two markets. The eight-town
* grid is where that is easiest to SHOW rather than state: the first four are
* barrier islands and the last four are the mainland behind them, so the
* islands are washed in surf aqua and the mainland in sand. Read the grid
* and the split explains itself before the copy does.
*
* It also fixes a real flatness problem. These cards were white on cream with
* a hairline border and a faint map outline, and on a page sold on its colour
* they were the largest and dullest block in it.
*
* The wash is a tint behind the card, never behind the text: the name and note
* keep ink and body colours at full contrast on a ground no darker than 8%.
*/
.hrs-market:nth-child(-n+4) .hrs-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, var(--hrs-surf-pale) 100%);
border-color: #D4D4D5;
}
.hrs-market:nth-child(n+5) .hrs-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, #FBEAEB 100%);
border-color: #F5CBCC;
}
/* A colour chip on the top edge of every card — aqua for an island, sand-deep
for the mainland — so the grouping survives at phone width where the cards
stack into a single column and the two-by-four reading is lost. */
.hrs-market__link { position: relative; overflow: hidden; }
.hrs-market__link::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}
.hrs-market:nth-child(-n+4) .hrs-market__link::before { background: var(--hrs-surf); }
.hrs-market:nth-child(n+5) .hrs-market__link::before { background: var(--hrs-sand-dp); }
.hrs-market:nth-child(-n+4) .hrs-market__link:hover { border-color: var(--hrs-surf-dk); }
.hrs-market:nth-child(n+5) .hrs-market__link:hover { border-color: var(--hrs-dune-dk); }
/* The map outline was a pale grey wash that read as a smudge on three cards
and was invisible on the five whose boundary never resolved. Give it the
band's own colour so it reads as intentional artwork either way. */
.hrs-market:nth-child(-n+4) .hrs-market__shape svg * { fill: var(--hrs-surf); opacity: .5; }
.hrs-market:nth-child(n+5) .hrs-market__shape svg * { fill: var(--hrs-sand-dp); opacity: .62; }
/* ------------------------------------------------- the closer, also light --
*
* Same call as .hrs-section--dark above: this was a near-black block sitting
* directly on top of an already-dark footer, which stacked into roughly a
* third of the page being dark on a site briefed as fully light. It keeps its
* weight by being the most saturated light band instead — teal-tinted, edged
* with the shore rule — so the eye still stops on it.
*/
.hrs-closer {
background: linear-gradient(168deg, var(--hrs-surf-pale) 0%, var(--hrs-shell) 52%, var(--hrs-sand) 100%);
color: var(--hrs-body);
border-top: 4px solid transparent;
border-image: linear-gradient(90deg,
var(--hrs-brand) 0%, var(--hrs-brand) 25%,
var(--hrs-surf) 25%, var(--hrs-surf) 50%,
var(--hrs-coral) 50%, var(--hrs-coral) 75%,
var(--hrs-dune) 75%, var(--hrs-dune) 100%) 1;
}
.hrs-closer::before {
background: radial-gradient(circle, rgba(163, 22, 28, .16) 0%, transparent 62%);
}
.hrs-closer__title { color: var(--hrs-ink); }
.hrs-closer__lede { color: var(--hrs-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.hrs-closer .hrs-eyebrow { color: var(--hrs-brand); }
/* --------------------------------------------------- footer contrast fixes --
*
* scripts/contrast-audit.js checked 48 elements on the home page and failed
* three, all in the footer and all marginal: the two column headings at
* 4.27:1 and the phone number at 4.32:1, against 4.5:1 required. Marginal is
* still failing, and these are small text on a dark ground, which is the
* combination people actually struggle with.
*/
.hrs-foot__h { color: rgba(255, 255, 255, .62); }
.hrs-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }
/* The floating call pill's number sat on --hrs-coral, which is 4.32:1 on the
pill's white ground — right for a button fill, wrong for 13px text. The
darker coral is 5.2:1 and is visually the same colour at this size. */
.hrs-callbar__txt em { color: var(--hrs-coral-dk); }
/* The closer's secondary button was .hrs-btn--ghost-light: a white outline
with white type, drawn for the near-black band this section used to be. On
the light band it is now, it was a pale ghost on cream — present, rendered,
effectively invisible. Same class of mistake as trap 4. Inside the closer it
becomes a teal outline instead. */
.hrs-closer .hrs-btn--ghost-light {
border-color: var(--hrs-brand);
color: var(--hrs-brand);
}
.hrs-closer .hrs-btn--ghost-light:hover {
background: var(--hrs-brand);
border-color: var(--hrs-brand);
color: #fff;
}
/* "1 Atlantic Avenue, Ocean / City, NJ 08226" — the footer column is narrow
enough to break the town in half. Keep the city-state-zip together. */
.hrs-foot__addr { text-wrap: balance; }
/* The licence line under an agent's name was --hrs-faint, which is 2.7:1 on
the card — fine as a decorative grey, and this is not decorative. California
(and most states) require the number to be legible in advertising. */
.hrs-member__license { color: var(--hrs-muted); }
/* === upgrade-lineage: frames and figures === */
/*
* Added by scripts/upgrade-lineage.py. See that file for why each exists.
*/
/* A transparent GROUP cutout: wide, anchored to the bottom of a soft brand
panel, never cropped. */
.hrs-split__media--team { max-width: none; width: 100%; }
.hrs-figure--team {
aspect-ratio: auto;
margin: 0;
padding: 1.5rem 1rem 0;
border-radius: 16px;
background: linear-gradient(180deg, var(--hrs-shell) 0%, var(--hrs-tint-2) 100%);
overflow: hidden;
position: relative;
}
.hrs-figure--team img {
display: block; width: 100%; height: auto;
object-fit: contain; object-position: center bottom;
}
/* NO HEADSHOT: a photograph of the market in the agent's slot. Cropped to a
calm landscape, because it is a place and cropping a place costs nothing —
the opposite rule from a face. */
.hrs-split__media--scene { max-width: none; width: 100%; }
.hrs-figure--scene {
aspect-ratio: 4 / 3;
margin: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--hrs-shadow-lg);
}
.hrs-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figures set large; word labels untouched. */
.hrs-creds__label--num {
font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
line-height: 1;
letter-spacing: -.01em;
color: var(--hrs-brand);
}
.hrs-creds__label--num + .hrs-creds__note {
margin-top: .55rem;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
}
/* A small SQUARE headshot (homes.com serves 300x300): centred and capped so it
is never enlarged past its source, instead of cropped into a portrait frame
that loses the sides of the face. 'shape' => 'square' in team(). */
.hrs-split__media--square { max-width: 22rem; margin-inline: auto; }
.hrs-split__media--square .hrs-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .hrs-split__media--square { max-width: 17rem; } }
/* === install-features: feature sections === */
/*
* Added by scripts/install-features.py. Tones use the theme's four roles, so
* each site's sections come out in its own palette.
*/
.hrs-tone--brand { --tone: var(--hrs-brand); --tone-pale: var(--hrs-brand-pale); }
.hrs-tone--coral { --tone: var(--hrs-coral); --tone-pale: var(--hrs-coral-pale); }
.hrs-tone--surf { --tone: var(--hrs-surf-dk); --tone-pale: var(--hrs-surf-pale); }
.hrs-tone--dune { --tone: var(--hrs-dune-dk); --tone-pale: var(--hrs-dune-pale); }
.hrs-feat__note { max-width: 44rem; margin: 2.25rem auto 0; text-align: center; color: var(--hrs-muted); font-size: .95rem; }
/* journey: a line that draws, stops that pop in turn */
.hrs-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.hrs-journey::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--hrs-brand), var(--hrs-coral), var(--hrs-dune), var(--hrs-surf)); transform-origin: left center; }
.hrs-journey__stop { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.hrs-journey__dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--hrs-white);
border: 3px solid var(--tone); color: var(--tone); font-weight: 700; font-size: .85rem; position: relative; z-index: 1; box-shadow: 0 6px 18px -10px var(--tone); }
.hrs-journey__when { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 600; margin-top: .35rem; }
.hrs-journey__label { font-family: var(--hrs-display); font-size: 1.3rem; line-height: 1.15; color: var(--hrs-ink); font-weight: 400; }
.hrs-journey__body { color: var(--hrs-body); font-size: .95rem; line-height: 1.55; }
/* bento: coloured tiles, one big counting number */
.hrs-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hrs-bento__tile { position: relative; border-radius: 18px; padding: 1.6rem 1.5rem 1.7rem; background: var(--tone-pale); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
overflow: hidden; transition: transform .35s var(--hrs-ease), box-shadow .35s var(--hrs-ease); }
.hrs-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.hrs-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--hrs-shadow-lg); }
.hrs-bento__tile--wide { grid-column: span 2; }
.hrs-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.hrs-bento__tile--big::after { display: none; }
.hrs-bento__tile--big .hrs-bento__title, .hrs-bento__tile--big .hrs-bento__body { color: #fff; }
.hrs-bento__big { display: block; font-family: var(--hrs-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.hrs-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone); font-weight: 700; margin-bottom: .9rem; }
.hrs-bento__title { font-family: var(--hrs-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--hrs-ink); font-weight: 400; }
.hrs-bento__body { margin: 0; color: var(--hrs-body); font-size: .95rem; line-height: 1.55; }
/* split: two panels facing each other */
.hrs-splitfeat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.hrs-splitfeat__panel { border-radius: 20px; padding: 2rem 1.9rem; background: var(--tone-pale); border-top: 5px solid var(--tone); }
.hrs-splitfeat__eye { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tone); }
.hrs-splitfeat__title { font-family: var(--hrs-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: .35rem 0 .7rem; color: var(--hrs-ink); font-weight: 400; }
.hrs-splitfeat__body { color: var(--hrs-body); margin: 0 0 1rem; }
.hrs-splitfeat__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hrs-splitfeat__points li { position: relative; padding-left: 1.4rem; color: var(--hrs-body); }
.hrs-splitfeat__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone); }
.hrs-splitfeat__join { align-self: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--hrs-ink); color: #fff; font-family: var(--hrs-display); font-size: 1.25rem; }
/* timeline: years down a drawn line */
.hrs-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.hrs-timeline::before { content: ""; position: absolute; left: 6.2rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, var(--hrs-brand), var(--hrs-coral), var(--hrs-dune), var(--hrs-surf)); transform-origin: top center; }
.hrs-timeline__item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 2.2rem; padding-block: .9rem; position: relative; }
.hrs-timeline__item::before { content: ""; position: absolute; left: 5.85rem; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--hrs-white); border: 3px solid var(--tone); }
.hrs-timeline__when { text-align: right; font-family: var(--hrs-display); font-size: 1.6rem; line-height: 1.2; color: var(--tone); }
.hrs-timeline__card strong { display: block; font-family: var(--hrs-display); font-weight: 400; font-size: 1.3rem; color: var(--hrs-ink); margin-bottom: .25rem; }
.hrs-timeline__card p { margin: 0; color: var(--hrs-body); }
@media (max-width: 900px) {
.hrs-journey { grid-template-columns: 1fr; gap: 1.4rem; padding-left: .2rem; }
.hrs-journey::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 3px; height: auto; transform-origin: top center; }
.hrs-journey__stop { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
.hrs-journey__stop > :not(.hrs-journey__dot) { grid-column: 2; }
.hrs-journey__dot { grid-row: span 3; }
.hrs-bento { grid-template-columns: 1fr 1fr; }
.hrs-splitfeat { grid-template-columns: 1fr; }
.hrs-splitfeat__join { justify-self: center; }
}
@media (max-width: 560px) {
.hrs-bento { grid-template-columns: 1fr; }
.hrs-bento__tile--wide { grid-column: auto; }
.hrs-timeline::before { left: 4.4rem; }
.hrs-timeline__item { grid-template-columns: 3.6rem 1fr; gap: 1.6rem; }
.hrs-timeline__item::before { left: 4.05rem; }
.hrs-timeline__when { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: no-preference) {
html.js .hrs-journey::before { transform: scaleX(0); transition: transform 1.4s var(--hrs-ease) .15s; }
html.js .hrs-journey.is-in::before { transform: scaleX(1); }
html.js .hrs-journey .hrs-journey__stop { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--hrs-ease), transform .6s var(--hrs-ease); transition-delay: calc(.25s + var(--i) * .18s); }
html.js .hrs-journey.is-in .hrs-journey__stop { opacity: 1; transform: none; }
html.js .hrs-journey .hrs-journey__dot { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .18s); }
html.js .hrs-journey.is-in .hrs-journey__dot { transform: none; }
html.js .hrs-timeline::before { transform: scaleY(0); transition: transform 1.6s var(--hrs-ease) .1s; }
html.js .hrs-timeline.is-in::before { transform: scaleY(1); }
html.js .hrs-timeline .hrs-timeline__item { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--hrs-ease), transform .6s var(--hrs-ease); transition-delay: calc(.2s + var(--i) * .2s); }
html.js .hrs-timeline.is-in .hrs-timeline__item { opacity: 1; transform: none; }
html.js .hrs-splitfeat__panel[data-hrs-reveal] { transform: translateX(calc((var(--i) * 2 - 1) * 28px)); }
html.js .hrs-splitfeat__panel[data-hrs-reveal].is-in { transform: none; }
html.js .hrs-splitfeat__join[data-hrs-reveal] { transform: scale(.3) rotate(-90deg); transition-delay: .35s; }
html.js .hrs-splitfeat__join[data-hrs-reveal].is-in { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
html.js .hrs-journey::before { transform: scaleY(0); }
html.js .hrs-journey.is-in::before { transform: scaleY(1); }
}
/* long reviews: the first 46 words, and the rest in place (never cut off) */
.hrs-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--hrs-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hrs-quote__full[hidden] { display: none; }
/* Four tiles sit 2 x 2; a 'wide' tile would leave a hole in a three-column row. */
@media (min-width: 561px) {
.hrs-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hrs-bento:has(> :nth-child(4):last-child) .hrs-bento__tile--wide { grid-column: auto; }
}
/* ------------------------------------------- Rose Realty Group roster -- */
/*
* Four people: Holly, the broker-in-charge, full width, then the three agents
* in one row of three with the photograph above the words. The two-column
* pairing above would strand the fourth card beside a hole.
*
* Every roster headshot is cut to 4:5 from the TOP of a taller original, so the
* tall frame never crops a head. The 900px rule earlier in this file turns
* --tall into a 16:11 landscape box, which is exactly the crown-cropping bug in
* memory feedback_headshot_frames — so --tall keeps 4:5 at every width here.
*/
.hrs-figure--tall { aspect-ratio: 4 / 5 !important; }
.hrs-figure--tall img { object-position: center top; }
@media (min-width: 860px) {
.hrs-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hrs-team .hrs-member:not(:first-child) {
grid-template-columns: 1fr;
align-content: start;
align-items: start;
}
.hrs-team .hrs-member:not(:first-child) .hrs-member__photo { max-width: 16rem; }
}
@media (max-width: 760px) {
.hrs-member__photo { max-width: 18rem; }
}
.hrs-member__name a { color: inherit; text-decoration: none; }
.hrs-member__name a:hover { color: var(--hrs-coral); }
/* Holly's 4:5 headshot beside her intro, sized like the portrait frame was. */
.hrs-split__media--tall { max-width: 24rem; margin-inline: auto; }
@media (max-width: 900px) { .hrs-split__media--tall { max-width: 19rem; } }
/*
* A small team fills the row instead of sliding. Rose Realty Group is four
* brokers: on desktop the home page shows all four across the full width, and
* an agent's own page shows the other three across it. No arrows when nothing
* scrolls. Phones keep the swipe.
*/
@media (min-width: 900px) {
.hrs-slider--team.hrs-slider--count-4 .hrs-slider__track {
grid-auto-columns: calc((100% - 3 * 1.25rem) / 4);
overflow-x: visible;
}
.hrs-slider--team.hrs-slider--count-3 .hrs-slider__track {
grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
overflow-x: visible;
}
.hrs-slider--team.hrs-slider--count-4 .hrs-slider__btn,
.hrs-slider--team.hrs-slider--count-3 .hrs-slider__btn { display: none; }
.hrs-slider--team .hrs-agentcard__name { font-size: 1.35rem; }
.hrs-slider--team .hrs-agentcard__body { padding: 1.15rem 1.25rem 1.35rem; }
}
/*
* Inner-page banners sit on a photograph (the agents' red-house banner is a
* bright one), so the small eyebrow above the title goes white with a soft
* neutral shadow. It was the brand red on the photo: 3.72:1 on Vonda's page.
*/
.hrs-banner .hrs-eyebrow {
color: #fff;
text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 1px 12px rgba(10, 12, 16, .45);
}
.hrs-banner__title { text-shadow: 0 1px 3px rgba(10, 12, 16, .45), 0 2px 18px rgba(10, 12, 16, .35); }
/* Caption under the owner's photograph on the home page. */
.hrs-split__cap {
margin: .85rem 0 0;
font-size: .86rem;
line-height: 1.45;
color: var(--hrs-muted);
text-align: center;
}
.hrs-split__cap strong { color: var(--hrs-ink); font-weight: 600; }
/* The team section's lede, under its heading on the home page. */
.hrs-slider__lede { margin: .9rem 0 0; max-width: 46ch; }
/* ------------------------------------------------- photographs of the area -- */
.hrs-areas__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.hrs-areas__fig {
margin: 0;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 10px;
overflow: hidden;
height: 100%;
transition: transform .25s var(--hrs-ease), box-shadow .25s var(--hrs-ease);
}
.hrs-areas__item:hover .hrs-areas__fig { transform: translateY(-3px); box-shadow: var(--hrs-shadow); }
.hrs-areas__fig figcaption {
display: flex;
flex-direction: column;
gap: .15rem;
padding: .85rem 1rem 1rem;
}
.hrs-areas__fig figcaption strong {
font-family: var(--hrs-display);
font-size: 1.05rem;
color: var(--hrs-ink);
}
.hrs-areas__fig figcaption span { font-size: .86rem; color: var(--hrs-muted); }
@media (min-width: 900px) {
.hrs-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------- area guides -- */
.hrs-guide { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
.hrs-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
/* The facts follow you down the page, the way a listing's ask box does. */
.hrs-guide__aside { position: sticky; top: calc(var(--hrs-header-h) + 1.5rem); align-self: start; }
}
.hrs-guide__credit { margin-top: 1.5rem; font-size: .78rem; color: var(--hrs-faint); }
.hrs-guide__facts {
padding: 1.35rem 1.5rem 1.6rem;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 10px;
}
.hrs-guide__factshead { margin: 0 0 .5rem; font-size: 1.15rem; }
.hrs-guide__facts dl { margin: 1rem 0 0; display: grid; gap: .9rem; }
.hrs-guide__facts dt {
font-family: var(--hrs-display);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hrs-muted);
}
.hrs-guide__facts dd { margin: .15rem 0 0; font-size: .92rem; color: var(--hrs-body); }
.hrs-guidecards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) {
.hrs-guidecards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hrs-guidecards--index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hrs-guidecard a {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
background: #fff;
border: 1px solid var(--hrs-line);
border-radius: 10px;
overflow: hidden;
transition: transform .25s var(--hrs-ease), box-shadow .25s var(--hrs-ease), border-color .25s var(--hrs-ease);
}
.hrs-guidecard a:hover { transform: translateY(-3px); box-shadow: var(--hrs-shadow); border-color: var(--hrs-coral-pale); }
.hrs-guidecard__body { display: block; padding: .9rem 1rem 1.1rem; }
.hrs-guidecard__body strong { display: block; font-family: var(--hrs-display); font-size: 1.1rem; color: var(--hrs-ink); }
.hrs-guidecard__body span { display: block; margin-top: .2rem; font-size: .86rem; color: var(--hrs-muted); }
.hrs-areas__note {
max-width: 52rem;
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid var(--hrs-line);
font-size: .9rem;
color: var(--hrs-muted);
text-align: center;
}
/* The agents' sign-in link, quiet in the legal row. */
.hrs-foot__agent { margin: 0; }
.hrs-foot__agent .bbap-footer-link { font-size: .78rem; color: rgba(255, 255, 255, .55); text-decoration: none; }
.hrs-foot__agent .bbap-footer-link:hover { color: #fff; text-decoration: underline; }
/* ------------------------------------------------------- legal documents -- */
/*
* The syndicated legal documents arrive wrapped in an inline
* style="color:#000000". That is fine on this light ground, but the inline
* rule also outranks the theme's own type scale, so the documents are given
* the site's body colour and rhythm explicitly (!important is the only thing
* that beats an inline style).
*/
.bb-legal-container,
.bb-legal-container * {
color: var(--hrs-body) !important;
font-family: var(--hrs-body-font, inherit);
}
.bb-legal-container { max-width: 46rem; margin-inline: auto; line-height: 1.7; }
.bb-legal-container h1,
.bb-legal-container h2,
.bb-legal-container h3 {
color: var(--hrs-ink) !important;
font-family: var(--hrs-display);
margin-top: 2rem;
}
.bb-legal-container h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.bb-legal-container h2 { font-size: 1.3rem; }
.bb-legal-container h3 { font-size: 1.08rem; }
.bb-legal-container p,
.bb-legal-container li { margin-bottom: 1rem; }
.bb-legal-container ul,
.bb-legal-container ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.bb-legal-container a { color: var(--hrs-coral) !important; }
/* The area photographs open their guides. */
.hrs-areas__link { display: block; color: inherit; text-decoration: none; }
.hrs-areas__cta {
display: block;
margin-top: .45rem;
font-family: var(--hrs-display);
font-size: .74rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--hrs-coral);
}
.hrs-areas__item:hover .hrs-areas__cta { color: var(--hrs-brand); }
/* Communities served — a quiet band of names, not another card grid. */
.hrs-served { padding-block: clamp(3rem, 6vw, 4.75rem); }
.hrs-served__title { margin-bottom: .35rem; }
.hrs-served__lede {
max-width: 46rem;
margin: 0 0 1.75rem;
color: var(--hrs-muted);
}
.hrs-served__list {
display: flex;
flex-wrap: wrap;
gap: .6rem .7rem;
margin: 0;
padding: 0;
list-style: none;
}
.hrs-served__town {
display: inline-block;
padding: .5rem .95rem;
border: 1px solid var(--hrs-line);
border-radius: 999px;
background: #fff;
color: var(--hrs-ink);
font-size: .95rem;
text-decoration: none;
transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.hrs-served__town:hover,
.hrs-served__town:focus-visible {
border-color: var(--hrs-brand);
color: var(--hrs-brand);
background: var(--hrs-brand-pale);
}
/* The ones with a guide behind them carry a mark, so the band doubles as a
table of contents for the guides rather than competing with them. */
.hrs-served__town--guide {
border-color: var(--hrs-brand-lt);
font-weight: 600;
}
.hrs-served__town--guide::after {
content: " →";
color: var(--hrs-coral);
}
/* The towns without a guide: one quiet line under the cards. */
.hrs-markets__also {
margin: 2rem auto 0;
max-width: 62ch;
color: var(--hrs-muted);
font-size: .98rem;
text-align: center; /* the heading and lede above it are centred */
}
.hrs-markets__also a {
white-space: nowrap;
color: var(--hrs-brand);
text-decoration: none;
border-bottom: 1px solid var(--hrs-brand-lt);
}
.hrs-markets__also a:hover { color: var(--hrs-coral); border-color: var(--hrs-coral); }
/* The four promises under the hero (2026-09-21).
Kicker / title / one line, left-aligned in four equal columns. The old strip
was a single centred label and note; three levels of type centred in a
narrow column turn into a ragged stack, so these read left to right like
the rest of the page. Each block gets a short brand-red rule on top instead
of the hairline grid, which is what ties the strip to the rules under every
heading. */
.hrs-creds__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
background: none;
}
.hrs-cred {
padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.6rem);
text-align: left;
border-left: 1px solid var(--hrs-line);
}
.hrs-cred:first-child { border-left: 0; padding-left: 0; }
.hrs-cred:last-child { padding-right: 0; }
.hrs-cred__kicker {
display: block;
margin-bottom: .6rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--hrs-coral);
}
.hrs-cred__kicker::before {
content: "";
display: block;
width: 1.75rem;
height: 2px;
margin-bottom: .75rem;
background: var(--hrs-brand);
}
.hrs-cred__title {
margin: 0 0 .45rem;
font-family: var(--hrs-display);
font-size: clamp(1.12rem, 1.4vw, 1.3rem);
font-weight: 400;
line-height: 1.2;
color: var(--hrs-deep);
}
.hrs-cred__body {
margin: 0;
font-size: .9rem;
line-height: 1.55;
color: var(--hrs-muted);
}
/* Two across on a tablet, one on a phone; the dividers follow the rows. */
@media (max-width: 960px) {
.hrs-creds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hrs-cred { padding-inline: 1.25rem; }
.hrs-cred:nth-child(odd) { border-left: 0; padding-left: 0; }
.hrs-cred:nth-child(n+3) { border-top: 1px solid var(--hrs-line); }
}
@media (max-width: 560px) {
.hrs-creds__list { grid-template-columns: 1fr; }
.hrs-cred { border-left: 0; padding-inline: 0; padding-block: 1.35rem; }
.hrs-cred + .hrs-cred { border-top: 1px solid var(--hrs-line); }
}
/* Holly's letter, in full on About. The lead-only version keeps the large
display setting; three paragraphs at that size are a wall, so the full letter
drops to a reading size, left-aligned, and keeps the display face for the
closing line instead. */
.hrs-creed__quote--full { text-align: left; max-width: 44rem; margin-inline: auto; }
.hrs-creed__quote--full .hrs-creed__goal {
font-family: var(--hrs-body-font, inherit);
font-size: clamp(1.02rem, .98rem + .25vw, 1.14rem);
line-height: 1.75;
margin-bottom: 1.1rem;
}
.hrs-creed__quote--full .hrs-creed__close {
margin-top: 1.75rem;
font-family: var(--hrs-display);
font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
line-height: 1.3;
text-align: center;
}
/* The older `.hrs-creds__list li { text-align: center }` outranks a bare
class, which centred the words under a left-aligned rule. Match its weight. */
.hrs-creds__list .hrs-cred { text-align: left; }
.hrs-creds__list .hrs-cred:first-child { padding-left: 0; }
/* No single word left alone on the last line of a card. */
.hrs-cred__title, .hrs-cred__body { text-wrap: pretty; }
/* ---------------------------------------------------- Holly's red (2026-09-22)
The dark bands used to be burgundy (#490A0D), and everything on them was set
in translucent white or pale pink — fine on near-black, 1.4–3.1:1 on her logo
red. White on #D83135 measures 4.76:1, which passes with no room to spare, so
text on red is solid white, full stop, and hierarchy comes from size and
weight instead of fading. Listed by name rather than with a blanket
.hrs-section--dark rule: the creed band still carries that class but was
repainted as a light wash (trap 24), and so was the closer ("Talk to Rose
Realty Group.") — white there vanishes, which is how the first version of
this block shipped for ten minutes. */
.hrs-utility,
.hrs-utility__tagline,
.hrs-utility__list a,
.hrs-utility .hrs-icon,
.hrs-utility__list .hrs-lang__off,
.hrs-foot,
.hrs-foot__h,
.hrs-foot__blurb,
.hrs-foot__addr,
.hrs-foot__menu a,
.hrs-foot__link,
.hrs-foot__social a,
.hrs-foot em,
.hrs-foot__legal-in,
.hrs-foot__legal-in a,
.hrs-foot__agent .bbap-footer-link,
.hrs-plate__city,
.hrs-contact__seal p,
.hrs-pillars:not(.hrs-pillars--light) .hrs-pillar__body { color: #fff; }
/* What fading used to do in the footer, done with type instead. */
.hrs-foot__h { font-weight: 600; letter-spacing: .14em; }
.hrs-foot__legal-in { font-size: .78rem; }
.hrs-foot__agent .bbap-footer-link { text-decoration: underline; text-underline-offset: 2px; }
/* The review source on the light cards: --hrs-faint was 3.7:1 on white. */
.hrs-quote__via { color: var(--hrs-muted); }
/* Text-safe red for text only. Every FILL — the top bar, footer, bands,
buttons — stays exactly her logo red via --hrs-deep / --hrs-coral / --hrs-accent. */
.hrs-bento__num { color: var(--hrs-brand); }
.hrs-guide__credit { color: var(--hrs-muted); }
.hrs-btn--ghost,
.hrs-btn--ghost:hover { color: var(--hrs-brand); }
label span[aria-hidden="true"] { color: var(--hrs-brand); }
/* ------------------------------------------- the phone masthead and hero ----
Holly, looking at her phone (2026-09-23): a bigger logo, the firm's name out
of the line under it, and those four words centred and larger.
The whole hero block is centred on a phone, not the four words alone: a
centred line sitting over a left-aligned headline reads as a mistake rather
than a decision. Desktop is untouched. */
@media (max-width: 720px) {
:root { --hrs-logo-max: 64px; --hrs-logo-min: 44px; }
.hrs-home .hrs-hero__inner,
.hrs-hero__inner { text-align: center; }
.hrs-hero__lede { margin-inline: auto; }
.hrs-hero__actions { justify-content: center; }
.hrs-hero .hrs-eyebrow--light {
display: block;
margin-inline: auto;
/* Wide enough to break once, after "Commercial ·", instead of into three
ragged lines — measured at 390px, not guessed. */
max-width: 20rem;
font-size: .88rem;
letter-spacing: .09em;
text-wrap: balance; /* two even lines, not three words and an orphan */
line-height: 1.5;
}
/* The call line under the buttons centres with everything else. */
.hrs-hero__phone { justify-content: center; }
}
/* ------------------------------------------------ the phone hero, moving ----
Phones never get the hero video (theme.js skips it under 900px), so the
photograph carried the hero as a still. A slow Ken Burns drift gives it the
same life the desktop loop has, with no video to download: it is the same
![]()
that already painted, only moving.
It starts at 1.04 rather than 1, so the pan never exposes an edge, and it is
30s with `alternate` — slow enough to read as a camera move rather than an
animation, and seamless because it reverses instead of cutting back. */
@media (max-width: 900px) {
.hrs-hero__poster {
animation: hrs-kenburns 30s ease-in-out infinite alternate;
transform-origin: 50% 42%;
will-change: transform;
}
}
@keyframes hrs-kenburns {
from { transform: scale(1.04) translate3d(0, 0, 0); }
to { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
/* Anybody who asked their phone to stop animating things gets the still. */
@media (prefers-reduced-motion: reduce) {
.hrs-hero__poster { animation: none; }
}
/* The headline is the headline: as large as one line allows on a phone.
"Exceeding your expectations." is 28 characters, so the limit is arithmetic,
not taste — measured at 360, 390 and 430px, the widest one-line setting is
about 9% of the viewport. It gets there by taking back some of the side
gutter and a touch of the tracking rather than by shrinking the type. */
@media (max-width: 720px) {
.hrs-hero__inner { --hrs-gutter: 14px; }
.hrs-hero__title {
/* 8.8vw is the measured ceiling: at 9.05 it overflowed its box at 390px
and was clipped. No nowrap — if a narrower phone ever falls short it
should wrap, not lose the last word. */
/* 8.6vw, measured: at 8.8 the line came to exactly the box width at 390px
and `text-wrap: balance` (inherited) split it into two even lines. The
headline is set normal here so it stays one line, with a little slack. */
font-size: min(8.6vw, 2.7rem);
letter-spacing: -.015em;
line-height: 1.08;
text-wrap: normal;
}
}
/* "Moving outside our area?" — a strip, not a section: one question, one
answer, one button, on the tint so it separates the reviews from the closer
without another full band of padding. */
.hrs-referral {
background: var(--hrs-tint);
border-top: 1px solid var(--hrs-line);
border-bottom: 1px solid var(--hrs-line);
padding-block: clamp(2rem, 4vw, 3rem);
}
.hrs-referral__in {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2.5rem;
}
.hrs-referral__title {
margin: .2rem 0 .4rem;
font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
line-height: 1.15;
}
.hrs-referral__body {
margin: 0;
max-width: 52ch;
color: var(--hrs-muted);
}
@media (max-width: 700px) {
.hrs-referral__in { display: block; }
.hrs-referral__in .hrs-btn { margin-top: 1.1rem; }
}
/* The menu's sub-items are set like its top-level items — capitals, tracked —
so "AREAS" and the towns under it read as one list rather than two styles
(Holly, 2026-09-23). Both the phone drawer and the desktop dropdown. */
.hrs-nav__sub a,
.hrs-drawer__nav .hrs-nav__sub a {
text-transform: uppercase;
letter-spacing: .08em;
}
/* HUD's official Equal Housing mark in the footer. The artwork is black on
transparent, and the footer is her red, so it is inverted to white — the same
treatment Larry Mullinix's footer uses. */
.hrs-eho--official {
width: auto;
height: 30px;
vertical-align: middle;
filter: brightness(0) invert(1);
opacity: .92;
}