/* Self-hosted fonts (OFL, licenses in /assets/fonts). Served from this site instead of
Google Fonts: no third-party connections before text renders, and no visitor data
sent to Google for fonts. Browsers only download a face when the page uses it. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/roboto-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--ink:#0B0D12;
--basin:#141822;
--slate:#1E2431;
--dusk:#2E4066;
--dusk-lo:rgba(46,64,102,.35);
--brass:#C9A24B;
--brass-lo:rgba(201,162,75,.14);
--bone:#F2F0EA;
--fog:#8891A3;
--line:rgba(242,240,234,.11);
--coral:#E2604A;
--serif:"Instrument Serif",Didot,Georgia,serif;
--sans:"Archivo",system-ui,-apple-system,sans-serif;
--pad:clamp(20px,5vw,80px);
--ease:cubic-bezier(.22,.61,.36,1);
--long:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--ink);color:var(--bone);
font-family:var(--sans);font-size:17px;line-height:1.6;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--brass);color:var(--ink)}
.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--pad);position:relative;z-index:2}
.eyebrow{
font-size:11px;font-weight:600;letter-spacing:.3em;
text-transform:uppercase;color:var(--brass);
}
/* Hero-only: floating like .herotag, no ground plate — Bill's call, the blurred
ellipse read as a shadowy box against the brighter pier sky. 14px/700 keeps it at
the WCAG large-text tier; a layered shadow supplies edge separation. */
.hero .eyebrow{
font-size:14px;font-weight:700;letter-spacing:.26em;color:var(--brass);
/* Two solid offset rings (1px + 2px). Brass has ~55% of white's luminance headroom,
so the halo must be thick enough that even the 2px ring measures against ink —
verified by ring-sampling, worst brass-vs-ring must clear 4.5. */
text-shadow:
1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink),
1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink),
2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
2px 1px 0 var(--ink), -2px 1px 0 var(--ink), 1px 2px 0 var(--ink), -1px 2px 0 var(--ink),
2px -1px 0 var(--ink), -2px -1px 0 var(--ink), 1px -2px 0 var(--ink), -1px -2px 0 var(--ink),
2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
0 0 1px var(--ink), 0 0 2px rgba(11,13,18,.94), 0 0 3px var(--ink),
0 1px 5px rgba(11,13,18,.95), 0 2px 14px rgba(11,13,18,.6);
}
.hero h1.eyebrow{font-family:var(--sans);line-height:1.6;max-width:none;margin:0}
/* ---------------- preview annotations ----------------
Coral gap markers, the "Hide gaps" button, .need boxes and .prelaunch content only show
when site.js tags (the netlify.app review link, PR deploy
previews, local dev). Hidden by default, so the public domain stays clean even if
JavaScript fails. */
html.preview .gap{outline:1px dashed var(--coral);outline-offset:5px;position:relative}
/* Labels wrap inside their element. A nowrap label is one long unclipped line: the IDX
label measured ~1,000px and made phones lay the whole homepage out wider than the
screen, so the page zoomed out. */
html.preview .gap::after{
content:attr(data-need);position:absolute;top:-11px;left:0;
background:var(--coral);color:#fff;font-size:9px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;line-height:1.5;
white-space:normal;width:max-content;max-width:min(520px,max(100%,240px));
z-index:900;border-radius:2px;
}
html.preview body.clean .gap{outline:none}
html.preview body.clean .gap::after{display:none}
#gaptoggle{display:none}
html.preview #gaptoggle{display:block}
#gaptoggle{
position:fixed;right:16px;bottom:16px;z-index:1200;
font-family:var(--sans);font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
background:var(--coral);color:#fff;border:0;
min-height:44px;padding:0 22px;cursor:pointer;border-radius:100px;
box-shadow:0 12px 36px rgba(226,96,74,.34);
transition:transform .4s var(--ease),background .4s var(--ease);
}
#gaptoggle:hover{transform:translateY(-2px);background:#C94F3A}
#gaptoggle:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* ---------------- nav ---------------- */
nav{
position:sticky;top:0;z-index:600;
background:rgba(11,13,18,.82);backdrop-filter:blur(20px);
border-bottom:1px solid var(--line);
}
.navin{
max-width:1340px;margin:0 auto;padding:14px var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1;white-space:nowrap}
.mark i{font-style:italic;color:var(--brass)}
.navlinks{display:flex;gap:34px}
.navlinks a{
font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;color:var(--fog);position:relative;padding-block:4px;
}
/* iPad Pro landscape is >=940px, so it gets the desktop nav WITH touch. This grows the
hit area to 44px without moving anything — ::after is already the underline. */
.navlinks a::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);transition:width .45s var(--ease)}
.navlinks a:hover{color:var(--bone)}
.navlinks a:hover::after{width:100%}
.navcall{
display:inline-flex;align-items:center;
font-size:12px;font-weight:700;letter-spacing:.1em;
border:1px solid var(--brass);color:var(--brass);
min-height:44px;padding:0 22px;border-radius:100px;
text-decoration:none;white-space:nowrap;
transition:background .45s var(--ease),color .45s var(--ease);
}
.navcall:hover{background:var(--brass);color:var(--ink)}
/* hamburger */
#navtoggle{
display:none;width:44px;height:44px;background:transparent;border:0;
cursor:pointer;position:relative;flex:0 0 44px;
}
#navtoggle span{
position:absolute;left:11px;width:22px;height:1.5px;background:var(--bone);
transition:transform .4s var(--ease),opacity .3s var(--ease);
}
#navtoggle span:nth-child(1){top:16px}
#navtoggle span:nth-child(2){top:22px}
#navtoggle span:nth-child(3){top:28px}
body.navopen #navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.navopen #navtoggle span:nth-child(2){opacity:0}
body.navopen #navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#mobilenav{
position:fixed;inset:0;z-index:590;background:var(--ink);
padding:96px var(--pad) 40px;
display:flex;flex-direction:column;
opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
body.navopen #mobilenav{opacity:1;visibility:visible;transform:none}
#mobilenav a{
display:flex;align-items:center;min-height:56px;
font-family:var(--serif);font-size:30px;
text-decoration:none;border-bottom:1px solid var(--line);
}
#mobilenav a:hover{color:var(--brass)}
#mobilenav .mcall{
margin-top:28px;justify-content:center;border:1px solid var(--brass);
color:var(--brass);border-radius:100px;font-size:24px;
}
@media(max-width:940px){
.navlinks,.navcall{display:none}
#navtoggle{display:block}
}
/* ---------------- hero ---------------- */
.hero{
position:relative;min-height:clamp(560px,86vh,880px);
display:flex;align-items:flex-end;overflow:hidden;
padding-bottom:clamp(40px,6vw,80px);
}
/* Phones: size the hero to its content. The old min-height:min(96vh,760px) pinned the
copy to the bottom of a near-full-screen box and left ~200px of empty sky between the
brokerage tag and the H1. Padding-top clears the two-line tag; the scrim still
darkens everything under the copy. */
@media(max-width:560px){
.hero{min-height:0;padding-top:112px}
}
.heroimg{
position:absolute;inset:0;z-index:0;
background-color:var(--ink);
background-image:
/* scrim first = topmost. Near-transparent over the skyline, solid ink by 84%
so the headline and claim always sit on flat dark, never on city lights. */
/* Left column carries the copy; the pier and wheel stay visible on the right.
The bottom wash starts at 46% and is solid ink by 78% so the claim and CTA sit
on flat dark, while the sky band above stays photographic. */
linear-gradient(to bottom,
rgba(11,13,18,.06) 0%, rgba(11,13,18,.10) 24%,
rgba(11,13,18,.41) 48%, rgba(11,13,18,.79) 66%,
rgba(11,13,18,.94) 80%, var(--ink) 90%),
linear-gradient(100deg,
rgba(11,13,18,.76) 0%, rgba(11,13,18,.56) 30%,
rgba(11,13,18,.30) 54%, transparent 72%),
/* corner vignette for the brokerage tag, unchanged in role */
radial-gradient(86% 68% at 100% 0%, rgba(11,13,18,.88) 0%, rgba(11,13,18,.55) 38%,
rgba(11,13,18,.22) 68%, transparent 100%),
/* brass warmth low-left, carried over from the original gradient treatment */
radial-gradient(90% 70% at 12% 88%, rgba(201,162,75,.11) 0%, transparent 58%),
var(--hero);
background-repeat:no-repeat;
background-size:cover,cover,cover,cover,cover;
/* centre, not top: this source is 1.294:1 with the pier and sun mid-frame, so
top-anchoring would crop the subject off the bottom at wide aspect ratios. */
background-position:center,center,center,center,center;
}
.heroimg::after{
content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(242,240,234,.05) 1px,transparent 1px);
background-size:3px 3px;opacity:.3;
}
/* ambient field — slow enough to register as light, not as animation */
.heroamb{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.heroamb i{
position:absolute;display:block;border-radius:50%;
filter:blur(90px);opacity:.24; /* dialled back — the photo carries the hero now */
}
.heroamb i:nth-child(1){
width:46vw;height:46vw;left:-8vw;top:-14vw;
background:radial-gradient(circle,rgba(46,64,102,.9),transparent 68%);
animation:float1 34s var(--ease) infinite alternate;
}
.heroamb i:nth-child(2){
width:34vw;height:34vw;right:-6vw;bottom:-12vw;
background:radial-gradient(circle,rgba(201,162,75,.42),transparent 68%);
animation:float2 41s var(--ease) infinite alternate;
}
.heroamb i:nth-child(3){
width:26vw;height:26vw;left:44%;top:24%;
background:radial-gradient(circle,rgba(46,64,102,.55),transparent 70%);
animation:float3 29s var(--ease) infinite alternate;
}
@keyframes float1{to{transform:translate3d(9vw,7vw,0) scale(1.16)}}
@keyframes float2{to{transform:translate3d(-11vw,-6vw,0) scale(1.1)}}
@keyframes float3{to{transform:translate3d(-7vw,9vw,0) scale(.88)}}
@media(prefers-reduced-motion:reduce){.heroamb i{animation:none}}
/* scroll-progress hairline */
#prog{
position:fixed;top:0;left:0;height:2px;width:0;z-index:1300;
background:linear-gradient(90deg,var(--dusk),var(--brass));
pointer-events:none;
}
/* Floating, no plate. Pure #fff not --bone: against the brightest pixel that lands
behind these glyphs, white measures 4.24:1 where bone measures 3.72 — the extra
half-stop is what lets the local scrim go away. The legibility work moved into the
hero's corner vignette, which reads as night falloff instead of a box. */
.herotag{
position:absolute;top:clamp(20px,4vw,44px);right:var(--pad);z-index:3;
font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
color:#fff;text-align:right;line-height:1.9;
text-shadow:0 1px 14px rgba(11,13,18,.85), 0 0 3px rgba(11,13,18,.6);
}
/* 20ch not 15ch: "Just ask my clients." is 20 characters and must hold on one line */
h1,.headline{
font-family:var(--serif);font-weight:400;
font-size:clamp(52px,9.4vw,142px);
line-height:.92;letter-spacing:-.022em;
margin:clamp(18px,2.6vw,30px) 0 0;max-width:20ch;
}
h1 i,.headline i{font-style:italic;color:var(--brass)}
.herofoot{
display:grid;grid-template-columns:1fr auto;
gap:clamp(22px,4vw,60px);align-items:end;
margin-top:clamp(26px,4vw,50px);
padding-top:clamp(20px,3vw,34px);border-top:1px solid var(--line);
}
@media(max-width:820px){.herofoot{grid-template-columns:1fr;gap:26px}}
.claim{font-size:clamp(17px,1.9vw,22px);font-weight:400;line-height:1.45;max-width:38ch;color:var(--fog)}
.claim b{color:var(--bone);font-weight:600}
.cta{
display:inline-flex;align-items:center;justify-content:center;
min-height:56px;padding:0 34px;
background:var(--brass);color:var(--ink);
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;border-radius:100px;white-space:nowrap;
transition:transform .5s var(--ease),background .5s var(--ease);
}
.cta:hover{transform:translateY(-3px);background:var(--bone)}
.cta:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
/* ---------------- proof ---------------- */
.proof{border-block:1px solid var(--line);background:var(--basin)}
.pgrid{max-width:1340px;margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcell{padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,26px) clamp(26px,3.4vw,44px) 0;border-right:1px solid var(--line)}
.pcell:last-child{border-right:0}
@media(max-width:820px){
.pcell:nth-child(2n){border-right:0}
.pcell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.pnum{font-family:var(--serif);font-size:clamp(40px,5.6vw,74px);line-height:.9;letter-spacing:-.03em}
.pnum sup{font-size:.3em;color:var(--brass);vertical-align:super;font-family:var(--sans);font-weight:600}
.plab{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fog);margin-top:14px}
/* ---------------- section head ---------------- */
.shead{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(22px,4vw,64px);align-items:end;margin-bottom:clamp(30px,4.4vw,56px)}
@media(max-width:880px){.shead{grid-template-columns:1fr;gap:18px}}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,88px);line-height:.96;letter-spacing:-.022em;margin-top:14px}
h2 i{font-style:italic;color:var(--brass)}
.shead p{font-size:16.5px;line-height:1.65;max-width:46ch;color:var(--fog)}
/* ---------------- SIGNATURE: range rail ---------------- */
.range{padding:clamp(60px,9vw,124px) 0}
.railshell{
border:1px solid var(--line);border-radius:5px;
background:linear-gradient(162deg,var(--basin),rgba(11,13,18,.7));
padding:clamp(26px,4vw,58px) clamp(20px,3.4vw,52px) clamp(22px,3vw,40px);
}
/* The RAIL is the control now, not each dot. One ~210px-tall full-width hit area with
nearest-point snapping, which frees the dots from the 44px touch minimum — so they can
sit at true price positions again. The old per-dot separation pass pushed a $780,000
listing to the $1,037,000 mark on a 375px screen. */
.rail{position:relative;height:210px;margin-top:8px;cursor:ew-resize;touch-action:pan-y}
.rail:focus-visible{outline:2px solid var(--brass);outline-offset:8px;border-radius:5px}
.railline{position:absolute;left:0;right:0;top:105px;height:1px;background:linear-gradient(90deg,var(--dusk),var(--brass))}
/* nodes alternate above / below the line so neighbouring prices can never collide */
.node{
position:absolute;transform:translate(-50%,-50%);
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
pointer-events:none; /* the rail handles all input */
}
.node.up{top:66px}
.node.down{top:144px}
.node::before{
content:"";width:11px;height:11px;border-radius:50%;
background:var(--ink);border:1.5px solid var(--brass);
transition:transform .45s var(--ease),background .45s var(--ease);
}
.node.on::before{background:var(--brass);transform:scale(1.6)}
/* tick connecting the dot back to the spine */
.node::after{
content:"";position:absolute;left:50%;width:1px;
background:var(--line);transform:translateX(-50%);
}
.node.up::after{top:22px;height:39px}
.node.down::after{bottom:22px;height:39px}
.nlab{
position:absolute;left:50%;transform:translateX(-50%);
font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--fog);
white-space:nowrap;transition:color .4s var(--ease),opacity .3s var(--ease);
}
/* Up to 6 listings every price is labelled. Past that only the active point and the two
endpoints — the endpoints are the range claim, so they stay put. */
.rail.dense .nlab{opacity:0}
.rail.dense .node.on .nlab,.rail.dense .node.end .nlab{opacity:1}
.node.up .nlab{bottom:calc(100% - 4px)}
.node.down .nlab{top:calc(100% - 4px)}
.node.on .nlab{color:var(--brass)}
.readout{
margin-top:clamp(18px,2.6vw,30px);padding-top:clamp(18px,2.6vw,28px);
border-top:1px solid var(--line);
display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);align-items:baseline;
min-height:96px;
}
@media(max-width:640px){.readout{grid-template-columns:1fr;gap:10px}}
.roprice{font-family:var(--serif);font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.03em;color:var(--brass)}
.roaddr{font-size:17px;font-weight:600;line-height:1.35}
.rocity{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fog);margin-top:6px}
.rospec{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--fog);margin-top:12px}
/* ---------------- listings: drifting rail ---------------- */
/* top padding added when the carousel moved up under .proof — it used to inherit
breathing room from the .range section that sat above it. */
.listings{padding:clamp(60px,9vw,124px) 0;overflow:hidden}
/* full-bleed viewport with feathered edges */
.lrail{
position:relative;margin-top:clamp(26px,4vw,48px);
overflow:hidden;padding-block:34px;
}
.lrail::before,.lrail::after{
content:"";position:absolute;top:0;bottom:0;z-index:4;
width:clamp(36px,8vw,180px);pointer-events:none;
}
.lrail::before{left:0;background:linear-gradient(90deg,var(--ink) 12%,rgba(11,13,18,0))}
.lrail::after{right:0;background:linear-gradient(270deg,var(--ink) 12%,rgba(11,13,18,0))}
/* the track is 4 identical copies; -25% == exactly one copy = seamless loop.
4 not 3: at 3 copies one copy is ~1970px and the remaining runway after a
full translate is ~3940px, which gaps on a maximized 4K window. 4 copies
leaves ~5910px of runway — no realistic viewport can outrun it.
NO gap property here on purpose — gap count (n-1) breaks the quarters math.
Spacing lives on .lcard margin-right so every cell is uniform width. */
/* NO padding on the track: max-content adds padding to the box, so -25%
would no longer equal one copy and the loop would jump every cycle. */
.ltrack{display:flex;width:max-content;will-change:transform}
@media(hover:hover){
.ltrack{animation:drift 46s linear infinite}
.lrail:hover .ltrack,
.lrail:focus-within .ltrack{animation-play-state:paused}
}
@keyframes drift{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-25%,0,0)}
}
/* touch: no hover to pause with, so drop the copies and hand it to native scroll */
@media(hover:none){
.lrail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lrail::-webkit-scrollbar{display:none}
/* safe here — animation is off, so the thirds math no longer matters */
.ltrack{animation:none;width:max-content;padding-inline:var(--pad)}
.ltrack .dupe{display:none}
.lcard{scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){
.ltrack{animation:none !important;padding-inline:var(--pad)}
.lrail{overflow-x:auto}
.ltrack .dupe{display:none}
}
.lcard{
flex:0 0 clamp(276px,25vw,368px);
margin-right:clamp(14px,2vw,26px);
border:1px solid var(--line);border-radius:5px;overflow:hidden;
background:linear-gradient(176deg,var(--basin),#10141D);
display:flex;flex-direction:column;position:relative;
transition:transform .8s var(--long),border-color .5s var(--ease),box-shadow .7s var(--ease);
}
.lcard::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:5px;
box-shadow:inset 0 1px 0 rgba(242,240,234,.06);
}
.lrail:hover .lcard{opacity:.42;transition:opacity .55s var(--ease),transform .8s var(--long),border-color .5s var(--ease),box-shadow .7s var(--ease)}
.lrail:hover .lcard:hover,
.lrail:focus-within .lcard:focus-within{opacity:1}
.lcard:hover{transform:translateY(-9px);border-color:var(--brass);box-shadow:0 30px 74px rgba(0,0,0,.6)}
.lphoto{
aspect-ratio:16/11;overflow:hidden;position:relative;
background:
radial-gradient(120% 100% at 50% 0%, rgba(46,64,102,.5), transparent 66%),
linear-gradient(152deg,#212C42,#0D1119);
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid var(--line);
transition:transform 1.3s var(--long);
}
/* deliberate placeholder — a brass plate, not an empty box */
.lplate{
display:flex;flex-direction:column;align-items:center;gap:9px;
font-size:9.5px;font-weight:600;letter-spacing:.26em;
text-transform:uppercase;color:rgba(201,162,75,.62);
}
.lplate span{
width:34px;height:1px;background:rgba(201,162,75,.42);
}
.lphoto img{width:100%;height:100%;object-fit:cover;display:block}
.lcard:hover .lphoto{transform:scale(1.05)}
.lhint{
margin-top:clamp(18px,2.6vw,30px);
font-size:11px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:rgba(136,145,163,.72);
}
.lhint .touch{display:inline}
.lhint .desk{display:none}
@media(hover:hover){.lhint .touch{display:none}.lhint .desk{display:inline}}
.lbody{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.lprice{font-family:var(--serif);font-size:clamp(30px,3.2vw,40px);line-height:1;letter-spacing:-.03em;color:var(--brass)}
.laddr{font-weight:600;font-size:16.5px;line-height:1.3}
.lcity{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fog);margin-top:3px}
.lspec{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--fog);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.lmls{font-size:9.5px;font-weight:600;letter-spacing:.16em;color:rgba(136,145,163,.6);margin-top:8px}
/* ---------------- about ---------------- */
.about{background:var(--basin);border-block:1px solid var(--line);padding:clamp(60px,9vw,124px) 0}
.abgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,76px);align-items:start}
@media(max-width:880px){
.abgrid{grid-template-columns:1fr;gap:34px}
/* single column makes the portrait full-width; cap it so a 468px source is never upscaled */
.portrait{max-width:420px;margin-inline:auto}
}
.portrait{
position:relative;border-radius:5px;overflow:hidden;
border:1px solid var(--line);background:var(--slate);
aspect-ratio:4/5;
}
/* Pre-cropped to 4:5 with the face at 38% height, so object-position only has to
hold the crop steady rather than guess it. No .gap on this element any more, so
the old .gap::after / .portrait::after collision is gone. */
.portrait img{
width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
filter:grayscale(.16) contrast(1.03);
}
.biobox{
border:1px solid var(--line);border-radius:5px;padding:28px;
font-size:14px;line-height:2;color:var(--fog);background:rgba(11,13,18,.42);
}
.biobox b{color:var(--bone);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
border:1px solid var(--line);padding:10px 16px;border-radius:100px;color:var(--fog);
transition:border-color .45s var(--ease),color .45s var(--ease);
}
.chip:hover{border-color:var(--brass);color:var(--brass)}
.chip.on{border-color:var(--brass);color:var(--brass)}
/* ---------------- reviews ---------------- */
.reviews{padding:clamp(60px,9vw,124px) 0}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,2vw,26px)}
.rcard{
border:1px solid var(--line);border-radius:5px;padding:32px;
background:var(--basin);display:flex;flex-direction:column;gap:20px;
transition:transform .6s var(--long),border-color .5s var(--ease);
}
.rcard:hover{transform:translateY(-5px);border-color:var(--brass)}
.stars{font-size:14px;letter-spacing:6px;color:var(--brass)}
.rquote{font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.42;letter-spacing:-.01em}
.rby{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.rby small{display:block;font-weight:400;letter-spacing:.1em;color:var(--fog);margin-top:6px;text-transform:none;font-size:12px}
.rsource{margin-top:26px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
/* ---------------- cities ribbon ---------------- */
.ribbon{border-block:1px solid var(--line);background:var(--basin);overflow:hidden;padding:20px 0}
.ribrun{display:flex;width:max-content;animation:roll 46s linear infinite}
.ribrun span{
font-family:var(--serif);font-size:clamp(20px,2.6vw,34px);
padding-inline:26px;white-space:nowrap;color:var(--fog);
}
.ribrun span b{color:var(--brass);font-weight:400}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------------- contact ---------------- */
.contact{padding:clamp(60px,9vw,124px) 0}
.cgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,80px)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr;gap:40px}}
.cbig{
font-family:var(--serif);font-size:clamp(30px,4.2vw,54px);line-height:1;
letter-spacing:-.025em;text-decoration:none;color:var(--brass);
display:inline-block;margin-top:12px;position:relative;padding-bottom:10px;
min-height:48px; /* measured 40px on mobile */
}
.cbig::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);transform-origin:left;transition:transform .55s var(--ease)}
.cbig:hover{color:var(--bone)}
.cbig:hover::after{transform:scaleX(.42);background:var(--bone)}
.cmeta{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);margin-top:34px}
/* padding not min-height: .caddr wraps a for the office address, so inline-flex
would collapse the line break. 28px + 16px padding clears the 44px minimum. */
.caddr{font-size:16px;line-height:1.75;text-decoration:none;margin-top:4px;display:inline-block;padding-block:8px}
.caddr:hover{color:var(--brass)}
form{display:grid;gap:20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.frow{grid-template-columns:1fr}}
label{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);display:block;margin-bottom:10px}
input,select,textarea{
width:100%;font-family:var(--sans);font-size:16px;
min-height:52px;padding:15px 16px;background:var(--basin);
border:1px solid var(--line);border-radius:3px;color:var(--bone);
transition:border-color .45s var(--ease),background .45s var(--ease);
}
input::placeholder,textarea::placeholder{color:rgba(136,145,163,.6)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brass);background:var(--slate)}
select option{background:var(--ink);color:var(--bone)}
textarea{resize:vertical;min-height:124px}
button[type=submit]{
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
background:var(--brass);color:var(--ink);border:0;border-radius:100px;
min-height:56px;padding:0 40px;cursor:pointer;justify-self:start;
transition:transform .5s var(--ease),background .5s var(--ease);
}
button[type=submit]:hover{transform:translateY(-3px);background:var(--bone)}
button[type=submit]:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
/* ---------------- footer ---------------- */
footer{background:var(--basin);border-top:1px solid var(--line);padding:56px 0 30px;font-size:14.5px;color:var(--fog)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;padding-bottom:34px}
.fgrid h4{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
/* footer links measured 16px tall — single-line, so inline-flex is safe here */
.fgrid a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fgrid a:hover{color:var(--bone)}
.fbot{border-top:1px solid var(--line);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:10.5px;letter-spacing:.1em;color:rgba(136,145,163,.72)}
.legal{max-width:70ch;line-height:2.2}
/* ---------------- motion ---------------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--long),transform 1s var(--long)}
.rv.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--long),transform .9s var(--long)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1){transition-delay:.05s}
.stg.in>*:nth-child(2){transition-delay:.13s}
.stg.in>*:nth-child(3){transition-delay:.21s}
.stg.in>*:nth-child(4){transition-delay:.29s}
.load{opacity:0;transform:translateY(30px);animation:enter 1.2s var(--long) forwards}
.load.d1{animation-delay:.12s}.load.d2{animation-delay:.3s}.load.d3{animation-delay:.5s}.load.d4{animation-delay:.68s}
@keyframes enter{to{opacity:1;transform:none}}
/* Utility labels run 9.5–10.5px, which is fine on a monitor and tight on a phone.
Raised only on small screens so the desktop type scale is unchanged. */
@media(max-width:560px){
.plab,.cmeta,label,.fgrid h4{font-size:11px}
.herotag{font-size:11.5px;letter-spacing:.2em}
.lmls{font-size:10.5px}
.rocity,.lcity,.rsource,.legal,.nlab{font-size:11px}
.lspec,.rospec{gap:12px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.rv,.stg>*,.load{opacity:1!important;transform:none!important}
.ribrun{animation:none}
html{scroll-behavior:auto}
}
/* ============ LIGHT THEME — body sections go paper-white ============
Dark stays only in the bookends: nav, .hero, footer. Palette is contrast-computed:
--brass fails 2.26:1 on paper and --fog fails 2.99, so light sections use
--brass-deep #7E5E1C (5.65:1) and --muted #566074 (5.96:1). Hero untouched. */
:root{
--paper:#FAF8F4; --card:#FFFFFF; --band:#F3EFE7;
--brass-deep:#7E5E1C; --muted:#566074;
--line-l:rgba(11,13,18,.13); --line-xl:rgba(11,13,18,.08);
}
body{background:var(--paper);color:var(--ink)}
/* REGRESSION FIX: flipping body color to ink silently turned every inherited hero
color near-black on the dark photo — caught by computed-style trace, not by the
harness, which was measuring assumed colors. Hero scope re-inherits bone; the h1
roman line is pure white per Bill. */
.hero{color:var(--bone)}
h1,.headline{color:#fff}
.eyebrow{color:var(--brass-deep)}
h2 i{color:var(--brass-deep)}
.shead p{color:var(--muted)}
/* proof strip */
.proof{background:var(--card);border-color:var(--line-l)}
.pcell{border-color:var(--line-l)}
.pnum sup{color:var(--brass-deep)}
.plab{color:var(--muted)}
/* range rail */
.railshell{background:var(--card);border-color:var(--line-l)}
.rail:focus-visible{outline-color:var(--brass-deep)}
.railline{background:linear-gradient(90deg,var(--brass-deep),var(--dusk))}
.node::before{border-color:var(--brass-deep);background:var(--card)}
.node.on::before{background:var(--brass-deep)}
.node::after{background:var(--line-l)}
.nlab{color:var(--muted)}
.node.on .nlab{color:var(--brass-deep)}
.readout{border-color:var(--line-l)}
.roprice{color:var(--brass-deep)}
.rocity,.rospec{color:var(--muted)}
/* listings carousel */
.lrail::before{background:linear-gradient(90deg,var(--paper),transparent)}
.lrail::after{background:linear-gradient(270deg,var(--paper),transparent)}
.lcard{background:var(--card);border-color:var(--line-l)}
.lcard:hover{border-color:var(--brass-deep)}
.lphoto{background:var(--line-xl);border-color:var(--line-l)}
.lprice{color:var(--brass-deep)}
.lcity{color:var(--muted)}
.lspec{color:var(--muted);border-color:var(--line-l)}
/* about */
.about{background:var(--paper);border-color:var(--line-l)}
.portrait{background:#E9E5DC;border-color:var(--line-l)}
.biobox{color:var(--muted);border-color:var(--line-l)}
.biobox b{color:var(--ink)}
.chip{color:var(--muted);border-color:rgba(11,13,18,.2)}
.chip:hover,.chip.on{color:var(--brass-deep);border-color:var(--brass-deep)}
/* reviews */
.rcard{background:var(--card);border-color:var(--line-l)}
.rcard:hover{border-color:var(--brass-deep)}
.stars{color:var(--brass-deep)}
.rby{border-color:var(--line-l)}
.rby small,.rsource{color:var(--muted)}
/* cities ribbon — dark navy separator band against the white page (Bill's call).
Basin ground with a dusk tint; cities white, separators bright brass — 15.7:1 and
6.5:1 against the band's lightest stop. Borders revert to the on-dark token. */
.ribbon{
background:linear-gradient(100deg,var(--basin),#1A2338 55%,var(--basin));
border-color:var(--line);
}
.ribrun span{color:#fff}
.ribrun span b{color:var(--brass)}
/* contact */
.cbig{color:var(--brass-deep)}
.cbig::after{background:var(--brass-deep)}
.cbig:hover{color:var(--ink)}
.cbig:hover::after{background:var(--ink)}
.cmeta{color:var(--muted)}
.caddr:hover{color:var(--brass-deep)}
label{color:var(--muted)}
input,select,textarea{background:var(--card);color:var(--ink);border-color:var(--line-l)}
input:focus,select:focus,textarea:focus{border-color:var(--brass-deep)}
select option{background:var(--card);color:var(--ink)}
button[type=submit]{background:var(--brass-deep);color:#fff}
button[type=submit]:hover{background:var(--ink);color:#fff}
button[type=submit]:focus-visible{outline-color:var(--ink)}
.formstatus{font-size:15px;line-height:1.5;color:var(--muted);min-height:1.5em;margin:0}
.formstatus.ok{color:var(--brass-deep);font-weight:600}
.formstatus.err{color:#B3261E;font-weight:600}
/* ============ NAV — solid black, white type ============
Was rgba(11,13,18,.82) + blur: a translucent bar over a white page picks up whatever
scrolls under it, so the band shifted tone section to section. Solid --ink is stable
at every scroll position and keeps the sticky behaviour untouched. */
nav{background:var(--ink);backdrop-filter:none}
.mark{color:#fff} /* "Carlos" white */
.mark i{color:var(--brass)} /* "Nogales" gold, unchanged */
.navlinks a{color:#fff} /* was --fog (5.9:1); white is 18.3:1 */
.navlinks a:hover{color:var(--brass)}
#mobilenav{background:var(--ink)}
#mobilenav a{color:#fff}
#navtoggle span{background:#fff}
/* hardcoded dark fills from the dark build, caught by rgba grep */
.biobox{background:var(--card)}
.lphoto{background:linear-gradient(162deg,#EFEBE2,#E5E0D4)}
/* IDX slot */
.idx{padding:clamp(60px,9vw,124px) 0;border-top:1px solid var(--line-l)}
.idxslot{
margin-top:34px;border:2px dashed rgba(11,13,18,.22);border-radius:5px;
background:var(--card);min-height:420px;display:flex;align-items:center;justify-content:center;
text-align:center;padding:40px;
}
.idxslot p{color:var(--muted);max-width:52ch;line-height:1.7;font-size:15px}
.idxslot code{color:var(--brass-deep);font-size:13px}
.alllink{
display:inline-flex;align-items:center;min-height:44px;margin-top:26px;
color:var(--brass-deep);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
font-size:13px;text-decoration:none;border-bottom:2px solid var(--brass-deep);
}
.alllink:hover{color:var(--ink);border-color:var(--ink)}
/* ============ MULTI-PAGE ADDITIONS ============
Everything below supports the service, reviews and policy pages. It reuses the
tokens above; nothing here restyles the homepage except the services row, the
proof caption and the nav brand link. */
:root{--text:#2B3140}
/* brand mark is a home link now */
a.mark{text-decoration:none}
/* six links + call button: tighten spacing before the hamburger takes over at 940 */
@media(max-width:1180px){.navlinks{gap:22px}}
.navlinks a[aria-current="page"]{color:var(--brass)}
/* proof strip source line */
.proofnote{
max-width:1340px;margin:0 auto;padding:14px var(--pad) 16px;
font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);border-top:1px solid var(--line-l);background:var(--card);
}
.pnum.word{font-size:clamp(34px,4.6vw,62px)}
/* homepage services row */
.svcs{padding:clamp(60px,9vw,124px) 0 0}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
@media(max-width:880px){.sgrid{grid-template-columns:1fr}}
a.svc{
display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,36px);
border:1px solid var(--line-l);border-radius:5px;background:var(--card);
text-decoration:none;color:var(--ink);
transition:transform .6s var(--long),border-color .5s var(--ease);
}
a.svc:hover,a.svc:focus-visible{transform:translateY(-5px);border-color:var(--brass-deep)}
a.svc:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,38px);line-height:1}
.svc p{color:var(--muted);font-size:16px;line-height:1.6}
.go{
margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--brass-deep);
}
/* contact additions */
.ch2{font-size:clamp(34px,5vw,68px)}
.chours{font-size:16px;line-height:1.75;margin-top:4px;padding-block:8px}
.fnote{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.fnote a{color:var(--brass-deep)}
.es{margin-top:30px;font-size:16px;line-height:1.6;color:var(--muted)}
.es a{color:var(--brass-deep);font-weight:600}
.fbot a{text-decoration:none}
.fbot a:hover{color:var(--bone)}
/* ---------------- inner page hero ---------------- */
.phero{
position:relative;color:var(--bone);
background:
linear-gradient(180deg,rgba(11,13,18,.82) 0%,rgba(11,13,18,.9) 60%,var(--ink) 100%),
var(--hero) center/cover no-repeat var(--ink);
padding:clamp(40px,7vw,96px) 0 clamp(52px,7vw,96px);
}
.phero .eyebrow{color:var(--brass)}
.phero h1{font-size:clamp(40px,6.2vw,84px);line-height:.98;max-width:18ch}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.55;color:rgba(242,240,234,.88);max-width:58ch;margin-top:26px}
.pctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.ghost{
display:inline-flex;align-items:center;justify-content:center;
min-height:56px;padding:0 30px;border:1px solid var(--brass);color:var(--brass);
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
text-decoration:none;border-radius:100px;white-space:nowrap;
transition:background .45s var(--ease),color .45s var(--ease);
}
.ghost:hover{background:var(--brass);color:var(--ink)}
.ghost:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
@media(max-width:480px){.pctas .cta,.pctas .ghost{width:100%}}
/* breadcrumbs: a