:root{
      /* Brand pulled from logo */
      --ink:#1c2226;            /* deep charcoal */
      --primary:#2b7f72;        /* teal-green */
      --accent:#e69a2b;         /* warm amber */
      --bg:#faf8f5;             /* warm off-white */
      --card:#ffffff;
      --muted:#6c7680;
      --maxw:1120px;
      --radius:14px;
      --shadow: 0 12px 30px rgba(25, 36, 40, .08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      background:
        radial-gradient(900px 500px at 5% -10%, rgba(43,127,114,.06), transparent 60%),
        radial-gradient(1000px 600px at 105% 0%, rgba(230,154,43,.05), transparent 60%),
        var(--bg);
      font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    h1,h2,h3{font-family:Poppins, Inter, system-ui, sans-serif}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
    a{color:inherit; text-decoration:none}

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(140%) blur(8px);
      background:rgba(250,248,245,.7);
      border-bottom:1px solid rgba(28,34,38,.06);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
    .brand{display:flex; align-items:center; gap:12px}
    .brand img{height:40px; width:auto}
    .brand .name{font-weight:700; letter-spacing:.3px}
    .menu{display:flex; gap:18px}
    .menu a{padding:8px 10px; border-radius:10px; font-weight:500}
    .menu a:hover{background:rgba(28,34,38,.06)}
    .cta-btn{background:var(--primary); color:#fff; padding:10px 14px; border-radius:12px; font-weight:600}
    .cta-btn:hover{filter:brightness(1.06)}
    .burger{display:none; background:none; border:0; font-size:24px}

    /* Hero */
    .hero{padding:92px 0 72px}
    .hero-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center}
    .eyebrow{display:inline-block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
    h1{margin:.35em 0 .25em; font-size:clamp(32px, 5.2vw, 58px); line-height:1.04}
    .lead{font-size:clamp(16px, 2.1vw, 20px); color:#4a545d; max-width:62ch}
    .hero-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
    .secondary{border:1px solid rgba(28,34,38,.12); padding:10px 14px; border-radius:12px; font-weight:600}

    .card{
      background:var(--card);
      border:1px solid rgba(28,34,38,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-panel{padding:22px}
    .stat{display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; margin-bottom:10px}
    .stat .dot{width:10px; height:10px; border-radius:50%; background:var(--accent)}

    /* Sections */
    section{padding:74px 0}
    .section-title{font-size:28px; margin:0 0 8px}
    .section-sub{color:var(--muted); margin:0 0 26px}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .service{padding:20px}
    .service h3{margin:0 0 6px}
    .service p{color:#4a545d; margin:0}

    .features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .feature{padding:16px}
    .feature small{display:block; color:var(--muted); margin-top:4px}

    /* Gallery (optional placeholders) */
    .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .ph{
      aspect-ratio: 4/3; border-radius:12px; overflow:hidden; position:relative;
      background:
        linear-gradient(180deg, rgba(28,34,38,.04), rgba(28,34,38,.02)),
        repeating-linear-gradient(45deg, rgba(28,34,38,.06), rgba(28,34,38,.06) 10px, transparent 10px, transparent 20px);
      border:1px solid rgba(28,34,38,.08);
    }
    .ph::after{
      content:"Project photo"; position:absolute; inset:auto 10px 10px auto; font-size:12px; color:var(--muted); background:rgba(255,255,255,.8); padding:4px 8px; border-radius:8px;
    }

    /* CTA */
    .cta{padding:64px; text-align:center; background:
      linear-gradient(180deg, rgba(43,127,114,.08), rgba(43,127,114,.02)), var(--card)}
    .cta h2{margin:0 0 8px}
    .cta p{color:#4a545d; margin:0 0 18px}

    /* Footer */
    footer{padding:36px 0 48px; color:var(--muted)}
    .foot{display:flex; gap:24px; justify-content:space-between; align-items:center; flex-wrap:wrap}
    .social a{padding:8px}

    /* Responsive */
    @media (max-width:980px){
      .hero-wrap{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr 1fr}
      .features{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .menu{display:none; position:absolute; top:64px; right:16px; left:16px; flex-direction:column; padding:12px; background:rgba(255,255,255,.98); border:1px solid rgba(28,34,38,.1); border-radius:12px}
      .menu.open{display:flex}
      .burger{display:inline-block}
      .grid-3, .features{grid-template-columns:1fr}
    }

    html{scroll-behavior:smooth}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}