/* Projects page scoped styles */
:root{ --brand:#0a1f57; --border:#e5e7eb; --muted:#64748b; --accent-yellow:#facc15; --accent-sky:#0ea5e9; }

/* Header area */
.page-projects .page-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fbff);border-top:4px solid var(--accent-yellow)}
.page-projects .page-header__grid{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.page-projects .page-header h2{margin:0;font-size:28px;color:var(--brand)}
.page-projects .page-header .sub{margin-top:6px;color:var(--muted);text-align:justify}

/* Sections */
.page-projects .section{padding:24px 0}
.page-projects .section p{ text-align: justify; }

/* Grid of cards */
.page-projects .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.page-projects .card{background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(25,30,50,.08);overflow:hidden;border:1px solid #edf2f7;transition:transform .15s ease,box-shadow .15s ease}
.page-projects .card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,24,38,.12)}
.page-projects .card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.page-projects .card-body{padding:14px 16px;color:#334155;text-align:justify}
.page-projects .card-link{display:block;color:inherit;text-decoration:none}
.page-projects .card-link:hover .card-body{color:var(--brand)}

/* Lists */
.page-projects .list{list-style:none;padding-left:0;margin-top:8px}
.page-projects .list li{margin:6px 0;color:#334155}

/* Clients list — improved, responsive grid with subtle accents */
.page-projects .clients-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px}
.page-projects .clients-list li{margin:0;padding:8px 10px;background:#f9fafb;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;gap:8px}
.page-projects .clients-list li::before{content:"✓";color:var(--brand);font-weight:600}

/* Back to top button */
.page-projects .back-to-top{position:fixed;right:24px;bottom:24px;z-index:1000;width:36px;height:36px;display:grid;place-items:center;background:var(--accent-sky);color:#fff;border-radius:50%;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.page-projects .back-to-top:hover{background:#0284c7}
.page-projects .back-to-top:focus-visible{outline:2px solid var(--accent-yellow);outline-offset:2px}

@media (max-width:640px){
  .page-projects .page-header__grid{padding:16px 0}
}