@scope (#site-header) {

    /* ============ Montserrat (attached font files, embedded) ============ */
    @font-face{
        font-family:'Montserrat';
        font-style:normal;
        font-weight:400;
        font-display:swap;
        src:url(51ba35bcd5e6ab6b4fe5.woff2) format('woff2');
    }
    @font-face{
        font-family:'Montserrat';
        font-style:normal;
        font-weight:500;
        font-display:swap;
        src:url(de9a2148c1f53c6a3025.woff2) format('woff2');
    }
    @font-face{
        font-family:'Montserrat';
        font-style:normal;
        font-weight:600;
        font-display:swap;
        src:url(f0eda5023f900d2cb062.woff2) format('woff2');
    }
    @font-face{
        font-family:'Montserrat';
        font-style:normal;
        font-weight:700;
        font-display:swap;
        src:url(28c6e8c48f3c4e2296e4.woff2) format('woff2');
    }
    @font-face{
        font-family:'Montserrat';
        font-style:normal;
        font-weight:800;
        font-display:swap;
        src:url(4e5294321cd06d9b9072.woff2) format('woff2');
    }

    /* ============ Brand tokens — ONLY these 4 colors are used anywhere ============ */
    :scope{
        --gold:#FFB909;      /* primary   */
        --navy:#0A2471;      /* secondary */
        --black:#000000;     /* third     */
        --white:#FAFAFA;     /* fourth    */
        --nav-height:84px;
    }

    *{box-sizing:border-box;}
    :scope{margin:0;padding:0;}
    :scope{font-family:'Montserrat',Arial,sans-serif;background:var(--white);}

    /* ============================================================
       HEADER / NAV
       ============================================================ */
    .nav{
        position:sticky;
        top:0;
        left:0;
        width:100%;
        background:rgba(250,250,250,.5);
        z-index:1000;
        border-bottom:1px solid rgba(10,36,113,.12);
    }

    .nav-inner{
        max-width:1400px;
        margin:0 auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:var(--nav-height);
        padding:0 20px 0 4px;
        gap:40px;
    }

    .logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
    .logo img{height:42px;width:auto;display:block;}

    /* ---- primary links ---- */
    .nav-menu{display:flex;align-items:center;}
    .nav-links{
        display:flex;
        align-items:center;
        list-style:none;
        margin:0;
        padding:0;
        gap:4px;
    }
    .nav-links > li{position:relative;}
    .nav-links > li > a{
        display:flex;
        align-items:center;
        gap:6px;
        color:var(--navy);
        text-decoration:none;
        font-size:15px;
        font-weight:500;
        font-family:'Montserrat',Arial,sans-serif;
        padding:14px 16px;
        border-radius:6px;
        transition:color .25s ease;
        white-space:nowrap;
    }
    .nav-links > li > a svg{transition:transform .25s ease;flex:0 0 auto;}
    .nav-links > li:hover > a,
    .nav-links > li > a:focus-visible,
    .nav-links > li.open > a{
        color:var(--gold);
    }
    .nav-links > li.has-mega:hover > a svg,
    .nav-links > li.has-mega.open > a svg{
        transform:rotate(180deg);
    }

    /* ---- mega menu (desktop / laptop) ---- */
    .mega{
        position:absolute;
        top:100%;
        left:50%;
        transform:translate(-50%,10px);
        width:min(920px,90vw);
        background:var(--white);
        border-radius:14px;
        border-top:4px solid var(--gold);
        box-shadow:0 24px 60px rgba(0,0,0,.25);
        padding:20px;
        opacity:0;
        visibility:hidden;
        transition:opacity .25s ease,transform .25s ease,visibility .25s;
        z-index:1100;
    }
    .has-mega:hover .mega,
    .has-mega.open .mega{
        opacity:1;
        visibility:visible;
        transform:translate(-50%,0);
    }

    .mega-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        width:100%;
    }

    .svc-item{
        display:grid;
        grid-template-columns:40px minmax(0,1fr);
        align-items:start;
        gap:14px;
        width:100%;
        min-width:0;
        text-decoration:none;
        padding:12px;
        border-radius:10px;
        transition:background .2s ease;
    }
    .svc-item:hover{background:rgba(10,36,113,.06);}
    .svc-icon{
        width:40px;
        height:40px;
        border-radius:10px;
        background:var(--navy);
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .svc-icon svg{
        width:20px;height:20px;
        fill:none;
        stroke:var(--gold);
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    .svc-text{min-width:0;}
    .svc-title{
        display:block;
        width:100%;
        color:var(--black);
        font-size:14.5px;
        font-weight:600;
        line-height:1.3;
        overflow-wrap:break-word;
        word-break:break-word;
        white-space:normal;
    }
    .svc-desc{
        display:block;
        width:100%;
        color:var(--navy);
        font-size:12.5px;
        font-weight:400;
        line-height:1.4;
        margin-top:3px;
        overflow-wrap:break-word;
        word-break:break-word;
        white-space:normal;
    }

    /* ---- nav actions ---- */
    .nav-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
    .btn-enquiry,
    .btn-start{
        text-decoration:none;
        font-weight:700;
        font-size:14px;
        font-family:'Montserrat',Arial,sans-serif;
        padding:11px 24px;
        border-radius:30px;
        transition:opacity .25s ease,background .25s ease,color .25s ease;
        white-space:nowrap;
        text-align:center;
    }
    .btn-enquiry{
        background:var(--gold);
        color:var(--navy);
        border:2px solid var(--gold);
    }
    .btn-enquiry:hover{opacity:.85;color:var(--navy);}
    .btn-start{
        background:transparent;
        color:var(--navy);
        border:2px solid var(--navy);
        padding:9px 22px;
    }
    .btn-start:hover{background:var(--navy);color:var(--white);}

    /* CTA pair repeated inside the off-canvas panel — hidden on desktop/laptop */
    .mobile-cta{display:none;}

    /* ---- hamburger ---- */
    .hamburger{
        display:none;
        width:40px;
        height:40px;
        border:none;
        background:transparent;
        position:relative;
        cursor:pointer;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:6px;
        padding:0;
    }
    .hamburger span{
        display:block;
        width:24px;
        height:2px;
        background:var(--navy);
        transition:.3s;
    }
    .hamburger.active span:nth-child(1){transform:translateY(4px) rotate(45deg);}
    .hamburger.active span:nth-child(2){transform:translateY(-4px) rotate(-45deg);}

    /* ============================================================
       TABLET & LAPTOP (<=991px) — collapse to a full-width off-canvas menu
       ============================================================ */
    @media (max-width:991px){
        .nav-inner{padding:0 18px 0 4px;}
        .hamburger{display:flex;}

        .nav-menu{
            position:fixed;
            top:var(--nav-height);
            left:0;
            right:0;
            width:100%;
            max-width:100%;
            height:calc(100vh - var(--nav-height));
            background:rgba(250,250,250,.92);
            flex-direction:column;
            align-items:stretch;
            padding:10px 0 30px;
            overflow-x:hidden;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
            transform:translateX(100%);
            transition:transform .35s ease;
            box-shadow:-8px 0 30px rgba(0,0,0,.15);
        }
        .nav-menu.open{transform:translateX(0);}

        .nav-links{
            flex-direction:column;
            align-items:stretch;
            gap:0;
            width:100%;
            max-width:100%;
        }
        .nav-links > li{
            width:100%;
            max-width:100%;
            min-width:0;
            border-bottom:1px solid rgba(10,36,113,.12);
        }
        .nav-links > li > a{
            width:100%;
            padding:16px 20px;
            justify-content:space-between;
            border-radius:0;
            white-space:normal;
        }

        /* mega collapses into an accordion panel */
        .has-mega{width:100%;max-width:100%;}
        .mega{
            display:block;
            position:static;
            transform:none;
            width:100%;
            max-width:100%;
            min-width:0;
            box-sizing:border-box;
            opacity:1;
            visibility:visible;
            box-shadow:none;
            border-radius:0;
            border-top:none;
            background:var(--navy);
            padding:0;
            max-height:0;
            overflow:hidden;
            transition:max-height .35s ease,padding .35s ease;
        }
        .has-mega.open .mega{
            max-height:3000px;
            padding:8px 14px 16px;
        }
        /* mega collapses into an accordion panel — plain block stacking only,
           no flex/grid on the rows, so there is no track-sizing math that
           could ever push a row wider than the panel. */
        .has-mega{width:100%;max-width:100%;}
        .mega{
            display:block;
            position:static;
            transform:none;
            width:auto;
            box-sizing:border-box;
            opacity:1;
            visibility:visible;
            box-shadow:none;
            border-radius:0;
            border-top:none;
            background:var(--navy);
            padding:0;
            max-height:0;
            overflow:hidden;
            transition:max-height .35s ease,padding .35s ease;
        }
        .has-mega.open .mega{
            max-height:3000px;
            padding:6px 0 10px;
        }
        .mega-grid{display:block;}
        .svc-item{
            display:block;
            width:auto;
            box-sizing:border-box;
            padding:12px 20px;
            border-bottom:1px solid rgba(250,250,250,.08);
        }
        .svc-item:last-child{border-bottom:none;}
        .svc-item:hover{background:rgba(250,250,250,.08);}
        .svc-icon{display:none;}
        .svc-text{display:block;width:auto;}
        .svc-title{color:var(--white);}
        .svc-desc{color:rgba(250,250,250,.72);}

        .nav-actions{gap:10px;}
        .nav-actions .btn-enquiry,
        .nav-actions .btn-start{display:none;}

        .mobile-cta{
            display:flex;
            flex-direction:column;
            gap:10px;
            padding:20px;
            margin-top:auto;
        }
        .mobile-cta .btn-enquiry,
        .mobile-cta .btn-start{
            width:100%;
            padding:13px 20px;
            font-size:14.5px;
        }
    }

    /* ============================================================
       PHONE (<=576px) — single column accordion
       ============================================================ */
    @media (max-width:576px){
        :scope{--nav-height:68px;}
        .logo img{height:32px;}
        .btn-enquiry{padding:8px 14px;font-size:12.5px;}
        .nav-links > li > a{padding:15px 18px;font-size:14.5px;}
    }

    /* dim overlay while the mobile menu is open — white (#FAFAFA) at 50% opacity */
    .nav-overlay{
        position:fixed;
        inset:0;
        background:rgba(250,250,250,.5);
        opacity:0;
        visibility:hidden;
        transition:.3s;
        z-index:900;
    }
    .nav-overlay.show{opacity:1;visibility:visible;}

    /* demo page content — not part of the nav component, safe to delete */
    .demo-content{max-width:900px;margin:60px auto;padding:0 24px;color:var(--black);font-family:'Montserrat',Arial,sans-serif;}
    .demo-content code{background:var(--white);border:1px solid rgba(10,36,113,.15);padding:2px 6px;border-radius:4px;color:var(--navy);}

}
@scope (#site-footer) {

  :scope{
    --navy-900:#0c1155;
    --navy-800:#111763;
    --navy-700:#161d78;
    --gold-400:#f6b93b;
    --gold-500:#f2a90f;
    --ink-100:#e7e9ff;
    --ink-300:#b9beed;
    --line:rgba(255,255,255,.14);
  }

  *{box-sizing:border-box;}

  :scope{
    margin:0;
    font-family:'Montserrat',sans-serif;
    background:#eef0f7;
  }

  /* ===== FOOTER SHELL ===== */
  .wg-footer{
    position:relative;
    background:
      radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    color:var(--ink-100);
    overflow:hidden;
    padding-top:56px;
    font-family:'Montserrat',sans-serif;
  }

  /* faint corner watermark */
  .wg-watermark{
    position:absolute;
    top:-60px;right:-60px;
    width:340px;height:340px;
    background:url('84e61df1caaaa540f806.png') center/contain no-repeat;
    opacity:.05;
    z-index:1;
    pointer-events:none;
  }

  .wg-footer .container-xl{
    position:relative;
    z-index:2;
  }

  /* ===== BRAND ===== */
  .wg-logo{
    margin-bottom:20px;
  }
  .wg-logo img{
    height:52px;
    width:auto;
    display:block;
  }

  .wg-tagline{
    color:var(--ink-300);
    font-size:.92rem;
    font-weight:400;
    max-width:320px;
    margin-bottom:20px;
  }

  /* social icons */
  .wg-social{
    display:flex;gap:10px;flex-wrap:wrap;
    margin-bottom:22px;
  }
  .wg-social a{
    width:42px;height:42px;border-radius:50%;
    background:#fff;color:var(--navy-900);
    display:flex;align-items:center;justify-content:center;
    font-size:1.05rem;
    transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    text-decoration:none;
  }
  .wg-social a:hover, .wg-social a:focus-visible{
    background:var(--gold-500);
    color:var(--navy-900);
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 10px 20px -8px rgba(246,185,59,.55);
    outline:none;
  }

  .wg-whatsapp{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--gold-400);
    font-weight:600;
    text-decoration:none;
    margin-bottom:16px;
    transition:opacity .2s ease;
  }
  .wg-whatsapp i{font-size:1.3rem;}
  .wg-whatsapp:hover{opacity:.8;color:var(--gold-400);}

  /* phone pills */
  .wg-phones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:420px;
  }
  .wg-phone-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:#fff;color:var(--navy-900);
    border:none;
    border-radius:8px;
    padding:11px 10px;
    font-weight:600;
    font-family:'Montserrat',sans-serif;
    font-size:.9rem;
    cursor:pointer;
    position:relative;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .wg-phone-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 18px -10px rgba(0,0,0,.5);
    background:#25D366;
    color:#fff;
  }
  .wg-phone-btn:hover i{color:#fff;}
  .wg-phone-btn i{font-size:.95rem;color:#25D366;transition:color .18s ease;}
  .wg-phone-btn .copied-tag{
    position:absolute;
    top:-26px;left:50%;
    transform:translateX(-50%);
    background:var(--navy-900);
    color:var(--gold-400);
    font-size:.68rem;
    font-weight:600;
    padding:3px 9px;
    border-radius:12px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, top .2s ease;
    white-space:nowrap;
  }
  .wg-phone-btn:hover .copied-tag{opacity:1;top:-30px;}

  /* ===== SECTION TITLES ===== */
  .wg-eyebrow{
    color:var(--ink-300);
    font-size:.95rem;
    font-weight:400;
    margin-bottom:6px;
  }
  .wg-email{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    color:var(--gold-500);
    font-size:clamp(1.5rem, 3.4vw, 2.4rem);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:12px;
    line-height:1.15;
    word-break:break-word;
    margin-bottom:30px;
    transition:filter .2s ease;
  }
  .wg-email:hover{filter:brightness(1.15);color:var(--gold-400);}
  .wg-email .copy-icon{
    font-size:1rem;
    color:var(--ink-300);
    cursor:pointer;
  }

  .wg-heading{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    color:#fff;
    font-size:1.2rem;
    margin-bottom:10px;
    position:relative;
    padding-bottom:12px;
  }
  .wg-heading::after{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:42px;height:3px;
    background:var(--gold-500);
    border-radius:3px;
  }

  .wg-links{list-style:none;margin:0;padding:0;}
  .wg-links li{margin-bottom:12px;}
  .wg-links a{
    color:var(--ink-100);
    text-decoration:none;
    font-weight:400;
    font-size:.95rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:color .2s ease, padding-left .2s ease;
  }
  .wg-links a::before{
    content:"";
    width:5px;height:5px;
    border-radius:50%;
    background:var(--gold-500);
    opacity:0;
    transition:opacity .2s ease;
  }
  .wg-links a:hover{color:var(--gold-400);padding-left:2px;}
  .wg-links a:hover::before{opacity:1;}

  /* ===== LOCATIONS ===== */
  .wg-loc-heading{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    color:var(--gold-500);
    font-size:1.05rem;
    letter-spacing:.3px;
    margin-bottom:18px;
  }
  .wg-loc-item{
    display:flex;gap:14px;
    align-items:flex-start;
    margin-bottom:18px;
    cursor:pointer;
  }
  .wg-loc-flag{
    flex:0 0 auto;
    width:32px;height:32px;
    border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    padding:5px;
    background:rgba(246,185,59,.1);
    transition:background .2s ease, transform .2s ease;
  }
  .wg-loc-flag img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .wg-loc-text{font-size:.88rem;font-weight:400;color:var(--ink-300);line-height:1.45;}
  .wg-loc-text b{color:#fff;font-weight:600;}
  .wg-loc-item:hover .wg-loc-text{color:var(--ink-100);}
  .wg-loc-item:hover .wg-loc-flag{background:rgba(246,185,59,.22);}

  /* ===== BOTTOM BAR ===== */
  .wg-bottom{
    border-top:1px solid var(--line);
    margin-top:42px;
    padding:20px 0;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    font-size:.85rem;
    font-weight:400;
    color:var(--ink-300);
  }
  .wg-bottom a{
    color:var(--ink-300);
    text-decoration:none;
    margin-left:22px;
    transition:color .2s ease;
  }
  .wg-bottom a:hover{color:var(--gold-400);}
  .wg-bottom .legal-links a:first-child{margin-left:0;}

  /* ===== LET'S WORK TOGETHER BANNER (static image, fixed in place, no animation) ===== */
  .wg-banner{
    position:relative;
    width:100%;
    padding:10px 0 0;
    line-height:0;
  }
  .wg-banner img{
    display:block;
    width:100%;
    height:auto;
    max-height:180px;
    object-fit:cover;
    object-position:center;
    opacity:.9;
  }

  /* back to top */
  .wg-top-btn{
    position:fixed;
    right:22px;bottom:22px;
    width:46px;height:46px;
    border-radius:50%;
    background:var(--gold-500);
    color:var(--navy-900);
    border:none;
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;
    box-shadow:0 10px 22px -8px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:50;
    cursor:pointer;
  }
  .wg-top-btn.show{opacity:1;visibility:visible;transform:translateY(0);}
  .wg-top-btn:hover{background:var(--gold-400);}

  @media (max-width:991.98px){
    .wg-footer{padding-top:44px;}
    .wg-heading, .wg-loc-heading{
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .wg-heading .chev, .wg-loc-heading .chev{
      font-size:.85rem;
      transition:transform .25s ease;
      color:var(--gold-500);
    }
    .wg-heading.open .chev, .wg-loc-heading.open .chev{transform:rotate(180deg);}
    .wg-collapsible{
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease;
    }
    .wg-collapsible.open{max-height:1000px;}
    .wg-phones{max-width:100%;}
    .wg-bottom{justify-content:center;text-align:center;}
    .wg-bottom .legal-links{width:100%;text-align:center;margin-top:4px;}
    .wg-banner img{max-height:110px;}
    .wg-logo img{height:44px;}
  }

  @media (max-width:575.98px){
    .wg-phones{grid-template-columns:1fr;}
    .wg-email{font-size:1.5rem;}
    .wg-banner img{max-height:70px;}
    .wg-logo img{height:38px;}
  }

}
#site-header{position:sticky;top:0;z-index:10000;background:#fafafa;font-family:Montserrat,Arial,sans-serif;--gold:#FFB909;--navy:#0A2471;--black:#000;--white:#FAFAFA;--nav-height:84px}
#site-header .nav{position:relative;background:rgba(250,250,250,.97);display:block}
#site-header a[aria-current="page"]{color:#0A2471;text-decoration:underline;text-underline-offset:6px}
#site-header .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
#site-header .logo img{max-width:180px;object-fit:contain}
#site-header .nav-overlay{z-index:990}
#site-header .nav-menu{z-index:1001}
#site-footer{--navy-900:#0c1155;--navy-800:#111763;--navy-700:#161d78;--gold-400:#f6b93b;--gold-500:#f2a90f;--ink-100:#e7e9ff;--ink-300:#b9beed;--line:rgba(255,255,255,.14)}
html{scroll-padding-top:100px} .site-form-note{padding:14px 18px;background:#fff5d6;color:#0a2471;border-left:4px solid #ffb909;font:500 14px/1.6 Montserrat,Arial,sans-serif;margin:16px 0}
@media(max-width:600px){#site-header .nav-inner{padding:0 14px;gap:12px}#site-header .logo img{max-width:155px} }

@media(max-width:991px){#site-header .has-mega:focus-within .mega{transform:none}}

#site-header .mega-overview{display:block;padding:10px 14px;font-size:14px;font-weight:700;color:var(--navy)}@media(max-width:991px){#site-header .mega-overview{color:var(--gold)}}