:root{
  --teal:#0F766E; --teal-dark:#115E59; --amber:#F59E0B;
  --dark:#111827; --gray-50:#F9FAFB; --gray-100:#F3F4F6;
  --gray-200:#E5E7EB; --gray-400:#9CA3AF; --gray-600:#4B5563;
  --gray-800:#1F2937; --white:#fff; --radius:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 12px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--dark);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{position:static;background:var(--teal);color:#fff;padding:8px}

/* Header */
.site-header{border-bottom:1px solid var(--gray-200);background:#fff;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;padding:14px 20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--dark)}
.logo-mark{background:var(--teal);color:#fff;width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;font-weight:800}
.logo-text .dot{color:var(--amber)}
.header-search{flex:1;min-width:220px;display:flex}
.header-search input{flex:1;padding:10px 14px;border:1px solid var(--gray-200);
  border-radius:var(--radius) 0 0 var(--radius);font:inherit;outline:none}
.header-search input:focus{border-color:var(--teal)}
.header-search button{padding:0 16px;background:var(--teal);color:#fff;border:0;
  border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;font-size:16px}
.header-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.header-nav a{color:var(--gray-800);font-weight:500}
.btn{display:inline-block;padding:9px 16px;border-radius:8px;font-weight:600;
  text-decoration:none;cursor:pointer;border:1px solid transparent;font:inherit;transition:.15s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dark);text-decoration:none}
.btn-outline{border-color:var(--gray-200);color:var(--gray-800)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);text-decoration:none}

/* Hero */
.hero{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;padding:60px 0}
.hero-inner{text-align:center}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 12px;letter-spacing:-.02em}
.hero p{opacity:.9;margin:0 0 24px;font-size:1.05rem}
.hero-search{display:flex;gap:8px;max-width:560px;margin:0 auto}
.hero-search input{flex:1;padding:14px 16px;border:0;border-radius:8px;font:inherit;font-size:1rem}

/* Sections */
.section{padding:48px 20px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:20px;flex-wrap:wrap;gap:8px}
.section-head h2{margin:0;font-size:1.4rem}
.section-head a{font-weight:500}

/* Business grid */
.biz-grid{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.biz-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  overflow:hidden;transition:.15s;position:relative}
.biz-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.biz-card__img{display:block;aspect-ratio:16/10;background:var(--gray-100);position:relative;overflow:hidden}
.biz-card__img img{width:100%;height:100%;object-fit:cover}
.biz-card__body{padding:14px}
.biz-card__title{margin:0 0 6px;font-size:1.05rem}
.biz-card__meta{color:var(--gray-600);font-size:.85rem;margin:0 0 8px}
.biz-card__desc{color:var(--gray-600);font-size:.9rem;margin:0 0 8px}
.biz-card__phone{font-weight:600;color:var(--teal);font-size:.9rem}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.badge-featured{background:var(--amber);color:#78350F;position:absolute;top:10px;left:10px}
.badge-verified{background:#DBEAFE;color:#1E40AF;position:absolute;top:10px;right:10px}

/* Category / city tiles */
.cat-grid,.city-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-tile,.city-tile{padding:16px;border:1px solid var(--gray-200);border-radius:var(--radius);
  background:#fff;transition:.15s}
.cat-tile:hover,.city-tile:hover{border-color:var(--teal);box-shadow:var(--shadow-sm);text-decoration:none}
.cat-name,.city-name{display:block;font-weight:600;color:var(--dark)}
.cat-count,.city-count{display:block;color:var(--gray-600);font-size:.82rem;margin-top:4px}

/* Page head */
.page-head{margin:32px 0 24px;border-bottom:1px solid var(--gray-200);padding-bottom:16px}
.page-head h1{margin:0 0 4px;font-size:1.8rem;letter-spacing:-.02em}
.page-head .lede{color:var(--gray-600);margin:4px 0}
.page-head .count{color:var(--gray-600);font-size:.9rem;margin:8px 0 0}

/* Breadcrumbs */
.breadcrumbs{margin-top:20px;font-size:.88rem;color:var(--gray-600)}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--gray-400)}

/* Detail page */
.biz-detail{margin:24px 0 60px}
.biz-hero{height:280px;background-size:cover;background-position:center;border-radius:var(--radius);position:relative}
.biz-hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.35));border-radius:var(--radius)}
.biz-head{display:flex;gap:20px;align-items:flex-start;margin-top:24px;flex-wrap:wrap}
.biz-logo{width:84px;height:84px;border-radius:12px;object-fit:cover;border:1px solid var(--gray-200);background:#fff}
.biz-head h1{margin:0 0 4px;font-size:1.9rem}
.biz-tagline{color:var(--gray-600);margin:0 0 6px}
.biz-meta{color:var(--gray-600);margin:0 0 8px;font-size:.95rem}
.biz-badges{display:flex;gap:8px}
.biz-grid-2{display:grid;gap:32px;margin-top:32px;grid-template-columns:2fr 1fr}
@media(max-width:800px){.biz-grid-2{grid-template-columns:1fr}}
.biz-section{margin-bottom:28px}
.biz-section h2{font-size:1.15rem;margin:0 0 12px}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{padding:8px 0;border-bottom:1px solid var(--gray-100);display:flex;justify-content:space-between;gap:12px}
.contact-list span{color:var(--gray-600);font-size:.9rem}
.biz-gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.biz-gallery img{width:100%;height:120px;object-fit:cover;border-radius:8px}

/* Flash */
.flash-stack{margin:16px 0}
.flash{padding:12px 16px;border-radius:8px;margin:8px 0;font-size:.95rem}
.flash--success{background:#ECFDF5;color:#065F46;border-left:4px solid #10B981}
.flash--error{background:#FEF2F2;color:#991B1B;border-left:4px solid #EF4444}
.flash--info{background:#EFF6FF;color:#1E40AF;border-left:4px solid #3B82F6}
.flash--warning{background:#FFFBEB;color:#92400E;border-left:4px solid #F59E0B}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin:32px 0;flex-wrap:wrap}
.page-btn{display:inline-block;min-width:38px;text-align:center;padding:8px 10px;
  border:1px solid var(--gray-200);border-radius:8px;color:var(--dark);font-weight:500}
.page-btn:hover{border-color:var(--teal);text-decoration:none}
.page-btn.is-active{background:var(--teal);color:#fff;border-color:var(--teal)}
.page-btn.is-disabled{opacity:.4}
.page-gap{padding:8px 4px;color:var(--gray-400)}

/* Empty */
.empty{color:var(--gray-600);text-align:center;padding:32px}

/* Footer */
.site-footer{background:var(--gray-50);border-top:1px solid var(--gray-200);margin-top:64px;padding:40px 0}
.footer-grid{display:grid;gap:32px;grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-grid h3,.footer-grid h4{margin:0 0 12px}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.footer-grid a{color:var(--gray-600)}
.footer-grid .small{color:var(--gray-600);font-size:.85rem}

/* Error */
.error-page{padding:80px 0;text-align:center}
.error-page h1{font-size:5rem;margin:0;color:var(--teal)}
</style>