/* PageHeader */
.page-header{position:relative;color:#fff;padding:96px 0 128px;background:#1f2937;overflow:hidden}
.ph-bg{position:absolute;inset:0}
.ph-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.ph-overlay{position:absolute;inset:0;background:linear-gradient(to top,#1f2937,transparent,#1f2937)}
.ph-inner{position:relative;z-index:2;text-align:center}
.ph-title{font-size:clamp(36px,6vw,64px);font-weight:800;margin:0}
.ph-sub{max-width:720px;margin:16px auto 0;color:#d1d5db;font-size:18px}

/* Legend section */
.grid2{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.legend h2{font-size:28px;font-weight:800;margin:0}
.legend .underline{width:96px;height:4px;background:var(--accent);margin-top:12px}
.legend p{color:#4b5563;margin:16px 0 0}
.legend .btn-link{padding:0}

/* 3 columns (mission/vision/values) */
.triples{display:grid;grid-template-columns:1fr;gap:24px;text-align:center}
.triple{padding:24px}
.triple .circle{width:64px;height:64px;border-radius:999px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:#fee2e2;color:var(--accent)}
.triple h3{font-size:22px;font-weight:800;margin:0}
.triple p{color:#4b5563;margin:8px 0 0}

/* Toolbar */
.proj-toolbar{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:0 0 32px; }
.proj-btn{
padding:10px 18px; border-radius:999px; font-weight:700; border:0; cursor:pointer;
background:#e5e7eb; color:#374151; transition: background .2s ease, transform .1s ease, color .2s ease, box-shadow .2s ease;
}
.proj-btn:hover{ background:#d1d5db; }
.proj-btn.active{ background:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(239,68,68,.25); }

/* Grid & Cards */
.projects-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.proj-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.10); display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.proj-card:hover{ transform: translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.14); }
.proj-media{ position:relative; height:256px; overflow:hidden; }
.proj-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.proj-card:hover .proj-media img{ transform: scale(1.06); }
.proj-badge{
position:absolute; top:16px; right:16px; background: var(--accent); color:#fff; font-weight:800;
font-size:12px; padding:6px 10px; border-radius:8px; letter-spacing:.02em;
}
.proj-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.proj-title{ margin:0; font-size:20px; font-weight:800; color:#111827; }
.proj-text{ margin:0; color:#4b5563; }
.proj-link{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:700; color: var(--accent); text-decoration:none; }
.proj-link:hover{ text-decoration:underline; }
.proj-link .icon{ width:18px; height:18px; }

@media (min-width:768px){ .projects-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .projects-grid{ grid-template-columns: repeat(3, 1fr); } }

/* Hide helper */
.proj-hidden{ display:none !important; opacity:0; transform: scale(.98); }