:root{--primary:#1357ff;--accent:#0b3db3;--bg:#f6f9ff;--text:#0f172a}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.topbar{background:#0d1b2a;color:#fff;font-size:.9rem}
.topbar .container{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.4rem 1rem}
.header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.6rem}
.logo img{height:44px;width:44px;border-radius:50%}
.logo .brand{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:1rem}
.menu a{padding:.5rem .8rem;border-radius:999px}
.menu a:hover,.menu a.active{background:rgba(19,87,255,.1)}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:.7rem 1rem;border-radius:12px;font-weight:600}
.btn:hover{background:var(--accent)}
.hero{background-size:cover;background-position:center;color:#fff;position:relative}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.hero .container{position:relative;padding:4rem 1rem 5rem}
.hero h1{font-size:2.4rem;margin:.2rem 0 0}
.hero p{max-width:720px;font-size:1.1rem;opacity:.98}
.section{padding:2.2rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.card{background:#fff;border-radius:16px;padding:1.2rem;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:.8remobject-position: top center;
}
@media (max-width:600px){.card img{height:auto}}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.cta{background:#0b3db3;color:#fff;border-radius:16px;padding:1.2rem}
.footer{background:#0d1b2a;color:#c7d2fe;padding:1.2rem 0;margin-top:2rem}
.small{font-size:.92rem;color:#c7d2fe}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.hero h1{font-size:2rem}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.hero{position:relative}

.hero::after{z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78))}

.hero .container{position:relative; z-index:1}

.hero h1, .hero p{color:#ffffff !important; text-shadow:0 2px 6px rgba(0,0,0,.35)}

.hero .btn{box-shadow:0 6px 18px rgba(0,0,0,.25)}

a[href^="tel:"]{touch-action: manipulation; -webkit-tap-highlight-color: transparent}

/* Shift Personal Care image down by ~2 inches (~50px) while keeping the box layout intact */
.card h3:contains("Personal Care") ~ img,
.card img[alt*="Personal care"] {
    object-position: center 50px !important;
}