:root {
        --hx-green: #0c3823;
        --hx-green-2: #14512f;
        --hx-gold: #f39c12;
        --hx-ink: #1d2b24;
        --hx-line: rgba(12, 56, 35, .12);
        --hx-h: 76px;
    }

    .hx-wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
    .hx-topbar a, .hx-header a { text-decoration: none; }
    .hx-header ul, .hx-topbar ul { list-style: none; margin: 0; padding: 0; }

    /* ---------- Top bar ---------- */
    .hx-topbar { background: var(--hx-green); color: #e8f1ec; font-size: 13.5px; }
    .hx-topbar .hx-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
    .hx-topbar-left { display: flex; gap: 22px; flex-wrap: wrap; }
    .hx-topbar-right { display: flex; gap: 22px; align-items: center; }
    .hx-topbar-right li { display: flex; align-items: center; gap: 8px; }
    .hx-topbar a { color: #e8f1ec; transition: color .2s; }
    .hx-topbar a:hover { color: var(--hx-gold); }
    .hx-topbar i, .hx-topbar img { color: var(--hx-gold); font-size: 13px; }
    .hx-topbar img { width: 15px; height: 15px; object-fit: contain; }

    /* ---------- Header ---------- */
    .hx-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 14px rgba(12, 56, 35, .1); }
    .hx-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hx-h); }
    .hx-logo { display: block; flex-shrink: 0; }
    .hx-logo img { display: block; height: 54px; width: auto; max-width: 100%; }

    /* Nav (desktop default) */
    .hx-nav { flex: 1; display: flex; justify-content: center; }
    .hx-nav-list { display: flex; align-items: center; gap: 6px; }
    .hx-nav-list a {
        position: relative; display: block; padding: 10px 14px;
        color: var(--hx-ink); font-weight: 600; font-size: 15.5px; border-radius: 8px;
        transition: color .2s, background-color .2s;
    }
    .hx-nav-list a::after {
        content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
        background: var(--hx-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s;
    }
    .hx-nav-list a:hover, .hx-nav-list a.active { color: var(--hx-green); }
    .hx-nav-list a:hover::after, .hx-nav-list a.active::after { transform: scaleX(1); }

    /* Right side */
    .hx-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .hx-quote {
        display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px;
        background: var(--hx-green); color: #fff; font-weight: 600; font-size: 14.5px;
        border-radius: 999px; white-space: nowrap; transition: background-color .2s, transform .2s;
    }
    .hx-quote:hover { background: var(--hx-gold); color: #fff; transform: translateY(-1px); }
    .hx-icons { display: flex; gap: 8px; }
    .hx-icon {
        width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--hx-line); border-radius: 50%; color: var(--hx-green);
        background: #fff; cursor: pointer; transition: all .2s;
    }
    .hx-icon:hover { background: var(--hx-green); color: #fff; border-color: var(--hx-green); }
    .hx-welcome { color: var(--hx-green); cursor: pointer; font-size: 22px; padding: 6px; line-height: 1; }

    /* Burger (phone only) */
    .hx-burger {
        display: none; width: 42px; height: 42px; border: 1px solid var(--hx-line); border-radius: 10px;
        background: #fff; cursor: pointer; padding: 0; position: relative;
    }
    .hx-burger span, .hx-burger span::before, .hx-burger span::after {
        content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--hx-green);
        border-radius: 2px; transition: transform .25s, opacity .2s, top .25s;
    }
    .hx-burger span { top: 19px; }
    .hx-burger span::before { left: 0; right: 0; top: -7px; }
    .hx-burger span::after { left: 0; right: 0; top: 7px; }
    .hx-burger.open span { background: transparent; }
    .hx-burger.open span::before { top: 0; transform: rotate(45deg); }
    .hx-burger.open span::after { top: 0; transform: rotate(-45deg); }

    /* Drawer-only pieces hidden by default */
    .hx-drawer-head, .hx-drawer-extra, .hx-overlay { display: none; }

    /* Focus visibility */
    .hx-header a:focus-visible, .hx-burger:focus-visible, .hx-icon:focus-visible { outline: 2px solid var(--hx-gold); outline-offset: 2px; }

    /* ---------- Small laptops ---------- */
    @media (max-width: 1199px) {
        .hx-nav-list a { padding: 10px 10px; font-size: 15px; }
        .hx-main { gap: 14px; }
        .hx-quote { padding: 10px 16px; }
    }

    /* ---------- Tablet: logo + actions on top, FULL nav bar underneath ---------- */
    @media (min-width: 768px) and (max-width: 991px) {
        .hx-topbar-left, .hx-topbar-right li:nth-child(3) { display: none; }
        .hx-topbar .hx-wrap { justify-content: center; }
        .hx-main { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 0; row-gap: 10px; }
        .hx-logo img { height: 50px; }
        .hx-right { order: 2; }
        .hx-nav {
            order: 3; flex: 0 0 auto; width: calc(100% + 40px); margin: 0 -20px;
            background: var(--hx-green); justify-content: center;
        }
        .hx-nav-list { width: 100%; justify-content: space-evenly; gap: 0; padding: 0 12px; }
        .hx-nav-list a { color: #fff; padding: 14px 12px; font-size: 15px; border-radius: 0; }
        .hx-nav-list a:hover, .hx-nav-list a.active { color: var(--hx-gold); }
        .hx-nav-list a::after { bottom: 0; left: 8px; right: 8px; }
    }

    /* ---------- Phone: off-canvas drawer ---------- */
    @media (max-width: 767px) {
        :root { --hx-h: 64px; }
        .hx-topbar-left, .hx-topbar-right li:nth-child(2), .hx-topbar-right li:nth-child(3) { display: none; }
        .hx-topbar .hx-wrap { justify-content: center; min-height: 36px; }
        .hx-wrap { padding: 0 14px; }
        .hx-logo img { height: 44px; }
        .hx-quote, .hx-icons { display: none; }
        .hx-burger { display: block; }
        .hx-right { gap: 8px; }

        .hx-overlay {
            display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
            opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1001;
        }
        .hx-overlay.open { opacity: 1; visibility: visible; }

        .hx-nav {
            position: fixed; top: 0; right: 0; bottom: 0; z-index: 1002;
            width: min(86vw, 340px); background: var(--hx-green); color: #fff;
            flex-direction: column; justify-content: flex-start; overflow-y: auto;
            transform: translateX(100%); transition: transform .3s ease; visibility: hidden;
            padding-bottom: env(safe-area-inset-bottom, 0);
        }
        .hx-nav.open { transform: translateX(0); visibility: visible; }

        .hx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
        .hx-drawer-head img { height: 40px; background: #fff; border-radius: 10px; padding: 3px 6px; }
        .hx-drawer-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; }

        .hx-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
        .hx-nav-list li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
        .hx-nav-list a { color: #fff; padding: 15px 22px; font-size: 16px; border-radius: 0; }
        .hx-nav-list a::after { display: none; }
        .hx-nav-list a:hover, .hx-nav-list a.active { color: var(--hx-gold); background: rgba(255, 255, 255, .05); }

        .hx-drawer-extra { display: block; padding: 8px 18px 24px; }
        .hx-drawer-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
        .hx-drawer-btns a {
            display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px;
            background: #fff; color: var(--hx-green); border-radius: 8px; font-weight: 600; font-size: 14px;
        }
        .hx-drawer-btns a.wa:hover { background: #25d366; color: #fff; }
        .hx-drawer-btns a.quote { grid-column: 1 / -1; background: var(--hx-gold); color: #fff; }
        .hx-drawer-info li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14px; color: #d5e4dc; }
        .hx-drawer-info i, .hx-drawer-info img { color: var(--hx-gold); margin-top: 3px; width: 16px; text-align: center; }
        .hx-drawer-info a { color: #d5e4dc; }
        .hx-social { display: flex; gap: 10px; margin-top: 14px; }
        .hx-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
        .hx-social a:hover { background: var(--hx-gold); border-color: var(--hx-gold); }
        body.hx-lock { overflow: hidden; }
    }

    /* ---------- Welcome / company info popup: size only, never touches position/visibility ---------- */
    .box-welcome {
        box-sizing: border-box;
        width: min(92vw, 520px);
        max-width: 92vw;
        max-height: 88vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .box-welcome img { max-width: 100%; height: auto; }
    .box-welcome h1, .box-welcome h2, .box-welcome h3 { font-size: clamp(20px, 5vw, 28px); line-height: 1.25; }
    .box-welcome p { font-size: clamp(14px, 3.6vw, 16px); }

    @media (max-width: 991px) {
        .box-welcome { width: min(90vw, 460px); }
    }
    @media (max-width: 480px) {
        .box-welcome { width: 92vw; max-height: 85vh; }
    }

    @media (prefers-reduced-motion: reduce) {
        .hx-nav, .hx-overlay, .hx-burger span, .hx-burger span::before, .hx-burger span::after { transition: none; }
    }

/* Shared inner-page shell and footer controls. */
html { scroll-padding-top: 112px; }
.site-page-content { display: block; }
.site-page-content ul { list-style: disc; }
.site-page-content .toc-links { list-style: none; }
#footer-main .footer-title-mobile { background: transparent; border: 0; width: 100%; text-align: left; }
@media print { .hx-topbar, .hx-header, .hx-overlay, #footer-main { display: none !important; } }

/* Keep the drawer above its backdrop inside the sticky header stacking context. */
.hx-overlay { z-index: 999; }
.site-page-content .article li { list-style: disc; }
.site-page-content strong { font-weight: 700; }
@media print { .site-page-content .hero h1 { color: #000; } }

/* Make room for certificates and gallery on laptop and tablet navigation. */
@media(min-width:992px) and (max-width:1350px) { .hx-main { flex-wrap:wrap; row-gap:8px; padding-top:10px; } .hx-right { order:2; } .hx-nav { order:3; flex:0 0 100%; padding-bottom:8px; } }
@media(min-width:768px) and (max-width:991px) { .hx-nav-list { flex-wrap:wrap; justify-content:center; } .hx-nav-list a { padding:10px 12px; } }