:root {
  --primary: #1459d9;
  --primary-dark: #0e3f9d;
  --primary-soft: #edf3ff;
  --teal: #087f75;
  --teal-soft: #e9f8f5;
  --green: #118a50;
  --green-soft: #eaf8f0;
  --red: #c8322b;
  --red-soft: #fff1f0;
  --amber: #9b6400;
  --amber-soft: #fff6dd;
  --ink: #132238;
  --muted: #66758a;
  --line: #e4eaf1;
  --surface: #ffffff;
  --background: #f6f8fb;
  --shadow-xs: 0 2px 8px rgba(19, 34, 56, .04);
  --shadow-sm: 0 8px 24px rgba(19, 34, 56, .07);
  --shadow-md: 0 18px 46px rgba(19, 34, 56, .12);
  --radius-sm: 12px;
  --radius: 17px;
  --radius-lg: 24px;
  --header-h: 68px;
  --bottom-h: 72px;
  font-family: "Anek Gujarati", "Noto Sans Gujarati", "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--background);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom));
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, dialog:focus-visible {
  outline: 3px solid rgba(20, 89, 217, .26);
  outline-offset: 2px;
}
button:active:not(:disabled), a:active { transform: scale(.985); }
button:disabled { opacity: .42; cursor: not-allowed; }

.skip-link {
  position: fixed;
  z-index: 9999;
  top: -80px;
  left: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fff;
  color: var(--primary-dark);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Compact, uncluttered top bar */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(228, 234, 241, .9);
  backdrop-filter: blur(16px);
}
.header-inner {
  min-height: var(--header-h);
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.brand-logo-shell {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 5px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border: 1px solid #dbe7ff;
}
.brand-logo { width: 34px; height: 34px; display: block; }
.brand-copy { min-width: 0; display: grid; gap: 0; }
.brand-copy strong {
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-copy small {
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 174px;
}
.header-actions { display: flex; align-items: center; gap: 7px; }
.icon-button, .language-compact {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.icon-button {
  width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-button svg { width: 20px; height: 20px; }
.language-compact {
  position: relative;
  min-width: 58px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--primary-dark);
}
.language-symbol { font-size: .78rem; font-weight: 800; }
.language-compact select {
  width: 28px;
  min-height: 40px;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--primary-dark);
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.offline-banner {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 55;
  padding: 8px 14px;
  border-bottom: 1px solid #f1d995;
  background: #fff7dc;
  color: #6d4d00;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
}

.app-main { max-width: 1040px; min-height: calc(100vh - var(--header-h)); margin: 0 auto; }
.screen-shell { padding: 14px 13px 30px; }
.screen-header {
  margin: 4px 0 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.screen-header h1, .screen-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.screen-header p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }

/* Home intro: helpful, calm and search-first */
.hero {
  position: relative;
  overflow: hidden;
  padding: 18px 15px 15px;
  border: 1px solid #e1e9f5;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #ffffff 0%, #f3f7ff 100%);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -78px;
  top: -92px;
  border-radius: 50%;
  background: rgba(20, 89, 217, .06);
}
.hero-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .71rem;
  font-weight: 750;
}
.hero-kicker svg { width: 15px; height: 15px; }
.hero h1 {
  position: relative;
  z-index: 1;
  margin: 10px 0 3px;
  font-size: clamp(1.48rem, 6.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.search-box {
  position: relative;
  z-index: 1;
  min-height: 56px;
  margin-top: 14px;
  padding: 0 11px;
  border: 1.5px solid #d8e2ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(19, 34, 56, .06);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-box:focus-within {
  border-color: #8baded;
  box-shadow: 0 0 0 4px rgba(20, 89, 217, .08), 0 9px 24px rgba(19, 34, 56, .07);
}
.search-box svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--primary); }
.search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: .9rem;
}
.search-box input::placeholder { color: #8490a1; }
.search-clear {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0f3f7;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.search-clear svg { width: 17px; height: 17px; }

.section { margin-top: 20px; }
.section-title-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-title-row h2 { margin: 0; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.section-title-row p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.text-button {
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* Four clear shortcuts instead of a crowded strip */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.quick-action {
  min-height: 76px;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.quick-action:hover { border-color: #c9d8eb; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quick-action .qa-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.quick-action span:last-child {
  max-width: 76px;
  font-size: .67rem;
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
}
.quick-action.recent-wide {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 5px 12px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}
.quick-action.recent-wide .qa-icon { width: 34px; height: 34px; flex: 0 0 34px; }
.quick-action.recent-wide span:last-child { max-width: none; font-size: .76rem; text-align: left; }

.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.category-card {
  min-height: 72px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.category-card:hover { transform: translateY(-1px); border-color: #cbd8ea; box-shadow: var(--shadow-sm); }
.category-icon {
  width: 41px;
  height: 41px;
  border-radius: 13px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 1.16rem;
}
.category-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8rem;
  line-height: 1.18;
}
.category-card small { color: var(--muted); font-size: .66rem; }
.count-pill {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f2f5f9;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: .67rem;
  font-weight: 750;
}

.business-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.business-card {
  position: relative;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.business-card:hover { transform: translateY(-1px); border-color: #ccd9e8; box-shadow: var(--shadow-sm); }
.business-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 40px;
  align-items: start;
  gap: 10px;
}
.business-avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #dce7f7;
  border-radius: 15px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}
.business-avatar img { width: 100%; height: 100%; object-fit: cover; }
.business-title { min-width: 0; padding-top: 1px; }
.business-title h3 {
  margin: 0 0 4px;
  font-size: .96rem;
  line-height: 1.24;
  letter-spacing: -.005em;
}
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: .7rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: .59rem;
  font-weight: 800;
}
.badge-featured { background: var(--amber-soft); color: var(--amber); }
.badge-verified { background: var(--primary-soft); color: var(--primary-dark); }
.badge-open { background: var(--green-soft); color: var(--green); }
.badge-closed { background: var(--red-soft); color: var(--red); }
.favourite-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: #7e8a9a;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.favourite-button svg { width: 20px; height: 20px; }
.favourite-button.active {
  border-color: #ffd4d1;
  background: var(--red-soft);
  color: var(--red);
  animation: heartPop .24s ease;
}
@keyframes heartPop { 50% { transform: scale(1.13); } }
.business-summary { margin-top: 10px; display: grid; gap: 5px; color: #516176; font-size: .75rem; line-height: 1.35; }
.info-row { display: flex; align-items: flex-start; gap: 7px; }
.info-row svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: var(--primary); }
.info-row span { overflow-wrap: anywhere; }

/* Large and obvious action buttons, especially Direction */
.card-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.action-button {
  min-height: 48px;
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8fafc;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}
.action-button svg { width: 17px; height: 17px; flex: 0 0 17px; }
.action-button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.action-button.whatsapp { border-color: #caead8; background: var(--green-soft); color: #0b7441; }
.action-button.direction { border-color: #bcd1fa; background: var(--primary-soft); color: var(--primary-dark); }
.action-button.unavailable { opacity: .52; }
.card-details-button {
  width: 100%;
  min-height: 43px;
  margin-top: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .73rem;
  font-weight: 800;
  cursor: pointer;
}
.card-details-button svg { width: 17px; height: 17px; }
.remove-recent { margin-top: 7px; padding: 6px 0; border: 0; background: transparent; color: var(--red); font-size: .7rem; font-weight: 750; cursor: pointer; }

.filter-panel {
  margin: 11px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.field { display: grid; gap: 4px; }
.field label { color: var(--muted); font-size: .68rem; font-weight: 700; }
.field select, .field input {
  width: 100%;
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: .78rem;
}
.filter-toggles { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-chip {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
}
.toggle-chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.filter-footer { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-count { color: var(--muted); font-size: .77rem; font-weight: 700; }
.clear-button { min-height: 38px; padding: 0 5px; border: 0; background: transparent; color: var(--red); font-size: .72rem; font-weight: 800; cursor: pointer; }
.load-more {
  width: 100%;
  min-height: 49px;
  margin-top: 13px;
  border: 1px solid #c9d7e8;
  border-radius: 14px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
}

.empty-state {
  padding: 26px 17px;
  border: 1px dashed #c8d4e3;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  border-radius: 19px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 1.55rem;
}
.empty-state h3 { margin: 0 0 5px; font-size: 1rem; }
.empty-state p { max-width: 420px; margin: 0 auto 13px; color: var(--muted); font-size: .8rem; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}
.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button.soft { border-color: #d7e4fb; background: var(--primary-soft); }
.button.danger-soft { border-color: #ffd7d4; background: var(--red-soft); color: var(--red); }

.more-grid { display: grid; gap: 10px; }
.more-card { padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-xs); }
.more-card h2 { margin: 0 0 5px; font-size: .96rem; }
.more-card p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.55; }
.more-actions { margin-top: 11px; display: grid; gap: 7px; }
.more-action {
  min-height: 48px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.more-action .ma-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.more-action span:nth-child(2) { flex: 1; font-size: .78rem; font-weight: 750; }
.more-action svg { width: 17px; height: 17px; color: var(--muted); }
.language-buttons { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }

/* Minimal fixed bottom navigation */
.bottom-nav {
  position: fixed;
  z-index: 70;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  box-shadow: 0 -8px 24px rgba(19, 34, 56, .04);
}
.nav-item {
  min-height: 58px;
  padding: 5px 2px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #778496;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  cursor: pointer;
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item span { font-size: .61rem; font-weight: 700; line-height: 1; }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-search svg { width: 22px; height: 22px; }

/* Business detail */
.business-dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--background);
  color: var(--ink);
}
.business-dialog::backdrop { background: rgba(12, 24, 42, .48); backdrop-filter: blur(3px); }
.detail-page { min-height: 100%; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.detail-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top)) 13px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-topbar strong { font-size: .87rem; }
.detail-close, .detail-fav {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.detail-close svg, .detail-fav svg { width: 20px; height: 20px; }
.detail-hero {
  padding: 24px 18px 21px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: center;
}
.detail-avatar {
  width: 82px;
  height: 82px;
  margin: 0 auto 11px;
  overflow: hidden;
  border: 1px solid #dce7f7;
  border-radius: 24px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  font-size: 2.1rem;
}
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero h1 { margin: 0; font-size: 1.36rem; line-height: 1.2; }
.detail-hero p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.detail-actions {
  padding: 12px 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.detail-action {
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--primary-dark);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}
.detail-action svg { width: 19px; height: 19px; }
.detail-action.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.detail-action.whatsapp { border-color: #c9ead7; background: var(--green-soft); color: #0b7441; }
.detail-action.direction-main { border-color: #bcd1fa; background: var(--primary-soft); color: var(--primary-dark); }
.detail-action.unavailable { opacity: .5; }
.detail-content { padding: 0 13px; display: grid; gap: 10px; }
.detail-section { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-xs); }
.detail-section h2 { margin: 0 0 10px; font-size: .92rem; }
.detail-list { display: grid; gap: 10px; }
.detail-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: start; }
.detail-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
}
.detail-row-icon svg { width: 16px; height: 16px; }
.detail-row small { display: block; margin-bottom: 1px; color: var(--muted); font-size: .64rem; }
.detail-row div:last-child { font-size: .79rem; line-height: 1.45; overflow-wrap: anywhere; }
.detail-links { display: grid; gap: 7px; }
.detail-link {
  min-height: 45px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 750;
}
.detail-link svg { width: 17px; height: 17px; }

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom));
  min-width: 180px;
  max-width: calc(100vw - 28px);
  padding: 11px 15px;
  border-radius: 12px;
  background: #17263b;
  color: #fff;
  box-shadow: var(--shadow-md);
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.skeleton-block, .skeleton-card { position: relative; overflow: hidden; background: #e9eef5; }
.skeleton-block::after, .skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: shimmer 1.2s infinite;
}
.hero-skeleton { height: 188px; border-radius: 24px; }
.skeleton-grid { margin-top: 14px; }
.skeleton-card { height: 170px; border-radius: 18px; }
@keyframes shimmer { to { transform: translateX(100%); } }
.noscript { margin: 18px; padding: 14px; border: 1px solid #f0d486; border-radius: 13px; background: #fff6d9; }

@media (min-width: 700px) {
  :root { --bottom-h: 76px; }
  .screen-shell { padding: 22px 20px 38px; }
  .brand-copy small { max-width: none; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav {
    left: 50%;
    right: auto;
    bottom: 10px;
    width: min(660px, calc(100% - 26px));
    height: 72px;
    padding-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 21px;
    transform: translateX(-50%);
    box-shadow: var(--shadow-md);
  }
  .business-dialog {
    width: min(700px, calc(100% - 28px));
    height: min(91vh, 900px);
    margin: auto;
    border-radius: 24px;
    overflow: hidden;
  }
  .detail-page { max-height: 91vh; overflow-y: auto; }
  .detail-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 355px) {
  .brand-copy small { max-width: 130px; }
  .language-compact { min-width: 52px; }
  .quick-action span:last-child { font-size: .62rem; }
  .action-button { gap: 4px; font-size: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   PREMIUM SEARCH + MOTION REFINEMENTS (v3)
   ========================================================== */
.app-header { box-shadow: 0 1px 0 rgba(19,34,56,.02); }
.brand-logo-shell { animation: logoArrive .48s cubic-bezier(.2,.85,.25,1) both; }
.brand-logo-shell::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  right: -1px;
  bottom: -1px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #18a366;
}
.brand-logo-shell { position: relative; }

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, rgba(20,89,217,.09), transparent 29%),
    linear-gradient(145deg, #fff 0%, #f4f8ff 100%);
  animation: surfaceIn .38s ease both;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 125px;
  height: 125px;
  left: -78px;
  bottom: -86px;
  border-radius: 50%;
  background: rgba(8,127,117,.055);
  animation: softFloat 7s ease-in-out infinite alternate;
}
.hero-kicker svg { animation: pinBounce 2.4s ease-in-out infinite; transform-origin: center bottom; }

.hero-search { min-height: 58px; }
.search-box input { caret-color: var(--primary); }
.search-box input::-webkit-search-cancel-button { display: none; }
.voice-search-button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.voice-search-button svg { width: 18px; height: 18px; }
.voice-search-button:hover { transform: translateY(-1px); }
.voice-search-button.listening {
  background: var(--red);
  color: #fff;
  animation: listeningPulse 1s ease-in-out infinite;
}

.quick-search-wrap { position: relative; z-index: 1; margin-top: 10px; }
.quick-search-wrap > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 750;
}
.quick-search-chips, .recent-searches {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 1px 1px 3px;
  scrollbar-width: none;
}
.quick-search-chips::-webkit-scrollbar, .recent-searches::-webkit-scrollbar { display: none; }
.quick-search-chips button, .recent-searches button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #dce6f5;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: var(--primary-dark);
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.quick-search-chips button:active, .recent-searches button:active { transform: scale(.96); }
.recent-searches { margin-top: 5px; }
.recent-searches button { color: var(--muted); background: #f8fafc; }

.search-screen { padding-top: 10px; }
.compact-screen-header { margin-bottom: 9px; }
.search-sticky-wrap {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top) + 5px);
  z-index: 35;
  margin: 0 -5px;
  padding: 5px;
  border-radius: 19px;
  background: rgba(246,248,251,.94);
  backdrop-filter: blur(14px);
}
.directory-search-box {
  margin-top: 0;
  min-height: 56px;
  box-shadow: 0 10px 27px rgba(19,34,56,.085);
}
.search-tools {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 8px;
}
.search-tools .result-count { font-size: .78rem; }
.filter-button {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #d8e2ef;
  border-radius: 13px;
  background: #fff;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .71rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.filter-button svg { width: 17px; height: 17px; }
.filter-button b {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .61rem;
}
.filter-button.has-filters { border-color: #b9cdf5; background: var(--primary-soft); }
.active-filter-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: -1px 0 9px;
  padding: 1px 0 3px;
  scrollbar-width: none;
}
.active-filter-chips::-webkit-scrollbar { display: none; }
.active-filter-chips button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #c9daf9;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: .67rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}
.filter-panel.open { animation: filterReveal .22s ease both; }
.inline-toggles { margin-top: 0; }
.filter-footer > span { color: var(--muted); font-size: .7rem; font-weight: 700; }

.search-suggestions {
  position: absolute;
  z-index: 80;
  top: calc(100% - 1px);
  left: 5px;
  right: 5px;
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(19,34,56,.16);
  animation: suggestionsIn .16s ease both;
}
.suggestion-label {
  padding: 9px 12px 6px;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.search-suggestion {
  width: 100%;
  min-height: 54px;
  padding: 7px 10px;
  border: 0;
  border-top: 1px solid #edf1f6;
  background: #fff;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 18px;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}
.search-suggestion:hover, .search-suggestion:focus-visible { background: #f7faff; }
.suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
}
.search-suggestion span:nth-child(2) { min-width: 0; }
.search-suggestion strong, .search-suggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion strong { font-size: .76rem; }
.search-suggestion small { color: var(--muted); font-size: .64rem; }
.search-suggestion > svg { width: 16px; color: var(--muted); }

.search-results-content { min-height: 180px; }
.search-results-content.results-enter { animation: resultsRefresh .18s ease both; }
.business-card {
  animation: cardRise .34s cubic-bezier(.2,.75,.3,1) both;
  animation-delay: var(--card-delay, 0ms);
}
.category-card, .quick-action, .more-card { animation: cardRise .32s ease both; }
.action-button, .card-details-button, .quick-action, .category-card, .more-action, .nav-item {
  position: relative;
  overflow: hidden;
}
.action-button::after, .card-details-button::after, .quick-action::after, .category-card::after, .more-action::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.action-button:active::after, .card-details-button:active::after, .quick-action:active::after, .category-card:active::after, .more-action:active::after {
  opacity: .08;
  transform: translate(-50%,-50%) scale(3.2);
  transition-duration: .08s;
}
.action-button.direction {
  border-color: #a9c4f8;
  background: linear-gradient(145deg, #edf4ff, #e5efff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.action-button.direction svg { animation: directionNudge 2.8s ease-in-out infinite; }
.nav-item { transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav-item.active { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(20,89,217,.08); }
.nav-item.active svg { animation: navPop .24s ease; }

.business-dialog[open] { animation: dialogFade .2s ease both; }
.business-dialog[open] .detail-page { animation: detailSlide .28s cubic-bezier(.2,.78,.25,1) both; }
.toast.show { animation: toastPop .2s ease both; }

@keyframes logoArrive { from { opacity: 0; transform: scale(.78) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes surfaceIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes softFloat { to { transform: translate(14px,-10px) scale(1.08); } }
@keyframes pinBounce { 0%,75%,100% { transform: translateY(0); } 82% { transform: translateY(-3px); } 90% { transform: translateY(0); } }
@keyframes listeningPulse { 50% { box-shadow: 0 0 0 7px rgba(200,50,43,.13); transform: scale(1.04); } }
@keyframes filterReveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes suggestionsIn { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes resultsRefresh { from { opacity: .55; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes cardRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes directionNudge { 0%,80%,100% { transform: translateX(0); } 88% { transform: translateX(2px); } 94% { transform: translateX(-1px); } }
@keyframes navPop { 50% { transform: scale(1.12); } }
@keyframes dialogFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes detailSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes toastPop { from { opacity: 0; transform: translate(-50%,12px) scale(.96); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }

@media (max-width: 430px) {
  .screen-header.compact-screen-header h1 { font-size: 1.3rem; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================
   PRANTIJ CONNECT V5 — PREMIUM MOBILE DIRECTORY
   ========================================================== */
.hero-v5{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#0f54d7 0%,#1267e6 58%,#0d8b87 145%);box-shadow:0 18px 45px rgba(20,89,217,.22)}
.hero-v5>*:not(.hero-orb){position:relative;z-index:2}.hero-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.22;pointer-events:none;animation:orbFloat 9s ease-in-out infinite}.hero-orb-one{width:190px;height:190px;background:#fff;right:-75px;top:-75px}.hero-orb-two{width:130px;height:130px;background:#7ff3df;left:-55px;bottom:-55px;animation-delay:-3s}@keyframes orbFloat{50%{transform:translate3d(0,14px,0) scale(1.06)}}
.hero-mini-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.hero-mini{min-height:46px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#fff;border-radius:14px;padding:8px 6px;font:inherit;font-weight:650;display:flex;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(8px);transition:.18s ease}.hero-mini:active{transform:scale(.96);background:rgba(255,255,255,.23)}.emergency-mini span{animation:softPulse 2.2s ease-in-out infinite}@keyframes softPulse{50%{transform:scale(1.14);opacity:.72}}
.compact-category-grid .category-card{min-height:82px}.area-section{overflow:hidden}.area-scroll{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none}.area-scroll::-webkit-scrollbar{display:none}.area-chip{scroll-snap-align:start;flex:0 0 auto;min-width:142px;max-width:205px;min-height:62px;border:1px solid #e4eaf4;background:#fff;border-radius:17px;padding:10px 12px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;text-align:left;color:#12213f;box-shadow:0 8px 22px rgba(21,45,88,.07);font:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.area-chip svg{width:20px;height:20px;color:#1459d9}.area-chip strong{font-size:.91rem;line-height:1.25}.area-chip small{width:25px;height:25px;border-radius:999px;background:#eef4ff;color:#1459d9;display:grid;place-items:center;font-size:.72rem;font-weight:800}.area-chip:active{transform:scale(.97);border-color:#8cb2ff}.category-area-top{margin-top:0;padding-top:0}
.home-help-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;background:linear-gradient(135deg,#fff,#f5f9ff);border:1px solid #dfe9fa;border-radius:22px;padding:16px}.help-card-icon{width:48px;height:48px;border-radius:15px;background:#eaf2ff;color:#1459d9;display:grid;place-items:center}.help-card-icon svg{width:24px}.home-help-card h2{font-size:1.02rem;margin:0 0 3px}.home-help-card p{font-size:.82rem;color:#66738c;margin:0}
.premium-card{overflow:hidden;border-color:#e4eaf3;box-shadow:0 9px 28px rgba(20,42,82,.075);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}.premium-card:active{transform:scale(.988)}.premium-card:hover{border-color:#cedbf1;box-shadow:0 14px 34px rgba(20,42,82,.11)}
.badge svg{width:12px;height:12px}.badge-unverified{background:#f3f5f8;color:#6c7688;border:1px solid #e0e5ec}.badge-phone{background:#eaf9f2;color:#08754f}.badge-closing{background:#fff5df;color:#976100}.visit-note{display:flex;align-items:center;gap:7px;margin:2px 0 12px;color:#7a8497;font-size:.76rem}.visit-note svg{width:15px;height:15px;flex:0 0 auto}.three-actions{grid-template-columns:repeat(3,1fr)}.action-button.maps{background:#eff5ff;color:#1556c6;border-color:#d8e5fb}.card-footer-actions{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;margin-top:9px}.location-request-button,.card-details-button.compact{min-height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-weight:700;font-size:.85rem}.location-request-button{border:1px solid #caeee0;background:#effbf6;color:#087c55}.location-request-button svg{width:18px;height:18px}.card-details-button.compact{margin:0;border:1px solid #e0e6ef;background:#fff;color:#1c2b47}.card-details-button.compact svg{width:17px}
.detail-badges{justify-content:center;margin-top:9px;flex-wrap:wrap}.detail-actions-v5{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-action.maps-action{background:#edf4ff;color:#1459d9;border-color:#d4e3fc}.detail-action.location-action{background:#effbf6;color:#087c55;border-color:#ccecdf}.detail-action.qr-action{background:#f3f0ff;color:#6543bc;border-color:#e0d8fa}.detail-visit-note{display:flex;align-items:center;gap:9px;background:#f8fafc;border:1px solid #e6eaf0;border-radius:14px;padding:11px 13px;color:#657087;font-size:.84rem;margin-bottom:14px}.detail-visit-note svg{width:18px}.verification-panel{display:flex;align-items:center;gap:12px;padding:13px;border-radius:16px;background:#f7f9fd;border:1px solid #e5eaf3}.verification-icon{width:42px;height:42px;border-radius:13px;background:#eaf2ff;color:#1459d9;display:grid;place-items:center}.verification-icon svg{width:22px}.verification-panel p{margin:3px 0 0;color:#768096;font-size:.82rem}.listing-help p{color:#68758d;font-size:.85rem}.listing-help-actions{display:grid;grid-template-columns:1fr;gap:9px}.listing-help-actions .button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.listing-help-actions svg{width:18px}
.owner-tools{border:1px solid #dbe8ff;background:linear-gradient(145deg,#fff,#f6f9ff)}.owner-tools-head{display:flex;gap:12px;align-items:center;margin-bottom:13px}.owner-tools-head>span{width:45px;height:45px;border-radius:14px;background:#eaf2ff;color:#1459d9;display:grid;place-items:center}.owner-tools-head svg{width:23px}.owner-tools-head h2,.owner-tools-head p{margin:0}.owner-tools-head p{color:#71809a;font-size:.82rem;margin-top:2px}
.qr-dialog{border:0;padding:0;background:transparent;width:min(94vw,430px);max-width:none}.qr-dialog::backdrop{background:rgba(8,18,39,.58);backdrop-filter:blur(5px)}.qr-sheet{background:#fff;border-radius:25px;padding:18px;box-shadow:0 25px 80px rgba(5,18,46,.32);animation:sheetUp .28s cubic-bezier(.2,.8,.2,1)}@keyframes sheetUp{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}.qr-sheet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.qr-sheet-top small{color:#77839a}.qr-sheet-top h2{font-size:1.14rem;margin:2px 0 0}.business-qr-canvas{width:254px;height:254px;margin:18px auto 11px;padding:17px;border-radius:21px;background:#fff;display:grid;place-items:center;border:1px solid #e1e7f0;box-shadow:0 12px 32px rgba(20,42,82,.1)}.business-qr-canvas img,.business-qr-canvas canvas{max-width:220px!important;max-height:220px!important}.qr-help{text-align:center;margin:0 0 8px;color:#6d7890;font-size:.82rem}.qr-link-box{background:#f5f7fa;border:1px solid #e4e8ef;border-radius:12px;padding:10px;font-size:.72rem;color:#5e6a80;word-break:break-all}.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.qr-actions .button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px}.qr-actions .button:last-child{grid-column:1/-1}.qr-actions svg{width:17px}.qr-fallback,.qr-loading{text-align:center;color:#6c7890;font-size:.86rem;padding:14px}
.search-box:focus-within{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(111,160,255,.2),0 16px 36px rgba(6,36,95,.17)}.category-card .category-icon{transition:transform .24s cubic-bezier(.2,.8,.2,1)}.category-card:active .category-icon{transform:scale(.88) rotate(-5deg)}.favourite-button.active{animation:heartPop .32s cubic-bezier(.2,.9,.3,1.4)}@keyframes heartPop{50%{transform:scale(1.28)}}
@media(max-width:480px){.home-help-card{grid-template-columns:44px 1fr}.home-help-card .button{grid-column:1/-1}.business-card .meta-line{gap:5px}.badge-unverified{display:none}.action-button span{font-size:.76rem}.card-footer-actions{grid-template-columns:1fr 1fr}.qr-sheet{border-radius:23px}.business-qr-canvas{width:238px;height:238px}.business-qr-canvas img,.business-qr-canvas canvas{max-width:206px!important;max-height:206px!important}}
@media(prefers-reduced-motion:reduce){.hero-orb,.emergency-mini span{animation:none!important}}
/* Search suggestions stay in the document flow so they never cover business action buttons. */
.search-suggestions{position:relative;top:auto;left:auto;right:auto;margin-top:7px;max-height:230px;overflow-y:auto;overscroll-behavior:contain}


/* V6 visual contrast refinements */
.hero-v5{
  background:linear-gradient(140deg,#0b4fc8 0%,#1269df 58%,#087d91 120%);
  border-color:rgba(255,255,255,.16);
}
.hero-v5 h1{color:#ffffff;text-shadow:0 2px 16px rgba(5,29,80,.18)}
.hero-v5>p{color:rgba(255,255,255,.88);font-weight:560}
.hero-v5 .hero-kicker{background:rgba(255,255,255,.96);color:#0b4fc8;box-shadow:0 6px 18px rgba(4,31,84,.13)}
.hero-v5 .hero-search{border-color:rgba(255,255,255,.66);box-shadow:0 9px 24px rgba(5,30,78,.16)}
.hero-v5 .hero-search input{color:#10213f;font-weight:560}
.hero-v5 .hero-search input::placeholder{color:#748299;opacity:1}
.hero-v5 .hero-mini{color:#ffffff;background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.34);text-shadow:0 1px 3px rgba(0,30,78,.12)}
.hero-v5 .hero-mini:hover{background:rgba(255,255,255,.23)}
@media(max-width:480px){.hero-v5 h1{font-size:clamp(1.42rem,7vw,1.82rem)}.hero-v5>p{font-size:.8rem}}

/* Search performance: live typing should update without replaying entrance
   animations on every keystroke. Cards outside the viewport are skipped by
   the browser until needed, which keeps low-end Android scrolling smooth. */
.search-results-content.live-update .business-card {
  animation: none !important;
}
.search-results-content .business-card {
  content-visibility: auto;
  contain-intrinsic-size: 310px;
}
@media (prefers-reduced-motion: reduce) {
  .search-results-content .business-card { animation: none !important; }
}