/* ===== brands.html inline style 1 ===== */
:root{ --gold:#C89B3C; --white:#ffffff; --black:#111827; }

    /* ===== Sticky nav ===== */
    #site-nav{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.82);  border-bottom:1px solid #eee; }

    /* ===== Full-bleed hero ===== */
    .hero-bleed{position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;}
    .hero-full{position:relative; width:100%; min-height:56vh;}
    @media (min-width:768px){ .hero-full{min-height:64vh;} }
    .hero-img-full{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
    .hero-overlay{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.15) 65%,rgba(0,0,0,0) 100%);}
    .hero-content{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:2rem; z-index:1;}
    .hero-textbox{width:min(92vw, 60rem); text-align:center; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35);}
    .hero-title{font-weight:900;}
    .hero-sub{opacity:.95;}
    .skeleton{ position:relative; overflow:hidden; }
    .skeleton::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.08),rgba(0,0,0,.04)); transform:translateX(-100%); animation:sk 1.2s infinite;}
    @keyframes sk { to { transform: translateX(100%);} }

    /* ===== Controls (search/sort/featured) ===== */
    .seg{ display:inline-flex; border:1px solid #e5e7eb; border-radius:999px; overflow:hidden; }
    .seg button{ padding:.45rem .7rem; font-size:.85rem; }
    .seg button.active{ background:#fff6e5; color:var(--gold); font-weight:600; }
    .chip{
      --c:#e5e7eb; --bg:#fff; --tx:#111827;
      display:inline-flex; align-items:center; gap:.45rem; padding:.46rem .8rem;
      border:1px solid var(--c); border-radius:9999px; background:var(--bg); color:var(--tx);
      font-size:.9rem; cursor:pointer; user-select:none; transition:.18s;
    }
    .chip input{ display:none; }
    .chip.active{ border-color: var(--gold) !important; background:#fff1bf !important; color:#111 !important; }

    /* ===== Brand cards (match brand page feel) ===== */
    .brand-card{
      position:relative; border:1px solid #eee; border-radius:1rem; background:#fff; overflow:hidden;
      transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;
      box-shadow:0 1px 2px rgba(0,0,0,.04);
    }
    .brand-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.10); border-color:var(--gold); background:#fffefb; }
    .brand-media{ position:relative; width:100%; aspect-ratio: 4 / 3; background:#fff; }
    /* no cropping: logos fit fully; no gray bars */
    .brand-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; transition:transform .25s ease; background:#fff; }
    .brand-card:hover .brand-media img{ transform:scale(1.03); }
    .brand-body{ padding: .9rem 1rem 1.05rem; }
    .brand-name{ text-align:center; font-size:1.1rem; font-weight:800; line-height:1.2; }
    @media (min-width:768px){ .brand-name{ font-size:1.2rem; } }
    .brand-cta{ margin-top:.3rem; text-align:center; }
    .brand-cta .pill{ display:inline-block; font-size:.8rem; padding:.4rem .8rem; border-radius:9999px; border:1px solid #e5e7eb; opacity:.9; }

    /* Featured badge (green) */
    .featured-badge{
      position:absolute; top:.55rem; left:.55rem;
      display:inline-flex; align-items:center; gap:.35rem;
      background:#16a34a; color:#fff; font-weight:800; font-size:11px; line-height:1;
      padding:.28rem .5rem; border-radius:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.15);
    }
    .featured-badge svg{ width:12px; height:12px; }

    /* ===== Pagination ===== */
    .page-btn, .page-num{ border:1px solid #e5e7eb; border-radius:.6rem; background:#fff; padding:.5rem .75rem; font-size:14px; line-height:1; transition:background .15s,border-color .15s,color .15s; }
    .page-btn:hover, .page-num:hover{ background:#f5f5f5; }
    .page-btn[disabled]{ opacity:.5; cursor:not-allowed; }
    .page-num.active{ border-color:var(--gold); color:var(--gold); font-weight:600; }
    .page-ellipsis{ padding:0 .4rem; color:#9ca3af; }


    /* ===== Modal filter/sort controls ===== */
    .chip-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e5e7eb;border-radius:999px;padding:.6rem 1rem;background:#fff;font-weight:700;transition:.18s}
    .chip-btn:hover{border-color:var(--gold);background:#fff8e8}
    .chip-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;border-radius:999px;background:#111;color:#fff;font-size:.78rem;font-weight:800}
    .modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:3000}
    .modal-mask.active{display:block}
    .modal-panel{position:fixed;inset:0;display:none;place-items:center;z-index:3001;padding:1rem}
    .modal-panel.active{display:grid}
    .modal-card{width:min(92vw,520px);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.24);text-align:start}
    .modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee}
    .modal-body{padding:16px}
    .modal-foot{padding:12px 16px;border-top:1px solid #eee;display:flex;gap:8px;justify-content:flex-end}
    .field{display:grid;gap:6px;margin-bottom:12px}
    .field label{font-weight:800;font-size:.92rem}
    .field select,.field input{border:1px solid #e5e7eb;border-radius:12px;padding:.65rem .75rem;background:#fff}
    .filter-check{display:flex;align-items:center;gap:.6rem;border:1px solid #eee;border-radius:14px;padding:.8rem;background:#fff}
    .filter-check input{width:18px;height:18px;accent-color:var(--gold)}