:root {

    --navy: #16233F;

    --navy-deep: #0E1729;

    --steel: #3E5C86;

    --gold: #B9862E;

    --gold-light: #E8C983;

    --bg: #F5F6F8;

    --surface: #FFFFFF;

    --ink: #1B2233;

    --muted: #6B7280;

    --border: #ccc;

    --radius: 10px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);

    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);

    --shadow-lg: 0 20px 45px rgba(9, 15, 30, 0.35);

}



* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }



body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--ink);

    line-height: 1.55;

    font-size: 16px;

}



h1, h2, h3, .brand-mark {

    font-family: 'Plus Jakarta Sans', sans-serif;

    margin: 0;

    letter-spacing: -0.01em;

}



a { color: inherit; }

img { max-width: 100%; }



/* Full-width section wrapper; inner content is capped for readability

   but every section itself stretches edge to edge. */

.section { width: 100%; }

.inner {

    max-width: 1360px;

    margin: 0 auto;

    padding: 0 clamp(1.1rem, 4vw, 2.5rem);

}



/* ---------- Top utility bar ---------- */

.util-bar {

    background: var(--navy-deep);

    color: #A9B7CE;

    font-size: 0.8rem;

}

.util-bar .inner {

    display: flex;

    justify-content: space-between;

    padding: 0.45rem clamp(1.1rem, 4vw, 2.5rem);

}

.util-bar a { color: #A9B7CE; text-decoration: none; margin-left: 1.25rem; transition: color .15s ease; }

.util-bar a:hover { color: #fff; }

@media (max-width: 640px) {

    .util-bar { display: none; }

}



/* ---------- Main navbar ---------- */

.navbar {

    background: var(--navy);

    padding: 0.9rem 0;

    position: sticky;

    top: 0;

    z-index: 100;

    box-shadow: 0 1px 0 rgba(255,255,255,0.05);

}

.navbar .inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    position: relative;

}

.brand-mark {

    color: #fff;

    font-size: clamp(1.05rem, 2.4vw, 1.35rem);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.55rem;

    white-space: nowrap;

}

.brand-mark .mark {

    width: 34px; height: 34px;

    background: var(--gold);

    color: var(--navy-deep);

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1rem;

    flex-shrink: 0;

}



/* Hamburger toggle — hidden on desktop */

.nav-toggle {

    display: none;

    background: transparent;

    border: 1px solid #33436B;

    border-radius: 6px;

    width: 42px;

    height: 38px;

    color: #fff;

    font-size: 1.15rem;

    cursor: pointer;

    align-items: center;

    justify-content: center;

}



.navbar nav {

    display: flex;

    align-items: center;

    gap: clamp(1rem, 2.5vw, 2rem);

}

.navbar nav a {

    color: #C9D2E0;

    text-decoration: none;

    font-size: 0.92rem;

    font-weight: 500;

    transition: color .15s ease;

}

.navbar nav a:hover, .navbar nav a.active { color: #fff; }



.btn-primary {

    background: var(--gold);

    color: var(--navy-deep);

    padding: 0.6rem 1.3rem;

    border-radius: 6px;

    font-weight: 600;

    text-decoration: none;

    font-size: 0.9rem;

    border: none;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    transition: background .15s ease, transform .1s ease;

    white-space: nowrap;

}

.btn-primary:hover { background: #A8791F; }

.btn-primary:active { transform: translateY(1px); }

.btn-outline-light {

    border: 1px solid #45537A;

    color: #C9D2E0;

    padding: 0.55rem 1.1rem;

    border-radius: 6px;

    text-decoration: none;

    font-size: 0.9rem;

    transition: border-color .15s ease, color .15s ease;

    white-space: nowrap;

}

.btn-outline-light:hover { border-color: #fff; color: #fff; }



/* ---------- Mobile nav behavior ---------- */

@media (max-width: 900px) {

    .nav-toggle { display: inline-flex; }

    .navbar nav {

        position: absolute;

        top: calc(100% + 0.9rem);

        left: 0;

        right: 0;

        background: var(--navy);

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 0.5rem clamp(1.1rem, 4vw, 2.5rem) 1.25rem;

        box-shadow: var(--shadow-md);

        max-height: 0;

        overflow: hidden;

        transition: max-height .25s ease;

    }

    .navbar nav.open { max-height: 420px; }

    .navbar nav a, .navbar nav .btn-primary, .navbar nav .btn-outline-light {

        width: 100%;

        padding: 0.85rem 0.25rem;

        border-bottom: 1px solid #24304C;

        border-radius: 0;

        text-align: left;

    }

    .navbar nav .btn-primary, .navbar nav .btn-outline-light {

        margin-top: 0.6rem;

        border-radius: 6px;

        border-bottom: none;

        padding: 0.75rem 1rem;

        justify-content: center;

    }

}



/* ---------- Hero — full-bleed navy, professional not decorative ---------- */

.hero {

    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);

    color: #fff;

    padding: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(1.75rem, 5vw, 2.5rem);

}

.hero-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: clamp(1.5rem, 4vw, 3rem);

    align-items: center;

}

.eyebrow {

    color: var(--gold-light);

    text-transform: uppercase;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    margin-bottom: 0.75rem;

}

.hero h1 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.18; margin-bottom: 1rem; }

.hero p { color: #B7C1D6; font-size: clamp(0.95rem, 2vw, 1.05rem); max-width: 540px; }



.hero-search {

    background: var(--surface);

    border-radius: var(--radius);

    padding: clamp(1.1rem, 3vw, 1.5rem);

    box-shadow: var(--shadow-lg);

}

.hero-search .label { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.85rem; }

.hero-search-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.hero-search-row input, .hero-search-row select {

    flex: 1;

    min-width: 140px;

    padding: 0.75rem 0.9rem;

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 0.95rem;

    font-family: inherit;

    color: var(--ink);

}

.hero-search-row button { flex-shrink: 0; }

@media (max-width: 560px) {

    .hero-search-row { flex-direction: column; }

    .hero-search-row input, .hero-search-row select, .hero-search-row button { width: 100%; }

}



/* ---------- Stats bar — full width strip under hero ---------- */

.stats-bar {

    background: var(--surface);

    border-bottom: 1px solid var(--border);

}

.stats-bar .inner {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    padding-top: 1.75rem;

    padding-bottom: 1.75rem;

    gap: 1.5rem;

}

.stat { text-align: center; flex: 1; min-width: 130px; }

.stat .num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.4rem, 3.5vw, 1.9rem); font-weight: 700; color: var(--navy); }

.stat .label { font-size: 0.82rem; color: var(--muted); }

.stat + .stat { border-left: 1px solid var(--border); }

@media (max-width: 560px) {

    .stat { min-width: 42%; flex: 1 1 42%; }

    .stat:nth-child(3) { border-left: 1px solid var(--border); }

    .stat:nth-child(2) { border-left: none; }

}



/* ---------- Section headers ---------- */

.section-head {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 1.75rem;

    flex-wrap: wrap;

    gap: 1rem;

}

.section-head h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

.section-head .sub { color: var(--muted); font-size: 0.92rem; margin-top: 0.35rem; }

.link-more { color: var(--steel); text-decoration: none; font-weight: 600; font-size: 0.9rem; }

.link-more:hover { color: var(--navy); }



/* ---------- Category grid ---------- */

.category-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));

    gap: 1rem;

}

.category-tile {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 1.4rem;

    text-decoration: none;

    color: var(--ink);

    display: flex;

    align-items: center;

    gap: 1rem;

    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;

}

.category-tile:hover { border-color: var(--steel); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.category-tile .icon-box {

    width: 46px; height: 46px;

    background: #EEF2F9;

    color: var(--steel);

    border-radius: 8px;

    display: flex; align-items: center; justify-content: center;

    font-size: 1.2rem;

    flex-shrink: 0;

}

.category-tile .name { font-weight: 600; font-size: 0.95rem; }

.category-tile .count { font-size: 0.8rem; color: var(--muted); }



/* ---------- Business cards ---------- */

.business-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

    gap: 1.25rem;

}

.business-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    display: block;

    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;

}

.business-card:hover { border-color: var(--steel); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.business-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: #EEF2F9; }

.business-card .body { padding: 1.1rem; }

.business-card .cat-label {

    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;

    color: var(--steel); font-weight: 700;

}

.business-card .name { font-weight: 600; margin: 0.25rem 0 0.4rem; font-size: 1rem; }

.business-card .meta { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }

.verified {

    display: inline-flex; align-items: center; gap: 0.25rem;

    font-size: 0.72rem; font-weight: 700; color: #1B7A4A;

    background: #E6F5EC; padding: 0.15rem 0.5rem; border-radius: 999px;

    margin-left: 0.5rem;

}



/* ---------- Badges ---------- */

.badge { display: inline-block; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }

.badge-pending  { background: #FCEED8; color: #92590B; }

.badge-approved { background: #E1F2E7; color: #1B6B3A; }

.badge-rejected { background: #FBE1E0; color: #9B2C25; }

.badge-gold { background: var(--gold-light); color: #5A3E0E; }



/* ---------- Cards / forms ---------- */

.card-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow-sm); }

.form-group { margin-bottom: 1.15rem; }

.form-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.88rem; }

.form-group input, .form-group select, .form-group textarea {

    width: 100%;

    padding: 0.7rem 0.9rem;

    border: 1px solid var(--border);

    border-radius: 6px;

    font-family: inherit;

    font-size: 0.95rem;

    color: var(--ink);

    transition: border-color .15s ease, box-shadow .15s ease;

}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {

    outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(62,92,134,0.12);

}

.form-row { display: flex; gap: 1rem; }

.form-row .form-group { flex: 1; min-width: 0; }

.alert { padding: 0.9rem 1.1rem; border-radius: 6px; font-size: 0.88rem; margin-bottom: 1.25rem; border: 1px solid transparent; }

.alert-warning { background: #FCEED8; color: #7A4E0B; border-color: #F0D6A6; }

.alert-danger  { background: #FBE1E0; color: #7C221D; border-color: #F1BEB9; }

.alert-success { background: #E1F2E7; color: #1B6B3A; border-color: #BEE0CB; }



/* ---------- Tables — collapse to stacked cards on small screens ---------- */

table.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

table.data-table th, table.data-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; }

table.data-table th { background: #F7F8FA; color: var(--navy); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

table.data-table tr:last-child td { border-bottom: none; }

.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-sm {

    padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: 6px;

    border: 1px solid var(--border); background: var(--surface); cursor: pointer;

    text-decoration: none; color: var(--ink); font-weight: 500;

    transition: border-color .15s ease;

}

.btn-sm.outline-danger { color: #9B2C25; border-color: #F1BEB9; }

.btn-sm.solid-success { background: #1B7A4A; color: #fff; border: none; }



@media (max-width: 720px) {

    table.data-table thead { display: none; }

    table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; }

    table.data-table tr {

        border-bottom: 1px solid var(--border);

        padding: 1rem 1.1rem;

    }

    table.data-table tr:last-child { border-bottom: none; }

    table.data-table td {

        border-bottom: none;

        padding: 0.25rem 0;

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 1rem;

    }

    table.data-table td::before {

        content: attr(data-label);

        font-size: 0.72rem;

        text-transform: uppercase;

        letter-spacing: 0.03em;

        color: var(--muted);

        font-weight: 700;

        flex-shrink: 0;

    }

    table.data-table td.row-actions-cell { justify-content: flex-start; }

    table.data-table td.row-actions-cell::before { display: none; }

}



/* ---------- Detail page ---------- */

.detail-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }

.detail-grid img { width: 100%; border-radius: var(--radius); }

.contact-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }

.contact-list li { margin-bottom: 0.65rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.55rem; }

.contact-list .icon-box { width: 34px; height: 34px; background: #EEF2F9; color: var(--steel); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.25rem; overflow-x: auto; white-space: nowrap; }

.breadcrumb a { color: var(--muted); text-decoration: none; }

.breadcrumb a:hover { color: var(--steel); }



/* ---------- Alternating full-width sections ---------- */

.bg-white { background: var(--surface); }

.bg-tint  { background: #F0F2F6; }

.py { padding: clamp(2rem, 5vw, 3rem) 0; }



/* ---------- Footer ---------- */

footer { background: var(--navy-deep); color: #94A2BC; padding: 2.5rem 0 1.5rem; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }

.footer-grid h4 { color: #fff; font-size: 0.9rem; margin-bottom: 0.9rem; }

.footer-grid a { display: block; color: #94A2BC; text-decoration: none; font-size: 0.88rem; margin-bottom: 0.55rem; transition: color .15s ease; }

.footer-grid a:hover { color: #fff; }

.footer-bottom { border-top: 1px solid #26314C; padding-top: 1.25rem; display: flex; justify-content: space-between; font-size: 0.82rem; flex-wrap: wrap; gap: 0.5rem; text-align: center; }



.field_error {

    width: 100%;

    color: #a94442;

}



@media (max-width: 900px) {

    .hero-grid { grid-template-columns: 1fr; }

    .detail-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 640px) {

    .form-row { flex-direction: column; }

    .footer-grid { grid-template-columns: 1fr; text-align: left; }

    .footer-bottom { justify-content: center; text-align: center; }

    .section-head { flex-direction: column; align-items: flex-start; }

}