/* ========== Base & Variables ========== */
:root{--ms:#0078D4;--ms2:#106EBE;--bg:#F3F2F1;--border:#e6e6e6;--card:#fff;--ink:#111315;--muted:#5a5f65;--shadow:0 8px 24px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Inter,system-ui}
a{color:var(--ms);text-decoration:none}
a:hover{color:var(--ms2)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ========== Header (service pages) ========== */
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#0078D4,#00BCF2);display:grid;place-items:center;color:#fff;font-weight:800}
.navlinks{display:flex;gap:16px;align-items:center}
.navlinks a{padding:6px 0}
.navlinks a.contact-link{padding:6px 0;border:none;background:transparent;font-weight:400}

/* Waffle launcher */
.waffle{width:40px;height:40px;border-radius:10px;border:1px solid #e9e9e9;background:#fff;display:grid;place-items:center;cursor:pointer}
.dots{display:grid;grid-template-columns:repeat(3,6px);grid-auto-rows:6px;gap:4px}
.dots span{width:6px;height:6px;background:#42464b;border-radius:50%}
.launcher{position:absolute;top:62px;right:20px;width:min(880px,92vw);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:none}
.launcher.open{display:block}
.launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid #eef0f2;background:#fff;transition:transform .12s ease,box-shadow .12s ease}
.tile:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.appicon{width:22px;height:22px;display:block}

/* ========== Hero ========== */
.hero{padding:54px 0;background:linear-gradient(180deg,#fff 0%,#f7f7f7 100%)}
.h1{margin:0 0 8px;font-size:clamp(28px,3.2vw,40px);display:flex;align-items:center;gap:10px}
.h1 img{width:32px;height:32px}
.lead{max-width:70ch;color:#2f3237}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{background:#eef6ff;border:1px solid #d9ecff;border-radius:999px;padding:6px 10px;font-size:.92rem}

/* ========== Sections / Cards / Grids ========== */
section{padding:48px 0}
.card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:20px}
.two{grid-template-columns:1fr 1fr}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.small{color:var(--muted);font-size:.92rem}

/* Story layout */
.story{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.story{grid-template-columns:1fr}}
.before{border:1px dashed #e0e4ea;background:#fafbfc}
.after{border:1px solid #e6eaf0}
.before,.after{border-radius:12px;padding:14px}

/* Example tiles */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.svc{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid #eef0f2;background:#fff;border-radius:12px}
.svc img{width:28px;height:28px}

/* ========== HOW WE BUILD (rich) ========== */
#build .build-rail{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--ms),var(--ms2));opacity:.15;margin:2px 0 16px}
#build .build-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){#build .build-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#build .build-grid{grid-template-columns:1fr}}
#build .step-card{border:1px solid #e6eaf0;border-radius:12px;background:#fff;padding:14px;box-shadow:0 2px 4px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:10px}
#build .step-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#build .step-num{width:34px;height:34px;border-radius:10px;background:#eef6ff;border:1px solid #d9ecff;display:grid;place-items:center;font-weight:800;color:#0b5cab}
#build .step-head h4{margin:0}
#build .step-time{margin-left:auto;color:#5a5f65;font-size:.92rem}
#build .step-blurb{margin:0;color:#2f3237}
#build .chips{display:flex;flex-wrap:wrap;gap:8px}
#build .chip{background:#f5f7fb;border:1px solid #e6eaf0;border-radius:999px;padding:6px 10px;font-size:.92rem;white-space:nowrap}
#build .tiny{margin:0;color:#6a7179;font-size:.9rem}

/* ========== FAQ ========== */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.faq-item{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;transition:background .15s}
.faq-item:hover{background:#eceff3}
.faq-question{display:block;font-weight:600;cursor:pointer}
.faq-answer{display:none;margin-top:8px;padding:10px 14px;border-left:3px solid var(--ms);background:#fff;border-radius:8px}

/* ========== Health hero (banner) ========== */
.health-hero{padding:40px 0;background:linear-gradient(180deg,#fff 0%,#f9fafc 100%)}
.health-hero .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px}
.health-hero .heart{width:64px;height:64px;border-radius:50%;background:#ffeef0;display:grid;place-items:center;font-size:28px}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #e9e9e9;background:#fff;font-weight:600;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--ms);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--ms2)}

/* ========== Footer ========== */
footer{padding:24px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted);background:#fff}
footer .links{margin-top:6px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ========== Contact Modal ========== */
.modal-overlay{position:fixed;inset:0;background:rgba(17,19,21,.45);backdrop-filter:blur(4px);display:none;z-index:1000}
.modal-wrap{position:fixed;inset:0;display:none;place-items:center;z-index:1001;padding:18px}
.modal-card{width:min(760px,94vw);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:18px;position:relative}
.modal-card h3{margin:0 0 12px}
.modal-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border:1px solid #e6e6e6;border-radius:12px;background:#fff;cursor:pointer}
.modal-card input,.modal-card textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff}
.modal-card textarea{min-height:180px;resize:vertical}
.modal-actions{margin-top:12px}
.modal-actions .btn.primary{display:block;width:100%;justify-content:center;padding:14px 16px;font-weight:700}

/* Focus outlines */
:focus-visible{outline:2px solid var(--ms2);outline-offset:2px}