:root{
      --bg:#f6f7f4;
      --text:#0b1b14;
      --muted:#42564c;
      --accent:#1f6f5c;
      --border:rgba(0,0,0,.12);
      --shadow:0 10px 30px rgba(0,0,0,.1);
      --shadow2:0 14px 35px rgba(0,0,0,.12);
      --radius:16px;
      --max:1100px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }

    /* ===== Header / Nav ===== */
    header{
      background:#fff;
      border-bottom:1px solid rgba(0,0,0,.1);
      position:sticky;
      top:0;
      z-index:1000;
    }

    .nav{
      max-width:var(--max);
      margin:0 auto;
      padding:16px 20px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      position:relative; /* for mobile absolute menu */
    }

    .brand{
      font-weight:800;
      font-size:20px;
      white-space:nowrap;
    }
    .brandLink{ color:inherit; text-decoration:none; }

    /* ===== Desktop menu ===== */
    .menu{
      display:flex;
      align-items:center;
      gap:0;
      flex-wrap:nowrap;
    }

    .nav-item{
      text-decoration:none;
      color:var(--muted);
      font-weight:600;
      padding:6px 2px;
      white-space:nowrap;
    }
    .nav-item:hover{ color:var(--accent); }

    .nav-divider{
      width:1px;
      height:18px;
      background:rgba(0,0,0,.15);
      margin:0 12px;
      flex:0 0 auto;
    }

    /* ===== Dropdown (desktop) ===== */
    .dropdown{
      position:relative;
      display:inline-block;
    }

    .dropdownContent{
      display:none;
      position:absolute;
      top:100%;              /* IMPORTANT: no hover gap */
      left:0;
      margin-top:6px;        /* safe spacing */
      min-width:240px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:var(--shadow2);
      padding:10px;
      z-index:999;
    }

    .dropdownContent a{
      display:block;
      padding:10px 10px;
      margin:2px 0;
      border-radius:10px;
      color:var(--muted);
      text-decoration:none;
      font-weight:600;
    }
    .dropdownContent a:hover{
      background:#f0f6f4;
      color:var(--accent);
    }

    /* Desktop hover behavior (stable) */
    @media (hover:hover){
      .dropdown:hover > .dropdownContent{ display:block; }
    }

    /* Invisible hover bridge so you can move into the menu */
    .dropdown::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:100%;
      height:8px; /* bridge between parent and dropdownContent */
    }

    /* Mobile open state (JS) */
    .dropdown.open > .dropdownContent{ display:block; }

    /* ===== Hamburger button ===== */
    .hamburger{
      display:none;
      border:0;
      background:transparent;
      padding:10px;
      cursor:pointer;
    }
    .hamburger span{
      display:block;
      width:26px;
      height:2px;
      background:var(--accent);
      margin:6px 0;
      border-radius:2px;
    }

    /* ===== Page layout ===== */
    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:40px 20px;
    }

    .hero{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:40px;
      padding:40px 0 60px;
      align-items:start;
    }

    h1{
      font-size:42px;
      line-height:1.1;
      margin:0 0 14px 0;
    }

    .hero p{
      font-size:18px;
      color:var(--muted);
      margin:0;
      max-width:70ch;
    }

    .heroImage{
      border-radius:var(--radius);
      min-height:320px;
      background:
        linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25)),
        url("img/hero.jpg");
      background-size:cover;
      background-position:center;
      box-shadow:var(--shadow);
      padding:18px;
      color:#fff;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:8px;
    }
    .heroImage strong{
      font-size:14px;
      letter-spacing:.02em;
      text-transform:uppercase;
      opacity:.95;
    }
    .heroImage p{
      color:rgba(255,255,255,.9);
      font-size:16px;
      margin:0;
      max-width:40ch;
    }

    footer{
      color:#666;
      font-size:14px;
      padding-top:0;
      padding-bottom:30px;
    }

    /* ===== Mobile: hamburger dropdown menu ===== */
    @media (max-width:900px){
      .hero{ grid-template-columns:1fr; }

      .hamburger{ display:block; }

      /* menu panel */
      .menu{
        display:none;
        position:absolute;
        top:100%;
        right:20px;
        left:20px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:14px;
        box-shadow:var(--shadow2);
        padding:12px;
        flex-direction:column;
        align-items:stretch;
      }
      .menu.open{ display:flex; }

      .nav-divider{ display:none; }

      /* Every item becomes a full-width row */
      .menu > a,
      .menu > .dropdown{
        display:block;
        width:100%;
        margin:0;
        padding:0; /* IMPORTANT: removes the About/Services spacing bug */
      }

      /* Only the clickable label gets padding */
      .menu > a.nav-item,
      .menu > .dropdown > a.nav-item{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:12px 12px;
        border-radius:10px;
        line-height:1.2;
      }

      /* consistent spacing between rows */
      .menu > * + *{
        margin-top:6px;
      }

      .menu > a.nav-item:hover,
      .menu > .dropdown > a.nav-item:hover{
        background:#f0f6f4;
      }

      /* dropdown content becomes inline list under its label */
      .dropdownContent{
        position:static;
        margin-top:4px;
        min-width:unset;
        width:100%;
        box-shadow:none;
        border:0;
        padding:6px 0 0;
      }

      .dropdownContent a{
        padding:10px 12px;
        border-radius:10px;
        margin:2px 0;
      }

      /* hover bridge not needed on mobile */
      .dropdown::after{ display:none; }
    }