/* 04 — PINE & PARCEL / real estate
   Oat paper, forest green, soft Fraunces. */

body.realtor{
  --bg:#f6f3eb; --ink:#1f2d22;
  --accent:#233326; --accent-ink:#f6f3eb;
  --line:rgba(31,45,34,.18);
  --soft:rgba(31,45,34,.62);
  --panel:#efeade;
  --inv-bg:#233326; --inv-ink:#f6f3eb;
  --display:'Fraunces',serif;
  --nav-bg:#f6f3eb;
  --radius:2px;
  background:#f6f3eb;color:#1f2d22;font-family:'DM Sans',sans-serif;
}

.realtor .dh,.realtor .dh-sm,.realtor .cta h2,.realtor .phero h1{font-weight:300}
.realtor .sec-inv,.realtor .cta,.realtor .site-ft{--soft:#b5c0b4}

/* header */
.realtor .nav{padding:24px 4vw;display:flex;justify-content:space-between;align-items:center}
.realtor .logo{font:29px 'Fraunces';font-weight:300}

/* hero */
.realtor .hero{padding:5vh 4vw 9vh}
.realtor .hero-top{display:grid;grid-template-columns:2fr 1fr;align-items:end;gap:50px}
.realtor .hero h1{font:clamp(72px,10vw,145px)/.84 'Fraunces';font-weight:300;letter-spacing:-.055em;margin:40px 0}
.realtor .hero-top p{font-size:18px;line-height:1.65;margin-bottom:50px}
.realtor .main-photo{height:62vh;min-height:440px}

/* listing cards */
.realtor .card{display:block;transition:.3s}
.realtor .card-img{height:310px;overflow:hidden;position:relative}
.realtor .card-img img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.realtor .card:hover .card-img img{transform:scale(1.04)}
.realtor .card h3{font:27px 'Fraunces';font-weight:300;margin:16px 0 5px}
.realtor .card p{margin:0;color:var(--soft);font-size:15px}
.realtor .tag{position:absolute;left:14px;top:14px;background:var(--bg);color:var(--ink);padding:7px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;z-index:2}
.realtor .tag.sold{background:#233326;color:#f6f3eb}

/* search bar */
.realtor .searchbar{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:0;border:1px solid var(--line);background:var(--bg)}
.realtor .searchbar .field{padding:16px 20px;border-right:1px solid var(--line);gap:6px}
.realtor .searchbar .field select,.realtor .searchbar .field input{border:0;padding:0;font-size:16px}
.realtor .searchbar button{padding:0 34px;background:var(--accent);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.12em;font-size:11px}

/* neighbourhood strip */
.realtor .hood{position:relative;height:300px;overflow:hidden}
.realtor .hood img{transition:transform .7s}
.realtor .hood:hover img{transform:scale(1.05)}
.realtor .hood span{position:absolute;left:20px;bottom:18px;color:#fff;font:26px 'Fraunces';font-weight:300;z-index:2;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.realtor .hood:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%)}

@media(max-width:820px){
  .realtor .hero h1{font-size:clamp(42px,12vw,88px);margin:26px 0;overflow-wrap:anywhere}
  .realtor .hero-top{grid-template-columns:1fr;align-items:start;gap:0}
  .realtor .hero-top p{margin-bottom:34px}
  .realtor .main-photo{min-height:280px;height:42vh}
  .realtor .searchbar{grid-template-columns:1fr}
  .realtor .searchbar .field{border-right:0;border-bottom:1px solid var(--line)}
  .realtor .searchbar button{padding:16px;min-height:48px}
  .realtor .tag{position:static;display:inline-block;margin:0 0 10px}
}