/* =====================================================================
STATIC SITE TEMPLATE — STYLESHEET
---------------------------------------------------------------------
Ships with just the foundation: design tokens, a minimal reset, and
the styles for the "Coming Soon" home page. Everything else is
per-project — build out CSS as you build the site.
Replace the tokens in :root with the client brand palette during
Phase 4 of NEW_PROJECT_SETUP.md. Validate WCAG AA contrast on every
new color combination — see conventions/accessibility.md.
===================================================================== */
/* =========================================================
TOKENS — design system variables
Replace these with the client brand palette once locked.
========================================================= */
:root{
/* Surfaces */
--bg: #FFFFFF; /* page background */
--surface: #FAFAFA; /* banner / accent surface */
/* Brand (placeholders — replace) */
--brand-primary: #111111; /* primary brand color */
--brand-accent: #555555; /* accent (hover, secondary CTAs) */
--brand-red: #8f0b09; /* deep red from the logo (eyebrows, accents) */
/* Text */
--ink: #111111; /* primary text */
--ink-soft: #555555; /* secondary text, labels */
/* Lines */
--rule: rgba(0,0,0,.10);
--rule-strong: rgba(0,0,0,.18);
/* Type stacks — branded fonts loaded async in the page
(Cormorant Garamond for display serif, Montserrat for UI sans).
The *-Fallback faces below are metric-matched stand-ins, NOT extra downloads —
they must sit ahead of the raw system stacks so the swap costs no layout shift. */
--serif: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
--sans: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Body copy — one size for every paragraph of running text on the service
pages (and the About/Reviews sections that share those components), so
nothing reads a step larger or smaller than the copy beside it. The Build
Phases cards are the deliberate exception and set their own smaller size. */
--body: clamp(14px, 1.05vw, 15px);
/* Layout */
--maxw: 1440px;
--gut: clamp(20px, 4vw, 56px);
}
/* =========================================================
FONT FALLBACK METRICS
=========================================================
The webfonts load async (non-render-blocking, per conventions/performance.md),
so the page first paints in a system font and then swaps. Cormorant Garamond is
~11% NARROWER than Georgia and Montserrat is ~10% WIDER than Arial, so that swap
re-wrapped every heading and paragraph and shoved the page around — measured 0.50
CLS on /reviews, where a tall widget below the fold amplified it.
These faces download nothing: `src: local(...)` just re-describes a font already
on the machine, with its metrics overridden to match the webfont's. The fallback
then occupies the same space as the real face, so the swap is invisible to layout
and CLS from font loading goes to ~0.
Percentages measured with canvas TextMetrics at 100px against the real webfonts.
Recompute if either family changes. */
@font-face{
font-family: "Cormorant Fallback";
src: local("Georgia");
size-adjust: 88.59%;
ascent-override: 103.85%;
descent-override: 32.74%;
line-gap-override: 0%;
}
@font-face{
font-family: "Montserrat Fallback";
src: local("Arial");
size-adjust: 110.23%;
ascent-override: 87.99%;
descent-override: 22.68%;
line-gap-override: 0%;
}
/* =========================================================
RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth; /* animate in-page anchor jumps (Explore, nav links) */
scroll-padding-top: clamp(70px, 8vw, 96px); /* keep targets clear of the fixed header */
}
@media (prefers-reduced-motion: reduce){
html { scroll-behavior: auto; }
}
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-accent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 600; margin: 0; }
/* =========================================================
VIEW TRANSITIONS — cross-document (multi-page) navigation
---------------------------------------------------------
`navigation: auto` opts every same-origin page-to-page nav into an
animated transition. Progressive enhancement: browsers without support
just navigate normally (no JS, no payload). Honors prefers-reduced-motion.
The nav bar is a shared element, so it stays locked in place while the
page content slides + fades in beneath it (an app-like "push"). A plain
crossfade reads as almost nothing between similar pages — this is the
version people actually notice.
========================================================= */
@view-transition{ navigation: auto; }
/* Persistent nav bar: lifted out of the page snapshot so it holds steady
(and smoothly morphs its transparent/solid state) across navigations. */
.site-header{ view-transition-name: site-header; }
/* Page content: the outgoing page lifts up and fades away while the incoming
page rises from below and fades in — clearly visible, not a faint dissolve. */
::view-transition-old(root){ animation: vt-leave .34s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root){ animation: vt-enter .5s cubic-bezier(.2, .65, .25, 1) both; }
@keyframes vt-leave{ to { opacity: 0; transform: translateY(-26px); } }
@keyframes vt-enter{ from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){ animation: none !important; } /* instant cut, no motion */
}
/* =========================================================
COMING SOON page (body.coming-soon)
========================================================= */
body.coming-soon {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: clamp(24px, 6vw, 64px);
text-align: center;
}
body.coming-soon main {
max-width: 56ch;
margin: auto 0;
}
body.coming-soon .eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 24px;
}
body.coming-soon h1 {
font-size: clamp(40px, 8vw, 84px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 0 20px;
}
body.coming-soon .lede {
font-family: var(--serif);
font-size: clamp(18px, 2.2vw, 22px);
color: var(--ink-soft);
margin: 0 0 16px;
}
body.coming-soon .contact {
font-size: 16px;
color: var(--ink-soft);
margin-top: 24px;
}
/* Coming Soon footer */
.cs-foot {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--rule);
width: 100%;
max-width: 56ch;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-soft);
text-align: center;
}
.cs-foot p { margin: 0; }
.cs-foot a { color: inherit; }
/* =========================================================
HEADER / NAV (transparent over hero → solid on scroll)
========================================================= */
.site-header{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: background-color .35s ease, box-shadow .35s ease, color .35s ease;
color: #fff;
}
.nav-inner{
max-width: var(--maxw);
margin: 0 auto;
padding: clamp(8px, 1.2vw, 15px) var(--gut);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: padding .6s ease-in-out;
}
/* Brand logo */
.brand{ display: inline-flex; align-items: center; line-height: 0; flex: none; }
.brand-logo{ height: clamp(64px, 7vw, 92px); width: auto; display: block; transition: height .6s ease-in-out; }
.brand-logo--dark{ display: none; }
/* Swap to the color logo once the header goes solid (white logo would vanish) */
.site-header.is-scrolled .brand-logo--light{ display: none; }
.site-header.is-scrolled .brand-logo--dark{ display: block; }
/* Primary nav links */
.nav-links{ display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav-links a{
color: inherit;
text-decoration: none;
font-family: var(--sans);
font-weight: 500;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
position: relative;
padding: 6px 0;
}
.nav-links a::after{
content: "";
position: absolute; left: 0; bottom: 0;
width: 100%; height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.nav-links a:hover{ color: inherit; }
.nav-links a:hover::after{ transform: scaleX(1); }
/* Call-now CTA.
Over the hero (transparent header): outlined pill inheriting white.
On the scrolled/solid header: solid dark-red pill with white text. */
.nav-links .nav-cta{
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 22px;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: inherit;
letter-spacing: .1em;
white-space: nowrap;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.nav-links .nav-cta::after{ display: none; }
.nav-links .nav-cta:hover{ background: #fff; color: var(--ink); border-color: #fff; }
.site-header.is-scrolled .nav-links .nav-cta{
background: var(--brand-red);
border-color: var(--brand-red);
color: #fff;
}
.site-header.is-scrolled .nav-links .nav-cta:hover{ background: #74100e; border-color: #74100e; color: #fff; }
/* Legibility over the bright sky while the header is transparent.
Dropped once the header goes solid (.is-scrolled). */
.site-header:not(.is-scrolled) .nav-links a{ text-shadow: 0 1px 16px rgba(0,0,0,.38); }
.site-header:not(.is-scrolled) .menu-btn,
.site-header:not(.is-scrolled) .brand-logo--light{ filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
/* Scrolled state — solid header with dark ink */
.site-header.is-scrolled{
background: var(--bg);
color: var(--ink);
box-shadow: 0 1px 0 var(--rule), 0 10px 30px rgba(0,0,0,.06);
}
/* Compress the header once scrolled further down (JS adds .is-compact past a
larger threshold) to free up viewport for content. The color/logo swap above
happens earlier, on .is-scrolled — these two states are decoupled. */
.site-header.is-compact .nav-inner{ padding-top: 12px; padding-bottom: 12px; }
.site-header.is-compact .brand-logo{ height: clamp(50px, 5.2vw, 66px); }
/* Hamburger (hidden on desktop) */
.menu-btn{
display: none;
/* Buttons don't inherit color from the UA stylesheet, so the bars' currentColor
would resolve to black instead of tracking the header's white → ink swap. */
color: inherit;
background: none; border: 0; padding: 8px; cursor: pointer;
width: 44px; height: 44px;
flex-direction: column; justify-content: center; gap: 6px;
}
.menu-bar{
display: block; height: 2px; width: 26px;
background: currentColor;
transition: transform .3s ease, opacity .3s ease;
}
/* Services dropdown (nav) */
.nav-dd{ position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle{
color: inherit; background: none; border: 0; cursor: pointer;
font-family: var(--sans); font-weight: 500; font-size: 13px;
letter-spacing: .16em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 0;
}
.nav-dd-caret{ transition: transform .25s ease; }
.nav-dd.is-open .nav-dd-caret{ transform: rotate(180deg); }
.site-header:not(.is-scrolled) .nav-dd-toggle{ text-shadow: 0 1px 16px rgba(0,0,0,.38); }
.nav-dd-menu{ list-style: none; margin: 0; background: var(--bg); color: var(--ink); }
.nav-dd-menu a{
display: block; color: var(--ink); text-decoration: none;
font-family: var(--sans); font-weight: 500; font-size: 12px;
letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.nav-dd-menu a::after{ display: none; }
@media (min-width: 901px){
.nav-dd-menu{
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 232px; padding: 8px 0;
border: 1px solid var(--rule);
box-shadow: 0 18px 44px rgba(0,0,0,.14);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 50;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.is-open .nav-dd-menu{
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dd:hover .nav-dd-caret{ transform: rotate(180deg); }
.nav-dd-menu a{ padding: 11px 22px; }
.nav-dd-menu a:hover{ background: #f4f1ee; color: var(--brand-red); }
}
/* =========================================================
TYPOGRAPHY UTILITIES
========================================================= */
/* Cormorant defaults to old-style figures, which suit the serif numerals we set
in it, but its old-style 1 is a short serifed stroke that reads as a Roman
numeral I. Wrap just the 1 in this class to swap that one glyph for a lining
figure: switching a whole numeral to lining would give it a cap-height zero
that the numerals beside it do not have.
A lining figure is cap-height, so at full size the 1 would tower over its own
old-style zero. Cormorant inks old-style figures at ~25.5px where cap-height
is ~40.7px, so .63em brings the lining 1 back to the height of the digits it
sits beside. Both glyphs sit on the baseline, so no other nudging is needed.
Used by .bphase-num (new construction) and .stl-num (sellers). Numerals in the
mono stack do not need this — mono digits are already lining. */
.fig-one{
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: .63em;
}
/* =========================================================
HERO
========================================================= */
.hero{
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 120px var(--gut) 96px;
overflow: hidden;
}
/* Background slideshow + darkening scrim for legible overlay text */
.hero-slides{
position: absolute; inset: 0; z-index: 0;
/* LQIP: a 24px blurred preview of the first (LCP) slide, inlined so it paints
instantly with zero network. Fills the grey-under-scrim gap while the full
hero image downloads; the real ![]()
paints on top and covers it. */
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAEAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAEAAYAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACQkJCQkJEAkJEBYQEBAWHhYWFhYeJh4eHh4eJi4mJiYmJiYuLi4uLi4uLjc3Nzc3N0BAQEBASEhISEhISEhISP/bAEMBCwwMEhESHxERH0szKjNLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS//dAAQAAv/aAAwDAQACEQMRAD8AddG0uY1aR/NcD73fnoeK5vUNKluWhmt+VYupL8YK9c1XtNZs4xtaNx0wQR26cHjirzayJfundySA/HJ/Ssp1K1nHl0IjCnfmkYdhos1xI0zANAjYYg4znkVs/wBj6f8A881/M0lrrNxpkMlusayebt3fKSPl6Y6Uf8JHN/z6r+VHvdg93uf/2Q==");
background-size: cover;
background-position: center;
}
.hero-slide{
position: absolute; inset: 0;
opacity: 0;
transition: opacity 1.4s ease-in-out;
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-slide img{ width: 100%; height: 100%; object-fit: cover; }
/* Ken Burns: the active slide slowly zooms/pans while it's shown.
Alternating per slide — odd slides (1,3,5) zoom out, even slides (2,4) zoom in.
Each slide's RESTING transform equals its animation END state, so when the
slide loses .is-active mid-crossfade the image holds position instead of
snapping back. Animation length matches the 5s display so the zoom completes
right as the slide hands off. */
.hero-slide:nth-child(even) img{ transform: scale(1.11) translate(-1.4%, -1%); } /* zoom-in end */
.hero-slide:nth-child(odd) img{ transform: scale(1.02); } /* zoom-out end */
.hero-slide.is-active img{ animation: hero-kb-in 5s linear both; }
.hero-slide:nth-child(odd).is-active img{ animation-name: hero-kb-out; }
@keyframes hero-kb-in{
from{ transform: scale(1.02); }
to{ transform: scale(1.11) translate(-1.4%, -1%); }
}
@keyframes hero-kb-out{
from{ transform: scale(1.11) translate(-1.4%, -1%); }
to{ transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
.hero-slide img{ transform: none !important; }
.hero-slide.is-active img{ animation: none; }
}
.hero::before{
content: "";
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,.40) 32%, rgba(17,17,17,.42) 60%, rgba(17,17,17,.70) 100%),
linear-gradient(0deg, rgba(17,17,17,.30), rgba(17,17,17,.30));
}
.hero-content{ position: relative; z-index: 2; max-width: min(94vw, 1060px); }
.hero-title{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(38px, 5.4vw, 72px);
line-height: 1.06;
letter-spacing: .005em;
margin: 0;
text-shadow: 0 2px 40px rgba(0,0,0,.35);
text-wrap: balance;
}
.hero-sub{
font-family: var(--sans);
font-weight: 500;
font-size: clamp(12px, 1.5vw, 15px);
letter-spacing: .28em;
text-transform: uppercase;
margin: 22px 0 0;
opacity: .94;
}
/* CTA buttons */
.hero-cta{
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: clamp(28px, 4vw, 44px);
}
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-weight: 500;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none;
padding: 18px 34px;
/* --btn-fill (set per variant) sweeps in from the left on hover via
background-size, painting over the resting background-color underneath. */
--btn-fill: var(--brand-red);
background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: background-size .28s ease, color .28s ease, border-color .3s ease;
}
.btn:hover,
.btn:focus-visible{ background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce){
.btn, .btn-pill{ transition-property: color, border-color; } /* fill snaps, no sweep */
}
.btn-outline{
--btn-fill: var(--brand-red);
color: #fff;
border: 1px solid rgba(255,255,255,.75);
background-color: transparent;
}
.btn-outline:hover,
.btn-outline:focus-visible{ color: #fff; border-color: var(--brand-red); }
/* Solid white button that flips to brand red on hover (hero "Find Homes") */
.btn-solid{
--btn-fill: var(--brand-red);
color: var(--ink);
background-color: #fff;
border: 1px solid #fff;
}
.btn-solid:hover,
.btn-solid:focus-visible{ color: #fff; border-color: var(--brand-red); }
/* Scroll cue */
.hero-scroll{
position: absolute; z-index: 2;
left: 50%; bottom: 34px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 12px;
color: #fff; text-decoration: none;
}
.hero-scroll-label{
font-family: var(--sans); font-weight: 500;
font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .85;
animation: hero-scroll-glow 3.2s ease-in-out infinite;
}
.hero-scroll-line{
position: relative; overflow: hidden;
width: 1px; height: 44px; background: rgba(255,255,255,.6);
}
.hero-scroll-line::after{
content: ""; position: absolute; left: 0; top: -100%;
width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
animation: hero-scroll-shine 3.2s ease-in-out infinite;
}
.hero-scroll:hover{ color: #fff; }
.hero-scroll:hover .hero-scroll-label{ opacity: 1; }
@keyframes hero-scroll-glow{
0%, 100% { opacity: .75; text-shadow: 0 0 0 rgba(255,255,255,0); }
50% { opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,.8); }
}
@keyframes hero-scroll-shine{
0% { top: -100%; }
65%, 100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce){
.hero-scroll-label{ animation: none; }
.hero-scroll-line::after{ animation: none; content: none; }
}
/* =========================================================
MOBILE (≤ 900px) — collapse nav into slide-down panel
========================================================= */
@media (max-width: 900px){
.menu-btn{ display: flex; }
.nav-links{
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: var(--bg);
color: var(--ink);
padding: 8px var(--gut) 20px;
box-shadow: 0 12px 30px rgba(0,0,0,.10);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.nav-links a{
color: var(--ink);
width: 100%;
padding: 16px 0;
border-bottom: 1px solid var(--rule);
font-size: 14px;
}
.nav-links a::after{ display: none; }
/* Mobile menu panel is always white, so keep the CTA solid red here. */
.nav-links .nav-cta,
.site-header:not(.is-scrolled) .nav-links .nav-cta{
width: auto;
margin-top: 18px;
padding: 14px 26px;
font-size: 14px;
background: var(--brand-red);
border-color: var(--brand-red);
color: #fff;
}
/* Services dropdown collapses into an inline accordion inside the panel. */
.nav-dd{ width: 100%; display: block; }
.nav-dd-toggle{
width: 100%; justify-content: space-between;
color: var(--ink); padding: 16px 0; font-size: 14px;
letter-spacing: .16em; border-bottom: 1px solid var(--rule);
text-shadow: none;
}
.nav-dd-menu{ max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.nav-dd.is-open .nav-dd-menu{ max-height: 420px; }
.nav-dd-menu a{
padding: 14px 0 14px 18px; font-size: 13px;
border-bottom: 1px solid var(--rule);
}
.nav-dd-menu a:hover{ color: var(--brand-red); }
#nav[data-open="true"] .nav-links{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Open state: turn hamburger into an X */
#nav[data-open="true"] .menu-bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
#nav[data-open="true"] .menu-bar:nth-child(2){ opacity: 0; }
#nav[data-open="true"] .menu-bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
}
/* =========================================================
SHARED LAYOUT + BUTTON VARIANTS
========================================================= */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section-title{
font-family: var(--serif);
font-weight: 400;
font-size: clamp(26px, 3.6vw, 44px);
line-height: 1.08;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Solid/outlined dark button (on light backgrounds) */
.btn-dark{
--btn-fill: var(--ink);
color: var(--ink);
border: 1px solid var(--ink);
background-color: transparent;
}
.btn-dark:hover,
.btn-dark:focus-visible{ color: #fff; }
/* =========================================================
TRACK RECORD (STATS) — centered intro + 3 figures on dark
========================================================= */
.stats{ background: var(--ink); color: #fff; padding-block: clamp(52px, 6vw, 84px); }
.stats-head{ text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 3.6vw, 48px); }
.stats-head .section-title{ margin: 0; }
.stats-sub{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: rgba(255,255,255,.72);
margin: clamp(16px, 2vw, 22px) auto 0;
max-width: 72ch;
}
.stats-grid{
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(32px, 4vw, 48px);
text-align: center;
}
.stat{ display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Hover: the stat lifts and both lines firm up a touch. The extra .stats-grid
scope outranks the scroll-reveal `.reveal-armed.is-revealed{ transform:none }`
these stats carry (they're reveal-group children), so the lift isn't cancelled. */
.stats-grid .stat{ transition: transform .35s cubic-bezier(.2,.65,.25,1), opacity .8s ease; }
.stats-grid .stat:hover{ transform: translateY(-8px); }
.stat:hover .stat-num{ font-weight: 600; }
.stat:hover .stat-label{ font-weight: 600; }
.stat-num, .stat-label{ transition: font-weight .35s ease; }
@media (prefers-reduced-motion: reduce){
.stats-grid .stat{ transition: none; }
.stats-grid .stat:hover{ transform: none; }
}
.stat-num{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.1;
letter-spacing: .02em;
text-transform: uppercase;
text-wrap: balance;
}
.stat-label{
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
}
@media (max-width: 760px){
.stats-grid{ grid-template-columns: 1fr; gap: clamp(36px, 8vw, 48px); }
}
/* =========================================================
MEET OUR TEAM — full-bleed image + bio copy split layout
========================================================= */
.team{ background: var(--bg); padding-block: clamp(56px, 8vw, 120px); }
.team-inner{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.team-media{
position: relative;
min-height: 100%;
overflow: hidden;
background: var(--surface);
}
.team-media picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.team-media img{ width: 100%; height: 100%; object-fit: cover; }
.team-content{
display: flex;
flex-direction: column;
justify-content: center;
padding-block: clamp(56px, 7vw, 116px);
padding-inline: clamp(28px, 5vw, 88px) var(--gut);
max-width: 760px;
overflow: hidden; /* clips the eyebrow's slide-in so it can't add a scrollbar */
}
.team-eyebrow{
display: flex;
align-items: center;
gap: 22px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--brand-red);
margin: 0 0 clamp(16px, 2vw, 24px);
}
.team-eyebrow::after{
content: "";
width: clamp(40px, 5vw, 72px);
height: 1px;
background: var(--brand-red);
flex: none;
}
/* --- Eyebrow reveal-on-scroll (armed by site.js; direction set per eyebrow) ---
Only the .is-armed class (added by JS) applies the hidden start state, so
without JS / under reduced motion the eyebrows simply show. */
.team-eyebrow, .nbhd-eyebrow, .cta-eyebrow{
transition: opacity 1.1s ease .5s, transform 1.3s cubic-bezier(.2,.65,.25,1) .5s;
}
.team-eyebrow.is-armed, .cta-eyebrow.is-armed{ opacity: 0; transform: translateX(48px); } /* enter from the right */
.nbhd-eyebrow.is-armed{ opacity: 0; transform: translateX(-48px); } /* enter from the left */
.team-eyebrow.is-armed.is-in,
.nbhd-eyebrow.is-armed.is-in,
.cta-eyebrow.is-armed.is-in{ opacity: 1; transform: none; }
/* Services eyebrow: fade only (centered with rules both sides, so no slide) */
.svc-eyebrow{ transition: opacity 1.3s ease .5s; }
.svc-eyebrow.is-armed{ opacity: 0; }
.svc-eyebrow.is-armed.is-in{ opacity: 1; }
/* --- Scroll reveal (Phase 2) ----------------------------------------------
Whisper-subtle fade + gentle rise as section content enters view. JS adds
.reveal-armed to [data-reveal] elements and to the direct children of
[data-reveal-group] (staggered via an inline transition-delay), so no-JS and
reduced-motion visitors just see the content. Transform/opacity only; each
element reveals once, then is unobserved. */
.reveal-armed{
opacity: 0;
transform: translateY(16px);
transition: opacity .8s ease, transform .9s cubic-bezier(.2,.65,.25,1);
}
.reveal-armed.is-revealed{ opacity: 1; transform: none; }
/* Buttons reveal as a pure fade — opacity only, 1s duration, .5s delay —
so every CTA on the page shares one consistent entrance. */
.btn.reveal-armed, .btn-pill.reveal-armed{
transform: none;
/* Keep the reveal fade AND the hover fill sweep — a bare `transition: opacity`
here would drop the background-size transition and kill the hover fill. */
transition: opacity 1s ease .5s, background-size .28s ease, color .28s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce){
.reveal-armed,
.btn.reveal-armed, .btn-pill.reveal-armed{ opacity: 1; transform: none; transition: none; }
}
/* --- Hero entrance (Phase 2) -----------------------------------------------
One-time staggered rise on load. Defined in render-blocking head CSS so the
hidden start state is present on first paint (no flash), unlike the JS-armed
reveals. */
@keyframes hero-rise{
from{ opacity: 0; transform: translateY(20px); }
to{ opacity: 1; transform: none; }
}
@keyframes btn-fade{
from{ opacity: 0; }
to{ opacity: 1; }
}
.hero-title{ animation: hero-rise .9s cubic-bezier(.2,.65,.25,1) both; }
.hero-sub{ animation: hero-rise .9s cubic-bezier(.2,.65,.25,1) .14s both; }
/* Hero buttons: pure fade, 1s duration, .5s delay — matches the CTA fade below the fold. */
.hero-cta{ animation: btn-fade 1s ease .5s both; }
@media (prefers-reduced-motion: reduce){
.hero-title, .hero-sub, .hero-cta{ animation: none; }
}
.team-title{ margin: 0 0 clamp(22px, 2.6vw, 34px); } /* size/weight inherited from .section-title */
.team-body p{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.85;
color: var(--ink-soft);
margin: 0 0 1.4em;
max-width: 60ch;
}
.team-body p:last-child{ margin-bottom: 0; }
/* Pill button with trailing rule */
.btn-pill{
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 20px;
margin-top: clamp(32px, 4vw, 52px);
padding: 17px 34px;
border: 1px solid var(--ink);
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
/* Fill sweeps in from the left on hover (see .btn for the mechanism). */
--btn-fill: var(--ink);
background-color: transparent;
background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 100%;
transition: background-size .28s ease, color .28s ease, border-color .3s ease;
}
.btn-pill:hover,
.btn-pill:focus-visible{ background-size: 100% 100%; color: #fff; border-color: var(--ink); }
.btn-pill-arrow{ width: 26px; height: 10px; flex: none; color: currentColor; }
@media (max-width: 900px){
.team-inner{ grid-template-columns: 1fr; }
.team-media{ min-height: 0; aspect-ratio: 4 / 3; }
.team-content{ max-width: none; padding-inline: var(--gut); }
}
/* =========================================================
TESTIMONIALS — dark red gradient banner, crossfading quotes
========================================================= */
.tst{
/* Diagonal dark-red gradient: muted warm edge easing into the deep brand red. */
background: linear-gradient(115deg, #4a2f30 0%, #6e1512 52%, var(--brand-red) 100%);
color: #fff;
padding-block: clamp(40px, 5.5vw, 76px) clamp(20px, 2.6vw, 34px);
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate; /* local stacking context so the particle layers sit under content */
}
/* --- Floating dot field ------------------------------------------------------
Each dot is its own element, NOT a tiled background layer. Tiled layers were
the previous approach and they cannot look haphazard: every dot in a layer
belongs to one rigid sheet, so the whole field slides as a unit and reads as
marching in unison no matter how the path is tuned. Independent elements are
the only way to get dots that wander separately.
Every dot carries its own position, size, opacity, blur, three drift
waypoints, duration and phase, authored in the markup as custom properties
(randomness generated once, not at runtime). The delays are NEGATIVE, which is
what does the real work: each dot starts partway through its own cycle, so
nothing ever begins together, and drift and twinkle run on separate clocks so
a dot's fade is unrelated to its travel.
Purely decorative: aria-hidden, pointer-events:none, behind the content. */
.tst-dots{
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* One dial for the whole field's drift speed. Each dot's --dur is authored in
the markup; this scales all of them at once, so the pace can be tuned
without regenerating (and reshuffling) every dot. Higher = slower. */
--slow: 1.4;
}
.tst-dots i{
position: absolute;
left: var(--l);
top: var(--t);
width: var(--s);
height: var(--s);
border-radius: 50%;
background: rgba(255,255,255,var(--o));
filter: blur(var(--b));
animation:
tstFloat calc(var(--dur) * var(--slow)) ease-in-out infinite var(--delay),
tstTwinkle var(--tw) ease-in-out infinite var(--twd);
}
/* One shared keyframe, parameterised per dot. Each waypoint is an independent
direction, so dots do not share an axis of travel. Returns to origin at 100%
so the loop is seamless. */
@keyframes tstFloat{
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(var(--x1), var(--y1), 0); }
50% { transform: translate3d(var(--x2), var(--y2), 0); }
75% { transform: translate3d(var(--x3), var(--y3), 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes tstTwinkle{
0%, 100% { opacity: .25; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.tst-dots i{ animation: none; }
}
.tst-inner{ max-width: none; position: relative; z-index: 1; } /* content above the particles */
.tst-title{
color: #fff;
margin: 0 0 clamp(22px, 2.8vw, 38px);
text-shadow: 0 2px 18px rgba(0,0,0,.22);
}
/* Quote row: arrows flank a centered track that spans ~80% of the width. */
.tst-viewport{
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 3vw, 40px);
}
/* Circular side arrows, tuned for the dark gradient (light on translucent). */
.tst-arrow{
flex: none;
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.45);
border-radius: 50%;
background: transparent;
color: #fff;
cursor: pointer;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.tst-arrow:hover{ background: #fff; color: var(--brand-red); border-color: #fff; }
/* All quotes occupy the same grid cell and stack; the track sizes to the
tallest quote so crossfading between different lengths doesn't jump. */
.tst-track{ display: grid; flex: 0 1 80%; }
.tst-item{
grid-area: 1 / 1;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease;
}
.tst-item.is-active{ opacity: 1; visibility: visible; }
.tst-quote{
font-family: var(--serif);
font-weight: 400;
font-size: clamp(19px, 2.1vw, 27px);
line-height: 1.5;
letter-spacing: .01em;
color: rgba(255,255,255,.94);
margin: 0 auto;
max-width: 100%;
}
.tst-author{
display: block;
margin-top: clamp(16px, 1.8vw, 24px);
font-family: var(--serif);
font-style: italic;
font-size: clamp(15px, 1.3vw, 19px);
color: rgba(255,255,255,.82);
}
/* Segmented timeline: the page width split into equal thirds, each a thin,
fully-rounded bar. The active third fills solid white. */
.tst-timeline{
display: flex;
gap: clamp(8px, 1vw, 14px);
margin-top: clamp(52px, 7.5vw, 104px); /* drops the bars toward the section's bottom edge */
}
.tst-step{
flex: 1;
display: flex;
align-items: center;
padding: 11px 0; /* generous tap target; the visible bar stays thin */
border: 0;
background: transparent;
cursor: pointer;
}
.tst-step::before{
content: "";
display: block;
width: 100%;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,.28);
transition: background-color .3s ease;
}
.tst-step:hover::before{ background: rgba(255,255,255,.5); }
.tst-step.is-active::before{ background: #fff; }
/* "See All Reviews" CTA below the timeline */
.tst-cta{ margin-top: clamp(30px, 3.4vw, 46px); }
/* On the dark-red testimonials band, this CTA flips to solid white with dark
text on hover (overrides the shared .btn-outline maroon hover). */
.tst-cta{ --btn-fill: #fff; }
.tst-cta:hover,
.tst-cta:focus-visible{ color: var(--ink); border-color: #fff; }
@media (prefers-reduced-motion: reduce){
.tst-item{ transition: none; }
}
/* On narrow screens the arrows would squeeze the text; shrink and hug edges. */
@media (max-width: 640px){
.tst-viewport{ gap: 8px; }
.tst-arrow{ width: 40px; height: 40px; }
.tst-track{ flex-basis: 100%; }
}
/* =========================================================
NEIGHBORHOODS — intro + clickable list drives an image filmstrip
========================================================= */
.nbhd{ padding-block: clamp(72px, 10vw, 130px); background: var(--bg); }
/* Top row: eyebrow + heading on the left, circular nav on the right */
.nbhd-head{
display: flex;
align-items: flex-end; /* drop the arrows to the bottom of the header, near the images */
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(12px, 1.4vw, 18px);
}
.nbhd-intro{ overflow: hidden; } /* clips the eyebrow's slide-in so it can't add a scrollbar */
.nbhd-eyebrow{
display: flex;
align-items: center;
gap: 22px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--brand-red);
margin: 0 0 clamp(14px, 1.8vw, 22px);
}
.nbhd-eyebrow::before{
content: "";
width: clamp(40px, 5vw, 72px);
height: 1px;
background: var(--brand-red);
flex: none;
}
.nbhd-title{ margin: 0; }
/* Circular prev / next controls */
.nbhd-controls{ display: flex; align-items: center; gap: 14px; flex: none; }
.nbhd-nav{
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--rule-strong);
border-radius: 50%;
background: transparent;
color: var(--ink);
transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.nbhd-nav:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
.nbhd-nav[disabled]{ opacity: .35; cursor: default; }
.nbhd-nav[disabled]:hover{ background: transparent; color: var(--ink); border-color: var(--rule-strong); }
/* Body: list column + filmstrip column */
.nbhd-body{
display: grid;
grid-template-columns: minmax(240px, 340px) 1fr;
column-gap: clamp(32px, 5vw, 80px);
align-items: start;
}
/* Left: intro list + view-all */
.nbhd-aside{ display: flex; flex-direction: column; }
.nbhd-list{ list-style: none; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0; }
.nbhd-list li{ border-bottom: 1px solid var(--rule); }
.nbhd-pick{
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: clamp(15px, 1.5vw, 20px) 2px;
background: none; border: 0;
font-family: var(--sans);
font-weight: 500;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
text-align: left;
transition: color .25s ease;
}
.nbhd-pick:hover{ color: var(--brand-red); }
.nbhd-pick-chevron{ flex: none; opacity: 0; transition: opacity .25s ease; }
.nbhd-pick.is-active{ color: var(--brand-red); }
.nbhd-pick.is-active .nbhd-pick-chevron{ opacity: 1; }
/* Active row reads as boxed: add the top border its list divider doesn't provide */
.nbhd-list li:has(.nbhd-pick.is-active){ border-top: 1px solid var(--ink); border-bottom-color: var(--ink); }
/* Right: horizontal filmstrip of tall image slides */
.nbhd-track{
--gap: clamp(16px, 2vw, 28px);
list-style: none; margin: 0; padding: 0;
display: flex; gap: var(--gap);
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nbhd-track::-webkit-scrollbar{ display: none; }
@media (hover: hover) and (pointer: fine){
.nbhd-track{ cursor: grab; }
.nbhd-track img{ -webkit-user-drag: none; user-select: none; }
.nbhd-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.nbhd-track.is-dragging .nbhd-slide-media img{ transition: none; }
}
.nbhd-slide{
flex: 0 0 clamp(300px, 40vw, 460px);
scroll-snap-align: start;
}
.nbhd-slide-link{ position: relative; display: block; text-decoration: none; color: #fff; }
.nbhd-slide-media{
position: relative;
display: block;
aspect-ratio: 5 / 6;
overflow: hidden;
background: var(--surface);
}
.nbhd-slide-media::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17,17,17,.10) 0%, rgba(17,17,17,.32) 100%);
transition: background .5s ease;
}
/* Deepen the overlay on hover/focus so the centered label stays legible as the
image zooms. Darkest around the label (middle) and base. */
.nbhd-slide-link:hover .nbhd-slide-media::after,
.nbhd-slide-link:focus-visible .nbhd-slide-media::after{
background: linear-gradient(180deg, rgba(17,17,17,.30) 0%, rgba(17,17,17,.52) 55%, rgba(17,17,17,.62) 100%);
}
.nbhd-slide-media picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.nbhd-slide-media img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.nbhd-slide-link:hover .nbhd-slide-media img,
.nbhd-slide-link:focus-visible .nbhd-slide-media img{ transform: scale(1.05); }
.nbhd-slide-label{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 88%;
text-align: center;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 34px);
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 18px rgba(0,0,0,.35);
pointer-events: none;
}
/* "View All" CTA tile — a dark card (not a photo) that closes out the strip */
.nbhd-cta-media{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(18px, 2vw, 26px);
aspect-ratio: 5 / 6;
overflow: hidden;
background: #111111;
transition: background .3s ease;
}
.nbhd-cta-link:hover .nbhd-cta-media,
.nbhd-cta-link:focus-visible .nbhd-cta-media{ background: #1c1c1c; }
.nbhd-cta-label{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 34px);
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
color: #fff;
}
.nbhd-cta-arrow{ color: var(--brand-red); transition: transform .3s ease; }
.nbhd-cta-link:hover .nbhd-cta-arrow,
.nbhd-cta-link:focus-visible .nbhd-cta-arrow{ transform: translateX(6px); }
@media (max-width: 900px){
.nbhd-body{ grid-template-columns: 1fr; row-gap: clamp(32px, 6vw, 48px); }
.nbhd-slide{ flex-basis: clamp(260px, 78vw, 420px); }
}
@media (max-width: 560px){
.nbhd-head{ flex-direction: column; }
.nbhd-controls{ order: -1; }
}
/* =========================================================
HOME VALUATION — full-bleed photo + centered heading + address bar
========================================================= */
.valu{
position: relative;
overflow: hidden;
color: #fff;
padding-block: clamp(90px, 15vw, 190px);
}
/* Background image + darkening scrim (heavier toward the bottom for legibility) */
.valu-bg{ position: absolute; inset: 0; z-index: 0; }
.valu-bg picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.valu-bg img{ width: 100%; height: 100%; object-fit: cover; }
/* Layered scrim: a centered vignette focuses the eye while a top-to-bottom
wash keeps text legible, especially over the busy bottom of the aerial. */
.valu-bg::after{
content: "";
position: absolute; inset: 0;
background:
radial-gradient(125% 95% at 50% 40%, rgba(17,17,17,0) 32%, rgba(17,17,17,.55) 100%),
linear-gradient(180deg, rgba(17,17,17,.52) 0%, rgba(17,17,17,.66) 55%, rgba(17,17,17,.88) 100%);
}
/* Parallax: JS adds .valu-parallax to the section, then gives the picture extra
vertical room and translates it as the section passes through the viewport.
No-JS / reduced-motion keep the plain 100%-height crop. */
.valu-parallax .valu-bg picture{
inset: 0 0 auto 0;
height: 155%;
will-change: transform;
}
.valu-inner{ position: relative; z-index: 1; text-align: center; }
.valu-title{ margin: 0; color: #fff; text-shadow: 0 1px 22px rgba(0,0,0,.35); }
/* Checkmark feature row */
.valu-feats{
list-style: none; padding: 0;
margin: clamp(18px, 2vw, 26px) 0 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(16px, 3vw, 46px);
}
.valu-feats li{
display: flex; align-items: center; gap: 9px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
}
.valu-feats svg{ flex: none; color: #fff; }
/* GoHighLevel form embed. No container styling — just the vendor form. The
vendor's form_embed.js sets the real iframe height at runtime; min-height
keeps it visible while that loads. */
.valu-embed{
margin: clamp(30px, 4vw, 54px) auto 0;
max-width: 900px;
width: 100%;
}
.valu-embed iframe{
width: 100%;
min-height: 260px; /* placeholder until form_embed.js sets the real height */
display: block;
}
/* =========================================================
SERVICES — centered intro + row of labeled image cards
========================================================= */
.svc{ padding-block: clamp(72px, 10vw, 130px); background: var(--bg); }
.svc-head{ text-align: center; max-width: 980px; margin: 0 auto clamp(40px, 5vw, 64px); }
.svc-head .section-title{ margin: 0; }
.svc-eyebrow{
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--brand-red);
margin: 0 0 clamp(14px, 1.8vw, 22px);
}
.svc-eyebrow::before,
.svc-eyebrow::after{
content: "";
width: clamp(40px, 5vw, 72px);
height: 1px;
background: var(--brand-red);
flex: none;
}
.svc-sub{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--ink-soft);
margin: clamp(16px, 2vw, 22px) auto 0;
max-width: 62ch;
}
.svc-grid{
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.8vw, 28px);
}
.svc-link{
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
text-decoration: none;
background: var(--surface);
box-shadow: 0 0 0 rgba(17,17,17,0);
transition: box-shadow .35s ease;
}
.svc-link:hover,
.svc-link:focus-visible{ box-shadow: 0 28px 64px rgba(17,17,17,.38); }
.svc-link picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.svc-link img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.svc-link:hover img,
.svc-link:focus-visible img{ transform: scale(1.06); }
/* Bottom scrim so the label stays legible over any image. It deepens on hover:
the gradient itself is drawn strong, and opacity scales it from idle to full. */
.svc-link::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(17,17,17,0) 28%, rgba(17,17,17,.42) 60%, rgba(17,17,17,.95) 100%);
opacity: .78;
transition: opacity .35s ease;
}
.svc-link:hover::after,
.svc-link:focus-visible::after{ opacity: 1; }
/* Label + description sit in a bottom-anchored column. As the description
expands on hover, the column grows upward and lifts the label. */
.svc-overlay{
position: absolute; z-index: 1;
left: clamp(18px, 1.6vw, 28px);
right: clamp(18px, 1.6vw, 28px);
bottom: clamp(16px, 1.6vw, 26px);
display: flex; flex-direction: column;
}
.svc-label{
color: #fff;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2vw, 30px);
letter-spacing: .04em;
text-transform: uppercase;
text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
/* grid-template-rows 0fr -> 1fr animates the height smoothly (which is what
pushes the label up); opacity fades the copy in. */
.svc-desc{
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .4s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.svc-desc-inner{ overflow: hidden; min-height: 0; }
.svc-desc-text{
display: block;
padding-top: 10px;
color: rgba(255,255,255,.92);
font-family: var(--sans);
font-weight: 400;
font-size: clamp(13px, .95vw, 15px);
line-height: 1.55;
text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.svc-link:hover .svc-desc,
.svc-link:focus-visible .svc-desc{ grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce){
.svc-desc{ transition: opacity .2s ease; }
}
@media (max-width: 1024px){
.svc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.svc-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
WORK WITH US (CTA) — photo with an overlapping white card
========================================================= */
.cta{
background: var(--ink);
color: #fff;
/* Reduced bottom padding: the footer is the same dark tone, so the section
flows straight into it without a large gap. */
padding-block: clamp(64px, 9vw, 120px) clamp(24px, 3vw, 40px);
overflow: hidden;
}
/* The wrap is the positioning context; the card is absolutely placed
over the right edge of the photo on desktop. */
.cta-inner{ position: relative; }
.cta-media{
position: relative;
width: 66%;
aspect-ratio: 16 / 11;
overflow: hidden;
background: #000;
}
.cta-media picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cta-media img{ width: 100%; height: 100%; object-fit: cover; }
.cta-card{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: min(48%, 620px);
background: var(--bg);
color: var(--ink);
padding: clamp(36px, 4.4vw, 72px);
}
.cta-eyebrow{
display: flex;
align-items: center;
gap: 22px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--brand-red);
margin: 0 0 22px;
}
.cta-eyebrow::after{
content: "";
width: clamp(40px, 5vw, 72px);
height: 1px;
background: var(--brand-red);
flex: none;
}
.cta-title{ margin: 0 0 26px; } /* size/weight inherited from .section-title */
.cta-body{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.75;
color: var(--ink-soft);
margin: 0 0 clamp(28px, 3vw, 40px);
max-width: 46ch;
}
/* Tablet / mobile: stack the card below the photo, pulled up to overlap. */
@media (max-width: 900px){
.cta-media{ width: 100%; aspect-ratio: 16 / 10; }
.cta-card{
position: relative;
top: auto; right: auto;
transform: none;
width: min(90%, 560px);
margin: clamp(-96px, -12vw, -56px) 0 0 auto;
}
}
@media (max-width: 640px){
.cta-card{
width: calc(100% - 32px);
margin-inline: auto;
padding: 32px 26px;
}
}
/* =========================================================
REVIEWS PAGE — dark gradient banner + vendor review widget
========================================================= */
/* Photo banner so the fixed transparent header reads correctly at the top of the
page, then flips white on scroll like the home hero. */
.rev-hero{
position: relative;
overflow: hidden;
color: #fff;
padding-block: clamp(150px, 20vw, 240px) clamp(60px, 8vw, 110px);
text-align: center;
}
/* Background photo + layered scrim: centered vignette plus a top-to-bottom wash
(heavier at the header end) so the white nav + heading stay legible. */
.rev-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.rev-hero-bg picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rev-hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.rev-hero-bg::after{
content: "";
position: absolute; inset: 0;
background:
radial-gradient(125% 100% at 50% 42%, rgba(17,17,17,0) 34%, rgba(17,17,17,.5) 100%),
linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.4) 45%, rgba(17,17,17,.62) 100%);
}
.rev-hero-inner{ position: relative; z-index: 1; max-width: 900px; }
.rev-eyebrow{
margin: 0 0 clamp(14px, 1.6vw, 20px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
}
.rev-title{ margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.22); font-size: clamp(38px, 5.4vw, 72px); line-height: 1.06; }
.rev-sub{
margin: clamp(16px, 1.8vw, 24px) auto 0;
max-width: 62ch;
font-family: var(--serif);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.5;
color: rgba(255,255,255,.9);
}
.rev-hero-sub{ color: #fff; }
/* =========================================================
COMMUNITIES — FEATURED AREAS TILES
3-up grid of image tiles with a bottom scrim + serif label.
Modeled on .svc cards; no hover-expand copy (static tiles for now).
========================================================= */
.areas{ padding-block: clamp(64px, 8vw, 112px); background: var(--bg); }
.areas-head{ text-align: center; max-width: 900px; margin: 0 auto clamp(36px, 4.5vw, 60px); }
.areas-head .section-title{ margin: 0; }
.areas-sub{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--ink-soft);
margin: clamp(16px, 2vw, 22px) auto 0;
max-width: 60ch;
}
/* Wider intro variant: lets the copy span closer to the grid width below it. */
.areas-head--wide{ max-width: 1120px; }
.areas-head--wide .areas-sub{ max-width: none; }
.areas-grid{
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.8vw, 28px);
}
.area-tile{
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface);
box-shadow: 0 0 0 rgba(17,17,17,0);
transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease;
}
/* Whole tile pops out slightly on hover with a harder shadow; z-index lifts
it above its neighbors so the scaled edges aren't clipped by them. */
.area-tile:hover,
.area-tile:focus-within{
transform: scale(1.02);
z-index: 2;
box-shadow: 0 24px 48px rgba(17,17,17,.52);
}
/* Stretched link: makes the whole tile clickable and keyboard-focusable
without disturbing the visual layering (sits above the label at z-index:3). */
.area-link{ position: absolute; inset: 0; z-index: 3; }
.area-link:focus-visible{ outline: 2px solid #fff; outline-offset: -6px; }
.area-tile picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.area-tile img{ width: 100%; height: 100%; object-fit: cover; }
/* Frosted-glass panel across the bottom gives the label a "container" look.
No mask — the band has a crisp top edge, so the blur snaps on at a sharp
line rather than fading in. A tint gradient inside the band (which starts
at that same edge) keeps the label legible on any image. z-index:1 so it
sits above the image but below the label. */
.area-tile::before{
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 23%; z-index: 1; pointer-events: none;
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
background: linear-gradient(180deg, rgba(17,17,17,.16) 0%, rgba(17,17,17,.66) 100%);
}
.area-label{
position: absolute; z-index: 2;
left: clamp(18px, 1.6vw, 26px);
bottom: clamp(10px, 1vw, 15px);
color: #fff;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(22px, 2vw, 30px);
letter-spacing: .06em;
text-transform: uppercase;
text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce){
.area-tile{ transition: box-shadow .2s ease; }
.area-tile:hover,
.area-tile:focus-within{ transform: none; }
}
@media (max-width: 900px){
.areas-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.areas-grid{ grid-template-columns: 1fr; }
}
/* "View More" lead-in button between the featured 6 and the additional
communities. The :has()/sibling rules zero the neighbours' doubled
padding so the button sits with symmetric space above and below. */
.comm-viewmore{
background: var(--bg);
text-align: center;
padding-top: clamp(24px, 3vw, 36px);
padding-bottom: clamp(160px, 17vw, 232px);
}
.comm:has(+ .comm-viewmore),
.areas:has(+ .comm-viewmore){ padding-bottom: 0; }
.comm-viewmore + .areas-more,
.comm-viewmore + .comm{ padding-top: 0; }
/* Back-to-top button — fixed bottom-right, fades in after scrolling down. */
.to-top{
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 90;
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--brand-red);
color: #fff;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.to-top:hover{ background: #7a0907; }
.to-top:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: 3px; }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
.to-top{ transition: opacity .25s ease, visibility .25s; transform: none; }
}
/* ===== Contact page ===== */
.contact-sec{ padding-block: clamp(52px, 7vw, 104px); }
.contact-grid{
display: grid;
grid-template-columns: 1fr;
gap: clamp(36px, 5vw, 64px);
align-items: start;
}
@media (min-width: 900px){
.contact-grid{ grid-template-columns: 0.85fr 1.15fr; }
}
.contact-info-title{ margin-top: 0; }
.contact-lead{
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.75;
color: var(--ink-soft);
margin: clamp(18px, 2vw, 24px) 0 0;
max-width: 46ch;
}
.contact-details{ list-style: none; margin: clamp(28px, 3.2vw, 40px) 0 0; padding: 0; }
.contact-detail{ margin-top: 22px; }
.contact-detail:first-child{ margin-top: 0; }
.contact-detail-k{
display: block;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brand-red);
margin-bottom: 6px;
}
.contact-detail-v{
font-family: var(--serif);
font-size: clamp(20px, 1.9vw, 26px);
color: var(--ink);
text-decoration: none;
}
a.contact-detail-v{ transition: color .18s ease; }
a.contact-detail-v:hover{ color: var(--brand-red); }
.contact-form-wrap{
background: #fafafa;
border: 1px solid #ececec;
padding: clamp(24px, 3vw, 44px);
}
/* GoHighLevel form embed. form_embed.js rewrites the iframe height once the form
reports its size, so min-height only has to hold space until that lands. */
.contact-embed iframe{
display: block;
width: 100%;
min-height: 544px;
border: 0;
}
/* =========================================================
COMMUNITY DETAIL SECTIONS
Alternating image / text bands. `.alt` flips the sides and
tints the background, so each community reads as its own block.
Tiles above scroll here via #id anchors (scroll-padding-top on
keeps the target clear of the fixed header).
========================================================= */
.comm{ padding-block: clamp(60px, 8vw, 118px); background: var(--bg); }
.comm.alt{ background: var(--surface); }
.comm-inner{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(32px, 5vw, 76px);
align-items: start; /* top-align so the image lines up with the eyebrow */
}
.comm-media{ order: 0; }
.comm-body{ order: 1; }
.comm.alt .comm-media{ order: 1; }
.comm.alt .comm-body{ order: 0; }
.comm-media picture{ display: block; }
.comm-media img{
width: 100%; height: 100%; object-fit: cover;
aspect-ratio: 4 / 3;
box-shadow: 0 30px 60px rgba(17,17,17,.14);
}
.comm-name{
font-family: var(--serif); font-weight: 500;
font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02;
color: var(--ink); margin: 0 0 9px;
}
.comm-eyebrow{
font-family: var(--sans); font-weight: 600;
font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-soft); margin: 0 0 clamp(16px, 2vw, 22px);
}
.comm-lead{
font-family: var(--sans); font-weight: 400;
font-size: clamp(16px, 1.25vw, 18px); line-height: 1.72;
color: var(--ink); margin: 0 0 16px;
}
/* Quick-facts grid — 1px gaps over a rule-colored backdrop draw the dividers. */
.comm-facts{
list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.comm-facts li{
background: var(--bg); padding: 14px clamp(14px, 1.4vw, 18px);
display: flex; flex-direction: column; gap: 5px;
}
.comm.alt .comm-facts li{ background: var(--surface); }
.comm-fact-k{
font-family: var(--sans); font-weight: 600; font-size: 11px;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.comm-fact-v{
font-family: var(--serif); font-weight: 500;
font-size: clamp(16px, 1.3vw, 19px); line-height: 1.2; color: var(--ink);
}
/* Full-width "Community Highlights" cell: spans both columns, and its longer
value reads better as sans body text than the serif used for short facts. */
.comm-facts-wide{ grid-column: 1 / -1; }
.comm-facts-wide .comm-fact-v{
font-family: var(--sans); font-weight: 400;
font-size: clamp(13.5px, 1vw, 15px); line-height: 1.6;
}
/* Popular Neighborhoods — centered heading + a 2-column chip list.
Pin markers (via SVG mask) distinguish these place names from the
diamond-bulleted highlights below. */
.comm-hoods{ margin: clamp(22px, 2.6vw, 30px) 0 0; }
.comm-hoods-title{
text-align: center;
font-family: var(--serif); font-weight: 700;
font-size: clamp(20px, 2vw, 26px); color: var(--ink);
margin: 0 0 clamp(16px, 1.8vw, 22px);
}
.comm-hoods-list{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.comm-hoods-list li{
display: flex; align-items: center; gap: 10px;
padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--rule);
font-family: var(--sans); font-weight: 500;
font-size: clamp(13.5px, 1vw, 15px); line-height: 1.25; color: var(--ink);
cursor: pointer;
transition: border-color .25s ease, box-shadow .25s ease;
}
.comm.alt .comm-hoods-list li{ background: var(--bg); }
.comm-hoods-list li:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: 2px; }
/* Active chip (hovered / tapped / focused) shares the maroon accent with its
description panel so it's clear which neighborhood is being described. */
.comm-hoods-list li.is-active{ border-color: var(--brand-red); }
.comm-hoods-list li::before{
content: ""; flex: 0 0 auto; width: 13px; height: 13px;
background-color: var(--brand-red);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.comm-hoods-list li:hover{ border-color: var(--brand-red); box-shadow: 0 6px 18px rgba(143,11,9,.14); }
/* Shared description panel — updated by JS as chips are hovered/focused.
min-height reserves ~3 lines so the layout doesn't jump as text changes. */
.comm-hood-desc{
margin: clamp(15px, 1.9vw, 20px) 0 0;
min-height: 4.1em;
padding-left: 14px;
border-left: 2px solid var(--brand-red);
font-family: var(--sans); font-weight: 400;
font-size: clamp(13.5px, 1vw, 15px); line-height: 1.62;
color: var(--ink-soft);
}
/* Community CTAs are solid black by default (white content) and shift to the
brand maroon on hover, keeping the lettering white. */
.comm-body .btn-pill{
margin-top: clamp(26px, 3vw, 40px);
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.comm-body .btn-pill:hover,
.comm-body .btn-pill:focus-visible{
background: var(--brand-red);
color: #fff;
border-color: var(--brand-red);
}
@media (max-width: 860px){
.comm-inner{ grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
/* On mobile the image always sits above the text, regardless of .alt. */
.comm-media, .comm.alt .comm-media{ order: 0; }
.comm-body, .comm.alt .comm-body{ order: 1; }
.comm-media img{ aspect-ratio: 16 / 10; }
}
@media (max-width: 460px){
.comm-facts{ grid-template-columns: 1fr; }
}
/* Widget section — light surface; the iframe self-sizes via the vendor script. */
.rev-widget{ padding-block: clamp(44px, 6vw, 84px); }
.rev-widget-inner{ max-width: 1120px; }
/* The iframe starts at zero height and only gets its real height once the vendor
script postMessages it in, which shoves the whole CTA below it down the page
(measured CLS 0.37 on mobile). These floors reserve that space up front. The
vendor re-flows to a single column below 768px of IFRAME width, so the floor
has to step UP as the viewport gets narrower, not down.
Each floor sits just BELOW the height the widget actually settles at, so it
absorbs the shift without ever over-reserving into dead whitespace. Measured
settled heights: 412px vp -> 2088, 458 -> 1997, 711/800 -> 1810, 853 -> 1078,
1600 -> 1010. Re-measure if the number of reviews changes.
Do not "fix" a Lighthouse CLS regression by deleting these floors. Lighthouse
scores this page WORSE with them (0.37 -> 0.52) because reserving the space makes
the iframe big enough to sit in the viewport while the vendor reflows its own
content, and those in-iframe shifts then count against us. That reflow is the
vendor's and we cannot reach it. In a real browser the floors are what matter:
measured CLS 0.000 with them vs 0.338 without, where the widget snapping from
0 to ~2088px shoves the entire CTA down the page. Real users beat the lab number. */
.lc_reviews_widget{ display: block; border: 0; min-height: 1010px; }
@media (max-width: 845px){ .lc_reviews_widget{ min-height: 1800px; } }
@media (max-width: 470px){ .lc_reviews_widget{ min-height: 2080px; } }
/* ---- CTA: full-bleed photo, serif headline + pill actions ---- */
.jcta{
position: relative;
overflow: hidden;
color: #fff;
padding-block: clamp(88px, 13vw, 168px) clamp(14px, 2.4vw, 32px);
}
.jcta-bg{ position: absolute; inset: 0; z-index: 0; }
.jcta-bg picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.jcta-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.jcta-bg::after{
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.42) 55%, rgba(17,17,17,.18) 100%),
linear-gradient(180deg, rgba(17,17,17,.15) 0%, rgba(17,17,17,.3) 40%, rgba(17,17,17,.85) 82%, rgba(17,17,17,1) 100%);
}
.jcta-wrap{ position: relative; z-index: 1; }
.jcta-inner{
max-width: 900px;
margin-inline: 0; /* left-align with the footer's gutter */
padding-left: clamp(0px, 6vw, 100px); /* ~100px indent past the logo on desktop */
}
.jcta-title{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(30px, 4vw, 54px);
line-height: 1.1;
letter-spacing: .005em;
margin: 0;
text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.jcta-title em{ font-style: italic; font-weight: 500; }
/* New Construction's headline is the longest of the .jcta titles: its first
authored line needs 844px at the 54px cap, but .jcta-inner's left indent eats
into the 900px box and leaves 814px, so the line wrapped and the
pushed
the heading onto three lines. Widen the box on this page only — the other
.jcta pages have shorter titles and are already holding two lines. */
.new-construction .jcta-inner{ max-width: 960px; }
.jcta-sub{
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.75;
color: rgba(255,255,255,.85);
margin: clamp(18px, 2vw, 26px) 0 0;
max-width: 760px; /* slightly wider than the heading's longest line */
}
.jcta-actions{
display: flex; flex-wrap: wrap; gap: 16px;
margin-top: clamp(28px, 3.4vw, 42px);
}
/* Rounded pill buttons with a trailing arrow (shared CTA control) */
.pill{
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 30px;
border-radius: 999px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pill-arrow{ flex: none; }
.pill-icon{ flex: none; }
.pill-solid{ background: #fff; color: var(--ink); border-color: #fff; }
.pill-solid:hover,
.pill-solid:focus-visible{ background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.pill-ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.pill-ghost:hover,
.pill-ghost:focus-visible{ background: #fff; color: var(--ink); border-color: #fff; }
/* =========================================================
SITE-WIDE PROMO CTA
Floating pill, bottom-right, linking to the Landmark spotlight page.
Present on every page except Landmark itself (see HTML — the markup is
simply omitted there). Hidden by default and faded in by site.js shortly
after load, so it never blocks first paint or competes with the hero.
========================================================= */
/* Outer wrapper is a plain div, NOT the link — the dismiss button lives
here as a sibling of the link so it's never a button nested inside an
anchor (invalid HTML, and it would fire the navigation on every close). */
.site-promo{
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
z-index: 60;
display: inline-flex;
align-items: center;
padding: 14px 20px;
border-radius: 999px;
background: #fff;
color: var(--brand-red);
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease, background-color .3s ease, color .3s ease;
pointer-events: none;
}
.site-promo-link{
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
font-family: var(--sans);
font-weight: 600;
font-size: 12.5px;
line-height: 1.35;
letter-spacing: .01em;
text-decoration: none;
text-align: left;
}
.site-promo-text{ display: block; }
.site-promo.is-visible{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
/* Soft recurring glow — subtle, not blinking — so it keeps drawing the eye
without ever feeling like a notification badge. */
animation: sitePromoGlow 3.6s ease-in-out .8s infinite;
}
.site-promo:hover,
.site-promo:focus-within{
background: var(--brand-red);
color: #fff;
animation-play-state: paused;
box-shadow: 0 18px 40px rgba(17,17,17,.32);
}
/* Dismiss button — top-right badge, overlapping the pill's edge. No fill,
so the drop-shadow (rather than a background) is what keeps the × legible
over whatever photo happens to sit behind the pill at that scroll position. */
.site-promo-close{
position: absolute;
top: -10px;
right: -10px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #fff;
font-family: var(--sans);
font-size: 18px;
font-weight: 600;
line-height: 1;
cursor: pointer;
filter: drop-shadow(0 1px 3px rgba(17,17,17,.55));
transition: color .2s ease, transform .2s ease;
}
.site-promo-close:hover,
.site-promo-close:focus-visible{ color: var(--brand-red); transform: scale(1.1); }
/* Tapping hand, anchored to the pill's bottom-right corner and overlapping
it — reads as a finger reaching up to press the button. */
.site-promo-tap{
position: absolute;
right: 4px;
bottom: -13px;
font-size: 28px;
line-height: 1;
filter: drop-shadow(0 2px 5px rgba(17,17,17,.35));
animation: sitePromoTap 2.2s ease-in-out .8s infinite;
}
@keyframes sitePromoGlow{
0%, 100% { box-shadow: 0 14px 30px rgba(17,17,17,.2), 0 0 0 rgba(143,11,9,0); }
50% { box-shadow: 0 14px 30px rgba(17,17,17,.2), 0 0 22px rgba(143,11,9,.45); }
}
/* A quick double-tap, then a pause before repeating — reads as a deliberate
press rather than a constant jitter. */
@keyframes sitePromoTap{
0%, 55%, 100% { transform: translateY(0); }
8%, 22% { transform: translateY(5px); }
15%, 30% { transform: translateY(0); }
}
@media (max-width: 640px){
.site-promo{ padding: 12px 16px; }
.site-promo-link{ font-size: 11.5px; gap: 8px; }
.site-promo-tap{ font-size: 22px; right: 2px; bottom: -11px; }
}
@media (prefers-reduced-motion: reduce){
.site-promo{ transition: opacity .01s linear; }
.site-promo.is-visible{ animation: none; }
.site-promo-tap{ animation: none; }
}
/* /communities also has a scroll-triggered "back to top" button in the same
corner (.to-top) — stack it above the promo pill instead of overlapping. */
body:has(.site-promo) .to-top{ bottom: calc(clamp(16px, 3vw, 32px) + 68px); }
/* =========================================================
ABOUT PAGE
Opening statement (centered serif headline + rule + body)
and a two-column feature band (photo + copy), modeled on
the editorial reference screenshots. Headlines here are
mixed-case serif (not the uppercase .section-title used
elsewhere), matching the reference's softer, editorial tone.
========================================================= */
.about-intro{ background: var(--bg); padding-block: clamp(64px, 9vw, 128px); }
.about-intro-inner{ width: 85%; max-width: 1200px; text-align: center; }
.about-lead-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(28px, 4.4vw, 54px);
line-height: 1.14;
letter-spacing: .01em;
color: var(--ink);
text-wrap: balance;
}
/* Short centered divider under the headline */
.about-rule{
display: block;
width: 116px; height: 1px;
margin: clamp(26px, 3vw, 40px) auto;
background: var(--rule-strong);
}
.about-rule--left{ margin-inline: 0; }
/* The head above stays centered; the copy itself reads left. .about-intro-inner
centers everything, so the body block opts back out. */
.about-intro-body{ max-width: 100%; margin-inline: auto; text-align: left; }
.about-intro-body p{
margin: 0 0 clamp(16px, 1.8vw, 24px);
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.85;
color: var(--ink-soft);
}
.about-intro-body p:last-child{ margin-bottom: 0; }
.about-intro-btn{ margin-top: clamp(26px, 3vw, 40px); }
/* GHL Home Buying Guide embed — vendor's form_embed.js sets the real iframe
height at runtime; min-height keeps it visible while that loads. */
.guide-embed{ margin: clamp(4px, 1vw, 14px) auto 0; max-width: 1040px; width: 100%; }
.guide-embed iframe{ width: 100%; min-height: 110px; display: block; border: 0; }
/* ---- Feature band: photo left, copy right ---- */
.about-feature{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
background: var(--bg);
margin-bottom: clamp(56px, 8vw, 104px); /* breathing room before the next section */
}
/* The white process sections bring their own generous top padding, so a feature
band's bottom margin stacks on top of it into ~235px of dead white. Drop the
margin and let the section's padding do the spacing.
.bphase is deliberately NOT in this list: it is a dark band, so there the
margin is the white gap that separates it from the section above. */
.about-feature:has(+ .stl),
.about-feature:has(+ .ledger),
.about-feature:has(+ .pwk){ margin-bottom: 0; }
/* .about-feature carries its breathing room as a bottom margin only, so a band
that follows another section butts straight against it. */
.atst + .about-feature{ margin-top: clamp(56px, 8vw, 104px); }
.about-feature-media{ position: relative; min-height: 420px; }
.about-feature-media picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.about-feature-media img{ width: 100%; height: 100%; object-fit: cover; }
.about-feature-body{
display: flex;
align-items: center;
padding: clamp(48px, 6vw, 104px) clamp(24px, 5vw, 96px);
}
.about-feature-copy{ max-width: 560px; }
.about-feature-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.12;
letter-spacing: .01em;
color: var(--ink);
}
.about-feature-copy p{
margin: 0 0 clamp(16px, 1.8vw, 22px);
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.8;
color: var(--ink-soft);
}
.about-feature-btn{ margin-top: clamp(10px, 1.4vw, 18px); }
/* Reversed band: text on the left, photo on the right (DOM order stays
media-then-body; `order` flips it). */
.about-feature--reverse .about-feature-media{ order: 2; }
.about-feature--reverse .about-feature-body{ order: 1; }
/* =========================================================
ABOUT — CORE VALUES
Deliberately not cards: boxes on a light band read as a
generic feature grid. This is an editorial column set,
divided only by hairlines, so the whitespace does the work
and the section stays quiet next to the photo bands around
it. The only motion is a maroon rule drawing across the top
of a column on hover, the way a nib underlines a heading.
========================================================= */
/* No section head by design: the columns carry themselves, and the opening
statement above already sets up the page. */
.vals{ background: var(--bg); padding-block: clamp(64px, 9vw, 128px); }
/* Both bands are white, so their stacked padding (128 + 128) read as one void
rather than a section break. Collapse the seam: the opening statement gives up
its bottom padding and the columns open closer beneath it. */
.about-intro:has(+ .vals){ padding-bottom: 0; }
.about-intro + .vals{ padding-top: clamp(44px, 5.5vw, 84px); }
/* ---- The column set ---- */
.vals-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.vals-item{
position: relative;
padding: clamp(30px, 3.4vw, 48px) clamp(18px, 2vw, 30px);
border-left: 1px solid var(--rule);
transition: background-color .45s ease;
}
.vals-item:first-child{ border-left: 0; }
/* The section is white, so the hover tints toward the surface tone. (It used to
be the other way round, back when the band itself was gray.) */
.vals-item:hover{ background: var(--surface); }
/* The nib: a maroon rule drawing across the top of the column. */
.vals-item::before{
content: "";
position: absolute;
top: -1px; left: 0;
width: 0; height: 2px;
background: var(--brand-red);
transition: width .55s cubic-bezier(.2, .65, .25, 1);
}
.vals-item:hover::before{ width: 100%; }
.vals-icon{
display: block;
margin-bottom: clamp(18px, 2vw, 26px);
color: var(--brand-red);
}
.vals-icon svg{
display: block;
width: clamp(28px, 2.4vw, 34px);
height: auto;
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
.vals-name{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--serif);
font-weight: 500;
font-size: clamp(21px, 1.75vw, 27px);
line-height: 1.2;
color: var(--ink);
}
.vals-copy{
margin: 0;
font-family: var(--sans);
font-size: var(--body);
line-height: 1.75;
color: var(--ink-soft);
}
/* Dividers have to be re-cut at each breakpoint, or a column keeps a left rule
when it becomes the first in its row. */
@media (max-width: 900px){
.vals-grid{ grid-template-columns: repeat(2, 1fr); }
.vals-item:nth-child(2n+1){ border-left: 0; }
.vals-item:nth-child(2n){ border-left: 1px solid var(--rule); }
.vals-item:nth-child(n+3){ border-top: 1px solid var(--rule); }
}
@media (max-width: 560px){
.vals-grid{ grid-template-columns: 1fr; }
.vals-item{ border-left: 0; }
.vals-item:nth-child(n+2){ border-top: 1px solid var(--rule); }
}
@media (max-width: 900px){
.about-feature{ grid-template-columns: 1fr; }
.about-feature-media{ min-height: clamp(280px, 56vw, 440px); }
/* On mobile always stack photo above text, both directions */
.about-feature--reverse .about-feature-media{ order: 1; }
.about-feature--reverse .about-feature-body{ order: 2; }
}
/* =========================================================
BUYERS — "POWERFUL NETWORK" (white text card + portrait
on a soft tinted band). Modeled on a client reference.
========================================================= */
/* Tinted band floats with white spacing above and below (margin-bottom
here, plus the preceding feature band's own margin-bottom above). */
.bnet{
background: #F9F9F9;
padding-block: clamp(56px, 7vw, 104px);
margin-bottom: clamp(56px, 8vw, 104px);
}
.bnet-inner{
display: grid;
grid-template-columns: 1.3fr 0.78fr;
gap: clamp(28px, 4vw, 68px);
align-items: center;
max-width: 1560px; /* a touch wider than the standard wrap for easier alignment */
}
.bnet-card{
background: #fff;
padding: clamp(30px, 4vw, 60px);
box-shadow: 0 24px 60px rgba(17,17,17,.10);
}
.bnet-eyebrow{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--brand-red);
}
.bnet-title{
margin: 0 0 clamp(18px, 2vw, 26px);
font-family: var(--serif);
font-weight: 500;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.1;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
}
.bnet-card p{
margin: 0 0 clamp(14px, 1.6vw, 20px);
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.75;
color: var(--ink-soft);
}
.bnet-sub{ font-weight: 500; color: var(--ink); }
.bnet-list{ margin: 0 0 clamp(18px, 2vw, 26px); padding: 0; list-style: none; }
.bnet-list li{
position: relative;
padding-left: 1.3em;
margin-bottom: 9px;
font-family: var(--sans);
font-size: var(--body);
line-height: 1.5;
color: var(--ink-soft);
}
.bnet-list li::before{
content: "";
position: absolute; left: 0; top: .58em;
width: 5px; height: 5px; border-radius: 50%;
background: var(--brand-red);
}
.bnet-foot{ margin-bottom: 0; }
/* Diagonal two-photo stack — two equal-size photos: the first (portrait)
at top-left in flow, the second offset down and to the right. Both share
the same width and 4:5 ratio. The top-aligned column lines the stack up
with the top of the card in column one. */
/* The front photo hangs 32% below the stack's flow box, so shift the stack
up by ~half of that to visually centre the pair against the card. */
.bnet-stack{ position: relative; transform: translateY(-16%); }
.bnet-photo{ position: relative; width: 66%; margin: 0; border: 3px solid #fff; }
.bnet-photo img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.bnet-photo--main{ z-index: 1; }
.bnet-photo--sub{
position: absolute;
top: 32%;
right: 0;
z-index: 2;
box-shadow: 0 22px 46px rgba(17,17,17,.22);
}
@media (max-width: 900px){
.bnet-inner{ grid-template-columns: 1fr; align-items: start; }
.bnet-media{ order: -1; }
/* Simplify to a clean vertical pair on small screens */
.bnet-stack{ transform: none; }
.bnet-photo{ position: static; width: 100%; }
.bnet-photo--sub{ margin-top: 14px; box-shadow: none; }
}
@media (max-width: 700px){
/* Let the intro use the full gutter width on small screens */
.about-intro-inner{ width: 100%; }
}
/* =========================================================
BUYERS — "HOME BUYING JOURNEY" (split lead + native
accordion). Left column carries the heading and
CTA over a faint SB-monogram watermark; the right column is
a single-open accordion — the shared name="bstep" makes the
browser close the others when one opens, no JS required.
========================================================= */
.bstep{ background: var(--bg); padding-block: clamp(60px, 8vw, 116px); }
/* The preceding Powerful Network band carries its own margin-bottom; drop it
when this section follows so their spacing doesn't stack. */
.bnet:has(+ .bstep){ margin-bottom: 0; }
.bstep-inner{
display: grid;
grid-template-columns: 1fr 1.08fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
/* ---- Left: lead ---- */
.bstep-lead{ position: relative; }
.bstep-watermark{
position: absolute;
top: 50%; left: 50%;
width: clamp(280px, 38vw, 440px); height: auto;
transform: translate(-50%, -50%);
opacity: .05;
pointer-events: none;
z-index: 0;
}
.bstep-lead > :not(.bstep-watermark){ position: relative; z-index: 1; }
.bstep-eyebrow{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--brand-red);
}
.bstep-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(30px, 3.6vw, 50px);
line-height: 1.1;
letter-spacing: .01em;
color: var(--ink);
text-wrap: balance;
}
.bstep-rule{
display: block;
width: 116px; height: 1px;
margin: clamp(26px, 3vw, 40px) 0;
background: var(--rule-strong);
}
.bstep-sub{
margin: 0 0 clamp(26px, 3vw, 38px);
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.75;
color: var(--ink-soft);
}
/* Filled dark pill that sweeps to brand red on hover (uses the .btn fill
mechanism: --btn-fill paints over the resting background-color). */
.bstep-btn{
--btn-fill: var(--brand-red);
color: #fff;
background-color: var(--ink);
border: 1px solid var(--ink);
border-radius: 999px;
padding: 17px 40px;
}
.bstep-btn:hover,
.bstep-btn:focus-visible{ color: #fff; border-color: var(--brand-red); }
/* ---- Right: accordion ---- */
.bstep-list{ display: flex; flex-direction: column; gap: 12px; }
.bstep-item{
background: #F4F4F4;
border: 1px solid transparent;
border-radius: 14px;
transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bstep-item[open]{
background: #fff;
border-color: var(--rule);
box-shadow: 0 18px 40px rgba(0,0,0,.07);
}
.bstep-summary{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
cursor: pointer;
list-style: none;
font-family: var(--sans);
font-weight: 600;
font-size: clamp(16px, 1.3vw, 19px);
color: var(--ink);
}
.bstep-summary::-webkit-details-marker{ display: none; }
.bstep-summary:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: 3px; border-radius: 14px; }
.bstep-label{ line-height: 1.3; }
/* +/× toggle drawn with two bars; the vertical bar collapses when open */
.bstep-icon{
position: relative;
flex: 0 0 auto;
width: 18px; height: 18px;
}
.bstep-icon::before,
.bstep-icon::after{
content: "";
position: absolute;
top: 50%; left: 50%;
background: var(--brand-red);
transform: translate(-50%, -50%);
transition: transform .3s ease, opacity .3s ease;
}
.bstep-icon::before{ width: 16px; height: 2px; } /* horizontal bar */
.bstep-icon::after{ width: 2px; height: 16px; } /* vertical bar */
.bstep-item[open] .bstep-icon::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.bstep-panel{
padding: 0 clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px);
}
.bstep-panel p{
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.8;
color: var(--ink-soft);
}
/* Whisper-subtle open animation; disabled under reduced-motion below */
.bstep-item[open] .bstep-panel{ animation: bstepReveal .32s ease both; }
@keyframes bstepReveal{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
@media (max-width: 900px){
.bstep-inner{ grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
.bstep-sub{ max-width: 46ch; }
.bstep-watermark{ width: clamp(240px, 60vw, 360px); }
}
@media (prefers-reduced-motion: reduce){
.bstep-item, .bstep-icon::before, .bstep-icon::after{ transition: none; }
.bstep-item[open] .bstep-panel{ animation: none; }
}
/* =========================================================
SELLERS — "THE PATH TO SOLD" (scroll-progress timeline).
A vertical spine with numbered nodes; site.js grows the
maroon fill and lights each node as it scrolls past a read
line, and the zig-zag cards reveal on scroll. No-JS: the
spine shows in gray with hollow nodes and all cards visible.
========================================================= */
/* overflow-x: clip, not hidden. A stray confetti piece must never widen the
document and let the page scroll sideways, but `hidden` would force overflow-y
to `auto` and turn this section into a scroll container -- clipping the burst
vertically and trapping the sticky spine. `clip` bounds the x axis and leaves
y alone, so the confetti can still arc above and below the card. */
.stl{ background: var(--bg); padding-block: clamp(60px, 8vw, 116px); overflow-x: clip; }
/* Drop the preceding band's bottom margin so spacing doesn't stack. */
.stl-head{ text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 6vw, 78px); }
.stl-eyebrow{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--brand-red);
}
.stl-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(30px, 3.6vw, 50px);
line-height: 1.1;
letter-spacing: .01em;
color: var(--ink);
text-wrap: balance;
}
.stl-rule{
display: block;
width: 116px; height: 1px;
margin: clamp(22px, 2.6vw, 32px) auto;
background: var(--rule-strong);
}
.stl-sub{
margin: 0;
font-family: var(--sans);
font-size: var(--body);
line-height: 1.75;
color: var(--ink-soft);
}
/* ---- Track + spine ---- */
.stl-track{
position: relative;
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 980px;
}
.stl-line{
position: absolute;
top: 12px; bottom: 12px; left: 50%;
width: 2px;
transform: translateX(-50%);
background: var(--rule-strong);
overflow: hidden;
}
.stl-line-fill{
position: absolute;
top: 0; left: 0;
width: 100%; height: 0; /* site.js sets the height on scroll */
background: var(--brand-red);
}
/* ---- Rows (zig-zag) ---- */
.stl-item{
position: relative;
display: grid;
grid-template-columns: 1fr 56px 1fr;
align-items: start;
column-gap: clamp(14px, 2vw, 26px);
margin-bottom: clamp(26px, 3.6vw, 46px);
}
.stl-item:last-child{ margin-bottom: 0; }
/* Dot sits ~43px from the row top so it lines up with each card's number.
grid-row:1 keeps marker + card on the same row even when the card is placed
in column 1 (left/odd rows), which would otherwise wrap to a second row. */
.stl-marker{ grid-column: 2; grid-row: 1; display: flex; justify-content: center; padding-top: 50px; }
.stl-dot{
position: relative;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--rule-strong);
box-shadow: 0 0 0 6px var(--bg);
transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.stl-item.is-active .stl-dot{
background: var(--brand-red);
border-color: var(--brand-red);
transform: scale(1.15);
}
/* Short maroon tick attached to the dot, pointing toward its card. Anchored to
the dot (not the card) so it always stays centered on the node. */
.stl-dot::after{
content: "";
position: absolute;
top: 50%;
width: 32px; height: 1px;
background: var(--brand-red);
transform: translateY(-50%);
}
.stl-item:nth-of-type(odd) .stl-dot::after{ right: calc(100% + 7px); } /* card on the left */
.stl-item:nth-of-type(even) .stl-dot::after{ left: calc(100% + 7px); } /* card on the right */
.stl-card{
position: relative;
grid-row: 1;
max-width: 420px;
background: #F7F7F7;
border: 1px solid var(--rule);
border-radius: 16px;
padding: clamp(22px, 2.4vw, 30px);
transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.stl-item:nth-of-type(odd) .stl-card{ grid-column: 1; justify-self: end; }
.stl-item:nth-of-type(even) .stl-card{ grid-column: 3; justify-self: start; }
/* The stage the timeline is currently on: white with a deep, lifted shadow. */
.stl-item.is-current .stl-card{
background: #fff;
border-color: transparent;
box-shadow: 0 30px 70px rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.10);
}
/* ---- Celebration confetti on step 6 ----
Two poppers fire ~0.5s after the last step gets .is-active. Paper, not sparks:
each piece launches out and up, arcs over, and falls under gravity while it
tumbles, so it reads as confetti rather than a firework.
Two nested elements do the work, which is what sells it: the outer carries
the trajectory, the inner carries the tumble. Spinning the same box you are
translating would just make it corkscrew; separating them lets a piece flutter
at its own rate while it falls at another. The tumble is a rotate3d, so the
flat rectangle foreshortens as it turns edge-on and catches the light the way
real paper does.
Per-piece values (travel, apex, spin, duration, delay, size, color) are baked
into the markup as custom properties -- randomness generated once, not at
runtime. Purely decorative (aria-hidden), and gated so it only plays when the
step is actually reached. */
/* --s scales every piece's trajectory at once; the media queries below shrink it
so the burst stays proportional to a narrower card. */
.stl-cf{ position: absolute; inset: 0; pointer-events: none; perspective: 700px; --s: 1; }
.stl-cf-pop{ position: absolute; top: 50%; width: 0; height: 0; }
.stl-cf-pop--a{ left: 30%; }
.stl-cf-pop--b{ left: 70%; }
.stl-cf-pop i{
position: absolute; left: 0; top: 0;
display: block;
width: var(--w); height: var(--h);
margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
opacity: 0;
transform-style: preserve-3d;
}
.stl-cf-pop i b{
display: block;
width: 100%; height: 100%;
background: var(--c);
/* Paper, so: no glow. Just enough shadow to lift it off the card. */
box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
/* Trigger: site.js adds .is-celebrating once the last card is actually on screen,
at any scroll speed. It is NOT keyed to .is-active (the read-line class that
drives the spine), because on a fast scroll the card is long gone by the time
the delay below elapses, and the burst played where nobody could see it.
250ms so it lands rather than firing instantly. The two animations must stay
on the same delay, or a piece would start tumbling before it launches. Each
piece adds its own --delay on top (0-300ms), so the poppers fire over a window
rather than as one synchronized wall. */
.stl-item.is-celebrating .stl-cf-pop i{
animation: stlCfFly var(--t) forwards;
animation-delay: calc(250ms + var(--delay));
}
.stl-item.is-celebrating .stl-cf-pop i b{
animation: stlCfTumble var(--spin) linear infinite;
animation-delay: calc(250ms + var(--delay));
}
/* Trajectory. The two segments carry their own easing: ease-out on the way up
(the pop decelerating) and ease-in on the way down (gravity taking over),
which is what makes the arc read as weight rather than a straight throw. */
@keyframes stlCfFly{
0%{
transform: translate3d(0, 0, 0);
opacity: 0;
animation-timing-function: cubic-bezier(.15, .7, .4, 1);
}
6%{ opacity: 1; }
38%{
transform: translate3d(calc(var(--x) * var(--s) * .5), calc(var(--peak) * var(--s)), 0);
animation-timing-function: cubic-bezier(.55, 0, .85, .55);
}
85%{ opacity: 1; }
100%{
transform: translate3d(calc(var(--x) * var(--s)), calc(var(--fall) * var(--s)), 0);
opacity: 0;
}
}
/* Tumble, on its own clock. */
@keyframes stlCfTumble{
to{ transform: rotate3d(1, .8, .35, var(--rot)); }
}
/* Keep the spread proportional to the card on small screens. The per-piece
travel is authored in px for a desktop-width card, and the widest piece throws
262px — most of a phone screen — which pushed the document wider than the
viewport and let the page scroll sideways mid-burst. --s scales every piece's
whole trajectory at once.
Scaling the trajectory is the fix; a `transform: scale()` here would do nothing,
because the animation owns `transform` and would simply overwrite it. */
@media (max-width: 820px){
.stl-cf{ --s: .6; }
.stl-cf-pop--a{ left: 34%; }
.stl-cf-pop--b{ left: 66%; }
}
@media (max-width: 560px){
.stl-cf{ --s: .42; }
}
/* Celebration is decorative — sit it out entirely if motion is unwelcome. */
@media (prefers-reduced-motion: reduce){
.stl-cf{ display: none; }
}
.stl-num{
display: block;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(30px, 3vw, 40px);
line-height: 1;
color: var(--brand-red);
opacity: .9;
}
.stl-step{
margin: clamp(8px, 1vw, 12px) 0 clamp(8px, 1vw, 12px);
font-family: var(--sans);
font-weight: 600;
font-size: clamp(16px, 1.3vw, 19px);
color: var(--ink);
}
.stl-card p{
margin: 0;
font-family: var(--sans);
font-weight: 400;
font-size: var(--body);
line-height: 1.8;
color: var(--ink-soft);
}
/* ---- Mobile: spine on the left, all cards to the right ---- */
@media (max-width: 820px){
.stl-line{ left: 21px; }
.stl-item{ grid-template-columns: 42px 1fr; column-gap: 18px; }
.stl-marker{ grid-column: 1; }
.stl-item:nth-of-type(odd) .stl-card,
.stl-item:nth-of-type(even) .stl-card{
grid-column: 2; justify-self: stretch; max-width: none;
}
.stl-dot::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
.stl-dot, .stl-card{ transition: none; }
}
/* =========================================================
ABOUT — TESTIMONIALS (peek carousel over a photo)
Solid white center card flanked by translucent prev/next
cards that peek from behind. JS toggles is-active/is-prev/
is-next on the three figures; arrows advance.
========================================================= */
.atst{
position: relative;
overflow: hidden;
color: #fff;
padding-block: clamp(64px, 8vw, 110px);
}
.atst-bg{ position: absolute; inset: 0; z-index: 0; }
.atst-bg picture{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.atst-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Brand-tinted darkening scrim so the white cards + heading stay legible */
.atst-bg::after{
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(58,4,4,.55) 0%, rgba(17,17,17,.55) 55%, rgba(17,17,17,.72) 100%),
linear-gradient(90deg, rgba(143,11,9,.32), rgba(17,17,17,.32));
}
.atst-inner{ position: relative; z-index: 1; }
.atst-head{ text-align: center; margin: 0 auto clamp(34px, 4.5vw, 60px); }
.atst-title{ margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.22); }
.atst-sub{
margin: clamp(12px, 1.4vw, 18px) 0 0;
font-family: var(--sans);
font-weight: 500;
font-size: clamp(12px, 1.4vw, 15px);
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
}
/* Stage: active card centered in flow (margin auto → defines the height),
side cards absolutely anchored to the stage centre and peeking behind it. */
.atst-stage{
position: relative;
min-height: 340px;
max-width: 1120px;
margin: 0 auto;
}
.atst-item{ display: none; width: min(600px, 100%); margin-inline: auto; }
.atst-card{
width: min(600px, 100%);
min-height: 460px; /* uniform card height (both behind cards match) */
display: flex;
flex-direction: column;
justify-content: center; /* center content vertically */
padding: clamp(30px, 4vw, 56px) clamp(26px, 4vw, 60px);
text-align: center;
background: #fff;
color: var(--ink);
}
.atst-name{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(19px, 1.8vw, 25px);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
}
.atst-quote{
margin: clamp(16px, 2vw, 24px) 0 0;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.72;
color: var(--ink-soft);
}
.atst-more{
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center; /* keep natural width inside the flex card */
margin-top: clamp(22px, 2.6vw, 32px);
padding: 15px 34px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: var(--brand-red);
border: 1px solid var(--brand-red);
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.atst-more:hover,
.atst-more:focus-visible{ background: var(--ink); border-color: var(--ink); color: #fff; }
/* Active card sits on top, centered in normal flow (defines the stage height) */
.atst-item.is-active{ display: block; position: relative; z-index: 3; }
.atst-item.is-active .atst-card{ margin-inline: auto; }
.atst-item.is-active .atst-card{ box-shadow: 0 30px 70px rgba(17,17,17,.4); }
/* Side cards: translucent, blurred, tucked behind the center card */
/* Side cards sit directly behind the center card, tucked so only their
outer edges peek out (no gap). Anchored to the stage center, then shifted
left/right by ~28% of a card width and scaled down slightly for depth. */
.atst-item.is-prev,
.atst-item.is-next{
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: min(600px, 100%);
}
.atst-item.is-prev .atst-card,
.atst-item.is-next .atst-card{
width: 100%;
background: rgba(255,255,255,.15);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: rgba(255,255,255,.9);
}
.atst-item.is-prev .atst-name,
.atst-item.is-next .atst-name{ color: #fff; }
.atst-item.is-prev .atst-quote,
.atst-item.is-next .atst-quote{ color: rgba(255,255,255,.82); }
.atst-item.is-prev{ transform: translate(-120%, -50%) scale(.86); }
.atst-item.is-next{ transform: translate(20%, -50%) scale(.86); }
/* Swipe/drag instead of arrows. pan-y hands the vertical axis back to the
browser, so swiping down the page still scrolls it and we only claim the x.
user-select: none stops a drag from also highlighting the quote text
underneath it (the browser's default response to a press-and-drag). */
.atst-stage{
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.atst-stage:active{ cursor: grabbing; }
/* Peeking side cards double as prev/next controls (see site.js). */
.atst-item.is-prev,
.atst-item.is-next{ cursor: pointer; }
/* Focusable now that it is keyboard-operated, so it needs a visible focus ring. */
.atst-stage:focus-visible{
outline: 2px solid #fff;
outline-offset: 6px;
}
/* On smaller screens the peek cards crowd the center card, so hide them
and show only the active testimonial. */
@media (max-width: 1024px){
.atst-item.is-prev,
.atst-item.is-next{ display: none; }
}
/* =========================================================
GUIDES PAGE — downloadable guide cards
Clickable cards; each opens a PDF in a new tab (the
browser's viewer previews it with a download option).
========================================================= */
.guides-dl{ padding-block: clamp(64px, 8vw, 120px); background: var(--bg); }
.guides-head{ text-align: center; max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); }
.guides-head .section-title{ margin: 0; }
.guides-sub{
margin: clamp(16px, 2vw, 22px) auto 0;
max-width: 76ch;
font-family: var(--sans);
font-weight: 400;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.7;
color: var(--ink-soft);
}
.guide-cards{
list-style: none; margin: 0 auto; padding: 0;
max-width: 1200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 36px);
}
.guide-card{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(14px, 1.6vw, 20px);
height: 100%;
padding: clamp(30px, 4vw, 50px);
background: #fff;
border: 1px solid var(--rule);
text-decoration: none;
color: var(--ink);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.guide-card:hover,
.guide-card:focus-visible{
transform: translateY(-4px);
border-color: var(--brand-red);
box-shadow: 0 24px 48px rgba(17,17,17,.12);
}
.guide-card-icon{ color: var(--brand-red); line-height: 0; }
.guide-card-title{
font-family: var(--serif);
font-weight: 500;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.1;
}
.guide-card-text{
font-family: var(--sans);
font-weight: 400;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.7;
color: var(--ink-soft);
}
.guide-card-cta{
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 12px;
padding-top: clamp(8px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--brand-red);
}
.guide-card-arrow{ flex: none; transition: transform .3s ease; }
.guide-card:hover .guide-card-arrow{ transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){
.guide-card,
.guide-card-arrow{ transition: none; }
.guide-card:hover,
.guide-card:focus-visible{ transform: none; }
}
@media (max-width: 860px){
.guide-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.guide-cards{ grid-template-columns: 1fr; }
}
/* ---- Footer: dark, organized columns ---- */
.footer{ background: #111111; color: #fff; }
.footer-inner{
display: grid;
grid-template-columns: 1.4fr 1fr 1.3fr;
gap: clamp(32px, 5vw, 72px);
padding-block: clamp(48px, 6vw, 80px) clamp(36px, 4vw, 52px);
}
/* Tighten footer against the CTA when it directly follows it (reviews page) */
/* The .jcta photo dissolves into the #111 footer, so the footer tightens up when
it follows one. The .jcta sits inside and the footer outside it, so the
two are no longer siblings; match on main's last child instead. The bare
sibling selector is kept for any page that closes with a .jcta outside . */
.jcta + .footer .footer-inner,
main:has(> .jcta:last-child) + .footer .footer-inner{ padding-top: clamp(22px, 3vw, 40px); }
/* Logo with the TREC license number set beside it, separated by a hairline rule. */
.footer-brand-top{
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 26px);
}
.footer-logo{ height: clamp(56px, 6vw, 74px); width: auto; display: block; flex: none; }
.footer-license{
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
margin: 0;
/* Stretch to the logo's height so the rule reads as a divider between the two,
rather than a short tick beside the text. */
align-self: stretch;
padding-left: clamp(18px, 2vw, 26px);
border-left: 1px solid rgba(255,255,255,.18);
font-family: var(--sans);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.4;
color: rgba(255,255,255,.5);
}
.footer-license-num{
font-size: 14px;
letter-spacing: .06em;
color: rgba(255,255,255,.85);
}
.footer-h{
font-family: var(--serif);
font-style: italic;
font-size: 17px;
color: rgba(255,255,255,.55);
margin: 0 0 12px;
}
.footer-col .footer-h:not(:first-child){ margin-top: clamp(20px, 2.4vw, 30px); }
.footer-link,
.footer-text{
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,.85);
margin: 0;
}
.footer-link{ text-decoration: none; transition: color .25s ease; }
.footer-link:hover{ color: #fff; }
.footer-links-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.footer-links-grid ul{ list-style: none; margin: 0; padding: 0; }
.footer-links-grid li{ margin-bottom: 12px; }
.footer-links-grid a{
position: relative;
display: inline-block;
font-family: var(--sans);
font-size: 14px;
color: rgba(255,255,255,.85);
text-decoration: none;
transition: color .25s ease;
}
/* Whisper-subtle underline that sweeps in from the left on hover/focus. */
.footer-links-grid a::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: currentColor;
opacity: .55;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s cubic-bezier(.2,.65,.25,1);
}
.footer-links-grid a:hover::after,
.footer-links-grid a:focus-visible::after{ transform: scaleX(1); }
.footer-links-grid a:hover{ color: #fff; }
@media (prefers-reduced-motion: reduce){
.footer-links-grid a::after{ transition: none; }
}
/* Copyright left, socials centred, Privacy Policy right. The 1fr/auto/1fr grid
keeps the socials centred on the bar itself rather than in the gap between the
two side items, which drift in width. */
.footer-bottom{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding-block: clamp(20px, 2.4vw, 28px);
border-top: 1px solid rgba(255,255,255,.12);
}
.footer-bottom .footer-copy{ justify-self: start; }
.footer-bottom .footer-social{ justify-self: center; }
.footer-bottom .footer-credit{ justify-self: end; }
/* Page 1 Design agency credit.
The logo is deliberately hotlinked from page1design.co rather than copied into
public/images/: the agency updates that file and wants it to propagate here
without a redeploy. Do not localize it into the responsive picture system.
The link is dofollow on purpose (rel="noopener" only, never nofollow) so it
passes SEO equity, and the logo art already reads "Powered by Page 1 Design",
so it carries no text label. */
.footer-credit{ display: inline-flex; align-items: center; }
.footer-credit a{
display: inline-flex;
align-items: center;
opacity: .7;
transition: opacity .2s ease;
}
.footer-credit a:hover{ opacity: 1; }
.footer-credit img{ height: 22px; width: auto; }
.footer-copy{
font-family: var(--sans);
font-size: 12.5px;
letter-spacing: .04em;
color: rgba(255,255,255,.6);
margin: 0;
}
.footer-copy a{
color: rgba(255,255,255,.6);
text-decoration: none;
transition: color .25s ease;
}
.footer-copy a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-copy-sep{
display: inline-block;
margin: 0 10px;
color: rgba(255,255,255,.3);
}
/* Social icons — live in the centre of the bottom bar. */
.footer-social{
display: flex;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-social a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
color: rgba(255,255,255,.75);
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.footer-social svg{ width: 20px; height: 20px; display: block; }
.footer-social a:hover{
background: var(--brand-red);
border-color: var(--brand-red);
color: #fff;
}
/* TREC disclosures.
Texas Real Estate Commission rules require a license holder's business website
to link the Information About Brokerage Services form and the Consumer
Protection Notice from the homepage, using approved label wording, in a readily
noticeable place, at a minimum font size. Both labels we use ("TREC Information
About Brokerage Services" and "TREC Consumer Protection Notice") carry a 12pt
minimum. 12pt is 16px, so both links are pinned at 16px and must not be shrunk
to match the rest of the footer chrome. */
.footer-legal-links{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: clamp(20px, 2.4vw, 28px);
}
.footer-legal-links a{
font-family: var(--sans);
font-size: 16px; /* 12pt — TREC minimum. Do not reduce. */
line-height: 1.45;
color: rgba(255,255,255,.8);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .25s ease;
}
.footer-legal-links a:hover{ color: #fff; }
@media (max-width: 860px){
.footer-inner{ grid-template-columns: 1fr 1fr; }
.footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 720px){
/* Not enough width for three across: stack and centre the whole bar. */
.footer-bottom{
grid-template-columns: 1fr;
justify-items: center;
gap: 22px;
text-align: center;
}
.footer-bottom .footer-copy,
.footer-bottom .footer-social,
.footer-bottom .footer-credit{ justify-self: center; }
/* Socials read better first on mobile, above the fine print. */
.footer-bottom .footer-social{ order: -1; }
}
@media (max-width: 520px){
.footer-inner{ grid-template-columns: 1fr; }
.footer-links-grid{ gap: 8px 44px; }
}
/* =========================================================
NEW CONSTRUCTION — "THE BUILD PHASES" (blueprint spec sheet)
Unique to /new-construction: buyers owns the accordion and
sellers owns the timeline, so this page gets a drafting-table
band instead — six phase cards on a faint blueprint grid,
each annotated with a stroke-only serif numeral and drafting
corner ticks. The page is otherwise white top to bottom, so
this dark band is also its mid-page contrast beat.
========================================================= */
.bphase{
position: relative;
background: #111111;
padding-block: clamp(64px, 8.5vw, 124px);
overflow: hidden;
}
/* The brand maroon (#8f0b09) only reaches ~1.9:1 on #111 — far under AA.
This lifted tint clears 4.5:1, so the eyebrow and numerals stay legible
while still reading as the brand red. See conventions/accessibility.md. */
.bphase{ --bp-red: #e0625e; }
/* Blueprint grid: two hairline gradients, radially masked so the ruling
fades out at the edges instead of boxing the band in. Decorative only. */
.bphase::before{
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(to right, rgba(255,255,255,.055) 0 1px, transparent 1px 64px),
repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 64px);
-webkit-mask-image: radial-gradient(ellipse 76% 62% at 50% 45%, #000 52%, transparent 100%);
mask-image: radial-gradient(ellipse 76% 62% at 50% 45%, #000 52%, transparent 100%);
pointer-events: none;
}
.bphase-inner{ position: relative; z-index: 1; }
/* .about-feature carries its breathing room as a bottom margin, so the section
that follows this band butted straight against it. Match the air the band has
above it, so the dark block sits evenly between the two white sections. */
.bphase + .about-feature{ margin-top: clamp(56px, 8vw, 104px); }
/* ---- Header: eyebrow, title, standfirst — all stacked and left-justified ---- */
.bphase-head{
margin-bottom: clamp(44px, 5vw, 74px);
}
.bphase-eyebrow{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--bp-red);
}
.bphase-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(32px, 3.8vw, 54px);
line-height: 1.08;
letter-spacing: .01em;
color: #fff;
text-wrap: balance;
}
.bphase-sub{
margin: clamp(16px, 1.6vw, 22px) 0 0;
max-width: 60ch;
font-family: var(--sans);
font-size: var(--body);
line-height: 1.75;
color: rgba(255,255,255,.62);
}
/* ---- The spec sheet ---- */
.bphase-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.6vw, 24px);
list-style: none;
margin: 0;
padding: 0;
counter-reset: bphase;
}
/* White cards on the dark drafting band: sheets laid on the table. The fill is
opaque so the blueprint ruling stays behind them and never reads through. */
.bphase-card{
position: relative;
padding: clamp(26px, 2.5vw, 38px) clamp(22px, 2.1vw, 32px) clamp(30px, 2.8vw, 42px);
border: 1px solid rgba(0,0,0,.10);
background: var(--bg);
transition:
border-color .45s ease,
background-color .45s ease,
transform .45s cubic-bezier(.2,.65,.25,1);
}
.bphase-card:hover{
border-color: var(--brand-red);
background: var(--surface);
transform: translateY(-6px);
}
/* Inside the white cards the lifted tint is unnecessary — that value exists only
to clear AA against #111. On white, the true brand maroon is the legible one,
so rebind the token here and the ticks and numerals follow. */
.bphase-card{ --bp-red: var(--brand-red); }
/* Drafting corner ticks — eight hairline arms, one pair per corner. They draw
in on hover, the way a dimension mark lands on a drawing. */
.bphase-card::after{
content: "";
position: absolute;
inset: 9px;
pointer-events: none;
opacity: 0;
transition: opacity .45s ease;
background:
linear-gradient(var(--bp-red), var(--bp-red)) 0 0 / 11px 1px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 0 0 / 1px 11px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 100% 0 / 11px 1px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 100% 0 / 1px 11px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 0 100% / 11px 1px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 0 100% / 1px 11px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 100% 100% / 11px 1px no-repeat,
linear-gradient(var(--bp-red), var(--bp-red)) 100% 100% / 1px 11px no-repeat;
}
.bphase-card:hover::after{ opacity: .85; }
/* Numeral. Solid by default so it never vanishes; the stroke-only drafting
treatment is layered on only where text-stroke is actually supported. */
.bphase-num{
display: block;
margin: 0 0 clamp(16px, 1.9vw, 24px);
font-family: var(--serif);
font-weight: 600;
font-size: clamp(44px, 4.4vw, 64px);
line-height: 1;
letter-spacing: .02em;
color: var(--ink);
transition: color .45s ease, -webkit-text-stroke-color .45s ease;
}
/* The 1 in card 01 carries .fig-one — see TYPOGRAPHY UTILITIES. The numerals
here are stroked at a fixed 1px, so the smaller glyph keeps the same line
weight as the digits beside it. */
/* Black at rest, maroon on hover. This rule carries the fallback path (solid
numerals); the @supports block below restates it for the stroked outline. */
.bphase-card:hover .bphase-num{ color: var(--brand-red); }
@supports (-webkit-text-stroke: 1px red){
.bphase-num{
color: transparent;
-webkit-text-stroke: 1px var(--ink);
}
/* Outline only: the counters stay white and just the stroke goes maroon. */
.bphase-card:hover .bphase-num{
color: transparent;
-webkit-text-stroke-color: var(--brand-red);
}
}
.bphase-step{
margin: 0 0 12px;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(21px, 1.7vw, 27px);
line-height: 1.25;
color: var(--ink);
}
.bphase-card p{
margin: 0;
font-family: var(--sans);
font-size: clamp(13px, .9vw, 14px);
line-height: 1.7;
color: var(--ink-soft);
}
/* ---- Closing note + CTA ---- */
.bphase-foot{
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 44px);
flex-wrap: wrap;
margin-top: clamp(40px, 4.5vw, 66px);
padding-top: clamp(30px, 3.4vw, 46px);
}
.bphase-note{
margin: 0;
flex: 1 1 320px;
font-family: var(--serif);
font-style: italic;
font-size: clamp(19px, 1.6vw, 24px);
line-height: 1.5;
color: rgba(255,255,255,.8);
}
@media (max-width: 1024px){
.bphase-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
.bphase-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
INVESTMENTS — "HOW WE BUILD YOUR PORTFOLIO" (ledger)
Unique to /investments. Buyers owns the accordion, sellers
the timeline, new-construction the blueprint sheet — so the
investing page gets a statement ledger: six line items with
a monospace index and a category tag.
The motif: each row's dividing rule carries a maroon segment
that runs further across with every step (16% → 100%), so the
ledger's own hairlines double as a growth chart of the
position compounding. Widths come from --fill on each row.
========================================================= */
.ledger{ background: var(--bg); padding-block: clamp(60px, 8vw, 116px); }
/* ---- Header (centered, unlike the split heads elsewhere) ---- */
.ledger-head{
max-width: 720px;
margin: 0 auto clamp(42px, 5vw, 70px);
text-align: center;
}
.ledger-eyebrow{
margin: 0 0 clamp(10px, 1.2vw, 14px);
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--brand-red);
}
.ledger-title{
margin: 0;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(32px, 3.8vw, 52px);
line-height: 1.1;
letter-spacing: .01em;
color: var(--ink);
text-wrap: balance;
}
.ledger-rule{
display: block;
width: 116px; height: 1px;
margin: clamp(24px, 2.8vw, 36px) auto;
background: var(--rule-strong);
}
.ledger-sub{
margin: 0;
font-family: var(--sans);
font-size: var(--body);
line-height: 1.75;
color: var(--ink-soft);
}
/* ---- The ledger ---- */
/* Capped and centered: at full 1440 the rows would stretch to ~1330px, which
strands the category tag a long way from the copy it labels. */
.ledger-list{
list-style: none;
max-width: 1120px;
margin: 0 auto;
padding: 0;
border-top: 1px solid var(--rule);
}
.ledger-row{
position: relative;
display: grid;
grid-template-columns: clamp(52px, 5.5vw, 88px) 1fr clamp(118px, 12vw, 168px);
gap: clamp(14px, 2.2vw, 38px);
align-items: start;
padding: clamp(26px, 3vw, 40px) clamp(6px, 1.2vw, 18px);
transition: background-color .4s ease;
}
.ledger-row:hover{ background: var(--surface); }
/* Base hairline under every row. */
.ledger-row::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--rule);
}
/* The growth segment. Painted at its full --fill by default so no-JS and
reduced-motion visitors still see the progression; the reveal system only
animates it from zero when the row is actually armed. */
.ledger-row::before{
content: "";
position: absolute;
left: 0; bottom: 0;
z-index: 1;
height: 2px;
width: var(--fill);
background: var(--brand-red);
transition: width 1.1s cubic-bezier(.2, .65, .25, 1) .15s;
}
.ledger-row.reveal-armed::before{ width: 0; }
.ledger-row.reveal-armed.is-revealed::before{ width: var(--fill); }
/* Thin line icons in place of the index, one per step. They inherit currentColor
so the row hover carries them the same way it carried the numerals. Strokes
are set here rather than on each