
:root{
  --brand:#ffc400; /* yellow */
  --ink:#0b0b0b;   /* near-black */
  --bg:#0a0a0a;    /* page bg */
  --panel:#141414; /* card bg */
  --muted:#bdbdbd;
  --ok:#12b886;
  --danger:#e03131;
  --maxw: 1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#eee;font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;line-height:1.55}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
header.top{
  position:sticky;top:0;z-index:20;background:rgba(10,10,10,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #222
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:12px;background:var(--brand);color:#000;display:grid;place-items:center;font-weight:900}
.brandname{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:18px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid #333;background:#191919;color:#fff}
.btn:hover{background:#202020}
.btn.primary{background:var(--brand);color:#000;border-color:#000}
.btn.primary:hover{filter:brightness(0.95)}
.hero{padding:56px 0;background:linear-gradient(180deg, #0b0b0b 0%, #121212 100%);border-bottom:1px solid #1e1e1e}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
h1{font-size:2.2rem;margin:8px 0 10px;color:#fff}
.lead{color:#dcdcdc;font-size:1.05rem}
.pill{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:#222;border:1px solid #2a2a2a;color:#cfcfcf;font-size:.85rem}
.stats{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.stat{background:#101010;border:1px solid #222;border-radius:14px;padding:12px 14px;min-width:150px}
.stat b{color:#fff;font-size:1.2rem}
.card{background:var(--panel);border:1px solid #232323;border-radius:16px;padding:16px}
.section{padding:36px 0;border-bottom:1px solid #1f1f1f}
h2{color:#fff;margin:0 0 12px;font-size:1.5rem}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service{border-left:3px solid var(--brand)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.badge{padding:4px 10px;border-radius:999px;background:#222;border:1px solid #2a2a2a;color:#cfcfcf;font-size:.85rem}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.list{margin:0;padding-left:18px}
.muted{color:#bdbdbd}
.note{font-size:.9rem;color:#cfcfcf}
.hours{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{font-size:.92rem;color:#cfcfcf}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width: 960px){
  .grid,.services,.cols{grid-template-columns:1fr}
}

/* === Mobile nav === */
.hamburger{display:none;position:relative;gap:8px;flex-direction:column;justify-content:center;align-items:center;width:46px;height:40px;border-radius:10px;border:1px solid #333;background:#191919;color:#fff}
.hamburger .bar{display:block;width:22px;height:2px;background:#fff}
.menu{transition:max-height .25s ease, opacity .2s ease}
@media (max-width: 960px){
  .menu{position:absolute;right:22px;top:64px;background:#111;border:1px solid #2a2a2a;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;max-height:0;overflow:hidden;opacity:0}
  .menu.open{max-height:360px;opacity:1}
  .hamburger{display:flex}
  .nav{position:relative}
  .nav .menu a{padding:8px 10px;border-radius:8px}
  .nav .menu a:hover{background:#1b1b1b}
  .nav .menu:not(.open){display:block}
}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery .g{background:var(--panel);border:1px solid #232323;border-radius:12px;padding:10px}
.gallery img{display:block;width:100%;height:auto;border-radius:8px}
@media (max-width: 960px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.gallery{grid-template-columns:1fr}}

/* === Brand carousel === */
.brand-carousel{position:relative;background:var(--panel);border:1px solid #232323;border-radius:16px;padding:14px;margin-top:12px}
.brand-carousel h2{margin:0 0 10px}
.bc-viewport{overflow:hidden}
.bc-track{display:flex;gap:18px;will-change:transform;transition:transform .25s ease}
.bc-item{flex:0 0 auto;display:grid;place-items:center;width:160px;height:90px;border-radius:16px;background:transparent;border:none;position:relative;overflow:visible;padding:6px}
.bc-item::before{content:none !important;display:none !important}
.bc-item img{position:relative;z-index:1;max-height:48px;max-width:70%;object-fit:contain;filter:grayscale(1) brightness(1.05) contrast(1.1);opacity:1}
.bc-item img:hover{opacity:1;filter:grayscale(1) brightness(1.05) contrast(1.1)}
.bc-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:8px}
.bc-btn{width:38px;height:38px;border-radius:999px;border:1px solid #2a2a2a;background:#151515;color:#fff;display:grid;place-items:center}
.bc-prev{left:8px}
.bc-next{right:8px}
@media (max-width:960px){.bc-item{width:120px;height:72px}}
@media (max-width:560px){.bc-item{width:110px;height:68px}}

/* Uniform Grid Gallery (16:9 cards) */
.gg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.gg-item{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid #2a2a2a;background:#101010;aspect-ratio:16/9}
.gg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease, opacity .2s ease}
.gg-item:hover img{transform:scale(1.03)}
/* Fullscreen Modal */
.gg-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1000}
.gg-modal.open{display:flex}
.gg-modal img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.gg-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:999px;border:1px solid #444;background:#151515;color:#fff;font-size:22px}
.gg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid #444;background:#151515;color:#fff;font-size:20px}
.gg-prev{left:20px}.gg-next{right:20px}
.gg-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.45);padding:4px 10px;border-radius:999px;color:#eaeaea;font-size:.85rem;border:1px solid #444}
.mini-link{display:inline-flex;gap:6px;align-items:center;font-size:.95rem;color:var(--brand)}
.mini-link:hover{text-decoration:underline}

/* Footer (3 rows) */
.footer{padding:24px 0;background:#0c0c0c}
.footer .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.footer-row{padding:10px 0;border-top:1px solid #222}
.footer-row:first-child{border-top:none}
.f-title{color:#fff;font-weight:700;margin:0 0 8px}
.f-links{display:flex;flex-wrap:wrap;gap:10px}
.f-links a{color:#cfcfcf}
.foot-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.foot-line a{color:var(--brand)}
/* === Modal (reusable) === */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:1000}
.modal.open{display:flex}
.modal-dialog{width:min(560px,92vw);background:#141414;border:1px solid #2a2a2a;border-radius:14px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h3{margin:0 0 8px;color:#fff}
.modal p{margin:6px 0 0;color:#d9d9d9}
.modal-actions{margin-top:14px;display:flex;gap:10px;justify-content:flex-end}
.modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:999px;border:1px solid #444;background:#151515;color:#fff;font-size:20px}
.breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.95rem;color:#cfcfcf;margin:10px 0 0}
.breadcrumbs a{color:var(--brand);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span[aria-hidden="true"]{opacity:.6}

