:root{
  --green:#1F5B47; --green-deep:#173F32; --brand-accent:#C9A24A;
  --ivory:#F2EFE6; --stone:#E6E2D5; --charcoal:#2B2B28;
  --ink:#1A1A18; --muted:#3F3F39; --quiet:#6B6B62;
  --pad:48px; --nav-h:88px;
  --font-display:'Prata',Georgia,serif; --font-body:'Lato',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
a,a:hover,a:focus,a:visited{text-decoration:none}
a{color:inherit}
button{font-family:inherit}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);line-height:1.65;color:var(--ink);background:var(--ivory);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:.01em}
p{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
section{padding:110px 0}

.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--eyb-c,#7A6224);margin:0}
.on-green{background:var(--green);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent)}
.on-deep{background:var(--green-deep);color:var(--ivory);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent)}
.on-ivory{background:var(--ivory)}
.on-stone{background:var(--stone)}

.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:16px 30px;border:1px solid currentColor;min-height:44px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-solid{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--green-deep)}
.btn-solid:hover{background:transparent;color:var(--brand-accent)}
.btn-ghost{color:var(--ghost,var(--green))}
.btn-ghost:hover{background:var(--ghost-hb,var(--green));color:var(--ghost-hf,var(--ivory));
  border-color:var(--ghost-hb,var(--green))}

.alink{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;color:var(--alink-c,var(--green));
  transition:color .3s var(--ease)}
.alink .ar{display:inline-block;transition:transform .35s var(--ease)}
.alink:hover .ar{transform:translateX(7px)}

.ph{position:relative;background:repeating-linear-gradient(45deg,rgba(31,91,71,.10) 0 14px,rgba(31,91,71,.03) 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.ph span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7A6224;
  line-height:1.7;background:rgba(242,239,230,.86);border:1px dashed rgba(201,162,74,.75);padding:11px 15px}
img.ph{display:block;width:100%;height:100%;object-fit:cover;padding:0;background:none;border:0}
.ph.dark{background:repeating-linear-gradient(45deg,#20463a 0 14px,#1c4034 14px 28px)}
.ph.dark span{color:var(--brand-accent);background:rgba(23,63,50,.8)}
.needed{background:rgba(201,162,74,.22);border-bottom:1px dashed var(--brand-accent);padding:0 4px}

.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ══ 01 HERO. Inset image panel, gold outline. ══ */
/* Matches the Our Approach hero: a full bleed split with the copy on a solid
   evergreen block and the photograph running to the edge beside it. No scrim
   over the image, since nothing sits on top of it. */
.lhero{--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);
  --alink-c:var(--brand-accent);--eyb-c:var(--brand-accent);
  display:grid;grid-template-columns:1.05fr .95fr;min-height:74vh;padding:0;
  background:var(--green-deep)}
.lhero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 80px) 64px 90px var(--pad);max-width:720px;margin-left:auto;width:100%}
.lhero h1{font-size:clamp(34px,4.3vw,58px);color:var(--ivory);max-width:17ch;margin-top:20px}
.lhero .dek{font-size:18px;color:rgba(242,239,230,.82);max-width:50ch;margin-top:24px}
.lhero-media{position:relative;overflow:hidden}
.lhero-media .ph{position:absolute;inset:0}

/* ══ 02 LISTINGS ══ */
.avail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.avail h2{font-size:clamp(26px,3vw,38px);max-width:16ch;margin-top:16px}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}

/* ══ 04 FIT ══ */
.fit h2{font-size:clamp(26px,3vw,38px);max-width:20ch;margin-top:16px}
.fit .lede{font-size:17px;color:var(--muted);max-width:62ch;margin-top:18px}
.fitgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:52px;
  background:rgba(31,91,71,.2);border:1px solid rgba(31,91,71,.2)}
.fitcell{position:relative;background:var(--stone);padding:34px 32px 32px;transition:background .4s var(--ease)}
.fitcell::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.fitcell:hover{background:#fff}
.fitcell:hover::before{transform:scaleX(1)}
.fitcell h3{font-size:20px}
.fitcell ul{list-style:none;margin:16px 0 0;padding:0}
.fitcell li{position:relative;padding-left:24px;margin-bottom:9px;font-size:15px;color:var(--muted)}
.fitcell li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:2px;background:var(--brand-accent)}
.fit .aside{font-size:15px;color:var(--muted);margin-top:36px;max-width:64ch;
  padding-left:20px;border-left:2px solid var(--brand-accent)}

/* ══ 05 TIMELINE ══ */
.tline-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:end}
.tline h2{font-size:clamp(26px,3vw,38px);max-width:18ch;margin-top:16px}
.tintro{font-size:17px;color:var(--muted);max-width:56ch}
.sched{margin-top:52px;border-top:1px solid rgba(31,91,71,.2)}
.sline{display:grid;grid-template-columns:.42fr .58fr;gap:60px;padding:30px 0;align-items:baseline;
  border-bottom:1px solid rgba(31,91,71,.2)}
.st{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--quiet);
  display:block;margin-bottom:8px;transition:color .35s var(--ease)}
.sline:hover .st{color:#7A6224}
.sline h3{font-size:clamp(20px,2vw,26px)}
.sline p{font-size:16px;color:var(--muted);max-width:56ch}

/* ══ 06 WHAT WE NEED ══ */
.need{--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);--eyb-c:var(--brand-accent)}
.need-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:end}
.need h2{font-size:clamp(26px,3vw,38px);color:var(--ivory);max-width:18ch;margin-top:16px}
.nintro{font-size:17px;color:rgba(242,239,230,.84);max-width:58ch}
.npanel{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:56px;
  background:rgba(242,239,230,.24);border:1px solid rgba(242,239,230,.24)}
.nitem{background:var(--green-deep);padding:32px 30px;display:grid;grid-template-columns:52px 1fr;gap:18px;
  transition:background .4s var(--ease)}
.nitem:hover{background:rgba(242,239,230,.06)}
.ni{font-family:var(--font-display);font-size:22px;color:var(--brand-accent);line-height:1.2}
.nitem h3{font-size:19px;color:var(--ivory)}
.nitem p{font-size:15px;color:rgba(242,239,230,.8);margin-top:9px;max-width:46ch}
.nitem.cta{grid-template-columns:1fr;background:rgba(201,162,74,.1)}
.nitem.cta .btn{margin-top:20px}

/* ══ 07 OWNER OPERATOR ══ */
.owner-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.owner h2{font-size:clamp(26px,3vw,38px);max-width:16ch;margin-top:16px}
.owner p{font-size:17px;color:var(--muted);max-width:58ch}
.owner p + p{margin-top:18px}

/* ══ 08 CLOSE ══ */
.close{position:relative;padding:0;overflow:hidden;background:var(--green-deep);
  --ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);--eyb-c:var(--brand-accent)}
.close .ph{height:auto;aspect-ratio:1920/560;min-height:440px}
.close::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,63,50,.74) 0%,rgba(23,63,50,.88) 100%)}
.close-over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 var(--pad)}
.close-over h2{font-size:clamp(28px,3.4vw,46px);color:var(--ivory);max-width:18ch;margin-top:16px}
.close-over .btns{justify-content:center}

/* ── FOOTER ── */
.jmi-footer{background:var(--green-deep);color:rgba(242,239,230,.72);padding:80px 0 40px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.f-brand img{width:150px}
.f-nap{font-style:normal;margin-top:22px;line-height:1.9}
.f-nap a{color:var(--brand-accent)}
.f-col h4{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-accent);margin-bottom:16px}
.f-col a{display:block;padding:7px 0;color:rgba(242,239,230,.72);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.f-col a:hover{color:var(--brand-accent);transform:translateX(4px)}
.f-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;
  padding-top:26px;border-top:1px solid rgba(242,239,230,.18);font-size:13px}
.f-legal a{color:rgba(242,239,230,.72);margin-right:18px}

@media(max-width:1024px){
  :root{--pad:24px}
  section{padding:80px 0}
  .lhero{grid-template-columns:1fr;min-height:0}
  .lhero-copy{padding:calc(var(--nav-h) + 64px) var(--pad) 72px;max-width:none;margin:0}
  .lhero-media{height:420px}
  .lgrid{grid-template-columns:1fr 1fr}
  .tline-head,.owner-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .sline{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .fitgrid{grid-template-columns:1fr}
  .need-head{grid-template-columns:1fr;gap:26px;align-items:start}
  .npanel{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:600px){
  .lgrid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js .reveal{opacity:1;transform:none}
}

/* ══ LISTINGS BROWSER ══
   Mirrors the Buildout layout it replaces: scrolling list on the left,
   map on the right, cards carrying size, rate, space count, building SF. */
.avail{padding:88px 0 0}
.avail-head{margin-bottom:44px}
/* The whole browser is sized against the viewport so it lands on one screen
   under the fixed nav. The list scrolls inside its own column, so adding
   listings makes the list longer without making the section taller. */
.lz{display:grid;grid-template-columns:minmax(340px,34%) 1fr;
  height:clamp(460px,calc(100vh - var(--nav-h,88px) - 96px),680px);
  border-top:1px solid rgba(31,91,71,.22)}
.lz-panel{display:flex;flex-direction:column;min-height:0;background:var(--ivory)}
.lz-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 22px;border-bottom:1px solid rgba(31,91,71,.18);flex:none}
.lz-count{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.lz-sort{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--quiet)}
.lz-sort select{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--green);
  background:transparent;border:1px solid rgba(31,91,71,.34);padding:6px 8px;cursor:pointer}
.lz-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto;min-height:0}
.lz-item + .lz-item{border-top:1px solid rgba(31,91,71,.16)}
.lz-card{display:grid;grid-template-columns:124px 1fr;gap:15px;padding:13px 22px;
  transition:background .3s var(--ease)}
.lz-item:hover .lz-card{background:#fff}
.lz-media{position:relative;height:86px;overflow:hidden;background:var(--stone)}
.lz-media img{width:100%;height:100%;object-fit:cover}
.lz-media .ph{position:absolute;inset:0}
.lz-media .ph span{font-size:9px;padding:6px 8px}
.lz-flag{position:absolute;top:0;left:0;background:var(--green-deep);color:var(--ivory);
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 8px}
.lz-body h3{font-size:17px;color:var(--green);margin:0;line-height:1.2}
.lz-addr{font-size:12px;color:var(--muted);margin-top:4px}
.lz-facts{list-style:none;margin:7px 0 0;padding:0}
.lz-facts li{font-size:12px;color:var(--muted);line-height:1.45}
/* Own stacking context. Leaflet puts its zoom control at z-index 1000, which
   beat the fixed nav at 900 and let the plus and minus buttons ride over the
   menu. Isolating the map keeps every Leaflet layer inside this element. */
.lz-map{height:100%;min-height:0;background:var(--stone);border-left:1px solid rgba(31,91,71,.22);
  position:relative;z-index:0;isolation:isolate}
.lz-empty{font-size:17px;color:var(--muted);padding:0 0 40px}

/* Branded pin. A teardrop rather than a block: the round-three-corners plus
   45 degree rotation gives the point at bottom left, so the shape reads as a
   map marker. The label counter rotates to sit upright. */
.lz-pin{background:none;border:0}
.lz-pin-b{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:var(--green-deep);border:2px solid var(--brand-accent);
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 5px 14px rgba(23,63,50,.38)}
.lz-pin-b b{transform:rotate(45deg);color:var(--ivory);font-family:var(--font-body);
  font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1}
.lz-item:hover .lz-pin-b,.lz-pin:hover .lz-pin-b{background:var(--brand-accent)}
/* The armor block strips backgrounds broadly, which left popups rendering as
   loose text over the tiles. These restore the bubble explicitly. */
.leaflet-popup-content-wrapper{border-radius:0;background:#fff;color:var(--ink);
  box-shadow:0 6px 20px rgba(23,63,50,.22);border:1px solid rgba(31,91,71,.2)}
.leaflet-popup-tip{background:#fff;box-shadow:none}
.leaflet-popup-content{margin:14px 16px;line-height:1.4}
.leaflet-container a.leaflet-popup-close-button{color:var(--quiet)}
.lz-pop{display:block;min-width:160px}
.lz-pop strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--green)}
.lz-pop span{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* Row variant, used on the single listing page. */
.lz-list-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;overflow:visible;
  max-height:none;margin-top:38px}
.lz-list-row .lz-item + .lz-item{border-top:0}
.lz-list-row .lz-card{grid-template-columns:1fr;gap:0;padding:0;background:#fff}
.lz-list-row .lz-media{height:190px}
.lz-list-row .lz-body{padding:20px 22px 24px}

@media(max-width:1024px){
  .lz{grid-template-columns:1fr;height:auto}
  .lz-map{height:340px;min-height:340px;border-left:0;
    border-top:1px solid rgba(31,91,71,.22);order:-1}
  .lz-list{max-height:470px}
  .lz-list-row{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .avail{padding:72px 0 0}
  .lz-card{grid-template-columns:1fr;gap:14px;padding:20px var(--pad)}
  .lz-media{height:180px}
  .lz-bar{padding:14px var(--pad)}
  .lz-list-row{grid-template-columns:1fr}
}
