:root{
  --navy:#002349;
  --navy-deep:#001730;
  --ink:#1a1a1a;
  --muted:#6b7280;
  --line:#e3e1dc;
  --paper:#ffffff;
  --sand:#f6f4ef;
  --gold:#a8873f;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* type */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;color:var(--navy)}
h1{font-size:clamp(44px,7vw,92px);letter-spacing:-.01em}
h2{font-size:clamp(32px,4vw,52px)}
h3{font-size:26px}
.lede{font-size:18px;color:var(--muted);max-width:56ch}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:10;color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{font-family:var(--serif);font-size:22px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;opacity:.8;margin-top:4px}
nav{display:flex;gap:36px}
nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}
nav a:hover{border-color:currentColor}
.top .cta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(255,255,255,.7);padding:12px 22px;transition:.2s}
.top .cta:hover{background:#fff;color:var(--navy)}

/* hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff;
  background:
   linear-gradient(180deg,rgba(0,23,48,.55) 0%,rgba(0,23,48,.15) 40%,rgba(0,23,48,.85) 100%),
   linear-gradient(120deg,#0b3a6b 0%,#1d5a8a 45%,#7aa3b8 100%);
  background-size:cover;background-position:center}
.hero .wrap{width:100%;padding-bottom:72px}
.hero .eyebrow{color:#e4cf9b;margin-bottom:22px}
.hero h1{color:#fff;max-width:14ch}
.hero p{margin-top:24px;font-size:18px;max-width:52ch;opacity:.9}

/* search */
.search{margin-top:48px;background:#fff;color:var(--ink);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;max-width:1040px}
.search label{display:block;padding:16px 22px;border-right:1px solid var(--line)}
.search span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.search select{width:100%;border:0;background:transparent;font:inherit;font-size:15px;color:var(--navy);outline:none;cursor:pointer}
.search button{background:var(--navy);color:#fff;border:0;padding:0 38px;font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.search button:hover{background:var(--navy-deep)}

/* sections */
section{padding:clamp(72px,10vw,140px) 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.head .eyebrow{display:block;margin-bottom:14px}
.link{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:4px}

/* listings */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.card .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#c9d3dc,#8fa4b5);position:relative;overflow:hidden}
.card:nth-child(2) .ph{background:linear-gradient(135deg,#d8d0c0,#a89c80)}
.card:nth-child(3) .ph{background:linear-gradient(135deg,#b7c4c0,#6f8a86)}
.card .tag{position:absolute;top:16px;left:16px;background:#fff;color:var(--navy);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px}
.card .ph::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:0;transition:opacity .3s}
.card:hover .ph::after{opacity:.12}
.card .price{font-family:var(--serif);font-size:30px;color:var(--navy);margin-top:20px}
.card .loc{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.card .title{font-size:16px;margin-top:8px}
.card .spec{font-size:13px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;gap:18px}

/* neighborhoods */
.nb{background:var(--sand)}
.nbgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.nbitem{background:var(--sand);padding:36px 28px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,color .25s}
.nbitem:hover{background:var(--navy);color:#fff}
.nbitem:hover h3,.nbitem:hover .eyebrow{color:#fff}
.nbitem p{font-size:14px;color:var(--muted);margin-top:10px}
.nbitem:hover p{color:rgba(255,255,255,.75)}

/* brief */
.brief{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.brief .ph{aspect-ratio:5/4;background:linear-gradient(135deg,#0b3a6b,#3b6f94)}
.feature-list{list-style:none;margin-top:32px}
.feature-list li{padding:18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px}
.feature-list li:last-child{border-bottom:1px solid var(--line)}
.feature-list b{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--navy)}
.feature-list span{color:var(--muted);font-size:14px;max-width:32ch;text-align:right}

/* services */
.svc{background:var(--navy);color:#fff}
.svc h2,.svc h3{color:#fff}
.svc .eyebrow{color:#e4cf9b}
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.svcgrid div{border-top:1px solid rgba(255,255,255,.25);padding-top:28px}
.svcgrid p{margin-top:14px;color:rgba(255,255,255,.72);font-size:15px}
.svcgrid .n{font-family:var(--serif);font-size:15px;color:#e4cf9b;margin-bottom:12px;display:block}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:center}
.portrait{aspect-ratio:4/5;background:linear-gradient(160deg,#d9d6cf,#9a9487);display:flex;align-items:flex-end;padding:20px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.about p+p{margin-top:18px}
.about .lede{color:var(--ink);margin-top:24px}
.stats{display:flex;gap:48px;margin-top:40px;flex-wrap:wrap}
.stats b{display:block;font-family:var(--serif);font-size:48px;font-weight:400;color:var(--navy);line-height:1}
.stats span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* contact */
.contact{background:var(--sand)}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
form{display:grid;gap:18px}
input,textarea,select.f{width:100%;padding:16px 0;border:0;border-bottom:1px solid #b9b5ab;background:transparent;font:inherit;font-size:16px;outline:none;transition:border-color .2s}
input:focus,textarea:focus,select.f:focus{border-color:var(--navy)}
textarea{resize:vertical;min-height:100px}
.btn{justify-self:start;background:var(--navy);color:#fff;border:0;padding:18px 40px;font:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .2s;margin-top:10px}
.btn:hover{background:var(--navy-deep)}
.info dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:28px}
.info dd{font-family:var(--serif);font-size:26px;color:var(--navy)}

footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:56px 0 40px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .brand{color:#fff}
.legal{max-width:70ch;margin-top:32px;font-size:12px;opacity:.6}

/* responsive */
@media (max-width:980px){
  nav{display:none}
  .grid3,.svcgrid{grid-template-columns:1fr}
  .nbgrid{grid-template-columns:repeat(2,1fr)}
  .brief,.about,.contactgrid{grid-template-columns:1fr}
  .search{grid-template-columns:1fr 1fr}
  .search button{grid-column:1/-1;padding:20px}
  .search label{border-bottom:1px solid var(--line)}
  .feature-list span{text-align:left}
}
@media (max-width:560px){
  .top .cta{display:none}
  .search{grid-template-columns:1fr}
}

/* v2 additions */
.actions{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.btn-light,.btn-ghost{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:18px 34px;transition:.2s}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--sand)}
.btn-ghost{border:1px solid rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.numbers{background:var(--navy);color:#fff;padding:56px 0}
.numbers .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.numbers b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1}
.numbers span{display:block;margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);max-width:24ch}
.portrait{padding:0;background:var(--sand)}
.portrait img{width:100%;height:100%;object-fit:cover}
.role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:12px}
.info a:hover{color:var(--gold)}
.info dd{overflow-wrap:anywhere}
@media (max-width:980px){.numbers .wrap{grid-template-columns:repeat(2,1fr)}}

/* reference photos */
.hero{background:
   linear-gradient(180deg,rgba(0,23,48,.55) 0%,rgba(0,23,48,.2) 40%,rgba(0,23,48,.88) 100%),
   url(assets/ref/hero.jpg) center 35%/cover,#0b3a6b}
.nbgrid{background:none;gap:16px}
.nbitem{position:relative;overflow:hidden;color:#fff;min-height:380px;padding:28px;background:var(--navy)}
.nbitem::before{content:"";position:absolute;inset:0;background:var(--img) center/cover;transition:transform .6s ease}
.nbitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,23,48,.1) 25%,rgba(0,23,48,.9) 100%)}
.nbitem>*{position:relative;z-index:1}
.nbitem:hover{background:var(--navy)}
.nbitem:hover::before{transform:scale(1.06)}
.nbitem h3,.nbitem .eyebrow{color:#fff}
.nbitem .eyebrow{color:#e4cf9b}
.nbitem p,.nbitem:hover p{color:rgba(255,255,255,.85)}
.nbitem .link{color:#fff;align-self:flex-start}
.brief .ph{background:url(assets/ref/yontem.jpg) center/cover,#0b3a6b}
@media (max-width:980px){.nbitem{min-height:300px}}