/* Projects page: light, architectural canvas. Loaded last on projects.html. */

/* ---- canvas + fading orange grid ---- */
#projects.pj-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--bone) 55%,var(--sand) 100%);color:var(--ink);padding-top:var(--hero-top);padding-bottom:var(--sec-y);isolation:isolate}
#projects.pj-sec::before,#projects.pj-sec::after{content:"";position:absolute;pointer-events:none;z-index:-1;border:0;border-radius:0;right:auto;top:auto;width:auto;height:auto;
  background-image:repeating-linear-gradient(0deg,rgba(238,116,29,.27) 0 1px,transparent 1px 72px),repeating-linear-gradient(90deg,rgba(238,116,29,.27) 0 1px,transparent 1px 72px)}
/* strong near the headline, fading to nothing at the edges */
#projects.pj-sec::before{left:0;right:0;top:0;height:640px;
  -webkit-mask-image:radial-gradient(ellipse 52% 62% at 30% 46%,#000 0%,rgba(0,0,0,.45) 45%,transparent 78%);mask-image:radial-gradient(ellipse 52% 62% at 30% 46%,#000 0%,rgba(0,0,0,.45) 45%,transparent 78%)}
/* a second, quieter pool behind the first projects */
#projects.pj-sec::after{left:0;right:0;bottom:0;height:560px;opacity:.7;
  background-position:0 0;
  -webkit-mask-image:radial-gradient(ellipse 46% 60% at 22% 60%,#000 0%,rgba(0,0,0,.35) 50%,transparent 80%);mask-image:radial-gradient(ellipse 46% 60% at 22% 60%,#000 0%,rgba(0,0,0,.35) 50%,transparent 80%)}
.pj-sec .w{position:relative}
.pj-sec .sh{margin-bottom:clamp(40px,5vw,72px)}
.pj-sec h1{color:var(--ink);margin-top:22px}
.pj-sec .kick{color:var(--ink-2)}
.pj-sec .lead{color:var(--ink-2)}

/* ---- filters + arrows ---- */
.pj-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.pj-sec .pill{background:rgba(255,255,255,.55);border-color:var(--line-2);color:var(--ink-2)}
.pj-sec .pill b{color:var(--mute)}
.pj-sec .pill:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.pj-sec .pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pj-sec .pill[aria-pressed="true"] b{color:#e6cf8f}
.pj-sec .railnav .ic{background:#fff;color:var(--ink);border:1px solid var(--line-2);backdrop-filter:none;-webkit-backdrop-filter:none;width:48px;height:48px;font-size:18px}
.pj-sec .railnav .ic:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pj-sec .railnav .ic:disabled{opacity:.4}

/* ---- project rail + cards ---- */
.pj-sec .rail{padding-top:10px}
.pj-sec .pj{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 0 rgba(20,18,16,.04);transition:transform .6s var(--e),border-color .3s,box-shadow .5s var(--e)}
.pj-sec .pj:hover{border-color:var(--co);transform:translateY(-6px);box-shadow:0 18px 40px -22px rgba(20,18,16,.35)}
.pj-sec .pj:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pj-sec .pj .ph{background:var(--sand)}
.pj-sec .pj .tx{padding:20px 22px 24px;border-top:1px solid var(--line)}
.pj-sec .pj .mt{color:var(--co-text)}
.pj-sec .pj h3{color:var(--ink)}
.pj-sec .pj p{color:var(--mute)}

/* ---- case study (project sheet) ---- */
.sheet.top .sheet-p{background:var(--paper)}
.sheet.top .sheet-x{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:0 6px 18px -8px rgba(20,18,16,.3)}
.sheet.top .sheet-x:hover{background:var(--ink);color:#fff}
.sheet.top .pjs-a{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--paper),var(--bone));color:var(--ink);border-bottom:1px solid var(--line)}
.sheet.top .pjs-a::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(238,116,29,.27) 0 1px,transparent 1px 72px),repeating-linear-gradient(90deg,rgba(238,116,29,.27) 0 1px,transparent 1px 72px);
  -webkit-mask-image:radial-gradient(ellipse 55% 75% at 72% 50%,#000 0%,rgba(0,0,0,.4) 50%,transparent 82%);mask-image:radial-gradient(ellipse 55% 75% at 72% 50%,#000 0%,rgba(0,0,0,.4) 50%,transparent 82%)}
.sheet.top .pjs-a .kick{color:var(--ink-2)}
.sheet.top .pjs-a h2{color:var(--ink)}
.sheet.top .pjs-a .scope{color:var(--ink-2)}
.sheet.top .pjs-a .fr{background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(20,18,16,.45)}
.sheet.top .pjs-a .fr figcaption{color:var(--mute)}
.sheet.top .pjs-a .b-ln{color:var(--ink);border-color:var(--line-2)}
.sheet.top .pjs-a .b-ln:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pjs-fam{margin:0 0 22px}
.pjs-fam h4{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.pjs-fam ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pjs-fam li>*{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--ink-2);text-decoration:none}
.pjs-fam li>a{color:var(--co-text);border-color:var(--co-text);transition:background .3s,color .3s}
.pjs-fam li>a:hover{background:var(--co-text);color:#fff}
.pjs-fam li>a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pjs-b{background:var(--sand);color:var(--ink)}
.car-nav span{color:var(--ink-2)}
.car .it2{border:1px solid var(--line)}
.car .it2 .im i{color:var(--co-text)}
.car .it2 span{color:var(--mute)}
@media (max-width:760px){#projects.pj-sec{padding-top:112px}#projects.pj-sec::before,#projects.pj-sec::after{background-image:repeating-linear-gradient(0deg,rgba(238,116,29,.27) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,rgba(238,116,29,.27) 0 1px,transparent 1px 56px)}}

/* customer references in the same rail: the card keeps the case-study card's size; the picture area carries the
   organisation's logo (with permission) or its initials on a limestone panel with the site's drawing grid */
.pj-sec .pj-ref .ph-ref{display:grid;place-items:center;background:#f7f2ea linear-gradient(rgba(20,18,16,.05) 1px,transparent 1px) 0 0/28px 28px,#f7f2ea linear-gradient(90deg,rgba(20,18,16,.05) 1px,transparent 1px) 0 0/28px 28px;border-bottom:1px solid var(--line)}
.pj-sec .pj-ref .ph-ref.is-dark{background:var(--graphite,#141210)}
.pj-ref .ref-logo{max-width:62%;max-height:42%;width:auto;height:auto;object-fit:contain}
.ref-mono{font:700 clamp(44px,4.4vw,64px)/1 var(--disp);font-stretch:85%;letter-spacing:-.02em;color:var(--ink-2);opacity:.55}
.pj-sec .pj-ref .mt{color:var(--ink-2)}
.pj-sec .pj-ref p{-webkit-line-clamp:2}
.pj-none{flex:1;align-self:center;padding:40px 0;color:var(--ink-2)}
/* the references' own row: region or sector (text tabs, not pills) and a search */
.pjf-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:-8px 0 24px}
.pjf-sub[hidden]{display:none}
.pjf-g{display:flex;flex-wrap:wrap;gap:4px 20px}
.pjf-g button{padding:8px 0 6px;border:0;border-bottom:2px solid transparent;background:none;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer}
.pjf-g button b{font:500 12px var(--mono);color:var(--mute);margin-left:4px}
.pjf-g button:hover{color:var(--ink)}
.pjf-g button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--co)}
.pjf-g button:focus-visible,.pjf-q:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.pjf-q{width:min(320px,100%);min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;background:#fff;font:400 15px var(--sans);color:var(--ink)}
/* a reference's sheet */
.pjs-ref .ref-dl{margin:18px 0 22px;display:grid;gap:14px}
.pjs-ref .ref-dl dt{font:600 12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--co-text,#a8521a)}
.pjs-ref .ref-dl dd{margin:4px 0 0;color:var(--ink-2)}
.pjs-ref .ref-dl ul{margin:0;padding:0;list-style:none;columns:2 220px;column-gap:24px}
.pjs-ref .ref-dl li{break-inside:avoid;padding:3px 0;font-size:15px}
.ref-fig{display:grid;place-items:center;min-height:240px;border-radius:var(--r);background:#f7f2ea;border:1px solid var(--line)}
.ref-fig.is-dark{background:var(--graphite,#141210)}
.ref-fig img{max-width:70%;max-height:160px;object-fit:contain}
@media (max-width:640px){.pjf-q{width:100%}.pjf-g{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter,20px));padding:0 var(--gutter,20px)}.pjf-g button{flex:none}}