/* Projects: portfolio filters, grid cards, Gantt master schedule, detail facts strip,
   challenge + schedule bar, results quote, gallery, services and related. */

/* ---------- filter bar ---------- */
.pjbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding:18px 0;margin-bottom:28px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line-d)}
.pjbar-g,.pjbar-v{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pjbar-l{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d);margin-right:6px}
.pjbar button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-d);background:#fff;font-size:13.5px;font-weight:500;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.pjbar button:hover{border-color:var(--ink)}
.pjbar button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pjbar-v{padding:3px;border:1px solid var(--line-d);background:#fff;border-radius:999px;gap:2px}
.pjbar-v button{border:0;border-radius:999px;padding:8px 16px;font-weight:600}
.pjbar-v button.on{background:var(--red);color:#fff}
.pjbar-v .ic{width:15px;height:15px}
.pjbar-n{margin-left:auto;color:var(--mute-d);font-size:14px}
.pjbar-n b{color:var(--ink);font-size:18px;margin:0 2px}
.pj-empty{padding:40px 0;color:var(--mute-d)}
.pj-empty button{color:var(--red);font-weight:700;text-decoration:underline}

/* ---------- grid ---------- */
.pjgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pjgrid[hidden],.gantt[hidden]{display:none}
.pj{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-d);color:var(--ink);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.pj[hidden]{display:none}
.pj:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(13,11,38,.45)}
.pj-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.pj-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pj:hover .pj-img img{transform:scale(1.05)}
.pj-tags{position:absolute;left:12px;top:12px;display:flex;gap:6px}
.pill.live{background:var(--red);color:#fff}
.pj-body{display:flex;flex-direction:column;padding:18px 20px 20px;flex:1}
.pj-kick{font:700 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pj-body b{margin-top:8px;font-size:20px;letter-spacing:-.025em;line-height:1.18;flex:1}
.pj-meta{display:grid;grid-template-columns:auto 1fr 1fr;gap:0;margin-top:16px;border-top:1px solid var(--line-d)}
.pj-meta span{padding:12px 12px 0 0;font-size:13.5px;font-weight:600;line-height:1.3}
.pj-meta span+span{padding-left:12px;border-left:1px solid var(--line-d)}
.pj-meta i{display:block;margin-bottom:5px;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--mute-d)}
.pj-meta span:first-child{font-size:17px;letter-spacing:-.02em}

/* ---------- Gantt master schedule ---------- */
.gantt{--gl:300px;background:#fff;border:1px solid var(--line-d);color:var(--ink)}
.gt-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 18px;border-bottom:1px solid var(--line-d);font-size:13px;font-weight:600}
.gt-key span{display:inline-flex;align-items:center;gap:8px}
.gt-key i{display:inline-block;width:22px;height:10px;border-radius:2px}
.gt-key .k-done{background:var(--ink)}
.gt-key .k-live{background:var(--red)}
.gt-key .k-now{width:2px;height:16px;background:var(--red);border-radius:0}
.gt-key-note{margin-left:auto;font-weight:400;color:var(--mute-d)}
.gt-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.gt-scroll:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.gt-chart{min-width:1040px;position:relative}
.gt-head,.gt-row{display:grid;grid-template-columns:var(--gl) 1fr}
.gt-head{position:sticky;top:0;z-index:3;background:var(--ink);color:#fff}
.gt-head .gt-name{padding:12px 18px;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;background:var(--ink)}
.gt-years{display:grid;grid-template-columns:repeat(12,1fr)}
.gt-years span{padding:12px 0 12px 8px;font:600 12px/1 var(--mono);letter-spacing:.02em;border-left:1px solid rgba(255,255,255,.14)}
.gt-body{position:relative}
.gt-row{position:relative;border-top:1px solid var(--line-d);transition:background .15s}
.gt-row:first-of-type{border-top:0}
.gt-row[hidden]{display:none}
.gt-row:nth-of-type(even){background:rgba(13,11,38,.022)}
.gt-row:hover{background:rgba(123,92,255,.07)}
.gt-name{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 18px;background:inherit;border-right:1px solid var(--line-d);min-width:0}
.gt-row .gt-name{background:#fff}
.gt-row:nth-of-type(even) .gt-name{background:#FBFBFE}
.gt-row:hover .gt-name{background:#F1EEFF}
.gt-name b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-name small{font-size:11.5px;color:var(--mute-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-track{position:relative;height:42px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),rgba(13,11,38,.08) calc(100%/12 - 1px),rgba(13,11,38,.08) calc(100%/12))}
.gt-bar{position:absolute;top:10px;height:22px;border-radius:3px;display:flex;align-items:center;overflow:hidden;transition:filter .2s,transform .2s}
.gt-bar.completed{background:var(--ink)}
.gt-bar.in-progress{background:repeating-linear-gradient(135deg,rgba(123,92,255,.5) 0 6px,rgba(123,92,255,.28) 6px 12px);box-shadow:inset 0 0 0 1.5px var(--red)}
.gt-done,.sbar-done{position:absolute;left:0;top:0;bottom:0;background:var(--red)}
.gt-lab{position:relative}
.gt-row:hover .gt-bar{filter:brightness(1.12);transform:scaleY(1.12)}
.gt-lab{padding:0 9px;font:600 11px/1 var(--mono);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.gt-nowwrap{position:absolute;top:0;bottom:0;left:var(--gl);right:0;z-index:1;pointer-events:none}
.gt-now{position:absolute;top:0;bottom:0;width:0}
.gt-now[hidden]{display:none}
.gt-now::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--red)}
.gt-now span{position:absolute;top:6px;left:6px;padding:4px 7px;background:var(--red);color:#fff;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-radius:2px;white-space:nowrap}

/* ---------- detail: hero title (project names run long; the index headline keeps its accent size) ---------- */
.phero h1:not(:has(em)){font-size:clamp(40px,4.8vw,70px);line-height:1}

/* ---------- detail: facts strip ---------- */
.pjfacts{background:var(--black);border-top:3px solid var(--red)}
.pjfacts dl{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:0}
.pjfacts dl>div{padding:20px 16px 20px 0;min-width:0}
.pjfacts dl>div+div{padding-left:16px;border-left:1px solid var(--line)}
.pjfacts dt{font:700 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-l)}
.pjfacts dd{margin:8px 0 0;font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pjfacts .is-live dd{color:var(--red)}

/* ---------- detail: challenge + schedule bar ---------- */
.pjo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.pjo-h{font-size:clamp(36px,4vw,58px);line-height:1;letter-spacing:-.045em}
.pjo-p{margin-top:22px;font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:#26225C;max-width:640px}
.sbar{background:var(--ink);color:#fff;padding:26px 26px 22px;border-radius:4px;box-shadow:0 30px 60px -36px rgba(13,11,38,.6)}
.sbar-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.sbar-top b{font-size:28px;letter-spacing:-.03em}
.sbar-st{margin-left:auto;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgba(169,163,232,.18);color:var(--steel-l)}
.sbar-st.in-progress{background:var(--red);color:#fff}
.sbar-chart{margin-top:22px}
.sbar-years{display:flex}
.sbar-years span{flex:1;padding:0 0 8px 6px;font:600 11px/1 var(--mono);color:var(--steel-l);border-left:1px solid rgba(255,255,255,.18)}
.sbar-track{position:relative;height:34px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 100%);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.sbar-bar{position:absolute;top:8px;height:18px;border-radius:3px}
.sbar-bar.completed{background:var(--steel-l)}
.sbar-bar.in-progress{overflow:hidden;background:repeating-linear-gradient(135deg,rgba(123,92,255,.55) 0 6px,rgba(123,92,255,.25) 6px 12px);box-shadow:inset 0 0 0 1.5px var(--red)}
.sbar-now{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:#fff}
.sbar-now i{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-2px);font:700 9.5px/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.sbar-dl{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 0}
.sbar-dl div{padding-right:10px}
.sbar-dl div+div{padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.sbar-dl dt{font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-l)}
.sbar-dl dd{margin:7px 0 0;font:700 20px/1 var(--sans);letter-spacing:-.02em}

/* ---------- detail: approach (four steps in one row) ---------- */
.pjap .numcols{grid-template-columns:repeat(4,minmax(0,1fr))}
.pjap .numcol{padding:26px 24px 6px 0}
.pjap .numcol+.numcol{padding-left:24px}
.pjap .num{font-size:clamp(40px,4vw,60px)}
.pjap .shead{margin-bottom:40px}

/* ---------- detail: quote, gallery, services, related ---------- */
.pjq{margin:44px 0 0;padding:30px 0 0 28px;border-left:3px solid var(--red);max-width:1000px}
.pjq p{font-size:clamp(24px,2.5vw,36px);line-height:1.2;letter-spacing:-.03em;font-weight:500}
.pjq p::before{content:"\201C"}.pjq p::after{content:"\201D"}
.pjq cite{display:block;margin-top:18px;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--steel-l)}
.pjg{background:#000}
.pjg-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:4px}
.pjg figure{margin:0;height:clamp(240px,26vw,380px);overflow:hidden}
.pjg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pjg figure:hover img{transform:scale(1.04)}
.pjsv{margin-bottom:56px}
.pjrel-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.pjrel-h h2{font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.04em}
.pjrel-all{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:6px}
.pjrel-all .ic{width:15px;height:15px;color:var(--red)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .pjfacts dl{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pjfacts dl>div:nth-child(5){padding-left:0;border-left:0}
  .pjfacts dl>div:nth-child(n+5){border-top:1px solid var(--line)}
}
@media (max-width:1100px){
  .pjgrid{grid-template-columns:1fr 1fr}
  .pjo{grid-template-columns:1fr;gap:36px}
  .pjbar-n{margin-left:0;width:100%}
  .pjg-in{grid-template-columns:1fr 1fr}
  .pjg figure:first-child{grid-column:1/-1}
  .gt-key-note{margin-left:0;width:100%}
  .pjap .numcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pjap .numcol:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:720px){
  .pjgrid{grid-template-columns:1fr}
  .pjfacts dl{grid-template-columns:1fr 1fr}
  .pjfacts dl>div,.pjfacts dl>div+div{padding:14px 10px 14px 0;border-left:0}
  .pjfacts dl>div:nth-child(n+3){border-top:1px solid var(--line)}
  .gantt{--gl:136px}
  .gt-chart{min-width:760px}
  .gt-name{padding:4px 10px}
  .gt-name b{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
  .gt-name small{display:none}
  .gt-lab{padding:0 6px;font-size:10px}
  .gt-years span{padding-left:5px;font-size:11px}
  .gt-head .gt-name{padding:12px 10px}
  .sbar{padding:20px 18px 18px}
  .sbar-years span{font-size:10px;padding-left:3px}
  .pjg-in{grid-template-columns:1fr}
  .pjg figure:first-child{grid-column:auto}
  .pjq{padding-left:18px}
  .pjap .numcols{grid-template-columns:1fr}
  .pjap .numcol,.pjap .numcol+.numcol{padding:22px 0;border-left:0}
}