/* ==========================================================================
   ANNEX — PROJECT SYSTEM v3
   One catalogue language at three densities: homepage, service pages,
   /projects/. Palette and typeface are the locked Annex system.
   ========================================================================== */

.pjs{
  --pjs-pad: clamp(18px, 5vw, 72px);
  --pjs-gap: clamp(18px, 2.2vw, 30px);
  --pjs-maxw: 1296px;
}
.pjs-wrap{max-width:var(--pjs-maxw);margin-inline:auto;padding-inline:var(--pjs-pad)}

/* ---- meta rows that flank a composition --------------------------------- */
.pjs-mrow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-block:12px;border-bottom:1px solid var(--annex-divider)}
.pjs-mrow--bottom{border-bottom:0;border-top:1px solid var(--annex-divider)}
.pjs-mrow p{margin:0}
.pjs-meta{font-size:clamp(11px,.9vw,12px);line-height:1.45;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--annex-text-secondary);margin:0}
.pjs-meta--red{color:var(--annex-red)}

/* ---- the entry ----------------------------------------------------------
   The frame is a block element on purpose: aspect-ratio does not apply to
   inline boxes, and when it was an inline span the natural image height won,
   which is what made the old sections oversized.
   ------------------------------------------------------------------------- */
.pjx{display:block;text-decoration:none;color:inherit}
.pjx__frame{
  display:block;                                   /* required for aspect-ratio */
  position:relative;overflow:hidden;
  background:var(--annex-light);aspect-ratio:4/3}
.pjx__frame img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--pjx-focus,50% 50%)}
.pjx__title{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-top:18px}
.pjx__name{display:block;font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.02em;
  color:var(--annex-text);margin:0}
.pjx__num{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--annex-text-light);margin:0}
.pjx__cat{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--annex-text-secondary);margin:6px 0 0}
.pjx__rule{display:block;height:1px;background:var(--annex-divider);margin-top:clamp(16px,1.8vw,26px)}
.pjx__foot{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-top:12px}
.pjx__loc{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--annex-text-secondary);margin:0}
.pjx__open{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--annex-text);margin:0;white-space:nowrap}
.pjx__open .arw{color:var(--annex-red);margin-left:7px}
.pjx:hover .pjx__open,.pjx:focus-visible .pjx__open{color:var(--annex-red)}
.pjx:focus-visible{outline:2px solid var(--annex-red);outline-offset:4px}

/* ---- two-column field with a rule between columns ----------------------- */
.pjs-field{display:grid;grid-template-columns:1fr;gap:clamp(30px,3.4vw,52px) 0}
/* Columns are equal width and the rule is drawn in the gap. Padding-based
   separation made the inner columns narrower, so identical aspect-ratio frames
   rendered at different heights and the metadata baselines did not line up. */
@media (min-width:900px){
  .pjs-field{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:calc(var(--pjs-gap) * 2)}
  .pjs-field > .pjx{padding-inline:0;position:relative}
  .pjs-field > .pjx:nth-child(odd)::after{
    content:"";position:absolute;top:0;bottom:0;right:calc(var(--pjs-gap) * -1);
    width:1px;background:var(--annex-divider)}
}

/* ==========================================================================
   A — HOMEPAGE
   ========================================================================== */
.pjs-home{padding-block:clamp(48px,6vw,86px)}
.pjs-home .pjs-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--annex-divider)}
.pjs-home .pjs-hd h2{font-size:clamp(30px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em;
  font-weight:600;margin:10px 0 0;color:var(--annex-text)}
.pjs-home .pjs-hd .go{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--annex-text);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.pjs-home .pjs-hd .go .arw{color:var(--annex-red);margin-left:8px}
.pjs-home .pjs-field{margin-top:clamp(26px,3vw,44px)}

/* the closing band */
.pjs-band{margin-top:clamp(34px,4vw,64px)}
.pjs-band__shot{display:block;overflow:hidden;background:var(--annex-light);
  aspect-ratio:32/9;margin-block:14px}
.pjs-band__shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 55%}
/* 32:9 is a desktop composition rule; a shallower crop is unreadable on a phone */
@media (max-width:767px){ .pjs-band__shot{aspect-ratio:16/9} }
@media (max-width:430px){ .pjs-band__shot{aspect-ratio:3/2} }
.pjs-band .cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(18px,2.2vw,28px)}
@media (max-width:767px){ .pjs-band .cta .btn{width:100%;text-align:center} }

/* ==========================================================================
   B — SERVICE PAGES
   ========================================================================== */
.pjs-svc{background:var(--annex-light);padding-block:clamp(40px,5vw,68px)}
.pjs-svc .pjs-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--annex-divider)}
.pjs-svc .pjs-hd h2{font-size:clamp(24px,2.8vw,36px);line-height:1.05;letter-spacing:-.03em;
  font-weight:600;margin:8px 0 0;color:var(--annex-text)}
.pjs-svc .pjs-field{margin-top:clamp(22px,2.6vw,34px)}
@media (min-width:760px){
  .pjs-svc .pjs-field{
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:calc(var(--pjs-gap) * 2)}
  .pjs-svc .pjs-field > .pjx{padding-inline:0;position:relative}
  .pjs-svc .pjs-field > .pjx::after{
    content:"";position:absolute;top:0;bottom:0;right:calc(var(--pjs-gap) * -1);
    width:1px;background:var(--annex-divider)}
  .pjs-svc .pjs-field > .pjx:last-child::after{content:none}
}
.pjs-svc .pjx__frame{aspect-ratio:3/2}
.pjs-svc .pjx__name{font-size:clamp(15px,1.2vw,17.5px)}
.pjs-svc .pjs-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--annex-divider);
  padding-top:18px}
@media (max-width:767px){ .pjs-svc .pjs-foot .btn{width:100%;text-align:center} }

/* ==========================================================================
   C — /PROJECTS/ CATALOGUE
   ========================================================================== */
.pjs-cat{padding-block:clamp(40px,5vw,72px)}
.pjs-chead{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);
  padding-bottom:clamp(26px,3vw,42px);border-bottom:1px solid var(--annex-divider)}
@media (min-width:900px){ .pjs-chead{grid-template-columns:44fr 56fr;gap:clamp(30px,4vw,70px)} }
.pjs-chead h1{font-size:clamp(34px,4.6vw,62px);line-height:1.0;letter-spacing:-.035em;
  font-weight:600;color:var(--annex-text);margin:10px 0 0;max-width:12ch}
.pjs-chead .intro{font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;
  color:var(--annex-text-secondary);margin:0;max-width:46ch}

/* quiet text-link filters, never pills */
.pjs-filters{margin-top:clamp(18px,2.2vw,30px);border-top:1px solid var(--annex-divider);
  padding-top:16px;display:grid;gap:12px}
.pjs-frow{display:flex;align-items:baseline;gap:clamp(14px,1.7vw,24px);flex-wrap:wrap}
.pjs-frow .lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--annex-text-light);margin:0;min-width:74px}
.pjs-f{font:inherit;background:none;border:0;padding:0 0 3px;cursor:pointer;white-space:nowrap;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--annex-text-secondary)}
.pjs-f[aria-pressed="true"]{color:var(--annex-text);box-shadow:inset 0 -2px 0 var(--annex-red)}
.pjs-f:hover{color:var(--annex-text)}
.pjs-f:focus-visible{outline:2px solid var(--annex-red);outline-offset:3px}

.pjs-result{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-block:14px;border-bottom:1px solid var(--annex-divider)}
.pjs-result p{margin:0}
.pjs-cat .pjs-field{margin-top:clamp(28px,3.2vw,46px)}
.pjx[hidden]{display:none}
/* rules follow the visible entries, not the source order */
@media (min-width:900px){
  .pjs-cat .pjs-field > .pjx::after{content:none}
  .pjs-cat .pjs-field > .pjx.is-left::after{
    content:"";position:absolute;top:0;bottom:0;right:calc(var(--pjs-gap) * -1);
    width:1px;background:var(--annex-divider)}
}
.pjs-empty{padding-block:clamp(40px,5vw,72px);text-align:left}
.pjs-empty p{margin:0;font-size:clamp(18px,1.8vw,22px);font-weight:600;color:var(--annex-text)}
.pjs-empty .hint{margin-top:8px;font-weight:400;font-size:15.5px;color:var(--annex-text-secondary)}
.pjs-cat .pjs-note{margin-top:clamp(28px,3.2vw,44px);border-top:1px solid var(--annex-divider);
  padding-top:16px;max-width:64ch}

/* a single-project block keeps the entry at a readable width instead of
   stretching one photograph across the full row */
@media (min-width:760px){
  .pjs-svc .pjs-field--single{grid-template-columns:minmax(0,520px)}
  .pjs-svc .pjs-field--single > .pjx{padding-inline:0;border-right:0}
}

/* ==========================================================================
   D — SERVICE AREAS: regional proof strip. Same language as the service-page
   block, with the section link in the header rather than a detached CTA.
   ========================================================================== */
.pjs-region{background:var(--annex-light)}
.pjs-region .pjs-hd .go{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--annex-text);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.pjs-region .pjs-hd .go .arw{color:var(--annex-red);margin-left:8px}
.pjs-region .pjs-hd .go:hover{color:var(--annex-red)}
.pjs-lead{font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:var(--annex-text-secondary);
  margin:clamp(16px,1.8vw,22px) 0 0;max-width:60ch}
.pjs-region .pjs-field{margin-top:clamp(22px,2.6vw,34px)}
.pjs-region .pjs-note{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--annex-divider);
  padding-top:16px;max-width:64ch}

/* ==========================================================================
   E — ABOUT: roofing record and exterior archive in one compact area,
   visually separated so exterior work is never read as roofing evidence.
   ========================================================================== */
.pjs-about{background:var(--annex-light)}
.pjs-about .sec__head{margin-bottom:clamp(22px,2.6vw,34px)}
.pjs-hd--tight{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--annex-divider)}
.pjs-hd--ext{margin-top:clamp(30px,3.6vw,52px)}
.pjs-about .pjs-field{margin-top:clamp(20px,2.4vw,30px)}
@media (min-width:760px){
  .pjs-about .pjs-field{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:calc(var(--pjs-gap) * 2)}
  .pjs-about .pjs-field > .pjx{padding-inline:0;position:relative}
  .pjs-about .pjs-field > .pjx::after{content:"";position:absolute;top:0;bottom:0;
    right:calc(var(--pjs-gap) * -1);width:1px;background:var(--annex-divider)}
  .pjs-about .pjs-field > .pjx:last-child::after{content:none}
}
.pjs-about .pjx__frame{aspect-ratio:3/2}
.pjs-about .pjx__name{font-size:clamp(15px,1.2vw,17.5px)}
/* the exterior strip is not linked per project and reads one step quieter */
.pjs-about .pjx--static{display:block;cursor:default}
.pjs-about .pjs-field--ext .pjx__frame{aspect-ratio:4/3}
.pjs-about .pjs-note{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--annex-divider);
  padding-top:16px;max-width:64ch}