/* =====================================================================
   DIAL-E-PUNJAB — Directory front-end theme
   Listing-directory UI: logo-derived orange + black, soft cards, script watermarks.
   Vanilla CSS, no framework.  Sections:
     1 tokens · 2 base · 3 layout/section heads · 4 buttons · 5 forms
     6 header/nav · 7 hero+search · 8 stats · 9 listing cards
     10 category tiles · 11 carousel · 12 testimonials · 13 blog cards
     14 CTA band · 15 footer · 16 pagination · 17 listing page
     18 detail page · 19 editorial (article/category/page/search)
     20 utilities · 21 responsive
   ===================================================================== */

/* ---------- 1. TOKENS ----------
   Palette derived from the logo, which uses exactly two colours:
   orange #f57520 / #ff8023 (hue 24°) and black. Orange is a fill colour —
   white text on it only reaches 2.8:1 — so anything sitting ON orange uses
   the brand black (6.7:1), and orange used AS text switches to --primary-ink
   (5.0:1 on white). Greys are warmed to sit with the orange. */
:root {
  --brand-orange: #f57520;        /* dominant logo orange */
  --brand-orange-bright: #ff8023; /* logo highlight */
  --brand-black: #17140f;         /* logo black, warmed a touch */

  --primary: #f57520;
  --primary-dark: #d85f10;        /* hover / pressed fill */
  --primary-ink: #b4530c;         /* orange as text or icons on light */
  --primary-soft: #fff3e9;        /* tint background */
  --on-primary: #17140f;          /* text + icons on an orange fill */

  --ink: #17140f;
  --ink-soft: #443c33;
  /* 4.55:1 on every background the theme uses. The previous #837a6e measured
     3.95:1 on the tinted panels, under the 4.5 that normal-size body text
     needs, which is what the contrast audit was failing on. */
  --muted: #797065;
  --line: #ece6df;
  --bg: #ffffff;
  --bg-tint: #faf7f3;
  --bg-warm: #fff6ee;
  --bg-pink: #fff6ee;             /* alias kept so older rules keep working */
  --navy: #17140f;                /* dark surfaces = brand black */
  --navy-2: #221d16;
  --amber: #e8a317;               /* review stars — gold, clear of the orange */
  --green: #16a34a;
  --shadow-sm: 0 2px 10px rgba(35, 25, 15, .06);
  --shadow: 0 10px 30px rgba(35, 25, 15, .09);
  --shadow-lg: 0 22px 60px rgba(35, 25, 15, .16);
  --radius: 12px;
  --radius-sm: 8px;
  --font: 'Poppins', system-ui, 'Segoe UI', sans-serif;
  --font-script: 'Yellowtail', cursive;
  --container: 1200px;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-family: var(--font); color: var(--ink); margin: 0 0 12px; line-height: 1.25; font-weight: 600; }
h1 { font-size: 40px; font-weight: 700; }
h2 { font-size: 30px; }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 20px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 3px solid rgba(245, 117, 32, .45); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--primary);
  color: var(--on-primary); padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. LAYOUT / SECTION HEADS ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 76px 0; position: relative; }
.section-tint { background: var(--bg-tint); }
.section-pink { background: var(--bg-pink); }
.section-tight { padding: 54px 0; }

.sec-head { text-align: center; position: relative; margin-bottom: 44px; }
.sec-head .watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -84%);
  font-family: var(--font-script); font-size: 62px; color: rgba(60, 40, 20, .07);
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}
.sec-head h2 { position: relative; z-index: 1; font-size: 34px; font-weight: 600; }
.sec-head h2 span { color: var(--primary-ink); }
.sec-head p { position: relative; z-index: 1; max-width: 640px; margin: 6px auto 0; color: var(--muted); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.sec-head-row h2 { margin: 0; font-size: 28px; }
.sec-link { color: var(--primary-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.sec-link:hover { color: var(--primary-dark); }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--font); letter-spacing: .2px; transition: .22s ease;
  background: var(--primary); color: var(--on-primary); white-space: nowrap;
}
.btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(245, 117, 32, .35); }
.btn-dark { background: var(--navy); }
.btn-dark:hover { background: #000; box-shadow: 0 10px 22px rgba(35, 25, 15, .32); }
.btn-ghost { background: transparent; color: var(--primary-ink); border: 1.5px solid var(--primary); }
.btn-ghost:hover { background: var(--primary); color: var(--on-primary); }
.btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: #fff; color: var(--primary-ink); }
.btn-sm { height: 36px; padding: 0 18px; font-size: 13px; }
.btn-lg { height: 54px; padding: 0 34px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- 5. FORMS ---------- */
.input, .select, input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; font: 400 14px/1 var(--font);
  color: var(--ink); transition: .2s;
}
textarea { height: auto; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.input:focus, .select:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245, 117, 32, .16); outline: none;
}
::placeholder { color: #a6adba; }
.field { position: relative; }
.field .fico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--primary); font-size: 15px; pointer-events: none;
}
.field .input, .field .select { padding-left: 40px; }

/* ---------- 6. HEADER / NAV ---------- */
.topbar { background: var(--navy); color: #b0a699; font-size: 13px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: #e8dfd3; }
.topbar a:hover { color: var(--primary); }
.topbar .tb-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar .tb-social { display: flex; gap: 14px; }

.site-header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line); transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 6px 26px rgba(35, 25, 15, .12); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 74px; }

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 18px; flex: none;
}
.brand-text { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.4px; }
.brand-text span { color: var(--primary); }
.brand-text small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; }
.brand img { max-height: 42px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav > a, .nav-item > a {
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px;
  font-size: 14px; font-weight: 500; color: var(--ink); border-radius: 8px; transition: .18s;
}
.main-nav > a:hover, .nav-item > a:hover, .main-nav > a.active, .nav-item.active > a { color: var(--primary); }
.nav-item { position: relative; }
.nav-item .caret { font-size: 10px; color: var(--muted); transition: transform .2s; }
.nav-item:hover .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 224px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s; z-index: 70; max-height: 70vh; overflow-y: auto;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--ink-soft);
}
.dropdown a:hover { background: var(--primary-soft); color: var(--primary); }
.dropdown a b { font-size: 12px; color: var(--muted); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: .2s;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.nav-toggle { display: none; }

.nav-mobile { position: fixed; inset: 0; background: rgba(15, 20, 28, .55); z-index: 200; display: none; }
.nav-mobile.open { display: block; }
.nav-mobile-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 88vw); background: #fff;
  padding: 22px; overflow-y: auto; box-shadow: -20px 0 50px rgba(0, 0, 0, .2);
  animation: slideIn .25s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.nav-mobile .mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.nav-mobile .mhead h3 { margin: 0; }
.nav-mobile .mclose { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); line-height: 1; }
.mgroup { margin-bottom: 20px; }
.mgroup-label { display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mlink {
  display: flex; align-items: center; justify-content: space-between; padding: 11px 12px;
  border-radius: 8px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line);
}
.mlink:hover { background: var(--primary-soft); color: var(--primary); }

/* ---------- 7. HERO + SEARCH ---------- */
.hero {
  position: relative; padding: 96px 0 120px; color: #fff; text-align: center;
  background: linear-gradient(120deg, #17140f 0%, #2a1d12 55%, #3d2612 100%);
  background-size: cover; background-position: center;
  isolation: isolate;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 11, 7, .78), rgba(14, 11, 7, .88));
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero .eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: #ffd3dc; margin-bottom: 14px;
}
.hero h1 { color: #fff; font-size: 54px; font-weight: 700; letter-spacing: -1px; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-sub { color: rgba(255, 255, 255, .82); font-size: 16px; max-width: 620px; margin: 0 auto 26px; }

.search-tabs { display: flex; justify-content: center; gap: 26px; margin-bottom: -1px; position: relative; z-index: 3; }
.search-tabs button {
  background: none; border: 0; color: rgba(255, 255, 255, .78); font: 500 14px/1 var(--font);
  padding: 10px 4px; cursor: pointer; position: relative;
}
.search-tabs button.active { color: #fff; }
.search-tabs button.active::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: #fff;
}

.hero-search {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; align-items: center;
  background: #fff; border-radius: 10px; padding: 10px; box-shadow: var(--shadow-lg); margin-top: 10px;
}
.hero-search .field .input, .hero-search .field .select { border: 0; box-shadow: none; height: 48px; background: transparent; }
.hero-search .field + .field { border-left: 1px solid var(--line); }
.hero-search .btn { height: 48px; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.hero-chips a {
  padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); transition: .2s;
}
.hero-chips a:hover { background: var(--primary); border-color: var(--primary); }

/* ---------- 8. STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.stat-item { padding: 12px; }
.stat-ico {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: grid;
  place-items: center; font-size: 24px; background: var(--primary-soft); color: var(--primary);
}
.stat-item:nth-child(2) .stat-ico { background: #fdeee0; color: var(--primary-ink); }
.stat-item:nth-child(3) .stat-ico { background: #fbf3e3; color: #a97a15; }
.stat-item:nth-child(4) .stat-ico { background: #f0ece7; color: var(--brand-black); }
.stat-num { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat-label { font-size: 14px; color: var(--muted); }

/* ---------- 9. LISTING CARDS ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.biz-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: .28s ease; height: 100%;
}
.biz-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.biz-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.biz-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.biz-card:hover .biz-cover img { transform: scale(1.06); }
.biz-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55));
}
.biz-fallback {
  width: 100%; height: 100%; display: grid; place-items: center;
  font: 700 42px/1 var(--font); color: #fff; letter-spacing: -1px;
}

.biz-price {
  position: absolute; left: 14px; top: 14px; z-index: 2; background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.biz-save {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center;
  gap: 6px; background: rgba(255, 255, 255, .92); border: 0; border-radius: 999px; cursor: pointer;
  font: 600 12px/1 var(--font); color: var(--ink); padding: 7px 13px; transition: .2s;
}
.biz-save:hover, .biz-save.saved { background: var(--primary); color: var(--on-primary); }
.biz-catpill {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 5px 14px; border-radius: 4px;
  font-size: 12px; font-weight: 600; color: var(--on-primary); background: var(--primary); letter-spacing: .2px;
}
.biz-ribbon {
  position: absolute; right: -42px; top: 16px; z-index: 3; width: 160px; text-align: center;
  transform: rotate(45deg); background: var(--green); color: #fff; font-size: 11px;
  font-weight: 600; letter-spacing: .6px; padding: 5px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.biz-ribbon.is-closed { background: #ef4444; }
.biz-ribbon.is-featured { background: var(--primary); }
.biz-ribbon.is-popular { background: #f59e0b; }

.biz-body { padding: 18px 18px 0; flex: 1; }
.biz-body h3 { font-size: 17px; margin-bottom: 6px; }
.biz-card:hover .biz-body h3 { color: var(--primary); }
.verified-tick {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: #2563eb; color: #fff; font-size: 10px; vertical-align: middle; margin-left: 4px;
}
.biz-rating { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.stars { color: var(--amber); letter-spacing: 1px; font-size: 13px; }
.biz-address { display: flex; gap: 7px; font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.biz-address i { color: var(--primary); }
.biz-desc { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.biz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.biz-tags .tag {
  font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  background: var(--bg-tint); color: var(--muted);
}
.biz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 18px; border-top: 1px solid var(--line);
}
.biz-author { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.biz-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primary-soft); color: var(--primary); font: 600 12px/1 var(--font);
  object-fit: cover;
}
.biz-author b { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.view-btn {
  height: 32px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--primary);
  color: var(--primary); font: 600 12.5px/1 var(--font); display: inline-flex; align-items: center; transition: .2s;
}
.biz-card:hover .view-btn { background: var(--primary); color: var(--on-primary); }

/* wide (list) variant used on the browse page */
.biz-card.is-wide { flex-direction: row; }
.biz-card.is-wide .biz-cover { width: 300px; flex: none; aspect-ratio: auto; }
.biz-card.is-wide .biz-body { padding: 20px 22px 0; }
.biz-card.is-wide .biz-foot { border-top: 0; padding: 14px 22px 20px; }

/* ---------- 10. CATEGORY TILES ---------- */
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 30px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: .25s;
}
.cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.cat-tile-ico {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; background: var(--primary-soft); color: var(--primary); transition: .25s;
}
.cat-tile:hover .cat-tile-ico { background: var(--primary); color: var(--on-primary); }
.cat-tile h3 { font-size: 16px; margin: 0; }
.cat-tile span { font-size: 13px; color: var(--muted); }

/* ---------- 11. CAROUSEL ---------- */
.carousel { position: relative; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 52px) / 3);
  gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 6px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #d7dbe4; transition: .2s;
}
.carousel-dots button.active { background: var(--primary); width: 26px; border-radius: 999px; }
.carousel-nav {
  position: absolute; top: 38%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm);
  z-index: 4; transition: .2s;
}
.carousel-nav:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.carousel-nav.prev { left: -18px; }
.carousel-nav.next { right: -18px; }

/* ---------- 12. TESTIMONIALS ----------
   Compact quote card: the words lead, the person signs underneath. No large
   photo block — most entries have no picture, and a full-bleed initial tile
   dominated the card. */
.tst-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 22px; transition: .25s ease;
}
.tst-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.tst-mark {
  position: absolute; right: 22px; top: 8px; font: 700 64px/1 var(--font-script);
  color: var(--primary); opacity: .16; pointer-events: none; user-select: none;
}
.tst-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.tst-text {
  position: relative; z-index: 1; margin: 0 0 20px; font-size: 15px; line-height: 1.75;
  color: var(--ink-soft);
}
.tst-by {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.tst-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover;
  display: grid; place-items: center; color: #fff; font: 600 14px/1 var(--font);
}
.tst-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tst-meta b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tst-meta span { font-size: 12.5px; color: var(--muted); }

/* ---------- 13. BLOG CARDS ---------- */
.blog-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: .25s; height: 100%; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.blog-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-by { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.blog-body h3 { font-size: 17px; }
.blog-card:hover h3 { color: var(--primary); }
.blog-body p { font-size: 13.5px; color: var(--muted); }
.blog-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.chip { font-size: 11px; font-weight: 500; padding: 5px 13px; border-radius: 5px; background: var(--primary-soft); color: var(--primary); }
.chip.alt { background: #eef7ee; color: #2f855a; }

/* ---------- 14. CTA BAND ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center; color: #fff; padding: 78px 0;
  background: linear-gradient(120deg, var(--brand-black) 0%, #2e2417 100%);
}
.cta-band::before, .cta-band::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(245, 117, 32, .13);
}
.cta-band::before { width: 420px; height: 420px; right: -120px; top: -140px; }
.cta-band::after { width: 300px; height: 300px; left: -90px; bottom: -140px; }
.cta-band .inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta-script { font-family: var(--font-script); font-size: 52px; color: rgba(245, 117, 32, .55); line-height: 1; }
.cta-phone { font-size: 44px; font-weight: 700; color: var(--brand-orange-bright); letter-spacing: -1px; margin: 6px 0 12px; display: inline-block; }
.cta-band p { color: rgba(255, 255, 255, .82); margin-bottom: 24px; }

/* ---------- 15. FOOTER ---------- */
.site-footer { background: var(--navy); color: #a89e92; font-size: 14px; padding: 66px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; padding-bottom: 46px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.site-footer .brand-text { color: #fff; }
.site-footer a { color: #a89e92; }
.site-footer a:hover { color: var(--primary); }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.f-about { margin: 18px 0; max-width: 300px; line-height: 1.8; }
.f-contact { display: grid; gap: 8px; margin-bottom: 18px; }
.f-contact span { display: flex; gap: 9px; }
.f-contact i { color: var(--primary); }
.f-socials { display: flex; gap: 12px; }
.f-socials a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #d6ccbf; transition: .2s;
}
.f-socials a:hover { background: var(--primary); color: var(--on-primary); }
/* the footer newsletter form moved out to the .sub-band section above it */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; display: flex;
  align-items: center; justify-content: center; gap: 14px; font-size: 13px; text-align: center;
}
.footer-bottom .flinks { display: flex; gap: 18px; flex-wrap: wrap; }

.back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--primary); color: var(--on-primary); cursor: pointer; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .25s; box-shadow: var(--shadow);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- 16. PAGINATION ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 44px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--ink); transition: .2s;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pagination .gap { border: 0; background: none; }

/* ---------- 17. LISTING (BROWSE) PAGE ---------- */
.page-hero {
  background: var(--bg-tint); padding: 46px 0 42px; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.page-hero h1 { font-size: 36px; margin-bottom: 8px; }
.page-hero .lead { color: var(--muted); max-width: 640px; margin: 0; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumb a:hover { color: var(--primary); }
.crumb .current { color: var(--ink); font-weight: 500; }

.listing-layout { display: grid; grid-template-columns: 290px 1fr; gap: 34px; padding: 42px 0 70px; align-items: start; }
.filter-rail {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; position: sticky; top: 96px;
}
.filter-rail .fhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filter-rail .fhead h3 { margin: 0; font-size: 16px; }
.f-reset { background: none; border: 0; color: var(--primary); font: 500 13px var(--font); cursor: pointer; }
.filter-group { padding: 16px 0; border-top: 1px solid var(--line); }
.filter-group h4 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.filter-opt {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px;
  color: var(--ink-soft); cursor: pointer;
}
.filter-opt input { width: auto; height: auto; accent-color: var(--primary); }
.filter-opt .fc { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--bg-tint); padding: 2px 9px; border-radius: 999px; }
.filter-opt:hover { color: var(--primary); }

.sort-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; margin-bottom: 24px;
}
.sort-bar .results-count { margin: 0; font-size: 14px; color: var(--muted); }
.sort-bar .results-count b { color: var(--ink); }
.sort-bar .spacer { flex: 1; }
.sort-bar .select { width: auto; min-width: 190px; height: 40px; }
.view-toggle { display: flex; gap: 6px; }
.view-toggle a {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; display: grid;
  place-items: center; color: var(--muted); transition: .2s;
}
.view-toggle a.active, .view-toggle a:hover { border-color: var(--primary); color: var(--primary); }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.active-filters a {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 500;
}
.active-filters a:hover { background: var(--primary); color: var(--on-primary); }

.empty-state { text-align: center; padding: 70px 20px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state .ico { font-size: 42px; margin-bottom: 12px; }
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { color: var(--muted); }

/* ---------- 18. DETAIL PAGE ---------- */
.detail-hero {
  position: relative; color: #fff; padding: 64px 0 0; background: var(--navy);
  background-size: cover; background-position: center;
}
.detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 24, 33, .72), rgba(18, 24, 33, .92)); }
.detail-hero .container { position: relative; z-index: 2; }
.detail-hero .crumb, .detail-hero .crumb a { color: rgba(255, 255, 255, .72); }
.detail-hero .crumb .current { color: #fff; }
.detail-head { display: flex; gap: 22px; align-items: flex-start; padding-bottom: 26px; flex-wrap: wrap; }
.detail-logo {
  width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: #fff; flex: none;
  display: grid; place-items: center; font: 700 34px/1 var(--font); color: var(--primary); box-shadow: var(--shadow);
}
.detail-titles { flex: 1; min-width: 260px; }
.detail-titles h1 { color: #fff; font-size: 36px; margin-bottom: 8px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.detail-badges .badge {
  font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 5px; background: var(--primary); color: var(--on-primary);
}
.detail-badges .badge.ghost { background: rgba(255, 255, 255, .14); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255, 255, 255, .82); font-size: 14px; }
.detail-meta i { color: var(--primary); margin-right: 6px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tabbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar .tab {
  background: none; border: 0; color: rgba(255, 255, 255, .74); font: 500 14px var(--font);
  padding: 16px 18px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tabbar .tab.active, .tabbar .tab:hover { color: #fff; border-bottom-color: var(--primary); }

.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 34px; padding: 42px 0 70px; align-items: start; }
.panel-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
.panel-card h2 { font-size: 22px; }
.panel-card p:last-child { margin-bottom: 0; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.spec-item { display: flex; gap: 12px; padding: 14px; background: var(--bg-tint); border-radius: var(--radius-sm); font-size: 14px; }
.spec-item i { color: var(--primary); font-size: 16px; }
.spec-item b { display: block; color: var(--ink); font-size: 13px; }
.service-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.service-list li {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--primary-soft); color: var(--ink); font-size: 13.5px; font-weight: 500;
}
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid img { border-radius: var(--radius-sm); aspect-ratio: 4 / 3; object-fit: cover; }
.map-frame { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }
.map-placeholder {
  height: 260px; display: grid; place-items: center; gap: 6px; background: var(--bg-tint);
  border-radius: var(--radius-sm); color: var(--muted); text-align: center;
}

.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; }
.side-card h3 { font-size: 17px; margin-bottom: 16px; }
.contact-rows { display: grid; gap: 14px; margin-bottom: 18px; }
.contact-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.contact-row .cico {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primary-soft); color: var(--primary);
}
.contact-row small { display: block; color: var(--muted); font-size: 12px; }
.contact-row a { color: var(--ink); font-weight: 500; word-break: break-word; }
.contact-row a:hover { color: var(--primary); }
.side-biz { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.side-biz:last-child { border-bottom: 0; padding-bottom: 0; }
.side-biz img, .side-biz .thumb-fallback {
  width: 68px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
.side-biz h4 { font-size: 14px; margin: 0 0 4px; }
.side-biz:hover h4 { color: var(--primary); }
.side-biz span { font-size: 12px; color: var(--muted); }

/* ---------- 19. EDITORIAL (article / category / page / search) ---------- */
.editorial-layout { display: grid; grid-template-columns: 1fr 330px; gap: 36px; padding: 40px 0 70px; align-items: start; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .25s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .pc-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.post-card h3 { font-size: 17px; }
.post-card:hover h3 { color: var(--primary); }
.post-card .pc-meta { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--muted); display: flex; gap: 12px; }
.cat-label { display: inline-block; font-size: 11px; font-weight: 600; color: var(--on-primary); background: var(--primary); padding: 4px 11px; border-radius: 4px; margin-bottom: 10px; }

.article-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.article-wrap h1 { font-size: 34px; }
.article-standfirst { font-size: 17px; color: var(--muted); }
.article-byline { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 20px 0 26px; }
.article-body { font-size: 16.5px; line-height: 1.9; color: var(--ink-soft); }
.article-body img { border-radius: var(--radius-sm); margin: 20px 0; }
.article-body h2 { font-size: 24px; margin-top: 30px; }
.article-body h3 { font-size: 20px; margin-top: 24px; }
.article-body blockquote {
  margin: 24px 0; padding: 18px 24px; border-left: 4px solid var(--primary);
  background: var(--primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic;
}
.article-body a { color: var(--primary); text-decoration: underline; }

.side-list { display: grid; gap: 14px; }
.side-post { display: flex; gap: 12px; }
.side-post img { width: 84px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.side-post h4 { font-size: 14px; margin: 0 0 4px; line-height: 1.45; }
.side-post:hover h4 { color: var(--primary); }
.side-post span { font-size: 12px; color: var(--muted); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: var(--bg-tint); color: var(--ink-soft); }
.tag-cloud a:hover { background: var(--primary); color: var(--on-primary); }
.ad-row { margin: 26px auto; text-align: center; }
.share-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.share-row a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-tint); color: var(--ink-soft); transition: .2s;
}
.share-row a:hover { background: var(--primary); color: var(--on-primary); }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; background: transparent; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .1s; }

/* ---------- 20. UTILITIES ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* a reveal that never fires would hide content for good, so anyone who has
   asked for less motion just gets it shown outright */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 300;
  background: var(--navy); color: #fff; padding: 13px 22px; border-radius: 999px; font-size: 14px;
  display: flex; align-items: center; gap: 9px; opacity: 0; visibility: hidden; transition: .25s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .carousel-track { grid-auto-columns: calc((100% - 26px) / 2); }
  .carousel-nav { display: none; }
}
@media (max-width: 992px) {
  .main-nav { display: none; }
  .nav-toggle { display: grid; }
  .hero h1 { font-size: 40px; }
  .hero-search { grid-template-columns: 1fr; }
  .hero-search .field + .field { border-left: 0; border-top: 1px solid var(--line); }
  .hero-search .btn { width: 100%; }
  .listing-layout, .detail-layout, .editorial-layout { grid-template-columns: 1fr; }
  .filter-rail { position: static; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .biz-card.is-wide { flex-direction: column; }
  .biz-card.is-wide .biz-cover { width: 100%; aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 56px 0; }
}
@media (max-width: 700px) {
  h1 { font-size: 30px; }
  .hero { padding: 62px 0 76px; }
  .hero h1 { font-size: 32px; }
  .sec-head h2, .page-hero h1 { font-size: 26px; }
  .sec-head .watermark { font-size: 40px; }
  .grid-3, .grid-2, .grid-4, .gallery-grid, .spec-grid { grid-template-columns: 1fr; }
  /* one full-width card per stop so it stays centred in the container gutters */
  .carousel-track { grid-auto-columns: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-phone { font-size: 32px; }
  .detail-titles h1 { font-size: 27px; }
  .article-wrap { padding: 22px; }
  .topbar .tb-left { display: none; }
}

/* ---------- 22. ADDITIONS / OVERRIDES ---------- */
.grid-1 { grid-template-columns: 1fr; }
.pagination .active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pagination .pg-arrow { font-weight: 600; }
.side-biz > span { display: block; min-width: 0; }
.side-biz .thumb-fallback { font-size: 18px; }
.biz-tags a.tag:hover { background: var(--primary); color: var(--on-primary); }
.btn-block { width: 100%; }

/* the editorial pages still ship their own layout classes from style.css —
   these few overrides keep them inside the directory look */
body .top-strip, body .header-ad, body .main-nav-bar { display: none !important; }
body .page-layout, body .cat-layout { max-width: var(--container); padding: 40px 0 64px; }
body .card, body .widget, body .side-card, body .trending-card, body .newsletter-card {
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: none;
}
body .red-btn, body .follow-btn, body button[type="submit"]:not(.icon-btn) { border-radius: 999px; }
body .cat-hero, body .page-hero { background: var(--bg-tint); color: var(--ink); }
body .cat-hero h1, body .page-hero h1 { color: var(--ink); }
body .cat-label, body .article-cat { background: var(--primary) !important; border-radius: 4px; }
.cta-script { display: block; }
.biz-author > span { min-width: 0; }
.biz-author b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.biz-body h3 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------- 23. LEGACY PAGE COMPATIBILITY ----------
   article.php / category.php / search.php / page.php still ship the older
   style.css for their inner layout. Re-point its design tokens at the
   directory palette and neutralise its own site chrome so the whole
   front-end reads as one theme. */
:root {
  --red: #f57520;
  --dark-red: #d85f10;
  --blue: #1f2733;
  --yellow: #e8a317;
  --orange: #f59e0b;
  --text: #1f2733;
  --card: #ffffff;
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', 'Mukta', system-ui, sans-serif;
}
body .main-nav { background: none; box-shadow: none; position: static; }
body .main-nav::after { display: none; }
body .site-header { padding: 0; }
body .cat-hero { padding: 38px 0 34px; }
body .cat-hero .breadcrumb, body .cat-hero .breadcrumb a,
body .cat-hero .cat-meta, body .cat-hero .cat-lead { color: var(--muted); }
body .cat-hero .ch-float { opacity: .25; }
body .page-hero-inner, body .page-hero-sub { color: inherit; }
body .widget h3, body .side-card-head { font-family: var(--font-head); }
body .store-btn, body .subscribe-btn { background: var(--primary) !important; color: var(--on-primary) !important; }
body .rank { background: var(--primary) !important; color: var(--on-primary) !important; }
/* dark legacy widgets: keep their headings readable in the new palette */
body .follow-card .follow-head { background: linear-gradient(135deg, var(--brand-black), #2e2417); }
body .follow-card .follow-head h3, body .newsletter-card h3, body .newsletter-card h2 { color: #fff; }
body .newsletter-card { background: linear-gradient(150deg, var(--brand-black), #2e2417); color: #fff; }
body .newsletter-card p { color: rgba(255, 255, 255, .88); }
body .newsletter-card button, body .newsletter-card .subscribe-btn {
  background: var(--primary) !important; color: var(--on-primary) !important; border-radius: 999px;
}
body .lt-time, body .cc-dot, body .cc-ico { background: var(--primary) !important; color: var(--on-primary) !important; }
/* subtle texture behind the hero when no background image is set */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background:
    radial-gradient(520px 320px at 12% 18%, rgba(245, 117, 32, .28), transparent 70%),
    radial-gradient(560px 340px at 88% 82%, rgba(124, 58, 237, .26), transparent 70%);
}
.hero > .container { position: relative; z-index: 2; }
/* absolutely-positioned watermarks must never widen the page */
body { overflow-x: hidden; }
.sec-head { overflow: hidden; }
.sec-head .watermark { max-width: 100vw; }

/* small screens: the header must never force the page wider than the viewport */
@media (max-width: 700px) {
  .header-inner { gap: 10px; }
  .brand { min-width: 0; }
  .brand-text { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-text small { display: none; }
  .header-actions .btn { padding: 0 14px; }
  .header-actions .btn .lbl { display: none; }
  .topbar-inner { justify-content: center; }
}

/* ---------- 24. BRAND LOGO ---------- */
.brand img { max-height: 40px; width: auto; }
/* No plate behind the footer logo: the footer artwork is a light-on-dark asset,
   so a white background hid the white half of the wordmark. Upload a light
   version under Settings → Footer Logo. */
.site-footer .brand img { max-height: 54px; }
@media (max-width: 700px) { .brand img { max-height: 32px; } }

/* legacy page.php hero: it was built for a dark banner and lifts its content
   card by -50px, so give it back the bottom room and readable light-theme colors */
body .page-hero { padding: 44px 0 46px; }
body .page-hero.has-lift { padding: 40px 0 86px; }
body .page-hero::after { display: none; }
body .page-crumb, body .page-crumb a { color: var(--muted); }
body .page-crumb a:hover { color: var(--primary); }
body .page-hero-sub { color: var(--muted); }
body .page-hero-icon {
  background: var(--primary-soft); border: 1px solid var(--line);
  color: var(--primary); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body .cc-socials a { background: var(--primary); }

/* no white gap above the footer on the pages that still load style.css */
body .site-footer { margin-top: 0; }

/* ---------- 25. HERO WITH A PHOTO BACKGROUND ----------
   When an admin sets a hero image the flat gradient and the orange glow would
   bury it, so the overlay drops to a readable scrim instead. */
.hero.has-bg::before { display: none; }
.hero.has-bg::after {
  background: linear-gradient(180deg, rgba(14, 11, 7, .42) 0%, rgba(14, 11, 7, .58) 55%, rgba(14, 11, 7, .78) 100%);
}
.hero.has-bg h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero.has-bg .hero-sub, .hero.has-bg .eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
/* the photo's subject sits on its right edge, so narrow screens pan there
   instead of cropping to the dark middle */
@media (max-width: 900px) { .hero.has-bg { background-position: 78% center; } }

/* ---------- 26. LISTING MAP ---------- */
.map-block { margin-top: 20px; }
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }
.map-directions {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; font-weight: 600; color: var(--primary-ink);
}
.map-directions:hover { color: var(--primary-dark); }
@media (max-width: 700px) { .map-frame iframe { height: 260px; } }
.map-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; display: flex; gap: 7px; }
.map-note i { color: var(--primary-ink); }

/* ---------- Brand icon on archive listing cards ---------- */
/* The favicon is a square mark, so contain it rather than crop like an avatar photo. */
img.biz-avatar { object-fit: contain; background: var(--primary-soft); padding: 4px; }
.blog-by { display: flex; align-items: center; gap: 7px; }
.blog-by-icon {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; object-fit: contain;
  background: var(--primary-soft); padding: 2px;
}
.title-icon {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%; object-fit: contain;
  background: var(--primary-soft); padding: 2px;
  display: inline-block;
  margin-right: 8px; vertical-align: -4px;
}
/* ---------- Listing detail: single-scroll sections ---------- */
.lst-section { scroll-margin-top: 96px; }
.sec-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--primary-ink); background: var(--primary-soft);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.sec-count {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--bg-tint); border-radius: 999px; padding: 2px 9px; vertical-align: middle;
}
.lst-name { font-size: 26px; margin: 0 0 10px; }
/* .lst-verified removed — the orange tick it drew is now the blue .vtick (section 30) */
.lst-lead { font-size: 16.5px; line-height: 1.75; color: var(--ink); margin: 0 0 18px; }
.muted-text { color: var(--muted); }
.lst-jump { margin-bottom: 4px; }

/* quick facts */
.quick-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.qf {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; font-size: 13.5px; color: var(--ink);
}
.qf i { color: var(--primary-ink); }
.qf b { font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }

/* about: clamped until opened, expands in place */
.about-body { line-height: 1.85; }
.about-body.is-clamped {
  max-height: 260px; overflow: hidden; position: relative;
}
.about-body.is-clamped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}
.about-body.is-open { max-height: none; }
.about-body.is-open::after { display: none; }
.read-more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary-soft); color: var(--primary-ink);
  border: 1px solid transparent; border-radius: 999px;
  padding: 10px 20px; font: 600 14px/1 var(--font); cursor: pointer; transition: .2s;
}
.read-more:hover { background: var(--primary); color: var(--on-primary); }
.read-more .rm-less { display: none; }
.read-more[aria-expanded="true"] .rm-more { display: none; }
.read-more[aria-expanded="true"] .rm-less { display: inline-flex; align-items: center; gap: 8px; }

/* photo gallery */
.gal-item {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden; display: block; width: 100%;
}
.gal-item img { width: 100%; transition: transform .45s ease; }
.gal-item:hover img { transform: scale(1.06); }
.gal-zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15, 23, 42, .45); color: #fff; font-size: 20px;
  opacity: 0; transition: opacity .25s;
}
.gal-item:hover .gal-zoom, .gal-item:focus-visible .gal-zoom { opacity: 1; }

/* video gallery — click-to-load facades */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.video-item {
  position: relative; padding: 0; border: 0; cursor: pointer; display: block; width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #0f172a;
}
.video-item img, .video-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-item iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--primary-ink); font-size: 30px;
  transition: transform .25s, background .25s;
}
.video-item:hover .video-play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.video-host {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(15, 23, 42, .78); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}

/* copy-link button sits with the share icons */
.copy-link {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-tint); color: var(--ink);
  font: 600 13.5px/1 var(--font); transition: .2s;
}
.copy-link:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.copy-link.is-done { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(8, 12, 20, .93); padding: 40px 16px;
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--radius-sm); }
.lb-close, .lb-nav {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .14); border-radius: 50%;
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px;
  transition: background .2s;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .3); }
.lb-close { top: 22px; right: 22px; font-size: 30px; line-height: 1; }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }

@media (max-width: 860px) {
  /* Photos and videos stay two-up on phones. The global 860px rule above drops
     .gallery-grid to a single column, which made a 6-photo listing endless to
     scroll — this block comes later in the file, so it wins. */
  .gallery-grid, .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* the desktop play button is oversized once a tile is ~half the screen */
  .video-play { width: 46px; height: 46px; font-size: 23px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lst-name { font-size: 22px; }
}

/* ---------- Listing: features & amenities ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.feature-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-tint); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: border-color .2s ease, background .2s ease;
}
.feature-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.feature-item > i { color: var(--primary-ink); font-size: 18px; line-height: 1.35; flex: none; }
.fi-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-text b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fi-text em { font-style: normal; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Directory filter rail: accordion on small screens ----------
   The rail stacks above the results below 860px, where five open groups push
   the listings far down the page. Each group collapses to its heading there;
   on desktop the rail is unchanged. */
@media (max-width: 860px) {
  .filter-rail { padding: 6px 18px 10px; }
  .filter-rail .fhead { padding: 14px 0 10px; margin-bottom: 0; }

  .filter-group { padding: 0; border-top: 1px solid var(--line); }
  .filter-group h4 {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 15px 2px; cursor: pointer;
    -webkit-user-select: none; user-select: none;
  }
  .filter-group h4:hover { color: var(--primary-ink); }
  /* chevron drawn in CSS so it needs no icon font */
  .filter-group h4::after {
    content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  .filter-group.is-open h4::after { transform: rotate(-135deg) translate(-2px, -2px); }

  /* a group carrying an active choice reads as selected even when shut */
  .filter-group.has-value h4 { color: var(--primary-ink); font-weight: 700; }

  .filter-group .fg-body { display: none; padding: 0 2px 16px; }
  .filter-group.is-open .fg-body { display: block; }
}

/* ---------- Newsletter band (sits between the page and the footer) ----------
   Deliberately light: the footer below is dark, so a tinted card separates the
   two instead of merging into one dark slab. */
.sub-band { padding: 8px 0 58px; }
.sub-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft) 0%, #ffe6d2 100%);
  border: 1px solid #ffdcc2;
  border-radius: 22px;
  padding: 42px 46px;
}
/* soft brand glow, purely decorative */
.sub-inner::after {
  content: ''; position: absolute; right: -90px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 128, 32, .16), transparent 70%);
  pointer-events: none;
}

.sub-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--primary-ink); background: rgba(255, 255, 255, .75);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 14px;
}
.sub-copy h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.25; color: var(--ink); }
.sub-copy p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 46ch; }

.sub-form { position: relative; z-index: 1; }
.sub-row { display: flex; gap: 10px; }
.sub-field {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center;
}
.sub-field i {
  position: absolute; left: 16px; color: var(--muted); font-size: 16px; pointer-events: none;
}
.sub-field input {
  width: 100%; height: 54px;
  padding: 0 16px 0 44px;
  border: 1px solid #f0cdae; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.sub-field input::placeholder { color: #b9a999; }
.sub-field input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(247, 128, 32, .16);
}
.sub-form .btn { height: 54px; padding: 0 30px; border-radius: 999px; flex: none; font-size: 15px; }
.sub-note {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: 13px; color: var(--muted);
}
.sub-note i { color: var(--primary-ink); }

@media (max-width: 900px) {
  .sub-inner { grid-template-columns: 1fr; gap: 24px; padding: 34px 26px; }
  .sub-copy h2 { font-size: 23px; }
}
@media (max-width: 560px) {
  .sub-band { padding: 4px 0 42px; }
  .sub-row { flex-direction: column; }
  .sub-form .btn { width: 100%; justify-content: center; }
  .sub-inner { padding: 28px 20px; border-radius: 18px; }
}

/* ---------- Footer link columns on phones ----------
   No accordion here: the columns simply stack and every link stays visible,
   which is the theme's own footer style just narrower. The collapsing version
   was removed on request - so no chevrons, no tap-to-open, and nothing that
   depends on JavaScript to reach a link. */
@media (max-width: 700px) {
  .footer-grid { gap: 28px; }
  .f-brand { margin-bottom: 4px; }

  /* a hairline between columns keeps the stack readable without implying
     that a heading is a control */
  .f-col + .f-col { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 24px; }

  .site-footer h4 { margin-bottom: 14px; }
  .f-links { gap: 12px; }

  /* The Directory column duplicates the category list already reachable from
     the header menu and the hero search, and on a phone it is seven more rows
     of scrolling before the rest of the footer. Hidden here only - the desktop
     footer still carries it. */
  .f-col-directory { display: none; }

  /* Whatever now comes first must not keep the divider that only made sense
     when it followed something visible. */
  .f-col-directory + .f-col { border-top: 0; padding-top: 0; }
}

/* ---------- Mobile drawer: mirrors the desktop navigation ---------- */
.mnav { display: block; }
.mnav .mlink span {
  font-size: 12px; color: var(--muted);
  background: var(--bg-tint); border-radius: 999px; padding: 2px 9px;
}
.mnav .mlink.is-active { color: var(--primary); font-weight: 600; }

/* a top-level entry that has a dropdown on desktop */
.mtoggle {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: 500 16px/1.2 var(--font); color: var(--ink);
}
.mtoggle i { transition: transform .2s ease; color: var(--muted); font-size: 13px; }
.msub.is-open > .mtoggle { color: var(--primary); }
.msub.is-open > .mtoggle i { transform: rotate(180deg); color: var(--primary); }

.msub-body { display: none; padding: 4px 0 8px; }
.msub.is-open > .msub-body { display: block; }
.msub-link {
  padding-left: 24px !important;
  font-size: 14.5px; color: var(--ink-soft);
  border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
}
.msub-link:last-child { border-bottom: 0 !important; }

/* ---------- 23. MOBILE: TWO-UP CARD GRIDS ----------
   Section 21 collapsed .grid-2/.grid-3/.grid-4 to a single column under 700px.
   That left the category, city, listing and blog blocks as a tall stack of
   almost-full-width tiles — a 66px icon floating in a half-empty card, and one
   listing per screen. A phone has room for two of each, so the grids go back to
   two columns here and the card furniture (padding, type scale, cover pills,
   footer) is re-cut to that narrower column instead of just being squeezed.
   This block sits after section 21, so it wins on order. */
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gallery-grid, .spec-grid, .stats { grid-template-columns: repeat(2, 1fr); }
  /* the browse page's list view is a deliberate single column — leave it alone */
  .grid-1 { grid-template-columns: 1fr; }

  /* ---- category & city tiles ---- */
  .cat-tile { padding: 22px 12px; gap: 9px; }
  .cat-tile-ico { width: 56px; height: 56px; font-size: 26px; }
  .cat-tile h3 { font-size: 14.5px; line-height: 1.3; }
  .cat-tile span { font-size: 12px; }

  /* ---- listing cards ---- */
  .biz-body { padding: 13px 13px 0; }
  .biz-body h3 { font-size: 15px; line-height: 1.3; }
  .biz-rating, .stars { font-size: 12px; }
  .biz-address { font-size: 12px; gap: 5px; margin-top: 6px; }
  /* the category already reads on the cover pill, so the tag row is noise here */
  .biz-tags { display: none; }
  .biz-foot {
    flex-direction: column; align-items: stretch; gap: 9px;
    margin-top: 12px; padding: 11px 13px 13px;
  }
  .biz-author { font-size: 11.5px; gap: 7px; }
  .biz-avatar { width: 26px; height: 26px; font-size: 10px; }
  .biz-author b { font-size: 12px; }
  .view-btn { width: 100%; height: 31px; justify-content: center; font-size: 12px; }

  /* cover furniture: one pill per corner so nothing collides in a half-width card */
  .biz-price { left: 9px; top: 9px; font-size: 10.5px; padding: 4px 10px; }
  .biz-catpill {
    left: 9px; bottom: 9px; font-size: 10.5px; padding: 4px 10px;
    max-width: 58%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* "Save" collapses to its heart — the aria-label still carries the name */
  .biz-save {
    right: 9px; bottom: 9px; width: 30px; height: 30px;
    padding: 0; gap: 0; border-radius: 50%; justify-content: center; font-size: 0;
  }
  .biz-save i { font-size: 14px; }
  .biz-ribbon { right: -46px; top: 13px; width: 150px; font-size: 9.5px; padding: 4px 0; }
  .biz-fallback { font-size: 30px; }

  /* ---- blog cards ---- */
  .blog-body { padding: 13px; }
  .blog-body h3 { font-size: 14.5px; line-height: 1.35; }
  .blog-by { font-size: 11px; gap: 5px; margin-bottom: 6px; }
  .blog-body p { font-size: 12.5px; }

  /* the wide (list) card still owns a full-width row, so it keeps the roomier cut */
  .biz-card.is-wide .biz-body { padding: 16px 16px 0; }
  .biz-card.is-wide .biz-tags { display: flex; }
  .biz-card.is-wide .biz-foot { flex-direction: row; align-items: center; padding: 12px 16px 16px; }
  .biz-card.is-wide .view-btn { width: auto; padding: 0 18px; }
  .biz-card.is-wide .biz-save { font-size: 12px; width: auto; height: auto; padding: 7px 13px; border-radius: 999px; gap: 6px; }
}

/* Small phones: buy back the horizontal room the two-up grid needs. */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .grid-2, .grid-3, .grid-4 { gap: 10px; }
  .cat-tile { padding: 18px 8px; }
  .cat-tile-ico { width: 50px; height: 50px; font-size: 23px; }
  .cat-tile h3 { font-size: 13.5px; }
  .biz-body, .blog-body { padding-left: 11px; padding-right: 11px; }
  .biz-foot { padding-left: 11px; padding-right: 11px; }
}

/* ---------- 24. RESPONSIVE CAROUSEL (.carousel-sm) ----------
   A block that reads as a grid on desktop but swipes on touch. The markup is
   the ordinary .carousel / .carousel-track pair, so the existing carousel JS
   drives it unchanged; this rule simply unwinds the track back into a three-up
   grid once there is room for one. Above 992px scrollWidth equals clientWidth,
   so the JS finds a single stop and leaves the dot row empty on its own.
   Below it the standard .carousel-track sizing takes over: two cards on a
   tablet, one full-width card on a phone. */
@media (min-width: 993px) {
  .carousel-sm .carousel-track {
    display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    gap: 26px; overflow: visible; padding-bottom: 0;
  }
  .carousel-sm .carousel-dots { display: none; }
}
@media (max-width: 992px) {
  /* the lift on hover is clipped by the scroll container, so give it headroom */
  .carousel-sm .carousel-track { padding: 6px 2px 10px; }
  /* cards in a track are stretched by the grid; keep their inner column honest */
  .carousel-sm .blog-card { height: 100%; }
}

/* A single long tag ("Ajit Road Bathinda fast food") is one unbreakable chip,
   so in a half-width card it ran past the card edge. Chips now stop at the
   content box and trail off instead of overflowing. */
.blog-tags { min-width: 0; }
.chip { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 25. CAROUSEL CONTROL ROW ----------
   theme.js gathers prev / dots / next into .carousel-ctl. On desktop the arrows
   keep their absolute position against .carousel, so the row renders as the dot
   strip it always was. Below 1100px — where the old rule simply hid the arrows —
   the row turns into a centred prev · dots · next bar under the track, which is
   the only control surface a touch user can actually see. */
.carousel-ctl[hidden] { display: none; }
.carousel-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.carousel-nav:disabled:hover { background: #fff; color: var(--ink); border-color: var(--line); }

@media (max-width: 1100px) {
  .carousel-ctl {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-top: 22px;
  }
  /* back in flow, sized to a comfortable tap target */
  .carousel-nav {
    display: grid; position: static; top: auto; left: auto; right: auto;
    width: 44px; height: 44px; font-size: 18px;
  }
  .carousel-dots { margin-top: 0; }
}

/* the responsive blog block is a plain grid above 992px — no controls there */
@media (min-width: 993px) { .carousel-sm .carousel-ctl { display: none; } }

/* ---------- 27. HERO PHOTO ON NARROW SCREENS ----------
   The hero art is a 1672x941 panorama built for a desktop banner: the farm and
   the market sit in the left ~20%, the Golden Temple in the right ~25%, and the
   whole middle is an almost-black dead zone kept clear so the headline has
   somewhere quiet to sit.

   On a phone the hero is taller than it is wide (the search form stacks), so
   background-size: cover scales to the HEIGHT and only ~26% of the image width
   survives the crop. The old 78% anchor put that narrow window at roughly
   58-84% of the photo — i.e. mostly the dead zone — and the .42-.78 scrim on
   top finished the job, which is why the hero read as a flat grey block with no
   picture in it at all.

   Anchoring near the right edge puts the window on 71-97% of the photo, which
   is exactly the temple, its reflection and the lit market street. */
@media (max-width: 900px) {
  .hero.has-bg { background-position: 82% center; }
}
@media (max-width: 700px) {
  .hero.has-bg { background-position: 96% center; }
  /* the crop now lands on the bright half of the photo, so the scrim can ease
     off and still clear the text, which carries its own shadow */
  .hero.has-bg::after {
    background: linear-gradient(180deg, rgba(14, 11, 7, .34) 0%, rgba(14, 11, 7, .52) 50%, rgba(14, 11, 7, .74) 100%);
  }
}

/* The inline style sets background-image only, which replaces the gradient from
   the .hero shorthand. Until the photo arrives — or if it ever 404s — that left
   the scrim sitting on white, i.e. the same grey wash. A colour underneath
   keeps the hero on-brand while the image loads. */
.hero.has-bg { background-color: #17140f; }

/* ---------- 28. LISTING DETAIL: NARROW-SCREEN OVERFLOW ----------
   Section 23 swept .spec-grid into the two-up phone treatment along with the
   other card grids. That was wrong for this one. A spec item carries a website
   or an email — "mczoologicalpark@gmail.com" is a single 26-character token
   with no break opportunity in it — and a grid item's default min-width:auto
   means the track cannot shrink below that token. Two such tracks are wider
   than .panel-card, and since every ancestor up to .container is itself a grid
   or flex item with min-width:auto, the excess propagated all the way out: the
   document became wider than the viewport, the listing page could be panned
   sideways, and the left edge of the header, the hero and every card was cut
   off. Back to one column here, and the tokens are taught to break.

   .contact-row a already carried word-break: break-word for exactly this
   reason (line 627) — the spec list and the quick-fact chips never got it. */
@media (max-width: 700px) {
  .spec-grid { grid-template-columns: 1fr; }
}

.spec-item { min-width: 0; }
.spec-item i { flex: none; }
.spec-item b, .spec-item span, .spec-item a { min-width: 0; overflow-wrap: anywhere; }

.qf { min-width: 0; max-width: 100%; }
.qf i { flex: none; }
.qf b, .qf span, .qf a { min-width: 0; overflow-wrap: anywhere; }

.service-list li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* No track in the detail column may set its own floor from its contents —
   without this a single long token anywhere inside re-inflates the whole page.
   (The guard stays off <html>: .site-header is position:sticky, and an
   overflow on the root element would break it.) */
.detail-layout > *, .detail-main, .panel-card, .side-card { min-width: 0; }

/* the title column asked for 260px even when the screen had less to give */
.detail-titles { min-width: min(260px, 100%); }

/* ---------- 29. reCAPTCHA WIDGET ----------
   The v2 checkbox is a fixed-width 302px iframe. Inside a padded card on a
   360px phone that is wider than the space available, and an iframe cannot be
   reflowed — so it is scaled down from its top-left corner instead, with the
   wrapper height corrected to match so it does not leave a gap underneath. */
.rc-box { margin: 16px 0 4px; }
.rc-box .g-recaptcha { display: inline-block; }
.rc-box.rc-v3 { margin: 6px 0 2px; }
.rc-badge-note { font-size: 11.5px; color: var(--muted); }

@media (max-width: 400px) {
  .rc-box .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
  .rc-box:has(.g-recaptcha) { height: 66px; }
}

/* the footer newsletter sits on a dark band */
.sub-form .rc-badge-note { color: rgba(255, 255, 255, .6); }
.sub-form .rc-box { margin: 12px 0 0; }

/* ---------- 30. VERIFIED MARK ----------
   The same badge was drawn three different ways: a washed-out translucent pill
   in the hero, an ORANGE tick on the overview heading, and a blue circle on the
   listing cards. Orange is the brand colour, so an orange tick read as
   decoration rather than as verification. One blue mark now covers all of them.

   bi-patch-check-fill is the scalloped badge shape people already associate
   with a verified account, so it needs no explaining. */
:root { --verified: #1d9bf0; --verified-ink: #0b6ba8; }

/* inline mark that follows a business name */
.vtick {
  color: var(--verified);
  font-size: 1em;
  margin-left: .32em;
  vertical-align: baseline;
  line-height: 1;
}
.vtick-lg { font-size: .62em; vertical-align: .18em; }

/* The hero pill was removed on 2026-09-19: three badges in a row broke the
   symmetry of the orange category/featured pair. The mark now lives on the
   business name instead. Rule kept so restoring the pill is markup-only. */
.badge.badge-verified {
  background: var(--verified);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(29, 155, 240, .35);
}
.badge.badge-verified i { font-size: 13px; }

/* trust row at the head of the contact card */
.verified-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(29, 155, 240, .08);
  border: 1px solid rgba(29, 155, 240, .22);
}
.verified-note > i { color: var(--verified); font-size: 17px; line-height: 1.3; flex: none; }
.verified-note span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.verified-note b { display: block; color: var(--verified-ink); font-size: 13px; font-weight: 700; }

/* the old circle-with-a-check on listing cards is retired in favour of .vtick,
   but the rule stays so any markup still using it matches the new colour */
.verified-tick { background: var(--verified); }

/* screen-reader-only text, so the mark is not silent to a reader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* On the dark hero the mark stays brand-blue. A dark halo rather than a glow
   keeps it readable wherever the cover photo happens to be light. */
.detail-hero h1 .vtick {
  color: var(--verified);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4);
}

/* ---------- 31. CONTACT FORM STATUS ----------
   The form posts over fetch, so nothing navigates and there is no flash
   message to land on. This panel sits directly above the form and is the only
   feedback the visitor gets - it has to be impossible to miss. */
.cf-status {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 13px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.55; font-weight: 500;
  background: var(--bg-tint); color: var(--ink);
}
.cf-status[hidden] { display: none; }
.cf-status::before { font-size: 16px; line-height: 1.4; flex: none; }

.cf-status.is-ok {
  background: #ecfdf5; border-color: #a7f3d0; color: #065f46;
}
.cf-status.is-ok::before { content: '✅'; }

.cf-status.is-error {
  background: #fef2f2; border-color: #fecaca; color: #991b1b;
}
.cf-status.is-error::before { content: '⚠️'; }

.cf-status.is-pending {
  background: var(--bg-tint); border-color: var(--line); color: var(--muted);
}
.cf-status.is-pending::before { content: '⏳'; }

/* the button says what it is doing while the request is in flight */
.contact-form .cf-submit[disabled] { opacity: .65; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .cf-status { scroll-behavior: auto; }
}

/* ---------- 32. NO GHOST WORD BEHIND SECTION TITLES ----------
   .sec-head .watermark painted a large script word behind every section
   heading at 7% opacity ("Achievement" behind "Some True Facts", "Explore"
   behind "Browse By Category"). It read as a smudge or a rendering fault
   rather than as decoration, and because it is real text in the markup — not
   a pseudo-element — a screen reader announced the stray word before the
   heading it sits behind.

   display:none takes it out of the picture and out of the accessibility tree
   in one move. The spans stay in the markup, so restoring the effect is a
   matter of deleting this rule. */
.sec-head .watermark { display: none !important; }

/* ---------- 33. FOOTER COLUMNS SIDE BY SIDE ON SMALL SCREENS ----------
   The link columns were fighting the grid below desktop. At 1100px the track
   count dropped to three while there were still four items, so Company wrapped
   onto a second row underneath the brand block; at 700px everything stacked
   into one very tall column.

   Both sizes now put the brand on its own full-width row and lay the link
   columns out beneath it — three across on a tablet, two across on a phone
   (Directory is hidden there). The divider moves onto the brand block, where
   it spans the full width and reads as one line instead of one per column. */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
  .f-brand {
    grid-column: 1 / -1;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .f-about { max-width: 520px; }
  /* per-column rules from the stacked layout no longer apply side by side */
  .f-col, .f-col + .f-col { border-top: 0; padding-top: 0; }
}

@media (max-width: 700px) {
  /* two columns: Locations and Company, since Directory is hidden here */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .f-brand { padding-bottom: 22px; }
  .site-footer h4 { margin-bottom: 12px; }
  .f-links { gap: 11px; }
  .f-links a { font-size: 14.5px; }
}

/* one narrow column only where two genuinely will not fit */
@media (max-width: 360px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .f-col + .f-col { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
}

/* ---------- 34. LISTING HERO WITH NO COVER ----------
   A listing with no artwork used to get a flat slab of --navy. It now draws a
   gradient tinted with its own category colour (--biz-tint, set inline from
   biz_color()), so an Entertainment listing and a Healthcare one do not look
   identical and neither looks like a loading error.

   This is the last resort: the listing's own cover wins, then the default set
   in Settings, then this. */
.detail-hero.has-no-cover {
  background-color: var(--navy);
  background-image:
    radial-gradient(760px 340px at 14% 6%,  var(--biz-tint, var(--primary)), transparent 68%),
    radial-gradient(620px 300px at 88% 94%, rgba(245, 117, 32, .42), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 45%);
}
/* the scrim over a photo is heavier than this needs - lift it so the tint reads */
.detail-hero.has-no-cover::before {
  background: linear-gradient(180deg, rgba(18, 24, 33, .58), rgba(18, 24, 33, .86));
}

/* ---------- 35. LISTING VISIT COUNTER ----------
   Sits in the hero meta row beside the address and hours. Kept quiet - it is
   social proof, not a headline - but the number itself is emphasised so it
   reads at a glance. */
.detail-views {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13.5px;
  white-space: nowrap;
}
.detail-views i { color: var(--primary); font-size: 13px; }
.detail-views b { color: #fff; font-weight: 700; }

@media (max-width: 700px) {
  .detail-views { font-size: 12.5px; padding: 3px 10px 3px 9px; }
}

/* ============ 36. 404 — homepage countdown ============ */
/* The countdown block is hidden in the markup and revealed by script, so a
   visitor without JavaScript never sees a promise of a redirect that cannot
   happen. Only the styling lives here. */
.nf-redirect {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, .1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nf-count {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted, #64748b);
}
.nf-count b {
  display: inline-block;
  min-width: 1.2em;            /* 5 -> 4 must not shift the line */
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--brand, #0f766e);
}
.nf-bar {
  display: block;
  width: min(240px, 70%);
  height: 3px;
  border-radius: 999px;
  background: var(--bg-tint, rgba(15, 23, 42, .08));
  overflow: hidden;
}
.nf-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand, #0f766e);
  transition: width 1s linear;
}
.nf-redirect.is-cancelled .nf-bar { display: none; }

/* Someone who set "reduce motion" gets the number without the sliding bar. */
@media (prefers-reduced-motion: reduce) {
  .nf-bar i { transition: none; }
}


/* ============ 37. Mobile drawer title ============ */
/* Was an <h3>; it sat before the page's <h1> and broke the heading outline.
   The dialog names itself with aria-label, so this is now presentational. */
.mtitle {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
/* ============ 38. Listing rating — hero widget ============ */
/* Sits under the listing title with the visit count beside it. The stars are
   real radio inputs; the labels are what you see, which keeps keyboard and
   screen-reader behaviour native and makes the form work without script. */
.rate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 10px 0 12px;
}

.star-rate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 5px 13px 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
}
.star-rate fieldset { display: contents; border: 0; margin: 0; padding: 0; }

/* The inputs stay in the accessibility tree and keep focus — they are just not
   drawn, because the label's star is the control the eye follows. */
.sr-in {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Laid out right-to-left so "this star and everything before it" is a plain
   ~ sibling selector: the markup lists 5 first, the row renders 1 first. */
.sr-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  position: relative;
}
.sr-label {
  cursor: pointer;
  line-height: 1;
  padding: 2px 1px;
  color: rgba(255, 255, 255, .3);
  transition: color .12s ease, transform .12s ease;
}
.sr-label i { font-size: 17px; display: block; }

/* The stored average, drawn underneath, so the widget shows the score at rest
   rather than an empty row of outlines. */
.sr-stars::before {
  content: "★★★★★";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sr-avg, 0%);
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 2px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--amber);
  pointer-events: none;
}
/* Hovering or choosing takes over from the average. */
.sr-stars:hover::before,
.sr-stars:focus-within::before { opacity: 0; }

.sr-label:hover,
.sr-label:hover ~ .sr-label,
.sr-in:focus-visible + .sr-label,
.sr-in:focus-visible + .sr-label ~ .sr-label,
.sr-in:checked + .sr-label,
.sr-in:checked + .sr-label ~ .sr-label {
  color: var(--amber);
}
.sr-label:hover { transform: scale(1.12); }
.sr-in:focus-visible + .sr-label { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

.sr-score { font-size: 13.5px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.sr-score b { color: #fff; font-weight: 700; font-size: 15px; }
.sr-out { color: rgba(255, 255, 255, .5); margin-right: 4px; }
.sr-count { color: rgba(255, 255, 255, .7); }

/* Only needed when scripting is off — the script submits on choice. */
.sr-go {
  border: 0; cursor: pointer;
  padding: 4px 11px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font: 600 12.5px/1 var(--font);
}
.js .sr-go { display: none; }

.sr-msg { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.sr-msg:empty { display: none; }
.star-rate.is-error .sr-msg { color: #ffd0b0; }

/* Already voted, or a vote in flight: the stars stop inviting a click. */
.star-rate.is-locked .sr-label,
.star-rate.is-busy .sr-label { cursor: default; pointer-events: none; }
.star-rate.is-locked .sr-stars::before,
.star-rate.is-busy .sr-stars::before { opacity: 1; }
.star-rate.is-busy { opacity: .7; }

/* A moment of acknowledgement, then back to normal. */
@keyframes srPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.star-rate.is-done .sr-stars::before { animation: srPop .45s ease; }

@media (prefers-reduced-motion: reduce) {
  .sr-label, .star-rate.is-done .sr-stars::before { transition: none; animation: none; }
  .sr-label:hover { transform: none; }
}

@media (max-width: 700px) {
  .rate-row { gap: 8px 10px; }
  .star-rate { padding: 4px 11px 4px 9px; gap: 5px 8px; }
  .sr-label i, .sr-stars::before { font-size: 15px; }
  .sr-score { font-size: 12.5px; }
  .sr-msg { flex: 1 0 100%; font-size: 12px; }
}