/* ==== Base theme (shared) ==== */
:root{
  --brand:#0ea5a4; --brand-2:#1e3a8a; --ink:#0f172a; --muted:#64748b;
  --bg:#f7fafc; --card:#ffffff; --radius:18px; --shadow:0 12px 28px rgba(2,6,23,.06),0 3px 10px rgba(2,6,23,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--brand-2);text-decoration:none} a:hover{opacity:.9}
img{max-width:100%;display:block}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid #e9eef5}
.navin{max-width:1200px;margin:auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:conic-gradient(from 210deg,#0ea5a4,#67e8f9,#1e3a8a);color:#fff;font-weight:900}
.brandname{font-weight:900}
.navlinks{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #e5edf6;background:#fff;font-weight:700}
.btn.primary{background:var(--brand);color:#043a3a;border-color:transparent;box-shadow:var(--shadow)}
.btn.primary:hover{filter:brightness(.98)} .btn.ghost:hover{border-color:#cfeaf0}

/* Layout helpers */
.wrap{max-width:1200px;margin:auto;padding:42px 16px}
.small{font-size:12px;color:#8aa0b5}
.muted{color:#8aa0b5}

/* Services header */
.subhero{max-width:1200px;margin:24px auto 0;padding:0 16px 8px}
.subhero h1{margin:0 0 6px;font-size:clamp(26px,3.6vw,40px)}

/* Filters */
.toolbar{max-width:1200px;margin:12px auto;padding:0 16px 8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.input,.select{height:40px;border:1px solid #e6eef6;border-radius:12px;padding:0 12px;background:#fff}
.input{flex:1;min-width:190px}.select{min-width:180px}

/* Grid + cards */
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid #e8eef5;border-radius:var(--radius);padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.03);display:flex;gap:14px;flex-direction:column}
.service-media{border-radius:14px;overflow:hidden;border:1px solid #e6eef6;aspect-ratio:16/9}
.service-media img{width:100%;height:100%;object-fit:cover}

.card h3{margin:8px 0 6px;font-size:18px}
.card p{margin:0;color:#64748b;font-size:14px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid #dfeaf4;background:#fff;color:#0f4c5c}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn.block{width:100%;justify-content:center}

/* Footer */
.footer{padding:28px 16px;color:#7c8da2;text-align:center}
.fgrid{max-width:1200px;margin:auto;display:grid;gap:12px;justify-items:center}
.brandline{display:flex;gap:10px;align-items:center;justify-content:center}