:root{
    --nav-bg:#ffffff;
    --panel-bg: rgba(255,255,255,0.86);
    --panel-bg-right: rgba(255,255,255,0.72);
    --text:#000000;
    --text-dim:#5A5A5A;
    --accent:#F37021;
    --border: rgba(0,0,0,0.09);
  }

  /* ---------- demo hero behind the menu, just so blur is visible ---------- */
  .demo-hero{
    height:100vh;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55)),
      url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
    display:flex;
    align-items:center;
    padding:0 60px;
  }
  .demo-hero h1{font-size:44px;font-weight:300;max-width:640px;line-height:1.25;}
  .demo-hero .pin{color:#ddd;font-size:15px;margin-top:14px;}

  /* ============================================================
     TOP NAV
     ============================================================ */
  header.site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    height:64px;
	box-shadow:0px -17px 37px rgba(0, 0, 0, 0.25);
  }
  .brand{font-size:20px;letter-spacing:1px;font-weight:600;}
  .brand span{font-weight:300;color:var(--text-dim);margin-left:6px;letter-spacing:3px;}

  nav.primary-nav{display:flex;align-items:center;gap:34px; font-family: 'Marcellus'; text-transform: uppercase;}
  nav.primary-nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;}
  nav.primary-nav > ul > li{position:relative;}
  nav.primary-nav > ul > li > a{
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:22px 0;
    cursor:pointer;
  }
  nav.primary-nav > ul > li > a:hover span, nav.primary-nav > ul > li > a:hover {color:var(--accent);}
  nav.primary-nav > ul > li > a .caret{
    width:8px;height:8px;
    border-right:1.5px solid var(--text-dim);
    border-bottom:1.5px solid var(--text-dim);
    transform:rotate(45deg);
    transition:transform .2s ease;
    margin-top:-3px;
  }
  nav.primary-nav > ul > li.open > a .caret{transform:rotate(-135deg);margin-top:3px;}
  nav.primary-nav > ul > li.has-mega.open > a{color:var(--text);}

  .nav-icons{display:flex;align-items:center;gap:20px;}
  .nav-icons a{color:var(--text);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:6px;}

  /* ============================================================
     LEVEL 1 -> LEVEL 2 : MEGA PANEL
     ============================================================ */
  .mega-panel{
    position:fixed;
    top:83px;
    left:0;right:0;
    display:none;
    z-index:999;
    max-height:calc(100vh - 64px);
    overflow:hidden;
  }
  li.has-mega.open .mega-panel{display:block;}

  .mega-inner{
    display:flex;
    max-width:1400px;
    margin:0 auto;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  /* ---- LEFT column: level-2 items ---- */
  .mega-left{
    flex:0 0 340px;
    background:var(--panel-bg);
    padding:26px 0;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
    border-right:1px solid var(--border);
  }
  .l2-item{border-bottom:1px solid transparent;}
  .l2-item > .l2-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 34px;
    cursor:pointer;
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    font-weight:600;
  }
  .l2-item > .l2-row:hover{background:rgba(255,255,255,0.04);}
  .l2-item.plain > .l2-row{font-weight:400;color:var(--text-dim);cursor:pointer;}
  .l2-item .toggle-icon{
    width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    color:var(--text-dim);
    line-height:1;
    transition:transform .2s ease;
  }

  /* ---- level-3 (super sub menu): city list, collapsible ---- */
  .l3-wrap{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
    background:rgba(255,255,255,0.02);
  }
  .l2-item.expanded .l3-wrap{max-height:3000px;}

  .l3-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 34px 12px 50px;
    cursor:pointer;
    font-size:14px;
    color:var(--text);
    text-decoration:none;
  }
  .l3-item:hover{color:var(--text);background:rgba(255,255,255,0.04);}
  .l3-item.active{color:#fff;background:rgba(226,64,47,0.85);border-left:2px solid var(--accent);}
  .l3-item .arrow{
    width:7px;height:7px;
    border-right:1.5px solid currentColor;
    border-top:1.5px solid currentColor;
    transform:rotate(45deg);
    opacity:.7;
    transition:transform .2s ease;
  }

  /* the level-4 project markup authored in HTML; hidden here, cloned out
     into the desktop right column or the mobile inline panel by jQuery */
  .l4-source{display:none;}

  /* inline project panel shown under an l3-item -- MOBILE ONLY (see media query) */
  .l3-inline-panel{
    display:none;
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
  }

  /* ---- toll free footer block inside left col ---- */
  .mega-left .foot-block{padding:18px 34px 4px;border-top:1px solid var(--border);margin-top:12px;}
  .mega-left .foot-block .label{font-size:15px;font-weight:600;margin-bottom:6px;}
  .mega-left .foot-block .phone{font-size:14px;color:var(--text-dim);text-decoration:none;display:flex;gap:8px;align-items:center;}

  /* ---- RIGHT column (desktop): level-4 (super-super-sub) project links ---- */
  .mega-right{
    flex:1;
    background:var(--panel-bg-right);
    padding:30px 40px;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
  }
  .l4-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(240px,1fr));
    gap:6px 40px;
  }
  .l4-item{
    display:block;
    padding:14px 4px;
    text-decoration:none;
    border-bottom:1px solid var(--border);
  }
  .l4-item .proj-name{color:#000000;font-size:15px;font-weight:600;display:block;}
  .l4-item .proj-loc{color:var(--text-dim);font-size:13px;display:block;margin-top:3px;}
  .l4-item:hover .proj-name{color:var(--accent);}

  .l4-empty{color:var(--text-dim);font-size:14px;padding:20px 4px;}

  /* ============================================================
     HAMBURGER (animates into a cross when active)
     ============================================================ */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    width:30px;height:22px;
    background:none;border:0;cursor:pointer;padding:0;
  }
  .hamburger span{
    width:100%;height:2px;background:#F37021;display:block;
    transition:transform .25s ease, opacity .2s ease;
    transform-origin:center;
  }
  .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ============================================================
     RESPONSIVE / MOBILE  (slide-in from the RIGHT)
     ============================================================ */
  @media (max-width: 900px){
    header.site-header{padding:0 16px;}
    .hamburger{display:flex; margin-top:8px;}
    .nav-icons a.enquire-text{display:none;}
    nav.primary-nav{
      position:fixed;
      top:60px;
      right:0;
      left:auto;
      width:86%;
      max-width:360px;
      height:calc(100vh - 64px);
      background:var(--nav-bg);
      transform:translateX(100%);
      transition:transform .3s ease;
      overflow-y:auto;
      display:block;
    }
	.mega-left .foot-block {border-top:0; margin-top:0;}
    nav.primary-nav.mobile-open{transform:translateX(0);}
    nav.primary-nav > ul{flex-direction:column;gap:0;width:100%;}
    nav.primary-nav > ul > li{width:100%;border-bottom:1px solid var(--border);}
    nav.primary-nav > ul > li > a{padding:16px 20px;justify-content:space-between;width:100%;}
    .foot-block {display:none;}
    .mega-panel{
      position:static;
      display:none;
      max-height:none;
    }
    li.has-mega.open .mega-panel{display:block;}
    .mega-inner{
      flex-direction:column;
      max-width:100%;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .mega-left{
      flex:none;
      width:100%;
      max-height:none;
      border-right:0;
      padding:8px 0;
    }
	.l3-item-wrap {
		border-bottom: 1px solid var(--border);
	}
    /* on mobile the desktop right column is replaced by inline panels
       that open directly beneath the clicked l3-item */
    .mega-right{display:none;}
    .l3-inline-panel{display:block;}
    .l3-inline-panel.open{max-height:3000px;}
    .l3-inline-panel .l4-grid{grid-template-columns:1fr;padding:6px 20px 0px 50px;}

    /* arrow rotates to 130deg while this city's inline panel is open,
       and reverts to the default 45deg the moment it's collapsed */
    .l3-item.active .arrow{transform:rotate(130deg);}
  }

  /* backdrop behind opened panel (click to close) */
  .menu-backdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,0.2);
    z-index:998;
    display:none;
  }
  body.menu-active .menu-backdrop{display:block;}