:root{
    --ink:#0b1220; --muted:#5b6475; --bg:#f6f8fb; --card:#fff; --border:#e6e9ef;
    --primary:#014067; --turf:#087748; --turf-hover:#24b24b;
    --orn:#d64400; --orn-hover:#fc5000; --reg:#1c68b0; --reg-hover:#2c88de;
    --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:24px 16px}
.section{padding:0px}

.header{position:sticky;top:0;z-index:50;background:var(--primary);color:#fff;box-shadow:0 6px 20px rgba(1,64,103,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:62px;width:auto}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 12px;
    padding: 0 16px; /* horizontal only; height controls vertical rhythm */
    height: 42px; /* consistent height */
    font-weight: 500;
    font-size: 13px; /* smaller text */
    line-height: 1; /* crisp vertical alignment */
    box-shadow: var(--shadow);
    transition: transform .06s ease, filter .06s ease;
}
.btn:active{transform:translateY(1px);filter:brightness(.96)}
.btn.primary{background:var(--primary);color:#fff}

#nav-toggle{display:none;background:#fff;color:var(--primary);border:none;border-radius:10px;padding:8px 10px;font-weight:900}

.nav .links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav a{color:#e9f2fb;text-decoration:none;font-weight:650}
.nav .dropdown{position:relative}
.nav .dropbtn{display:inline-flex;align-items:center;gap:6px;color:#e9f2fb;background:transparent;border:none;font:inherit;cursor:pointer;padding:8px 10px;border-radius:10px}
.nav .dropbtn:focus{outline:2px solid #fff3}
.nav .menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none}
.nav .menu a{color:#0f172a;display:block;padding:8px 10px;border-radius:8px}
.nav .menu a:hover{background:#f2f5f9}
.nav .dropdown.open .menu{ display:block }

.nav .btn.primary{background-color:var(--bg);color:var(--primary);border-radius:0px}

.footer{background:#0f172a;color:#cbd5e1;margin-top:20px}
.footer .cols{display:grid;gap:16px;grid-template-columns:1fr;align-items:flex-start}
.footer a{color:#e2e8f0;text-decoration:none}
.footer small{color:#94a3b8}
.footer .brand img{
    height: 32px;
    width: auto;         /* ensure aspect ratio preserved */
    object-fit: contain; /* belt and suspenders */
}

@media (min-width:861px){
    #nav-toggle{display:none}
    .links{display:flex !important}
}

@media (max-width:860px){
    .nav{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .brand{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-start; }
    .brand img{height:auto;max-width:200px}
    #nav-toggle{
        display: inline-flex;         /* make the hamburger visible */
        align-items:center; justify-content:center;
        min-height:44px; min-width:44px; padding:10px 14px;
        font-weight: 900; border-radius:10px;
        background:#fff; color:var(--primary); border:1px solid var(--border);
        margin-left: auto;            /* push it to the right of the logo */
        touch-action: manipulation;
    }
    #nav-toggle.hamburger{
        display:inline-flex;
        align-items:center; justify-content:center;
        min-height:44px; min-width:44px;
        padding:10px; border:0; background:transparent; color:inherit;
    }
    #nav-links{display:none;width:100%}
    #nav-links.open{display:block}
    /* mobile dropdown menu appearance */
    .nav .menu{position:static;display:none;border:none;box-shadow:none;background:transparent;padding:0;margin:6px 0}
    .nav .dropdown.open .menu{display:block}
    .nav .menu a{padding:10px 12px;background:#fff;border:1px solid var(--border);margin:6px 0;border-radius:10px}
}
.footer .brand img{height:32px;width:auto;object-fit:contain}

@media (min-width:861px){
    #nav-toggle { display: none; }
    .links { display: flex !important; }
}