/*
* Palette set by scripts/set-palette.py.
*
* From his own logo (logo_6.webp): the navy skyline and wordmark, the silver e; skyline blue is a lighter step of the navy for buttons
*
* Logo navy #002A5C structure: headings, buttons, footer, the ink
* Logo silver #9AA3AD fills, rules, washes — never text
* Skyline blue #2A5FA8 the warm accent and the thing to press
* Light silver #C4C9D0 the fourth stop in the rule — fills only
*
* Carried in one repeated four-part rule under every heading.
* Fully light, on a cool ground.
*
* Measured (WCAG):
* brand on ground 13.4:1
* white on brand 14.1:1
* coral on ground 6.0:1
* white on coral 6.4:1
* surf on ground 2.4:1 FILLS ONLY
* dune on ground 1.6:1 FILLS ONLY
* body on ground 9.7:1
*/
/* ---------------------------------------------------------------- tokens -- */
:root {
--ees-brand: #002A5C;
--ees-brand-mid: #244873;
--ees-brand-lt: #8C9FB6;
--ees-brand-pale: #E6EAEF;
--ees-accent: #002A5C;
--ees-accent-mid: #244873;
--ees-accent-lt: #9AA3AD;
--ees-accent-metal: linear-gradient(135deg, #00224B 0%, #456080 52%, #002A5C 100%);
--ees-surf: #9AA3AD;
--ees-surf-dk: #787F87;
--ees-surf-pale: #F3F4F5;
--ees-coral: #2A5FA8;
--ees-coral-br: #4C79B6;
--ees-coral-dk: #245290;
--ees-coral-pale: #EAEFF6;
--ees-dune: #C4C9D0;
--ees-dune-dk: #93979C;
--ees-dune-pale: #F8F9F9;
--ees-sand: #DCE4EE;
--ees-sand-dp: #C3CFDD;
--ees-red: #2A5FA8;
--ees-deep: #001329;
--ees-deep-dk: #000C1A;
--ees-deep-lt: #001B3C;
--ees-stone: #5C6977;
--ees-ink: #001329;
--ees-body: #334254;
--ees-muted: #5C6876;
--ees-faint: #8C959F;
--ees-white: #FFFFFF;
--ees-shell: #F7F9FB;
--ees-tint: #F7F9FB;
--ees-tint-2: #EDF1F6;
--ees-sky: #E6EAEF;
--ees-line: #E1E6ED;
--ees-line-soft: #EFF2F6;
--ees-display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
--ees-body-font: 'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
--ees-wrap: 1280px;
--ees-gutter: clamp(1.25rem, 4vw, 3rem);
--ees-band: clamp(4rem, 8vw, 7rem);
--ees-header-h: 128px;
--ees-bar-max: 128px;
--ees-bar-min: 76px;
--ees-logo-max: 92px;
--ees-logo-min: 56px;
--ees-shrink: 0;
--ees-ease: cubic-bezier(.22, .61, .36, 1);
--ees-shadow: 0 1px 2px rgba(10, 32, 41, .05), 0 8px 24px -12px rgba(10, 32, 41, .16);
--ees-shadow-lg: 0 2px 4px rgba(10, 32, 41, .06), 0 20px 48px -20px rgba(10, 32, 41, .24);
}
@media (max-width: 1040px) {
:root {
--ees-header-h: 96px;
--ees-bar-max: 96px;
--ees-bar-min: 62px;
--ees-logo-max: 68px;
--ees-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(--ees-shell);
color: var(--ees-body);
font-family: var(--ees-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.ees-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--ees-deep-lt); text-decoration: none; transition: color .2s var(--ees-ease); }
a:hover { color: var(--ees-deep); }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--ees-display);
font-weight: 400;
line-height: 1.16;
letter-spacing: -.018em;
color: var(--ees-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(--ees-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--ees-accent-lt); color: var(--ees-ink); }
.ees-sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ees-skip {
position: absolute; top: -100px; left: 1rem; z-index: 200;
padding: .75rem 1.25rem;
background: var(--ees-deep); color: #fff; font-weight: 600;
transition: top .2s var(--ees-ease);
}
.ees-skip:focus { top: 1rem; color: #fff; }
/* --------------------------------------------------------------- layout -- */
.ees-wrap {
width: 100%;
max-width: var(--ees-wrap);
margin-inline: auto;
padding-inline: var(--ees-gutter);
}
.ees-wrap--narrow { max-width: 60rem; }
.ees-section { position: relative; padding-block: var(--ees-band); }
.ees-section--tint { background: var(--ees-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. */
.ees-section--dark {
background: var(--ees-deep);
color: rgba(255, 255, 255, .82);
}
.ees-section--dark h1,
.ees-section--dark h2,
.ees-section--dark h3 { color: #fff; }
/* ------------------------------------------------------------- typography -- */
.ees-eyebrow {
display: inline-block;
margin-bottom: .9rem;
font-family: var(--ees-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-eyebrow--light { color: var(--ees-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. */
.ees-hero .ees-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);
}
.ees-hero__title { text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45); }
.ees-rule {
display: block;
width: 56px; height: 3px;
margin: 1.1rem 0 1.4rem;
background: var(--ees-accent-metal);
border-radius: 3px;
}
.ees-head--center .ees-rule,
.ees-closer .ees-rule,
.ees-modal__head .ees-rule { margin-inline: auto; }
.ees-lede {
font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
line-height: 1.65;
color: var(--ees-muted);
max-width: 56ch;
}
.ees-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.ees-head--center { margin-inline: auto; text-align: center; }
.ees-head--center .ees-lede { margin-inline: auto; }
.ees-head--light .ees-lede { color: rgba(255, 255, 255, .8); }
.ees-head--split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
max-width: none;
}
@media (max-width: 720px) {
.ees-head--split { flex-direction: column; align-items: flex-start; }
}
.ees-prose { color: var(--ees-body); }
.ees-prose p { margin-bottom: 1.1em; }
.ees-prose--editor h2,
.ees-prose--editor h3 { margin: 2rem 0 .75rem; }
.ees-prose--editor ul,
.ees-prose--editor ol { margin: 0 0 1.2em 1.25rem; list-style: disc; }
.ees-prose--editor ol { list-style: decimal; }
.ees-prose--editor li { margin-bottom: .4em; }
.ees-prose--article { font-size: 1.05rem; }
.ees-prose--article p { margin-bottom: 1.3em; }
.ees-pull {
margin: 1.75rem 0 0;
padding: 1.1rem 1.4rem;
border-left: 3px solid var(--ees-accent);
background: var(--ees-tint);
border-radius: 0 4px 4px 0;
font-family: var(--ees-display);
font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
font-weight: 400;
line-height: 1.45;
color: var(--ees-ink);
}
/* --------------------------------------------------------------- buttons -- */
.ees-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .9rem 1.6rem;
border: 1px solid var(--ees-deep);
border-radius: 4px;
background: var(--ees-deep);
color: #fff;
font-family: var(--ees-display);
font-size: .82rem;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: transform .2s var(--ees-ease), box-shadow .2s var(--ees-ease), background .2s var(--ees-ease);
-webkit-appearance: none;
appearance: none;
}
.ees-btn:hover {
background: var(--ees-deep-dk);
border-color: var(--ees-deep-dk);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 24px -12px rgba(0, 19, 41, .5);
}
.ees-btn:active { transform: translateY(0); }
/*
* The primary call to action.
*
* Three things here were inherited from a gold-era build and were all wrong
* once the gradient became navy: a comment claiming the fill was gold, dark
* navy ink (#0E2B37) sitting on a navy gradient — effectively invisible — and
* a gold drop shadow. White on #002A5C is 9.8:1 and needs no argument.
*/
.ees-btn--accent {
background: var(--ees-accent-metal);
border-color: transparent;
color: #FFFFFF;
}
.ees-btn--accent:hover {
background: var(--ees-accent-metal);
filter: brightness(1.08);
color: #FFFFFF;
box-shadow: 0 12px 26px -12px rgba(0, 42, 92, .55);
}
.ees-btn--ghost {
background: transparent;
border-color: var(--ees-line);
color: var(--ees-deep);
}
.ees-btn--ghost:hover {
background: var(--ees-tint);
border-color: var(--ees-deep);
color: var(--ees-deep);
box-shadow: none;
}
.ees-btn--ghost-light {
background: transparent;
border-color: rgba(255, 255, 255, .5);
color: #fff;
}
.ees-btn--ghost-light:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
box-shadow: none;
}
.ees-btn--sm { padding: .68rem 1.1rem; font-size: .74rem; }
.ees-btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.ees-btn--block { display: flex; width: 100%; }
/* -------------------------------------------------------------- utility -- */
.ees-utility {
position: relative;
z-index: 60;
background: var(--ees-deep);
color: rgba(255, 255, 255, .72);
font-size: .78rem;
}
.ees-utility__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 40px;
padding-block: .35rem;
}
.ees-utility__tagline {
margin: 0;
font-family: var(--ees-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ees-accent-lt);
white-space: nowrap;
}
.ees-utility__list { display: flex; align-items: center; gap: 1.4rem; }
.ees-utility__list a {
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgba(255, 255, 255, .82);
}
.ees-utility__list a:hover { color: #fff; }
.ees-icon { flex-shrink: 0; color: var(--ees-accent-lt); transition: color .2s var(--ees-ease); }
.ees-utility__list a:hover .ees-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. */
.ees-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.
*/
.ees-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;
}
.ees-lang__on,
.ees-lang__off {
display: inline-block;
padding: .18rem .55rem;
border-radius: 999px;
line-height: 1.5;
}
.ees-lang__on {
background: #fff;
color: var(--ees-deep);
}
.ees-utility__list .ees-lang__off {
color: rgba(255, 255, 255, .8);
transition: background .18s var(--ees-ease), color .18s var(--ees-ease);
}
.ees-utility__list .ees-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.
*/
.ees-lang--drawer {
align-self: center;
background: var(--ees-sky);
font-size: .82rem;
}
.ees-lang--drawer .ees-lang__on {
background: var(--ees-brand);
color: #fff;
}
.ees-lang--drawer .ees-lang__off {
color: var(--ees-accent);
}
.ees-lang--drawer .ees-lang__off:hover {
background: rgba(154, 163, 173, .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. */
.ees-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--ees-header-h);
pointer-events: none;
}
.ees-header__bar {
pointer-events: auto;
background: #fff;
border-bottom: 1px solid var(--ees-line);
box-shadow: 0 8px 24px -18px rgba(0, 19, 41, calc(1.4 * var(--ees-shrink)));
}
.ees-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: calc(var(--ees-bar-max) + (var(--ees-bar-min) - var(--ees-bar-max)) * var(--ees-shrink));
}
.ees-brand { display: inline-flex; flex-shrink: 0; }
.ees-logo { display: inline-flex; align-items: center; gap: .65rem; }
.ees-logo__img {
height: calc(var(--ees-logo-max) + (var(--ees-logo-min) - var(--ees-logo-max)) * var(--ees-shrink));
width: auto;
}
.ees-logo__mark { display: inline-flex; }
.ees-logo__mark svg { width: 40px; height: 40px; }
.ees-logo--footer .ees-logo__mark svg { width: 46px; height: 46px; }
.ees-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.ees-logo__name {
font-family: var(--ees-display);
font-size: 1.32rem;
font-weight: 400;
letter-spacing: -.01em;
color: var(--ees-deep);
}
.ees-logo__sub {
margin-top: .18rem;
font-family: var(--ees-display);
font-size: .62rem;
font-weight: 400;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-logo--footer .ees-logo__name { color: #fff; }
.ees-logo--footer .ees-logo__img { height: 74px; }
/* ------------------------------------------------------------------ nav -- */
.ees-nav { margin-inline: auto; }
.ees-nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }
.ees-nav__list a {
position: relative;
display: inline-block;
padding-block: .35rem;
font-family: var(--ees-display);
font-size: .8rem;
font-weight: 400;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ees-ink);
}
.ees-nav__list a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--ees-accent-metal);
transition: width .25s var(--ees-ease);
}
.ees-nav__list a:hover { color: var(--ees-deep); }
.ees-nav__list a:hover::after,
.ees-nav__list .is-current > a::after,
.ees-nav__list .current-menu-item > a::after { width: 100%; }
.ees-nav__list .is-current > a,
.ees-nav__list .current-menu-item > a { color: var(--ees-deep); }
.ees-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.ees-burger {
display: none;
padding: .55rem;
background: none;
border: 1px solid var(--ees-line);
border-radius: 4px;
cursor: pointer;
}
.ees-burger__box { display: block; width: 20px; }
.ees-burger__box i {
display: block; height: 2px; background: var(--ees-deep);
transition: transform .25s var(--ees-ease), opacity .2s var(--ees-ease);
}
.ees-burger__box i + i { margin-top: 4px; }
.ees-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ees-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.ees-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1040px) {
.ees-nav { display: none; }
.ees-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 .ees-callnow and would otherwise win silently. */
.ees-header__actions .ees-btn:not(.ees-callnow) { display: none; }
}
/* --------------------------------------------------------------- drawer -- */
.ees-drawer {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1.5rem;
padding: calc(var(--ees-header-h) + 1.75rem) var(--ees-gutter) 2.5rem;
background: #fff;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .28s var(--ees-ease), visibility .28s var(--ees-ease);
}
.ees-drawer[hidden] { display: flex; }
.ees-drawer.is-open { opacity: 1; visibility: visible; }
.ees-drawer__nav .ees-nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; }
.ees-drawer__nav .ees-nav__list a { padding-block: .7rem; font-size: 1.3rem; letter-spacing: .04em; }
.ees-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.ees-drawer__call {
font-family: var(--ees-display);
font-size: 1.05rem;
font-weight: 400;
text-align: center;
color: var(--ees-deep);
}
/* --------------------------------------------------------------- figures -- */
.ees-figure {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: var(--ees-tint-2);
}
.ees-figure img { width: 100%; height: 100%; object-fit: cover; }
.ees-figure--cover { position: absolute; inset: 0; border-radius: 0; }
.ees-figure--tall { aspect-ratio: 4 / 5; }
.ees-figure--portrait { aspect-ratio: 3 / 4; }
.ees-figure--wide { aspect-ratio: 16 / 10; }
.ees-figure--hero { aspect-ratio: 16 / 9; border-radius: 8px; }
.ees-figure--lead { margin-bottom: 2rem; }
.ees-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(0, 19, 41, .03) 12px 24px),
var(--ees-tint-2);
}
.ees-figure__mark { opacity: .5; }
.ees-figure__note {
font-family: var(--ees-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ees-faint);
}
/* ------------------------------------------------------------------ hero -- */
.ees-hero {
position: relative;
display: flex;
align-items: center;
min-height: clamp(30rem, 74vh, 42rem);
padding-block: clamp(5rem, 10vh, 7rem);
overflow: hidden;
background: #050E12;
}
.ees-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 --ees-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
* .ees-hero__title and .ees-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.
*/
.ees-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 San Diego sunset still, and the copy runs full width over its
* pink sky: eyebrow 3.61:1 and lede 3.94:1 at 430px with the desktop band. A
* firmer vertical band from the logo down, neutral, never graded toward the
* brand; lighter at the very top so the sky still reads behind the lockup.
*/
@media (max-width: 900px) {
.ees-hero__scrim {
background:
linear-gradient(to bottom, rgba(16, 18, 22, .26) 0%, rgba(16, 18, 22, .56) 24%, rgba(16, 18, 22, .58) 82%, rgba(16, 18, 22, .40) 100%);
}
.ees-hero__lede,
.ees-hero .ees-eyebrow--light,
.ees-hero__phone strong { color: #fff; }
}
.ees-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.ees-hero__title { color: #fff; }
.ees-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }
.ees-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ees-hero__note {
margin-top: 1.35rem;
font-size: .84rem;
color: rgba(255, 255, 255, .62);
}
/* ---------------------------------------------------------------- banner -- */
.ees-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(--ees-deep-dk);
}
.ees-banner__media { position: absolute; inset: 0; z-index: 0; }
.ees-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%);
}
.ees-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.ees-banner__title { color: #fff; }
.ees-banner__lede { color: rgba(255, 255, 255, .85); }
/* Banners with no photograph still need to be navy, not a white void. */
.ees-banner:not(:has(.ees-banner__media)) { background: var(--ees-deep); }
/* ----------------------------------------------------------------- split -- */
.ees-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(2rem, 5vw, 4rem);
}
.ees-split--reverse .ees-split__media { order: 2; }
.ees-split--reverse .ees-split__body { order: 1; }
.ees-split__body .ees-lede { margin-bottom: 1.25rem; }
.ees-split__body .ees-btn { margin-top: 1.5rem; }
@media (max-width: 900px) {
.ees-split { grid-template-columns: 1fr; }
.ees-split--reverse .ees-split__media,
.ees-split--reverse .ees-split__body { order: initial; }
.ees-figure--tall, .ees-figure--portrait { aspect-ratio: 16 / 11; }
}
/* ----------------------------------------------------------- cards, grid -- */
.ees-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.5rem;
}
.ees-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--ees-ease), box-shadow .28s var(--ees-ease), border-color .28s var(--ees-ease);
}
.ees-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--ees-shadow-lg);
}
.ees-card__media { position: relative; display: block; }
.ees-card__media .ees-figure { border-radius: 0; }
.ees-card__media img { transition: transform .5s var(--ees-ease); }
.ees-card:hover .ees-card__media img { transform: scale(1.035); }
.ees-card__status {
position: absolute;
top: .75rem; left: .75rem;
padding: .35rem .7rem;
border-radius: 3px;
background: var(--ees-deep);
color: #fff;
font-family: var(--ees-display);
font-size: .66rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
}
/* A sold listing should not look like an available one. */
.ees-status--sold,
.ees-status--closed { background: var(--ees-ink); }
.ees-status--pending,
.ees-status--under-contract { background: var(--ees-accent); color: #FFFFFF; }
.ees-status--coming-soon { background: var(--ees-deep-lt); }
.ees-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.5rem; }
.ees-card__price {
margin-bottom: .35rem;
font-family: var(--ees-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--ees-deep);
}
.ees-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.ees-card__title a { color: var(--ees-ink); }
.ees-card__title a:hover { color: var(--ees-deep); }
.ees-card__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .9rem;
font-size: .88rem;
color: var(--ees-muted);
}
.ees-card__addr .ees-icon { color: var(--ees-accent); }
.ees-card__specs {
display: flex;
flex-wrap: wrap;
gap: .35rem 1.1rem;
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid var(--ees-line-soft);
font-size: .84rem;
color: var(--ees-body);
}
.ees-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.ees-card__specs .ees-icon { color: var(--ees-deep-lt); }
.ees-card__date {
margin-bottom: .4rem;
font-family: var(--ees-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-card__text { font-size: .93rem; color: var(--ees-muted); margin-bottom: 1rem; }
.ees-count {
margin-bottom: 1.75rem;
font-size: .88rem;
color: var(--ees-muted);
}
/* --------------------------------------------------------------- services -- */
.ees-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1.25rem;
}
.ees-service {
display: flex;
flex-direction: column;
padding: 2rem 1.6rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 8px;
color: inherit;
transition: transform .28s var(--ees-ease), box-shadow .28s var(--ees-ease), border-color .28s var(--ees-ease);
}
.ees-service:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: var(--ees-shadow-lg);
color: inherit;
}
.ees-service__num {
margin-bottom: .9rem;
font-family: var(--ees-display);
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
color: var(--ees-accent);
}
.ees-service__title { margin-bottom: .5rem; }
.ees-service__text { font-size: .93rem; color: var(--ees-muted); margin-bottom: 1.25rem; }
.ees-service__link {
margin-top: auto;
font-family: var(--ees-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-deep);
}
.ees-service__link::after {
content: ' \2192';
display: inline-block;
transition: transform .25s var(--ees-ease);
}
.ees-service:hover .ees-service__link::after,
.ees-card:hover .ees-service__link::after { transform: translateX(4px); }
/* --------------------------------------------------------------- pillars -- */
.ees-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: 1.25rem;
}
.ees-pillar {
padding: 1.75rem 1.5rem;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 8px;
}
.ees-pillar__title { margin-bottom: .6rem; font-size: 1.05rem; }
.ees-pillar__body { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }
/* ----------------------------------------------------------------- steps -- */
.ees-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
gap: 1.5rem;
}
.ees-step { padding-top: 1.5rem; border-top: 2px solid var(--ees-line); }
.ees-step__num {
display: block;
margin-bottom: .7rem;
font-family: var(--ees-display);
font-size: 1.7rem;
font-weight: 400;
line-height: 1;
color: var(--ees-accent);
}
.ees-step__title { margin-bottom: .4rem; }
.ees-step__text { font-size: .92rem; color: var(--ees-muted); margin: 0; }
/* ---------------------------------------------------------------- quotes -- */
.ees-quotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
gap: 1.5rem;
}
.ees-quote {
margin: 0;
padding: 1.9rem 1.6rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 8px;
}
.ees-quote__stars { color: var(--ees-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.ees-quote blockquote { margin: 0 0 1.1rem; color: var(--ees-body); }
.ees-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.ees-quote__name { font-family: var(--ees-display); font-weight: 400; color: var(--ees-ink); font-size: .92rem; }
.ees-quote__via { font-size: .8rem; color: var(--ees-faint); }
/* ------------------------------------------------------------------ team -- */
.ees-team { display: grid; gap: 2rem; }
.ees-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(--ees-line);
border-radius: 8px;
}
@media (max-width: 760px) {
.ees-member { grid-template-columns: 1fr; }
}
.ees-member__photo { position: relative; }
.ees-member__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 3 / 4;
border-radius: 6px;
background: var(--ees-deep);
color: var(--ees-accent-lt);
font-family: var(--ees-display);
font-size: 3.5rem;
font-weight: 400;
letter-spacing: .04em;
}
.ees-member__name { margin-bottom: .2rem; }
.ees-member__role {
font-family: var(--ees-display);
font-size: .78rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-member__bio { color: var(--ees-body); margin-bottom: 1.1rem; }
.ees-member__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ees-member__contact a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.ees-member__contact .ees-icon { color: var(--ees-accent); }
.ees-joinus {
margin-top: 2rem;
padding: clamp(1.75rem, 4vw, 2.5rem);
background: var(--ees-tint);
border: 1px solid var(--ees-line);
border-radius: 8px;
text-align: center;
}
.ees-joinus h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.ees-joinus p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.4rem; color: var(--ees-muted); }
/* -------------------------------------------------------------- listing -- */
.ees-listing { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.ees-listing__head { margin-bottom: 1.75rem; }
.ees-crumb { font-size: .82rem; color: var(--ees-faint); margin-bottom: 1rem; }
.ees-crumb span { margin-inline: .4rem; }
.ees-listing__titles {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ees-listing__addr {
display: flex;
align-items: center;
gap: .4rem;
margin-top: .6rem;
color: var(--ees-muted);
}
.ees-listing__addr .ees-icon { color: var(--ees-accent); }
.ees-listing__price { text-align: right; }
.ees-listing__amount {
font-family: var(--ees-display);
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
font-weight: 400;
color: var(--ees-deep);
margin-bottom: .4rem;
}
.ees-listing__price .ees-card__status { position: static; display: inline-block; }
.ees-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
gap: 1px;
margin-top: 1.75rem;
background: var(--ees-line);
border: 1px solid var(--ees-line);
border-radius: 8px;
overflow: hidden;
}
.ees-facts li { padding: 1.1rem 1.25rem; background: #fff; text-align: center; }
.ees-facts__value {
display: block;
font-family: var(--ees-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--ees-ink);
}
.ees-facts__label {
display: block;
margin-top: .2rem;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ees-faint);
}
.ees-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) { .ees-listing__body { grid-template-columns: 1fr; } }
.ees-listing__galleryhead { margin-top: 2.5rem; }
.ees-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: 1rem;
}
.ees-askbox {
position: sticky;
top: calc(var(--ees-header-h) + 1.5rem);
padding: 1.75rem 1.6rem;
background: var(--ees-tint);
border: 1px solid var(--ees-line);
border-radius: 8px;
}
.ees-askbox h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.ees-askbox p { font-size: .92rem; color: var(--ees-muted); margin-bottom: 1.25rem; }
.ees-askbox__call {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: .9rem;
font-family: var(--ees-display);
font-weight: 400;
color: var(--ees-deep);
}
/* ----------------------------------------------------------------- empty -- */
.ees-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(--ees-tint);
border: 1px solid var(--ees-line);
border-radius: 8px;
}
.ees-empty__mark { opacity: .7; }
.ees-empty h2 { font-size: 1.3rem; }
.ees-empty p { color: var(--ees-muted); margin-bottom: .5rem; }
/* ------------------------------------------------------------------ faqs -- */
.ees-faqs { display: grid; gap: .75rem; }
.ees-faq {
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 6px;
}
.ees-faq[open] { border-color: var(--ees-deep-lt); }
.ees-faq__q {
position: relative;
padding: 1.15rem 3rem 1.15rem 1.35rem;
font-family: var(--ees-display);
font-size: 1rem;
font-weight: 400;
color: var(--ees-ink);
cursor: pointer;
list-style: none;
}
.ees-faq__q::-webkit-details-marker { display: none; }
.ees-faq__q:hover { color: var(--ees-deep); }
.ees-faq__q::after,
.ees-faq__q::before {
content: '';
position: absolute;
right: 1.35rem; top: 50%;
width: 12px; height: 2px;
background: var(--ees-accent);
transition: transform .25s var(--ees-ease);
}
.ees-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.ees-faq__q::after { transform: translateY(-50%); }
.ees-faq[open] .ees-faq__q::before { transform: translateY(-50%) rotate(0deg); }
.ees-faq__a { margin: 0; padding: 0 3rem 1.35rem 1.35rem; color: var(--ees-muted); }
/* ---------------------------------------------------------------- contact -- */
.ees-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) { .ees-contact { grid-template-columns: 1fr; } }
.ees-contact__form .ees-form { margin-top: 1.75rem; }
.ees-contact__aside {
display: grid;
gap: 1px;
background: var(--ees-line);
border: 1px solid var(--ees-line);
border-radius: 8px;
overflow: hidden;
}
.ees-contact__block { padding: 1.4rem 1.5rem; background: #fff; }
.ees-contact__heading {
margin-bottom: .4rem;
font-family: var(--ees-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-contact__big {
display: inline-block;
font-family: var(--ees-display);
font-size: 1.1rem;
font-weight: 400;
color: var(--ees-ink);
word-break: break-word;
}
.ees-contact__big:hover { color: var(--ees-deep); }
.ees-contact__note, .ees-contact__text { margin: .3rem 0 0; font-size: .9rem; color: var(--ees-muted); }
.ees-contact__text { color: var(--ees-body); }
.ees-contact__seal {
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
padding: 1.75rem 1.5rem;
text-align: center;
background: var(--ees-deep);
}
.ees-contact__seal p {
margin: 0;
font-family: var(--ees-display);
font-size: .78rem;
font-weight: 400;
color: rgba(255, 255, 255, .82);
}
.ees-contact__seal .ees-mark { filter: brightness(1.6); }
/* ------------------------------------------------------------------ form -- */
.ees-form { display: grid; gap: 1rem; }
.ees-field { display: grid; gap: .4rem; min-width: 0; }
.ees-field__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: 1rem;
}
.ees-field label {
font-family: var(--ees-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-field label span { color: var(--ees-accent); }
.ees-field input,
.ees-field select,
.ees-field textarea {
width: 100%;
padding: .8rem .95rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 5px;
color: var(--ees-ink);
font-family: var(--ees-body-font);
font-size: 1rem;
line-height: 1.5;
transition: border-color .2s var(--ees-ease), box-shadow .2s var(--ees-ease);
-webkit-appearance: none;
appearance: none;
}
.ees-field textarea { resize: vertical; min-height: 8rem; }
.ees-field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--ees-deep) 50%),
linear-gradient(135deg, var(--ees-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;
}
.ees-field input:focus,
.ees-field select:focus,
.ees-field textarea:focus {
border-color: var(--ees-deep-lt);
box-shadow: 0 0 0 3px rgba(154, 163, 173, .12);
outline: none;
}
.ees-field input::placeholder, .ees-field textarea::placeholder { color: var(--ees-faint); }
/* Off-screen rather than display:none — some bots skip explicitly hidden
fields, and this one is meant to be filled in. */
.ees-trap {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}
.ees-form__note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.ees-form__note.is-ok { color: #1E7A4C; }
.ees-form__note.is-bad { color: #C0392B; }
.ees-form.is-sending { opacity: .6; pointer-events: none; }
.ees-alert {
padding: .9rem 1.15rem;
margin-bottom: 1.5rem;
border-left: 3px solid var(--ees-deep);
background: var(--ees-tint);
border-radius: 0 4px 4px 0;
font-size: .94rem;
}
.ees-alert--ok { border-left-color: #1E7A4C; color: #1E7A4C; }
.ees-alert--bad { border-left-color: #C0392B; color: #C0392B; }
/* ----------------------------------------------------------------- modal -- */
.ees-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: var(--ees-gutter);
opacity: 0;
visibility: hidden;
transition: opacity .25s var(--ees-ease), visibility .25s var(--ees-ease);
}
.ees-modal[hidden] { display: flex; }
.ees-modal.is-open { opacity: 1; visibility: visible; }
.ees-modal__veil {
position: absolute;
inset: 0;
background: rgba(0, 19, 41, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.ees-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(--ees-shadow-lg);
transform: translateY(14px) scale(.99);
transition: transform .3s var(--ees-ease);
}
.ees-modal.is-open .ees-modal__panel { transform: translateY(0) scale(1); }
.ees-modal__panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--ees-accent-metal);
border-radius: 10px 10px 0 0;
}
.ees-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(--ees-muted);
font-size: 1.55rem;
line-height: 1;
cursor: pointer;
transition: color .2s var(--ees-ease), border-color .2s var(--ees-ease);
}
.ees-modal__close:hover { color: var(--ees-deep); border-color: var(--ees-line); }
.ees-modal__head { margin-bottom: 1.6rem; text-align: center; }
.ees-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.ees-modal__lede { margin: 0; font-size: .94rem; color: var(--ees-muted); }
/* ---------------------------------------------------------------- closer -- */
.ees-closer {
position: relative;
padding-block: clamp(3.5rem, 7vw, 5.5rem);
background: var(--ees-deep);
color: rgba(255, 255, 255, .82);
text-align: center;
overflow: hidden;
}
.ees-closer::before {
content: '';
position: absolute;
top: -45%; left: 50%;
width: 44rem; height: 44rem;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(189, 195, 202, .17) 0%, transparent 62%);
pointer-events: none;
}
.ees-closer__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.ees-closer__title { color: #fff; }
.ees-closer__lede { color: rgba(255, 255, 255, .82); margin-inline: auto; margin-top: 1rem; }
.ees-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
/* ----------------------------------------------------------------- posts -- */
.ees-posts { display: grid; gap: 2.25rem; }
.ees-post { padding-bottom: 2.25rem; border-bottom: 1px solid var(--ees-line); }
.ees-post__date {
font-family: var(--ees-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ees-accent);
}
.ees-post__title { margin: .4rem 0 .6rem; }
.ees-post__excerpt { color: var(--ees-muted); margin: 0; }
.ees-backlink { margin-top: 2.5rem; font-family: var(--ees-display); font-weight: 400; }
.ees-pagination { margin-top: 2.75rem; }
.ees-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.ees-pagination .page-numbers {
padding: .5rem .9rem;
border: 1px solid var(--ees-line);
border-radius: 4px;
color: var(--ees-body);
font-size: .88rem;
}
.ees-pagination .page-numbers.current,
.ees-pagination .page-numbers:hover {
border-color: var(--ees-deep);
background: var(--ees-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(--ees-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(--ees-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--ees-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(--ees-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--ees-line); margin: 2rem 0; }
/* ---------------------------------------------------------------- reveal -- */
@media (prefers-reduced-motion: no-preference) {
html.js [data-ees-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity .7s var(--ees-ease), transform .7s var(--ees-ease);
}
html.js [data-ees-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) {
.ees-section { padding-block: clamp(3rem, 10vw, 4rem); }
.ees-card__body { padding: 1.15rem; }
.ees-service { padding: 1.6rem 1.3rem; }
.ees-listing__titles { flex-direction: column; align-items: flex-start; }
.ees-listing__price { text-align: left; }
}
body.admin-bar .ees-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ees-header { top: 46px; } }
/* -------------------------------------------------------- nav dropdowns -- */
.ees-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. */
.ees-nav__toggle {
display: inline-flex;
align-items: center;
padding: .25rem;
background: none;
border: 0;
color: var(--ees-ink);
cursor: pointer;
transition: transform .2s var(--ees-ease);
}
.ees-nav__item.is-open > .ees-nav__toggle { transform: rotate(180deg); }
.ees-nav__sub {
position: absolute;
top: 100%;
left: -1rem;
min-width: 15rem;
padding: .5rem 0;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 6px;
box-shadow: var(--ees-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .2s var(--ees-ease), transform .2s var(--ees-ease), visibility .2s var(--ees-ease);
z-index: 20;
}
.ees-nav__item:hover > .ees-nav__sub,
.ees-nav__item:focus-within > .ees-nav__sub,
.ees-nav__item.is-open > .ees-nav__sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ees-nav__sub a {
display: block;
padding: .55rem 1.1rem;
font-size: .78rem;
text-transform: none;
letter-spacing: .01em;
color: var(--ees-body);
}
.ees-nav__sub a::after { display: none; }
.ees-nav__sub a:hover { background: var(--ees-tint); color: var(--ees-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. */
.ees-drawer__nav .ees-nav__list { width: 100%; gap: 0; }
.ees-drawer__nav .ees-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(--ees-line);
}
.ees-drawer__nav .ees-nav__item > a {
grid-column: 2;
padding-block: 1rem;
font-size: 1.06rem;
text-align: center;
}
.ees-drawer__nav .ees-nav__item > a::after { display: none; }
/* The row is the control, so it should look like one under the finger. */
.ees-drawer__nav .ees-nav__item.has-children { cursor: pointer; }
.ees-drawer__nav .ees-nav__item.has-children:active { background: var(--ees-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. */
.ees-drawer__nav .ees-nav__toggle {
grid-column: 3;
display: inline-flex;
justify-content: center;
width: 3rem;
height: 3rem;
color: var(--ees-deep);
}
.ees-drawer__nav .ees-nav__sub {
grid-column: 1 / -1;
background: var(--ees-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(--ees-ease), opacity .2s var(--ees-ease), padding .3s var(--ees-ease);
}
.ees-drawer__nav .ees-nav__item.is-open > .ees-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;
}
.ees-drawer__nav .ees-nav__sub a {
padding: .55rem 0;
font-size: .95rem;
font-weight: 500;
text-align: center;
text-transform: none;
letter-spacing: 0;
color: var(--ees-body);
}
/* ----------------------------------------------------------- credentials -- */
/* White, not navy. It sat directly beneath a navy-scrimmed hero and the two ran
together as one undifferentiated slab of blue. */
.ees-creds { background: #fff; border-bottom: 1px solid var(--ees-line); }
.ees-creds__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(50%, 13rem), 1fr));
gap: 1px;
background: var(--ees-line);
}
.ees-creds__list li {
padding: 1.5rem 1.25rem;
background: #fff;
text-align: center;
}
.ees-creds__label {
display: block;
font-family: var(--ees-display);
font-size: 1.02rem;
font-weight: 400;
color: var(--ees-deep);
}
.ees-creds__note {
display: block;
margin-top: .3rem;
font-size: .82rem;
color: var(--ees-muted);
}
/* ----------------------------------------------------------------- paths -- */
.ees-paths {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ees-path {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 8px;
overflow: hidden;
transition: transform .28s var(--ees-ease), box-shadow .28s var(--ees-ease);
}
.ees-path:hover { transform: translateY(-4px); box-shadow: var(--ees-shadow-lg); }
.ees-path__media .ees-figure { border-radius: 0; }
.ees-path__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.ees-path__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.ees-path__text { color: var(--ees-muted); margin-bottom: 1.5rem; }
/* ----------------------------------------------------------------- creed -- */
.ees-creed__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.ees-creed__quote { margin: 0; }
.ees-creed__goal {
font-family: var(--ees-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;
}
.ees-creed__close {
font-size: clamp(1rem, .97rem + .3vw, 1.12rem);
color: var(--ees-accent-lt);
font-weight: 500;
}
.ees-creed__attrib {
margin-top: 1.25rem;
font-family: var(--ees-display);
font-size: .76rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
}
.ees-creed__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
margin-top: 2rem;
}
/* ------------------------------------------------------- valuation call -- */
.ees-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(--ees-tint);
border: 1px solid var(--ees-line);
border-left: 4px solid var(--ees-accent-mid);
border-radius: 8px;
}
@media (max-width: 820px) { .ees-valuecta { grid-template-columns: 1fr; } }
.ees-valuecta h2 { margin-bottom: .6rem; }
.ees-valuecta p { color: var(--ees-muted); margin: 0; }
.ees-valuecta__act { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.ees-valuecta__call {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: var(--ees-display);
font-weight: 400;
color: var(--ees-deep);
}
.ees-valuecta__call .ees-icon { color: var(--ees-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. */
.ees-steps--wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1120px) { .ees-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ees-steps--wide { grid-template-columns: 1fr; } }
.ees-quotes__more { margin-top: 2rem; text-align: center; }
/* Pillars sit on navy by default; this is the variant for a light band. */
.ees-pillars--light .ees-pillar {
background: #fff;
border-color: var(--ees-line);
}
.ees-pillars--light .ees-pillar__title { color: var(--ees-ink); }
.ees-pillars--light .ees-pillar__body { color: var(--ees-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.
*/
.ees-foot {
position: relative;
background: var(--ees-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. */
.ees-foot::before {
content: '';
position: absolute;
top: -70%; left: 50%;
width: 74rem; height: 52rem;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(189, 195, 202, .10) 0%, transparent 64%);
pointer-events: none;
}
.ees-foot__in {
position: relative;
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4.5vw, 68px);
padding-block: clamp(40px, 5vw, 60px);
}
.ees-foot__brand { flex: 1 1 300px; }
.ees-foot__col { flex: 0 1 190px; }
.ees-foot__brand .ees-logo { margin-bottom: .9rem; }
.ees-foot__brand .ees-logo__img { height: 64px; }
.ees-foot__name { margin: 0; font-family: var(--ees-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.ees-foot__firm {
margin: 2px 0 12px;
font-size: .7rem;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
/* --ees-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(--ees-brand-lt);
}
.ees-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }
.ees-foot__h {
margin: 0 0 12px;
font-family: var(--ees-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .45);
}
.ees-foot__menu { list-style: none; margin: 0; padding: 0; }
.ees-foot__menu a,
.ees-foot__link {
display: block;
padding: 4px 0;
color: rgba(255, 255, 255, .72);
text-decoration: none;
font-size: .92rem;
transition: color .18s var(--ees-ease);
}
.ees-foot__menu a:hover,
.ees-foot__link:hover { color: #fff; text-decoration: none; }
.ees-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.ees-foot__social { margin: 14px 0 0; font-size: .88rem; }
.ees-foot__social a { color: var(--ees-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. */
.ees-foot__legal {
position: relative;
border-top: 1px solid rgba(255, 255, 255, .09);
background: rgba(0, 0, 0, .18);
}
.ees-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.ees-foot__legal-in p { margin: 0 0 6px; }
.ees-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.ees-foot__legal-in a:hover { color: #fff; }
.ees-foot__legalnav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 10px 0; }
.ees-foot__legalnav a { text-decoration: underline; text-underline-offset: 2px; }
.ees-foot__eho { display: flex; align-items: center; gap: 8px; }
/* The Equal Housing mark is now real SVG geometry — see ees_eho_mark(). */
.ees-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. */
.ees-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) { .ees-searchband { margin-top: -1.5rem; } }
.ees-section--searchtop { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ees-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.ees-search {
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 10px;
box-shadow: var(--ees-shadow-lg);
}
.ees-search--page { box-shadow: var(--ees-shadow); }
.ees-search__row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: .75rem;
align-items: end;
}
@media (max-width: 900px) {
.ees-search__row { grid-template-columns: 1fr 1fr; }
.ees-search__field--wide { grid-column: 1 / -1; }
.ees-search__submit { grid-column: 1 / -1; }
}
.ees-search__field { display: grid; gap: .3rem; min-width: 0; }
.ees-search__field label {
font-family: var(--ees-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-search__field input,
.ees-search__field select {
width: 100%;
padding: .7rem .8rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 5px;
color: var(--ees-ink);
font-family: var(--ees-body-font);
font-size: .95rem;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
transition: border-color .2s var(--ees-ease), box-shadow .2s var(--ees-ease);
}
.ees-search__field select {
background-image:
linear-gradient(45deg, transparent 50%, var(--ees-deep) 50%),
linear-gradient(135deg, var(--ees-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;
}
.ees-search__field input:focus,
.ees-search__field select:focus {
border-color: var(--ees-deep-lt);
box-shadow: 0 0 0 3px rgba(154, 163, 173, .12);
outline: none;
}
.ees-search__submit .ees-btn { width: 100%; padding-block: .78rem; }
.ees-search__more { margin-top: .85rem; }
.ees-search__more summary {
display: inline-block;
font-family: var(--ees-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ees-deep-lt);
cursor: pointer;
list-style: none;
}
.ees-search__more summary::-webkit-details-marker { display: none; }
.ees-search__more summary::after { content: ' +'; }
.ees-search__more[open] summary::after { content: ' \2013'; }
.ees-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(--ees-line-soft);
}
/* ------------------------------------------------------------------ creed -- */
.ees-creed__call {
display: inline-flex;
align-items: center;
gap: .5rem;
color: rgba(255, 255, 255, .86);
font-size: .98rem;
}
.ees-creed__call strong { color: var(--ees-accent-lt); }
.ees-creed__call:hover { color: #fff; }
.ees-creed__call .ees-icon { color: var(--ees-accent-lt); }
.ees-glyph { color: var(--ees-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(). */
.ees-slider__controls { display: flex; align-items: center; gap: .5rem; }
.ees-slider__btn {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 50%;
color: var(--ees-deep);
cursor: pointer;
transition: background .2s var(--ees-ease), border-color .2s var(--ees-ease), opacity .2s var(--ees-ease);
}
.ees-slider__btn:hover { background: var(--ees-deep); border-color: var(--ees-deep); color: #fff; }
.ees-slider__btn[disabled] { opacity: .35; cursor: default; }
.ees-slider__btn[disabled]:hover { background: #fff; border-color: var(--ees-line); color: var(--ees-deep); }
.ees-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;
}
.ees-slider__track::-webkit-scrollbar { height: 6px; }
.ees-slider__track::-webkit-scrollbar-thumb { background: var(--ees-line); border-radius: 6px; }
.ees-slider__track::-webkit-scrollbar-track { background: transparent; }
.ees-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) {
.ees-slider__track {
grid-auto-columns: 78vw;
margin-inline: calc(var(--ees-gutter) * -1);
padding-inline: 11vw;
scroll-padding-inline: 11vw;
}
.ees-slider__slide { scroll-snap-align: center; }
}
.ees-slider__slide .ees-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. */
.ees-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 --ees-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.
*/
.ees-home .ees-hero { margin-top: calc(var(--ees-header-h) * -1); }
.ees-home .ees-hero__inner { padding-top: var(--ees-header-h); }
.ees-home .ees-header__bar {
background: rgba(255, 255, 255, var(--ees-shrink));
border-bottom-color: rgba(225, 230, 237, var(--ees-shrink));
}
/* The light state: only while over the photograph. */
.ees-home .ees-header:not(.is-solid) .ees-nav__list > li > a,
.ees-home .ees-header:not(.is-solid) .ees-nav__toggle,
.ees-home .ees-header:not(.is-solid) .ees-callnow {
color: #fff;
}
.ees-home .ees-header:not(.is-solid) .ees-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. */
.ees-home .ees-header:not(.is-solid) .ees-nav__list > li > a::after { background: #fff; }
.ees-header .ees-nav__list > li > a,
.ees-header .ees-nav__toggle,
.ees-header .ees-callnow { transition: color .28s var(--ees-ease); }
/* The submenu panel is its own white surface and is never part of the swap. */
.ees-home .ees-nav__sub a { color: var(--ees-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.
*/
.ees-header__actions .ees-btn--sm { transition: background .28s var(--ees-ease), border-color .28s var(--ees-ease); }
.ees-home .ees-header:not(.is-solid) .ees-header__actions .ees-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. */
.ees-logo { position: relative; }
.ees-logo__img--light {
position: absolute;
inset-block-start: 0;
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity .28s var(--ees-ease);
}
.ees-home .ees-header:not(.is-solid) .ees-logo__img--light { opacity: 1; }
/* No JS: .is-solid is never added and --ees-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) .ees-home .ees-hero { margin-top: 0; }
html:not(.js) .ees-home .ees-hero__inner { padding-top: 0; }
html:not(.js) .ees-home .ees-header__bar { background: #fff; }
html:not(.js) .ees-logo__img--light { display: none; }
.ees-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.
*/
.ees-modal__panel--sm { max-width: 34rem; }
.ees-note__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.6rem;
}
.ees-note__actions .ees-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.
*/
.ees-agentfacts {
display: grid;
gap: .85rem 2rem;
margin: 1.75rem 0 0;
padding: 1.25rem 0 0;
border-top: 1px solid var(--ees-line);
}
@media (min-width: 560px) {
.ees-agentfacts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.ees-agentfacts dt {
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-agentfacts dd {
margin: .3rem 0 0;
font-family: var(--ees-display);
font-size: 1.02rem;
color: var(--ees-ink);
/* Licence numbers and long emails must not push the column open. */
overflow-wrap: anywhere;
}
.ees-agentfacts a { color: var(--ees-accent); }
.ees-agentfacts a:hover { text-decoration: underline; }
.ees-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. */
.ees-agentcard__initials--lg {
border-radius: 8px;
font-size: clamp(3.5rem, 9vw, 6rem);
letter-spacing: .04em;
}
/* ------------------------------------------------- review attribution -- */
.ees-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. */
.ees-gmark {
width: 1em;
height: 1em;
flex-shrink: 0;
/* The optical centre of the G sits slightly above the text baseline. */
transform: translateY(.04em);
}
.ees-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.
*/
.ees-slider--team .ees-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }
@media (min-width: 900px) {
.ees-slider--team .ees-slider__track { grid-auto-columns: calc((100% - 5rem) / 5); }
}
.ees-agentcard {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 8px;
overflow: hidden;
color: inherit;
transition: transform .25s var(--ees-ease), box-shadow .25s var(--ees-ease), border-color .25s var(--ees-ease);
}
.ees-agentcard:hover {
transform: translateY(-4px);
border-color: var(--ees-brand-lt);
box-shadow: var(--ees-shadow);
}
.ees-agentcard__photo { position: relative; background: var(--ees-sky); }
/* The monogram, for anyone whose headshot has not arrived. */
.ees-agentcard__initials {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
font-family: var(--ees-display);
font-size: 2.4rem;
color: var(--ees-brand);
background: var(--ees-sky);
}
.ees-agentcard__body { padding: .95rem 1rem 1.15rem; }
.ees-agentcard__name {
display: block;
font-family: var(--ees-display);
font-size: 1.12rem;
line-height: 1.2;
color: var(--ees-ink);
}
.ees-agentcard__role {
display: block;
margin-top: .3rem;
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-agentcard:hover .ees-agentcard__name { color: var(--ees-accent); }
/* --------------------------------------------------------------- filters -- */
.ees-filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--ees-line);
}
.ees-filter {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .9rem;
background: #fff;
border: 1px solid var(--ees-line);
border-radius: 999px;
color: var(--ees-body);
font-family: var(--ees-display);
font-size: .78rem;
font-weight: 400;
transition: background .2s var(--ees-ease), border-color .2s var(--ees-ease), color .2s var(--ees-ease);
}
.ees-filter:hover { border-color: var(--ees-deep); color: var(--ees-deep); }
.ees-filter.is-on {
background: var(--ees-deep);
border-color: var(--ees-deep);
color: #fff;
}
.ees-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(--ees-tint-2);
color: var(--ees-muted);
font-size: .68rem;
}
.ees-filter.is-on .ees-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. */
.ees-figure--square { aspect-ratio: 1 / 1; }
.ees-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. */
.ees-figure--empty.ees-figure--wide,
.ees-figure--empty.ees-figure--hero,
.ees-figure--empty.ees-figure--square { min-height: 0; }
.ees-listing__repd {
margin: 0 0 .4rem;
font-family: var(--ees-display);
font-size: .74rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ees-accent);
}
/* ------------------------------------------------------- hero phone, card -- */
.ees-hero__phone {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.35rem;
font-family: var(--ees-display);
font-size: 1.15rem;
font-weight: 400;
color: #fff;
}
.ees-hero__phone .ees-icon { color: var(--ees-accent-lt); }
.ees-hero__phone:hover { color: var(--ees-accent-lt); }
.ees-hero__phone + .ees-hero__note { margin-top: .5rem; }
/* The representation line is the reason a sold listing is worth showing. */
.ees-card__repd {
margin-bottom: .5rem;
font-family: var(--ees-display);
font-size: .68rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ees-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. */
.ees-callnow { display: none; }
@media (max-width: 1040px) {
.ees-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(--ees-accent-lt);
background-image: none;
border-color: var(--ees-accent-lt);
color: var(--ees-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;
}
.ees-callnow:hover {
background: var(--ees-accent-mid);
background-image: none;
border-color: var(--ees-accent-mid);
color: var(--ees-deep);
box-shadow: none;
}
/* The brand navy, so it picks up the logo sitting beside it. */
.ees-callnow .ees-icon { color: var(--ees-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. */
.ees-callnow span { display: none; }
.ees-callnow { padding: 0; width: 44px; height: 44px; }
}
.ees-hero__phone strong { color: var(--ees-accent-lt); font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
.ees-hero__phone { font-size: 1.02rem; align-items: flex-start; }
.ees-hero__phone .ees-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) {
.ees-team { grid-template-columns: 1fr 1fr; }
.ees-team .ees-member:first-child { grid-column: 1 / -1; }
.ees-team .ees-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. */
.ees-team .ees-member:nth-child(2):last-child {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
}
.ees-member__license {
margin: .75rem 0 0;
font-family: var(--ees-display);
font-size: .7rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-faint);
}
/* A card with no bio should sit tight rather than leave the gap the bio left. */
.ees-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. */
.ees-section--flush { padding-bottom: 0; }
.ees-head--tight { margin-bottom: 0; }
/* ------------------------------------------------------- listing address plate --
Stands in for the listing photo. See ees_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. */
.ees-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, #113545 0%, var(--ees-deep) 55%, #0D2733 100%);
}
.ees-plate__addr {
font-family: var(--ees-display);
font-size: clamp(1.05rem, 1.9vw, 1.45rem);
font-weight: 400;
line-height: 1.25;
color: #fff;
text-wrap: balance;
}
.ees-plate__rule {
width: 42px;
height: 2px;
background: var(--ees-accent);
}
.ees-plate__city {
font-family: var(--ees-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. */
.ees-figure--hero.ees-plate { min-height: clamp(15rem, 34vw, 26rem); }
.ees-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. */
.ees-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.
*/
.ees-search--hero {
background: rgba(255, 255, 255, .52);
border-color: rgba(255, 255, 255, .65);
box-shadow:
0 18px 44px rgba(0, 19, 41, .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);
}
.ees-search--hero .ees-search__field label { color: var(--ees-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.
*/
.ees-search--hero .ees-search__field input,
.ees-search--hero .ees-search__field select {
background: #fff;
border-color: rgba(0, 19, 41, .14);
}
.ees-search--hero .ees-search__field input::placeholder { color: var(--ees-faint); }
.ees-search--hero .ees-search__more summary { color: var(--ees-body); }
.ees-search--hero .ees-search__more summary:hover { color: var(--ees-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))) {
.ees-search--hero { background: rgba(255, 255, 255, .88); }
}
/* The disclosure and the result line. */
.ees-search__more { margin-top: .8rem; }
.ees-search__more summary {
font-family: var(--ees-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ees-muted);
cursor: pointer;
}
.ees-search__row--more {
grid-template-columns: repeat(3, 1fr);
margin-top: .75rem;
}
@media (max-width: 900px) { .ees-search__row--more { grid-template-columns: 1fr 1fr; } }
.ees-search__result {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .75rem;
margin: 1rem 0 0;
font-size: .95rem;
color: var(--ees-body);
}
.ees-search__clear {
font-family: var(--ees-display);
font-size: .72rem;
font-weight: 400;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ees-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 .ees-market--noshape and
* simply centre their caption. That has to look deliberate, because on a cold
* cache it is what every card looks like.
*/
.ees-markets__grid {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
}
/* Six areas, not the parent's eight: three across, so the grid closes without a ragged row. */
@media (min-width: 1041px) { .ees-markets__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1040px) { .ees-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .ees-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }
.ees-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(--ees-white);
border: 1px solid var(--ees-line);
border-radius: 14px;
text-align: center;
text-decoration: none;
transition: border-color .22s var(--ees-ease), transform .22s var(--ees-ease), box-shadow .22s var(--ees-ease);
}
.ees-market__link:hover {
border-color: var(--ees-accent);
transform: translateY(-3px);
box-shadow: 0 16px 34px -20px rgba(16, 10, 12, .4);
}
.ees-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. */
.ees-market__shape .ees-shape { width: 100%; height: 100%; display: block; }
.ees-market__shape .ees-shape path {
fill: var(--ees-accent);
opacity: .16;
transition: opacity .22s var(--ees-ease);
}
.ees-market__link:hover .ees-shape path { opacity: .34; }
.ees-market__name {
font-family: var(--ees-display);
font-size: 1.2rem;
line-height: 1.15;
color: var(--ees-ink);
}
.ees-market__note {
color: var(--ees-muted);
font-size: .82rem;
line-height: 1.45;
}
.ees-market__cta {
margin-top: .55rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ees-accent);
opacity: 0;
transform: translateY(3px);
transition: opacity .22s var(--ees-ease), transform .22s var(--ees-ease);
}
.ees-market__link:hover .ees-market__cta,
.ees-market__link:focus-visible .ees-market__cta { opacity: 1; transform: none; }
/* Keep the caption vertically centred when there is no shape to sit under. */
.ees-market--noshape .ees-market__link { justify-content: center; padding-block: 2.25rem; }
/* ================================================================ pair === */
.ees-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);
}
.ees-pair__photo img { display: block; width: 100%; height: auto; }
.ees-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) { .ees-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.ees-pair__name { margin: 0 0 .15rem; font-family: var(--ees-display); font-size: 1.5rem; color: var(--ees-ink); }
.ees-pair__role {
margin: 0 0 .7rem;
font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--ees-accent);
}
.ees-pair__bio { margin: 0 0 .9rem; color: var(--ees-body); font-size: .95rem; }
.ees-pair__more {
font-size: .82rem; font-weight: 600; color: var(--ees-accent); text-decoration: none;
}
.ees-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.
*/
.ees-burger {
width: 44px;
height: 44px;
padding: 0;
display: none;
place-items: center;
border-radius: 6px;
border: 1px solid rgba(0, 19, 41, .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(--ees-ease), border-color .25s var(--ees-ease),
transform .18s var(--ees-ease);
}
@media (max-width: 1040px) { .ees-burger { display: grid; } }
/* A press that answers. Nothing else in the masthead moves on tap. */
.ees-burger:active { transform: scale(.94); }
.ees-burger__box { width: 18px; }
.ees-burger__box i { height: 1.5px; border-radius: 1px; }
.ees-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.
*/
.ees-home .ees-header:not(.is-solid) .ees-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))) {
.ees-burger { background: rgba(255, 255, 255, .92); }
.ees-home .ees-header:not(.is-solid) .ees-burger { background: rgba(0, 19, 41, .42); }
}
/* The X state fills in, so the control that closes the drawer is unmistakably
the live one while the drawer is open. */
.ees-burger[aria-expanded="true"],
.ees-home .ees-header:not(.is-solid) .ees-burger[aria-expanded="true"] {
background: var(--ees-accent-mid);
border-color: var(--ees-accent-mid);
box-shadow: none;
}
.ees-burger[aria-expanded="true"] .ees-burger__box i,
.ees-home .ees-header:not(.is-solid) .ees-burger[aria-expanded="true"] .ees-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.
*/
.ees-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(--ees-ease),
visibility .3s var(--ees-ease),
transform .42s cubic-bezier(.16, .84, .32, 1);
}
.ees-drawer.is-open { transform: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ees-drawer { background: rgba(255, 255, 255, .97); }
}
/* Resting state of every row: down and out. */
.ees-drawer__nav .ees-nav__item,
.ees-drawer__foot > * {
opacity: 0;
transform: translateY(14px);
transition:
opacity .34s var(--ees-ease),
transform .44s cubic-bezier(.16, .84, .32, 1);
}
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item,
.ees-drawer.is-open .ees-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. */
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(1) { transition-delay: .06s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(2) { transition-delay: .115s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(3) { transition-delay: .17s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(4) { transition-delay: .225s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(5) { transition-delay: .28s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(6) { transition-delay: .335s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(7) { transition-delay: .39s; }
.ees-drawer.is-open .ees-drawer__nav .ees-nav__item:nth-child(n+8) { transition-delay: .445s; }
.ees-drawer.is-open .ees-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.ees-drawer.is-open .ees-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. */
.ees-drawer:not(.is-open) .ees-drawer__nav .ees-nav__item,
.ees-drawer:not(.is-open) .ees-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) {
.ees-drawer,
.ees-drawer.is-open,
.ees-drawer__nav .ees-nav__item,
.ees-drawer__foot > * {
transform: none;
transition-duration: .01ms;
transition-delay: 0s !important;
}
.ees-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 ees-locked, which the enquiry modal also sets --
* that one opens over a dark scrim where the light logo is correct.
*/
body.ees-nav-open .ees-logo__img--light,
body.ees-nav-open.ees-home .ees-header:not(.is-solid) .ees-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.
*/
.ees-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(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-dune) 100%);
box-shadow: inset 0 0 0 1px rgba(0, 19, 41, .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.
*/
.ees-btn--accent {
background: linear-gradient(135deg, var(--ees-coral-dk) 0%, var(--ees-coral-br) 58%, var(--ees-coral) 100%);
border-color: transparent;
color: #fff;
}
.ees-btn--accent:hover {
background: linear-gradient(135deg, var(--ees-coral-dk) 0%, var(--ees-coral-br) 58%, var(--ees-coral) 100%);
filter: brightness(1.07);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 26px -12px rgba(42, 95, 168, .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. */
.ees-foot::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
z-index: 2;
background: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-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. */
.ees-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-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. */
.ees-eyebrow:not(.ees-eyebrow--light) { color: var(--ees-brand); }
.ees-nav__list > li > a::after { background: var(--ees-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. */
.ees-hero::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 5px;
z-index: 3;
background: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-dune) 100%);
}
/* One red button state, on the primary call to action only. */
.ees-btn--accent:hover {
background: var(--ees-red);
border-color: var(--ees-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. */
.ees-split__media--portrait { max-width: 24rem; margin-inline: auto; }
.ees-figure--portrait { aspect-ratio: auto; }
.ees-figure--portrait img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
border-radius: 12px;
}
@media (max-width: 900px) {
.ees-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. */
.ees-foot__firmmark {
display: block;
width: auto;
max-width: 220px;
height: auto;
margin-top: 1.5rem;
opacity: .92;
}
@media (max-width: 560px) { .ees-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.
*/
.ees-hero__poster,
.ees-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
.ees-hero__video {
opacity: 0;
transition: opacity .9s var(--ees-ease);
pointer-events: none;
}
.ees-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) {
.ees-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.
*/
.ees-callbar {
position: fixed;
right: clamp(.9rem, 2vw, 1.5rem);
bottom: clamp(.9rem, 2vw, 1.5rem);
z-index: 80;
}
.ees-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(0, 19, 41, .55), 0 2px 6px rgba(0, 19, 41, .16);
text-decoration: none;
overflow: hidden;
transition: transform .22s var(--ees-ease), box-shadow .22s var(--ees-ease);
}
.ees-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(0, 19, 41, .6); }
/* The flag band, along the bottom edge of the pill. */
.ees-callbar__call::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-dune) 100%);
}
.ees-callbar__ico {
display: grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--ees-red);
color: #fff;
}
.ees-callbar__ico svg { width: 17px; height: 17px; }
.ees-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.ees-callbar__txt strong {
font-family: var(--ees-display);
font-size: .95rem;
font-weight: 400;
color: var(--ees-brand);
}
.ees-callbar__txt em {
font-style: normal;
font-size: .82rem;
font-weight: 600;
color: var(--ees-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.
*/
.ees-header__actions .ees-callnow { display: none; }
.ees-header__inner { gap: .75rem; }
/*
* Size the logo through the tokens, not with height:auto.
*
* The height is a calc that interpolates on --ees-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 { --ees-logo-max: 44px; --ees-logo-min: 30px; }
.ees-logo--header .ees-logo__img { max-width: 52vw; }
}
/* ------------------------------------------- drawer: is-open, and only that --
*
* `.ees-nav__item:focus-within > .ees-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.
*/
.ees-drawer__nav .ees-nav__item:hover > .ees-nav__sub,
.ees-drawer__nav .ees-nav__item:focus-within > .ees-nav__sub {
opacity: 0;
max-height: 0;
padding-bottom: 0;
}
.ees-drawer__nav .ees-nav__item.is-open > .ees-nav__sub,
.ees-drawer__nav .ees-nav__item.is-open:hover > .ees-nav__sub,
.ees-drawer__nav .ees-nav__item.is-open:focus-within > .ees-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.
*/
.ees-section--dark {
background: linear-gradient(168deg, var(--ees-surf-pale) 0%, var(--ees-shell) 46%, var(--ees-sand) 100%);
color: var(--ees-body);
position: relative;
}
.ees-section--dark::before,
.ees-section--dark::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-dune) 100%);
}
.ees-section--dark::before { top: 0; }
.ees-section--dark::after { bottom: 0; }
.ees-section--dark h1,
.ees-section--dark h2,
.ees-section--dark h3 { color: var(--ees-ink); }
/* The creed sat white-on-near-black. Same hierarchy, inverted. */
.ees-creed__goal { color: var(--ees-ink); }
.ees-creed__close { color: var(--ees-brand); font-weight: 600; }
.ees-creed__attrib { color: var(--ees-muted); }
.ees-creed__call { color: var(--ees-body); }
.ees-creed__call strong,
.ees-creed__call .ees-icon { color: var(--ees-brand); }
.ees-creed__call:hover { color: var(--ees-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%.
*/
.ees-market:nth-child(-n+4) .ees-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, var(--ees-surf-pale) 100%);
border-color: #D1DADE;
}
.ees-market:nth-child(n+5) .ees-market__link {
background: linear-gradient(180deg, #FFFFFF 0%, #EAEFF6 100%);
border-color: #EED0CA;
}
/* 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. */
.ees-market__link { position: relative; overflow: hidden; }
.ees-market__link::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}
.ees-market:nth-child(-n+4) .ees-market__link::before { background: var(--ees-surf); }
.ees-market:nth-child(n+5) .ees-market__link::before { background: var(--ees-sand-dp); }
.ees-market:nth-child(-n+4) .ees-market__link:hover { border-color: var(--ees-surf-dk); }
.ees-market:nth-child(n+5) .ees-market__link:hover { border-color: var(--ees-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. */
.ees-market:nth-child(-n+4) .ees-market__shape svg * { fill: var(--ees-surf); opacity: .5; }
.ees-market:nth-child(n+5) .ees-market__shape svg * { fill: var(--ees-sand-dp); opacity: .62; }
/* ------------------------------------------------- the closer, also light --
*
* Same call as .ees-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.
*/
.ees-closer {
background: linear-gradient(168deg, var(--ees-surf-pale) 0%, var(--ees-shell) 52%, var(--ees-sand) 100%);
color: var(--ees-body);
border-top: 4px solid transparent;
border-image: linear-gradient(90deg,
var(--ees-brand) 0%, var(--ees-brand) 25%,
var(--ees-surf) 25%, var(--ees-surf) 50%,
var(--ees-coral) 50%, var(--ees-coral) 75%,
var(--ees-dune) 75%, var(--ees-dune) 100%) 1;
}
.ees-closer::before {
background: radial-gradient(circle, rgba(154, 163, 173, .16) 0%, transparent 62%);
}
.ees-closer__title { color: var(--ees-ink); }
.ees-closer__lede { color: var(--ees-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.ees-closer .ees-eyebrow { color: var(--ees-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.
*/
.ees-foot__h { color: rgba(255, 255, 255, .62); }
.ees-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }
/* The floating call pill's number sat on --ees-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. */
.ees-callbar__txt em { color: var(--ees-coral-dk); }
/* The closer's secondary button was .ees-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. */
.ees-closer .ees-btn--ghost-light {
border-color: var(--ees-brand);
color: var(--ees-brand);
}
.ees-closer .ees-btn--ghost-light:hover {
background: var(--ees-brand);
border-color: var(--ees-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. */
.ees-foot__addr { text-wrap: balance; }
/* The licence line under an agent's name was --ees-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. */
.ees-member__license { color: var(--ees-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. */
.ees-split__media--team { max-width: none; width: 100%; }
.ees-figure--team {
aspect-ratio: auto;
margin: 0;
padding: 1.5rem 1rem 0;
border-radius: 16px;
background: linear-gradient(180deg, var(--ees-shell) 0%, var(--ees-tint-2) 100%);
overflow: hidden;
position: relative;
}
.ees-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. */
.ees-split__media--scene { max-width: none; width: 100%; }
.ees-figure--scene {
aspect-ratio: 4 / 3;
margin: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--ees-shadow-lg);
}
.ees-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figures set large; word labels untouched. */
.ees-creds__label--num {
font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
line-height: 1;
letter-spacing: -.01em;
color: var(--ees-brand);
}
.ees-creds__label--num + .ees-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(). */
.ees-split__media--square { max-width: 22rem; margin-inline: auto; }
.ees-split__media--square .ees-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .ees-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.
*/
.ees-tone--brand { --tone: var(--ees-brand); --tone-pale: var(--ees-brand-pale); }
.ees-tone--coral { --tone: var(--ees-coral); --tone-pale: var(--ees-coral-pale); }
.ees-tone--surf { --tone: var(--ees-surf-dk); --tone-pale: var(--ees-surf-pale); }
.ees-tone--dune { --tone: var(--ees-dune-dk); --tone-pale: var(--ees-dune-pale); }
.ees-feat__note { max-width: 44rem; margin: 2.25rem auto 0; text-align: center; color: var(--ees-muted); font-size: .95rem; }
/* journey: a line that draws, stops that pop in turn */
.ees-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.ees-journey::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--ees-brand), var(--ees-coral), var(--ees-dune), var(--ees-surf)); transform-origin: left center; }
.ees-journey__stop { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.ees-journey__dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--ees-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); }
.ees-journey__when { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 600; margin-top: .35rem; }
.ees-journey__label { font-family: var(--ees-display); font-size: 1.3rem; line-height: 1.15; color: var(--ees-ink); font-weight: 400; }
.ees-journey__body { color: var(--ees-body); font-size: .95rem; line-height: 1.55; }
/* bento: coloured tiles, one big counting number */
.ees-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ees-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(--ees-ease), box-shadow .35s var(--ees-ease); }
.ees-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.ees-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--ees-shadow-lg); }
.ees-bento__tile--wide { grid-column: span 2; }
.ees-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.ees-bento__tile--big::after { display: none; }
.ees-bento__tile--big .ees-bento__title, .ees-bento__tile--big .ees-bento__body { color: #fff; }
.ees-bento__big { display: block; font-family: var(--ees-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.ees-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone); font-weight: 700; margin-bottom: .9rem; }
.ees-bento__title { font-family: var(--ees-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--ees-ink); font-weight: 400; }
.ees-bento__body { margin: 0; color: var(--ees-body); font-size: .95rem; line-height: 1.55; }
/* split: two panels facing each other */
.ees-splitfeat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.ees-splitfeat__panel { border-radius: 20px; padding: 2rem 1.9rem; background: var(--tone-pale); border-top: 5px solid var(--tone); }
.ees-splitfeat__eye { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tone); }
.ees-splitfeat__title { font-family: var(--ees-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: .35rem 0 .7rem; color: var(--ees-ink); font-weight: 400; }
.ees-splitfeat__body { color: var(--ees-body); margin: 0 0 1rem; }
.ees-splitfeat__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ees-splitfeat__points li { position: relative; padding-left: 1.4rem; color: var(--ees-body); }
.ees-splitfeat__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone); }
.ees-splitfeat__join { align-self: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ees-ink); color: #fff; font-family: var(--ees-display); font-size: 1.25rem; }
/* timeline: years down a drawn line */
.ees-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.ees-timeline::before { content: ""; position: absolute; left: 6.2rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, var(--ees-brand), var(--ees-coral), var(--ees-dune), var(--ees-surf)); transform-origin: top center; }
.ees-timeline__item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 2.2rem; padding-block: .9rem; position: relative; }
.ees-timeline__item::before { content: ""; position: absolute; left: 5.85rem; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--ees-white); border: 3px solid var(--tone); }
.ees-timeline__when { text-align: right; font-family: var(--ees-display); font-size: 1.6rem; line-height: 1.2; color: var(--tone); }
.ees-timeline__card strong { display: block; font-family: var(--ees-display); font-weight: 400; font-size: 1.3rem; color: var(--ees-ink); margin-bottom: .25rem; }
.ees-timeline__card p { margin: 0; color: var(--ees-body); }
@media (max-width: 900px) {
.ees-journey { grid-template-columns: 1fr; gap: 1.4rem; padding-left: .2rem; }
.ees-journey::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 3px; height: auto; transform-origin: top center; }
.ees-journey__stop { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
.ees-journey__stop > :not(.ees-journey__dot) { grid-column: 2; }
.ees-journey__dot { grid-row: span 3; }
.ees-bento { grid-template-columns: 1fr 1fr; }
.ees-splitfeat { grid-template-columns: 1fr; }
.ees-splitfeat__join { justify-self: center; }
}
@media (max-width: 560px) {
.ees-bento { grid-template-columns: 1fr; }
.ees-bento__tile--wide { grid-column: auto; }
.ees-timeline::before { left: 4.4rem; }
.ees-timeline__item { grid-template-columns: 3.6rem 1fr; gap: 1.6rem; }
.ees-timeline__item::before { left: 4.05rem; }
.ees-timeline__when { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: no-preference) {
html.js .ees-journey::before { transform: scaleX(0); transition: transform 1.4s var(--ees-ease) .15s; }
html.js .ees-journey.is-in::before { transform: scaleX(1); }
html.js .ees-journey .ees-journey__stop { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ees-ease), transform .6s var(--ees-ease); transition-delay: calc(.25s + var(--i) * .18s); }
html.js .ees-journey.is-in .ees-journey__stop { opacity: 1; transform: none; }
html.js .ees-journey .ees-journey__dot { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .18s); }
html.js .ees-journey.is-in .ees-journey__dot { transform: none; }
html.js .ees-timeline::before { transform: scaleY(0); transition: transform 1.6s var(--ees-ease) .1s; }
html.js .ees-timeline.is-in::before { transform: scaleY(1); }
html.js .ees-timeline .ees-timeline__item { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--ees-ease), transform .6s var(--ees-ease); transition-delay: calc(.2s + var(--i) * .2s); }
html.js .ees-timeline.is-in .ees-timeline__item { opacity: 1; transform: none; }
html.js .ees-splitfeat__panel[data-ees-reveal] { transform: translateX(calc((var(--i) * 2 - 1) * 28px)); }
html.js .ees-splitfeat__panel[data-ees-reveal].is-in { transform: none; }
html.js .ees-splitfeat__join[data-ees-reveal] { transform: scale(.3) rotate(-90deg); transition-delay: .35s; }
html.js .ees-splitfeat__join[data-ees-reveal].is-in { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
html.js .ees-journey::before { transform: scaleY(0); }
html.js .ees-journey.is-in::before { transform: scaleY(1); }
}
/* long reviews: the first 46 words, and the rest in place (never cut off) */
.ees-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ees-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ees-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) {
.ees-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ees-bento:has(> :nth-child(4):last-child) .ees-bento__tile--wide { grid-column: auto; }
}
/* ======================================================================
* Community guides, the hub and the outline cards — the SEO build
* (Adam, 2026-09-16). Ported from themes/jose-aquino; every card and banner
* carries the area's real boundary (data/areas/.json) instead of a
* photograph, drawn in the logo's navy over a silver wash.
* ==================================================================== */
.ees-places {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
@media (max-width: 1040px) { .ees-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ees-places { grid-template-columns: 1fr; } }
.ees-place__link {
display: flex;
flex-direction: column;
height: 100%;
background: var(--ees-white);
border: 1px solid var(--ees-line);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
transition: transform .25s var(--ees-ease), box-shadow .25s var(--ees-ease), border-color .25s var(--ees-ease);
}
.ees-place__link:hover,
.ees-place__link:focus-visible { transform: translateY(-4px); box-shadow: var(--ees-shadow-lg); border-color: var(--ees-coral); }
/* The outline: navy fill with a hairline stroke, on a silver-to-white wash with
a faint survey grid, so the shape reads as a map and not a blob. */
.ees-place__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
max-width: 100%;
overflow: hidden;
background:
linear-gradient(var(--ees-line-soft) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(90deg, var(--ees-line-soft) 1px, transparent 1px) 0 0 / 22px 22px,
radial-gradient(120% 90% at 50% 40%, var(--ees-white) 0%, var(--ees-surf-pale) 100%);
border-bottom: 1px solid var(--ees-line);
}
.ees-place__media .ees-shape {
width: 62%;
height: 78%;
overflow: visible;
filter: drop-shadow(0 6px 10px rgba(0, 42, 92, .18));
transition: transform .5s var(--ees-ease);
}
.ees-place__media .ees-shape path {
fill: var(--ees-brand);
fill-opacity: .88;
stroke: var(--ees-coral);
stroke-width: .9;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.ees-place__link:hover .ees-place__media .ees-shape { transform: scale(1.05) rotate(-1deg); }
.ees-place__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1.15rem 1.3rem 1.35rem; }
.ees-place__eyebrow {
font-size: .66rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-place__name {
font-family: var(--ees-display);
font-size: 1.45rem;
line-height: 1.15;
color: var(--ees-deep);
}
.ees-place__note { font-size: .9rem; line-height: 1.5; color: var(--ees-muted); }
.ees-place__cta {
margin-top: auto;
padding-top: .6rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ees-coral);
}
.ees-markets__all { margin: 2.25rem 0 0; text-align: center; }
.ees-section--flush-bottom { padding-bottom: 0; }
.ees-cbanner {
position: relative;
overflow: hidden;
padding-block: clamp(3rem, 7vw, 5.5rem);
background: linear-gradient(180deg, var(--ees-tint) 0%, var(--ees-white) 100%);
border-bottom: 1px solid var(--ees-line);
}
.ees-cbanner__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.ees-cbanner--shape .ees-cbanner__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 900px) { .ees-cbanner--shape .ees-cbanner__in { grid-template-columns: 1fr; } }
.ees-cbanner__text { max-width: 46rem; }
.ees-cbanner__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.06; }
.ees-cbanner__map {
margin: 0;
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
max-width: 100%;
padding: 8%;
border-radius: 22px;
border: 1px solid var(--ees-line);
background:
linear-gradient(var(--ees-line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(90deg, var(--ees-line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
radial-gradient(110% 90% at 50% 40%, var(--ees-white) 0%, var(--ees-surf-pale) 100%);
box-shadow: var(--ees-shadow-lg);
}
.ees-cbanner__map .ees-shape { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 42, 92, .22)); }
.ees-cbanner__map .ees-shape path {
fill: var(--ees-brand);
fill-opacity: .9;
stroke: var(--ees-coral);
stroke-width: 1.4;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.ees-cbanner__map figcaption {
align-self: end;
margin-top: 1rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ees-muted);
text-align: center;
}
@media (max-width: 900px) { .ees-cbanner__map { max-width: 20rem; margin-inline: auto; } }
.ees-crumb a { color: var(--ees-brand); }
.ees-csplit {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
@media (max-width: 900px) { .ees-csplit { grid-template-columns: 1fr; } }
.ees-csplit__body p { margin-bottom: 1.15rem; }
.ees-csplit__body .ees-btn { margin-top: 1rem; }
.ees-cfacts {
padding: clamp(1.5rem, 2.6vw, 2rem);
background: var(--ees-brand-pale);
border: 1px solid var(--ees-line);
border-top: 4px solid var(--ees-brand);
border-radius: 12px;
}
.ees-cfacts__h {
margin: 0 0 1.1rem;
font-family: var(--ees-body-font);
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ees-brand);
}
.ees-cfacts dl { margin: 0; }
.ees-cfacts__row { padding: .85rem 0; border-bottom: 1px solid var(--ees-line); }
.ees-cfacts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ees-cfacts dt {
margin-bottom: .3rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ees-muted);
}
.ees-cfacts dd { margin: 0; color: var(--ees-ink); font-size: .95rem; line-height: 1.45; }
.ees-cfaq { display: grid; gap: .75rem; margin-top: 2rem; }
.ees-cfaq__item {
padding: 1rem 1.25rem;
background: var(--ees-white);
border: 1px solid var(--ees-line);
border-radius: 10px;
}
.ees-cfaq__item summary { cursor: pointer; font-family: var(--ees-display); font-size: 1.2rem; color: var(--ees-deep); }
.ees-cfaq__item p { margin: .75rem 0 0; color: var(--ees-body); }
.ees-foot__h a { color: inherit; text-decoration: none; }
.ees-foot__h a:hover,
.ees-foot__h a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ees-foot__menu--areas { columns: 2; column-gap: 1.5rem; }
.ees-foot__menu--areas li { break-inside: avoid; }
.ees-listing__guide { margin: 1.75rem 0 0; font-weight: 600; }
.ees-listing__guide a { color: var(--ees-coral); text-underline-offset: 3px; }
/* Hub groups hold differing counts: a group of 4 goes 2 x 2 and a group of 2
sits side by side, so no lone card hangs under a row of three. */
@media (min-width: 1041px) {
.ees-places:has(> li:nth-child(4):last-child),
.ees-places:has(> li:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 60rem;
}
}
/* On a phone a card becomes a row: the outline as a square thumbnail, name,
one line. */
@media (max-width: 620px) {
.ees-places { gap: .6rem; }
.ees-place__link {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
align-items: stretch;
border-radius: 12px;
}
.ees-place__media { aspect-ratio: 1 / 1; height: 100%; border-bottom: 0; border-right: 1px solid var(--ees-line); }
.ees-place__media .ees-shape { width: 70%; height: 70%; }
.ees-place__body { gap: .15rem; padding: .7rem .85rem .75rem; justify-content: center; }
.ees-place__eyebrow { display: none; }
.ees-place__name { font-size: 1.12rem; }
.ees-place__note {
font-size: .8rem;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.ees-place__cta { display: none; }
}
/* The agent portal's sign-in link (bb-agent-portal), quiet in the legal strip. */
.ees-foot__portal { margin: 0; }
.ees-foot__portal .bbap-footer-link { color: inherit; opacity: .75; font-size: .78rem; text-underline-offset: 3px; }
.ees-foot__portal .bbap-footer-link:hover,
.ees-foot__portal .bbap-footer-link:focus-visible { opacity: 1; }