/* ══════════════════════════════════════════════════════════════
   Projects index. Commercial first, residential stacked beneath.

   This sheet carries its own background classes and placeholder
   system. homepage.css loads sitewide but supplies neither.
   ══════════════════════════════════════════════════════════════ */

.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)}
.on-white{background:#fff}

.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:18px}
.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)}

.jmi-projects{background:var(--ivory)}

/* ══ 01 HERO ══ */
.jhero{padding:calc(var(--nav-h) + 78px) 0 62px}
.jhero h1{font-size:clamp(34px,4.2vw,56px);color:var(--ivory);max-width:16ch;margin-top:16px}
.jhero .dek{font-size:17px;color:rgba(242,239,230,.82);max-width:48ch}
.jhero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(242,239,230,.24)}
.jstats{display:flex;flex-wrap:wrap}
.jstats div{padding-left:38px;text-align:right}
.jstats .v{display:block;font-family:var(--font-display);font-size:28px;color:var(--brand-accent);line-height:1}
.jstats .k{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:rgba(242,239,230,.6);margin-top:8px}

/* ══ SECTIONS ══ */
.pbook{padding:62px 0 74px}
.pbook.res{background:var(--stone)}
.pbhead{width:min(1600px, calc(100vw - (var(--pad) * 2)));
  margin-left:calc(50% - min(800px, calc(50vw - var(--pad))));display:flex;align-items:flex-end;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:34px;border-bottom:1px solid rgba(31,91,71,.28)}
.pbhead h2{font-size:clamp(26px,3.2vw,40px);color:var(--green)}
.pbhead .n{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--quiet)}
.pempty{font-size:17px;color:var(--muted);max-width:56ch}

/* ══ FEATURED. Two across, at the same 16:10 as the cards below so one image
   serves anywhere. Every featured project is shown as a picture, so nothing is
   hidden behind an arrow. The block breaks out of the 1280 wrap so the images
   run larger than the grid, capped so it never causes sideways scrolling. ══ */
.feat{margin-bottom:56px;width:min(1600px, calc(100vw - (var(--pad) * 2)));
  margin-left:calc(50% - min(800px, calc(50vw - var(--pad))))}
.feat-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.feat-eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:#7A6224;white-space:nowrap;margin:0}
.feat-rule{flex:1;height:1px;background:rgba(201,162,74,.55)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px 22px}
.fcard{background:none;border:0;padding:0;cursor:pointer;text-align:left;width:100%;
  font-family:var(--font-body);display:block;color:inherit}
.fcard-media{display:block;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--stone)}
.fcard-media .ph{position:absolute;inset:0}
.fcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.fcard-media img{transition:transform .7s var(--ease)}
.fcard:hover .fcard-media img,.fcard:focus-visible .fcard-media img{transform:scale(1.04)}
.fcard-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,63,50,0) 45%,rgba(23,63,50,.62) 100%);
  opacity:0;transition:opacity .45s var(--ease)}
.fcard:hover .fcard-media::after,.fcard:focus-visible .fcard-media::after{opacity:1}
.fcard-cue{position:absolute;left:22px;bottom:20px;z-index:3;display:inline-flex;align-items:center;
  gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--brand-accent);opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fcard:hover .fcard-cue,.fcard:focus-visible .fcard-cue{opacity:1;transform:none}
.fcard:hover h3,.fcard:focus-visible h3{color:#7A6224}
.fcard h3{transition:color .3s var(--ease)}
.fcard-body{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:14px;width:100%}
.fcard h3{font-size:22px;color:var(--green);line-height:1.25;margin:0}
.fcard .l{font-size:12px;color:var(--quiet);white-space:nowrap;letter-spacing:.04em}

/* ══ CARDS ══ */
/* The grid shares the featured block's width and runs four across, so both
   edges line up with the featured cards above. Gaps are 30 percent tighter than
   they were and the cards take the space back: 385px each at 1600 wide. */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 20px;width:min(1600px, calc(100vw - (var(--pad) * 2)));
  margin-left:calc(50% - min(800px, calc(50vw - var(--pad))))}
/* A grid card is a button, and GeneratePress styles buttons through
   button:not(.menu-toggle), which outscores a single class. The html body
   prefix takes it back so the card keeps its own surface and border. */
html body .pcardx{-webkit-appearance:none;appearance:none;font:inherit;text-align:left;
  background:#fff;border:1px solid rgba(31,91,71,.18);display:flex;flex-direction:column;
  padding:0;cursor:pointer;text-align:left;font-family:var(--font-body);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
html body .pbook.res .pcardx{background:var(--ivory)}
.pcardx:hover,.pcardx:focus-visible{transform:translateY(-6px);box-shadow:0 20px 40px rgba(23,63,50,.12);
  border-color:rgba(201,162,74,.6)}
.pcardx-media img{transition:transform .7s var(--ease)}
.pcardx:hover .pcardx-media img,.pcardx:focus-visible .pcardx-media img{transform:scale(1.04)}
.pcardx h3{transition:color .3s var(--ease)}
.pcardx:hover h3,.pcardx:focus-visible h3{color:#7A6224}
.pcardx[hidden]{display:none}
.pcardx-media{display:block;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--stone)}
.pcardx-media img{width:100%;height:100%;object-fit:cover;display:block}
.pcardx-media .ph{position:absolute;inset:0}
.pcardx-body{display:block;padding:20px 22px 24px}
.pcardx h3{font-size:19px;color:var(--green);line-height:1.25;margin:0}

.more-row{display:flex;justify-content:center;margin-top:44px;width:min(1600px, calc(100vw - (var(--pad) * 2)));
  margin-left:calc(50% - min(800px, calc(50vw - var(--pad))))}
.more-row[hidden]{display:none}
.more{font-family:var(--font-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;padding:16px 38px;cursor:pointer;border:1px solid var(--green);background:transparent;
  color:var(--green);transition:background .35s var(--ease),color .35s var(--ease)}
.more:hover{background:var(--green);color:var(--ivory)}

/* ══ DETAIL PANEL ══ */
/* ══ POPUP. Centred, and only as tall as its contents. It was a full height
   drawer down the right side, which left a column of dead space under a short
   title. The icons are drawn with stroke, and the stroke is set here rather
   than left to the inline attributes, which were being overridden. ══ */
.pdt{position:fixed;inset:0;z-index:1000;display:none}
.pdt.open{display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.pdt-scrim{position:absolute;inset:0;background:rgba(15,32,26,.9)}
.pdt-panel{position:relative;z-index:2;width:min(980px,100%);max-height:calc(100vh - (var(--pad) * 2));
  overflow-y:auto;background:var(--ivory);border:1px solid rgba(201,162,74,.5)}

/* The close sits inside the panel, where the parent theme's button rule wins on
   colour, so currentColor was resolving to something invisible. The stroke is
   named outright rather than inherited, and the rule is prefixed to outscore it. */
html body .pdt-close{position:absolute;top:14px;right:14px;z-index:6;width:44px;height:44px;
  cursor:pointer;background:var(--green-deep);border:0;padding:0;display:flex;align-items:center;
  justify-content:center;-webkit-appearance:none;appearance:none;
  transition:background .3s var(--ease)}
html body .pdt-close:hover{background:var(--brand-accent)}
html body .pdt-close svg{width:22px;height:22px;display:block;fill:none;stroke:var(--ivory);
  stroke-width:2.2;stroke-linecap:round}
html body .pdt-close:hover svg{stroke:var(--green-deep)}

.pdt-stage{position:relative;aspect-ratio:16/10;background:var(--stone);overflow:hidden}
.pdt-stage img{width:100%;height:100%;object-fit:cover;display:block}
.pdt-stage .ph{position:absolute;inset:0}
.pdt-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:38%;z-index:2;
  background:linear-gradient(180deg,rgba(23,63,50,.78) 0%,rgba(23,63,50,0) 100%);pointer-events:none}
.pdt-name{position:absolute;left:22px;top:18px;z-index:3;margin:0;max-width:70%;
  font-family:var(--font-display);font-weight:400;font-size:clamp(20px,2.3vw,28px);line-height:1.2;
  color:var(--ivory)}
html body .pdt-arw{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  cursor:pointer;background:var(--green-deep);border:0;padding:0;display:flex;align-items:center;
  justify-content:center;z-index:3;-webkit-appearance:none;appearance:none;
  transition:background .3s var(--ease)}
html body .pdt-arw:hover{background:var(--brand-accent)}
html body .pdt-arw svg{width:24px;height:24px;display:block;fill:none;stroke:var(--ivory);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body .pdt-arw:hover svg{stroke:var(--green-deep)}
.pdt-arw.p{left:0}
.pdt-arw.n{right:0}
.pdt-count{position:absolute;right:14px;bottom:12px;z-index:3;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--ivory);background:rgba(23,63,50,.78);padding:7px 11px}

.pdt-thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto;background:#fff;
  border-bottom:1px solid rgba(31,91,71,.16)}
.pdt-thumbs[hidden]{display:none}
.pdt-thumbs button{flex:none;width:88px;height:58px;padding:0;border:0;cursor:pointer;background:none;
  opacity:.55;outline:2px solid transparent;transition:opacity .3s var(--ease),outline-color .3s var(--ease)}
.pdt-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pdt-thumbs button:hover{opacity:1}
.pdt-thumbs button.on{opacity:1;outline-color:var(--brand-accent)}

body.locked{overflow:hidden}

/* ══ CLOSE ══ */
.pclosex{padding:0;position:relative;height:clamp(300px,32vw,420px);overflow:hidden;
  background:var(--green-deep)}
.pclosex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pclosex::after{content:"";position:absolute;inset:0;background:rgba(23,63,50,.58)}
.pclosex-over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:0 var(--pad)}
.pclosex-over h2{font-size:clamp(24px,3vw,40px);color:var(--ivory);max-width:22ch;margin-top:14px}
.pclosex-over .eyebrow{color:var(--brand-accent)}
.pclosex-over .btns{justify-content:center}
.pclosex-over .btn-ghost{color:var(--ivory)}
.pclosex-over .btn-ghost:hover{background:var(--ivory);color:var(--green-deep)}

@media(max-width:1024px){
  .feat,.pgrid,.pbhead,.more-row{width:auto;margin-left:0}
  .feat-grid{grid-template-columns:1fr;gap:26px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .jhero{padding:calc(var(--nav-h) + 56px) 0 48px}
  .jstats div{padding-left:0;padding-right:28px;text-align:left}
  .pbook{padding:52px 0 62px}
}
@media(max-width:640px){
  .pgrid{grid-template-columns:1fr}

}

/* ══════════════════════════════════════════════════════════════
   DEVELOPMENT ROWS. Used by the development projects page only.
   Five or six developments, so each is a full row rather than a
   card in a grid, and the gallery runs in place beside the
   background instead of opening a popup.
   ══════════════════════════════════════════════════════════════ */
/* ══ THE ROWS ══
   Five or six developments, so each gets a full row: gallery left at the width
   the featured cards were, background right. Nothing hides behind a click. */
.dbook{padding:70px 0 84px}
/* Proportional columns rather than a fixed 789px, so the pair survives a
   narrow window instead of stacking. The gallery is capped at 789px, which is
   the width it had as a featured card, so it never grows beyond that however
   wide the screen gets. */
/* Copy left, gallery right. The columns are ordered in the markup with the
   gallery first, so the order is set here rather than by moving the markup:
   on a narrow screen the image should still come first. */
.drow{width:min(1600px, calc(100vw - (var(--pad) * 2)));
  margin-left:calc(50% - min(800px, calc(50vw - var(--pad))));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.drow > *:first-child{order:2}
.drow .dbody{order:1}
.drow + .drow{margin-top:64px;padding-top:64px;border-top:1px solid rgba(31,91,71,.2)}

.dgal{position:relative;max-width:789px;aspect-ratio:16/10;overflow:hidden;background:var(--stone);
  border:1px solid rgba(31,91,71,.18)}
.dgal .ph{position:absolute;inset:0}
.dgal img{width:100%;height:100%;object-fit:cover;display:block}
.darw{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;cursor:pointer;
  background:var(--green-deep);border:0;padding:0;display:flex;align-items:center;justify-content:center;
  z-index:3;transition:background .3s var(--ease)}
.darw:hover{background:var(--brand-accent)}
.darw svg{width:22px;height:22px;display:block;fill:none;stroke:var(--ivory);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.darw:hover svg{stroke:var(--green-deep)}
.darw.p{left:0}
.darw.n{right:0}
.dcount{position:absolute;right:14px;bottom:12px;z-index:3;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--ivory);background:rgba(23,63,50,.78);padding:7px 11px}
.dthumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.dthumbs button{flex:none;width:74px;height:48px;padding:0;border:0;cursor:pointer;background:none;
  opacity:.55;outline:2px solid transparent;transition:opacity .3s var(--ease),outline-color .3s var(--ease)}
.dthumbs .ph{width:100%;height:100%;padding:0}
.dthumbs button:hover{opacity:1}
.dthumbs button.on{opacity:1;outline-color:var(--brand-accent)}

.dbody h2{font-size:clamp(26px,3vw,38px);color:var(--green);max-width:18ch;
  padding-bottom:18px;border-bottom:1px solid rgba(31,91,71,.2)}
.dprose{margin-top:22px}
.dprose p{font-size:16.5px;color:var(--muted);line-height:1.8;max-width:62ch}
.dprose p + p{margin-top:16px}
.dgal img{width:100%;height:100%;object-fit:cover;display:block}
.dthumbs img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:820px){
  .drow{grid-template-columns:1fr;gap:28px}
  .drow > *:first-child,.drow .dbody{order:0}
}