:root {
        --primary: #dd3333;
        --dark: #111;
        --light: #fff;
        --gray: #f4f4f4;
        --accent: #32373c;
    }
    body { font-family: 'Arial', sans-serif; margin: 0; line-height: 1.6; color: #565656; }
    h1, h2, h3 { font-family: 'Montserrat', sans-serif; color: var(--dark); }
    header { background: var(--light); padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    nav ul { list-style: none; display: flex; gap: 20px; padding: 0; }
    nav a { text-decoration: none; color: var(--dark); font-family: 'Montserrat', sans-serif; font-weight: bold; }
    nav a:hover { color: var(--primary); }
    .hero { background: url('/assets/canadian-wall-systems-peterborough.jpg') center/cover; height: 500px; display: flex; align-items: center; justify-content: center; color: white; text-align: center; }
    .hero-content { background: rgba(0,0,0,0.6); padding: 2rem; }
    .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 4rem 0; }
    .service-card { border: 1px solid #ddd; padding: 20px; text-align: center; border-radius: 8px; transition: 0.3s; }
    .service-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .service-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; }
    footer { background: var(--accent); color: white; padding: 3rem 0; text-align: center; }
    .logo-placeholder { font-weight: bold; font-size: 1.5rem; color: var(--primary); }
    @media (max-width: 768px) { nav ul { flex-direction: column; align-items: center; } }