h1{font-size:clamp(52px,6vw,78px);line-height:.95}h2{font-size:clamp(38px,4.5vw,54px)}.hero{min-height:600px;position:relative;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.46) 52%,rgba(0,0,0,.14) 80%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 32%),var(--hero-img) center/cover;color:white}.heroBox{position:absolute;left:6vw;bottom:60px;max-width:650px}.heroIcons{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0}.heroIcons span{display:flex;gap:7px;align-items:center;font-weight:700}.price{font-size:28px;font-weight:800}.price small{font-size:14px;font-weight:500}.gallerySec{padding:70px 0}
.g img{width:100%;height:100%;object-fit:cover;display:block}.overview{padding:75px 0;background:var(--cream)}.overviewGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px}.copy p{line-height:1.7;color:#455249}.facts{background:#fff;padding:26px}.facts h3{font-size:24px}.factrow{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid #e0e3e0;font-size:14px}.details{padding:62px 0}.detailGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.detail{display:flex;gap:10px}.detail svg{flex:none;margin-top:2px}.detail b{display:block;font-size:14px}.detail span{font-size:12px;color:#5d6862}.viewing{padding:82px 0}.viewGrid{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px}form{border:1px solid var(--line);padding:28px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{font-size:12px;font-weight:800;display:block;margin-bottom:6px}input,textarea{width:100%;padding:12px;border:1px solid #ccd2cd;font:inherit}textarea{min-height:100px}.full{grid-column:1/-1}.apply{padding:68px 0;background:#eaf5f3}.applyGrid{display:grid;grid-template-columns:1fr 1fr;gap:50px}@media(max-width:900px){.overviewGrid,.viewGrid{grid-template-columns:1fr}.detailGrid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.formGrid,.detailGrid{grid-template-columns:1fr}.full{grid-column:auto}}
.callus{font-size:15px;color:#455249;margin-top:14px}.callus a{font-weight:800;text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:16px 18px;border:1px solid var(--line);background:#fff;line-height:1.55;font-size:15px;grid-column:1/-1}
.notice a{text-decoration:underline;font-weight:700}
.notice--ok{border-color:#29b83e;border-left-width:5px;background:#f2fbf3}
.notice--warn{border-color:#c99b3c;border-left-width:5px;background:#fdf8ef}
.notice--lease{border-color:#0875bd;border-left-width:5px;background:#f1f7fb}

/* Small viewports: 800px versions of the hero and setting photographs.
   The gallery is <img srcset> so the browser chooses for itself. */
@media (max-width: 900px){
  .hero{background-image:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.46) 52%,rgba(0,0,0,.14) 80%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 32%),var(--hero-img-sm)}
}

/* Property-listing pattern: one lead photograph, two beside it, and an explicit
   way into the rest — rather than a mosaic of crops. */
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  gap:8px;height:460px}
.g{position:relative;overflow:hidden;background:#e8ebe8}
.g img{width:100%;height:100%;object-fit:cover;display:block}
.g--lead{grid-row:1 / span 2}
.g-more{position:absolute;inset:auto 0 0 0;background:rgba(12,16,14,.72);color:#fff;
  font-size:13px;font-weight:700;padding:9px;text-align:center}
.viewall{margin-top:14px}
@media(max-width:650px){
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .g--lead{grid-column:1 / -1;grid-row:auto;height:230px}
  .g--side{height:135px}
  .viewall{display:block;width:100%;text-align:center}
}

/* A scannable feature checklist, which is how a rental listing is read: the icon
   cards carry the headline facts, this carries everything a tenant would
   otherwise have to email to ask. Two columns so it does not become a scroll. */
.featurelist{margin-top:32px;border-top:1px solid var(--line);padding-top:26px}
.featurelist h3{font-size:13px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin:0 0 16px}
.featurelist ul{list-style:none;margin:0;padding:0;columns:2;column-gap:38px}
.featurelist li{position:relative;padding-left:24px;margin:0 0 11px;font-size:15px;
  line-height:1.45;color:#3f4d45;break-inside:avoid}
.featurelist li:before{content:"";position:absolute;left:2px;top:4px;width:11px;height:6px;
  border:2px solid var(--green);border-top:0;border-right:0;transform:rotate(-45deg)}
.servicesnote{margin:22px 0 0;font-size:13px;line-height:1.5;color:var(--muted);max-width:640px}
@media(max-width:640px){.featurelist ul{columns:1}}

/* Route into the tenant information page from the setting section. */
.settinglink{margin-top:18px;font-size:15px}
/* The setting section is dark navy (#073e5c), so this link has to be light —
   var(--blue) on that ground measured 2.0:1 and axe rightly failed it. */
.settinglink a{color:#fff;font-weight:800;text-decoration:underline}

/* The At a glance link row: same layout as a fact, but the value is a link. */
.factrow--link a{color:var(--blue);font-weight:800;text-decoration:underline}

/* How to apply: a four-step spine between the setting and the viewing form. */
.howto{padding:72px 0;background:var(--cream)}
.howto .sectionintro{max-width:700px;margin-bottom:30px}
.steps{list-style:none;counter-reset:step;margin:0;padding:0;
       display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps>li{counter-increment:step;border-top:3px solid var(--blue);padding-top:16px}
.steps>li h3{font-size:19px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.steps>li h3::before{content:counter(step);font-size:13px;font-weight:800;color:var(--gold,#c99b3c);flex:none}
.steps p{font-size:14px;line-height:1.6;color:#4d5952;margin:0}
/* var(--blue) on var(--cream) measures 4.45:1 — just under AA, and axe caught it.
   This is the same hue darkened to 6.4:1. */
.steps a{color:#0a5c94;font-weight:800;text-decoration:underline}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}



/* At a glance: a plain-looking control that opens the viewer on the plan. */
.planbtn{border:0;background:none;padding:0;font:inherit;color:var(--blue);
         font-weight:800;text-decoration:underline;cursor:pointer}
/* The plan is far wider than any photograph, so let the viewer fit it whole. */
.lb img[src$=".svg"]{background:#fff;object-fit:contain}