/* layout-fix.css */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:stretch}
.card{height:100%}
@media (min-width:1024px){
  #services .cat:nth-of-type(3) .cards{grid-template-columns:repeat(2,minmax(360px,1fr))}
}
body{counter-reset: svc}
.cat>h3{position:relative;counter-increment: svc;padding-left:2.5rem;margin:0 0 14px}
.cat>h3::before{content: counter(svc) ".";position:absolute;left:0;top:0;font-weight:800;font-size:2rem;color:#2b4d2b}
#about{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:24px;align-items:start}
#about img{width:100%;height:auto;display:block;border-radius:8px}
@media (max-width:900px){#about{grid-template-columns:1fr}}
:root{--header-h:64px}
.hero{min-height:68vh;padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 8px)}
@media (max-width:540px){
  .hero h1{font-size:clamp(28px,9vw,36px);line-height:1.08;word-break:break-word}
  .hero h2{font-size:clamp(16px,4.2vw,20px);line-height:1.25;margin-top:6px}
}
@media (max-width:400px){.hero{min-height:74vh}}
.card .icon{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:rgba(11,31,58,.06);border:1px solid rgba(11,31,58,.12);color:#0B1F3A}
.card svg{width:20px;height:20px}
.card h4{margin:2px 0 6px;font-weight:800;color:#0B1F3A}


/* --- Enhancements for services & about sections --- */
.section {max-width: 1120px;margin: 0 auto;padding-left: 16px;padding-right: 16px;}
#services .cat{margin:28px 0}
#services .cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.card{height:100%;border:1px solid rgba(11,31,58,.08);border-radius:14px;padding:14px 14px 12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .icon{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;margin-bottom:8px;background:#fff;box-shadow:0 1px 1px rgba(11,31,58,.06);border:1px solid rgba(11,31,58,.12);color:#0B1F3A}
.card h4{margin:2px 0 6px;font-weight:800;color:#0B1F3A}
.card p{margin:0;color:#2a3142}
.cat>h3{position:relative;counter-increment: svc;padding-left:2.75rem;margin:0 0 14px;font-size:1.25rem}
.cat>h3::before{content: counter(svc) ".";position:absolute;left:0;top:0;font-weight:800;font-size:2rem;color:#2b4d2b}
/* About / Intro */
#about > h2{font-size:clamp(28px,4.8vw,44px);line-height:1.1;margin:6px 0 18px}
#about .about{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:28px;align-items:start}
#about .about img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
#about .about h3{font-size:clamp(20px,2.2vw,26px);margin:0 0 6px}
#about .about p{margin:0 0 10px}
@media (max-width: 900px){
  #about .about{grid-template-columns:1fr}
}


/* Mobile improvements for About section */
@media (max-width: 780px){
  #about > h2{font-size:clamp(24px,8.2vw,34px);line-height:1.15}
  #about .about{grid-template-columns:1fr}
  #about .about img{max-width:520px;justify-self:center}
}
/* Icon visual polish */
.card .icon{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#F5F8FC;border:1px solid rgba(11,31,58,.10)}
.card svg{width:22px;height:22px;stroke-width:1.8}


/* --- About layout fix: make heading full-width and place image + text below in a two-column grid --- */
#about{display:block}
#about .about{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:28px;align-items:start}
@media (max-width:900px){#about .about{grid-template-columns:1fr}}
@media (max-width:780px){
  #about .about{grid-template-columns:1fr}
  #about .about img{max-width:520px;justify-self:center}
}
/* Ensure heading sits above grid and never overlaps */
#about > h2{margin-bottom:16px;position:relative;z-index:1}

/* Service section category heading size and emphasis */
.cat>h3{font-size:clamp(22px,2.2vw,30px);font-weight:700;margin:0 0 18px 0;padding-left:2.6rem}
.cat>h3::before{font-size:2.2rem;color:#2b4d2b}

/* Service card hover micro-interaction */
.card{transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
@media (prefers-reduced-motion:no-preference){
  .card:hover,.card:focus-within{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);background:linear-gradient(180deg, rgba(11,31,58,.015), transparent)}
}

/* Prevent any overflow clipping in about section */
#about, #about .about, #about .about > *{overflow:visible}