.pf-hero {
  background: linear-gradient(135deg, #0a1628 0%, #1a2d50 100%);
  padding: 72px 0 56px; position: relative; overflow: hidden;
}
.pf-hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,216,.12) 0%,transparent 70%);
}
.pf-hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--i-cyan2);
  margin-bottom:14px; position:relative; z-index:1;
}
.pf-hero-tag::before { content:''; width:16px; height:2px; background:var(--i-cyan); }
.pf-hero h1 {
  font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900;
  color:#fff; line-height:1.2; margin-bottom:12px; position:relative; z-index:1;
}
.pf-hero h1 span { color:var(--i-cyan2); }
.pf-hero p { color:rgba(255,255,255,.60); font-size:.95rem; max-width:520px; line-height:1.75; position:relative; z-index:1; }
.pf-stat { display:flex; gap:32px; margin-top:28px; position:relative; z-index:1; flex-wrap:wrap; }
.pf-stat-num { font-size:1.8rem; font-weight:900; color:#fff; line-height:1; margin-bottom:2px; }
.pf-stat-num span { color:var(--i-cyan2); }
.pf-stat-label { font-size:.72rem; color:rgba(255,255,255,.50); text-transform:uppercase; letter-spacing:1px; }

/* ── Category section ── */
.pf-cat-section { padding:40px 0 0; }
.pf-cat-section:last-of-type { padding-bottom:100px; }

.pf-cat-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
.pf-cat-info { flex:1; }
.pf-cat-stripe {
  width:40px; height:4px; border-radius:2px; margin-bottom:10px;
}
.pf-cat-info h2 {
  display:inline-flex; align-items:center; gap:12px;
  font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:900;
  margin-bottom:6px; line-height:1.2;
}
.pf-cat-info h2 i { font-size:.85em; }
.pf-cat-logo {
  width:104px; height:104px; object-fit:contain; flex-shrink:0;
  background:#fff; border:1px solid var(--i-bd); border-radius:10px; padding:5px;
}
.pf-cat-info p { font-size:.88rem; color:var(--i-mute); margin:0; }

/* ── Scope-of-work chips ── */
.pf-cat-services { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:12px; }
.pf-cat-services-label {
  font-size:.74rem; font-weight:800; color:var(--i-mute);
  text-transform:uppercase; letter-spacing:1px;
  width:100%; margin-bottom:2px;
}
.pf-service-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--i-off); border:1px solid rgba(26,95,200,.18);
  color:var(--i-blue); font-size:.8rem; font-weight:700;
  padding:7px 15px; border-radius:20px;
  transition:all .25s;
}
.pf-service-chip i { font-size:.78rem; color:var(--i-cyan); transition:color .25s; }
.pf-service-chip:hover {
  background:var(--i-blue); color:#fff; border-color:var(--i-blue);
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(26,95,200,.25);
}
.pf-service-chip:hover i { color:#fff; }

/* จอเล็ก: แสดงไม่เกิน 3 รายการ เกินตัดทิ้งเลย */
@media(max-width:680px) {
  .pf-cat-services .pf-service-chip:nth-of-type(n+4) { display:none; }
}
.pf-cat-count {
  font-size:.78rem; font-weight:700; color:var(--i-mute);
  background:var(--i-off2); border:1px solid var(--i-bd);
  padding:6px 16px; border-radius:20px; white-space:nowrap;
}

/* ── Image grid ── */
.pf-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media(max-width:992px){ .pf-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .pf-grid { grid-template-columns:repeat(2,1fr); } }

.pf-item {
  position:relative; overflow:hidden;
  border-radius:14px; aspect-ratio:4/3;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.10);
  transition:transform .35s, box-shadow .35s;
}
.pf-item.pf-hidden { display:none; }
.pf-item:hover { transform:translateY(-5px); box-shadow:0 16px 44px rgba(0,0,0,.20); }
.pf-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s; }
.pf-item:hover img { transform:scale(1.08); }

.pf-item-ovl {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(4,9,26,.90) 0%,transparent 55%);
  opacity:0; transition:opacity .3s;
}
.pf-item:hover .pf-item-ovl { opacity:1; }

.pf-item-body {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 14px; z-index:2;
  transform:translateY(6px); opacity:0; transition:all .3s;
}
.pf-item:hover .pf-item-body { transform:translateY(0); opacity:1; }
.pf-item-body h6 { color:#fff; font-size:.83rem; font-weight:700; margin:0 0 2px; }
.pf-item-body p { color:var(--i-cyan2); font-size:.72rem; margin:0; }

/* ── Show more button ── */
.pf-more-wrap { margin-top:20px; text-align:center; }
.pf-more-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--i-blue);
  padding:11px 28px; border-radius:30px;
  font-weight:700; font-size:.88rem;
  border:1.5px solid rgba(26,95,200,.22);
  cursor:pointer; transition:all .3s; font-family:'Kanit',sans-serif;
}
.pf-more-btn:hover { background:var(--i-blue); color:#fff; border-color:var(--i-blue); }
.pf-more-btn i { transition:transform .3s; }
.pf-more-btn.expanded i { transform:rotate(180deg); }

/* ── Divider ── */
.pf-divider { border:none; border-top:1px solid var(--i-bd); margin:64px 0 0; }

/* ── Lightbox ── */
.pf-modal {
  display:none; position:fixed; inset:0; z-index:9999;
  align-items:center; justify-content:center;
  background:rgba(4,9,26,.92); padding:20px;
}
.pf-modal.open { display:flex; animation:pfFadeIn .22s ease; }
@keyframes pfFadeIn { from{opacity:0} to{opacity:1} }

.pf-modal-inner {
  position:relative; max-width:860px; width:100%;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.50);
  display:grid; grid-template-columns:60% 40%;
}
.pf-modal-img { position:relative; height:460px; max-height:70vh; }
.pf-modal-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-modal-info { padding:36px 28px; display:flex; flex-direction:column; justify-content:center; }
.pf-modal-cat { font-size:.68rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.pf-modal-info h3 { font-size:1.15rem; font-weight:800; color:var(--i-txt); margin-bottom:8px; line-height:1.3; }
.pf-modal-info p { font-size:.87rem; color:var(--i-mute); line-height:1.75; margin-bottom:16px; }
.pf-modal-loc {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--i-off2); color:var(--i-mid);
  font-size:.75rem; font-weight:600; padding:5px 12px;
  border-radius:20px; width:fit-content;
}
.pf-modal-close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; cursor:pointer;
  color:#fff; font-size:.85rem; display:flex; align-items:center; justify-content:center;
  z-index:10; transition:background .2s;
}
.pf-modal-close:hover { background:rgba(0,0,0,.80); }
.pf-modal-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none; cursor:pointer;
  color:#fff; font-size:.85rem; display:flex; align-items:center; justify-content:center;
  z-index:10; transition:background .2s;
}
.pf-modal-nav:hover { background:rgba(255,255,255,.30); }
.pf-modal-prev { left:10px; }
.pf-modal-next { right:10px; }

/* ── Image-only lightbox (สำหรับโปรเจคที่ไม่ต้องมีแผงข้อมูล) ── */
.pf-modal-inner.pf-imageonly { grid-template-columns:1fr; }
.pf-modal-inner.pf-imageonly .pf-modal-info { display:none; }
.pf-modal-inner.pf-imageonly .pf-modal-img { height:80vh; max-height:88vh; }

@media(max-width:660px){
  .pf-modal-inner { grid-template-columns:1fr; }
  .pf-modal-img { height:240px; max-height:45vh; }
  .pf-modal-info { padding:22px 18px; }
}

/* BREADCRUMB */
.bc-wrap { background:#fff; border-bottom:1px solid #e5eef8; padding:14px 0; }
.bc-inner { display:flex; align-items:center; gap:8px; font-size:13px; color:#64748b; }
.bc-inner a { color:#1a5fc8; text-decoration:none; }
.bc-inner .sep { color:#cbd5e1; }

.sol-title {
  font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800;
  color:var(--s-navy); margin-bottom:12px;
}