/* Base reset and typography */
* { box‑sizing: border‑box; margin:0; padding:0; }
body { font‑family: 'Segoe UI', Tahoma, Geneva, Verdana, sans‑serif; line‑height:1.6; color:#333; background:#fff; }

.container { width:90%; max‑width:1200px; margin:0 auto; padding:40px 0; }

/* Colours (Microsoft palette) */
:root {
  --color‑blue: #00A4EF;
  --color‑green: #7FBA00;
  --color‑orange: #F25022;
  --color‑yellow: #FFB900;
  --color‑grey‑text: #737373;
  --color‑grey‑light: #f9fbff;
  --color‑white: #ffffff;
}

/* Header */
.site-header { background:var(--color‑white); box‑shadow:0 2px 4px rgba(0,0,0,0.1); position:sticky; top:0; z‑index:100; }
.site-header .container { display:flex; align‑items:center; justify‑space:between; }
.logo { font‑size:1.5rem; font‑weight:600; color:var(--color‑blue); }
.main-nav ul { list‑style:none; display:flex; gap:30px; }
.main-nav a { text‑decoration:none; color:#333; font‑weight:500; }
.main-nav a:hover { color:var(--color‑blue); }

/* Hero */
.hero { background:var(--color‑grey‑light); text‑align:center; padding:120px 0 80px; }
.hero h2 { font‑size:2.5rem; margin‑bottom:20px; color:var(--color‑blue); }
.hero p { font‑size:1.2rem; margin‑bottom:30px; color:var(--color‑grey‑text); }
.btn { padding:12px 28px; border:none; border‑radius:4px; cursor:pointer; font‑size:1rem; font‑weight:500; text-decoration:none; display:inline-block; }
.btn‑primary { background:var(--color‑blue); color:var(--color‑white); }
.btn‑primary:hover { background:darken(var(--color‑blue), 10%); /* fallback if your build supports */ }
.btn‑secondary { background:var(--color‑yellow); color:#333; }
.btn‑secondary:hover { background: #e0c200; }

/* Services */
.services h3 { text‑align:center; margin‑bottom:40px; color:var(--color‑blue); }
.service‑grid { display:grid; grid‑template‑columns:repeat(auto‑fit, minmax(250px,1fr)); gap:30px; }
.service‑card { background:var(--color‑white); padding:30px; border‑radius:8px; box‑shadow:0 4px 12px rgba(0,0,0,0.05); transition:transform .3s, box‑shadow .3s; }
.service‑card:hover { transform:translateY(‑5px); box‑shadow:0 8px 20px rgba(0,0,0,0.1); }
.service‑card img { width:64px; height:64px; margin‑bottom:20px; }
.service‑card h4 { margin‑bottom:10px; color:var(--color‑blue); }
.service‑card p { color:var(--color‑grey‑text); }

/* About */
.about { background:var(--color‑white); }
.about h3 { text‑align:center; margin‑bottom:20px; color:var(--color‑blue); }
.about p { max‑width:800px; margin:0 auto; color:var(--color‑grey‑text); font‑size:1rem; }

/* Case Studies */
.case‑studies h3 { text‑align:center; margin‑bottom:40px; color:var(--color‑blue); }
.case‑grid { display:grid; grid‑template‑columns:repeat(auto‑fit, minmax(280px,1fr)); gap:30px; }
.case‑card { background:var(--color‑white); border‑radius:8px; overflow:hidden; box‑shadow:0 4px 12px rgba(0,0,0,0.05); transition:transform .3s; }
.case‑card img { width:100%; display:block; }
.case‑card h4 { padding:20px; margin:0; color:var(--color‑blue); }
.case‑card p { padding:0 20px 20px; color:var(--color‑grey‑text); }

/* Contact */
.contact { background:var(--color‑grey‑light); text‑align:center; }
.contact h3 { color:var(--color‑blue); margin‑bottom:10px; }
.contact p { max‑width:600px; margin:0 auto 30px; color:var(--color‑grey‑text); }
.contact‑form { max‑width:500px; margin:0 auto; text‑align:left; }
.contact‑form label { display:block; margin:10px 0 5px; font‑weight:500; color:#333; }
.contact‑form input, .contact‑form textarea { width:100%; padding:10px; border:1px solid #ccc; border‑radius:4px; font‑size:1rem; }
.contact‑form button { margin:20px 0; width:100%; }

/* Footer */
.site-footer { background:var(--color‑white); text‑align:center; padding:20px 0; color:var(--color‑grey‑text); font‑size:.9rem; border‑top:1px solid #eee; }
.site-footer a { color:var(--color‑blue); text‑decoration:none; }

/* Responsive */
@media (max‑width:600px) {
  .hero h2 { font‑size:2rem; }
  .hero p { font‑size:1rem; }
}