/* =====================================================================
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: #F5F8FA; /* banner / accent surface — cool off-white ties to navy brand */
/* Brand — extracted from the AIM Home Inspections logo mark (red target/crosshair,
navy + blue house illustration). Red drives links/CTAs/accents; navy drives text
and dark bands (see --ink below, which doubles as the dark-band background). */
--brand-primary: #C90601; /* AIM red — links, CTAs, eyebrows */
--brand-accent: #970501; /* darker red — hover state */
--brand-red: #C90601; /* kept for template parity with --brand-primary */
--brand-red-tint: #FF7A73; /* light red tint — for red accents on dark navy bands, AA-safe */
--brand-blue: #0C80DA; /* secondary accent from the logo's house illustration */
--brand-blue-dark: #0960A3; /* darker blue — hover state, same ratio as --brand-accent to --brand-primary */
/* Text */
--ink: #0B2137; /* deep navy-black — primary text AND dark-band background */
--ink-soft: #3A4A5A; /* slate-blue — secondary/body text, labels */
/* Lines */
--rule: rgba(11,33,55,.10);
--rule-strong: rgba(11,33,55,.20);
/* Type stacks — branded fonts loaded async in the page
(Cormorant Garamond for display/headings, Inter for UI/body).
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.
Token names kept as --serif/--sans from the template for minimal diff.
NOTE: "Archivo Fallback" below is metric-matched to Archivo, not Cormorant
Garamond — it's a leftover from the previous heading font and will still
produce a small layout shift on swap. Recompute a proper "Cormorant Garamond
Fallback" face (see FONT FALLBACK METRICS below) before Phase 6 QA/Lighthouse,
once the heading font is locked in at style sign-off. */
--serif: "Cormorant Garamond", "Archivo Fallback", ui-sans-serif, Arial, sans-serif;
--sans: "Inter", "Inter 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: "Archivo Fallback";
src: local("Arial Bold"), local("Arial");
size-adjust: 104%;
ascent-override: 95%;
descent-override: 27%;
line-gap-override: 0%;
}
@font-face{
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
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); }
/* Request Inspection is plain text, styled identically to the other nav
links (About/Services/Service Area/Reviews) — no border, no fill, in any
header state. */
/* Secondary nav item — click-to-call, last item in the header. Outlined
over the hero (transparent header); once the header goes solid/white
(.is-scrolled or .is-static) it fills red with white text, like a "call
now" button. */
.nav-links .nav-phone{
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 16px;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: inherit;
font-size: 12px;
letter-spacing: .04em;
white-space: nowrap;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.nav-links .nav-phone::after{ display: none; }
.nav-links .nav-phone-icon{ flex: none; }
.nav-links .nav-phone:hover{ background: #fff; color: var(--ink); border-color: #fff; }
.site-header.is-scrolled .nav-links .nav-phone,
.site-header.is-static .nav-links .nav-phone{
background: var(--brand-red);
border-color: var(--brand-red);
color: #fff;
}
.site-header.is-scrolled .nav-links .nav-phone:hover,
.site-header.is-static .nav-links .nav-phone: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/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAAOABgDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAhEAADAAEDBAMAAAAAAAAAAAABAgMABAUREiExMhNBUv/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABgRAAMBAQAAAAAAAAAAAAAAAAABEhMC/9oADAMBAAIRAxEAPwDau5JqENkiQR4H6yhdxelC1o/Gv0SMXw11JJNUAAT17eMk+rapJoOrk85N2ZjkY23GE4vQzJZe3BGGK66l6SaZ9W8jDG7EI//Z");
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(0,0,0,.48) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%),
linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
}
.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, 5vw, 68px);
line-height: 1.0556; /* 76px at 72px font-size */
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); }
/* Below this width the hero buttons wrap onto their own stacked rows (flex-wrap
on .hero-cta). "View Our Services" and "Get Inspection" have different text
lengths, so equal padding leaves visibly different pill widths once stacked —
tighten the longer label's padding and loosen the shorter one's to match. */
@media (max-width: 520px){
.hero-cta .btn-outline{ padding-inline: 27px; }
.hero-cta .btn-solid{ padding-inline: 41px; }
}
/* Scroll cue — a soft light travels down the line on loop, so it reads as
alive without competing with the hero. */
.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;
transition: opacity .3s ease;
}
.hero-scroll-line{
position: relative;
width: 1px; height: 44px;
background: rgba(255,255,255,.28);
overflow: hidden;
}
.hero-scroll-line::after{
content: "";
position: absolute;
left: 0; top: -40%;
width: 100%; height: 40%;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
animation: hero-scroll-line-travel 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
.hero-scroll:hover{ color: #fff; }
.hero-scroll:hover .hero-scroll-label{ opacity: 1; }
@keyframes hero-scroll-line-travel{
0%{ top: -40%; }
70%, 100%{ top: 100%; }
}
@media (prefers-reduced-motion: reduce){
.hero-scroll-line::after{ animation: none; opacity: 0; }
}
/* =========================================================
MOBILE (≤ 900px) — collapse nav into slide-down panel
========================================================= */
@media (max-width: 900px){
.menu-btn{ display: flex; }
/* The hero photos are 1920x1080 (16:9). At 100svh on a tall phone, object-fit:cover
crops height-driven and has to upscale a 1080px-tall source well past 2x to cover
a retina portrait screen, which is what reads as "blurry." Capping height at ~10:7
of the viewport width keeps the upscale mild — much sharper — at the cost of the
hero no longer filling the full screen edge-to-edge on phones. min() is a no-op on
landscape/wide viewports where 100svh is already shorter than 140vw. Padding is
trimmed to fit the shorter box, and the scroll cue is dropped since there's no
room for it without overlapping the CTA buttons. */
.hero{ min-height: min(100svh, 140vw); padding: 88px var(--gut) 56px; }
.hero-scroll{ display: none; }
.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; }
/* Request Inspection has no special mobile treatment — .nav-links a above
already gives it the same full-width, border-bottom row as every other
link. The phone pill, last in the list, keeps its own full-width pill
treatment, filled red — the slide-out panel is always solid white
regardless of .is-scrolled, so it always gets the "scrolled" red fill. */
.nav-links .nav-phone{
width: 100%;
justify-content: center;
margin-top: 18px;
padding: 14px 26px;
font-size: 14px;
white-space: normal;
text-align: center;
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;
/* Cormorant's old-style 1 is a short serifed stroke that, set in all caps
here, reads as a Roman numeral I ("11-Month" looked like "II-Month").
Lining figures are cap-height, matching the surrounding capitals, so no
size correction is needed the way .fig-one needs one next to old-style
digits elsewhere. */
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
/* 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: 900px; 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: 90ch;
}
.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; cursor: default; user-select: none; }
.stat-icon{ color: var(--brand-red); flex: none; }
.stat-icon--stars{ height: 18px; width: auto; }
/* 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%; }
/* object-position:top keeps Ricky/Martina's heads in frame — the source photo
is portrait, but the container's stretch-to-content height often renders
wider/shorter than that, and the default centered crop was cutting heads off. */
.team-media img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.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(20px, 2.4vw, 32px);
}
.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(56px, 7.5vw, 96px) 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(24px, 2.6vw, 36px);
}
.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; margin-top: clamp(14px, 2vw, 28px); }
.nbhd-list{ list-style: none; margin: 0 0 clamp(14px, 1.6vw, 20px); 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); }
/* .btn-pill's default margin-top is tuned for sitting under a paragraph; here it
stacks on top of .nbhd-list's own margin-bottom and reads as too much gap. */
.nbhd-aside .btn-pill{ margin-top: clamp(12px, 1.6vw, 20px); }
/* "View All" list row and the second (mobile-only) prev/next control pair —
both hidden by default, shown only in the stacked mobile layout below. */
.nbhd-viewall-item{ display: none; }
.nbhd-controls--mobile{ display: none; }
/* Right: horizontal filmstrip of tall image slides */
.nbhd-track{
--gap: clamp(16px, 2vw, 28px);
list-style: none; margin: clamp(-14px, -1.2vw, -8px) 0 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(11,33,55,.10) 0%, rgba(11,33,55,.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(11,33,55,.30) 0%, rgba(11,33,55,.52) 55%, rgba(11,33,55,.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: var(--ink);
transition: background .3s ease;
}
.nbhd-cta-link:hover .nbhd-cta-media,
.nbhd-cta-link:focus-visible .nbhd-cta-media{ background: #123353; }
.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); }
/* Controls move from the header row to sit right above the filmstrip instead. */
.nbhd-head .nbhd-controls{ display: none; }
.nbhd-controls--mobile{
display: flex;
justify-content: flex-end;
margin-bottom: clamp(-24px, -2.4vw, -14px);
}
.nbhd-viewall-item{ display: block; }
/* The "View All" list row now covers this button's job on mobile. */
.nbhd-aside .btn-pill{ display: none; }
}
@media (max-width: 560px){
/* Stacking to column + align-items:flex-end (inherited from .nbhd-head) right-justified
the eyebrow/title. Narrower gap keeps intro + controls on one left-aligned row instead. */
.nbhd-head{ gap: 12px; }
}
/* =========================================================
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(11,33,55,0) 32%, rgba(11,33,55,.55) 100%),
linear-gradient(180deg, rgba(11,33,55,.52) 0%, rgba(11,33,55,.66) 55%, rgba(11,33,55,.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;
}
.valu-embed .btn-outline{ --btn-fill: var(--brand-blue-dark); }
.valu-embed .btn-outline:hover,
.valu-embed .btn-outline:focus-visible{ border-color: var(--brand-blue-dark); }
/* =========================================================
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: 90ch;
}
.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(11,33,55,0);
transition: box-shadow .35s ease;
}
.svc-link:hover,
.svc-link:focus-visible{ box-shadow: 0 28px 64px rgba(11,33,55,.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(11,33,55,0) 28%, rgba(11,33,55,.42) 60%, rgba(11,33,55,.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; }
}
.svc-foot{ text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.svc-foot .btn-pill{ margin-top: 0; }
@media (max-width: 1024px){
.svc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
.svc-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
SERVICES GRID — ICON VARIANT (/services page only)
Replaces the photo-card grid with an icon-led card: a circular line-icon
badge, serif label, description, and a Learn More link. Flexbox (not grid)
so the trailing partial row (7 cards) centers itself instead of hugging
the left edge the way an incomplete CSS Grid row would.
========================================================= */
.svci-grid{
list-style: none; margin: 0; padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(20px, 2.4vw, 32px);
}
.svci-card{ flex: 1 1 250px; max-width: 300px; display: flex; }
.svci-link{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
text-decoration: none;
padding: clamp(36px, 4vw, 46px) clamp(22px, 2.6vw, 30px);
background: var(--bg);
border: 1px solid var(--rule);
border-radius: 4px;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.svci-link:hover,
.svci-link:focus-visible{
border-color: var(--brand-red);
box-shadow: 0 24px 48px rgba(11,33,55,.12);
transform: translateY(-4px);
}
.svci-icon-badge{
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
flex: none;
border-radius: 50%;
border: 1px solid var(--rule-strong);
color: var(--ink);
margin-bottom: clamp(20px, 2.4vw, 26px);
transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.svci-icon{ width: 28px; height: 28px; }
.svci-link:hover .svci-icon-badge,
.svci-link:focus-visible .svci-icon-badge{
border-color: var(--brand-red);
color: var(--brand-red);
background: rgba(201,6,1,.06);
}
.svci-label{
font-family: var(--serif);
font-weight: 700;
font-size: clamp(18px, 1.5vw, 21px);
letter-spacing: .03em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 12px;
}
.svci-desc{
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: clamp(20px, 2.2vw, 26px);
}
.svci-more{
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brand-red);
}
.svci-more-arrow{ transition: transform .3s ease; }
.svci-link:hover .svci-more-arrow,
.svci-link:focus-visible .svci-more-arrow{ transform: translateX(6px); }
/* Optional Services card is a static , not a link, but still gets the
same hover lift/border/shadow treatment as the clickable cards for visual
consistency across the row. */
.svci-static{ cursor: default; }
.svci-optional-list{
list-style: none; margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--sans);
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
@media (max-width: 700px){
.svci-card{ flex-basis: 100%; max-width: 420px; }
}
/* =========================================================
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;
}
/* Full "AIM Home Inspections | Aubrey, TX" on desktop; shortened to just the
brand name on tablet/mobile, where the card narrows and the full line wraps. */
.cta-eyebrow-short{ display: none; }
@media (max-width: 900px){
.cta-eyebrow-full{ display: none; }
.cta-eyebrow-short{ display: inline; }
}
.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(11,33,55,.12) 34%, rgba(11,33,55,.62) 100%),
linear-gradient(180deg, rgba(11,33,55,.66) 0%, rgba(11,33,55,.5) 45%, rgba(11,33,55,.72) 100%);
}
.rev-hero-inner{ position: relative; z-index: 1; max-width: 900px; }
/* "Warranty Inspections" wraps to two lines at the 900px box on desktop even
though it's short, because the 72px serif renders it just past the edge —
widen the box on this page only. */
body.warranty .rev-hero-inner{ max-width: 1060px; }
body.request-inspection .rev-hero-inner{ max-width: 1000px; }
.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);
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.rev-title{ margin: 0; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 4px 24px rgba(0,0,0,.4); 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);
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.rev-hero-sub{ color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
/* =========================================================
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(11,33,55,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(11,33,55,.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(11,33,55,.16) 0%, rgba(11,33,55,.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;
}
/* Request Inspection page: stack the intro copy and the form as two
centered rows instead of the Contact page's side-by-side grid. */
body.request-inspection .contact-grid{
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
body.request-inspection .contact-info{ max-width: 720px; }
body.request-inspection .contact-info-title{ font-size: clamp(28px, 3.2vw, 42px); }
body.request-inspection .about-rule--left{ margin-inline: auto; }
body.request-inspection .contact-lead{ margin-inline: auto; max-width: 720px; }
body.request-inspection .contact-form-wrap{ width: 100%; max-width: 1080px; }
/* =========================================================
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(11,33,55,.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(72px, 11vw, 144px) clamp(30px, 4.6vw, 64px);
}
.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(11,33,55,.72) 0%, rgba(11,33,55,.42) 55%, rgba(11,33,55,.18) 100%),
linear-gradient(180deg, rgba(11,33,55,.15) 0%, rgba(11,33,55,.3) 40%, rgba(11,33,55,.85) 82%, rgba(11,33,55,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(16px, 8vw, 132px); /* nudged in from the logo's edge, toward center */
}
.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 and Buyer Inspections' headlines are the longest of the
.jcta titles: their first authored line doesn't fit the 900px box once
.jcta-inner's left indent eats into it, so the line wrapped and the
pushed the heading onto three lines. Widen the box on these pages only —
the other .jcta pages have shorter titles and are already holding two lines. */
.new-construction .jcta-inner,
.buyers .jcta-inner{ max-width: 960px; }
/* New Construction's title now needs to hold on one line specifically —
960px isn't quite enough even though it fixed the earlier 3-line wrap. */
body.new-construction .jcta-inner{ max-width: 1100px; }
/* Service Area's jcta title ("Wherever You're Located, We'll Be There") is
longer still and wraps to two lines even at 960px — widen further so it
holds one line on desktop. */
body.service-area .jcta-inner{ max-width: 1150px; }
.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; }
/* =========================================================
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(16px, 2vw, 26px) 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; }
/* This slot's height stretches to match the body copy's, often shorter/wider than
the portrait source photo — default center cropping was cutting heads off. */
.about-feature-media--top img{ object-position: top; }
/* YouTube facade — static thumbnail + play button until clicked, so the page
never pays for the embed's JS/iframe unless the visitor actually watches.
No-JS fallback: the facade is a real link to the YouTube watch page. */
.about-feature-media .yt-facade{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; }
.about-feature-media .yt-facade-thumb{ width: 100%; height: 100%; object-fit: cover; display: block; }
.about-feature-media .yt-facade-play{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
width: clamp(56px, 7vw, 76px); height: clamp(56px, 7vw, 76px);
border-radius: 50%;
background: rgba(11, 33, 55, .78);
transition: background .2s ease, transform .2s ease;
}
.about-feature-media .yt-facade-play svg{ margin-left: 3px; }
.about-feature-media .yt-facade:hover .yt-facade-play,
.about-feature-media .yt-facade:focus-visible .yt-facade-play{
background: var(--brand-primary);
transform: translate(-50%, -50%) scale(1.06);
}
.about-feature-media .yt-facade:focus-visible{ outline: 2px solid var(--brand-red); outline-offset: -6px; }
.about-feature-media iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.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(11,33,55,.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(11,33,55,.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; }
@media (min-width: 901px){
.bstep-lead{ padding-left: clamp(24px, 4.5vw, 64px); }
}
.bstep-watermark{
position: absolute;
top: 50%; left: 50%;
width: clamp(260px, 30vw, 420px); 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(220px, 50vw, 320px); }
}
@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.
========================================================= */
.stl{ background: var(--bg); padding-block: clamp(60px, 8vw, 116px); }
/* 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);
}
.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(11,33,55,.55) 55%, rgba(11,33,55,.72) 100%),
linear-gradient(90deg, rgba(143,11,9,.32), rgba(11,33,55,.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(11,33,55,.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. */
.atst-stage{
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.atst-stage:active{ cursor: grabbing; }
/* 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;
}
/* Peek cards double as prev/next controls — clicking one jumps to it. */
.atst-item.is-prev,
.atst-item.is-next{ cursor: pointer; }
/* 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
Two 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: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.guides-head .section-title{ margin: 0; }
.guides-sub{
margin: clamp(16px, 2vw, 22px) auto 0;
max-width: 60ch;
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: 960px;
display: grid;
grid-template-columns: repeat(2, 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(11,33,55,.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: 640px){
.guide-cards{ grid-template-columns: 1fr; }
}
/* ---- Footer: dark, organized columns ---- */
/* Darker than --ink specifically for the footer — more black mixed into the
navy, distinguishing it from the lighter dark-navy bands used elsewhere. */
.footer{ background: #071624; color: #fff; }
.footer-inner{
display: grid;
grid-template-columns: 1.15fr 1fr 1.3fr;
gap: clamp(20px, 2.4vw, 36px);
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); }
.footer-brand-top{
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 26px);
}
/* Address. */
.footer-address-inline{
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
/* License credentials, stacked under the logo row. */
.footer-license-row{ margin: clamp(28px, 3.6vw, 42px) 0 0; }
.footer-license{
display: flex;
flex-direction: column;
gap: 3px;
margin: 0;
font-family: var(--sans);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.4;
color: rgba(255,255,255,.5);
}
/* Logo mirrors the license text on mobile only (see the 520px breakpoint below),
where it replaces the copy that otherwise sits in the bottom bar. */
.footer-license-logo{ display: none; }
.footer-license-num{
font-size: 14px;
letter-spacing: .06em;
color: rgba(255,255,255,.85);
}
.footer-license-group{
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 18px;
}
.footer-license-link{
margin-top: 18px;
color: #fff;
text-transform: none;
text-decoration: underline;
text-underline-offset: 2px;
transition: color .15s ease;
}
.footer-license-link:hover,
.footer-license-link:focus-visible{ 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); }
/* Phone / Location column: trim its content width so it doesn't run flush
against the Services/Quick Links column beside it. */
.footer-col:not(.footer-links){ padding-right: clamp(20px, 4vw, 56px); }
.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: 9px; }
.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-bottom-brand{ justify-self: start; }
.footer-bottom-brand{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.footer-bottom-logo{ height: 30px; width: auto; display: block; flex: none; }
.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;
}
@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; }
/* Stack address above license, directly above Phone. */
.footer-brand,
.footer-brand-top{ display: contents; }
.footer-license-row{
order: 2;
margin-top: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.footer-address-inline{ order: 3; }
.footer-col:not(.footer-links){ order: 4; }
.footer-col.footer-links{ order: 5; }
/* Logo moves up beside the license text; the bottom bar keeps just the copyright. */
.footer-license-logo{ display: block; height: 40px; width: auto; flex: none; }
.footer-bottom-logo{ display: none; }
}
/* =========================================================
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: var(--ink);
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