.pf-grid{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (min-width:700px){ .pf-grid{ grid-template-columns:repeat(3,1fr); } }

.pf-card{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--panel-border); aspect-ratio:3/4; background:var(--panel); text-align:left; padding:0; min-width:0; }
.pf-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pf-card .noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,74,0.14), transparent 55%), linear-gradient(160deg,#15130e 0%,#0a0908 100%); }
.pf-card .noimg .ic{ width:34px; height:34px; opacity:0.8; }
.pf-card .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(5,4,3,0.94) 0%, rgba(5,4,3,0.4) 55%, transparent 80%); }
.pf-card .badge-tag{ top:10px; right:10px; left:auto; }
.pf-card .label{ position:absolute; left:14px; right:14px; bottom:12px; }
.pf-card .label .cat{ font-size:9.5px; font-weight:700; letter-spacing:1px; color:var(--gold); text-transform:uppercase; }
.pf-card .label .ti{ margin-top:3px; font-size:13px; font-weight:600; color:var(--white); line-height:1.25; }

/* --- Modal (shared pattern) --- */
.modal-overlay{ position:fixed; inset:0; background:rgba(5,4,3,0.85); backdrop-filter:blur(3px); z-index:100; display:none; align-items:flex-end; justify-content:center; }
.modal-overlay.open{ display:flex; }
.modal{ width:100%; max-width:600px; max-height:88vh; overflow-y:auto; background:var(--black); border-radius:20px 20px 0 0; border:1px solid var(--panel-border); border-bottom:none; }
.modal-photo{ position:relative; height:240px; }
.modal-photo img{ width:100%; height:100%; object-fit:cover; }
.modal-photo .noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,74,0.16), transparent 55%), linear-gradient(160deg,#15130e 0%,#0a0908 100%); }
.modal-photo .noimg .ic{ width:48px; height:48px; opacity:0.8; }
.modal-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(5,4,3,0.6); border:1px solid var(--panel-border); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:18px; z-index:2; }
.modal-body{ padding:24px 24px 28px; }
.modal-body .cat{ font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--gold); text-transform:uppercase; }
.modal-body h3{ margin:8px 0 0; font-size:22px; }
.modal-body p.desc{ margin-top:10px; font-size:14.5px; color:var(--gray); line-height:1.65; }
.modal-body .services-list{ margin-top:16px; list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; }
.modal-body .services-list li{ font-size:13.5px; color:var(--gray); display:flex; gap:9px; align-items:flex-start; }
.modal-body .services-list li .ic{ width:15px; height:15px; margin-top:3px; flex-shrink:0; }
.modal-body .modal-cta{ margin-top:22px; }
.modal-body .placeholder-note{ margin-top:16px; padding:14px 16px; border-radius:10px; background:rgba(201,162,74,0.07); border:1px solid var(--panel-border); font-size:12.5px; color:var(--gray-dim); font-style:italic; line-height:1.5; }

/* --- Gallery (multi-photo case studies) --- */
.pf-gallery{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0; }
.pf-gallery-item{ position:relative; flex:0 0 100%; scroll-snap-align:start; height:280px; }
.pf-gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-gallery-label{ position:absolute; left:0; right:0; bottom:0; padding:10px 16px; font-size:12px; font-weight:600; color:var(--white);
  background:linear-gradient(to top, rgba(5,4,3,0.85), transparent); }
.badge-tag{ position:absolute; top:10px; right:10px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:20px; background:rgba(5,4,3,0.75); border:1px solid var(--panel-border-strong); color:var(--gold); z-index:2; }