/* ============================================================
GRAYE THEME · Core stylesheet
Precision aesthetic · Grayscale only · Inter + JetBrains Mono
Compiled from Design Mockups source of truth.
============================================================ */
/* ============================================================
GRAYE — FINAL
Precision aesthetic · Grayscale only · Inter only
Neighborhoods restructured by parent category w/ view-all
============================================================ */
:root{
--bg: #ffffff;
--bg-2: #f4f4f3;
--bg-3: #ececea;
--ink: #0a0a0a;
--ink-2: #1a1a1a;
--mute: #6b6b6b;
--mute-2: #a0a0a0;
--line: #dcdcdc;
--line-2: #e8e8e6;
--max: 1600px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
HERO — asymmetric split (text left, image right)
============================================================ */
.hero{
min-height:100vh;
display:grid; grid-template-columns:1.1fr 1fr;
}
.hero .text{
padding:160px 60px 80px;
display:flex; flex-direction:column; justify-content:space-between;
min-height:100vh;
position:relative;
}
.hero .kicker{
display:flex; align-items:center; gap:14px;
color:var(--mute); font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
opacity:0;
}
.hero .kicker::before{ content:''; width:32px; height:1px; background:var(--mute); }
.hero h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(56px, 7.4vw, 132px);
line-height:0.92;
letter-spacing:-0.055em;
color:var(--ink);
max-width:12ch;
margin-top:40px;
}
.hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.hero h1 .char{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero h1 .char > span{ display:inline-block; transform:translateY(110%); }
.hero .sub{
max-width:44ch;
font-size:16px; line-height:1.65; color:var(--mute);
margin-top:36px;
opacity:0; transform:translateY(14px);
}
.hero .metrow{
margin-top:54px;
display:grid; grid-template-columns:repeat(3, auto); gap:0;
border-top:1px solid var(--ink);
opacity:0; transform:translateY(14px);
}
.hero .metrow .m{
padding:18px 28px 0 0;
border-right:1px solid var(--line);
margin-right:28px;
}
.hero .metrow .m:last-child{ border-right:none; margin-right:0; }
.hero .metrow .n{
font-weight:800; font-size:42px; line-height:1; letter-spacing:-0.035em;
}
.hero .metrow .n sup{ font-size:0.48em; font-weight:600; vertical-align:super; margin-right:2px; }
.hero .metrow .n .plus{ font-size:0.55em; font-weight:600; }
.hero .metrow .l{
margin-top:8px; font-size:11px; letter-spacing:0.04em; color:var(--mute);
text-transform:uppercase; font-weight:500;
}
.hero .actions{
margin-top:54px; display:flex; gap:10px; flex-wrap:wrap;
opacity:0; transform:translateY(14px);
}
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--ink); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ background:#2a2a2a; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.hero .fade{
position:absolute; left:60px; bottom:40px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute);
display:flex; align-items:center; gap:14px;
opacity:0;
}
.hero .fade::after{ content:''; width:36px; height:1px; background:var(--mute); }
.hero .visual{
position:relative; overflow:hidden; background:#111;
}
.hero .visual .img{
position:absolute; inset:0;
background-size:cover; background-position:center;
background-image:url('https://grayegrouprealty.com/wp-content/uploads/2025/12/boca-marina-yacht-club-east-boca-waterfront-aerial-scaled.jpg');
filter:grayscale(0.25) contrast(1.05);
transform:scale(1.02);
will-change:transform;
}
.hero .visual::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,10,10,0.1) 0%, transparent 40%, transparent 70%, rgba(10,10,10,0.3) 100%);
}
.hero .visual .corner{
position:absolute; bottom:30px; right:30px; z-index:3;
display:flex; flex-direction:column; align-items:flex-end; gap:8px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.82);
text-align:right;
}
.hero .visual .corner b{ font-size:12px; font-weight:600; color:#fff; }
/* ============================================================
MARQUEE
============================================================ */
.marquee{
background:var(--ink); color:var(--bg);
padding:22px 0; overflow:hidden;
border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.marquee-track{
display:flex; gap:72px; white-space:nowrap;
animation:marquee 44s linear infinite;
font-weight:300; font-size:26px; letter-spacing:-0.02em;
}
.marquee-track span{ display:inline-flex; align-items:center; gap:72px; }
.marquee-track .dot{ width:6px; height:6px; border-radius:50%; background:#fff; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* ============================================================
MANIFESTO
============================================================ */
.manifesto{
padding:180px 60px 160px; max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:320px 1fr; gap:80px;
}
.eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.manifesto h2{
font-weight:700;
font-size:clamp(44px, 5.4vw, 92px);
line-height:0.98;
letter-spacing:-0.04em;
max-width:18ch;
}
.manifesto h2 .weak{ font-weight:200; }
.manifesto p{
margin-top:36px;
font-size:17px; line-height:1.7; color:var(--mute);
max-width:60ch; font-weight:400;
}
.manifesto p + p{ margin-top:18px; }
.manifesto .sig{
margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
font-size:12px; font-weight:500; letter-spacing:0.04em; color:var(--mute);
text-transform:uppercase;
}
/* ============================================================
NEIGHBORHOODS — BY CATEGORY
============================================================ */
.nh{
background:var(--bg-2);
padding:120px 0 60px;
border-top:1px solid var(--line);
}
.nh .intro{
max-width:var(--max); margin:0 auto 60px; padding:0 60px;
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end;
}
.nh .intro h2{
font-weight:700; font-size:clamp(42px, 5vw, 84px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.nh .intro h2 .weak{ font-weight:200; }
.nh .intro p{
font-size:16px; line-height:1.7; color:var(--mute);
max-width:48ch;
}
.cat{
max-width:var(--max); margin:0 auto; padding:60px 60px 80px;
border-top:1px solid var(--line);
}
.cat:last-child{ border-bottom:1px solid var(--line); }
.cat .head{
display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:baseline;
margin-bottom:44px;
}
.cat .head .num{
font-family:'JetBrains Mono', monospace;
font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
color:var(--ink);
}
.cat .head .title{
display:flex; flex-direction:column; gap:10px;
}
.cat .head h3{
font-weight:800; font-size:clamp(36px, 4.2vw, 60px);
line-height:0.98; letter-spacing:-0.045em; color:var(--ink);
}
.cat .head h3 .weak{ font-weight:200; }
.cat .head .sub{
font-size:15px; line-height:1.6; color:var(--mute);
max-width:58ch;
}
.cat .head .view-all{
display:inline-flex; align-items:center; gap:8px;
font-family:'JetBrains Mono', monospace;
font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
color:var(--ink);
padding:10px 18px;
border:1px solid var(--ink); border-radius:999px;
transition:all .25s;
white-space:nowrap;
}
.cat .head .view-all:hover{ background:var(--ink); color:var(--bg); transform:translateY(-1px); }
.cat .head .view-all svg{ width:12px; height:12px; }
.cat .cards{
display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.nh-card{
position:relative; overflow:hidden; display:block;
background:#111; color:#fff;
transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.nh-card:hover{ transform:translateY(-4px); }
.nh-card .img{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.nh-card .img img{
width:100%; height:100%; object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s;
filter:grayscale(0.2);
}
.nh-card:hover .img img{ transform:scale(1.08); filter:grayscale(0); }
.nh-card .img::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
z-index:1;
}
.nh-card .body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:24px 24px;
display:flex; flex-direction:column; gap:4px;
}
.nh-card .cat-tag{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:rgba(255,255,255,0.78); margin-bottom:6px;
}
.nh-card .name{
font-weight:700; font-size:26px; letter-spacing:-0.025em; line-height:1.04;
}
.nh-card .meta{
margin-top:10px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
color:rgba(255,255,255,0.62);
}
.nh-card .arrow{
position:absolute; top:20px; right:20px; z-index:3;
width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,0.08); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.2);
display:flex; align-items:center; justify-content:center;
transition:background .3s, transform .3s;
}
.nh-card .arrow svg{ width:12px; height:12px; stroke:#fff; stroke-width:2; fill:none; }
.nh-card:hover .arrow{ background:#fff; transform:translate(4px,-4px); }
.nh-card:hover .arrow svg{ stroke:var(--ink); }
/* ============================================================
ABOUT
============================================================ */
.about{
padding:160px 60px; max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center;
}
.about .img{
aspect-ratio:4/5; overflow:hidden; background:#111; position:relative;
}
.about .img img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.1) contrast(1.02);
transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.about .img:hover img{ transform:scale(1.04); }
.about .img .badge{
position:absolute; top:24px; left:24px;
padding:10px 16px; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600;
color:var(--ink);
}
.about h2{
font-weight:700; font-size:clamp(40px, 4.6vw, 76px);
line-height:0.98; letter-spacing:-0.04em;
}
.about h2 .weak{ font-weight:200; }
.about .quote{
margin-top:34px;
font-size:18px; line-height:1.65; color:var(--ink-2);
max-width:48ch;
}
.about .origin{
margin-top:28px; padding:22px 26px;
background:var(--bg-3);
font-size:14px; line-height:1.65; color:var(--ink-2);
max-width:56ch;
border-left:2px solid var(--ink);
}
.about .origin b{ color:var(--ink); }
.about .btn{ margin-top:40px; }
/* ============================================================
JOURNAL
============================================================ */
.journal{
background:var(--ink); color:var(--bg);
padding:160px 60px 140px;
}
.journal .head{
max-width:var(--max); margin:0 auto 80px;
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
}
.journal .head .eyebrow{ color:rgba(255,255,255,0.65); }
.journal .head .eyebrow::before{ background:rgba(255,255,255,0.5); }
.journal h2{
font-weight:700; font-size:clamp(44px, 5.4vw, 92px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
}
.journal h2 .weak{ font-weight:200; }
.journal .see{
font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
color:#fff; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:4px;
}
.journal .see:hover{ border-color:#fff; }
.j-grid{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
}
.j-card{
display:block; color:var(--bg);
border-top:1px solid rgba(255,255,255,0.18);
padding-top:24px;
transition:border-color .3s;
}
.j-card:hover{ border-color:#fff; }
.j-card .img{
aspect-ratio:16/10; overflow:hidden; margin-bottom:24px; background:#222;
}
.j-card .img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.3); transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.j-card:hover .img img{ transform:scale(1.06); filter:grayscale(0); }
.j-card .meta{
display:flex; gap:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
color:rgba(255,255,255,0.6); margin-bottom:12px;
}
.j-card h3{
font-weight:600; font-size:24px; line-height:1.15; letter-spacing:-0.02em;
max-width:22ch;
}
.j-card p{
margin-top:14px; font-size:14px; color:rgba(255,255,255,0.65); line-height:1.65;
max-width:42ch;
}
/* ============================================================
MATCH CTA — typographic moment on paper
============================================================ */
.match{
background:var(--bg);
padding:180px 60px;
max-width:var(--max); margin:0 auto;
text-align:left;
border-top:1px solid var(--line);
}
.match .k{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
margin-bottom:32px;
display:inline-flex; gap:12px; align-items:center;
}
.match .k::before{ content:''; width:24px; height:1px; background:var(--mute); }
.match h2{
font-weight:800;
font-size:clamp(68px, 9.5vw, 180px);
line-height:0.9; letter-spacing:-0.055em;
max-width:14ch;
}
.match h2 .weak{ font-weight:200; }
.match p{
margin-top:40px; font-size:18px; line-height:1.65; color:var(--mute);
max-width:58ch;
}
.match .steps{
margin-top:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
}
.match .step{
border-top:1px solid var(--ink); padding-top:18px;
}
.match .step .n{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; color:var(--mute);
}
.match .step h4{
margin-top:14px; font-weight:700; font-size:20px; letter-spacing:-0.02em; line-height:1.2;
}
.match .step p{
margin-top:10px; font-size:14px; color:var(--mute); max-width:32ch; line-height:1.6;
}
.match .actions{ margin-top:56px; display:flex; gap:12px; flex-wrap:wrap; }
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
HERO MOTION (Ken Burns)
============================================================ */
@keyframes kenBurns{
0%{ transform:scale(1.02) translate(0,0); }
50%{ transform:scale(1.08) translate(-1%, 1%); }
100%{ transform:scale(1.02) translate(0,0); }
}
.hero .visual .img{ animation: kenBurns 28s ease-in-out infinite; }
/* ============================================================
IDX HERO SEARCH BAR
============================================================ */
.idx-bar{
background:var(--ink); color:var(--bg);
padding:28px 60px;
border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.idx-bar .ib-wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:auto 1fr 1fr 1fr auto; gap:24px; align-items:center;
}
.idx-bar .eye{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.7); display:inline-flex; align-items:center; gap:10px;
padding-right:24px; border-right:1px solid rgba(255,255,255,0.18);
}
.idx-bar .eye::before{
content:''; width:8px; height:8px; background:var(--ink); border-radius:50%;
animation:livepulse 2s ease-in-out infinite;
}
@keyframes livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.idx-bar .field{
display:flex; flex-direction:column; gap:4px;
padding:8px 18px;
border-left:1px solid rgba(255,255,255,0.08);
position:relative;
}
.idx-bar .field:first-of-type{ border-left:none; }
.idx-bar .field .k{
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.55);
}
.idx-bar .field select{
appearance:none; -webkit-appearance:none;
background:transparent; border:none; outline:none;
color:var(--bg); font-family:'Inter',sans-serif;
font-weight:600; font-size:15px; letter-spacing:-0.01em;
padding:2px 18px 2px 0;
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 4px center;
}
.idx-bar .field select option{ background:var(--ink); color:var(--bg); }
.idx-bar .go{
display:inline-flex; align-items:center; gap:10px;
padding:16px 22px;
background:var(--bg); color:var(--ink);
border-radius:999px; font-size:14px; font-weight:600;
border:1px solid var(--bg); cursor:pointer;
transition:background .25s, color .25s, transform .25s;
font-family:'Inter',sans-serif;
}
.idx-bar .go:hover{ background:transparent; color:var(--bg); transform:translateY(-1px); }
.idx-bar .go svg{ width:14px; height:14px; }
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials{
background:var(--bg);
padding:160px 60px; max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.testimonials .th{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:60px;
}
.testimonials h2{
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.testimonials h2 .weak{ font-weight:200; }
.testimonials .count{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8;
}
.testimonials .count b{ font-family:'Inter',sans-serif; font-size:28px; font-weight:800; letter-spacing:-0.03em; color:var(--ink); display:block; text-transform:none; }
.t-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.t-card{
padding:32px 30px;
background:var(--bg-2);
border:1px solid var(--line);
display:flex; flex-direction:column; gap:24px;
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.t-card:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.t-card .stars{
color:var(--ink); font-size:14px; letter-spacing:2px;
}
.t-card blockquote{
font-size:17px; line-height:1.6; color:var(--ink-2);
font-weight:400;
flex:1;
}
.t-card blockquote::before{ content:'"'; font-weight:700; margin-right:2px; }
.t-card blockquote::after{ content:'"'; font-weight:700; margin-left:2px; }
.t-card .who{
padding-top:22px; border-top:1px solid var(--line);
display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
}
.t-card .who .n{
font-weight:700; font-size:14px; letter-spacing:-0.01em;
}
.t-card .who .nh{
margin-top:3px;
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
}
.t-card .who .year{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; color:var(--mute);
}
/* ============================================================
NEWSLETTER CAPTURE
============================================================ */
.news-cap{
background:var(--ink); color:var(--bg);
padding:100px 60px;
border-top:1px solid var(--line);
}
.news-cap .nc{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.news-cap h2{
font-weight:700; font-size:clamp(36px, 4.4vw, 64px);
line-height:0.98; letter-spacing:-0.04em; color:var(--bg);
max-width:18ch;
}
.news-cap h2 .weak{ font-weight:200; }
.news-cap p{
margin-top:20px; font-size:16px; line-height:1.65; color:rgba(255,255,255,0.7);
max-width:44ch;
}
.nc-form{
display:flex; gap:10px; flex-wrap:wrap;
margin-top:20px;
}
.nc-form .field{
flex:1 1 280px;
padding:16px 18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.18);
color:var(--bg);
font-family:'Inter',sans-serif;
font-size:15px;
transition:border-color .2s, background .2s;
}
.nc-form .field::placeholder{ color:rgba(255,255,255,0.4); }
.nc-form .field:focus{ outline:none; border-color:var(--bg); background:rgba(255,255,255,0.08); }
.nc-form .submit{
padding:16px 24px;
background:var(--bg); color:var(--ink);
font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
border:1px solid var(--bg); cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
transition:background .25s, color .25s, transform .2s;
}
.nc-form .submit:hover{ background:transparent; color:var(--bg); transform:translateY(-1px); }
.nc-form .submit svg{ width:14px; height:14px; }
.news-cap .micro{
margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.news-cap .stat-right{
padding-left:40px; border-left:1px solid rgba(255,255,255,0.18);
display:flex; flex-direction:column; gap:24px;
}
.news-cap .stat-right .r{
display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline;
}
.news-cap .stat-right .r .n{ font-weight:800; font-size:40px; letter-spacing:-0.04em; color:var(--bg); line-height:1; }
.news-cap .stat-right .r .l{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
color:rgba(255,255,255,0.72); line-height:1.7;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px){
.cat .cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1100px){
.idx-bar, .testimonials, .news-cap{ padding-left:24px; padding-right:24px; }
.idx-bar .ib-wrap{ grid-template-columns:1fr 1fr; row-gap:16px; }
.idx-bar .eye{ grid-column:1 / 3; padding-right:0; padding-bottom:14px; border-right:none; border-bottom:1px solid rgba(255,255,255,0.18); }
.idx-bar .go{ grid-column:1 / 3; justify-content:center; }
.testimonials .th{ grid-template-columns:1fr; }
.t-grid{ grid-template-columns:1fr; }
.news-cap .nc{ grid-template-columns:1fr; gap:40px; }
.news-cap .stat-right{ padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding-top:30px; }
.nav, .hero .text, .manifesto, .nh .intro, .cat, .about, .journal, .journal .head, .j-grid, .match, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.hero{ grid-template-columns:1fr; }
.hero .text{ min-height:auto; padding-top:120px; padding-bottom:50px; }
.hero .visual{ min-height:70vh; }
.manifesto, .nh .intro, .about{ grid-template-columns:1fr; gap:40px; }
.about{ padding-top:100px; padding-bottom:100px; }
.cat .head{ grid-template-columns:auto 1fr; }
.cat .head .view-all{ grid-column:1 / 3; justify-self:start; margin-top:16px; }
.j-grid{ grid-template-columns:1fr; }
.match .steps{ grid-template-columns:1fr; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.hero .metrow{ grid-template-columns:1fr; }
.hero .metrow .m{ border-right:none; border-bottom:1px solid var(--line); margin-right:0; padding-right:0; padding-bottom:16px; margin-bottom:16px; }
.cat .cards{ grid-template-columns:1fr; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
.match h2{ font-size:56px; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:200;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.2);
}
/* ============================================================
PARENT CATEGORY PAGES (Central Boca, East Boca, Delray, Condos)
============================================================ */
/* ============================================================
GRAYE — Parent Category Pages (Central Boca / East Boca /
Delray Beach / Condos & Townhomes)
Locked Precision design system · Grayscale only · Inter only
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0.0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{ font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink); display:flex; align-items:center; gap:10px; }
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .mark .mix{ mix-blend-mode:difference; color:var(--bg); }
.nav.scrolled .mark{ color:var(--ink); }
.nav.scrolled .mark .mix{ mix-blend-mode:normal; color:var(--ink); }
.nav .mark .dot.mix{ background:var(--bg); }
.nav.scrolled .mark .dot.mix{ background:var(--ink); }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--bg); mix-blend-mode:difference; transition:opacity .2s, color .3s; position:relative; }
.nav.scrolled .links a{ color:var(--ink); mix-blend-mode:normal; }
.nav .links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.7,.2,.2,1); }
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--bg); letter-spacing:0.02em; mix-blend-mode:difference; }
.nav.scrolled .tel{ color:var(--ink); mix-blend-mode:normal; }
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--bg); color:var(--ink);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--bg);
transition:transform .25s, background .25s, color .25s, border-color .25s;
}
.nav.scrolled .cta{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.nav .cta:hover{ transform:translateY(-1px); }
.nav .cta svg{ width:14px; height:14px; }
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--ink); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ background:#2a2a2a; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.btn.on-dark{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.btn.on-dark:hover{ background:#2a2a2a; color:var(--bg); border-color:var(--bg); }
.btn.ghost.on-dark{ background:transparent; color:var(--bg); border-color:rgba(255,255,255,0.5); }
.btn.ghost.on-dark:hover{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb{
position:absolute; top:100px; left:0; right:0;
z-index:10;
max-width:var(--max); margin:0 auto; padding:0 60px;
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
color:rgba(255,255,255,0.78);
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.breadcrumb a{ color:rgba(255,255,255,0.78); transition:color .2s; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:0.45; }
.breadcrumb .current{ color:#fff; font-weight:600; }
/* ============================================================
HERO (parent-category)
============================================================ */
.p-hero{
position:relative;
height:92vh; min-height:700px;
overflow:hidden;
background:#000;
color:var(--bg);
}
.p-hero .media{
position:absolute; inset:0;
background-size:cover; background-position:center;
filter:grayscale(0.3) contrast(1.05) brightness(0.82);
transform:scale(1.04);
will-change:transform;
}
.p-hero::after{
content:''; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 55%, rgba(10,10,10,0.88) 100%);
}
.p-hero .content{
position:relative; z-index:2;
height:100%;
max-width:var(--max); margin:0 auto;
padding:180px 60px 60px;
display:grid; grid-template-rows:auto 1fr auto;
}
.p-hero .kicker{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
color:rgba(255,255,255,0.78);
display:inline-flex; align-items:center; gap:14px;
}
.p-hero .kicker::before{ content:''; width:40px; height:1px; background:rgba(255,255,255,0.6); }
.p-hero h1{
align-self:end;
font-weight:800;
font-size:clamp(64px, 10vw, 180px);
line-height:0.9;
letter-spacing:-0.06em;
color:var(--bg);
max-width:13ch;
}
.p-hero h1 .weak{ font-weight:200; letter-spacing:-0.045em; }
.p-hero .foot{
display:grid; grid-template-columns:1fr auto; gap:60px; align-items:end;
padding-top:30px; border-top:1px solid rgba(255,255,255,0.22);
}
.p-hero .foot p{
font-size:17px; line-height:1.65; color:rgba(255,255,255,0.88);
max-width:52ch; font-weight:400;
}
.p-hero .foot .meta{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.7);
text-align:right; line-height:1.8;
}
.p-hero .foot .meta b{ color:#fff; font-weight:600; font-size:11px; }
/* ============================================================
STATS BAR
============================================================ */
.p-stats{
max-width:var(--max); margin:0 auto; padding:60px 60px 0;
display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
border-bottom:1px solid var(--line);
}
.p-stats .s{
padding:36px 32px 44px 0;
border-right:1px solid var(--line);
margin-right:32px;
}
.p-stats .s:last-child{ border-right:none; margin-right:0; padding-right:0; }
.p-stats .s .n{
font-weight:800; font-size:clamp(42px, 4.8vw, 72px);
line-height:0.95; letter-spacing:-0.045em;
color:var(--ink);
}
.p-stats .s .n sup{ font-size:0.45em; font-weight:600; vertical-align:super; margin-right:2px; }
.p-stats .s .n .plus{ font-size:0.55em; font-weight:600; }
.p-stats .s .l{
margin-top:12px;
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
color:var(--mute); line-height:1.7;
max-width:22ch;
}
/* ============================================================
INTRO EDITORIAL
============================================================ */
.p-intro{
padding:140px 60px 120px; max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:320px 1fr; gap:80px;
}
.eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.p-intro h2{
font-weight:700; font-size:clamp(40px, 5vw, 84px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.p-intro h2 .weak{ font-weight:200; }
.p-intro p{
margin-top:30px; font-size:17px; line-height:1.72; color:var(--ink-2);
max-width:62ch;
}
.p-intro p + p{ margin-top:18px; }
.p-intro p.lede{
font-size:22px; line-height:1.45; color:var(--ink); font-weight:400;
letter-spacing:-0.015em;
max-width:54ch; margin-top:42px;
}
/* ============================================================
NEIGHBORHOODS GRID
============================================================ */
.p-nh{
background:var(--bg-2);
padding:120px 60px 140px;
border-top:1px solid var(--line);
}
.p-nh .head{
max-width:var(--max); margin:0 auto 60px;
display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:baseline;
}
.p-nh .head .num{
font-family:'JetBrains Mono',monospace;
font-size:12px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);
}
.p-nh .head h2, .p-nh .head h1{
font-weight:800; font-size:clamp(40px, 5vw, 78px);
line-height:0.98; letter-spacing:-0.045em; max-width:16ch;
}
.p-nh .head h2 .weak, .p-nh .head h1 .weak{ font-weight:200; }
.p-nh .head p{
margin-top:14px; font-size:15px; line-height:1.65; color:var(--mute);
max-width:52ch;
}
.p-nh .head .count{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--mute);
}
.p-nh-grid{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.p-nh-card{
position:relative; overflow:hidden; display:block;
background:#111; color:#fff;
transition:transform .5s cubic-bezier(.2,.7,.2,1);
border-radius:2px;
}
.p-nh-card:hover{ transform:translateY(-4px); }
.p-nh-card .img{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.p-nh-card .img img{
width:100%; height:100%; object-fit:cover;
transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s;
filter:grayscale(0.2);
}
.p-nh-card:hover .img img{ transform:scale(1.08); filter:grayscale(0); }
.p-nh-card .img::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.9) 100%);
}
.p-nh-card .tag-top{
position:absolute; top:20px; left:20px; z-index:3;
padding:8px 14px;
background:rgba(255,255,255,0.14); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.2);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:#fff; border-radius:999px;
}
.p-nh-card .body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:24px 28px 28px;
display:flex; flex-direction:column; gap:4px;
}
.p-nh-card .sub{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:rgba(255,255,255,0.72); margin-bottom:10px;
}
.p-nh-card .name{
font-weight:700; font-size:36px; letter-spacing:-0.03em; line-height:1;
}
.p-nh-card .row{
margin-top:16px;
display:flex; flex-wrap:wrap; gap:12px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
color:rgba(255,255,255,0.68);
}
.p-nh-card .row span{
padding:5px 10px;
border:1px solid rgba(255,255,255,0.2);
border-radius:2px;
}
.p-nh-card .arrow{
position:absolute; top:20px; right:20px; z-index:3;
width:40px; height:40px; border-radius:50%;
background:rgba(255,255,255,0.1); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.22);
display:flex; align-items:center; justify-content:center;
transition:background .3s, transform .3s;
}
.p-nh-card .arrow svg{ width:14px; height:14px; stroke:#fff; stroke-width:2; fill:none; }
.p-nh-card:hover .arrow{ background:#fff; transform:translate(4px,-4px); }
.p-nh-card:hover .arrow svg{ stroke:var(--ink); }
/* ============================================================
COMPARE MATRIX
============================================================ */
.p-compare{
background:var(--bg);
padding:140px 60px 80px;
border-top:1px solid var(--line);
}
.p-compare .head{
max-width:var(--max); margin:0 auto 56px;
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
}
.p-compare h2{
font-weight:800; font-size:clamp(40px, 5vw, 72px);
line-height:0.98; letter-spacing:-0.045em; max-width:16ch;
}
.p-compare h2 .weak{ font-weight:200; }
.p-compare .note{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--mute); max-width:24ch; line-height:1.7; text-align:right;
}
.p-compare-tbl{
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--ink);
}
.p-compare-tbl .row{
display:grid; grid-template-columns:1.4fr repeat(4, 1fr) 60px;
gap:20px; align-items:center;
padding:22px 0;
border-bottom:1px solid var(--line);
transition:background .3s;
}
.p-compare-tbl .row:hover{ background:var(--bg-2); }
.p-compare-tbl .row.th{
border-bottom:1px solid var(--ink);
padding:14px 0;
}
.p-compare-tbl .row.th > *{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--mute);
font-weight:500;
}
.p-compare-tbl .row:not(.th):hover{ padding-left:12px; padding-right:12px; }
.p-compare-tbl .row .n{ font-weight:700; font-size:20px; letter-spacing:-0.02em; }
.p-compare-tbl .row .n small{
display:block; margin-top:3px;
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
color:var(--mute); font-weight:500;
}
.p-compare-tbl .row .d{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.06em;
color:var(--ink-2);
}
.p-compare-tbl .row .d.is-yes{ color:var(--ink); font-weight:600; }
.p-compare-tbl .row .d.is-no{ color:var(--mute-2); }
.p-compare-tbl .go{
width:32px; height:32px; border-radius:50%;
border:1px solid var(--ink);
display:flex; align-items:center; justify-content:center;
transition:background .25s, transform .25s;
justify-self:end;
}
.p-compare-tbl .go svg{ width:12px; height:12px; stroke:var(--ink); stroke-width:2; fill:none; }
.p-compare-tbl .row:hover .go{ background:var(--ink); transform:translate(4px,-2px); }
.p-compare-tbl .row:hover .go svg{ stroke:var(--bg); }
/* ============================================================
JOURNAL TEASE
============================================================ */
.p-journal{
background:var(--ink); color:var(--bg);
padding:140px 60px 120px;
}
.p-journal .head{
max-width:var(--max); margin:0 auto 60px;
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
}
.p-journal .eyebrow{ color:rgba(255,255,255,0.65); }
.p-journal .eyebrow::before{ background:rgba(255,255,255,0.5); }
.p-journal h2{
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
color:var(--bg);
margin-top:20px;
}
.p-journal h2 .weak{ font-weight:200; }
.p-journal .see{
font-family:'JetBrains Mono',monospace;
font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
color:#fff; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:4px;
}
.p-journal .see:hover{ border-color:#fff; }
.p-j-grid{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
}
.p-j-card{
display:block; color:var(--bg);
border-top:1px solid rgba(255,255,255,0.18);
padding-top:22px;
transition:border-color .3s;
}
.p-j-card:hover{ border-color:#fff; }
.p-j-card .img{ aspect-ratio:16/10; overflow:hidden; margin-bottom:22px; background:#222; }
.p-j-card .img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.3); transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.p-j-card:hover .img img{ transform:scale(1.06); filter:grayscale(0); }
.p-j-card .meta{ display:flex; gap:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.58); margin-bottom:12px; }
.p-j-card h3{ font-weight:600; font-size:22px; line-height:1.2; letter-spacing:-0.02em; max-width:24ch; }
.p-j-card p{ margin-top:12px; font-size:14px; color:rgba(255,255,255,0.65); line-height:1.65; max-width:42ch; }
/* ============================================================
MATCH BLOCK (inline CTA)
============================================================ */
.p-match{
background:var(--bg);
padding:160px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.p-match .k{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
margin-bottom:28px; display:inline-flex; align-items:center; gap:12px;
}
.p-match .k::before{ content:''; width:24px; height:1px; background:var(--mute); }
.p-match h2{
font-weight:800; font-size:clamp(56px, 8vw, 148px);
line-height:0.92; letter-spacing:-0.055em; max-width:13ch;
}
.p-match h2 .weak{ font-weight:200; }
.p-match p{ margin-top:36px; font-size:17px; line-height:1.65; color:var(--mute); max-width:56ch; }
.p-match .actions{ margin-top:46px; display:flex; gap:12px; flex-wrap:wrap; }
/* ============================================================
OTHER AREAS
============================================================ */
.p-other{
background:var(--ink); color:var(--bg);
padding:120px 60px;
border-top:1px solid var(--line);
}
.p-other .head{
max-width:var(--max); margin:0 auto 56px;
}
.p-other .eyebrow{ color:rgba(255,255,255,0.65); }
.p-other .eyebrow::before{ background:rgba(255,255,255,0.5); }
.p-other h2{
margin-top:20px;
font-weight:800; font-size:clamp(36px, 4.2vw, 64px);
line-height:0.98; letter-spacing:-0.04em; color:var(--bg); max-width:18ch;
}
.p-other h2 .weak{ font-weight:200; }
.p-other-grid{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.p-other-card{
position:relative; overflow:hidden;
display:block;
background:#111; color:#fff;
aspect-ratio:5/3;
}
.p-other-card img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.2);
transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.p-other-card:hover img{ transform:scale(1.06); filter:grayscale(0); }
.p-other-card::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 35%, transparent 55%, rgba(0,0,0,.88) 100%);
}
.p-other-card .body{
position:absolute; left:24px; right:24px; bottom:20px; z-index:2;
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.p-other-card .name{
font-weight:700; font-size:32px; letter-spacing:-0.03em; line-height:1;
}
.p-other-card .name .weak{ font-weight:200; }
.p-other-card .go{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:rgba(255,255,255,0.78);
padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.5);
transition:color .2s, border-color .2s;
}
.p-other-card:hover .go{ color:#fff; border-color:#fff; }
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
border-top:1px solid rgba(255,255,255,0.08);
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{ font-weight:800; font-size:36px; letter-spacing:-0.04em; display:flex; align-items:center; gap:12px; }
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:500; }
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
LIVE LISTINGS TEASER (IDX-backed in production)
============================================================ */
.live-strip{
max-width:var(--max); margin:0 auto;
padding:80px 60px 40px;
}
.live-strip .lh{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:32px;
}
.live-strip h2{
font-weight:800; font-size:clamp(28px, 3vw, 44px);
line-height:1; letter-spacing:-0.035em;
}
.live-strip h2 .weak{ font-weight:200; }
.live-strip .sub{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--mute); margin-top:10px;
}
.live-strip .sub .live-dot{
display:inline-block; width:8px; height:8px; border-radius:50%;
background:var(--ink); margin-right:8px; vertical-align:middle;
animation:livepulse 2s ease-in-out infinite;
}
@keyframes livepulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.live-strip .view{
font-family:'JetBrains Mono',monospace;
font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
color:var(--ink);
padding:10px 18px; border:1px solid var(--ink); border-radius:999px;
transition:all .25s;
}
.live-strip .view:hover{ background:var(--ink); color:var(--bg); }
.live-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.live-card{
display:block; color:var(--ink);
background:var(--bg);
border:1px solid var(--line);
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.live-card:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,0.06); }
.live-card .img{
aspect-ratio:4/3; overflow:hidden; background:#222; position:relative;
}
.live-card .img img{
width:100%; height:100%; object-fit:cover;
transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.live-card:hover .img img{ transform:scale(1.05); }
.live-card .status{
position:absolute; top:12px; left:12px; z-index:2;
padding:5px 10px;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
}
.live-card .status.new{ background:var(--ink); color:var(--ink); }
.live-card .status.hot{ background:var(--ink-2); color:var(--bg); }
.live-card .status.sold{ background:var(--mute); color:var(--bg); }
.live-card .body{ padding:16px 18px 18px; }
.live-card .price{ font-weight:800; font-size:22px; letter-spacing:-0.025em; }
.live-card .addr{
margin-top:4px;
font-size:13px; color:var(--ink-2); line-height:1.45;
}
.live-card .stats{
margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--mute);
display:flex; gap:12px;
}
/* ============================================================
MAP VIEW
============================================================ */
.map-block{
max-width:var(--max); margin:0 auto;
padding:80px 60px;
}
.map-block .mh{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:32px;
}
.map-block h2{
font-weight:800; font-size:clamp(32px, 3.6vw, 52px);
line-height:1; letter-spacing:-0.035em;
}
.map-block h2 .weak{ font-weight:200; }
.map-block .mh p{
margin-top:10px; font-size:14px; color:var(--mute); max-width:48ch;
}
.map-block .toggle{
display:inline-flex; padding:4px; border:1px solid var(--line);
border-radius:999px; background:var(--bg);
}
.map-block .toggle button{
padding:10px 18px;
font-family:'JetBrains Mono',monospace;
font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
background:transparent; color:var(--mute); border:none; cursor:pointer; border-radius:999px;
transition:all .25s;
}
.map-block .toggle button.active{ background:var(--ink); color:var(--bg); }
.map-wrap{
position:relative; width:100%;
height:560px;
border:1px solid var(--line);
overflow:hidden; background:#f4f4f3;
}
#mapEl{ width:100%; height:100%; }
.map-overlay{
position:absolute; top:24px; left:24px;
background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
padding:16px 20px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--ink); font-weight:600;
pointer-events:none;
border:1px solid var(--line);
}
.map-overlay .n{ font-family:'Inter',sans-serif; font-size:28px; font-weight:800; letter-spacing:-0.03em; display:block; text-transform:none; margin-top:4px; }
/* ============================================================
FAQ SECTION
============================================================ */
.faq-section{
background:var(--bg-2);
padding:120px 60px;
border-top:1px solid var(--line);
}
.faq-section .fc{
max-width:960px; margin:0 auto;
display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:start;
}
.faq-section h2{
font-weight:800; font-size:clamp(36px, 4vw, 60px);
line-height:0.98; letter-spacing:-0.04em;
}
.faq-section h2 .weak{ font-weight:200; }
.faq-section .note{
margin-top:16px; font-size:14px; line-height:1.65; color:var(--mute); max-width:28ch;
}
.faq-list{ display:grid; gap:0; }
.faq-item{
border-top:1px solid var(--line);
padding:20px 0;
transition:padding .3s;
}
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
display:flex; justify-content:space-between; align-items:center;
cursor:pointer;
font-weight:600; font-size:18px; letter-spacing:-0.015em; color:var(--ink);
gap:20px;
background:none; border:none; text-align:left; width:100%; padding:0;
}
.faq-q .ic{ width:22px; height:22px; flex-shrink:0; position:relative; }
.faq-q .ic::before, .faq-q .ic::after{
content:''; position:absolute; top:50%; left:50%;
width:14px; height:1.5px; background:var(--ink);
transform:translate(-50%, -50%); transition:transform .3s;
}
.faq-q .ic::after{ transform:translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-q .ic::after{ transform:translate(-50%, -50%) rotate(0); }
.faq-a-wrap{
display:grid; grid-template-rows:0fr;
transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a{
padding-top:14px;
font-size:15px; line-height:1.7; color:var(--ink-2);
max-width:60ch;
}
.faq-a b{ color:var(--ink); font-weight:600; }
/* ============================================================
NEWS CAPTURE (soft email)
============================================================ */
.news-capture{
background:var(--ink); color:var(--bg);
padding:100px 60px;
border-top:1px solid var(--line);
}
.news-capture .nc{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.news-capture h2{
font-weight:800; font-size:clamp(36px, 4.4vw, 64px);
line-height:0.98; letter-spacing:-0.04em; color:var(--bg);
max-width:16ch;
}
.news-capture h2 .weak{ font-weight:200; }
.news-capture p{
margin-top:20px; font-size:16px; line-height:1.65; color:rgba(255,255,255,0.7);
max-width:44ch;
}
.nc-form{
display:flex; gap:10px; flex-wrap:wrap;
margin-top:8px;
}
.nc-form .field{
flex:1 1 280px;
padding:16px 18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.18);
color:var(--bg);
font-family:'Inter',sans-serif;
font-size:15px;
transition:border-color .2s, background .2s;
}
.nc-form .field::placeholder{ color:rgba(255,255,255,0.4); }
.nc-form .field:focus{ outline:none; border-color:var(--bg); background:rgba(255,255,255,0.08); }
.nc-form .submit{
padding:16px 24px;
background:var(--bg); color:var(--ink);
font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
border:1px solid var(--bg); cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
transition:background .25s, color .25s, transform .2s;
}
.nc-form .submit:hover{ background:transparent; color:var(--bg); transform:translateY(-1px); }
.nc-form .submit svg{ width:14px; height:14px; }
.news-capture .micro{
margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.news-capture .stat-right{
padding-left:40px; border-left:1px solid rgba(255,255,255,0.18);
display:flex; flex-direction:column; gap:24px;
}
.news-capture .stat-right .r{
display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline;
}
.news-capture .stat-right .r .n{ font-weight:800; font-size:40px; letter-spacing:-0.04em; color:var(--bg); line-height:1; }
.news-capture .stat-right .r .l{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
color:rgba(255,255,255,0.72); line-height:1.7;
}
/* ============================================================
SORTABLE COMPARE TABLE
============================================================ */
.p-compare-tbl .row.th .sortable{
cursor:pointer; user-select:none;
display:inline-flex; align-items:center; gap:6px;
transition:color .2s;
}
.p-compare-tbl .row.th .sortable:hover{ color:var(--ink); }
.p-compare-tbl .row.th .sortable .arr{
display:inline-block; opacity:0.4; font-size:9px;
transition:opacity .2s, transform .2s;
}
.p-compare-tbl .row.th .sortable.active{ color:var(--ink); }
.p-compare-tbl .row.th .sortable.active .arr{ opacity:1; color:var(--ink); }
.p-compare-tbl .row.th .sortable.active.desc .arr{ transform:rotate(180deg); }
/* ============================================================
RESPONSIVE ADDENDUM for new blocks
============================================================ */
@media (max-width: 1200px){
.live-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1100px){
.live-strip, .map-block, .faq-section, .news-capture{ padding-left:24px; padding-right:24px; }
.faq-section .fc, .news-capture .nc{ grid-template-columns:1fr; gap:40px; }
.news-capture .stat-right{ padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding-top:30px; }
.map-block .mh{ grid-template-columns:1fr; }
.live-strip .lh{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
.live-grid{ grid-template-columns:1fr; }
.map-wrap{ height:400px; }
}
/* ============================================================
RESPONSIVE (existing blocks)
============================================================ */
@media (max-width: 1200px){
.p-nh-grid, .p-j-grid, .p-other-grid{ grid-template-columns:repeat(2, 1fr); }
.p-compare-tbl .row{ grid-template-columns:1.4fr repeat(3, 1fr) 40px; }
.p-compare-tbl .row .era{ display:none; }
}
@media (max-width: 1100px){
.nav, .breadcrumb, .p-hero .content, .p-stats, .p-intro, .p-nh, .p-nh .head, .p-nh-grid, .p-compare, .p-compare .head, .p-compare-tbl, .p-journal, .p-journal .head, .p-j-grid, .p-match, .p-other, .p-other .head, .p-other-grid, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.p-intro{ grid-template-columns:1fr; gap:30px; }
.p-stats{ grid-template-columns:1fr 1fr; row-gap:0; }
.p-stats .s{ border-right:none; margin-right:0; padding-right:0; border-bottom:1px solid var(--line); }
.p-stats .s:nth-child(2n) + .s, .p-stats .s:nth-last-child(-n+2){ }
.p-nh .head{ grid-template-columns:auto 1fr; }
.p-nh .head .count{ grid-column:1 / 3; margin-top:10px; }
.p-compare .head, .p-match, .p-journal .head{ grid-template-columns:1fr; gap:20px; }
.p-compare-tbl .row{ grid-template-columns:1.2fr 1fr 1fr 40px; }
.p-compare-tbl .row .homes, .p-compare-tbl .row .era{ display:none; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
.p-other-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
.p-stats{ grid-template-columns:1fr; }
.p-nh-grid, .p-j-grid{ grid-template-columns:1fr; }
.p-compare-tbl .row{ grid-template-columns:1fr 32px; gap:10px; }
.p-compare-tbl .row > .d{ display:none; }
.p-compare-tbl .row > .d.is-yes, .p-compare-tbl .row > .d.is-no{ display:none; }
.p-hero .foot{ grid-template-columns:1fr; }
.p-hero .foot .meta{ text-align:left; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:300;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,0.2);
}
/* ============================================================
NEIGHBORHOOD DETAIL PAGES
============================================================ */
/* ============================================================
GRAYE — Neighborhood Detail v2
Competitor-benchmarked polish pass:
Sotheby's cinematic moments · Compass clean data hierarchy ·
SERHANT motion · Koolik Group editorial rhythm · The Agency contrast
============================================================ */
/* ============================================================
HERO — inset with cinematic motion
============================================================ */
.n-hero{
position:relative;
height:86vh; min-height:660px;
width:calc(100% - 80px);
margin:100px 40px 0;
overflow:hidden;
background:#000;
color:var(--bg);
border-radius:6px;
box-shadow:0 40px 80px -20px rgba(0,0,0,0.18);
}
.n-hero .media{
position:absolute; inset:0;
background-size:cover; background-position:center;
filter:grayscale(0.15) contrast(1.08);
transform:scale(1.08);
will-change:transform;
animation:kenBurns 38s ease-in-out infinite;
}
@keyframes kenBurns{
0%{ transform:scale(1.06) translate(-0.5%, 0.5%); }
50%{ transform:scale(1.14) translate(0.8%, -0.8%); }
100%{ transform:scale(1.06) translate(-0.5%, 0.5%); }
}
.n-hero::before{
content:''; position:absolute; inset:0; z-index:1;
background:
radial-gradient(ellipse at 30% 40%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.3) 100%),
linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 55%, rgba(10,10,10,0.92) 100%);
}
.n-hero::after{
content:'Scroll';
position:absolute; bottom:24px; left:50%;
transform:translateX(-50%);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
color:rgba(255,255,255,0.6);
z-index:4;
padding-right:14px;
animation:scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint{
0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.6; }
50%{ transform:translateX(-50%) translateY(6px); opacity:1; }
}
.n-hero .content{
position:relative; z-index:3;
height:100%;
display:flex; flex-direction:column; justify-content:flex-end;
padding:56px 56px 72px;
max-width:1280px;
}
.n-hero .kicker{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
color:rgba(245,245,244,0.88);
display:inline-flex; align-items:center; gap:14px;
margin-bottom:30px;
opacity:0;
animation:slideUp 1s cubic-bezier(.22,.94,.4,1) 0.15s forwards;
}
.n-hero .kicker::before{
content:''; width:44px; height:1px; background:rgba(245,245,244,0.82);
transform-origin:left; transform:scaleX(0);
animation:growLine 1.2s cubic-bezier(.22,.94,.4,1) 0.5s forwards;
}
@keyframes slideUp{
from{ opacity:0; transform:translateY(24px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes growLine{
to{ transform:scaleX(1); }
}
.n-hero h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(60px, 9.2vw, 164px);
line-height:0.88;
letter-spacing:-0.065em;
color:var(--bg);
max-width:14ch;
opacity:0;
animation:slideUp 1.2s cubic-bezier(.22,.94,.4,1) 0.35s forwards;
}
.n-hero h1 .weak{ font-weight:200; letter-spacing:-0.05em; }
.n-hero .sub{
margin-top:26px;
font-size:17px; line-height:1.6;
color:rgba(245,245,244,0.92);
max-width:56ch;
opacity:0;
animation:slideUp 1s cubic-bezier(.22,.94,.4,1) 0.7s forwards;
}
.n-hero .chips{
position:absolute; right:40px; bottom:40px;
z-index:4;
display:flex; flex-wrap:wrap; gap:8px;
justify-content:flex-end;
max-width:480px;
}
.n-hero .chips .chip{
padding:8px 14px;
border-radius:999px;
background:rgba(245,245,244,0.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(245,245,244,0.2);
color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
opacity:0;
transition:background .3s, border-color .3s, transform .3s;
animation:chipReveal 0.6s cubic-bezier(.22,.94,.4,1) forwards;
}
.n-hero .chips .chip:nth-child(1){ animation-delay:0.95s; }
.n-hero .chips .chip:nth-child(2){ animation-delay:1.05s; }
.n-hero .chips .chip:nth-child(3){ animation-delay:1.15s; }
.n-hero .chips .chip:nth-child(4){ animation-delay:1.25s; }
.n-hero .chips .chip:nth-child(5){ animation-delay:1.35s; }
.n-hero .chips .chip:nth-child(6){ animation-delay:1.45s; }
@keyframes chipReveal{
from{ opacity:0; transform:translateY(10px) scale(0.95); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
.n-hero .chips .chip:hover{
background:rgba(245,245,244,0.22);
border-color:rgba(245,245,244,0.4);
transform:translateY(-2px);
}
/* Breadcrumb */
.nd-breadcrumb{
max-width:var(--max); margin:100px auto 20px;
padding:0 40px;
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--mute);
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.nd-breadcrumb a{ color:var(--mute); transition:color .2s; position:relative; }
.nd-breadcrumb a:hover{ color:var(--ink); }
.nd-breadcrumb .sep{ opacity:0.45; }
.nd-breadcrumb .current{ color:var(--ink); font-weight:600; }
.n-hero.has-breadcrumb{ margin-top:0; }
/* ============================================================
QUICK FACTS — bento cards
============================================================ */
.q-facts{
max-width:var(--max); margin:60px auto 0;
padding:0 40px;
display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
border-top:none;
border-bottom:none;
}
.q-facts .qf{
padding:30px 26px 28px;
border-right:none;
background:var(--bg-2);
border-radius:8px;
display:flex; flex-direction:column; gap:10px;
position:relative;
overflow:hidden;
transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, background .3s;
cursor:default;
}
.q-facts .qf::before{
content:''; position:absolute;
top:0; left:0; right:0; height:2px;
background:var(--ink);
transform:scaleX(0); transform-origin:left;
transition:transform .6s cubic-bezier(.22,.94,.4,1);
}
.q-facts .qf:hover{
transform:translateY(-4px);
background:var(--bg);
box-shadow:0 20px 40px -12px rgba(0,0,0,0.08);
}
.q-facts .qf:hover::before{ transform:scaleX(1); }
.q-facts .qf .k{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:8px;
}
.q-facts .qf .k::before{
content:''; display:inline-block;
width:6px; height:6px; border-radius:50%; background:var(--ink);
}
.q-facts .qf .v{
font-weight:800; font-size:22px; line-height:1.15;
letter-spacing:-0.025em; color:var(--ink);
margin-top:4px;
}
.q-facts .qf .d{
font-size:13px; line-height:1.6; color:var(--mute);
margin-top:6px;
}
/* ============================================================
INTRO + STICKY CONTACT SIDEBAR
============================================================ */
.intro{ padding:120px 0 100px; }
.intro-inner{
max-width:var(--max); margin:0 auto; padding:0 40px;
display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:60px;
align-items:flex-start;
}
.intro .lede{
font-weight:800;
font-size:clamp(36px, 4vw, 60px);
line-height:1.02;
letter-spacing:-0.04em;
max-width:24ch;
margin-bottom:48px;
position:relative;
}
.intro .lede .weak{ font-weight:200; }
.intro .lede::before{
content:''; position:absolute;
top:-16px; left:0;
width:48px; height:3px;
background:var(--ink);
}
.prose{ max-width:64ch; }
.prose p{
font-size:17px; line-height:1.78; color:var(--ink-2);
margin-bottom:22px;
font-weight:400;
}
.prose p:first-of-type::first-letter{
font-weight:900;
font-size:86px;
float:left;
line-height:0.8;
padding:10px 14px 0 0;
color:var(--ink);
letter-spacing:-0.04em;
}
.prose h3{
font-weight:800; font-size:28px;
margin:56px 0 20px;
letter-spacing:-0.025em;
position:relative;
padding-top:28px;
}
.prose h3::before{
content:''; position:absolute;
top:0; left:0;
width:48px; height:2px;
background:var(--ink);
}
.prose h4{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--ink); font-weight:700;
margin:36px 0 14px;
display:inline-flex; align-items:center; gap:10px;
}
.prose h4::before{
content:''; display:inline-block; width:18px; height:1px; background:var(--ink);
}
.prose ul{
list-style:none; padding:0;
margin:14px 0 26px;
display:grid; gap:12px;
}
.prose ul li{
position:relative;
padding-left:28px;
font-size:16px; line-height:1.65; color:var(--ink-2);
transition:transform .3s;
}
.prose ul li:hover{ transform:translateX(4px); }
.prose ul li::before{
content:''; position:absolute; left:0; top:12px;
width:16px; height:1px; background:var(--ink);
transition:width .3s;
}
.prose ul li:hover::before{ width:20px; }
.prose ul li strong{ color:var(--ink); font-weight:700; }
.callout{
border-left:3px solid var(--ink);
padding:8px 0 8px 28px;
margin:40px 0;
font-weight:500;
font-size:22px; line-height:1.4;
letter-spacing:-0.018em;
color:var(--ink);
max-width:54ch;
background:linear-gradient(90deg, var(--bg-2) 0%, transparent 70%);
padding-top:20px; padding-bottom:20px;
}
.callout .weak{ font-weight:200; }
/* Takeaways card */
.takeaways{
margin:56px 0 24px;
padding:34px 34px 32px;
background:var(--ink); color:var(--bg);
border-radius:8px;
position:relative;
overflow:hidden;
}
.takeaways::before{
content:''; position:absolute;
top:0; right:0;
width:140px; height:140px;
background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
pointer-events:none;
}
.takeaways .hd{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.55);
margin-bottom:12px;
}
.takeaways h4{
font-weight:800; font-size:28px; letter-spacing:-0.025em;
margin-bottom:22px;
color:var(--bg);
}
.takeaways ul{ list-style:none; padding:0; display:grid; gap:12px; }
.takeaways ul li{
display:flex; gap:14px; align-items:flex-start;
font-size:15px; line-height:1.55;
color:rgba(255,255,255,0.85);
transition:transform .3s, color .3s;
}
.takeaways ul li:hover{ transform:translateX(4px); color:var(--bg); }
.takeaways ul li .mark{
flex-shrink:0; width:24px; height:24px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:'JetBrains Mono', monospace;
font-size:12px; font-weight:700;
}
.takeaways ul li.yes .mark{ background:var(--ink); color:var(--ink); }
.takeaways ul li.no .mark{
background:transparent; color:rgba(255,255,255,0.5);
border:1px solid rgba(255,255,255,0.3);
}
/* Sticky contact card */
.contact-card{
position:sticky; top:120px;
background:var(--ink); color:var(--bg);
padding:32px 30px 28px;
border-radius:8px;
display:grid; gap:20px;
box-shadow:0 20px 60px -20px rgba(0,0,0,0.2);
position:sticky;
}
.contact-card::before{
content:''; position:absolute;
top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0.3) 100%);
border-radius:8px 8px 0 0;
pointer-events:none;
}
.contact-card .avatar{
display:flex; align-items:center; gap:16px;
padding-bottom:22px;
border-bottom:1px solid rgba(255,255,255,0.14);
}
.contact-card .avatar .ph{
width:60px; height:60px;
border-radius:50%;
overflow:hidden;
background:#333; flex-shrink:0;
position:relative;
}
.contact-card .avatar .ph::after{
content:''; position:absolute;
inset:-3px;
border:2px solid var(--ink);
border-radius:50%;
opacity:0.5;
animation:avatarPulse 2.5s cubic-bezier(.4,0,.6,1) infinite;
pointer-events:none;
}
@keyframes avatarPulse{
0%,100%{ transform:scale(1); opacity:0.5; }
50%{ transform:scale(1.12); opacity:0; }
}
.contact-card .avatar .ph img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.3) contrast(1.05);
}
.contact-card .avatar .who{ display:flex; flex-direction:column; gap:2px; }
.contact-card .avatar .who .n{
font-weight:800; font-size:16px; letter-spacing:-0.02em;
color:var(--bg);
}
.contact-card .avatar .who .r{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
color:rgba(255,255,255,0.6);
}
.contact-card .h{
font-weight:700; font-size:22px; line-height:1.2;
letter-spacing:-0.025em; color:var(--bg);
}
.contact-card .h .weak{ font-weight:200; }
.contact-card p{
font-size:13px; line-height:1.65; color:rgba(255,255,255,0.72);
margin:0;
}
.contact-card .actions{ display:grid; gap:8px; margin-top:4px; }
.contact-card .btn-c{
display:inline-flex; align-items:center; justify-content:space-between;
padding:15px 20px;
background:var(--bg); color:var(--ink);
border:1px solid var(--bg);
text-decoration:none;
font-size:13px; font-weight:700;
transition:background .3s, color .3s, transform .25s, box-shadow .3s;
border-radius:6px;
position:relative;
overflow:hidden;
}
.contact-card .btn-c::before{
content:''; position:absolute; inset:0;
background:var(--ink);
transform:translateY(100%);
transition:transform .35s cubic-bezier(.22,.94,.4,1);
}
.contact-card .btn-c span, .contact-card .btn-c svg{ position:relative; z-index:1; transition:color .3s; }
.contact-card .btn-c:hover::before{ transform:translateY(0); }
.contact-card .btn-c:hover{ color:var(--bg); transform:translateY(-2px); box-shadow:0 12px 20px -8px rgba(0,0,0,0.3); }
.contact-card .btn-c.outline{ background:transparent; color:var(--bg); border-color:rgba(255,255,255,0.28); }
.contact-card .btn-c.outline::before{ background:var(--bg); }
.contact-card .btn-c.outline:hover{ color:var(--ink); border-color:var(--bg); }
.contact-card .btn-c svg{ width:14px; height:14px; }
.contact-card .tel-line{
display:flex; justify-content:space-between; align-items:center;
padding-top:16px;
border-top:1px solid rgba(255,255,255,0.14);
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
color:rgba(255,255,255,0.7);
}
.contact-card .tel-line a{
color:var(--bg); font-weight:700;
font-size:15px; letter-spacing:0.01em;
transition:color .2s;
}
.contact-card .tel-line a:hover{ color:var(--ink); }
/* ============================================================
DRONE GALLERY / MOSAIC (fallback if used)
============================================================ */
.gallery{ padding:40px 0 40px; background:var(--bg); }
.gallery .gh{
max-width:var(--max); margin:0 auto 48px; padding:0 40px;
display:grid; grid-template-columns:1fr auto;
align-items:end; gap:40px;
}
.gallery h2{
font-weight:800; font-size:clamp(36px, 4.2vw, 60px);
letter-spacing:-0.035em; line-height:1; max-width:20ch;
position:relative; padding-top:28px;
}
.gallery h2::before{
content:''; position:absolute;
top:0; left:0;
width:48px; height:2px;
background:var(--ink);
}
.gallery h2 .weak{ font-weight:200; }
.gallery .cred{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--mute);
max-width:30ch; line-height:1.6; text-align:right;
}
.gallery .cred b{ color:var(--ink); font-weight:700; }
.mosaic{
max-width:var(--max); margin:0 auto; padding:0 40px;
display:grid; grid-template-columns:repeat(12, 1fr); gap:16px;
}
.mosaic .tile{ overflow:hidden; background:#222; position:relative; cursor:pointer; border-radius:4px; }
.mosaic .tile img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15); transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s; }
.mosaic .tile:hover img{ transform:scale(1.06); filter:grayscale(0); }
.mosaic .tile .cap{ position:absolute; left:14px; bottom:12px; padding:6px 10px; background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); color:var(--bg); font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s; }
.mosaic .tile:hover .cap{ opacity:1; transform:translateY(0); }
.mosaic .t-1{ grid-column:span 8; aspect-ratio:16/9; }
.mosaic .t-2{ grid-column:span 4; aspect-ratio:4/5; }
.mosaic .t-3,.mosaic .t-4,.mosaic .t-5{ grid-column:span 4; aspect-ratio:1/1; }
.mosaic .t-6,.mosaic .t-7{ grid-column:span 6; aspect-ratio:16/10; }
/* ============================================================
SWIPE GALLERY
============================================================ */
.swipe-gallery{
position:relative;
padding-left:40px;
max-width:100%;
overflow:hidden;
}
.swipe-track{
display:flex; gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-padding-left:40px;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
padding:4px 40px 4px 0;
cursor:grab;
}
.swipe-track:active{ cursor:grabbing; }
.swipe-track::-webkit-scrollbar{ display:none; }
.swipe-track{ scrollbar-width:none; }
.swipe-tile{
flex:0 0 auto;
scroll-snap-align:start;
width:min(720px, calc(100vw - 80px));
aspect-ratio:3/2;
overflow:hidden;
position:relative;
background:#222;
border-radius:4px;
transition:transform .5s cubic-bezier(.22,.94,.4,1);
}
.swipe-tile:hover{ transform:translateY(-4px); }
.swipe-tile img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.18);
transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s;
pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.swipe-tile:hover img{ transform:scale(1.06); filter:grayscale(0); }
.swipe-tile::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%);
pointer-events:none;
}
.swipe-tile .cap{
position:absolute; left:20px; bottom:20px; z-index:2;
padding:9px 15px;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
border-radius:2px;
}
.swipe-tile .idx{
position:absolute; right:20px; top:20px; z-index:2;
padding:7px 12px;
background:rgba(255,255,255,0.94);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; font-weight:800;
color:var(--ink);
border-radius:2px;
}
/* Arrow nav */
.swipe-nav{
position:absolute; top:calc(50% + 4px);
transform:translateY(-50%);
width:56px; height:56px;
border-radius:50%;
background:rgba(255,255,255,0.98);
border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
cursor:pointer; z-index:5;
transition:background .25s, transform .25s, box-shadow .25s;
box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.swipe-nav:hover:not(:disabled){ background:var(--ink); transform:translateY(-50%) scale(1.08); box-shadow:0 10px 28px rgba(0,0,0,0.2); }
.swipe-nav:hover:not(:disabled) svg{ stroke:var(--bg); }
.swipe-nav:disabled{ opacity:0.25; cursor:default; transform:translateY(-50%) scale(0.92); }
.swipe-nav svg{ width:18px; height:18px; stroke:var(--ink); stroke-width:2; fill:none; transition:stroke .2s; }
.swipe-nav.prev{ left:60px; }
.swipe-nav.next{ right:60px; }
@media (hover:none) and (pointer:coarse){ .swipe-nav{ display:none; } }
.swipe-meta{
max-width:var(--max); margin:28px auto 0;
padding:0 40px;
display:grid; grid-template-columns:1fr auto;
gap:24px; align-items:center;
}
.swipe-progress{
height:2px; background:var(--line); position:relative; overflow:hidden;
max-width:460px;
}
.swipe-progress .fill{
position:absolute; left:0; top:0; height:100%;
background:var(--ink);
width:14%;
transition:width .25s ease-out;
}
.swipe-pos{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--mute); font-weight:600;
}
.swipe-pos b{ color:var(--ink); font-weight:800; font-size:13px; }
.swipe-hint{
position:absolute; top:calc(50% + 4px);
left:50%; transform:translate(-50%, -50%);
padding:12px 20px;
background:rgba(10,10,10,0.88);
color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600;
border-radius:999px; z-index:4;
pointer-events:none;
opacity:0;
transition:opacity .4s;
display:inline-flex; align-items:center; gap:12px;
}
.swipe-hint .arr{ display:inline-flex; gap:4px; }
.swipe-gallery.show-hint .swipe-hint{ opacity:1; animation:hintPulse 1.6s ease-in-out; }
@keyframes hintPulse{
0%,100%{ transform:translate(-50%, -50%) scale(1); }
50%{ transform:translate(-50%, -50%) scale(1.04); }
}
/* ============================================================
VALUE DRIVERS (dark block) — refined
============================================================ */
.insights{
padding:160px 0 130px;
background:var(--ink); color:var(--bg);
margin-top:60px;
position:relative;
overflow:hidden;
}
.insights::before{
content:''; position:absolute;
top:-50%; right:-20%;
width:800px; height:800px;
background:radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
pointer-events:none;
}
.insights .ih{
max-width:var(--max); margin:0 auto 68px; padding:0 40px;
position:relative;
}
.insights .eye{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
color:rgba(255,255,255,0.75);
display:inline-flex; align-items:center; gap:14px; margin-bottom:24px;
}
.insights .eye::before{ content:''; width:32px; height:1px; background:rgba(255,255,255,0.6); }
.insights h2{
font-weight:800; font-size:clamp(44px, 5.6vw, 88px);
line-height:0.98; letter-spacing:-0.045em;
max-width:16ch; color:var(--bg);
}
.insights h2 .weak{ font-weight:200; }
.drivers{
max-width:var(--max); margin:0 auto; padding:0 40px;
display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
background:rgba(255,255,255,0.12);
position:relative;
}
.driver{
padding:38px 30px 34px;
background:var(--ink);
display:flex; flex-direction:column; gap:14px;
position:relative;
overflow:hidden;
transition:background .4s;
}
.driver::before{
content:''; position:absolute;
top:0; left:0; right:0;
height:60%;
background:radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 70%);
opacity:0;
transition:opacity .5s;
pointer-events:none;
}
.driver:hover{ background:#1a1a1a; }
.driver:hover::before{ opacity:1; }
.driver .num{
font-family:'JetBrains Mono', monospace;
font-size:12px; letter-spacing:0.22em;
color:rgba(255,255,255,0.55);
font-weight:700;
position:relative;
padding-left:26px;
transition:color .3s;
}
.driver .num::before{
content:''; position:absolute;
left:0; top:50%; transform:translateY(-50%);
width:16px; height:1px; background:rgba(255,255,255,0.4);
transition:width .4s cubic-bezier(.2,.7,.2,1);
}
.driver:hover .num{ color:var(--bg); }
.driver:hover .num::before{ width:22px; background:var(--bg); }
.driver h4{
font-weight:800; font-size:23px;
letter-spacing:-0.02em; line-height:1.12;
color:var(--bg);
transition:transform .3s cubic-bezier(.22,.94,.4,1);
}
.driver:hover h4{ transform:translateX(4px); }
.driver p{
font-size:14px; line-height:1.7;
color:rgba(255,255,255,0.72);
margin-top:4px;
}
/* ============================================================
AMENITIES
============================================================ */
.amenities{ padding:130px 0; background:var(--bg); }
.amenities .ah{
max-width:var(--max); margin:0 auto 64px; padding:0 40px;
display:grid; grid-template-columns:1fr auto;
align-items:end; gap:40px;
}
.amenities h2{
font-weight:800; font-size:clamp(36px, 4.2vw, 60px);
letter-spacing:-0.035em; line-height:1;
position:relative; padding-top:28px;
}
.amenities h2::before{
content:''; position:absolute;
top:0; left:0;
width:48px; height:2px;
background:var(--ink);
}
.amenities h2 .weak{ font-weight:200; }
.amenities .note{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--mute); max-width:28ch; line-height:1.6; text-align:right;
}
.amenities .ag{
max-width:var(--max); margin:0 auto; padding:0 40px;
display:grid; grid-template-columns:repeat(5, 1fr); gap:1px;
background:var(--line);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.amen{
background:var(--bg);
padding:38px 26px;
display:flex; flex-direction:column; gap:16px;
transition:background .35s;
cursor:default;
}
.amen:hover{ background:var(--bg-2); }
.amen .ic{
width:40px; height:40px;
stroke:var(--ink);
stroke-width:1.4;
fill:none;
transition:transform .35s cubic-bezier(.22,.94,.4,1);
}
.amen:hover .ic{ transform:scale(1.1) rotate(-3deg); }
.amen .n{
font-weight:700; font-size:17px; letter-spacing:-0.015em;
line-height:1.2;
}
.amen .d{
font-size:13px; color:var(--mute); line-height:1.55;
}
/* ============================================================
RECENT SOLD (legacy - unused in current design)
============================================================ */
.sold-strip{ padding:100px 60px; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sold-strip .sh{ max-width:var(--max); margin:0 auto 40px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; }
.sold-strip h2{ font-weight:800; font-size:clamp(30px, 3.4vw, 48px); letter-spacing:-0.035em; line-height:1; }
.sold-strip h2 .weak{ font-weight:200; }
.sold-strip .eye{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:12px; margin-bottom:12px; }
.sold-strip .eye::before{ content:''; width:24px; height:1px; background:var(--mute); }
.sold-grid{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.sold-card{ background:var(--bg); border:1px solid var(--line); transition:border-color .3s, transform .3s; }
.sold-card:hover{ border-color:var(--ink); transform:translateY(-3px); }
/* ============================================================
RELATED / COMPARE
============================================================ */
.related{ padding:140px 60px 80px; background:var(--bg); }
.related .rh{ max-width:var(--max); margin:0 auto 56px; }
.related h2{
font-weight:800; font-size:clamp(38px, 4.6vw, 72px);
letter-spacing:-0.04em; line-height:0.98;
max-width:20ch;
position:relative; padding-top:28px;
}
.related h2::before{
content:''; position:absolute;
top:0; left:0;
width:48px; height:2px;
background:var(--ink);
}
.related h2 .weak{ font-weight:200; }
.related .eye{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px; margin-bottom:22px;
}
.related .eye::before{ content:''; width:24px; height:1px; background:var(--mute); }
.related-grid{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.rel-card{
display:block; text-decoration:none;
position:relative; overflow:hidden;
background:#111; color:var(--bg);
border-radius:4px;
transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.rel-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -20px rgba(0,0,0,0.25); }
.rel-card .im{ aspect-ratio:4/5; overflow:hidden; }
.rel-card .im img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.2);
transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.rel-card:hover .im img{ transform:scale(1.08); filter:grayscale(0); }
.rel-card .im::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.92) 100%);
transition:opacity .5s;
}
.rel-card .b{
position:absolute; left:26px; right:26px; bottom:24px; z-index:2;
transition:transform .5s cubic-bezier(.22,.94,.4,1);
}
.rel-card:hover .b{ transform:translateY(-4px); }
.rel-card .k{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
color:rgba(255,255,255,0.8);
}
.rel-card .nm{
font-weight:800; font-size:32px;
letter-spacing:-0.035em; margin-top:6px;
line-height:1.02;
transition:transform .5s cubic-bezier(.22,.94,.4,1);
}
.rel-card:hover .nm{ transform:translateX(4px); }
.rel-card .why{
margin-top:10px;
font-size:13px; line-height:1.55;
color:rgba(255,255,255,0.85);
max-width:38ch;
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .5s cubic-bezier(.22,.94,.4,1), opacity .4s, margin-top .4s;
}
.rel-card:hover .why{ max-height:100px; opacity:1; margin-top:12px; }
.rel-card .arr{
position:absolute; top:20px; right:20px; z-index:3;
width:40px; height:40px; border-radius:50%;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,0.25);
display:flex; align-items:center; justify-content:center;
transition:background .35s, transform .35s, border-color .35s;
}
.rel-card .arr svg{ width:14px; height:14px; stroke:#fff; stroke-width:2; fill:none; transition:stroke .35s; }
.rel-card:hover .arr{ background:#fff; border-color:#fff; transform:translate(6px,-6px); }
.rel-card:hover .arr svg{ stroke:var(--ink); }
/* ============================================================
BIG CTA close
============================================================ */
.big-cta{
padding:170px 60px;
background:var(--ink); color:var(--bg);
position:relative; overflow:hidden;
border-top:1px solid var(--line);
}
.big-cta::before{
content:''; position:absolute;
top:-30%; left:-10%;
width:600px; height:600px;
background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
pointer-events:none;
}
.big-cta::after{
content:''; position:absolute;
bottom:-40%; right:-5%;
width:700px; height:700px;
background:radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
pointer-events:none;
}
.big-cta .bc{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center;
position:relative;
}
.big-cta .eye{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.65);
display:inline-flex; align-items:center; gap:12px; margin-bottom:24px;
}
.big-cta .eye::before{ content:''; width:24px; height:1px; background:rgba(255,255,255,0.5); }
.big-cta h2{
font-weight:800; font-size:clamp(56px, 8vw, 140px);
line-height:0.9; letter-spacing:-0.06em;
max-width:13ch; color:var(--bg);
}
.big-cta h2 .weak{ font-weight:200; }
.big-cta p{
font-size:17px; line-height:1.7;
color:rgba(255,255,255,0.82);
max-width:44ch; margin-bottom:32px;
}
.big-cta .btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.big-cta .btn-row .btn{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.big-cta .btn-row .btn:hover{ background:transparent; color:var(--bg); border-color:var(--bg); }
.big-cta .btn-row .btn.ghost{ background:transparent; color:var(--bg); border-color:rgba(255,255,255,0.4); }
.big-cta .btn-row .btn.ghost:hover{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
/* ============================================================
READING PROGRESS
============================================================ */
.read-progress{
position:fixed; top:0; left:0; right:0;
height:3px; z-index:110;
background:transparent;
pointer-events:none;
}
.read-progress .bar{
height:100%;
background:linear-gradient(90deg, var(--ink) 0%, #2a2a2a 100%);
width:0%;
transition:width 80ms linear;
box-shadow:0 0 20px rgba(10,10,10,0.3);
}
/* ============================================================
JUMP-NAV
============================================================ */
.jump-nav{
position:sticky; top:64px; z-index:90;
background:rgba(255,255,255,0.94);
backdrop-filter:saturate(1.3) blur(16px);
-webkit-backdrop-filter:saturate(1.3) blur(16px);
border-bottom:1px solid var(--line);
padding:14px 40px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.jump-nav::-webkit-scrollbar{ display:none; }
.jump-nav{ scrollbar-width:none; }
.jump-inner{
max-width:var(--max); margin:0 auto;
display:flex; gap:6px; align-items:center;
}
.jump-inner .jl{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute); margin-right:22px;
display:inline-flex; align-items:center; gap:10px;
white-space:nowrap;
}
.jump-inner .jl::before{
content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
background:var(--ink);
}
.jump-inner a{
padding:9px 16px;
border-radius:999px;
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
color:var(--mute);
transition:background .25s, color .25s, transform .2s;
white-space:nowrap;
position:relative;
}
.jump-inner a:hover{ color:var(--ink); transform:translateY(-1px); }
.jump-inner a.active{
background:var(--ink); color:var(--bg);
}
/* ============================================================
SPLIT FLOW
============================================================ */
.split-flow{ padding:100px 0 140px; }
.split-flow .split-inner{
max-width:var(--max); margin:0 auto; padding:0 40px;
display:grid; grid-template-columns:minmax(0, 1fr) 400px;
gap:64px;
align-items:flex-start;
}
.split-flow .main{ min-width:0; }
.split-flow .rail-wrap{ grid-column:2; position:relative; }
.rail{
position:sticky; top:140px;
max-height:calc(100vh - 160px);
overflow-y:auto;
padding-right:4px;
display:flex; flex-direction:column; gap:0;
}
.rail::-webkit-scrollbar{ width:4px; }
.rail::-webkit-scrollbar-track{ background:transparent; }
.rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
.rail::-webkit-scrollbar-thumb:hover{ background:var(--mute-2); }
.rail .contact-card{ position:static; border-radius:8px; margin-bottom:0; }
/* ============================================================
FULL-WIDTH LIVE LISTINGS (Option A)
Proper size for MLS inventory · Replaces sidebar MLS rail
============================================================ */
.live-listings{
padding:100px 40px 110px;
max-width:var(--max);
margin:0 auto;
background:var(--bg);
}
.live-listings .ll-head{
display:grid; grid-template-columns:1fr auto;
align-items:end; gap:40px;
margin-bottom:44px;
}
.live-listings h2{
font-weight:800; font-size:clamp(38px, 4.4vw, 68px);
letter-spacing:-0.04em; line-height:0.98;
position:relative; padding-top:28px;
}
.live-listings h2::before{
content:''; position:absolute;
top:0; left:0; width:48px; height:2px; background:var(--ink);
}
.live-listings h2 .weak{ font-weight:200; }
.live-listings .ll-sub{
margin-top:16px;
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.live-listings .ll-sub .live-dot{
width:8px; height:8px; border-radius:50%; background:var(--ink);
animation:ncpulse 2s ease-in-out infinite;
flex-shrink:0;
}
.live-listings .ll-view{
font-family:'JetBrains Mono', monospace;
font-size:11px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
color:var(--ink);
padding:13px 22px;
border:1px solid var(--ink); border-radius:999px;
transition:background .25s, color .25s, transform .25s, box-shadow .25s;
white-space:nowrap;
display:inline-flex; align-items:center; gap:10px;
}
.live-listings .ll-view:hover{
background:var(--ink); color:var(--bg);
transform:translateY(-2px);
box-shadow:0 10px 24px -8px rgba(0,0,0,0.2);
}
.live-listings .ll-view svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
/* Placeholder grid (ghost cards w/ shimmer) */
.ll-ph-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
margin-bottom:32px;
}
.ll-ph-card{
aspect-ratio:4/3.6;
background:var(--bg-2);
border:1px solid var(--line);
border-radius:6px;
position:relative;
overflow:hidden;
transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.ll-ph-card:hover{
transform:translateY(-3px);
border-color:var(--ink);
}
.ll-ph-card::before{
content:''; position:absolute;
top:0; left:0; right:0; height:62%;
background:
linear-gradient(90deg, var(--bg-3) 0%, var(--line-2) 50%, var(--bg-3) 100%);
background-size:200% 100%;
animation:shimmer 2.6s linear infinite;
}
.ll-ph-card::after{
content:''; position:absolute;
bottom:14%; left:18px; width:50%; height:12px;
background:var(--line); border-radius:2px;
box-shadow:
0 20px 0 -1px var(--line-2),
0 38px 0 -2px var(--line-2);
}
@keyframes shimmer{
0%{ background-position:200% 0; }
100%{ background-position:-200% 0; }
}
/* tiny "live" pulse dot pinned to each card */
.ll-ph-card .mini-live{
position:absolute; top:12px; left:12px; z-index:2;
padding:5px 10px;
background:rgba(10,10,10,0.88);
color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase; font-weight:800;
border-radius:2px;
display:inline-flex; align-items:center; gap:6px;
}
.ll-ph-card .mini-live::before{
content:''; width:5px; height:5px; border-radius:50%;
background:var(--ink);
animation:ncpulse 2s ease-in-out infinite;
}
/* Footer note explaining CT IDX */
.ll-ph-note{
padding:22px 28px;
background:var(--ink); color:var(--bg);
border-radius:6px;
display:flex; align-items:center; gap:26px;
flex-wrap:wrap;
}
.ll-ph-badge{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:800;
color:var(--ink);
background:var(--bg);
padding:9px 14px;
border-radius:3px;
flex-shrink:0;
}
.ll-ph-note p{
font-size:13px; line-height:1.7;
color:rgba(255,255,255,0.82);
margin:0;
flex:1 1 400px;
}
.ll-ph-note p strong{ color:var(--bg); font-weight:700; }
.ll-ph-note p code{
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.04em;
background:rgba(255,255,255,0.1);
color:var(--bg);
padding:2px 8px; border-radius:3px;
border:1px solid rgba(255,255,255,0.14);
}
.rail-mls{
background:var(--bg);
border:1px solid var(--line); border-top:none;
border-radius:0 0 8px 8px;
overflow:hidden;
}
.rail-mls-head{
padding:20px 22px;
border-bottom:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center;
background:var(--bg-2);
}
.rail-mls-head .title{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--ink); font-weight:800;
display:inline-flex; align-items:center; gap:8px;
}
.rail-mls-head .title .dot{
width:8px; height:8px; border-radius:50%;
background:var(--ink);
animation:ncpulse 2s ease-in-out infinite;
}
@keyframes ncpulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,0.4); } 50%{ opacity:0.5; box-shadow:0 0 0 6px rgba(34,197,94,0); } }
.rail-mls-head .updated{
font-family:'JetBrains Mono', monospace;
font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--mute);
}
.rail-mls-foot{
padding:16px 22px;
border-top:1px solid var(--line);
background:var(--bg-2);
display:flex; justify-content:space-between; align-items:center;
}
.rail-mls-foot a{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
font-weight:800; color:var(--ink);
border-bottom:1px solid var(--ink); padding-bottom:2px;
transition:color .25s, border-color .25s;
}
.rail-mls-foot a:hover{ color:var(--ink); border-color:var(--ink); }
.rail-mls-foot .count{
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--mute);
}
/* ============================================================
FLOATING ACTION TOOLBAR
============================================================ */
.action-toolbar{
position:fixed; right:20px; bottom:20px; z-index:95;
display:flex; flex-direction:column; gap:10px;
}
.action-toolbar .ab{
position:relative;
width:52px; height:52px;
border-radius:50%;
background:var(--ink); color:var(--bg);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
transition:background .25s, transform .25s, box-shadow .25s;
border:none;
}
.action-toolbar .ab:hover{
transform:translateY(-4px) scale(1.05);
background:#2a2a2a;
box-shadow:0 12px 28px rgba(0,0,0,0.3);
}
.action-toolbar .ab svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; }
.action-toolbar .ab.saved{ background:var(--ink); color:var(--ink); }
.action-toolbar .ab.saved svg{ fill:currentColor; }
.action-toolbar .ab .tt{
position:absolute; right:64px; top:50%;
transform:translateY(-50%) translateX(8px);
opacity:0; pointer-events:none;
padding:8px 14px; background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
white-space:nowrap; border-radius:3px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
transition:opacity .25s, transform .25s;
}
.action-toolbar .ab:hover .tt{ opacity:1; transform:translateY(-50%) translateX(0); }
.action-toast{
position:fixed; right:20px; bottom:100px; z-index:96;
padding:14px 20px;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono', monospace;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700;
border-radius:3px;
box-shadow:0 10px 28px rgba(0,0,0,0.3);
opacity:0; transform:translateX(16px);
pointer-events:none;
transition:opacity .35s, transform .35s;
}
.action-toast.show{ opacity:1; transform:translateX(0); }
/* ============================================================
Generic improved buttons (shared with parent-category)
============================================================ */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 24px; border-radius:999px;
font-size:14px; font-weight:700; letter-spacing:0.01em;
border:1px solid var(--ink);
transition:all .3s cubic-bezier(.22,.94,.4,1);
position:relative;
overflow:hidden;
}
.btn svg{ width:14px; height:14px; transition:transform .3s; }
.btn:hover svg{ transform:translateX(3px); }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,0.3); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); transform:translateY(-2px); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px){
.q-facts{ grid-template-columns:repeat(2, 1fr); }
.sold-grid{ grid-template-columns:repeat(2, 1fr); }
.ll-ph-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1100px){
.live-listings{ padding:80px 24px 90px; }
.live-listings .ll-head{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
.ll-ph-grid{ grid-template-columns:1fr; }
.ll-ph-note{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 1100px){
.n-hero{ width:calc(100% - 48px); margin:100px 24px 0; height:72vh; }
.n-hero.has-breadcrumb{ margin-top:0; }
.n-hero .content{ padding:40px; }
.n-hero .chips{ right:24px; bottom:24px; }
.nd-breadcrumb{ padding:0 24px; }
.q-facts{ padding:0 24px; }
.intro-inner{ grid-template-columns:1fr; gap:40px; padding:0 24px; }
.split-flow .split-inner{ grid-template-columns:1fr; gap:40px; padding:0 24px; }
.split-flow .rail-wrap{ grid-column:1; }
.rail{ position:static; max-height:none; overflow:visible; }
.contact-card{ position:static; margin-top:48px; }
.gallery .gh, .mosaic{ padding:0 24px; }
.insights, .amenities, .sold-strip, .related, .big-cta{ padding-left:24px; padding-right:24px; }
.drivers, .amenities .ag{ grid-template-columns:repeat(2, 1fr); }
.mosaic .t-1{ grid-column:span 12; }
.mosaic .t-2, .mosaic .t-6, .mosaic .t-7{ grid-column:span 6; }
.mosaic .t-3, .mosaic .t-4, .mosaic .t-5{ grid-column:span 6; }
.related-grid{ grid-template-columns:1fr; }
.big-cta .bc{ grid-template-columns:1fr; gap:40px; }
.sold-grid{ grid-template-columns:1fr; }
.amenities .ah{ grid-template-columns:1fr; }
.sold-strip .sh, .gallery .gh{ grid-template-columns:1fr; }
.swipe-gallery{ padding-left:24px; }
.swipe-track{ scroll-padding-left:24px; padding-right:24px; }
.swipe-meta{ padding:0 24px; }
.swipe-tile{ width:min(580px, calc(100vw - 48px)); }
.jump-nav{ padding:14px 24px; top:56px; }
}
@media (max-width: 640px){
.q-facts{ grid-template-columns:1fr; }
.drivers, .amenities .ag{ grid-template-columns:1fr; }
.mosaic > *{ grid-column:span 12 !important; aspect-ratio:16/10 !important; }
.intro{ padding:80px 0 70px; }
.prose p:first-of-type::first-letter{ font-size:64px; }
.n-hero .chips{ position:relative; right:auto; bottom:auto; padding:0 24px 24px; max-width:none; justify-content:flex-start; }
.swipe-tile{ width:calc(100vw - 48px); aspect-ratio:4/3; }
.action-toolbar{ right:16px; bottom:16px; }
.action-toolbar .ab{ width:44px; height:44px; }
.action-toolbar .ab svg{ width:16px; height:16px; }
.action-toolbar .ab .tt{ display:none; }
}
/* ============================================================
ABOUT ANTHONY PAGE
============================================================ */
/* ============================================================
GRAYE — About Anthony
Precision aesthetic · Grayscale only · Inter only
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after,
.nav .links a.active::after{ transform:scaleX(1); }
.nav .links a.active{ font-weight:600; }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
BUTTONS (shared)
============================================================ */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--ink); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ background:#2a2a2a; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
/* ============================================================
PAGE HERO
============================================================ */
.a-hero{
position:relative;
padding:180px 60px 100px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:end;
min-height:88vh;
}
.a-hero .breadcrumb{
position:absolute; top:120px; left:60px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
display:flex; align-items:center; gap:12px;
}
.a-hero .breadcrumb a{ color:var(--mute); }
.a-hero .breadcrumb a:hover{ color:var(--ink); }
.a-hero .breadcrumb .sep{ color:var(--mute-2); }
.a-hero .breadcrumb .current{ color:var(--ink); font-weight:600; }
.a-hero h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(56px, 7.4vw, 132px);
line-height:0.92;
letter-spacing:-0.055em;
color:var(--ink);
margin-top:32px;
max-width:14ch;
}
.a-hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.a-hero .sub{
margin-top:36px;
font-size:18px; line-height:1.65; color:var(--mute-2);
max-width:48ch;
}
.a-hero .sub b{ color:var(--ink); font-weight:600; }
.a-hero .side{
border-left:1px solid var(--line);
padding-left:40px;
display:flex; flex-direction:column; gap:22px;
}
.a-hero .side .row{
display:grid; grid-template-columns:110px 1fr; gap:22px; align-items:baseline;
padding-bottom:16px; border-bottom:1px solid var(--line-2);
}
.a-hero .side .row:last-child{ border-bottom:none; }
.a-hero .side .row .k{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
}
.a-hero .side .row .v{
font-size:15px; font-weight:500; color:var(--ink); letter-spacing:-0.01em;
line-height:1.5;
}
/* ============================================================
ORIGIN — 2 COL: prose + stat rail
============================================================ */
.origin{
padding:140px 60px 120px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr; gap:100px; align-items:start;
border-top:1px solid var(--line);
}
.origin .col-left h2{
margin-top:20px;
font-weight:700; font-size:clamp(44px, 5.4vw, 88px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
}
.origin .col-left h2 .weak{ font-weight:200; }
.origin .col-left p{
margin-top:32px;
font-size:17px; line-height:1.72; color:var(--ink-2);
max-width:60ch; font-weight:400;
}
.origin .col-left p + p{ margin-top:20px; }
.origin .col-left p b{ font-weight:600; color:var(--ink); }
.origin .stat-rail{
border-top:1px solid var(--ink);
padding-top:8px;
display:flex; flex-direction:column;
}
.origin .stat-rail .s{
padding:26px 0;
border-bottom:1px solid var(--line);
display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
}
.origin .stat-rail .s:last-child{ border-bottom:none; }
.origin .stat-rail .s .n{
font-weight:800; font-size:52px; letter-spacing:-0.045em; line-height:1;
color:var(--ink);
}
.origin .stat-rail .s .n sup{ font-size:0.5em; font-weight:600; vertical-align:super; margin-right:2px; }
.origin .stat-rail .s .n small{ font-size:0.5em; font-weight:600; }
.origin .stat-rail .s .l{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
text-align:right; max-width:16ch;
line-height:1.6;
}
/* ============================================================
BELIEFS — 4-column principles
============================================================ */
.beliefs{
background:var(--bg-2);
padding:140px 60px 140px;
border-top:1px solid var(--line);
}
.beliefs .wrap{ max-width:var(--max); margin:0 auto; }
.beliefs .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:70px;
}
.beliefs .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
}
.beliefs .head h2 .weak{ font-weight:200; }
.beliefs .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8;
}
.beliefs .head .aside b{
font-family:'Inter',sans-serif; font-size:36px; font-weight:800; letter-spacing:-0.04em;
color:var(--ink); display:block; text-transform:none;
}
.beliefs .grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
border-top:1px solid var(--ink);
}
.beliefs .p{
padding:36px 30px 44px;
border-right:1px solid var(--line);
display:flex; flex-direction:column; gap:16px;
min-height:280px;
}
.beliefs .p:last-child{ border-right:none; }
.beliefs .p .num{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
}
.beliefs .p h4{
font-weight:800; font-size:26px; letter-spacing:-0.03em; line-height:1.05;
max-width:12ch;
}
.beliefs .p h4 .weak{ font-weight:200; }
.beliefs .p p{
margin-top:auto;
font-size:14px; line-height:1.65; color:var(--mute);
max-width:36ch;
}
/* ============================================================
HEADSHOT PANEL
============================================================ */
.headshot{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center;
}
.headshot .img{
aspect-ratio:4/5; overflow:hidden; background:#111; position:relative;
background:linear-gradient(160deg, #1a1a1a 0%, #2f2f2f 45%, #171717 100%);
}
.headshot .img img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.12) contrast(1.03);
transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.headshot .img:hover img{ transform:scale(1.03); }
.headshot .img .badge{
position:absolute; top:24px; left:24px;
padding:10px 16px; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600;
color:var(--ink);
}
.headshot .img .corner{
position:absolute; bottom:24px; right:24px; z-index:2;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.82);
text-align:right; line-height:1.8;
}
.headshot .img .corner b{ font-size:12px; font-weight:600; color:#fff; letter-spacing:-0.01em; text-transform:none; }
.headshot h2{
font-weight:700; font-size:clamp(40px, 4.6vw, 76px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
margin-top:22px;
}
.headshot h2 .weak{ font-weight:200; }
.headshot .quote{
margin-top:34px;
font-size:18px; line-height:1.65; color:var(--ink-2);
max-width:48ch;
}
.headshot .origin-box{
margin-top:28px; padding:22px 26px;
background:var(--bg-3);
font-size:14px; line-height:1.65; color:var(--ink-2);
max-width:56ch;
border-left:2px solid var(--ink);
}
.headshot .origin-box b{ color:var(--ink); }
.headshot .actions{ margin-top:40px; display:flex; gap:10px; flex-wrap:wrap; }
/* ============================================================
JORDAN — partnership block
============================================================ */
.jordan{
background:var(--ink); color:var(--bg);
padding:140px 60px;
border-top:1px solid var(--ink);
}
.jordan .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1.15fr; gap:100px; align-items:start;
}
.jordan .eyebrow{ color:rgba(255,255,255,0.65); }
.jordan .eyebrow::before{ background:rgba(255,255,255,0.5); }
.jordan h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 4.8vw, 76px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
}
.jordan h2 .weak{ font-weight:200; }
.jordan .lede{
margin-top:28px;
font-size:16px; line-height:1.7; color:rgba(255,255,255,0.68);
max-width:44ch;
}
.jordan .body p{
font-size:17px; line-height:1.72; color:rgba(255,255,255,0.78);
max-width:56ch;
}
.jordan .body p + p{ margin-top:20px; }
.jordan .body p b{ color:#fff; font-weight:600; }
.jordan .sig{
margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.18);
display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.jordan .sig b{ font-family:'Inter',sans-serif; text-transform:none; letter-spacing:-0.01em; color:#fff; font-weight:600; font-size:13px; }
/* ============================================================
CLIENT WORK — grid
============================================================ */
.client-work{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.client-work .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:60px;
}
.client-work .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.client-work .head h2 .weak{ font-weight:200; }
.client-work .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8;
max-width:22ch; text-align:right;
}
.client-work .grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.tx-card{
background:var(--bg-2);
border:1px solid var(--line);
padding:0;
display:flex; flex-direction:column;
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.tx-card:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.tx-card .img{
aspect-ratio:16/10; overflow:hidden; background:#111; position:relative;
}
.tx-card .img::after{
content:'SAMPLE'; position:absolute; top:14px; left:14px; z-index:2;
padding:5px 10px; background:rgba(255,255,255,0.92);
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600;
color:var(--ink);
}
.tx-card .img .placeholder{
position:absolute; inset:0;
background:linear-gradient(135deg, #161616 0%, #2a2a2a 45%, #171717 100%);
}
.tx-card .body{
padding:26px 28px 30px;
display:flex; flex-direction:column; gap:14px;
flex:1;
}
.tx-card .meta{
display:flex; gap:14px; align-items:baseline;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
}
.tx-card .price{
font-weight:800; font-size:28px; letter-spacing:-0.035em; line-height:1;
}
.tx-card .addr{
font-size:15px; font-weight:500; color:var(--ink-2); line-height:1.4; letter-spacing:-0.01em;
max-width:26ch;
}
.tx-card .stats{
margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
display:flex; gap:16px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute);
}
/* ============================================================
JOURNAL CROSS-LINK
============================================================ */
.journal-cx{
background:var(--bg-2);
padding:120px 60px;
border-top:1px solid var(--line);
}
.journal-cx .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr auto; gap:80px; align-items:center;
}
.journal-cx h2{
margin-top:22px;
font-weight:700; font-size:clamp(36px, 4.2vw, 64px);
line-height:0.98; letter-spacing:-0.04em; max-width:20ch;
}
.journal-cx h2 .weak{ font-weight:200; }
.journal-cx p{
margin-top:22px; font-size:16px; line-height:1.65; color:var(--mute);
max-width:52ch;
}
.journal-cx .go{
font-family:'JetBrains Mono',monospace;
font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
color:var(--ink);
padding:14px 22px;
border:1px solid var(--ink); border-radius:999px;
display:inline-flex; align-items:center; gap:10px;
transition:all .25s;
white-space:nowrap;
}
.journal-cx .go:hover{ background:var(--ink); color:var(--bg); transform:translateY(-1px); }
.journal-cx .go svg{ width:14px; height:14px; }
/* ============================================================
FINAL CTA
============================================================ */
.cta-final{
background:var(--bg);
padding:160px 60px 160px;
max-width:var(--max); margin:0 auto;
text-align:left;
border-top:1px solid var(--line);
}
.cta-final .eyebrow{ margin-bottom:32px; }
.cta-final h2{
font-weight:800;
font-size:clamp(60px, 8.4vw, 148px);
line-height:0.9; letter-spacing:-0.055em;
max-width:14ch;
}
.cta-final h2 .weak{ font-weight:200; }
.cta-final p{
margin-top:36px; font-size:18px; line-height:1.65; color:var(--mute);
max-width:58ch;
}
.cta-final .actions{ margin-top:50px; display:flex; gap:12px; flex-wrap:wrap; }
.cta-final .row{
margin-top:64px; padding-top:32px; border-top:1px solid var(--line);
display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
}
.cta-final .row .r b{
font-family:'Inter',sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.02em;
color:var(--ink); display:block; text-transform:none; margin-bottom:6px;
}
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px){
.beliefs .grid{ grid-template-columns:repeat(2, 1fr); }
.beliefs .p{ border-bottom:1px solid var(--line); }
.beliefs .p:nth-child(2n){ border-right:none; }
.client-work .grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1100px){
.nav, .a-hero, .origin, .beliefs, .headshot, .jordan, .client-work, .journal-cx, .cta-final, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.a-hero{ grid-template-columns:1fr; gap:60px; padding-top:140px; }
.a-hero .breadcrumb{ left:24px; top:100px; }
.a-hero .side{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:40px; }
.origin{ grid-template-columns:1fr; gap:60px; }
.beliefs .head, .client-work .head, .journal-cx .wrap{ grid-template-columns:1fr; }
.headshot{ grid-template-columns:1fr; gap:60px; }
.jordan .wrap{ grid-template-columns:1fr; gap:40px; }
.cta-final .row{ grid-template-columns:1fr; gap:20px; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.beliefs .grid{ grid-template-columns:1fr; }
.beliefs .p{ border-right:none; }
.client-work .grid{ grid-template-columns:1fr; }
.origin .stat-rail .s .n{ font-size:40px; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
.cta-final h2{ font-size:56px; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:200;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.2);
}
/* ============================================================
SELL WITH US PAGE
============================================================ */
/* ============================================================
GRAYE — Sell With Us
Precision aesthetic · Grayscale only · Inter only
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after,
.nav .links a.active::after{ transform:scaleX(1); }
.nav .links a.active{ font-weight:600; }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
BUTTONS (shared)
============================================================ */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--ink); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ background:#2a2a2a; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
/* ============================================================
PAGE HERO
============================================================ */
.s-hero{
position:relative;
padding:180px 60px 100px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:end;
min-height:88vh;
}
.s-hero .breadcrumb{
position:absolute; top:120px; left:60px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
display:flex; align-items:center; gap:12px;
}
.s-hero .breadcrumb a{ color:var(--mute); }
.s-hero .breadcrumb a:hover{ color:var(--ink); }
.s-hero .breadcrumb .sep{ color:var(--mute-2); }
.s-hero .breadcrumb .current{ color:var(--ink); font-weight:600; }
.s-hero h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(56px, 7.4vw, 132px);
line-height:0.92;
letter-spacing:-0.055em;
color:var(--ink);
margin-top:32px;
max-width:12ch;
}
.s-hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.s-hero .sub{
margin-top:36px;
font-size:18px; line-height:1.65; color:var(--mute-2);
max-width:52ch;
}
.s-hero .sub b{ color:var(--ink); font-weight:600; }
.s-hero .actions{
margin-top:44px; display:flex; gap:10px; flex-wrap:wrap;
}
.s-hero .side{
border-left:1px solid var(--line);
padding-left:40px;
display:flex; flex-direction:column; gap:26px;
}
.s-hero .side .k{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
}
.s-hero .side .stat{
padding-bottom:22px; border-bottom:1px solid var(--line-2);
}
.s-hero .side .stat:last-child{ border-bottom:none; padding-bottom:0; }
.s-hero .side .stat .n{
margin-top:8px;
font-weight:800; font-size:36px; letter-spacing:-0.035em; line-height:1.05;
}
.s-hero .side .stat .l{
margin-top:8px;
font-size:14px; line-height:1.55; color:var(--mute);
max-width:32ch;
}
/* ============================================================
PLAYBOOK — 3 steps
============================================================ */
.playbook{
padding:140px 60px 120px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.playbook .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:70px;
}
.playbook .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(44px, 5.4vw, 88px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
}
.playbook .head h2 .weak{ font-weight:200; }
.playbook .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8;
}
.playbook .head .aside b{
font-family:'Inter',sans-serif; font-size:32px; font-weight:800; letter-spacing:-0.03em;
color:var(--ink); display:block; text-transform:none; margin-bottom:4px;
}
.playbook .steps{
display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
border-top:1px solid var(--ink);
}
.playbook .step{
padding:36px 30px 44px;
border-right:1px solid var(--line);
display:flex; flex-direction:column; gap:22px;
min-height:340px;
}
.playbook .step:last-child{ border-right:none; }
.playbook .step .num{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
}
.playbook .step h3{
font-weight:800; font-size:32px; letter-spacing:-0.03em; line-height:1.05;
max-width:14ch;
}
.playbook .step h3 .weak{ font-weight:200; }
.playbook .step p{
font-size:15px; line-height:1.65; color:var(--mute); max-width:42ch;
}
.playbook .step ul{
margin-top:auto; padding-top:20px; border-top:1px solid var(--line-2);
display:flex; flex-direction:column; gap:8px;
list-style:none;
}
.playbook .step ul li{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-2);
padding-left:16px; position:relative;
}
.playbook .step ul li::before{
content:''; position:absolute; left:0; top:6px; width:8px; height:1px; background:var(--ink);
}
/* ============================================================
ANTI-BROKER MANIFESTO
============================================================ */
.anti{
background:var(--ink); color:var(--bg);
padding:160px 60px;
}
.anti .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:320px 1fr; gap:80px;
}
.anti .eyebrow{ color:rgba(255,255,255,0.65); }
.anti .eyebrow::before{ background:rgba(255,255,255,0.5); }
.anti h2{
margin-top:22px;
font-weight:700; font-size:clamp(44px, 5.4vw, 88px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
}
.anti h2 .weak{ font-weight:200; }
.anti .body p{
font-size:17px; line-height:1.72; color:rgba(255,255,255,0.78);
max-width:58ch;
}
.anti .body p + p{ margin-top:20px; }
.anti .body p b{ color:#fff; font-weight:600; }
.anti .sig{
margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.18);
display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
.anti .sig b{ font-family:'Inter',sans-serif; text-transform:none; letter-spacing:-0.01em; color:#fff; font-weight:600; font-size:13px; }
/* ============================================================
MARKETING MODULES
============================================================ */
.modules{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
}
.modules .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:70px;
}
.modules .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.modules .head h2 .weak{ font-weight:200; }
.modules .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8;
}
.modules .head .aside b{
font-family:'Inter',sans-serif; font-size:32px; font-weight:800; letter-spacing:-0.03em;
color:var(--ink); display:block; text-transform:none; margin-bottom:4px;
}
.modules .grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
border-top:1px solid var(--ink);
border-left:1px solid var(--line);
}
.mod{
padding:36px 32px 40px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
display:flex; flex-direction:column; gap:14px;
min-height:260px;
background:var(--bg);
transition:background .3s;
}
.mod:hover{ background:var(--bg-2); }
.mod .num{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
}
.mod h4{
font-weight:800; font-size:24px; letter-spacing:-0.025em; line-height:1.08;
max-width:16ch;
}
.mod h4 .weak{ font-weight:200; }
.mod p{
margin-top:auto; padding-top:16px;
font-size:14px; line-height:1.65; color:var(--mute);
max-width:38ch;
}
/* ============================================================
COMPARISON — Graye vs traditional
============================================================ */
.compare{
background:var(--bg-2);
padding:140px 60px;
border-top:1px solid var(--line);
}
.compare .wrap{ max-width:var(--max); margin:0 auto; }
.compare .head{
margin-bottom:60px;
}
.compare .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.compare .head h2 .weak{ font-weight:200; }
.compare .head p{
margin-top:22px; font-size:16px; line-height:1.65; color:var(--mute);
max-width:56ch;
}
.compare .box{
display:grid; grid-template-columns:1fr 1fr; gap:0;
border:1px solid var(--ink);
background:var(--bg);
}
.compare .col{
padding:36px 36px 40px;
}
.compare .col.left{ border-right:1px solid var(--ink); background:var(--bg); }
.compare .col.right{ background:var(--bg-3); }
.compare .col .k{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
margin-bottom:8px;
}
.compare .col h3{
font-weight:800; font-size:28px; letter-spacing:-0.03em; line-height:1.05;
padding-bottom:24px; border-bottom:1px solid var(--line);
}
.compare .col h3 .weak{ font-weight:200; }
.compare .col ul{ list-style:none; padding:0; margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.compare .col li{
padding-left:24px; position:relative;
font-size:15px; line-height:1.55; color:var(--ink-2);
}
.compare .col li::before{
content:''; position:absolute; left:0; top:8px; width:14px; height:1px; background:var(--ink);
}
.compare .col.right li{ color:var(--mute); }
.compare .col.right li::before{ background:var(--mute-2); }
/* ============================================================
RECENT LISTINGS PLACEHOLDER
============================================================ */
.recent{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.recent .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:60px;
}
.recent .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:20ch;
}
.recent .head h2 .weak{ font-weight:200; }
.recent .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8; text-align:right; max-width:24ch;
}
.recent .grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.rc{
border:1px solid var(--line); background:var(--bg);
display:flex; flex-direction:column;
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.rc:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.rc .img{ aspect-ratio:16/10; overflow:hidden; background:#111; position:relative; }
.rc .img::after{
content:'SAMPLE'; position:absolute; top:12px; left:12px; z-index:2;
padding:5px 10px; background:rgba(255,255,255,0.92);
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--ink);
}
.rc .img .ph{
position:absolute; inset:0;
background:linear-gradient(135deg, #161616 0%, #2a2a2a 45%, #171717 100%);
}
.rc .body{
padding:24px 26px 28px;
display:flex; flex-direction:column; gap:10px;
}
.rc .status{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);
}
.rc .price{
font-weight:800; font-size:28px; letter-spacing:-0.035em; line-height:1;
}
.rc .addr{
font-size:15px; font-weight:500; color:var(--ink-2); line-height:1.4; letter-spacing:-0.01em;
}
.rc .stats{
padding-top:14px; margin-top:6px; border-top:1px solid var(--line);
display:flex; gap:16px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute);
}
/* ============================================================
SELLER INTAKE FORM
============================================================ */
.intake{
background:var(--ink); color:var(--bg);
padding:140px 60px;
border-top:1px solid var(--ink);
}
.intake .wrap{ max-width:var(--max); margin:0 auto; }
.intake .head{
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end;
margin-bottom:60px;
}
.intake .eyebrow{ color:rgba(255,255,255,0.65); }
.intake .eyebrow::before{ background:rgba(255,255,255,0.5); }
.intake .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
color:#fff;
}
.intake .head h2 .weak{ font-weight:200; }
.intake .head p{
font-size:16px; line-height:1.7; color:rgba(255,255,255,0.7);
max-width:44ch;
}
.intake .head p .micro{
display:block; margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45);
}
form.intake-form{
display:grid; grid-template-columns:repeat(6, 1fr); gap:0;
border-top:1px solid rgba(255,255,255,0.18);
border-left:1px solid rgba(255,255,255,0.18);
}
form.intake-form .f{
grid-column:span 3;
padding:20px 24px;
border-right:1px solid rgba(255,255,255,0.18);
border-bottom:1px solid rgba(255,255,255,0.18);
display:flex; flex-direction:column; gap:8px;
background:transparent;
}
form.intake-form .f.wide{ grid-column:span 6; }
form.intake-form .f.third{ grid-column:span 2; }
form.intake-form .f .k{
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
form.intake-form input,
form.intake-form select,
form.intake-form textarea{
appearance:none; -webkit-appearance:none;
background:transparent; border:none; outline:none;
color:#fff; font-family:'Inter',sans-serif;
font-weight:500; font-size:16px; letter-spacing:-0.01em;
padding:4px 0;
width:100%;
}
form.intake-form input::placeholder,
form.intake-form textarea::placeholder{ color:rgba(255,255,255,0.35); }
form.intake-form select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 0 center;
cursor:pointer; padding-right:20px;
}
form.intake-form select option{ background:var(--ink); color:#fff; }
form.intake-form textarea{
min-height:120px; resize:vertical; line-height:1.55;
}
form.intake-form .submit-row{
grid-column:span 6;
padding:24px 24px 28px;
border-bottom:1px solid rgba(255,255,255,0.18);
border-right:1px solid rgba(255,255,255,0.18);
display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
form.intake-form .submit-row .disclaim{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.45);
max-width:44ch; line-height:1.7;
}
form.intake-form .submit{
padding:16px 24px;
background:#fff; color:var(--ink);
font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
border:1px solid #fff; cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
transition:background .25s, color .25s, transform .2s;
}
form.intake-form .submit:hover{ background:transparent; color:#fff; transform:translateY(-1px); }
form.intake-form .submit svg{ width:14px; height:14px; }
/* ============================================================
TESTIMONIALS
============================================================ */
.testimonials{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.testimonials .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:60px;
}
.testimonials .head h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 5vw, 80px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.testimonials .head h2 .weak{ font-weight:200; }
.testimonials .head .aside{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
line-height:1.8; text-align:right; max-width:24ch;
}
.t-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.t-card{
padding:32px 30px;
background:var(--bg-2);
border:1px solid var(--line);
display:flex; flex-direction:column; gap:24px;
min-height:280px;
transition:transform .3s, border-color .3s, box-shadow .3s;
}
.t-card:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.t-card .badge{
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
padding:4px 10px; border:1px solid var(--line); align-self:flex-start;
}
.t-card blockquote{
font-size:16px; line-height:1.6; color:var(--ink-2);
font-weight:400;
flex:1;
}
.t-card blockquote::before{ content:'"'; font-weight:700; margin-right:2px; }
.t-card blockquote::after{ content:'"'; font-weight:700; margin-left:2px; }
.t-card .who{
padding-top:22px; border-top:1px solid var(--line);
display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
}
.t-card .who .n{
font-weight:700; font-size:14px; letter-spacing:-0.01em;
}
.t-card .who .nh{
margin-top:3px;
font-family:'JetBrains Mono',monospace;
font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
}
.t-card .who .year{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; color:var(--mute);
}
/* ============================================================
FINAL CTA
============================================================ */
.cta-final{
background:var(--bg);
padding:160px 60px 160px;
max-width:var(--max); margin:0 auto;
text-align:left;
border-top:1px solid var(--line);
}
.cta-final .eyebrow{ margin-bottom:32px; }
.cta-final h2{
font-weight:800;
font-size:clamp(60px, 8.4vw, 148px);
line-height:0.9; letter-spacing:-0.055em;
max-width:14ch;
}
.cta-final h2 .weak{ font-weight:200; }
.cta-final p{
margin-top:36px; font-size:18px; line-height:1.65; color:var(--mute);
max-width:58ch;
}
.cta-final .actions{ margin-top:50px; display:flex; gap:12px; flex-wrap:wrap; }
.cta-final .row{
margin-top:64px; padding-top:32px; border-top:1px solid var(--line);
display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
}
.cta-final .row .r b{
font-family:'Inter',sans-serif; font-size:22px; font-weight:700; letter-spacing:-0.02em;
color:var(--ink); display:block; text-transform:none; margin-bottom:6px;
}
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px){
.modules .grid{ grid-template-columns:repeat(2, 1fr); }
.recent .grid{ grid-template-columns:repeat(2, 1fr); }
.t-grid{ grid-template-columns:repeat(2, 1fr); }
.playbook .steps{ grid-template-columns:1fr; }
.playbook .step{ border-right:none; border-bottom:1px solid var(--line); }
}
@media (max-width: 1100px){
.nav, .s-hero, .playbook, .anti, .modules, .compare, .recent, .intake, .testimonials, .cta-final, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.s-hero{ grid-template-columns:1fr; gap:60px; padding-top:140px; }
.s-hero .breadcrumb{ left:24px; top:100px; }
.s-hero .side{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:40px; }
.playbook .head, .modules .head, .recent .head, .testimonials .head, .intake .head{ grid-template-columns:1fr; }
.anti .wrap{ grid-template-columns:1fr; gap:40px; }
.compare .box{ grid-template-columns:1fr; }
.compare .col.left{ border-right:none; border-bottom:1px solid var(--ink); }
form.intake-form .f{ grid-column:span 6; }
form.intake-form .f.third{ grid-column:span 6; }
.cta-final .row{ grid-template-columns:1fr; gap:20px; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.modules .grid{ grid-template-columns:1fr; }
.recent .grid{ grid-template-columns:1fr; }
.t-grid{ grid-template-columns:1fr; }
.mod{ border-right:none; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
.cta-final h2{ font-size:56px; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:200;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.2);
}
/* ============================================================
CONTACT PAGE
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after,
.nav .links a.active::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
HERO — Contact
============================================================ */
.c-hero{
padding:200px 60px 120px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:end;
}
.c-hero .kicker{
display:inline-flex; align-items:center; gap:14px;
color:var(--mute); font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
margin-bottom:32px;
}
.c-hero .kicker::before{ content:''; width:32px; height:1px; background:var(--mute); }
.c-hero h1{
font-weight:800;
font-size:clamp(52px, 7vw, 124px);
line-height:0.94;
letter-spacing:-0.05em;
color:var(--ink);
max-width:14ch;
}
.c-hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.c-hero .sub{
font-size:18px; line-height:1.65; color:var(--mute);
max-width:46ch;
padding-bottom:16px;
}
/* ============================================================
THREE COLUMN CONTACT BLOCK
============================================================ */
.channels{
padding:60px 60px 140px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.channels .grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
margin-top:60px;
}
.channels .ch{
padding:44px 40px 40px 0;
border-right:1px solid var(--line);
display:flex; flex-direction:column; gap:16px;
}
.channels .ch:not(:first-child){ padding-left:40px; }
.channels .ch:last-child{ border-right:none; padding-right:0; }
.channels .ch .eye{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.channels .ch .eye::before{ content:''; width:24px; height:1px; background:var(--mute); }
.channels .ch .big{
font-weight:800;
font-size:clamp(28px, 3.4vw, 44px);
letter-spacing:-0.035em;
line-height:1.02;
color:var(--ink);
word-break:break-word;
transition:color .2s;
}
.channels .ch .big:hover{ color:#333; }
.channels .ch .desc{
font-size:15px; line-height:1.65; color:var(--mute);
max-width:36ch;
}
.channels .ch .desc b{ color:var(--ink); font-weight:600; }
.channels .head{
display:grid; grid-template-columns:320px 1fr; gap:80px;
align-items:end;
}
.channels .head h2{
font-weight:700; font-size:clamp(40px, 4.6vw, 68px);
line-height:0.98; letter-spacing:-0.04em;
max-width:14ch;
}
.channels .head h2 .weak{ font-weight:200; }
.channels .head p{
font-size:16px; line-height:1.65; color:var(--mute);
max-width:48ch;
}
/* ============================================================
MAP SECTION
============================================================ */
.mapsection{
background:var(--bg-2);
padding:120px 60px 40px;
border-top:1px solid var(--line);
}
.mapsection .head{
max-width:var(--max); margin:0 auto 48px;
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
}
.mapsection h2{
font-weight:700; font-size:clamp(36px, 4.4vw, 68px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.mapsection h2 .weak{ font-weight:200; }
.mapsection .addr{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute);
line-height:1.9; text-align:right;
}
.mapsection .addr b{
font-family:'Inter',sans-serif; font-size:14px; letter-spacing:-0.01em;
color:var(--ink); text-transform:none; font-weight:600; display:block;
}
.map-wrap{
max-width:var(--max); margin:0 auto;
height:520px; overflow:hidden;
border:1px solid var(--line);
background:var(--bg-3);
filter:grayscale(1) contrast(1.05);
}
#leaflet-map{ width:100%; height:100%; }
.leaflet-container{ background:var(--bg-3); font-family:'Inter',sans-serif; }
.mapsection .foot{
max-width:var(--max); margin:32px auto 0;
display:grid; grid-template-columns:1fr auto; gap:20px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
}
/* ============================================================
HOURS + RESPONSE BOX
============================================================ */
.hours{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.hours .wrap{
display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:flex-start;
}
.hours .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.hours .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.hours h2{
margin-top:22px;
font-weight:700; font-size:clamp(36px, 4vw, 58px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
}
.hours h2 .weak{ font-weight:200; }
.hours .rows{
display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.hours .box{
padding:36px 32px;
border:1px solid var(--line);
background:var(--bg);
display:flex; flex-direction:column; gap:14px;
transition:border-color .3s, transform .3s;
}
.hours .box:hover{ border-color:var(--ink); transform:translateY(-3px); }
.hours .box .k{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
}
.hours .box .n{
font-weight:800; font-size:32px; letter-spacing:-0.03em; line-height:1;
color:var(--ink);
}
.hours .box p{
font-size:14px; line-height:1.6; color:var(--mute);
}
.hours .callout{
grid-column:1 / -1;
padding:36px 40px;
background:var(--ink); color:var(--bg);
display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
}
.hours .callout .lbl{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.65);
border-right:1px solid rgba(255,255,255,0.2);
padding-right:32px;
}
.hours .callout .txt{
font-size:17px; line-height:1.55; color:var(--bg); font-weight:500;
}
.hours .callout .txt b{ font-weight:700; }
/* ============================================================
QUICK CONTACT FORM
============================================================ */
.quickform{
background:var(--bg-2);
padding:140px 60px;
border-top:1px solid var(--line);
}
.quickform .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:flex-start;
}
.quickform .side .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.quickform .side .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.quickform h2{
margin-top:22px;
font-weight:800; font-size:clamp(40px, 5vw, 68px);
line-height:0.98; letter-spacing:-0.04em; max-width:18ch;
}
.quickform h2 .weak{ font-weight:200; }
.quickform .side p{
margin-top:28px;
font-size:17px; line-height:1.65; color:var(--mute); max-width:44ch;
}
.quickform .side .note{
margin-top:36px; padding:22px 26px;
background:var(--bg-3); border-left:2px solid var(--ink);
font-size:14px; line-height:1.6; color:var(--ink-2); max-width:44ch;
}
.quickform .side .note a{
color:var(--ink); font-weight:600;
border-bottom:1px solid var(--ink);
}
.qform{
display:grid; gap:20px;
}
.qform .row{
display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.qform .field{
display:grid; gap:6px;
}
.qform label{
font-weight:600; font-size:13px; color:var(--ink);
}
.qform input, .qform textarea{
padding:14px 18px; border:1px solid var(--line); border-radius:6px;
font-size:15px; font-family:'Inter',sans-serif;
background:var(--bg); color:var(--ink);
transition:border-color .2s;
}
.qform input:focus, .qform textarea:focus{
outline:none; border-color:var(--ink);
}
.qform textarea{ min-height:140px; resize:vertical; }
.qform .submit{
justify-self:start;
padding:16px 28px;
background:var(--ink); color:var(--bg);
border:1px solid var(--ink); border-radius:999px;
font-size:15px; font-weight:600; font-family:'Inter',sans-serif;
cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
transition:transform .25s, background .25s;
margin-top:8px;
}
.qform .submit:hover{ transform:translateY(-1px); background:#2a2a2a; }
.qform .submit svg{ width:14px; height:14px; }
.qform .micro{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
margin-top:6px;
}
/* ============================================================
FAQ
============================================================ */
.faq{
padding:140px 60px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.faq .head{
display:grid; grid-template-columns:320px 1fr; gap:80px; align-items:end;
margin-bottom:56px;
}
.faq .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.faq .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.faq h2{
margin-top:22px;
font-weight:700; font-size:clamp(40px, 4.6vw, 68px);
line-height:0.98; letter-spacing:-0.04em; max-width:14ch;
}
.faq h2 .weak{ font-weight:200; }
.faq .head p{
font-size:16px; line-height:1.65; color:var(--mute); max-width:44ch;
}
.faq .items{
display:grid; gap:0;
border-top:1px solid var(--line);
}
.faq details{
border-bottom:1px solid var(--line);
padding:32px 0;
transition:padding .3s;
}
.faq details[open]{ padding:36px 0 32px; }
.faq summary{
display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .n{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.2em; color:var(--mute);
width:36px;
}
.faq summary .q{
font-weight:700; font-size:clamp(20px, 2vw, 26px);
letter-spacing:-0.02em; line-height:1.25; color:var(--ink);
}
.faq summary .plus{
width:32px; height:32px; border-radius:50%;
border:1px solid var(--ink);
display:flex; align-items:center; justify-content:center;
transition:background .25s, transform .3s;
flex-shrink:0;
}
.faq summary .plus::before{
content:''; width:12px; height:1px; background:var(--ink);
}
.faq summary .plus::after{
content:''; width:1px; height:12px; background:var(--ink);
position:absolute;
transition:transform .3s;
}
.faq details[open] summary .plus{ background:var(--ink); transform:rotate(45deg); }
.faq details[open] summary .plus::before{ background:var(--bg); }
.faq details[open] summary .plus::after{ background:var(--bg); }
.faq .a{
padding:20px 0 0 60px;
font-size:16px; line-height:1.7; color:var(--mute);
max-width:72ch;
}
/* ============================================================
FINAL CTA
============================================================ */
.cta-rail{
background:var(--ink); color:var(--bg);
padding:140px 60px;
border-top:1px solid var(--line);
}
.cta-rail .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.cta-rail .k{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.65);
display:inline-flex; align-items:center; gap:12px;
margin-bottom:32px;
}
.cta-rail .k::before{ content:''; width:24px; height:1px; background:rgba(255,255,255,0.5); }
.cta-rail h2{
font-weight:800; font-size:clamp(48px, 6.2vw, 108px);
line-height:0.92; letter-spacing:-0.05em;
max-width:14ch; color:var(--bg);
}
.cta-rail h2 .weak{ font-weight:200; }
.cta-rail p{
font-size:17px; line-height:1.65; color:rgba(255,255,255,0.75);
max-width:44ch;
}
.cta-rail .actions{
margin-top:36px; display:flex; gap:12px; flex-wrap:wrap;
}
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--bg); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--bg); color:var(--ink); }
.btn.primary:hover{ background:transparent; color:var(--bg); transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--bg); }
.btn.ghost:hover{ background:var(--bg); color:var(--ink); }
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
border-top:1px solid rgba(255,255,255,0.08);
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px){
.nav, .c-hero, .channels, .mapsection, .hours, .quickform, .faq, .cta-rail, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.c-hero{ grid-template-columns:1fr; gap:40px; }
.channels .head, .channels .grid, .hours .wrap, .quickform .wrap, .faq .head, .cta-rail .wrap{ grid-template-columns:1fr; gap:40px; }
.channels .ch{ padding:32px 0; border-right:none; border-bottom:1px solid var(--line); }
.channels .ch:not(:first-child){ padding-left:0; }
.channels .ch:last-child{ border-bottom:none; padding-bottom:0; }
.hours .rows{ grid-template-columns:1fr; }
.hours .callout{ grid-template-columns:1fr; gap:16px; }
.hours .callout .lbl{ border-right:none; padding-right:0; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.2); }
.mapsection .head{ grid-template-columns:1fr; }
.mapsection .addr{ text-align:left; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.qform .row{ grid-template-columns:1fr; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
.faq summary{ grid-template-columns:1fr auto; gap:16px; }
.faq summary .n{ display:none; }
.faq .a{ padding-left:0; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:200;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.2);
}
/* ============================================================
NEIGHBORHOOD MATCH PAGE
============================================================ */
/* ============================================================
JOURNAL INDEX PAGE
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after,
.nav .links a.active::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
HERO
============================================================ */
.j-hero{
padding:200px 60px 100px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:end;
}
.j-hero .kicker{
display:inline-flex; align-items:center; gap:14px;
color:var(--mute); font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
margin-bottom:32px;
}
.j-hero .kicker::before{ content:''; width:32px; height:1px; background:var(--mute); }
.j-hero h1{
font-weight:800;
font-size:clamp(52px, 7vw, 124px);
line-height:0.94;
letter-spacing:-0.05em;
color:var(--ink);
max-width:14ch;
}
.j-hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.j-hero .sub{
font-size:18px; line-height:1.65; color:var(--mute);
max-width:46ch;
padding-bottom:16px;
}
/* ============================================================
FEATURED POST
============================================================ */
.featured{
padding:80px 60px 40px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
}
.featured .lbl{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
margin-bottom:36px;
}
.featured .lbl::before{ content:''; width:24px; height:1px; background:var(--mute); }
.f-card{
display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center;
background:var(--ink); color:var(--bg);
overflow:hidden;
transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.f-card:hover{ transform:translateY(-4px); }
.f-card .img{
aspect-ratio:5/4; overflow:hidden; background:#111;
position:relative;
}
.f-card .img img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.25);
transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.f-card:hover .img img{ transform:scale(1.05); filter:grayscale(0); }
.f-card .body{
padding:60px 60px 60px 0;
display:flex; flex-direction:column; gap:22px;
}
.f-card .tag{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.7);
display:inline-flex; align-items:center; gap:10px;
padding:8px 14px; border:1px solid rgba(255,255,255,0.25); border-radius:999px;
align-self:flex-start;
}
.f-card h2{
font-weight:800; font-size:clamp(30px, 3.8vw, 54px);
line-height:1.02; letter-spacing:-0.035em;
max-width:20ch;
}
.f-card .dek{
font-size:17px; line-height:1.65; color:rgba(255,255,255,0.72);
max-width:52ch;
}
.f-card .meta{
display:flex; gap:24px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
color:rgba(255,255,255,0.6);
padding-top:22px; border-top:1px solid rgba(255,255,255,0.16);
}
.f-card .read{
display:inline-flex; align-items:center; gap:10px;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--bg);
border-bottom:1px solid rgba(255,255,255,0.4);
padding-bottom:4px;
align-self:flex-start;
transition:border-color .3s;
}
.f-card .read:hover{ border-color:#fff; }
.f-card .read svg{ width:12px; height:12px; }
/* ============================================================
CATEGORY FILTERS
============================================================ */
.filters{
padding:80px 60px 40px;
max-width:var(--max); margin:0 auto;
border-top:1px solid var(--line);
display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center;
}
.filters .lbl{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.filters .lbl::before{ content:''; width:24px; height:1px; background:var(--mute); }
.filters .pills{
display:flex; flex-wrap:wrap; gap:10px;
}
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:10px 18px;
border:1px solid var(--line);
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
color:var(--ink);
cursor:pointer;
transition:background .25s, border-color .25s, color .25s, transform .25s;
background:transparent;
}
.pill:hover{ border-color:var(--ink); transform:translateY(-1px); }
.pill.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pill .n{
font-size:9px; opacity:0.65; letter-spacing:0.1em;
}
/* ============================================================
POST GRID
============================================================ */
.grid-section{
padding:60px 60px 100px;
max-width:var(--max); margin:0 auto;
}
.p-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:40px 32px;
}
.p-card{
display:block; color:var(--ink);
border-top:1px solid var(--line);
padding-top:24px;
transition:border-color .3s, transform .3s;
}
.p-card:hover{ border-color:var(--ink); transform:translateY(-4px); }
.p-card .img{
aspect-ratio:16/10; overflow:hidden; margin-bottom:24px;
background:var(--bg-3);
}
.p-card .img img{
width:100%; height:100%; object-fit:cover;
filter:grayscale(0.25);
transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.p-card:hover .img img{ transform:scale(1.05); filter:grayscale(0); }
.p-card .cat{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute); margin-bottom:14px;
display:inline-flex; align-items:center; gap:10px;
}
.p-card .cat::before{
content:''; width:6px; height:6px; background:var(--ink); border-radius:50%;
}
.p-card h3{
font-weight:700; font-size:22px; line-height:1.2; letter-spacing:-0.025em;
color:var(--ink);
max-width:26ch;
margin-bottom:12px;
}
.p-card p{
font-size:15px; line-height:1.6; color:var(--mute);
max-width:44ch;
margin-bottom:22px;
}
.p-card .meta{
display:flex; gap:16px; padding-top:16px;
border-top:1px solid var(--line-2);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute);
}
.p-card .meta .dot{
color:var(--line);
}
/* ============================================================
LOAD MORE
============================================================ */
.load-more{
padding:20px 60px 120px;
max-width:var(--max); margin:0 auto;
text-align:center;
border-top:1px solid var(--line);
padding-top:60px;
}
.load-more .btn-more{
display:inline-flex; align-items:center; gap:12px;
padding:16px 32px;
border:1px solid var(--ink); background:transparent; color:var(--ink);
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
cursor:pointer;
transition:background .25s, color .25s, transform .25s;
}
.load-more .btn-more:hover{ background:var(--ink); color:var(--bg); transform:translateY(-1px); }
.load-more .count{
margin-top:20px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
}
/* ============================================================
NEWSLETTER CAPTURE — same as homepage
============================================================ */
.news-cap{
background:var(--ink); color:var(--bg);
padding:120px 60px;
border-top:1px solid var(--line);
}
.news-cap .nc{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.news-cap .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:rgba(255,255,255,0.65);
display:inline-flex; align-items:center; gap:12px;
}
.news-cap .eyebrow::before{ content:''; width:24px; height:1px; background:rgba(255,255,255,0.5); }
.news-cap h2{
margin-top:18px;
font-weight:700; font-size:clamp(36px, 4.4vw, 64px);
line-height:0.98; letter-spacing:-0.04em; color:var(--bg);
max-width:18ch;
}
.news-cap h2 .weak{ font-weight:200; }
.news-cap p{
margin-top:20px; font-size:16px; line-height:1.65; color:rgba(255,255,255,0.7);
max-width:44ch;
}
.nc-form{
display:flex; gap:10px; flex-wrap:wrap;
margin-top:20px;
}
.nc-form .field{
flex:1 1 280px;
padding:16px 18px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.18);
color:var(--bg);
font-family:'Inter',sans-serif;
font-size:15px;
transition:border-color .2s, background .2s;
}
.nc-form .field::placeholder{ color:rgba(255,255,255,0.4); }
.nc-form .field:focus{ outline:none; border-color:var(--bg); background:rgba(255,255,255,0.08); }
.nc-form .submit{
padding:16px 24px;
background:var(--bg); color:var(--ink);
font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
border:1px solid var(--bg); cursor:pointer;
display:inline-flex; align-items:center; gap:10px;
transition:background .25s, color .25s, transform .2s;
}
.nc-form .submit:hover{ background:transparent; color:var(--bg); transform:translateY(-1px); }
.nc-form .submit svg{ width:14px; height:14px; }
.news-cap .micro{
margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.5);
}
.news-cap .stat-right{
padding-left:40px; border-left:1px solid rgba(255,255,255,0.18);
display:flex; flex-direction:column; gap:24px;
}
.news-cap .stat-right .r{
display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline;
}
.news-cap .stat-right .r .n{
font-weight:800; font-size:28px; letter-spacing:-0.04em;
color:var(--bg); line-height:1;
}
.news-cap .stat-right .r .l{
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
color:rgba(255,255,255,0.72); line-height:1.7;
}
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
border-top:1px solid rgba(255,255,255,0.08);
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
MOTION
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px){
.p-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 1100px){
.nav, .j-hero, .featured, .filters, .grid-section, .load-more, .news-cap, footer, footer .top, footer .bot{
padding-left:24px; padding-right:24px;
}
.j-hero{ grid-template-columns:1fr; gap:32px; }
.f-card{ grid-template-columns:1fr; gap:0; }
.f-card .body{ padding:40px; }
.filters{ grid-template-columns:1fr; gap:24px; }
.news-cap .nc{ grid-template-columns:1fr; gap:40px; }
.news-cap .stat-right{ padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,0.18); padding-top:30px; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.p-grid{ grid-template-columns:1fr; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
}
.note{
position:fixed; right:18px; bottom:18px; z-index:200;
background:var(--ink); color:var(--bg);
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
padding:10px 14px; border-radius:999px;
border:1px solid rgba(255,255,255,.2);
}
/* ============================================================
JOURNAL POST TEMPLATE PAGE
============================================================ */
/* ============================================================
404 PAGE
============================================================ */
/* ============================================================
GRAYE — 404
Precision aesthetic · Grayscale only · Inter only
============================================================ */
html{ scroll-behavior:smooth; }
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
404 HERO
============================================================ */
.err{
min-height:100vh;
padding:120px 60px 80px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
background:var(--bg);
}
/* Subtle grid/map background pattern */
.err::before{
content:''; position:absolute; inset:0; z-index:0;
background-image:
linear-gradient(to right, var(--line-2) 1px, transparent 1px),
linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
opacity:0.7;
}
.err::after{
content:''; position:absolute; inset:0; z-index:0;
background-image: radial-gradient(circle, var(--mute-2) 1px, transparent 1.5px);
background-size: 40px 40px;
background-position: 20px 20px;
mask-image: radial-gradient(circle at center, black 0%, transparent 55%);
-webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 55%);
opacity:0.35;
}
.err > *{ position:relative; z-index:1; }
.err .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
margin-bottom:32px;
}
.err .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.err .eyebrow::after{ content:''; width:24px; height:1px; background:var(--mute); }
.err .code{
font-family:'JetBrains Mono',monospace;
font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase;
color:var(--mute-2);
margin-bottom:18px;
}
.err h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(56px, 8vw, 140px);
line-height:0.92;
letter-spacing:-0.055em;
color:var(--ink);
max-width:14ch;
}
.err h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.err .sub{
max-width:52ch;
font-size:17px; line-height:1.7; color:var(--mute);
margin-top:32px;
}
.err .actions{
margin-top:44px;
display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:999px;
font-size:14px; font-weight:600; letter-spacing:0.01em;
border:1px solid var(--ink); transition:all .25s;
}
.btn svg{ width:14px; height:14px; }
.btn.primary{ background:var(--ink); color:var(--bg); }
.btn.primary:hover{ background:#2a2a2a; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.err .coord{
position:absolute; z-index:1;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mute-2);
}
.err .coord.tl{ top:100px; left:60px; }
.err .coord.tr{ top:100px; right:60px; }
.err .coord.bl{ bottom:30px; left:60px; }
.err .coord.br{ bottom:30px; right:60px; }
/* ============================================================
SUGGESTIONS
============================================================ */
.sugg{
background:var(--bg-2);
padding:120px 60px;
border-top:1px solid var(--line);
}
.sugg .wrap{ max-width:var(--max); margin:0 auto; }
.sugg .head{
display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
margin-bottom:60px;
padding-bottom:32px;
border-bottom:1px solid var(--line);
}
.sugg .head h2{
font-weight:700; font-size:clamp(36px, 4.2vw, 60px);
line-height:0.98; letter-spacing:-0.04em; max-width:22ch;
}
.sugg .head h2 .weak{ font-weight:200; }
.sugg .head .num{
font-family:'JetBrains Mono', monospace;
font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
}
.sugg .grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
border-top:1px solid var(--line);
}
.sugg .link{
display:flex; flex-direction:column; justify-content:space-between;
padding:36px 32px 32px;
border-right:1px solid var(--line);
min-height:280px;
transition:background .3s;
position:relative;
}
.sugg .link:last-child{ border-right:none; }
.sugg .link:hover{ background:var(--bg); }
.sugg .link .n{
font-family:'JetBrains Mono', monospace;
font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
}
.sugg .link .body{ margin-top:32px; }
.sugg .link h3{
font-weight:700; font-size:24px; line-height:1.15;
letter-spacing:-0.025em; color:var(--ink);
max-width:16ch;
}
.sugg .link p{
margin-top:12px;
font-size:14px; line-height:1.6; color:var(--mute);
max-width:28ch;
}
.sugg .link .arrow{
margin-top:28px;
display:inline-flex; align-items:center; gap:10px;
font-size:13px; font-weight:600;
color:var(--ink);
transition:transform .25s;
}
.sugg .link .arrow svg{ width:14px; height:14px; transition:transform .25s; }
.sugg .link:hover .arrow svg{ transform:translateX(4px); }
/* ============================================================
TIP LINE
============================================================ */
.tip{
padding:60px 60px 80px;
text-align:center;
border-top:1px solid var(--line);
}
.tip p{
font-size:15px; line-height:1.7; color:var(--mute);
max-width:60ch; margin:0 auto;
}
.tip p a{
color:var(--ink); font-weight:500;
border-bottom:1px solid var(--ink);
transition:opacity .2s;
}
.tip p a:hover{ opacity:0.7; }
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
REVEAL + RESPONSIVE
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (max-width: 1100px){
.nav, .err, .sugg, .tip, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
.sugg .grid{ grid-template-columns:repeat(2, 1fr); }
.sugg .link:nth-child(2){ border-right:none; }
.sugg .link:nth-child(1), .sugg .link:nth-child(2){ border-bottom:1px solid var(--line); }
.err .coord{ display:none; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.sugg .grid{ grid-template-columns:1fr; }
.sugg .link{ border-right:none; border-bottom:1px solid var(--line); min-height:auto; }
.sugg .link:last-child{ border-bottom:none; }
.sugg .head{ grid-template-columns:1fr; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
}
/* ============================================================
PRIVACY TERMS PAGE
============================================================ */
/* ============================================================
GRAYE — LEGAL (Privacy · Terms · IDX)
Precision aesthetic · Grayscale only · Inter only
============================================================ */
html{ scroll-behavior:smooth; }
body{
font-family:'Inter', system-ui, sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img, svg, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 40px;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px;
background:rgba(255,255,255,0);
transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(255,255,255,0.92);
backdrop-filter:saturate(1.2) blur(16px);
-webkit-backdrop-filter:saturate(1.2) blur(16px);
border-color:var(--line);
padding:14px 40px;
}
.nav .mark{
font-weight:800; font-size:20px; letter-spacing:-0.03em; color:var(--ink);
display:flex; align-items:center; gap:10px;
}
.nav .mark .dot{ width:8px; height:8px; background:var(--ink); border-radius:50%; }
.nav .links{ justify-self:center; display:flex; gap:36px; list-style:none; }
.nav .links a{ font-size:13px; font-weight:500; color:var(--ink); transition:opacity .2s; position:relative; }
.nav .links a::after{
content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.7,.2,.2,1);
}
.nav .links a:hover::after{ transform:scaleX(1); }
.nav .right{ justify-self:end; display:flex; gap:16px; align-items:center; }
.nav .tel{
font-family:'JetBrains Mono', monospace;
font-size:12px; color:var(--ink); letter-spacing:0.02em;
}
.nav .cta{
display:inline-flex; align-items:center; gap:10px;
padding:10px 18px 10px 20px;
background:var(--ink); color:var(--bg);
border-radius:999px; font-size:13px; font-weight:600;
border:1px solid var(--ink);
transition:transform .25s, background .25s;
}
.nav .cta:hover{ transform:translateY(-1px); background:#2a2a2a; }
.nav .cta svg{ width:14px; height:14px; }
/* ============================================================
HERO
============================================================ */
.legal-hero{
padding:180px 60px 100px;
max-width:var(--max); margin:0 auto;
border-bottom:1px solid var(--line);
}
.legal-hero .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
margin-bottom:32px;
}
.legal-hero .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.legal-hero h1{
font-family:'Inter', sans-serif;
font-weight:800;
font-size:clamp(48px, 6.4vw, 108px);
line-height:0.94;
letter-spacing:-0.05em;
color:var(--ink);
max-width:16ch;
}
.legal-hero h1 .weak{ font-weight:200; letter-spacing:-0.04em; }
.legal-hero .sub{
max-width:56ch;
font-size:17px; line-height:1.7; color:var(--mute);
margin-top:36px;
}
.legal-hero .meta{
margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
font-family:'JetBrains Mono', monospace;
font-size:11px; font-weight:500; letter-spacing:0.14em; color:var(--mute);
text-transform:uppercase;
}
/* ============================================================
LAYOUT — Sticky TOC + Prose
============================================================ */
.doc{
max-width:var(--max); margin:0 auto;
padding:100px 60px 140px;
display:grid; grid-template-columns:260px 1fr; gap:80px;
align-items:start;
}
.toc{
position:sticky; top:100px;
padding-right:20px;
border-right:1px solid var(--line);
}
.toc h6{
font-family:'JetBrains Mono',monospace;
font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
color:var(--ink);
margin-bottom:20px;
}
.toc ol{
list-style:none; padding:0; margin:0;
display:grid; gap:12px;
counter-reset: toc;
}
.toc ol li{ counter-increment: toc; }
.toc ol li a{
display:flex; gap:14px; align-items:baseline;
font-size:13px; color:var(--mute); line-height:1.5;
transition:color .2s;
padding-bottom:12px;
border-bottom:1px solid var(--line-2);
}
.toc ol li:last-child a{ border-bottom:none; padding-bottom:0; }
.toc ol li a::before{
content: counter(toc, decimal-leading-zero);
font-family:'JetBrains Mono', monospace;
font-size:10px; letter-spacing:0.14em; color:var(--mute-2);
flex:0 0 auto;
}
.toc ol li a:hover{ color:var(--ink); }
.prose{
max-width:720px;
}
.prose section{
padding-top:20px;
margin-bottom:80px;
scroll-margin-top:100px;
}
.prose section:last-child{ margin-bottom:0; }
.prose .sec-num{
font-family:'JetBrains Mono',monospace;
font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
margin-bottom:20px;
}
.prose .sec-num::before{ content:''; width:24px; height:1px; background:var(--mute); }
.prose h2{
font-weight:700;
font-size:clamp(32px, 3.4vw, 48px);
line-height:1.02;
letter-spacing:-0.035em;
color:var(--ink);
margin-bottom:28px;
max-width:22ch;
}
.prose h2 .weak{ font-weight:200; }
.prose h3{
font-weight:700; font-size:18px; letter-spacing:-0.01em;
color:var(--ink);
margin-top:32px; margin-bottom:12px;
}
.prose p{
font-size:16px; line-height:1.75; color:var(--ink-2);
margin-bottom:18px;
}
.prose p.lead{
font-size:18px; color:var(--ink-2); line-height:1.7;
margin-bottom:24px;
}
.prose p.mute{ color:var(--mute); }
.prose ul{
margin:14px 0 24px 20px;
list-style:disc;
}
.prose ul li{
font-size:16px; line-height:1.75; color:var(--ink-2);
margin-bottom:8px;
}
.prose a{
color:var(--ink); font-weight:500;
border-bottom:1px solid var(--ink);
transition:opacity .2s;
}
.prose a:hover{ opacity:0.65; }
.prose .placeholder{
display:block;
margin:16px 0;
padding:14px 18px;
background:var(--bg-3);
border-left:2px solid var(--ink);
font-family:'JetBrains Mono',monospace;
font-size:12px; line-height:1.6;
color:var(--ink-2);
letter-spacing:0.02em;
}
.prose .callout{
margin:24px 0;
padding:24px 28px;
background:var(--bg-2);
border:1px solid var(--line);
}
.prose .callout p{
font-size:15px; line-height:1.7; color:var(--ink-2);
margin-bottom:0;
}
.prose hr{
margin:32px 0;
border:none; border-top:1px solid var(--line);
}
/* ============================================================
CONTACT BLOCK
============================================================ */
.legal-contact{
background:var(--bg-2);
padding:120px 60px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.legal-contact .wrap{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:80px;
align-items:start;
}
.legal-contact .eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
display:inline-flex; align-items:center; gap:12px;
}
.legal-contact .eyebrow::before{ content:''; width:24px; height:1px; background:var(--mute); }
.legal-contact h2{
margin-top:22px;
font-weight:700; font-size:clamp(36px, 4.2vw, 60px);
line-height:0.98; letter-spacing:-0.04em; max-width:16ch;
}
.legal-contact h2 .weak{ font-weight:200; }
.legal-contact p{
margin-top:28px;
font-size:17px; line-height:1.7; color:var(--mute);
max-width:52ch;
}
.legal-contact .info{
display:grid; gap:24px;
}
.legal-contact .info .row{
padding:22px 24px;
border:1px solid var(--line);
background:var(--bg);
display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:baseline;
}
.legal-contact .info .row .k{
font-family:'JetBrains Mono', monospace;
font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
color:var(--mute);
}
.legal-contact .info .row .v{
font-size:15px; color:var(--ink); font-weight:500; line-height:1.55;
}
.legal-contact .info .row .v a{
border-bottom:1px solid var(--ink);
transition:opacity .2s;
}
.legal-contact .info .row .v a:hover{ opacity:0.65; }
/* ============================================================
FOOTER
============================================================ */
footer{
background:var(--ink); color:var(--bg);
padding:100px 60px 36px;
}
footer .top{
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:60px;
padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer .mark{
font-weight:800; font-size:36px; letter-spacing:-0.04em;
display:flex; align-items:center; gap:12px;
}
footer .mark .dot{ width:12px; height:12px; background:#fff; border-radius:50%; }
footer .tag{ margin-top:16px; font-size:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.65; }
footer h5{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
margin-bottom:18px; font-weight:500;
}
footer ul{ list-style:none; display:grid; gap:10px; padding:0; }
footer ul a{ font-size:14px; color:rgba(255,255,255,0.8); transition:color .2s; }
footer ul a:hover{ color:#fff; }
footer .bot{
max-width:var(--max); margin:0 auto; padding-top:28px;
display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55);
}
footer .brokerage{
justify-self:center;
padding:10px 20px; border:1px solid rgba(255,255,255,0.2); border-radius:999px;
display:inline-flex; gap:14px; align-items:center;
}
footer .brokerage strong{
font-family:'Inter',sans-serif; font-size:13px;
text-transform:none; letter-spacing:-0.01em;
color:#fff; font-weight:600;
}
footer .legal{
max-width:var(--max); margin:28px auto 0;
font-size:11px; line-height:1.7; color:rgba(255,255,255,0.42);
text-transform:none; letter-spacing:0;
}
/* ============================================================
REVEAL + RESPONSIVE
============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (max-width: 1100px){
.nav, .legal-hero, .doc, .legal-contact, footer, footer .top, footer .bot{ padding-left:24px; padding-right:24px; }
.nav .links{ display:none; }
.nav .tel{ display:none; }
.doc{ grid-template-columns:1fr; gap:60px; padding-top:60px; }
.toc{ position:static; padding-right:0; padding-bottom:32px; border-right:none; border-bottom:1px solid var(--line); }
.toc ol{ grid-template-columns:1fr 1fr; column-gap:24px; }
.legal-contact .wrap{ grid-template-columns:1fr; gap:48px; }
footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
.toc ol{ grid-template-columns:1fr; }
.legal-contact .info .row{ grid-template-columns:1fr; gap:8px; }
footer .top{ grid-template-columns:1fr; }
footer .bot{ grid-template-columns:1fr; text-align:center; }
}