/* =========================================================
   LATEST COMPLETED PROJECTS (pj-*)
   ========================================================= */
.pj{background:var(--bg-soft)}
.pj__sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin:0 0 26px}
.pj__sub h3{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 4px}
.pj__sub p{margin:0;max-width:52ch}
.pj__sub--gap{margin-top:64px}
.pj-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.pj-bento .pj-tile{grid-column:span 6;min-height:440px}
.pj-bento .pj-tile:nth-child(4n+1),.pj-bento .pj-tile:nth-child(4n){grid-column:span 7}
.pj-bento .pj-tile:nth-child(4n+2),.pj-bento .pj-tile:nth-child(4n+3){grid-column:span 5}
.pj-feat{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pj-feat .pj-tile{aspect-ratio:4/5}
.pj-filters{display:flex;flex-wrap:wrap;gap:8px}
.pj-filters button{font:700 13.5px var(--font-h);border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:8px 18px;border-radius:999px;transition:.2s}
.pj-filters button:hover{border-color:var(--blue)}
.pj-filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

.pj-tile{position:relative;display:block;width:100%;padding:0;border-radius:18px;overflow:hidden;color:#fff;text-align:left;isolation:isolate;background:var(--navy);box-shadow:var(--shadow)}
.pj-tile[hidden]{display:none}
.pj-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pj-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,23,48,.3),rgba(10,23,48,.05) 35%,rgba(10,23,48,.94) 100%)}
.pj-tile:hover .pj-bg{transform:scale(1.07)}
.pj-in{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.pj-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pj-badge{background:var(--blue);color:#fff;font:700 12px var(--font-h);padding:6px 13px;border-radius:999px}
.pj-badge--g{background:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.pj-lg{width:84px;height:54px;background:#fff;border-radius:12px;display:grid;place-items:center;padding:6px;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.pj-lg img{max-height:100%;max-width:100%;object-fit:contain}
.pj-lg i{font:800 15px var(--font-h);font-style:normal;color:var(--navy)}
.pj-type{display:block;font:700 12.5px var(--font-h);color:var(--blue-light);margin-bottom:6px;letter-spacing:.03em}
.pj-tile h3{color:#fff;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.15;margin:0 0 6px}
.pj-loc{margin:0;font-size:14px;color:#c9d6ee}
.pj-big{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.pj-big b{display:block;font:800 clamp(1.3rem,2.6vw,2rem)/1 var(--font-h);color:#fff}
.pj-feat .pj-big b{font-size:1.2rem}
.pj-big span{font-size:12.5px;color:#c9d6ee}
.pj-go{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy)!important;display:grid;place-items:center;font-size:1.25rem!important;transition:.25s}
.pj-tile:hover .pj-go{background:var(--blue);color:#fff!important;transform:rotate(-45deg)}

/* projects-hub stats strip */
.pstats{background:var(--navy);color:#fff;padding:34px 0}
.pstats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.pstats__cell b{display:block;font:800 clamp(1.6rem,3vw,2.3rem)/1.05 var(--font-h);color:#fff}
.pstats__cell span{font-size:13px;color:#c9d6ee}
.pj-link{margin-top:4px}
.pj-link[hidden]{display:none}
@media (max-width:720px){.pstats__grid{grid-template-columns:1fr 1fr;gap:16px}}

/* dialog */
.pj-dialog{border:0;padding:0;border-radius:20px;width:min(1000px,calc(100% - 24px));max-height:calc(100% - 24px);background:#fff;color:var(--text);overflow:auto}
.pj-dialog::backdrop{background:rgba(6,14,32,.78);backdrop-filter:blur(5px)}
.pj-m{display:grid;grid-template-columns:1.05fr 1fr}
.pj-m__img{background:var(--navy);padding:14px;display:flex;flex-direction:column;gap:10px}
.pj-m__img>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.pj-th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pj-th img{aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;width:100%;border:2px solid transparent;opacity:.65}
.pj-th img.on{border-color:var(--blue-light);opacity:1}
.pj-m__txt{padding:30px 32px 34px;position:relative}
.pj-x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:1.3rem;line-height:1}
.pj-x:hover{background:var(--bg-soft)}
.pj-m__txt .pj-type{color:var(--blue)}
.pj-m__txt h3{font-size:clamp(1.4rem,3vw,2rem);margin:0 44px 16px 0}
.pj-cl{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.pj-cl .pj-lg{box-shadow:none;border:1px solid var(--line);width:104px;height:64px}
.pj-done{background:var(--navy);color:#fff;border-radius:999px;padding:6px 14px;font:700 12.5px var(--font-h)}
.pj-m__txt h4{margin:0 0 10px;font-size:13px;color:var(--text);text-transform:uppercase;letter-spacing:.06em}
.pj-m__txt ul{margin:0 0 24px}
.pj-m__txt li{padding:0 0 12px 24px;position:relative}
.pj-m__txt li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--blue);transform:rotate(45deg)}
.pj-kp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pj-kp div{background:var(--navy);border-radius:12px;padding:15px 17px;color:#fff}
.pj-kp b{display:block;font:800 1.3rem/1.1 var(--font-h);color:#fff}
.pj-kp span{font-size:12.5px;color:#c9d6ee}

@media (max-width:900px){
  .pj-bento .pj-tile,.pj-bento .pj-tile:nth-child(n){grid-column:1/-1;min-height:400px}
  .pj-m{grid-template-columns:1fr}
  .pj-m__img>img{aspect-ratio:4/3}
}

/* =========================================================
   HUB v2 — floating stats, mosaic polish, sector overlays
   ========================================================= */
/* floating stat cards overlapping the banner */
.pstats--float{background:transparent;padding:0;margin-top:-58px;position:relative;z-index:6}
.pstats--float .pstats__grid{gap:18px;text-align:left}
.pstats--float .pstats__cell{background:#fff;border-radius:16px;padding:22px 24px 18px;
  box-shadow:0 18px 44px rgba(10,23,48,.14);border-top:3px solid var(--blue);
  transition:.3s;display:flex;flex-direction:column;gap:2px}
.pstats--float .pstats__cell:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,23,48,.2)}
.pstats--float .pstats__cell b{color:var(--navy);font-size:clamp(1.5rem,2.6vw,2.1rem);display:flex;align-items:baseline;gap:6px}
.pstats--float .pstats__cell span{color:#5b6b85;font-size:13.5px;font-weight:600}
@media (max-width:900px){.pstats--float{margin-top:-40px}.pstats--float .pstats__grid{grid-template-columns:1fr 1fr}}

/* mosaic tiles: bigger radius, hover ring, action chip */
.pj-tile{border-radius:22px;box-shadow:0 14px 40px rgba(10,23,48,.14)}
.pj-tile::before{content:"";position:absolute;inset:0;z-index:9;border-radius:22px;border:2px solid transparent;transition:.3s;pointer-events:none}
.pj-tile:hover::before{border-color:rgba(77,157,255,.85)}
.pj-in{padding:22px}
.pj-badge{letter-spacing:.04em;text-transform:uppercase}
.pj-tile h3{letter-spacing:-.01em}
.pj-latest-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(77,157,255,.18);color:#bfdfff;
  font:700 11.5px var(--font-h);letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:10px}
.pj-latest-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-light)}
/* the arrow chip already exists as .pj-go */

/* filter bar: panel look */
.pj-filters{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 10px;box-shadow:0 10px 26px rgba(10,23,48,.08)}
.pj-filters button{border:0;background:transparent;padding:7px 17px;border-radius:999px;font-size:13px;color:#43536e}
.pj-filters button:hover{color:var(--blue);background:#eef4fe}
.pj-filters button[aria-pressed="true"]{background:var(--blue);color:#fff}

/* dialog link button polish */
.pj-dialog .pj-link{margin-top:22px}

/* ========== sector overlay tiles ========== */
.pj-sector{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.pj-sector .pj-tile{min-height:300px;aspect-ratio:auto}
.pj-sector .pj-tile h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}
.pj-sector .pj-loc{font-size:14.5px}
@media (max-width:900px){.pj-sector{grid-template-columns:1fr}}

/* =========================================================
   HUB v3 — server-rendered "All projects" grid (pj4-*)
   ========================================================= */
.pj4-filters{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 10px;box-shadow:0 10px 26px rgba(10,23,48,.08)}
.pj4-filters button{border:0;background:transparent;padding:7px 17px;border-radius:999px;
  cursor:pointer;font:700 13px var(--font-h);color:#43536e;transition:.2s}
.pj4-filters button:hover{color:var(--blue);background:#eef4fe}
.pj4-filters button[aria-pressed="true"]{background:var(--blue);color:#fff}
.pj4-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.pj4-tile{min-height:400px;aspect-ratio:auto}
.pj4-tile .pj-loc{color:#c9d6ee}
@media (max-width:640px){.pj4-grid{grid-template-columns:1fr}.pj4-tile{min-height:340px}}

/* =========================================================
   HUB v4 — chevron arrow chip, deeper card contrast, polish
   ========================================================= */
/* .pj-go lost its text glyph during the symbol sweep -> pure CSS chevron */
.pj-go::after{content:"";display:inline-block;width:9px;height:9px;border-top:2.4px solid currentColor;border-right:2.4px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 1px}
.pj-tile:hover .pj-go{transform:rotate(-45deg);background:var(--blue);color:#fff}
.pj-go svg{display:none}

/* tiles: taller, richer bottom, cleaner type */
.pj4-grid{gap:24px}
.pj4-tile{min-height:430px}
.pj-in{padding:26px}
.pj-tile h3{margin:0 0 8px;font-weight:800}
.pj-loc{font-size:14.5px;color:#cdd9f1}
.pj-big{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.pj-big b{font-size:clamp(1.4rem,2.8vw,2.15rem);position:relative}
.pj-big b::after{content:"";position:absolute;left:0;bottom:3px;width:26px;height:3px;border-radius:2px;background:var(--blue-light)}
.pj-tile:hover .pj-bg{transform:scale(1.09)}
.pj-tile::after{background:linear-gradient(180deg,rgba(10,23,48,.34),rgba(10,23,48,.02) 38%,rgba(10,23,48,.95) 100%)}

/* filter bar: pill panel + rounded active */
.pj4-filters{border-radius:999px;padding:8px 12px;gap:6px}
.pj4-filters button{font-size:13.5px}

/* sector tiles unify with v4 look */
.pj-sector .pj-tile{min-height:320px;border-radius:22px}

@media (max-width:640px){.pj4-tile{min-height:360px}}