/* 609 Real Estate — site styles */
:root{
  --ink:#0B1F33; --harbor:#1B4A72; --steel:#5C7C99; --mist:#C9D6E0; --paper:#F2F5F8; --white:#fff;
  /* text greys: --steel stays for lines and rules; these two pass 4.5:1 as small text */
  --steel-text:#54728C; --steel-on-ink:#6D8BA7;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Archivo", Arial, Helvetica, sans-serif;
  --max:1180px; --gutter:clamp(18px, 4vw, 48px);
  --hdr:64px;
}
*{box-sizing:border-box}
/* navy beyond both ends of the page (iPhone overscroll) and behind the header at rest, so its glass never shows a seam */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--ink)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(var(--ink) 0 var(--hdr), var(--paper) var(--hdr));color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;font-weight:400}
img{max-width:100%;height:auto;display:block}
main{flex:1 0 auto}
a{color:var(--harbor);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:active{opacity:.7}
:focus-visible{outline:2px solid var(--harbor);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(2.5rem, 6.2vw, 4.625rem);letter-spacing:-.022em;line-height:1.04}
h2{font-size:clamp(1.75rem, 3.6vw, 2.625rem)}
h3{font-size:clamp(1.3125rem, 2.2vw, 1.5625rem)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.lead{font-family:var(--serif);font-size:clamp(1.1875rem, 2vw, 1.4375rem);line-height:1.45;max-width:34em}
.measure{max-width:38em}
.muted{color:var(--steel-text)}

/* header: stays at the top as navy glass; content scrolls under it */
.top{position:sticky;top:0;z-index:1100;color:var(--paper);background:rgba(11,31,51,.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.top .wrap{display:flex;align-items:center;justify-content:flex-start;gap:clamp(28px, 4vw, 56px);min-height:var(--hdr)}
.brand{position:relative;display:block;line-height:0}
.brand svg,.brand img{height:44px;width:auto}
.brand .tile-logo{display:none}
.nav{display:flex;align-items:center;gap:clamp(14px, 2.4vw, 30px);flex-wrap:wrap;justify-content:flex-start}
.nav a{position:relative;color:var(--mist);text-decoration:none;font-size:.9375rem;letter-spacing:.01em;padding:6px 0;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--mist)}
/* an invisible hit area takes each tab to 44 points without moving the underline */
.nav a::before{content:"";position:absolute;inset:-10px -7px}
@media (prefers-reduced-transparency:reduce){ .top{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none} }
@media (prefers-contrast:more){ .top{background:var(--ink)} }

/* hero (home): navy statement, then a full-bleed photograph that the navy band overlaps */
.hero{background:var(--ink);color:var(--paper);padding-top:clamp(48px, 8vw, 112px)}
.hero h1{max-width:13.5em;color:var(--white)}
.hero .lead{color:var(--mist);margin:30px 0 0;max-width:32em}
.hero-img{margin:clamp(44px, 7vw, 96px) 0 0;position:relative}
.hero-img::before{content:"";position:absolute;inset:0 0 auto 0;height:42%;background:var(--ink)}
.hero-img img{position:relative;width:100%;aspect-ratio:2/1;object-fit:cover}
.hero-img figcaption{background:var(--paper);color:var(--steel-text);font-size:.875rem;letter-spacing:.012em}
.hero-img figcaption span{display:block;max-width:var(--max);margin:0 auto;padding:12px var(--gutter) 0}

/* page title (subpages) */
.page-head{padding-top:clamp(44px, 6vw, 88px);padding-bottom:clamp(28px, 4vw, 48px)}
.page-head h1{max-width:13em}
.page-head .lead{margin-top:24px}

/* sections */
.section{padding:clamp(48px, 7vw, 96px) 0}
.section + .section{padding-top:0}
/* one step between a page title and what follows it, matching the About photo band */
.page-head + .section{padding-top:clamp(8px, 2vw, 24px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px, 5vw, 80px);align-items:start}
.split h2{max-width:10em}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px)}
.cols.two{grid-template-columns:1fr 1fr}
.cols.one{grid-template-columns:1fr}
.cols h3{margin-bottom:10px}
.cols p{max-width:28em}
.rule{border:0;border-top:1px solid var(--mist);margin:0}
.gap-top{margin-top:clamp(40px, 6vw, 72px)}
.lead.tight{margin-top:18px}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;font-size:1rem}

/* criteria list (About) */
.criteria{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:18px 32px;max-width:42em}
.criteria dt{color:var(--steel-text);padding-top:2px}
.criteria dd{margin:0}
.criteria dd + dt,.criteria dd + dt + dd{border-top:1px solid var(--mist);padding-top:18px}

/* portfolio rows: photograph leads, facts sit beside it */
.props{display:grid;gap:clamp(48px, 7vw, 88px)}
.prop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px, 4vw, 56px);align-items:center}
.prop img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mist)}
.prop h2{font-size:clamp(1.625rem, 2.8vw, 2.125rem)}
.prop .place{color:var(--steel-text);margin:6px 0 24px;font-family:var(--serif);font-size:1.1875rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:0;font-size:1rem}
.facts dt{color:var(--steel-text);letter-spacing:.012em}
.facts dd{margin:0}
.bays{margin:28px 0 0}
.bays svg{width:100%;height:28px;display:block}

/* home teaser */
.teaser{display:block;text-decoration:none;color:inherit}
.teaser img{width:100%;aspect-ratio:16/10;object-fit:cover}
.teaser span{display:block;margin-top:10px;font-size:.9375rem;color:var(--steel-text);letter-spacing:.012em}

/* team */
.person{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px, 4vw, 56px);align-items:start}
.person img{width:100%;max-width:420px;aspect-ratio:1;object-fit:cover}
.person .role{color:var(--steel-text);margin:6px 0 24px;font-family:var(--serif);font-size:1.1875rem}
.person p{max-width:36em}
.person p > a:only-child{display:inline-flex;align-items:center;min-height:44px}

/* contact */
.contact-email{font-family:var(--serif);font-size:clamp(1.75rem, 4.6vw, 3.375rem);line-height:1.15;letter-spacing:-.01em;word-break:break-all;margin:0}
.contact-email a{display:inline-block;padding:6px 0;text-decoration-thickness:2px;text-underline-offset:6px}

/* footer */
.foot{background:var(--ink);color:var(--mist);padding:clamp(40px, 6vw, 72px) 0 40px;margin-top:clamp(24px, 4vw, 48px)}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:end}
.foot svg{height:72px;width:auto}
.foot a{color:var(--paper)}
.foot p{margin:0;font-size:.9375rem}
.foot p a{display:inline-flex;align-items:center;min-height:44px}
.foot .fine{color:var(--steel-on-ink);font-size:.8125rem;letter-spacing:.012em}
.foot ul{list-style:none;margin:0;padding:0;display:flex;gap:0 22px;flex-wrap:wrap}
.foot li a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:.9375rem}
.foot li a::before{content:"";position:absolute;inset:0 -11px}  /* short words still get a 44-point target */

/* hover effects only where there is a mouse; touch keeps the pressed state above */
@media (hover:hover){
  a:hover{color:var(--ink)}
  .nav a:hover{color:var(--white)}
  .teaser:hover span{color:var(--ink)}
  .foot li a:hover{text-decoration:underline}
}

@media (max-width:51.25em){
  .split,.prop,.person,.cols.two{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr;gap:28px}
  .prop{align-items:start}
  .foot .wrap{grid-template-columns:1fr;align-items:start}
  .person img{max-width:280px}
  .criteria{grid-template-columns:1fr;gap:6px 0}
  .criteria dd{margin-bottom:14px}
  .criteria dd + dt{border-top:1px solid var(--mist);padding-top:16px}
  .criteria dd + dt + dd{border-top:0;padding-top:0}
}
/* phones: one header row, the small 609 square left of the tabs */
@media (max-width:32.5em){
  body{font-size:1rem}
  .top .wrap{gap:16px}
  .nav{flex-wrap:nowrap;gap:14px}
  .brand .logo{display:none}
  .brand .tile-logo{display:block;width:34px;height:34px}
  .brand::before{content:"";position:absolute;inset:-5px}
  .hero-img img{aspect-ratio:4/3}
  body.home .brand{display:none}
}
@media (max-width:23.75em){
  .nav{gap:11px}
  .nav a{font-size:.875rem}
}
@media (prefers-reduced-motion:no-preference){
  a{transition:color .15s}
}

/* contact page: email and guidance beside the form */
.contact{display:block}
.contact .form{max-width:680px;margin-top:clamp(36px, 5vw, 56px)}
.contact .contact-email{font-size:clamp(1.75rem, 4vw, 3rem)}
.audiences{margin:36px 0 0;max-width:30em}
.audiences dt{font-family:var(--serif);font-size:1.25rem;margin-top:22px}
.audiences dd{margin:6px 0 0;color:var(--ink);font-size:1rem}
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-size:.875rem;color:var(--steel-text);letter-spacing:.012em}
/* inputs never below 16px, or iPhone zooms the page when one is tapped */
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:inherit;font-size:max(16px, 1rem);letter-spacing:0;color:var(--ink);background:var(--white);border:1px solid var(--mist);border-radius:0;-webkit-appearance:none;appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form textarea{resize:vertical;min-height:140px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--harbor);outline-offset:0;border-color:var(--harbor)}
.form button{justify-self:start;font:inherit;font-size:1rem;padding:14px 26px;background:var(--ink);color:var(--paper);border:0;border-radius:0;cursor:pointer}
/* the button answers the press at once, then locks while the inquiry sends */
.form button:active{background:var(--harbor);transform:scale(.98)}
.form button:disabled{background:var(--steel);cursor:default;transform:none}
@media (hover:hover){ .form button:hover{background:var(--harbor)} .form button:disabled:hover{background:var(--steel)} }
@media (prefers-reduced-motion:no-preference){ .form button{transition:transform .1s ease-out, background-color .1s} }
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
@media (max-width:51.25em){ .form .row{grid-template-columns:1fr} }

/* portfolio map */
.map{height:clamp(340px, 46vw, 560px);background:var(--mist);border:1px solid var(--mist);isolation:isolate} /* isolation keeps Leaflet's layers under the header */
.leaflet-container{font-family:var(--sans);font-size:.875rem}
.map-label{background:var(--white);color:var(--ink);border:1px solid var(--mist);border-radius:0;box-shadow:none;padding:8px 12px;font-size:.875rem;line-height:1.3;font-weight:500}
.map-label span{color:var(--steel-text);font-weight:400}
.map-label::before{display:none}
.leaflet-control-zoom a{border-radius:0!important;color:var(--ink)!important}
.leaflet-bar{border-radius:0!important;box-shadow:none!important;border:1px solid var(--mist)!important}
.leaflet-control-attribution{font-size:.6875rem;background:rgba(242,245,248,.85)!important}
@media (pointer:coarse){ .leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px} }

.nb{white-space:nowrap}
/* KPI strip (home portfolio) */
.kpis{margin:22px 0 0;display:grid;grid-template-columns:auto auto auto;gap:24px 40px;justify-content:start}
.kpis div{min-width:0}
.kpis dt{font-size:.875rem;color:var(--steel-text);letter-spacing:.012em}
.kpis dd{margin:4px 0 0;font-family:var(--serif);font-size:clamp(1.5rem, 2.4vw, 2rem);line-height:1.1;color:var(--ink)}
@media (max-width:32.5em){ .kpis{grid-template-columns:1fr 1fr} }

/* hero: large stacked mark beside the statement */
.hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px, 6vw, 96px);align-items:start}
.hero-mark svg{height:clamp(150px, 20vw, 260px);width:auto;display:block}
@media (max-width:51.25em){
  .hero-grid{grid-template-columns:1fr}
  .hero-mark svg{height:120px}
}
.page-kpis{margin-top:32px}

/* nav submenu: mouse only. It eases in from under its tab and lingers briefly, so a diagonal path to it doesn't close it */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item .sub{display:none}
@media (hover:hover) and (min-width:51.3125em){
  .nav-item .sub{display:block;position:absolute;top:100%;left:-16px;min-width:200px;padding:10px 0;margin-top:6px;background:var(--ink);border:1px solid rgba(201,214,224,.25);z-index:20;
    opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease .12s, transform .14s ease .12s, visibility 0s linear .26s}
  .nav-item:hover .sub,.nav-item:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-item .sub a{display:block;padding:8px 16px;border-bottom:0;font-size:.875rem;color:var(--mist);white-space:nowrap}
  .nav-item .sub a::before{display:none}
  .nav-item .sub a:hover{color:var(--white);background:rgba(201,214,224,.08)}
  .nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
}
@media (prefers-reduced-motion:reduce){ .nav-item .sub{transform:none!important} }
#overview,#criteria,#partners{scroll-margin-top:calc(var(--hdr) + 32px)}

/* full-width photo band (About) */
.band{margin:clamp(8px, 2vw, 24px) 0 0}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.band figcaption{color:var(--steel-text);font-size:.875rem;letter-spacing:.012em}
.band figcaption span{display:block;max-width:var(--max);margin:0 auto;padding:12px var(--gutter) 0}
.kpis.page-kpis{grid-template-columns:repeat(4,auto)}
@media (max-width:32.5em){ .band img{aspect-ratio:4/3} .kpis.page-kpis{grid-template-columns:1fr 1fr} }
.narrow{display:none}
@media (max-width:32.5em){ .wide{display:none} .narrow{display:inline} }