/* Joaquin Padilla - site styles. Layout and type follow bjornfarrugia.com (Alphonso | Bjorn Group). */
:root {
  --ink: #000;
  --text: #1a1a1a;
  --muted: #555;
  --bg: #f5f5f3; /* main color of harrispartnersre.com (JP 2026-11-06; Bjorn #f7f5f0 was too creme) */
  --card: #eeede9;
  --white: #fff;
  --line: rgba(0, 0, 0, .14);
  --max: 1400px;
  --pad: 50px;
  --font: 'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.25, .46, .45, .94);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 300; color: var(--text); background: var(--bg); font-size: 16px; line-height: 1.6; letter-spacing: 1px; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 300; text-transform: uppercase; letter-spacing: 1px; margin: 0; line-height: 1.25; color: var(--ink); }
h1 { font-size: 45px; }
h2 { font-size: 28px; }
p { margin: 0 0 18px; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 1200px; }
.center { text-align: center; }
.section { padding: 100px 0; }
.bg-white { background: #f2f2f2; }
.eyebrow { font-size: 13px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; }

/* Buttons */
.btn { display: inline-block; padding: 20px 46px; font: inherit; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s; }
.btn-light { color: #fff; border-color: #fff; }
.btn-solid { background: var(--ink); color: #fff; }
.text-link { font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: background .4s var(--ease), color .4s, box-shadow .4s; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 130px; padding: 0 15px 0 40px; transition: height .4s var(--ease); }
.logo { display: block; }
.logo img { height: 80px; width: auto; transition: height .4s var(--ease); }
.logo .dark { display: none; }
.site-header.solid .logo .light { display: none; }
.site-header.solid .logo .dark { display: block; }
.site-header.solid .logo img { height: 54px; }
.nav { display: flex; align-items: center; }
.nav a { font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 13px; position: relative; }
.nav a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
.menu-btn { background: none; border: 0; cursor: pointer; padding: 20px 13px; display: flex; flex-direction: column; gap: 6px; color: inherit; }
.menu-btn span { display: block; width: 26px; height: 1.5px; background: currentColor; }
.site-header.solid { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.site-header.solid .bar { height: 84px; }

/* Side menu */
.scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .4s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 60; background: var(--white); color: var(--ink); padding: 90px 60px 50px; display: flex; flex-direction: column; gap: 4px; transform: translateX(100%); transition: transform .45s var(--ease); overflow-y: auto; }
.menu-open .drawer { transform: none; }
.menu-open .scrim { opacity: 1; pointer-events: auto; }
.drawer a { font-size: 15px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer .close { position: absolute; top: 28px; right: 34px; font-size: 30px; font-weight: 300; background: none; border: 0; cursor: pointer; color: var(--ink); line-height: 1; }
.drawer .contact { margin-top: 30px; font-size: 14px; line-height: 2; }
.drawer .contact a { border: 0; padding: 0; text-transform: none; font-size: 14px; display: block; }

/* Hero */
.hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; background: #222; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.hero .inner { position: relative; z-index: 2; padding: 0 30px; width: 100%; max-width: 1300px; }
.hero h1, .hero h2 { color: #fff; }
.hero h1 { font-size: 45px; letter-spacing: 2px; }
.hero .ig { display: inline-block; margin-top: 26px; font-size: 16px; font-weight: 500; letter-spacing: 1px; }
.hero .sub { margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; opacity: .92; }
.hero .scroll { position: absolute; z-index: 3; left: 50%; bottom: 34px; width: 1px; height: 60px; background: rgba(255,255,255,.5); overflow: hidden; }
.hero .scroll::after { content: ''; position: absolute; left: 0; top: -60px; width: 1px; height: 60px; background: #fff; animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { to { top: 60px; } }
.hero .inner > * { opacity: 0; transform: translateY(18px); animation: rise 1.2s var(--ease) forwards; }
.hero .inner > *:nth-child(2) { animation-delay: .25s; }
.hero .inner > *:nth-child(3) { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.page-hero { height: 600px; min-height: 0; }
.page-hero h1 { font-size: 45px; }

/* Intro text */
.intro { padding: 48px 0 60px; text-align: center; }
.intro h2 { margin-bottom: 30px; }
.intro p { max-width: 1100px; margin: 0 auto; font-size: 16px; }

/* Listing cards (3 across) */
.list-head { padding-top: 100px; text-align: center; }
.list-head p { max-width: 760px; margin: 18px auto 0; }
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.card { display: block; background: var(--card); }
.card .ph { position: relative; aspect-ratio: 407 / 315; overflow: hidden; background: #ddd; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card .ph::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .5s var(--ease); }
.card .view { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); white-space: nowrap; color: #fff; border-color: #fff; }
.tag { position: absolute; z-index: 2; top: 0; right: 0; background: var(--ink); color: #fff; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 18px; }
.card .txt { padding: 24px 15px 28px; text-align: center; }
.card h3 { font-size: 21px; line-height: 1.5; }
.card .line { font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.7; margin-top: 4px; }
.card .price { font-size: 17px; font-weight: 400; margin-top: 4px; }
.view-all { text-align: center; padding: 50px 0 0; }

/* Meet Joaquin */
.meet { padding: 100px 0; }
.meet .grid { display: grid; grid-template-columns: 420px 1fr; gap: 36px; align-items: start; }
.meet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.meet h2 { margin: 20px 0 30px; }
.meet .lic { font-size: 15px; font-weight: 400; margin-bottom: 20px; }
.meet p { font-size: 15px; }

/* Stats over a photo */
.stats-photo { padding: 0 0 20px; }
.stats-box { position: relative; overflow: hidden; color: #fff; }
.stats-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stats-box::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.stats-box .row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 60px 30px; padding: 110px 40px; text-align: center; }
.stat b { display: block; font-size: 30px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; line-height: 1.3; }
.stat span { display: block; font-size: 14px; margin-top: 18px; }

/* Featured In marquee */
.press { padding: 60px 0 70px; text-align: center; overflow: hidden; }
.press h2 { margin-bottom: 36px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee .track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee .item { flex: 0 0 250px; height: 105px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); padding: 0 34px; }
.marquee .item img { height: calc(var(--h) * 1px); width: auto; max-width: 100%; opacity: .9; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation-duration: 120s; } }

/* Neighborhood cards */
.hoods { padding: 100px 0; }
.hoods-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; }
.hood-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hood-track::-webkit-scrollbar { display: none; }
.hood-card { flex: 0 0 calc((100% - 60px) / 3); scroll-snap-align: start; }
.hood-card .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.hood-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hood-card .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45)); }
.hood-card .nm { position: absolute; z-index: 2; left: 0; right: 0; bottom: 34px; text-align: center; color: #fff; font-size: 24px; letter-spacing: 2px; text-transform: uppercase; }
.pager { display: flex; gap: 24px; align-items: center; }
.pager button { font: inherit; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; background: none; border: 0; cursor: pointer; padding: 4px 0; border-bottom: 1px solid transparent; }

/* Sign-up call to action */
.cta-block { padding: 100px 0; text-align: center; }
.cta-block h2 { margin-bottom: 22px; }
.cta-block p { margin-bottom: 36px; }

/* Full-width photo band */
.band { position: relative; min-height: 690px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; overflow: hidden; }
.band .bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.band::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.band .inner { position: relative; z-index: 2; max-width: 750px; padding: 50px; }
.band h2 { color: #fff; }
.band hr { width: 90px; border: 0; border-top: 1px solid #fff; margin: 26px auto 30px; }
.band p { margin-bottom: 44px; }

/* Forms */
input[type=text], input[type=email], input[type=tel], textarea, select { width: 100%; font: inherit; font-size: 15px; letter-spacing: 1px; background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 14px 2px; outline: none; color: var(--ink); border-radius: 0; }
textarea { min-height: 130px; resize: vertical; border: 1px solid var(--ink); padding: 14px; }
::placeholder { color: #6b6b6b; }
.consent { display: flex; gap: 10px; margin: 20px 0 26px; font-size: 12px; line-height: 1.6; color: var(--muted); letter-spacing: .3px; text-align: left; }
.consent input { margin-top: 3px; flex: none; }
.consent a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.form-grid .full { grid-column: 1 / -1; }
.notice { background: var(--white); padding: 20px 24px; margin-bottom: 30px; }

/* Modal (sign-up) */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal .box { position: relative; background: var(--bg); width: min(620px, 100%); padding: 60px 56px 46px; text-align: center; max-height: 92vh; overflow-y: auto; }
.modal h2 { margin-bottom: 14px; }
.modal .close { position: absolute; top: 16px; right: 22px; font-size: 30px; background: none; border: 0; cursor: pointer; line-height: 1; }
.modal .field { margin-bottom: 10px; }

/* Footer */
.site-footer { padding: 70px 0 30px; background: var(--bg); border-top: 1px solid var(--line); }
.site-footer h3 { font-size: 28px; margin-bottom: 44px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.f-grid .lbl { font-size: 14px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
.f-grid .val { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; }
.f-grid a.val { display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
.f-legal { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; margin-top: 40px; font-size: 12px; line-height: 1.7; }
.f-legal .brand img { width: 160px; height: auto; margin-bottom: 18px; filter: brightness(0); }
.f-legal .brand img.team { width: 170px; }
.f-legal .lic { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.f-legal img.eho { height: 40px; width: auto; margin-top: 10px; filter: brightness(0); }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--ink); margin-top: 40px; padding-top: 30px; font-size: 14px; }
.f-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .3s, color .3s; }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

/* Portfolio filters */
.filters { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.count-note { text-align: center; font-size: 14px; margin: 26px 0 0; }

/* Property detail (layout of bjornfarrugia.com listing pages) */
.p-gallery { position: relative; height: 820px; background: #111; overflow: hidden; }
.p-gallery .main { position: absolute; inset: 0; }
.p-gallery .main img { position: absolute; inset: 0; width: 100%; height: 114%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .8s var(--ease); cursor: zoom-in; }
.p-gallery .main img.on { opacity: 1; }
.p-gallery::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45)); }
.p-arrow { position: absolute; z-index: 3; top: 316px; width: 48px; height: 48px; border: 1px solid #fff; background: rgba(0,0,0,.05); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s; font-family: var(--font); font-weight: 200; }
.p-arrow.prev { left: 30px; }
.p-arrow.next { right: 30px; }
.p-thumbs { position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px; display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; padding: 0 0 0 0; scroll-behavior: smooth; }
.p-thumbs::-webkit-scrollbar { display: none; }
.p-thumbs button { flex: 0 0 175px; height: 108px; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #222; opacity: .75; transition: opacity .3s; }
.p-thumbs button.on { opacity: 1; }
.p-thumbs img { width: 100%; height: 113%; object-fit: cover; object-position: center top; }
.p-thumbs .all { flex-basis: 220px; background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; opacity: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.p-thumbs .all svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.5; }
.p-head { padding: 26px 0 0; }
.p-head .tag { position: static; display: inline-block; padding: 6px 34px; font-size: 13px; }
.p-head h1 { font-size: 21px; margin-top: 12px; }
.p-head .addr { font-size: 14px; font-weight: 400; text-transform: uppercase; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,.25); max-width: 860px; }
.p-head .price { font-size: 16px; font-weight: 400; margin-top: 14px; }
.p-head .price small { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-right: 10px; color: var(--muted); }
.p-body { display: block; padding: 46px 0 110px; max-width: 980px; }
.p-body .desc { padding-right: 0; }
.p-body .desc p { font-size: 16px; line-height: 1.6; }
.p-body .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.p-feats { border-left: 1px solid rgba(0,0,0,.25); padding-left: 86px; align-self: start; }
.p-feats div { font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.7; margin-bottom: 26px; }
.p-feats div:last-child { margin-bottom: 0; }
.p-feats span { display: block; }
.agent-card { display: grid; grid-template-columns: 185px 1fr; gap: 60px; align-items: start; padding-bottom: 110px; }
.agent-card img { width: 185px; height: 200px; object-fit: cover; object-position: center 8%; }
.agent-card h3 { font-size: 29px; margin-bottom: 14px; }
.agent-card .row { display: flex; gap: 60px; flex-wrap: wrap; font-size: 14px; margin-bottom: 26px; }
.agent-card .row b { display: block; font-weight: 400; text-transform: uppercase; }
.agent-card .row a { text-decoration: underline; text-underline-offset: 3px; }
.p-map { height: 500px; background: #fff; }
.p-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35); }
.mls-note { font-size: 12px; color: var(--muted); margin-top: 26px; }
.modal .box form { text-align: left; }
@media (max-width: 900px) {
  .p-gallery { height: 62vh; min-height: 420px; }
  .p-arrow { top: 40%; }
  .p-arrow.prev { left: 14px; } .p-arrow.next { right: 14px; }
  .p-thumbs button { flex-basis: 110px; height: 70px; }
  .p-thumbs .all { flex-basis: 150px; font-size: 12px; }
  .p-body { grid-template-columns: 1fr; padding: 34px 0 70px; }
  .p-body .desc { padding-right: 0; }
  .p-feats { border-left: 0; border-top: 1px solid rgba(0,0,0,.25); padding: 30px 0 0; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .p-feats div { margin: 0; }
  .agent-card { grid-template-columns: 110px 1fr; gap: 24px; padding-bottom: 70px; }
  .agent-card img { width: 110px; height: 130px; }
  .agent-card h3 { font-size: 22px; }
  .agent-card .row { gap: 18px 30px; }
  .p-map { height: 340px; }
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.96); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 84vh; object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; font-weight: 200; cursor: pointer; padding: 20px; font-family: var(--font); }
.lightbox .lb-close { top: 10px; right: 20px; }
.lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #ccc; font-size: 13px; letter-spacing: 2px; }

/* About page */
.bio { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.bio img { width: 100%; }
.bio h2 { margin-bottom: 26px; }
.bio p { font-size: 15px; }
.details { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 14px; }
.details b { display: block; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }

/* Contact page */
.contact-page { display: grid; grid-template-columns: 1fr 1.3fr; gap: 90px; }
.contact-page .lines p { margin: 0 0 22px; font-size: 15px; }
.contact-page .lines b { display: block; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1180px) {
  .nav a { display: none; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .meet .grid { grid-template-columns: 340px 1fr; }
}
@media (max-width: 900px) {
  :root { --pad: 24px; }
  h1, .page-hero h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .section, .meet, .hoods, .cta-block { padding: 70px 0; }
  .list-head { padding-top: 70px; }
  .site-header .bar, .site-header.solid .bar { height: 80px; padding: 0 10px 0 20px; }
  .logo img { height: 56px; }
  .site-header.solid .logo img { height: 46px; }
  .meet .grid, .bio, .contact-page, .f-grid, .f-legal { grid-template-columns: 1fr; gap: 40px; }
  .meet img { max-width: 420px; }
  .stats-box .row { grid-template-columns: repeat(2, 1fr); padding: 70px 20px; gap: 46px 20px; }
  .stat b { font-size: 24px; }
  .hood-card { flex-basis: 78%; }
  .hood-card .nm { font-size: 20px; }
  .page-hero { height: 440px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .band { min-height: 560px; }
}
@media (max-width: 640px) {
  .grid-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .marquee .item { flex-basis: 190px; height: 90px; padding: 0 24px; }
  .modal .box { padding: 54px 26px 34px; }
  .hoods-head { flex-direction: column; align-items: start; gap: 16px; }
}

/* Neighborhood index grid */
.hood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
@media (max-width: 900px) { .hood-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 640px) { .hood-grid { grid-template-columns: 1fr; } }

/* Hide the MLS mark in the lower right corner of MLS photos: show only the top 88% of the photo. */
.card .ph img { height: 113%; object-position: center top; }
.lightbox img { clip-path: inset(0 0 11% 0); }

/* iPhone Safari draws button text in blue unless a color is set. */
button { color: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.pager button { color: var(--ink); }

/* Property tabs on phones: 2 x 2 grid, full width */
@media (max-width: 640px) {
  .hoods-head .pager { gap: 18px; }
}

/* Listing slider taps (phones): only the visible photo takes a tap; the arrows keep their look
   but answer taps in a much larger invisible area; no double-tap zoom. */
.p-gallery { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.p-gallery .main img { pointer-events: none; -webkit-user-drag: none; }
.p-gallery .main img.on { pointer-events: auto; }
.p-arrow::before { content: ''; position: absolute; top: -90px; bottom: -90px; left: -30px; right: -30px; }
.p-arrow.prev::before { left: -30px; right: -60px; }
.p-arrow.next::before { left: -60px; right: -30px; }
.p-thumbs, .lightbox { touch-action: manipulation; }
.lightbox button { min-width: 64px; min-height: 64px; }
@media (max-width: 900px) {
  .p-arrow::before { top: -110px; bottom: -110px; }
  .p-arrow.prev::before { left: -14px; right: -70px; }
  .p-arrow.next::before { left: -70px; right: -14px; }
}

/* Hover looks only on devices with a mouse. iPhone Safari keeps :hover after a tap, which made two tabs look selected. */
@media (hover: hover) {
  .btn:hover { background: var(--ink); color: #fff; }
  .btn-light:hover { background: #fff; color: var(--ink); }
  .btn-solid:hover { background: transparent; color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
  .hero .ig:hover { opacity: .8; }
  .card:hover .ph img { transform: scale(1.06); }
  .card:hover .ph::after { opacity: 1; }
  .card:hover .view { opacity: 1; transform: translate(-50%, -50%); }
  .hood-card:hover img { transform: scale(1.06); }
  .pager button:hover { border-bottom-color: currentColor; }
  .socials a:hover { background: var(--ink); color: #fff; }
  .p-arrow:hover { background: rgba(255,255,255,.2); }
  .p-thumbs button:hover { opacity: 1; }
  .p-thumbs .all:hover { background: rgba(0,0,0,.6); }
}

/* Listing stats (format of jackharrisre.com): icon stats under the price, details table after the description */
.p-stats { display: grid; grid-template-columns: repeat(4, max-content); gap: 26px 64px; margin-top: 30px; padding: 4px 0 30px; border-bottom: 1px solid rgba(0,0,0,.25); max-width: 980px; }
.st { display: flex; gap: 16px; align-items: flex-start; }
.st svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.st b { display: block; font-size: 15px; font-weight: 400; letter-spacing: 1px; line-height: 1.4; }
.st span { display: block; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.5; }
.p-details { max-width: 640px; margin-top: 56px; }
.p-details h3 { font-size: 26px; letter-spacing: 3px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.2); margin-bottom: 14px; }
.p-details ul { list-style: none; margin: 0; padding: 0; }
.p-details li { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 7px 0; font-size: 13px; }
.p-details li span { letter-spacing: 1.8px; text-transform: uppercase; color: #6b6b6b; }
.p-details li b { font-weight: 500; letter-spacing: .5px; }
@media (max-width: 900px) {
  .p-stats { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .st svg { width: 26px; height: 26px; }
  .p-details li { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .p-details li span { font-size: 12px; }
  .p-details li b { font-size: 14px; }
}

/* Numbers band right under the home hero (jackharrisre.com / harrispartnersre.com style) */
.stats-band { padding: 46px 0 40px; background: var(--bg); }
.stats-band .row { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 30px; text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.stats-band .stat b { display: block; font-size: 44px; font-weight: 300; letter-spacing: 1px; line-height: 1.15; color: var(--ink); text-transform: uppercase; }
.stats-band .stat span { display: block; margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
@media (max-width: 900px) {
  .stats-band { padding: 34px 0 10px; }
  .stats-band .row { grid-template-columns: 1fr 1fr; gap: 30px 14px; padding-bottom: 34px; }
  .stats-band .stat b { font-size: 34px; }
  .stats-band .stat span { font-size: 11px; letter-spacing: 1px; margin-top: 6px; }
}

/* Numbers photo box right under the home hero */
.stats-photo.top { padding: 50px 0 0; }
@media (max-width: 900px) { .stats-photo.top { padding: 30px 0 0; } }


/* Home numbers: plain band right under the hero on all screens, like jackharrisre.com (JP 2026-11-06:
   a photo box right after the hero video "never looks right"). Order: hero > numbers > Meet Joaquin > Featured In > properties. */
.stats-band { display: block; padding: 56px 0 10px; }
.stats-band .row { padding-bottom: 50px; }
@media (max-width: 900px) {
  .stats-band { padding: 34px 0 10px; }
  .stats-band .row { padding-bottom: 34px; }
  .home-flow > .meet { padding: 50px 0 70px; }
}

/* Property tabs: plain text, no boxes (JP 2026-11-06). Selected = black with a thin underline. */
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 38px; margin-top: 46px; }
.filters button { font: inherit; font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #8a8a8a; background: none; border: 0; border-bottom: 1px solid transparent; padding: 6px 0; cursor: pointer; transition: color .3s, border-color .3s; }
.filters button.on { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) { .filters button:hover { color: var(--ink); } }
@media (max-width: 640px) {
  .filters { gap: 6px 26px; margin-top: 34px; }
  .filters button { font-size: 12px; letter-spacing: 1.5px; }
}


/* Count-up numbers keep a steady width */
.stat b { font-variant-numeric: tabular-nums; }

/* Home page vertical rhythm (JP 2026-11-06: "the spacing was off"). One gap of ~110 px between sections on desktop, ~70 px on phones. */
.home-flow > .stats-band { padding: 56px 0 0; }
.home-flow > .stats-band .row { padding-bottom: 50px; }
.home-flow > .meet { padding: 70px 0 0; }
.home-flow > #featured .list-head, .home-flow > .notable .list-head { padding-top: 110px; }
.home-flow > .notable { padding-bottom: 0; }
.home-flow > .press { padding: 110px 0 100px; }
.home-flow > .press h2 { margin-bottom: 40px; }
@media (max-width: 900px) {
  .home-flow > .stats-band { padding: 34px 0 0; }
  .home-flow > .stats-band .row { padding-bottom: 34px; }
  .home-flow > .meet { padding: 44px 0 0; }
  .home-flow > #featured .list-head, .home-flow > .notable .list-head { padding-top: 70px; }
  .home-flow > .press { padding: 70px 0 64px; }
  .home-flow > .press h2 { margin-bottom: 28px; }
}

/* ===================================================================================================
   v3 (JP 2026-11-06): zacdweck.com style. His colors (cream #f2eeec, ink #282828, taupe #907e70),
   two fonts (Cormorant Garamond for headings with an italic accent word, Jost for text and labels),
   logo banner under the hero, Let's Connect pill, Thinking of selling card, neighborhood guides,
   and the valuation page of JP's old Luxury Presence site. The v2 look is saved in _versions/.
   =================================================================================================== */
:root {
  --ink: #282828;
  --text: #282828;
  --muted: rgba(40, 40, 40, .72);
  --bg: #f2eeec;
  --card: #e9e3df;
  --cream2: #e9e3df;
  --taupe: #907e70;
  --line: rgba(40, 40, 40, .14);
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
}
body { color: var(--text); background: var(--bg); letter-spacing: .3px; font-weight: 300; }
h1, h2 { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: .2px; line-height: 1.1; color: var(--ink); }
h1 em, h2 em { font-style: italic; }
h2 { font-size: 48px; }
.label { font-size: 12px; font-weight: 500; letter-spacing: 2.1px; text-transform: uppercase; color: var(--taupe); margin-bottom: 14px; }
.label.light { color: #c9b9ab; }
.label-link { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 2.1px; text-transform: uppercase; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.label-link.light { color: #fff; }
.btn { font-size: 14px; letter-spacing: 2.4px; text-transform: none; padding: 17px 42px; }
.bg-white { background: var(--cream2); }

/* Home hero keeps the name in Jost capitals (JP's Jack Harris style hero). */
.home-flow > .hero h1 { font-family: var(--font); font-weight: 300; text-transform: uppercase; letter-spacing: 2px; font-size: 45px; color: #fff; }
.hero::after { background: rgba(28, 28, 28, .32); }

/* Page heroes: big serif title, small label above, short line below */
.page-hero { height: 640px; }
.page-hero .sub { font-size: 12px; font-weight: 500; letter-spacing: 2.1px; opacity: .85; }
.page-hero h1 { font-size: 88px; font-weight: 300; margin-top: 16px; color: #fff; }
.page-hero .tagline { max-width: 600px; margin: 18px auto 0; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.95); }

/* Header and side menu on cream */
.site-header.solid { background: var(--bg); }
.drawer { background: var(--bg); }
.modal .box { background: var(--bg); }
.modal h2 { font-size: 42px; }

/* Logo banner right under the hero: no heading, slow, gray logos (like zacdweck.com) */
.logo-band { background: var(--bg); padding: 34px 0; overflow: hidden; }
.logo-band .item { flex: 0 0 240px; height: 64px; border: 0; padding: 0 30px; }
.logo-band .item img { height: calc(var(--h) * .74px); filter: brightness(0); opacity: .38; }
.logo-band .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Meet Joaquin: text left, photo right */
.home-flow > .meet { padding: 110px 0 0; }
.meet .grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.meet h2 { margin: 0 0 30px; font-size: 52px; }
.meet p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.meet .label-link { margin-top: 12px; }
.meet img { aspect-ratio: 4 / 5; }

/* Numbers: serif figures between two thin lines */
.home-flow > .stats-band { padding: 110px 0 0; }
.home-flow > .stats-band .row, .stats-band .row { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 50px 0; }
.stats-band .stat b, .stat b { font-family: var(--serif); font-weight: 300; text-transform: none; font-size: 56px; letter-spacing: 0; }
.stats-band .stat span { color: var(--taupe); font-weight: 500; font-size: 11px; letter-spacing: 2px; }

/* Listing sections and cards */
.list-head { text-align: left; }
.list-head h2 { font-size: 46px; }
.grid-cards { gap: 46px 30px; margin-top: 44px; }
.card { background: none; }
.card .tag { left: 16px; top: 16px; right: auto; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; padding: 6px 11px; background: var(--ink); }
.card .txt { text-align: left; padding: 18px 0 0; }
.card h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.card .line { font-size: 11px; font-weight: 400; letter-spacing: 1.6px; color: var(--muted); margin-top: 6px; }
.card .price { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-top: 8px; }
.view-all { text-align: left; padding-top: 46px; }

/* Neighborhood slider on the home page */
.hoods { background: var(--bg); }
.hoods-head { align-items: end; }
.hood-card .nm { left: 26px; right: 26px; bottom: 26px; text-align: left; font-family: var(--serif); font-size: 34px; letter-spacing: 0; text-transform: none; }
.home-flow > .hoods { padding: 110px 0 100px; }

/* Sign-up block and the photo band at the end of pages */
.cta-block { border-top: 1px solid var(--line); }
.cta-block h2 { font-size: 44px; }
.band { min-height: 540px; }
.band::after { background: rgba(28, 28, 28, .45); }
.band .band-logo { width: 64px; height: auto; margin: 0 auto 26px; }
.band h2 { font-size: 60px; color: #fff; margin-bottom: 26px; }

/* Footer */
.site-footer h3 { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 36px; letter-spacing: 0; }
.f-grid .lbl { color: var(--taupe); font-size: 12px; font-weight: 500; letter-spacing: 2px; }

/* Let's Connect pill, bottom left */
.connect-pill { position: fixed; left: 24px; bottom: 24px; z-index: 45; background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 11px 21px; font: 500 14px/1.2 var(--font); letter-spacing: .35px; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.2); transition: background .25s; }
.menu-open .connect-pill { display: none; }

/* Thinking of selling card, bottom right */
.sell-card { position: fixed; right: 24px; bottom: 24px; z-index: 44; width: 320px; background: var(--bg); border: 1px solid var(--line); padding: 26px 26px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.16); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sell-card.show { opacity: 1; transform: none; }
.sell-card[hidden] { display: none; }
.sell-card .label { font-size: 11px; margin-bottom: 8px; }
.sell-card p { font-family: var(--serif); font-size: 26px; line-height: 1.22; color: var(--ink); margin: 0 0 20px; padding-right: 10px; }
.sell-card .label-link { border: 0; padding: 0; font-size: 11px; }
.sell-card .x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 24px; line-height: 1; color: rgba(40,40,40,.45); cursor: pointer; padding: 4px 6px; }

/* ---------- Home valuation (sections of the old Luxury Presence page) ---------- */
.val-hero { display: block; height: auto; min-height: 100vh; padding: 150px 0 90px; text-align: left; }
.val-hero::after { background: rgba(24, 24, 24, .5); }
.val-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 450px; gap: 80px; align-items: center; min-height: calc(100vh - 240px); }
.val-copy h1 { font-size: 62px; font-weight: 300; color: #fff; line-height: 1.06; }
.val-copy p { margin-top: 26px; max-width: 520px; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.92); }
.val-card { background: var(--bg); color: var(--ink); padding: 40px 40px 36px; }
.val-card .steps { display: flex; justify-content: center; gap: 14px; list-style: none; margin: 0 0 30px; padding: 0; }
.val-card .steps li { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(40,40,40,.3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; transition: background .3s, color .3s; }
.val-card .steps li.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.v-step { display: none; }
.v-step.on { display: block; }
.v-done:not([hidden]) { display: block; text-align: center; }
.v-done h2 { font-size: 42px; margin-bottom: 16px; }
.v-done p { color: var(--muted); font-size: 15px; }
.val-card label[for] { display: block; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); }
.val-card .btn { width: 100%; margin-top: 24px; }
.val-card .field { margin-bottom: 6px; }
.val-card .consent { margin: 16px 0 0; font-size: 11px; }
.v-back { display: block; margin: 16px auto 0; background: none; border: 0; font: inherit; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.val-worth { padding: 120px 0; }
.worth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.worth-grid h2 { margin-bottom: 28px; }
.worth-grid p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.worth-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.val-faq { background: var(--ink); padding: 100px 0; }
.faq3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.faq3 .box { border: 1px solid rgba(242,238,236,.22); padding: 46px 36px 40px; }
.faq3 h3 { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 30px; line-height: 1.15; color: var(--bg); text-align: center; margin-bottom: 22px; }
.faq3 p { font-size: 15px; line-height: 1.75; color: rgba(242,238,236,.75); margin: 0; }
.val-line { padding: 120px 0 60px; }
.val-line.alt { background: var(--cream2); }
.timeline { position: relative; max-width: 1060px; margin: 70px auto 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 60px; width: 1px; background: rgba(40,40,40,.25); }
.t-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 100px; padding-bottom: 70px; }
.t-item::after { content: ''; position: absolute; left: 50%; top: 13px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink); }
.t-item .chip { justify-self: end; align-self: start; border: 1px solid var(--ink); background: var(--bg); padding: 9px 18px; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.val-line.alt .chip { background: var(--cream2); }
.t-item.right .chip { grid-column: 2; grid-row: 1; justify-self: start; }
.t-item.right .t-body { grid-column: 1; grid-row: 1; text-align: right; }
.t-body h3 { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 32px; margin-bottom: 14px; }
.t-body p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0; }

/* ---------- Neighborhood index and guides (zacdweck.com/neighborhoods layout) ---------- */
.narrow-text { max-width: 820px; }
.narrow-wide { max-width: 960px; }
.g-intro { padding: 100px 0 70px; }
.g-intro p { margin-top: 24px; font-size: 17px; line-height: 1.8; color: var(--muted); }
.g-index { padding: 0 0 120px; }
.guide-card { display: block; }
.guide-card .ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #ccc; }
.guide-card.lead .ph { aspect-ratio: 16 / 8; }
.guide-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.guide-card .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.5)); }
.guide-card .cap { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 24px; color: #fff; }
.guide-card .nm { display: block; font-family: var(--serif); font-size: 36px; line-height: 1.1; }
.guide-card.lead .nm { font-size: 60px; }
.guide-card .rg { display: block; margin-top: 8px; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; opacity: .85; }
.guide-card p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; }
.g-within { margin: 80px 0 22px; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 30px; }
.g-lede { padding: 100px 0 90px; }
.g-lede p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.g-lede p.first { font-size: 19px; color: var(--ink); }
.g-glance { background: var(--ink); padding: 80px 0 70px; }
.g-glance .label { text-align: center; margin-bottom: 40px; }
.g-glance dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin: 0; }
.g-glance dl > div { border-top: 1px solid rgba(242,238,236,.14); padding: 18px 0 24px; }
.g-glance dt { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(242,238,236,.5); margin-bottom: 6px; }
.g-glance dd { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(242,238,236,.92); }
.g-text { padding: 110px 0 50px; }
.g-text h2 { font-size: 42px; margin-bottom: 26px; }
.g-text .reveal + .reveal { margin-top: 80px; }
.g-text p { font-size: 16px; line-height: 1.8; color: var(--muted); }
.g-map { padding: 70px 0; }
.g-map h2 { font-size: 42px; margin-bottom: 34px; }
.g-map .map { height: 460px; background: #ddd; }
.g-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.45) sepia(.12); }
.g-faq { padding: 70px 0 110px; }
.g-faq h2 { font-size: 42px; margin-bottom: 30px; }
.g-faq .q { border-top: 1px solid var(--line); padding: 30px 0 14px; }
.g-faq .q h3 { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 25px; line-height: 1.25; margin-bottom: 12px; }
.g-faq .q p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.g-explore { border-top: 1px solid var(--line); padding: 70px 0 90px; }
.g-explore .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 46px; margin-top: 10px; }
.g-explore .links a { font-family: var(--serif); font-size: 30px; }

@media (hover: hover) {
  .connect-pill:hover { background: var(--taupe); }
  .guide-card:hover img { transform: scale(1.05); }
  .g-explore .links a:hover { font-style: italic; }
  .label-link:hover { opacity: .7; }
  .btn:hover { background: var(--ink); color: var(--bg); }
  .btn-solid:hover { background: transparent; color: var(--ink); }
}

@media (max-width: 1100px) {
  .val-grid { grid-template-columns: 1fr 400px; gap: 50px; }
  .val-copy h1 { font-size: 50px; }
}
@media (max-width: 900px) {
  h2, .list-head h2, .meet h2, .cta-block h2 { font-size: 36px; }
  .home-flow > .hero h1 { font-size: 32px; }
  .page-hero { height: 480px; }
  .page-hero h1 { font-size: 54px; }
  .page-hero .tagline { font-size: 16px; }
  .logo-band { padding: 26px 0; }
  .logo-band .item { flex-basis: 190px; height: 54px; padding: 0 22px; }
  .home-flow > .meet { padding: 70px 0 0; }
  .meet .grid { grid-template-columns: 1fr; gap: 40px; }
  .meet img { max-width: 100%; }
  .home-flow > .stats-band { padding: 70px 0 0; }
  .stats-band .row { padding: 36px 0; }
  .stats-band .stat b, .stat b { font-size: 44px; }
  .home-flow > .hoods { padding: 70px 0 64px; }
  .hood-card .nm { font-size: 28px; }
  .band { min-height: 440px; }
  .band h2 { font-size: 42px; }
  .connect-pill { left: 16px; bottom: 16px; font-size: 13px; padding: 10px 18px; }
  .sell-card { right: 16px; left: auto; bottom: 70px; width: min(300px, calc(100vw - 32px)); padding: 20px 20px 18px; }
  .sell-card p { font-size: 22px; margin-bottom: 14px; }
  .val-hero { padding: 116px 0 50px; }
  .val-grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .val-copy h1 { font-size: 40px; }
  .val-copy p { font-size: 16px; margin-top: 18px; }
  .val-card { padding: 30px 22px 26px; }
  .val-worth { padding: 70px 0; }
  .worth-grid, .faq3 { grid-template-columns: 1fr; gap: 40px; }
  .faq3 { gap: 20px; }
  .val-faq { padding: 70px 0; }
  .faq3 .box { padding: 34px 24px 30px; }
  .faq3 h3 { font-size: 27px; }
  .val-line { padding: 70px 0 30px; }
  .timeline { margin-top: 44px; }
  .timeline::before { left: 4px; bottom: 30px; }
  .t-item { grid-template-columns: 1fr; padding: 0 0 46px 32px; }
  .t-item::after { left: 4px; }
  .t-item .chip, .t-item.right .chip { grid-column: auto; grid-row: auto; justify-self: start; margin-bottom: 16px; }
  .t-item.right .t-body { grid-column: auto; grid-row: auto; text-align: left; }
  .t-body h3 { font-size: 27px; }
  .g-intro { padding: 70px 0 44px; }
  .guide-card.lead .ph, .guide-card .ph { aspect-ratio: 4 / 3; }
  .guide-card.lead .nm { font-size: 40px; }
  .g-pair, .g-grid { grid-template-columns: 1fr; gap: 40px; }
  .g-pair { margin-top: 40px; }
  .g-within { margin: 56px 0 18px; }
  .g-lede { padding: 64px 0 56px; }
  .g-lede p.first { font-size: 17px; }
  .g-glance { padding: 60px 0 50px; }
  .g-glance dl { grid-template-columns: 1fr; }
  .g-text { padding: 70px 0 30px; }
  .g-text h2, .g-map h2, .g-faq h2 { font-size: 34px; }
  .g-text .reveal + .reveal { margin-top: 56px; }
  .g-map .map { height: 340px; }
  .g-faq { padding: 50px 0 70px; }
  .g-explore .links a { font-size: 24px; }
}
.val-card h2 { color: var(--ink); }

/* v3 fixes after the first screenshots */
h1, h2, h3, .stat b, .card .price, .card h3 { font-variant-numeric: lining-nums tabular-nums; }
.logo-band .item img { height: calc(var(--h) * .95px); opacity: .5; }
@media (max-width: 900px) {
  .logo-band .item img { height: calc(var(--h) * .8px); }
  .sell-card { left: 16px; right: 16px; width: auto; bottom: 66px; padding: 14px 44px 14px 16px; }
  .sell-card .label { display: none; }
  .sell-card p { font-size: 19px; margin: 0 0 6px; }
  .sell-card .x { top: 6px; right: 8px; }
}
.p-head h1 { font-size: 44px; font-weight: 400; margin-top: 16px; }
.p-head .price { font-family: var(--serif); font-size: 26px; font-variant-numeric: lining-nums; }
.p-details h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 32px; }
.agent-card h3 { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 36px; }
@media (max-width: 900px) { .p-head h1 { font-size: 34px; } }
.logo-band .item { flex: 0 0 auto; padding: 0 40px; }
.logo-band .item img { max-width: none; }
@media (max-width: 900px) { .logo-band .item { padding: 0 30px; } }

/* Text weight like zacdweck.com (JP 2026-11-06: his text is "less narrow" and "a little thicker").
   Body text: Jost 400 with a little more letter spacing (was Jost 300). Section headings: Cormorant 500. */
body { font-weight: 400; }
p, li, dd, .card .line, .guide-card p { letter-spacing: .5px; }
.meet p, .g-intro p, .g-lede p, .g-text p, .g-faq .q p, .worth-grid p, .t-body p, .p-body .desc p, .bio p, .cta-block p { color: rgba(40, 40, 40, .76); }
h2 { font-weight: 500; }
.band h2, .modal h2, .v-done h2 { font-weight: 400; }

/* ===================================================================================================
   V4 (JP 2026-11-06): headings in Times, the way zacdweck.com shows them. His CSS asks for Cormorant
   Garamond but never loads it, so browsers draw Times New Roman (Windows) or Times (Mac, iPhone).
   Times has regular and bold only: all headings use the regular weight (400), italic word in Times italic.
   Sizes follow his site: section headings 48 px, guide headings 36 px, page titles 96 px.
   V3 (Cormorant) is saved in _versions/v3-zac-style-2026-11-06.
   =================================================================================================== */
:root { --serif: 'Times New Roman', Times, 'Liberation Serif', serif; }
h1, h2, .band h2, .modal h2, .v-done h2 { font-weight: 400; letter-spacing: .24px; }
h2, .meet h2, .list-head h2, .cta-block h2, .band h2 { font-size: 48px; }
.page-hero h1 { font-size: 96px; font-weight: 400; letter-spacing: 0; }
.val-copy h1 { font-size: 60px; font-weight: 400; }
.g-intro h2 { font-size: 40px; }
.g-text h2, .g-map h2, .g-faq h2 { font-size: 36px; }
.g-faq .q h3 { font-size: 21px; }
.g-explore .links a { font-size: 24px; }
.guide-card .nm { font-size: 32px; }
.guide-card.lead .nm { font-size: 52px; }
.hood-card .nm { font-size: 30px; }
.card h3 { font-size: 23px; }
.card .price { font-size: 21px; }
.stats-band .stat b, .stat b { font-weight: 400; font-size: 50px; }
.faq3 h3, .t-body h3 { font-size: 27px; }
.site-footer h3 { font-size: 32px; }
.sell-card p { font-size: 23px; }
.p-head h1 { font-size: 40px; }
.p-head .price { font-size: 24px; }
.p-details h3 { font-size: 28px; }
.agent-card h3 { font-size: 32px; }
.modal h2 { font-size: 38px; }
.v-done h2 { font-size: 38px; }
@media (max-width: 900px) {
  h2, .meet h2, .list-head h2, .cta-block h2 { font-size: 34px; }
  .band h2 { font-size: 38px; }
  .page-hero h1 { font-size: 52px; }
  .val-copy h1 { font-size: 38px; }
  .g-intro h2 { font-size: 32px; }
  .g-text h2, .g-map h2, .g-faq h2 { font-size: 30px; }
  .guide-card.lead .nm { font-size: 36px; }
  .guide-card .nm { font-size: 30px; }
  .hood-card .nm { font-size: 26px; }
  .stats-band .stat b, .stat b { font-size: 40px; }
  .p-head h1 { font-size: 30px; }
  .sell-card p { font-size: 19px; }
}

/* ===================================================================================================
   V5 (JP 2026-11-06): headings stay in Times (V4), but the numbers band and the words under the property
   photos go back to the V3 style in Cormorant Garamond. V4 is saved in _versions/v4-times-2026-11-06.
   =================================================================================================== */
:root { --cormorant: 'Cormorant Garamond', 'Cormorant', Georgia, serif; }
.stats-band .stat b, .stat b { font-family: var(--cormorant); font-weight: 300; font-size: 56px; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.card h3 { font-family: var(--cormorant); font-weight: 400; font-size: 26px; letter-spacing: 0; line-height: 1.2; }
.card .price { font-family: var(--cormorant); font-weight: 400; font-size: 22px; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 900px) {
  .stats-band .stat b, .stat b { font-size: 44px; }
}

/* Footer in the layout of zacdweck.com (JP 2026-11-06): logo + socials, four columns, then legal text. */
.z-footer { padding: 80px 0 110px; border-top: 1px solid var(--line); }
.zf-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.zf-logo img { width: 150px; height: auto; filter: brightness(0); opacity: .9; }
.zf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.zf-cols .lbl { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); margin-bottom: 18px; }
.zf-cols a { display: block; font-size: 14px; line-height: 1.5; padding: 4px 0; color: var(--muted); letter-spacing: .3px; }
.zf-cols p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 6px; letter-spacing: .3px; }
.zf-cols p.zf-name { color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.zf-cols img.team { width: 150px; height: auto; margin-top: 22px; filter: brightness(0); opacity: .75; }
.z-footer .f-legal { display: block; margin-top: 40px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.z-footer .f-legal p { letter-spacing: .3px; }
.z-footer .f-legal .lic { color: var(--ink); }
.z-footer .f-bottom { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 24px; font-size: 12px; color: var(--muted); letter-spacing: .3px; }
@media (hover: hover) { .zf-cols a:hover { color: var(--ink); } }
@media (max-width: 900px) {
  .z-footer { padding: 60px 0 100px; }
  .zf-top { margin-bottom: 40px; }
  .zf-logo img { width: 120px; }
  .zf-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}

/* Inline sign-up: Name and Email side by side with a submit button (JP 2026-11-06). */
.inline-signup { display: grid; grid-template-columns: 1fr 1fr auto; gap: 34px; align-items: end; max-width: 900px; margin: 34px auto 0; text-align: left; }
.inline-signup input[type=text], .inline-signup input[type=email] { font-size: 16px; letter-spacing: .8px; padding: 14px 2px 12px; border-bottom: 1px solid rgba(40,40,40,.55); }
.inline-signup .btn { padding: 16px 40px; }
.cta-block .fine { max-width: 900px; margin: 18px auto 0; font-size: 12px; color: var(--muted); }
.cta-block .fine a { text-decoration: underline; text-underline-offset: 2px; }
.cta-block .cta-thanks { font-family: var(--serif); font-size: 26px; color: var(--ink); margin-top: 26px; }
@media (max-width: 700px) {
  .inline-signup { grid-template-columns: 1fr; gap: 14px; }
  .inline-signup .btn { width: 100%; margin-top: 14px; }
}

/* An element with the hidden attribute stays hidden, also when a layout rule gives it display: grid or flex. */
[hidden] { display: none !important; }

/* Sign-up row narrower (JP 2026-11-06: "too wide"). */
.inline-signup { max-width: 660px; gap: 24px; }
.inline-signup .btn { padding: 15px 30px; }
.cta-block .fine { max-width: 660px; }

/* Sign-up like the zacdweck.com footer field (JP 2026-11-06): no button, an arrow at the end of the email line. */
.inline-signup { grid-template-columns: 1fr 1fr; gap: 36px; }
.inline-signup input[type=text], .inline-signup input[type=email] { font-size: 18px; letter-spacing: .3px; padding: 12px 2px 12px; border-bottom: 1px solid var(--ink); color: var(--ink); }
.inline-signup ::placeholder { color: rgba(40, 40, 40, .32); }
.arrow-field { position: relative; }
.arrow-field input[type=email] { padding-right: 44px; }
.arrow-field .arrow { position: absolute; right: 0; bottom: 6px; width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: rgba(40, 40, 40, .7); padding: 0; }
.arrow-field .arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
@media (hover: hover) { .arrow-field .arrow:hover { color: var(--ink); } .arrow-field .arrow:hover svg { transform: translateX(3px); } }
@media (max-width: 700px) { .inline-signup { grid-template-columns: 1fr; gap: 10px; } }

/* V7 (JP 2026-11-06): numbers right under the hero, logo banner (no heading) between Meet Joaquin and the
   properties. Even gaps: about 90 px around the banner on desktop, 60 px on phones. V5 saved in _versions/. */
.home-flow > .stats-band { padding-top: 64px; }
.home-flow > .logo-band { padding: 72px 0 0; }
.home-flow > .logo-band + #featured .list-head { padding-top: 72px; }
@media (max-width: 900px) {
  .home-flow > .stats-band { padding-top: 40px; }
  .home-flow > .logo-band { padding: 46px 0 0; }
  .home-flow > .logo-band + #featured .list-head { padding-top: 46px; }
}

/* Phones: Meet Joaquin on the home page shows only the first paragraph and "Read more" (JP 2026-11-06). */
@media (max-width: 900px) { .meet .desk-only { display: none; } }

/* Preview order (JP 2026-11-06): hero > press > numbers > Meet. These rules use the section order, so they
   do not change the live V7 order (hero > numbers > Meet > press). */
.home-flow > .hero + .logo-band { padding: 38px 0 0; }
.home-flow > .logo-band + .stats-band { padding-top: 38px; }
.home-flow > .meet + #featured .list-head { padding-top: 110px; }
@media (max-width: 900px) {
  .home-flow > .hero + .logo-band { padding: 26px 0 0; }
  .home-flow > .logo-band + .stats-band { padding-top: 26px; }
  .home-flow > .meet + #featured .list-head { padding-top: 70px; }
}

/* Phones (JP 2026-11-06): the Neighborhoods heading and Previous | Next sit on the left (the desktop rule
   align-items: end pushed them right when the heading stacks), and Name + Email share one line. */
@media (max-width: 640px) {
  .hoods-head { align-items: flex-start; text-align: left; }
}
@media (max-width: 700px) {
  .inline-signup { grid-template-columns: 1fr 1fr; gap: 16px; }
  .inline-signup input[type=text], .inline-signup input[type=email] { font-size: 16px; padding: 12px 2px 10px; }
  .arrow-field input[type=email] { padding-right: 34px; }
  .arrow-field .arrow { width: 32px; bottom: 4px; }
}

/* JP 11-07: phone number stays in the top bar on tablets and phones, next to the menu button */
@media (max-width: 1180px) { .nav a.nav-phone { display: block; } }
@media (max-width: 480px) {
  .nav a.nav-phone { font-size: 12px; letter-spacing: 1px; padding: 12px 6px; }
  .nav a.nav-phone::after { left: 6px; right: 6px; }
}

/* JP 11-07: open houses (cards, listing page, home page list). Data: _source/open_houses.json */
.card .oh-flag { position: absolute; z-index: 2; left: 16px; bottom: 16px; background: var(--bg); color: var(--ink); font-size: 10px; font-weight: 400; letter-spacing: 1.8px; text-transform: uppercase; padding: 7px 11px; line-height: 1.3; }
.card .oh-flag b { font-weight: 500; margin-right: 6px; }
.oh-strip { margin: 40px 0 6px; }
.oh-strip .label { margin-bottom: 10px; }
.oh-strip ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.18); }
.oh-strip li { border-bottom: 1px solid rgba(0,0,0,.18); }
.oh-strip a { display: grid; grid-template-columns: 230px 1fr 180px auto; align-items: baseline; gap: 24px; padding: 18px 0; }
.oh-strip .when { font-size: 12px; font-weight: 500; letter-spacing: 1.8px; text-transform: uppercase; }
.oh-strip .where { font-family: 'Times New Roman', Times, serif; font-size: 24px; line-height: 1.2; }
.oh-strip .area { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--taupe); }
.oh-strip .go { font-size: 12px; font-weight: 500; letter-spacing: 2.1px; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.oh-strip a:hover .where { font-style: italic; }
@media (max-width: 900px) {
  .oh-strip a { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 0; }
  .oh-strip .when { grid-column: 1 / -1; }
  .oh-strip .where { font-size: 21px; }
  .oh-strip .area { grid-column: 1; }
  .oh-strip .go { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}
@media (max-width: 480px) { .card .oh-flag { left: 12px; bottom: 12px; font-size: 9.5px; letter-spacing: 1.5px; } }

/* JP 11-07: listing page open house panel (v2) */
.p-oh { margin: 30px 0 0; max-width: 860px; background: #e9e3df; padding: 30px 34px; }
.p-oh .oh-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px 34px; }
.p-oh .oh-date { display: flex; gap: 24px; align-items: center; }
.p-oh .tile { flex: 0 0 86px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); border: 1px solid rgba(0,0,0,.12); }
.p-oh .tile span { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.p-oh .tile b { font-family: 'Times New Roman', Times, serif; font-weight: 400; font-size: 44px; line-height: 1; margin: 4px 0 3px; }
.p-oh .kind { font-size: 11px; font-weight: 500; letter-spacing: 2.1px; text-transform: uppercase; color: var(--taupe); }
.p-oh .day { font-family: 'Times New Roman', Times, serif; font-size: 26px; line-height: 1.15; margin-top: 6px; }
.p-oh .hrs { font-size: 15px; letter-spacing: .5px; margin-top: 4px; }
.p-oh .cal { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--taupe); margin-top: 10px; }
.p-oh .cal a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; margin-left: 12px; }
.p-oh .oh-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.14); }
.p-oh .host { margin: 0; font-size: 14px; line-height: 1.6; }
.p-oh .host a { border-bottom: 1px solid currentColor; }
.p-oh .oh-actions { display: flex; gap: 12px; }
.p-oh .oh-actions .btn { padding: 15px 26px; font-size: 12px; }
.p-oh .btn:focus:not(:focus-visible) { outline: none; }
@media (max-width: 700px) {
  .p-oh { padding: 24px 20px; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .p-oh .oh-dates { grid-template-columns: 1fr; gap: 22px; }
  .p-oh .oh-date { gap: 18px; }
  .p-oh .tile { flex-basis: 74px; height: 92px; }
  .p-oh .tile b { font-size: 38px; }
  .p-oh .day { font-size: 22px; }
  .p-oh .oh-foot { flex-direction: column; align-items: stretch; gap: 18px; }
  .p-oh .oh-actions { flex-direction: column; }
  .p-oh .oh-actions .btn { width: 100%; text-align: center; }
}
/* JP 11-07: open house banner across the bottom of the card photo (like his old site) */
.card .oh-flag { left: 0; right: 0; bottom: 0; text-align: center; background: rgba(242,238,236,.86); font-size: 12px; letter-spacing: 1.8px; padding: 11px 10px; }
.card .oh-flag b { font-weight: 500; margin-right: 0; }
.card .oh-flag b::after { content: ' \00B7 '; font-weight: 400; }
@media (max-width: 480px) { .card .oh-flag { left: 0; bottom: 0; font-size: 11px; letter-spacing: 1.5px; padding: 10px 8px; } }
.p-oh .oh-actions .btn { text-transform: uppercase; letter-spacing: 1.8px; }
/* Layout B: no line between the beds/baths row and the open house panel */
.p-stats.has-oh { border-bottom: 0; padding-bottom: 0; }