/* ===========================
   THEME TOKENS & GLOBAL BASE
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&display=swap');


/* Light theme tokens */
:root {
  --tg-app-bg:        #f8fafc; /* page background */
  --tg-surface:       #ffffff; /* cards, menus, chips */
  --tg-surface-2:     #f1f5f9; /* lifted panels */
  --tg-surface-3:     #adadad; /* lifted panels */
  --tg-text:          #3a3e47; /* primary text */
  --tg-text-muted:    #64748b; /* secondary text/icons */
  --tg-border:        #e2e8f0; /* default borders */
  --tg-accent:        #2563eb; /* blue-600 */
  --tg-accent-soft:   #e9f5ff; /* soft accent bg */

  /* Bootstrap bridge */
  --bs-body-bg:       var(--tg-app-bg);
  --bs-body-color:    var(--tg-text);
  --bs-border-color:  var(--tg-border);
  --hb-hero-h: 615px;   /* previous hero image height */
  --hb-overlap: -32px;   /* how far the glass should ride over the image */
  --hb-glass-w: 90%;           /* target width of the frosted container */
  --hb-glass-max: 1100px;      /* cap on very wide screens */

  --bs-font-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, "Noto Sans",
                        "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",
                        "Noto Color Emoji";

  --hb-overlay-width: 60%;     /* change to 50% / 70% etc. */
  --hb-overlay-max: 1100px;    /* never exceed this pixel width */
  --hb-overlay-min: 360px;     /* don't shrink below this (optional) */

  --hb-tab-fs: 16px;

}

/* Dark theme tokens (Linear-style palette) */
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --tg-app-bg:        #0b0f19; /* very dark navy */
  --tg-surface:       #0e1422; /* card/menu surface */
  --tg-surface-2:     #151b2b; /* lifted surface */
  --tg-text:          #e6e8ee; /* high-contrast text */
  --tg-text-muted:    #9aa3b2; /* secondary text */
  --tg-border:        #1f2433; /* subtle borders */

  /* Accent (Magic Blue-ish) */
  --tg-accent:        #5E6AD2;
  --tg-accent-contrast:#ffffff;
  --tg-accent-soft:   color-mix(in oklab, var(--tg-accent) 18%, transparent);

  /* Bootstrap bridge */
  --bs-body-bg:       var(--tg-app-bg);
  --bs-body-color:    var(--tg-text);
  --bs-border-color:  var(--tg-border);
  --bs-primary:       var(--tg-accent);
  --bs-link-color:    color-mix(in oklab, var(--tg-accent) 88%, white 12%);
  --bs-link-hover-color: color-mix(in oklab, var(--tg-accent) 100%, white 0%);
}

/* Page background + text */
html, body { 
  background: var(--tg-app-bg); 
  color: var(--tg-text); 
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container, .container-fluid { background: transparent; }

/* ===========================
   COMPONENTS (token-driven)
   =========================== */

/* Toolbar */
.tg-toolbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: color-mix(in oklab, var(--tg-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: none;
  overflow: visible;
}
.tg-toolbar-inner { padding: .75rem 0; }

/* Selected chips */
.selected-chips {
  color: var(--tg-text);
  display:flex; gap:.5rem; flex-wrap:wrap; text-decoration: none;
}
.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid var(--tg-border);
  border-radius:999px;
  background:var(--tg-surface);
  font-weight:600; text-decoration: none; color: var(--tg-text);
}
.chip .x:hover{ opacity:1; text-decoration: none;}

/* ===========================
   TAG PILLS (updated)
   =========================== */

/* Base: make sure both <a> and <span> pills are readable */
.badge.tag-pill,
span.badge.tag-pill,
a.badge.tag-pill {
  color: var(--tg-text) !important;
  border-color: var(--tg-border) !important;
}

/* Inactive chips — lighter background + darker, readable text */
.tag-pill:not(.active),
.entry-card .tag-pill:not(.active) {
  background: color-mix(in oklab, var(--tg-surface) 96%, white 4%) !important;
  border-color: color-mix(in oklab, var(--tg-border) 80%, white 20%) !important;
  color: color-mix(in oklab, var(--tg-text) 85%, black 15%) !important;
}

/* Keep Bootstrap “text-bg-light” variant in sync when it shows up */
.badge.text-bg-light.tag-pill:not(.active){
  background-color: color-mix(in oklab, var(--tg-surface) 96%, rgb(255, 255, 255) 4%) !important;
  border-color: color-mix(in oklab, var(--tg-border) 80%, white 20%) !important;
  color: color-mix(in oklab, var(--tg-text) 85%, black 15%) !important;
}

/* Hover on inactive: gentle affordance */
a.tag-pill:not(.active):hover{
  border-color: color-mix(in oklab, var(--tg-accent) 55%, var(--tg-border) 45%) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--tg-accent) 20%, transparent);
  text-decoration: none;
}

/* Active chips — slightly darker than the list container so they pop */
.tag-pill.active,
.entry-card .tag-pill.active {
  background: color-mix(in oklab, var(--tg-accent) 42%, var(--tg-surface) 58%) !important;
  border-color: color-mix(in oklab, var(--tg-accent) 92%, var(--tg-surface) 8%) !important;
  color: var(--tg-text) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--tg-accent) 45%, transparent);
}

/* Dark theme tweaks: slightly brighter than card for lift */
html[data-bs-theme="dark"] .tag-pill:not(.active),
html[data-bs-theme="dark"] .badge.text-bg-light.tag-pill:not(.active){
  background: color-mix(in oklab, var(--tg-surface) 85%, white 15%) !important;
  border-color: color-mix(in oklab, var(--tg-border) 75%, white 25%) !important;
  color: var(--tg-text) !important;
}
html[data-bs-theme="dark"] .tag-pill.active,
html[data-bs-theme="dark"] .entry-card .tag-pill.active{
  background: color-mix(in oklab, var(--tg-accent) 55%, var(--tg-surface) 45%) !important;
}

/* Gentle hover focus for anchors (both active & inactive) */
a.tag-pill {
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
a.tag-pill:hover,
a.tag-pill:focus {
  border-color: var(--tg-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--tg-accent) 35%, transparent);
  text-decoration: none;
}

/* ——— the rest of your file stays the same ——— */

/* Buttons */
.dropdown-toggle { font-weight: 600; }
.btn { box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.btn-outline-danger.btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2; padding-top: .25rem; padding-bottom: .25rem;
}
/* Primary adopts accent in both themes; refine states */
.btn-primary {
  --bs-btn-bg: var(--tg-accent);
  --bs-btn-border-color: var(--tg-accent);
  --bs-btn-color: var(--tg-accent-contrast);
  --bs-btn-hover-bg: color-mix(in oklab, var(--tg-accent) 92%, black 8%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--tg-accent) 92%, black 8%);
  --bs-btn-active-bg: color-mix(in oklab, var(--tg-accent) 85%, black 15%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--tg-accent) 85%, black 15%);
  --bs-btn-focus-shadow-rgb: 94,106,210;
}

/* Force white text on primary buttons (both <button> and <a>) */
.btn-primary,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:visited {
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  color: #fff !important;
}

/* Outline secondary (cool gray chrome) */
.btn-outline-secondary {
  --bs-btn-color: var(--tg-text-muted);
  --bs-btn-border-color: #2a3143;
  --bs-btn-hover-bg: #1a2131;
  --bs-btn-hover-border-color: #384158;
  --bs-btn-active-bg: #131a2a;
  --bs-btn-active-border-color: #3f4861;
}

/* Search */
#searchForm{ display: flex; flex-direction: column; align-items: center; }
.search-wrap { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.search-pill{
  width: 100%; border-radius: 999px; padding-left: 2.25rem; padding-right: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  background: var(--tg-surface); color: var(--tg-text); border:1px solid var(--tg-border);
  font-size: 1.1rem; font-weight: 600; line-height: 1.4;
}
.search-icon{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; pointer-events: none; color: var(--tg-text-muted);
}
.search-pill::placeholder { color: var(--tg-text-muted); }
.search-inner{ position: relative; width: min(600px, 90%); margin: 0 auto; }

/* Responsive search sizing */
@media (max-width: 576px) and (orientation: portrait) {
  .search-pill { width: 100%; max-width: 100%; }
}

/* --- SMALL SCREENS: lift the glass panel up over the hero --- */
@media (max-width: 992px) {
  /* Ensure hero provides space so the glass doesn't collide with other content */
  .hb-media { min-height: 300px; } /* tweak to taste (220–360px common) */

  .hb-glass {
    position: absolute;
    left: 50%;
    top: 48%;                      /* base vertical anchor (adjustable) */
    transform: translate(-50%, -50%); /* center element on the anchor point */
    width: 92%;                    /* make it nearly full-width on small screens */
    max-width: 760px;              /* cap width on larger small screens */
    padding: 1rem;                 /* keep the internal spacing comfortable */
    z-index: 30;                   /* sit above the hero image / overlay */
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-radius: 12px;
    background: color-mix(in srgb, rgba(255,255,255,0.7) 88%, transparent); /* frosted look fallback */
    backdrop-filter: blur(6px);    /* optional: nice frosted glass */
  }

  .hb-media-heading__title {
    font-size: 2.7rem; font-weight: 400; line-height: 1.2;
  }

  /* If you want the glass to sit even higher on very narrow phones */
  @media (max-width: 420px) {
    .hb-glass {
      top: 40%;
      transform: translate(-50%, -50%);
      padding: 0.75rem;
    }
    .hb-media { min-height: 260px; }
  }
}

/* Tweak for small screens: full-ish width and a bit less overlap */
@media (max-width: 576px) {
  :root { --hb-overlap: 56px; }
  .hb-hero .hb-glass { width: 92%; }
}
@media (orientation: landscape) and (max-width: 900px){
  .container{ max-width: 100% !important; }
}
@media (min-width: 992px){ .search-inner{ width: 400px; } }

/* Safe-area helper */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--bs-gutter-x, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--bs-gutter-x, 1rem), env(safe-area-inset-right));
  }
  .pe-safe { padding-right: max(0.5rem, env(safe-area-inset-right)); }
}
@media (orientation: landscape) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Chip rail */
.chip-rail {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip-rail { scrollbar-width: none; }
@supports (-webkit-touch-callout: none) { .chip-rail { -webkit-overflow-scrolling: touch; } }

/* Dropdowns / menus */
.chip-dropdown { position: relative; display: inline-block; flex: 0 0 auto; }
.chip-toggle { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

.chip-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px; max-width: 75vw; max-height: 360px; overflow: auto;
  background: var(--tg-surface); border: 1px solid var(--tg-border);
  border-radius: .5rem; box-shadow: 0 12px 24px rgba(15,23,42,.18);
  display: none; z-index: 1080;
}
.chip-menu[data-portal="true"] { position: fixed; top: 0; left: 0; display: block; z-index: 2000; }
.chip-menu.show { display: block; }

.chip-item { padding: .5rem .75rem; text-decoration: none; color: inherit; display: flex; align-items: center; }
.chip-item:hover,
.chip-item.active { background: var(--tg-surface-2); }
.chip-item .label { white-space: normal; line-height: 1.3; }
.chip-item .count { margin-left: .5rem; opacity: .7; }

/* Suggestions menu */
.suggest-menu{
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-width: none;
  border: 1px solid var(--tg-border); border-radius: 10px; background: var(--tg-surface);
  box-shadow: 0 10px 24px rgba(15,23,42,.10); padding: 6px; z-index: 1500;
}
.suggest-item{
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  border-radius: 8px; cursor: pointer;
}
.suggest-item.is-active,
.suggest-item:hover { background: var(--tg-surface-2); }
.suggest-empty{ padding: .45rem .6rem; color: var(--tg-text-muted); }

/* Typewriter caret + measuring mirror */
.typewriter { position: relative; }
.type-caret, .tw-mirror { left: 0; }
.type-caret{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2px; height: 1.2em; background: var(--tg-text);
  opacity: .9; pointer-events: none; animation: tw-blink 1s steps(1,end) infinite;
}
@keyframes tw-blink { 0%, 50% { opacity: .0; } 51%,100% { opacity: .9; } }
.tw-mirror{
  position: absolute; top: 50%; transform: translateY(-50%);
  visibility: hidden; white-space: pre; font: inherit; letter-spacing: inherit; box-sizing: border-box;
}

/* Pros/Cons subtle helpers */
#pros-cons-heading + .row ul li div > div { line-height: 1.35; }
.bg-success-subtle { background-color: #e6f4ea !important; }
.bg-danger-subtle  { background-color: #fde7e9 !important; }
html[data-bs-theme="dark"] .bg-success-subtle { background-color: #163a2a !important; }
html[data-bs-theme="dark"] .bg-danger-subtle  { background-color: #3a1620 !important; }
/* Dark theme glass polish (keeps your previous intent but ensures override) */
html[data-bs-theme="dark"] .hb-hero .hb-glass{
  background: color-mix(in oklab, var(--tg-surface) 55%, transparent);
  border-color: color-mix(in oklab, var(--tg-border) 70%, transparent);
}

/* Logos */
.logo-circle {
  width: 90px; height: 90px; flex: 0 0 90px; border-radius: 50%;
  background: var(--tg-surface); border: 1px solid var(--tg-border);
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.logo-circle img { width: 80%; height: 80%; object-fit: contain; display: block; }
@media (max-width: 576px) and (orientation: portrait) {
  .logo-circle { width: 50px; height: 50px; flex: 0 0 50px; }
}
@media (max-width: 812px) and (orientation: landscape) {
  .logo-circle { width: 50px; height: 50px; flex: 0 0 50px; }
}

/* Entry card layout */
.entry-media{ display: flex; align-items: flex-start; gap: 12px; }
.entry-main{ flex: 1 1 auto; min-width: 0; }
.entry-title{ line-height: 1.25; margin-right: .5rem; }
@media (max-width: 576px) { .entry-media { align-items: flex-start; } }
.entry-desc{ margin-top: 2px; }

/* keep tags tidy */
.entry-tags .tag-pill{ cursor: pointer; }

/* Let the tags container wrap to multiple rows and grow naturally */
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: flex-start;
  align-content: flex-start;
  overflow: visible;               /* never clip extra rows */
}
.entry-tags-wrap { overflow: visible; } /* ensure the wrapper doesn't clip */

/* Square logo avatar */
.logo-square {
  width: 80px; height: 80px; flex: 0 0 80px; background: transparent;
  box-shadow: none !important; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: none;
}
.logo-square img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 576px) { .logo-square { width: 60px; height: 60px; flex: 0 0 60px; } }

/* Entry cards */
.entry-card.list-group-item {
  background-color: var(--tg-surface);
  border: 1px solid var(--tg-border);
  transition: border-color 0.2s ease;
}
.entry-card.list-group-item:hover {
  background-color: var(--tg-surface);
  border-color: var(--tg-accent);
}
.entry-info {
  background-color: var(--tg-surface-2);
  border-radius: 6px;
  padding: 1rem;
  border: 1px solid var(--tg-border);
}
.entry-card {
  border: 1px solid var(--tg-border);
  border-radius: 0 !important;
  background-color: var(--tg-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
  padding: 1rem 1rem;
  color: var(--tg-text);
  overflow: visible;               /* allow inner content to expand */
}
.entry-card:hover,
.entry-card:focus-within {
  border-color: var(--tg-accent);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--tg-accent) 20%, transparent);
}
.entry-card + .entry-card { margin-top: 12px; }
.entry-card  .tag-pill:not(a),
/* .entry-card a, */
.entry-card button { cursor: auto; }

/* Make matched intent chips inside listing cards pop a bit more (already updated above) */

/* Badges */
.entry-badge {
  color: var(--tg-text) !important;
  background-color: var(--tg-surface-2);
  border-color: var(--tg-border);
  max-width: 300px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; vertical-align: middle;
}
@media (max-width: 576px) { .entry-badge { max-width: 175px; } }

/* Collapse helpers */
.collapse > :first-child { margin-top: 0 !important; }
.collapsing { overflow: hidden; }

/* Alternatives */
.alt-item { border: 1px solid var(--tg-border); background: var(--tg-surface); }
.alt-item:hover {
  border-color: var(--tg-accent);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--tg-accent) 20%, transparent);
}
.alt-logo {
  width: 48px; height: 48px; flex: 0 0 48px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; object-fit: contain; border-radius: 6px; box-shadow: none;
}
.alt-logo--fallback { font-size: 1.25rem; }
.alt-title { max-width: 100%; }
.alt-desc { line-height: 1.35; }

.svg-link { width: 1em; height: 1em; vertical-align: -0.125em; }

/* ===========================
   SMALL DARK-ONLY REFINEMENTS
   =========================== */

/* Dark toolbar chrome & subtle scrollbars */
html[data-bs-theme="dark"] .tg-toolbar{
  background: rgba(11,15,25,.92);
  border-bottom: 1px solid var(--tg-border);
}
html[data-bs-theme="dark"] .search-pill { box-shadow: 0 1px 3px rgba(0,0,0,.5); }
html[data-bs-theme="dark"] .entry-card:hover,
html[data-bs-theme="dark"] .entry-card:focus-within{
  box-shadow: 0 4px 16px rgba(96,165,250,.15);
}
html[data-bs-theme="dark"] .chip-rail{ scrollbar-color: #374151 transparent; }

/* Readable pills when template uses "text-bg-light" */
.tag-pill.text-bg-light {
  background-color: var(--tg-surface-2) !important;
  color: var(--tg-text) !important;
  border-color: var(--tg-border) !important;
}

/* Link color enforcement (in case some areas bypass Bootstrap utilities) */
html[data-bs-theme="dark"] a { color: var(--bs-link-color); }
html[data-bs-theme="dark"] a:hover { color: var(--bs-link-hover-color); }

.entry-screenshot .screenshot-aspect {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .5rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.entry-screenshot .screenshot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screenshot-link {
  display: block;
  text-decoration: none;
  position: relative;
}
.screenshot-link::after {
  content: "View larger";
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  font-size: .75rem;
  padding: .25rem .5rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: .25rem;
  opacity: 0;
  transition: opacity .15s ease-in-out;
  pointer-events: none;
}
.screenshot-link:hover::after,
.screenshot-link:focus::after { opacity: 1; }

/* Keep Bootstrap’s layering, but above any local z-indexes */
.modal { z-index: 2000; }
.modal .modal-body img { will-change: transform; transform: translateZ(0); }
.modal-backdrop { z-index: 1995; }

/* Make sure the sticky card doesn’t try to sit above the modal */
.sticky-lg-top { z-index: auto; }
.modal-open .sticky-lg-top { position: static !important; }

/* Intent match highlight (subtle, works in light & dark) */
.card.intent-match {
  background: var(--tg-accent-soft);
  border-color: var(--tg-accent);
}

/* Smooth hover transitions */
.card { 
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Make the whole card glow when:
   - the card is hovered,
   - anything inside is focused,
   - specifically the .card-body is hovered/focused */
.card:hover,
.card:focus-within,
.card:has(.card-body:hover),
.card:has(.card-body:focus-within) {
  border-color: var(--tg-accent);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--tg-accent) 40%, transparent);
}

/* Little “Matches …” badge */
.intent-badge {
  --_bg: color-mix(in oklab, var(--tg-accent) 10%, transparent);
  --_fg: var(--tg-text);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--tg-accent);
  border-radius: 999px;
  padding: .2rem .5rem;
  font-weight: 600;
  font-size: .975rem;
}

/* Subtle explanatory chip (already added earlier, included for completeness) */
.hint-badge{
  background: color-mix(in oklab, var(--tg-surface-2) 85%, white 15%);
  color: var(--tg-text-muted);
  border: 1px solid var(--tg-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: .75rem;
  padding: .2rem .5rem;
}

/* Centered divider with label before non-matching group */
.section-divider{
  display:flex;
  align-items:center;
  gap:.75rem;                 /* spacing between text and lines */
  margin: 1.55rem 1rem;
  color: var(--tg-text-muted);
  font-weight:700;
  line-height:1.2;
}

.section-divider::before,
.section-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background: var(--tg-border);
  position: relative;
  top:.06em;                  /* optical centering with text */
}

.section-divider__text{
  position: relative;
  z-index: 1;                 /* sit above the lines */
  padding: .1rem .5rem;       /* creates the “gap” */
  background: var(--tg-app-bg);
  border-radius: .25rem;
  font-size: 1.4rem;
}

.soft-divider > span{ background:var(--tg-app-bg); padding:0 .5rem; }


html[data-bs-theme="dark"] .hint-badge{
  background: color-mix(in oklab, var(--tg-surface-2) 70%, white 30%);
  color: var(--tg-text-muted);
  border-color: var(--tg-border);
}
html[data-bs-theme="dark"] .soft-divider > span{ background: var(--tg-app-bg); }

/* New frosted design */

/* ======= Frosted “glass” bar ======= */
/* ===========================
   LISTEO-STYLE HERO + FILTERS
   =========================== */

/* ===== Listeo-like hero + frosted dock ===== */

.hb-hero {
  position: relative;
  overflow: visible;
  /* padding-top: clamp(16px, 3vh, 40px); */
  /* padding-bottom: 20px; */
  padding-bottom: 100px; /* room for the dock below */
}

.hb-media {
  position: relative;
  margin: 0;
  height: var(--hb-hero-h);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.18);
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  width: 100vw;            /* full viewport width */
}

.hb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Anchor the glass to the bottom of the hero (instead of negative margins) */

.hb-hero .hb-glass {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-1 * var(--hb-overlap));
  margin: 0;                             /* override any earlier margin-top */
  width: var(--hb-glass-w);
  max-width: var(--hb-glass-max);
  z-index: 2;                            /* above the image */
  /* keep your existing frosted styles; re-listing the important bits: */
  border-radius: 10px;
  /* padding: 14px 16px 16px; */
  background: color-mix(in oklab, var(--tg-surface) 25%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
          backdrop-filter: blur(16px) saturate(130%);
  /* border: 1px solid color-mix(in oklab, var(--tg-border) 75%, transparent); */
  box-shadow: 0 12px 28px rgba(15,23,42,.16);
}

.hb-hero,
.hb-media,
.hb-media img,
.hb-media-overlay,
.hb-media-overlay__inner {
  border-radius: 0 !important;
  clip-path: none !important;
}

/* Province tabs */
.hb-tabs{
  /* display:flex; gap: 26px; 
  align-items:center; 
  padding-left: 25px; padding-right: 25px; padding-top: 20px; padding-bottom: 0px;
  overflow:auto; */
  display: flex;
  flex-wrap: wrap;         /* allow wrapping */
  gap: 0.5rem 1rem;        /* row-gap / column-gap */
  justify-content: center; /* optional: center tabs instead of left-align */
  padding: 0.75rem 1rem;   /* give some breathing space */
  max-width: 90%;         /* don’t stretch too wide */
  overflow: visible;       /* no horizontal scroll/clipping */

  /* Font size */
  --hb-tab-fs: clamp(1.1rem, 1.25vw, 1rem);
  --hb-tab-fw: 500; /* 400 if you want extra thin */

}
.hb-tab{
  position: relative; padding: 2px 0; text-decoration: none;
  color: color-mix(in oklab, var(--tg-text) 86%, black 14%);
  white-space: nowrap;
}
.hb-tab:hover{ color: var(--tg-text); }
.hb-tab.is-active{ color: var(--tg-text); }
.hb-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  border-radius: 3px;
  background: #ff2d55; /* small pink underline like Listeo */
}

/* Province tabs: white text on the frosted bar */
.hb-tabs .hb-pill,
.hb-tabs .hb-pill:visited {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Hover + active keep white; add a soft hover wash */
.hb-tabs .hb-pill:hover { 
  color: #fff;
  background: rgba(255,255,255,.07);
}

/* Active underline/indicator keeps contrast */
.hb-tabs .hb-pill.active { color: #fff; }
.hb-tabs .hb-pill.active::after {
  background: var(--tg-accent, #c00f30);
}

/* Frosted, darkened plate behind the pills */
.hb-tabs::before{
  content:"";
  position: absolute;
  inset: -6px;                 /* tiny halo around the group */
  border-radius: 12px;
  background: rgba(0,0,0,.35); /* dark scrim for readability */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 12px 28px rgba(2,6,20,.28);
  z-index: -1;
}

/* Inputs row (white boxes inside the glass) */
.hb-inputs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;


  background:#fff;
  padding: 12px;
  padding-top: 14px;
  width: 100%;
}

.hb-field{
  position:relative; display:flex; align-items:center; gap:.5rem;
  flex: 1 1 260px; min-width: 240px;
  padding: .55rem .875rem;
  background:#fff;
  /* border:1px solid var(--tg-border); */
  border-radius: 12px;
  /* box-shadow: 0 4px 14px rgba(15,23,42,.05); */
}
.hb-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; border:0; outline:0; background:transparent;
  font-weight:600; line-height:1.2; padding-right:1.5rem; color:var(--tg-text);
}
/* Caret */
.hb-field::after{
  content:""; position:absolute; right:.65rem; width:16px; height:16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}


/* Dark tweaks */
html[data-bs-theme="dark"] .hb-glass{
  background: color-mix(in oklab, var(--tg-surface) 55%, transparent);
  border-color: color-mix(in oklab, var(--tg-border) 70%, transparent);
}
html[data-bs-theme="dark"] .hb-field{
  background: color-mix(in oklab, var(--tg-surface) 92%, black 8%);
  border-color: color-mix(in oklab, var(--tg-border) 80%, black 20%);
}

/* Narrow, centered frosted dock */
.hb-glass{ width: 100%; margin-inline: auto; }
@media (min-width: 768px){ .hb-glass { width: 80%; } }
@media (min-width: 992px){ .hb-glass { width: 90%; } }

@media (min-width: 768px) {
  .hb-glass { width: 85%; }  /* tablet */
}

@media (min-width: 992px) {
  .hb-glass { width: 85%; margin-top: clamp(-96px, -10vh, -64px); }
}


/* Province tabs on the frosted bar — inactive light grey, active white + red underline */
/* .hb-tabs { padding: 10px 2px 10px; } */

.hb-tabs .hb-tab {
  position: relative;
  color: rgba(255,255,255,.72);          /* inactive = light grey on glass */
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: color .15s ease;
  height: 30px;

  font-size: var(--hb-tab-fs);
  font-weight: var(--hb-tab-fw);
  letter-spacing: .01em; /* tiny tracking helps lighter weights */
}

.hb-tabs .hb-tab:hover {                 /* hover = brighter */
  color: rgba(255,255,255,.95);
}

.hb-tabs .hb-tab.is-active {             /* active = full white */
  color: #fff;
}

.hb-tabs .hb-tab::after {                /* underline (off by default) */
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0px;                          /* sits below text */
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color .15s ease;
}

.hb-tabs .hb-tab.is-active::after {      /* red underline when active */
  background: var(--hb-underline, #f91942);
}

/* Optional keyboard focus ring for accessibility */
.hb-tabs .hb-tab:focus-visible {
  outline: none;
  text-decoration: none;
  color: #fff;
}


/* Opening hours card  */
.opening-hours-card {
  border-radius: 6px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
  max-width: 420px;
  padding: 0;
  overflow: visible;
  font-family: var(--bs-font-sans-serif);
}

.opening-hours-inner {
  padding: 16px;
  position: relative;
}

.opening-hours-title {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--tg-text);
}

.opening-hours-sep {
  border: 0;
  height: 1px;
  background: var(--tg-border);
  margin: 8px 0 12px 0;
}

/* Table layout */
.opening-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--tg-text-muted);
}
.opening-hours-table .oh-day {
  width: 50%;
  font-weight: 600;
  color: var(--tg-text);
  padding: 6px 0;
}
.opening-hours-table .oh-times {
  text-align: right;
  padding: 6px 0;
  color: var(--tg-text-muted);
}

/* Highlight the current day */
.opening-hours-table .oh-row.today .oh-day,
.opening-hours-table .oh-row.today .oh-times {
  color: var(--tg-text);
  font-weight: 700;
}

/* Ribbon */
.oh-ribbon {
  position: absolute;
  right: -6px;
  top: -6px;
  background: #d23b2a; /* red-ish */
  color: white;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  /* transform: rotate(15deg); */
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
  border-radius: 3px;
  z-index: 2;
}

.oh-ribbon.oh-open {
  background: #15803d; /* green */
}

.oh-header .sl {
  font-size: 20px;        /* change to taste */
  line-height: 1;
  color: var(--tg-text);
  display: inline-block;  /* ensures proper alignment */
}

/* Make card responsive in the details column */
@media (max-width: 768px) {
  .opening-hours-card { max-width: 100%; }
  .oh-ribbon { font-size: 0.75rem; padding: 4px 8px; }
}


.oh-phone-icon {
  width: 20px;
  height: 20px;
  vertical-align: -0.125em; /* matches other inline svgs */
  display: inline-block;
}
.phone-link { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.phone-link .oh-phone-icon { flex: 0 0 auto; }

/* Services & expertise tiles */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}

/* single column under 720px */
@media (max-width: 720px) {
  .service-grid { grid-template-columns: 1fr; }
}

.service-item {
  border: 1px solid var(--tg-border);
  background: var(--tg-surface);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-height: 84px;
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
}

/* Detail page: let service cards grow to fit full descriptions */
.service-grid.service-grid--detail .service-item {
  min-height: unset;           /* override the global min-height */
}
.service-grid.service-grid--detail .service-desc {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    line-clamp: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

.service-row { display:flex; gap:.75rem; align-items:flex-start; width:100%; }

.service-icon {
  display:inline-flex;
  flex: 0 0 28px;
  align-items:center;
  justify-content:center;
  color: color-mix(in oklab, var(--tg-accent) 48%, black 52%); /* accent-ish green if your accent is blue; adjust below */
  margin-top: 4px;
}

/* If you'd rather the icon be green for positive and red for "negative" items later, you can toggle a class */
.service-item.negative .service-icon { color: #dc3545; } /* bootstrap danger */
.service-item.positive .service-icon { color: #16a34a; } /* green-600 */

.service-body { flex:1 1 auto; min-width: 0; }
.service-title {
  margin: 0;
  font-size: .985rem;
  font-weight: 700;
  color: var(--tg-text);
  line-height: 1.15;
}
.service-desc {
  margin: .35rem 0 0;
  color: var(--tg-text-muted);
  font-size: .92rem;
  line-height: 1.4;
  max-height: 4.6em;        /* roughly 2.5 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .language-pill {
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  padding: .25rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--tg-text);
} */

/* Language pill (enhanced) */
.language-list { padding-top: .25rem; }

.language-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, white 90%, var(--tg-surface, #fff) 10%); /* subtle */
  border: 1px solid rgba(33, 100, 200, 0.08); /* soft accent border */
  box-shadow: 0 1px 0 rgba(16,24,40,0.02), 0 6px 18px rgba(19,35,65,0.03);
  font-size: .9rem;
  font-weight: 600;
  color: var(--tg-text, #153243);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* little icon */
.language-pill__icon { display: inline-block; color: var(--tg-accent, #0b63ff); opacity: .95; }

/* label */
.language-pill__label { display: inline-block; line-height: 1; padding-right: .06rem; }

/* hover/focus lift */
.language-pill:hover,
.language-pill:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(19,35,65,0.08);
  border-color: rgba(11,99,255,0.22);
  outline: none;
}

/* keyboard focus */
.language-pill:focus {
  outline: 3px solid color-mix(in srgb, var(--tg-accent, #0b63ff) 12%, transparent);
  outline-offset: 3px;
}

/* smaller look on tight screens */
@media (max-width: 576px) {
  .language-pill { font-size: .85rem; padding: .28rem .5rem; }
}


/* HERO overlay that sits on top of the hero image */
.hb-hero { position: relative; overflow: visible; }

/* Overlay covers hb-media area — positioned relative to .hb-hero container.
   .hb-media is the image figure; overlay sits visually on top of it.
*/
.hb-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none; /* allow clicks to pass except on interactive children */

  /* These next two make the text overlay centered. */
  align-items: center;
  justify-content: center;  
}

/* inner container keeps pills within a comfortable width and centers them */
.hb-media-overlay__inner {
  pointer-events: auto;
  /* margin: 0 auto; */
  margin-left: 50px;
  width: min(var(--hb-overlay-width), var(--hb-overlay-max));
  max-width: var(--hb-overlay-max);
  min-width: var(--hb-overlay-min);
  padding: 0 1rem;
  box-sizing: border-box;
  /* text-align: center; */
}

/* head/text centering inside the inner container */
.hb-media-heading__title,
.hb-media-heading__subtitle {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.hb-media-heading__title {
  font-size: 3.7rem; font-weight: 800; line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hb-media-heading__subtitle{
  font-size: 1.4rem; font-weight: 600; line-height: 1.4;
  color: rgba(255,255,255,.72);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* wrapper to create horizontal-scrolling area w/ nice gutters */
.hb-categories-wrapper { 
  overflow: hidden;
}

/* keep pills centered inside the inner box */
.hb-categories {
  display: flex;
  flex-wrap: wrap;           /* allow pills to wrap to next row */
  gap: 0.5rem 0.6rem;        /* row-gap / column-gap */
  justify-content: left;   /* center the lines horizontally */
  align-items: center;
  overflow: visible;         /* remove horizontal scrolling */
  padding: 0.25rem 0;        /* small vertical padding so multi-rows breathe */
  max-width: 100%;
  box-sizing: border-box;
}

/* When there are many pills keep scroll behavior, but visually centered */
.hb-categories::-webkit-scrollbar { height: 8px; }
.hb-categories::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 6px; }



.hb-category-pill {
  white-space: nowrap;
  flex: 0 0 auto;
  margin: 0;
  padding: .45rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;

  /* Dark frosted background (modern browsers) */
  /* background: linear-gradient(
      to top,
      rgba(9, 12, 20, 0.52),
      rgba(6, 8, 12, 0.66)
    ); */
  color: #fff; /* keep text white */
  border: 1px solid rgba(164, 143, 143, 0.06); /* faint rim */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03), /* tiny inner sheen */
    0 8px 22px rgba(2,6,20,0.45);         /* soft outer shadow for depth */

  /* frosted effect */
  -webkit-backdrop-filter: blur(8px) saturate(120%) brightness(0.85);
          backdrop-filter: blur(8px) saturate(120%) brightness(0.85);
}


.hb-category-pill:hover, .hb-category-pill:focus {
  /* transform: translateY(-2px); */
  background: rgba(255,255,255,0.12);
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* active state example — if you want to toggle a class when selected */
.hb-category-pill.active { background: var(--tg-accent); color: #fff; }

/* On narrower screens, make it full width so pills are readable */
/* @media (max-width: 992px) {
  .hb-media-overlay {
    align-items: flex-start;
  }
  .hb-media-overlay__inner {
    width: 92%;
    max-width: none;
    min-width: 0;
    margin-top: 1.25rem;
  }
} */

@media (max-width: 576px) {
  .hb-category-pill {
    padding: .33rem .6rem;
    font-size: .92rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hb-category-pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Header bar styles */
.site-header { background: var(--tg-surface, #fff); z-index: 40; }
.site-logo img { display: inline-block; vertical-align: middle; }
.site-title { letter-spacing: 0.2px; }

/* Mobile nav spacing */
#mobileNav .nav-link { padding-left: 0; padding-right: 0; }

/* Small tweak to ensure header visual separation */
.site-header .nav-link { color: var(--tg-text-muted, #667085); }
.site-header .nav-link:hover { color: var(--tg-text, #111); text-decoration: none; }


/* For details page. */
.listing-hero {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.listing-title { margin-bottom: .25rem; }
.listing-meta { color: var(--tg-text-muted); font-size: .95rem; }
.sidebar-card { position: sticky; top: 1.25rem; }
#map { width: 100%; height: 300px; border-radius: .5rem; border: 1px solid var(--tg-border); }
@media (min-width: 992px) { #map { height: 420px; } }
.quote { font-style: italic; color: var(--tg-text); border-left: 3px solid color-mix(in oklab, var(--tg-accent) 30%, transparent); padding-left: .75rem; }


/* make the inline inner <ul> look tidy */
.pagination .pagination {
  margin-bottom: 0;
  margin-left: .5rem;
}
.pagination .page-item + .page-item {
  margin-left: .25rem;
}

/* Footer styles */
.site-footer {
  background: var(--tg-surface-2, #ffffff);
  color: var(--tg-text, #444);
  border-top: 1px solid rgba(0,0,0,0.04);
}
.footer-logo { max-width: 100%; height: auto; display:block; }

.footer-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
  align-items: start;
}

.footer-links-col {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-col li {
  margin-bottom: 0.6rem;
}

.footer-links-col a {
  color: var(--tg-link, #1d3557);
  text-decoration: none;
}
.footer-links-col a:hover {
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .footer-links-grid {
    grid-template-columns: 1fr;
  }
}

/* small layout niceties */
.footer-logo { max-width: 200px; height: auto; }
.social-list a { color: inherit; text-decoration: none; }
.social-list a:hover { color: var(--tg-accent, #0b66ff); }

/* bottom separator spacing */
.footer-bottom { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.footer-links a { color: #333; text-decoration: none; display:block; margin-bottom:.4rem; }
.footer-links a:hover { text-decoration: underline; }
.footer-social .social-link { color: #333; display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:6px; background:transparent; transition:all .12s ease; }
.footer-social .social-link svg { width:18px; height:18px; }
.footer-social .social-link:hover { background: rgba(0,0,0,0.04); transform:translateY(-2px); }

@media (max-width: 767px) {
  .site-footer .footer-logo { margin-bottom: .5rem; }
  .site-footer .footer-links { margin-bottom: 1rem; }
}
















/* ------------------------
   Responsive tweaks for hero overlay (only small screens)
   Put this at the end of your CSS (after your .hb-hero rules)
   ------------------------ */

@media (max-width: 992px) {

  .hb-glass {
      /* leave 120px for header/other chrome; tweak to taste (100-180px) */
      height: 250px;
      padding: 0.75rem;            /* reduce padding on small screens */
      overflow: auto;             /* scroll internals if still too tall */
      box-sizing: border-box;
    }

    /* 2) Reduce title/subtitle sizes inside the glass so they don't push height */
  .hb-media-heading__title {
    font-size: clamp(1.6rem, 4.6vw, 2.2rem); /* readable but smaller */
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.25rem;
  }
  .hb-media-heading__subtitle {
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
  }

  /* 3) Move the inner overlay upward so it sits nearer the top on small screens.
     Option A: align top (recommended when you want it noticeably higher) */
  .hb-media-overlay {
    align-items: flex-start;    /* move overlay content toward the top */
    padding-top: 1.25rem;       /* tasteful offset from the top of the hero */
  }
  .hb-media-overlay__inner {
    margin-top: 0;              /* remove centering offset */
    width: 92%;
    max-width: 760px;
    min-width: 0;
    padding: 0 0.75rem;
  }

    /* 4) If you prefer the overlay still be vertically centered but nudged up slightly
     instead of fully top-aligned, use this alternative (uncomment one approach only): */

  .hb-media-overlay {
    align-items: center;
  }
  .hb-media-overlay__inner {
    transform: translateY(-18%);   /* nudge upward while keeping center */
  }
  

  /* 5) Optional: tighten pill spacing so they don't push the panel height so much */
  .hb-category-pill {
    padding: .33rem .6rem;
    font-size: .92rem;
  }



  /* push the overlay toward the top of the hero */
  .hb-media-overlay {
    align-items: flex-start;        /* move children toward the top */
    justify-content: center;        /* keep horizontal centering */
    padding-top: clamp(1rem, 6vh, 4rem); /* breathing room from the top */
    pointer-events: none;           /* keep same behavior as before */
  }

  /* make inner overlay centered & fluid on tablet/phone */
  .hb-media-overlay__inner.container-sm,
  .hb-media-overlay__inner {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;               /* avoid accidental offsets */
    width: min(92%, var(--hb-overlay-max));
    max-width: var(--hb-overlay-max);
    min-width: 0;                /* allow it to shrink below var(--hb-overlay-min) */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
    text-align: left;            /* keep your left text alignment */
    transform: translateY(0);
  }

  /* fluid / smaller title on smaller screens (never larger than current desktop size) */
  .hb-media-heading__title {
    /* desktop: 3.7rem; on small screens shrink down smoothly to ~1.6rem */
    font-size: clamp(1.6rem, 4.8vw, 3.7rem);
    font-weight: 700;   /* preserve weight, tweak if you want lighter on mobile */
    line-height: 1.15;
    margin-bottom: 0.25rem;
  }

  .hb-media-heading__subtitle {
    /* desktop: 1.4rem; on small screens shrink to ~0.9rem */
    font-size: clamp(0.95rem, 2.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255,255,255,0.78);
    margin-bottom: .6rem;
  }

  /* tighten pill spacing & font-size to keep things readable on smaller devices */
  .hb-categories {
    gap: 0.4rem 0.45rem;
    justify-content: flex-start;
  }

  .hb-category-pill {
    padding: .36rem .64rem;
    font-size: 0.95rem;
  }

  .hb-tabs {
    /* keep the large-screen variable for desktop but override it here */
    --hb-tab-fs: 1rem;       /* adjust to taste (1rem / 1.05rem etc) */
    flex-wrap: wrap;        /* allow links to wrap to next line(s) */
    gap: 0.5rem 0.75rem;    /* row-gap / column-gap (tweak if needed) */
    justify-content: center;/* keep lines centered overall */
  }

  .hb-hero {
    position: relative;
    overflow: visible;
    /* padding-top: clamp(16px, 3vh, 40px); */
    /* padding-bottom: 20px; */
    padding-bottom: 100px; /* room for the dock below */
  }

}

/* extra small phones */
@media (max-width: 420px) {
  .hb-media-overlay {
    padding-top: clamp(.5rem, 6vh, 2.4rem);
  }


  .hb-media-overlay__inner {
    /* width: 94%; */
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .hb-media-heading__title {
    /* on smallest phones prefer an explicit, readable size */
    font-size: 1.5rem;
    line-height: 1.12;
    font-weight: 700;
  }

  .hb-media-heading__subtitle {
    font-size: 0.88rem;
  }


  .hb-hero {
    position: relative;
    overflow: visible;
    /* padding-top: clamp(16px, 3vh, 40px); */
    /* padding-bottom: 20px; */
    padding-bottom: 100px; /* room for the dock below */
  }
}













/* ===========================
   COMPLETE STYLESHEET
   (Replace your current <style> with this)
   =========================== */

/* ---------------------------
   THEME TOKENS & BASE
   --------------------------- */
:root{
  --tg-app-bg:        #f8fafc;
  --tg-surface:       #ffffff;
  --tg-surface-2:     #f1f5f9;
  --tg-text:          #24303a;
  --tg-text-muted:    #64748b;
  --tg-border:        #e2e8f0;
  --tg-accent:        #3a5cd8ff;
  --tg-searchbutton:  #da2626ff;
  --tg-accent-contrast:#ffffff;

  --bs-font-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --hb-hero-h: 615px;
  --hb-overlay-max: 1100px;
  --hb-overlay-min: 320px;

  --select-chevron-size: 22px;
  --select-chevron-right-offset: 12px;
}

/* Dark-mode tokens */
html[data-bs-theme="dark"] {
  --tg-app-bg:       #0b0f19;
  --tg-surface:      #0e1422;
  --tg-surface-2:    #151b2b;
  --tg-text:         #e6e8ee;
  --tg-text-muted:   #9aa3b2;
  --tg-border:       #1f2433;
  --tg-accent:       #5E6AD2;
}

/* Reset / base */
* { box-sizing: border-box; }
html,body{ height:100%; margin:0; padding:0; background:var(--tg-app-bg); color:var(--tg-text); font-family:var(--bs-font-sans-serif); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img{ max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }

/* Containers */
.container { max-width: 1100px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* ---------------------------
   HEADER
   --------------------------- */
.site-header { background: var(--tg-surface); border-bottom: 1px solid var(--tg-border); position: sticky; top:0; z-index:60; }
.site-header .site-logo img{ height:44px; display:inline-block; vertical-align: middle; }
.site-title { font-weight:700; font-size:1.05rem; color:var(--tg-text); margin-left:.35rem; }

/* Mobile collapse button slight style */
.btn-outline-secondary { border-radius:8px; }

/* ---------------------------
   HERO (full-width image + overlay)
   --------------------------- */
.dir-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Make image visually behind everything and not capture pointer events */
.dir-hero .hero-img {
  width:100%;
  height: clamp(760px, 80vh, 1000px);
  object-fit: cover;
  display:block;
  pointer-events: none;   /* allow overlay to receive clicks & to be inspectable */
  z-index: 1;
}

/* overlay must sit above the image */
.dir-hero .hero-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* interactive children will receive events */
  padding: clamp(1rem, 3.5vh, 2.4rem);
}

/* optional subtle visual layer behind interactive overlay — visual only */
.dir-hero .hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;                /* behind overlay content */
  pointer-events: none;      /* visual only */
}

/* Heading inside overlay */
.dir-hero .hero-heading {
  pointer-events: auto;
  text-align:center;
  max-width: var(--hb-overlay-max);
  margin: 0 1rem 0.75rem;
  color: #fff;
  text-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.dir-hero .hero-heading h1 { margin:0; font-size: clamp(1.5rem,3.5vw,2.8rem); font-weight:700; line-height:1.08; }
.dir-hero .hero-heading p { margin:.4rem 0 0; font-weight:600; font-size: clamp(.9rem,1.6vw,1.1rem); color: rgba(255,255,255,.92); }

/* ensure overlay children are interactive and above image */
.dir-hero .hero-overlay .hero-heading,
.dir-hero .hero-overlay .hb-tabs,
.dir-hero .hero-overlay .hb-tabs .hb-tab,
.dir-hero .hero-overlay .hero-bar {
  pointer-events: auto;
  z-index: 10;
  position: relative;
}

/* Ensure the tab links look & behave like links */
.hb-tabs .hb-tab {
  color: #ffffff !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Make province links heavier / bolder */
.dir-hero .hero-overlay .hb-tabs .hb-tab {
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Let things escape the overlay */
.hero-overlay { overflow: visible; }

/* ---------------------------
   HERO BAR (single slim bar holding inputs + selects + button)
   --------------------------- */
.hero-bar {
  pointer-events: auto;
  width: min(94%, var(--hb-overlay-max));
  margin-top: .9rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .5rem;
  border-radius: 9999px;                /* fully rounded pill */
  background: #fff;
  box-shadow: 0 10px 30px rgba(2,6,20,0.06);
  border: 0;
  position: relative;
  min-height: 56px;
  z-index: 12; /* above overlay::before and hero image */
}

/* group that contains the 3 equal-width controls */
.controls-group {
  display:flex;
  gap:.75rem;
  align-items:center;
  flex: 1 1 auto;
  min-width: 0;
}

/* each control inside the group gets equal width */
.controls-group .hb-control {
  flex: 1 1 0;   /* equal share */
  min-width: 0;  /* allow shrink */
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: auto;
  position: relative;
}

/* Final button container (keeps the button out of the equal-share group) */
.hero-bar > .hb-control:last-child { flex: 0 0 auto; }

/* Inputs & selects (transparent on wide screens; borderless) */
.controls-group .search-wrap input[type="search"],
.controls-group .select-wrap select {
  width:100%;
  padding:.5rem .75rem;
  height:44px;
  border-radius:8px;
  border:0;
  background: transparent;
  font-weight:600;
  color:var(--tg-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  min-width:0;
}

/* Select wrapper to host chevron */
.controls-group .select-wrap { position: relative; }

/* Chevron fallback for older browsers */
.controls-group .select-wrap::after{
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(36,48,58,0.7);
  font-size: 0.9rem;
  line-height:1;
}

/* the chevron itself (mask technique so it adopts currentColor) */
.hero-bar .select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--select-chevron-right-offset);
  transform: translateY(-50%);
  width: var(--select-chevron-size);
  height: var(--select-chevron-size);
  pointer-events: none;
  display: block;
  background-color: currentColor;
  opacity: 0.95;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Search button (right-aligned item) */
.search-btn{
  height:44px;
  padding: 0 .9rem;
  border-radius: 9999px;
  border:0;
  background: var(--tg-searchbutton);
  color: var(--tg-accent-contrast);
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-shadow: 0 6px 18px rgba(37,99,235,0.14);
}

/* Focus states for accessibility */
.controls-group .search-wrap input:focus,
.controls-group .select-wrap select:focus,
.search-btn:focus {
  outline: 3px solid color-mix(in srgb, var(--tg-searchbutton) 12%, transparent);
  outline-offset: 2px;
}

/* ---------------------------
   Small screens (stack + white boxes)
   --------------------------- */
@media (max-width: 900px) {
  .hero-bar {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .6rem;
    border-radius: 16px;
    background: transparent; /* overlay holds image; controls will be white individually */
  }

  /* Force each control to be full width when stacked */
  .hero-bar .hb-control,
  .hero-bar .search-wrap,
  .hero-bar .select-wrap {
    width: 100% !important;
    flex: 0 0 auto !important;
    position: relative;
  }

  /* hide native UI affordances and reserve space for chevron */
  .hero-bar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: calc(var(--select-chevron-size) + var(--select-chevron-right-offset) + 8px);
  }

  /* IE/Edge older */
  .hero-bar select::-ms-expand { display: none; }

  .controls-group { flex-direction: column; gap:.5rem; }

  /* stacked controls become white boxes with a subtle border for contrast */
  .controls-group .search-wrap input[type="search"],
  .controls-group .select-wrap select {
    background: #ffffff;
    border: 1px solid var(--tg-border);
    box-shadow: 0 8px 20px rgba(2,6,20,0.06);
    height:48px;
    padding:.55rem .75rem;
  }

  /* button flows full-width at the bottom */
  .hero-bar > .hb-control:last-child { width:100%; display:block; }
  .search-btn { width:100%; height:48px; border-radius:9999px; }

  /* chevron color tuned for white background */
  .controls-group .select-wrap::after { color: rgba(36,48,58,0.7); right:14px; }
}

/* ---------------------------
   PILL STYLES (popular-intent pills)
   --------------------------- */
.hb-category-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;

  /* Stronger dark base color (controls darkness) */
  background-color: rgba(0,0,0,0.52);     /* <- change alpha to taste: .4 -> .7 */

  /* subtle vertical depth for richness */
  background-image: linear-gradient(
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.01)
  );

  /* keep the frosted effect but increase blur/saturation */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);

  /* stronger inset highlight + outer shadow for depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 12px 28px rgba(2,6,20,0.45);

  /* border to separate pill from background */
  border: 1px solid rgba(255,255,255,0.06);

  color: #ffffff;           /* keep text white for contrast */
  font-weight: 700;
  cursor: pointer;
  user-select: none;

  /* smooth hover transition */
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

   
.hb-category-pill:focus, .hb-category-pill:hover { box-shadow: 0 8px 22px rgba(2,6,20,0.35); }

/* ---------------------------
   RESULTS / CARDS / LAYOUT
   --------------------------- */
main.container { padding: 1.25rem 1rem 3rem; max-width:1100px; }

/* card/listing */
.card { border: 1px solid var(--tg-border); background: var(--tg-surface); border-radius:8px; transition: box-shadow .15s ease, border-color .15s ease; }
.card + .card { margin-top: 1rem; }
.card .card-body { padding: 1rem; }
.card.intent-match { border-color: var(--tg-accent); background: color-mix(in oklab, var(--tg-accent) 8%, var(--tg-surface) 92%); }

/* listing title and meta */
.h5, h3.h5 { font-size: 1.125rem; margin:0; }
.card-meta { color: var(--tg-text-muted); font-size: .95rem; display:flex; gap:.4rem; align-items:center; }
.phone-link { color: inherit; text-decoration:none; }

/* badges / tag pills */
.badge.tag-pill, .badge.border.tag-pill { border: 1px solid var(--tg-border); background: var(--tg-surface-2); color: var(--tg-text); padding:.35rem .6rem; border-radius:999px; font-weight:600; }
.badge.tag-pill.active { background: color-mix(in oklab, var(--tg-accent) 36%, var(--tg-surface) 64%); color: var(--tg-text); box-shadow: 0 4px 14px color-mix(in oklab, var(--tg-accent) 28%, transparent); }

/* small "may help" badge */
/* .may-help-badge { background: var(--tg-surface-2); color: var(--tg-text-muted); border: 3px solid var(--tg-border); border-radius:999px; padding:.18rem .5rem; font-weight:700; font-size:.8rem; } */
.may-help-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .7rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--tg-accent) 70%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--tg-accent) 20%, #ffffff) 0%,
    color-mix(in oklab, var(--tg-accent) 32%, #ffffff) 100%
  );
  color: var(--tg-text, #000);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.02em;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--tg-accent) 20%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* section divider with label */
.section-divider { display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; color:var(--tg-text-muted); font-weight:700; }
.section-divider::before, .section-divider::after { content:""; flex:1 1 auto; height:1px; background:var(--tg-border); }
/* .section-divider__text { background: var(--tg-app-bg); padding: .1rem .5rem; border-radius:.25rem; font-size:2rem; } */

/* ---------------------------
   PAGINATION
   --------------------------- */
.pagination { display:flex; gap:.5rem; align-items:center; justify-content:center; padding:0; margin:1rem 0; }
.page-link { padding:.4rem .65rem; border-radius:.375rem; border:1px solid var(--tg-border); background: var(--tg-surface); color:var(--tg-text); }
.page-item.active .page-link { background: var(--tg-accent); color: #fff; border-color: var(--tg-accent); }

/* ---------------------------
   DETAIL PAGE / SIDEBAR HELPERS
   --------------------------- */
.listing-hero { margin: 1rem 0; }
.listing-title { font-size:1.8rem; font-weight:600; margin-bottom:.25rem; }
.listing-meta { color:var(--tg-text-muted); font-size:.95rem; }

/* sidebar card sticky */
.sidebar-card { position: sticky; top: 1.25rem; }

/* map fallback */
#map { width: 100%; height: 300px; border-radius:.5rem; border: 1px solid var(--tg-border); background: var(--tg-surface-2); }

/* ---------------------------
   MISC / Accessibility / Helpers
   --------------------------- */
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* reduce heavy transparency for users who request reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .hb-category-pill, .hero-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.96); }
}

/* small screen polish */
@media (max-width: 420px) {
  .dir-hero .hero-heading h1 { font-size: 1.4rem; }
  .controls-group .search-wrap input[type="search"], .controls-group .select-wrap select { height:44px; }
  .search-btn { height:44px; }
  :root { --select-chevron-size: 18px; --select-chevron-right-offset: 10px; }
}

/* ---------- Popular-intent pills (below hero-bar) ---------- */
.hb-categories-wrapper {
  width: min(94%, var(--hb-overlay-max, 1100px));
  margin: .75rem auto 0;
  display: block;
  pointer-events: auto; /* allow clicks */
  position: relative;
  z-index: 22;          /* ensure the wrapper sits above the image/overlay visual layer */
}

/* horizontal list: wrap on wide screens, allow scroll on overflow */
.hb-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  justify-content: center;
  align-items: center;
  padding: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
  background: transparent;
  pointer-events: auto; /* ensure clicks reach the pills */
}

/* hide webkit scrollbar visually */
.hb-categories::-webkit-scrollbar { height: 8px; display: none; }

/* pill baseline (keeps the look you want) */
.hb-category-pill {
  white-space: nowrap;
  flex: 0 0 auto;
  margin: 0;
  padding: .45rem .8rem;
  border-radius: 999px;
  cursor: pointer;
  /* background: transparent; /* you can change this to the gradient look if you want */
  /* color: #fff; */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 22px rgba(2,6,20,0.25);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
          backdrop-filter: blur(6px) saturate(120%);
  font-weight: 700;
  pointer-events: auto; /* explicit */
}

/* hover / focus / active */
.hb-category-pill:hover,
.hb-category-pill:focus {
  /* transform: translateY(-2px); */
  box-shadow: 0 10px 26px rgba(2,6,20,0.34);
  outline: none;
}
.hb-category-pill:focus { box-shadow: 0 10px 28px color-mix(in srgb, #000 12%, transparent); }

/* active state */
.hb-category-pill.active {
  background: color-mix(in oklab, var(--tg-accent, #3a5cd8) 46%, rgba(255,255,255,0.06) 54%);
  border-color: color-mix(in oklab, var(--tg-accent, #3a5cd8) 80%, white 20%);
  color: var(--tg-surface, #fff);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tg-accent, #3a5cd8) 22%, transparent);
}

/* spacing on small screens */
@media (max-width: 576px) {
  .hb-categories { gap: 0.35rem 0.45rem; padding-left: .2rem; padding-right: .2rem; }
  .hb-category-pill { padding: .34rem .6rem; font-size: .95rem; }
}

/* keyboard focus visible */
.hb-category-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tg-accent, #3a5cd8) 12%, transparent);
  outline-offset: 3px;
}

/* ===== Remove any dark overlay from the pills area =====
    This was in your file but may have been overridden; we keep it
    but add pointer-events and z-index to ensure pills are interactive.
*/
.hb-categories-wrapper,
.hb-categories,
.hb-category-pill,
.hb-categories-wrapper *,
.hb-categories * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  /* color: inherit !important; */
  pointer-events: auto !important;
}

/* ---------- Intro line above pills: strong, specific rule ---------- */
.hb-categories-wrapper .hb-categories-intro {
  display: block;
  position: relative;
  z-index: 23; /* above pills and hero overlay content */
  margin: 0 auto 0.6rem;
  max-width: min(92%, var(--hb-overlay-max, 1100px));
  text-align: center;
  line-height: 1.2;

  /* Visual rules (use !important so we override conflicting rules) */
  color: #dcdcdcff !important;
  font-weight: 700 !important;
  font-size: 1.10rem !important;
  text-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;

  pointer-events: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  padding-top: 40px;
}

/* subtler on small devices */
@media (max-width: 576px) {
  .hb-categories-wrapper .hb-categories-intro { font-size: .95rem !important; margin-bottom: .4rem; }
}








/* ----- Darker frosted pills (place near end of stylesheet) ----- */
.hb-categories-wrapper .hb-categories .hb-category-pill {
  /* Dark frosted surface */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.70) 0%,
    rgba(57, 57, 57, 0.6) 100%
  ) !important;

  /* Backdrop keeps the frosted blur; increase blur/saturate for a stronger effect */
  -webkit-backdrop-filter: blur(8px) saturate(140%) contrast(95%) !important;
          backdrop-filter: blur(8px) saturate(140%) contrast(95%) !important;

  /* stronger border for separation on bright images */
  border: 1px solid rgba(255,255,255,0.06) !important;

  /* slightly stronger depth */
  /* box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 14px 30px rgba(2,6,20,0.45) !important; */

  color: #fff !important;
  font-weight: 700;
}

/* hover/active states — make active even darker / tinted */
/* .hb-categories-wrapper .hb-categories .hb-category-pill:hover,
.hb-categories-wrapper .hb-categories .hb-category-pill:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(2,6,20,0.48) !important;
} */

.hb-categories-wrapper .hb-categories .hb-category-pill.active {
  /* accent-tinted dark pill */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--tg-accent) 28%, rgba(0,0,0,0.72)),
    color-mix(in oklab, var(--tg-accent) 18%, rgba(0,0,0,0.62))
  ) !important;
  border-color: color-mix(in oklab, var(--tg-accent) 60%, rgba(255,255,255,0.04)) !important;
  /* box-shadow: 0 16px 34px color-mix(in srgb, var(--tg-accent) 18%, rgba(0,0,0,0.45)) !important; */
  color: #fff !important;


  /* Service hub pages */
    .hub-card{
    border:1px solid var(--tg-border);
    background:var(--tg-surface);
    border-radius:12px;
    transition:transform .12s, box-shadow .12s, border-color .12s;
    text-decoration:none;
    color:inherit;
    }
    .hub-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(2,6,20,.08);
    }
    .hub-title{ font-weight:800; }
    .hub-sub{ color:var(--tg-text-muted); font-size:.95rem; }
    .hub-card.is-active{
    border-color:var(--tg-accent);
    background:color-mix(in oklab, var(--tg-accent) 8%, var(--tg-surface) 92%);
    box-shadow:0 8px 22px color-mix(in oklab, var(--tg-accent) 16%, transparent);
    }
}





/* Make BOTH menus scroll themselves (single scroll container) */
.languages-dropdown .dropdown-menu,
.designations-dropdown .dropdown-menu {
  /* display: flex; */
  flex-direction: column;

  max-height: 60vh;                 /* fallback for all browsers */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;/* smooth scroll on iOS */
  z-index: 1080;                    /* above overlay if any */
  white-space: normal;              /* override Bootstrap's nowrap */
}

/* Only when open */
.languages-dropdown .dropdown-menu.show,
.designations-dropdown .dropdown-menu.show {
  display: flex;                /* now only applies when open */
  flex-direction: column;
  max-height: 60vh;             /* fallback */
  overflow: hidden;             /* the list will scroll */
  -webkit-overflow-scrolling: touch;
}

/* Narrower menu with a reasonable cap */
.languages-dropdown .dropdown-menu,
.designations-dropdown .dropdown-menu {
  --bs-dropdown-min-width: 14rem; /* Bootstrap min-width variable */
  max-width: 20rem;               /* hard cap */
  width: auto;                    /* shrink to fit wrapped content */
}


/* Action row buttons should not force menu wider */
.languages-dropdown .dropdown-menu .btn,
.designations-dropdown .dropdown-menu .btn {
  display: inline-flex;       /* prevent block-like stretching */

  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  text-align: center;        /* ensure text-align for non-flex fallbacks */

  width: auto !important;     /* override any inherited 100% */
  flex: 0 0 auto;             /* never grow, never shrink */
  min-width: 6.5rem;               /* allow true shrink-to-fit */
  white-space: nowrap;        /* keep label on one line */
  /* align-self: flex-start;     avoid cross-axis stretching */
}

/* Optional: keep the row from widening the container */
.languages-dropdown .dropdown-menu .d-flex,
.designations-dropdown .dropdown-menu .d-flex {
  width: 100%;
}


/* iOS Safari + modern browsers: dynamic viewport height */
@supports (height: 1dvh) {
  .languages-dropdown .dropdown-menu,
  .designations-dropdown .dropdown-menu {
    max-height: 70dvh;              /* taller; adapts with toolbars */
  }
}

/* Remove inner list caps — let the menu do the scrolling */
.languages-list,
.designations-list {
  max-height: none;
  overflow: visible;
}

/* If you still want your compact “expanded” behavior for desktop only,
   scope it behind a min-width so it won’t constrain iOS Safari */
@media (min-width: 992px) {
  .languages-list.expanded,
  .designations-list.expanded {
    max-height: none; /* keep none; expanded state no longer needed */
  }
}

/* Keep your checkbox row styling */
.dropdown-item.form-check { display: flex; align-items: center; gap: .5rem; }
.dropdown-item.form-check .form-check-input { margin: 0; }

/* Button width */
.languages-dropdown .btn,
.designations-dropdown .btn { min-width: 220px; }

.dropup .dropdown-menu { margin-bottom: .25rem; }

/* Only the list scrolls */
.languages-dropdown .languages-list,
.designations-dropdown .designations-list {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky footer with its own background so it doesn’t look transparent while scrolling */
.languages-dropdown .languages-actions,
.designations-dropdown .designations-actions {
  position: sticky;
  bottom: 0;
  padding: .5rem; /* you removed p-2 from HTML; add spacing here */
  background: var(--bs-body-bg);    /* matches dropdown background */
  border-top: 1px solid var(--bs-border-color);
  z-index: 1;                       /* stay above the scrolled content */
}

/* Optional: keep buttons from stretching full width on iOS */
.languages-dropdown .languages-actions .btn,
.designations-dropdown .designations-actions .btn {
  flex: 0 1 auto;
}




/* NEW NEW NEW */
/* ==== Compact logo left of title/meta ==== */

/* Small variant of your existing square logo block */
.logo-square.logo--sm {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;                /* softer than circle; law-firm appropriate */
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-square.logo--lg {
  /* width: 56px;
  height: 56px;
  flex: 0 0 56px; */
  border-radius: 12px;                /* softer than circle; law-firm appropriate */
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  /* display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; */
}

/* Ensure image logos scale nicely */
.logo-square.logo--sm .logo-img,
.logo-square.logo--sm img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Monogram fallback (uses first letter of firm name) */
.logo-fallback-mono {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  /* conservative, trustworthy palette */
  background: linear-gradient(135deg, #1f2937, #334155); /* slate gradient */
}

/* Keep the content column from forcing horizontal overflow */
.entry-main { min-width: 0; }

/* Slight polish for meta row next to a logo block */
.entry-media .card-meta { margin-top: .15rem; }

/* On very small screens, reduce the logo size a bit */
@media (max-width: 480px) {
  .logo-square.logo--sm { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
}



/* Languages/communities: always on a new line */
.langs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .25rem;
  width: 100%;
  flex: 0 0 100%;   /* if parent is flex, this forces a line break */
  clear: both;      /* belt-and-suspenders in case of floats */
}

/* Optional: a little spacing from intents if needed */
.intents-scroll + .langs-row { margin-top: .35rem; }


.rating { font-weight: 600; }
.rating [aria-hidden="true"] { margin-left: 2px; }

/* ===== Star Rating beside title ===== */
.entry-title-row .entry-title,
header .entry-title {
  margin: 0;
}

/* Two-layer star technique: gray baseline + gold overlay clipped by width */
.rating-stars {
  --rating-pct: 0%;
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: clamp(12px, 1.4vw, 16px); /* responsive size */
  letter-spacing: 2px;
}
.rating-stars::before {
  content: '★★★★★';
  color: #cbd5e1; /* empty (slate-300) */
}
.rating-stars::after {
  content: '★★★★★';
  color: #f59e0b; /* filled (amber-500) */
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rating-pct);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.entry-rating .rating-count {
  font-size: 0.9em;
}

/* Prevent title row from causing horizontal overflow */
.entry-title-row,
.intent-match header.d-flex { min-width: 0; }
.entry-title-row .entry-title a,
header .entry-title a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

/* On very narrow screens, let the rating wrap below the name */
@media (max-width: 420px) {
  .entry-title-row,
  .intent-match header.d-flex { flex-wrap: wrap; }
  .entry-rating {
    order: 2;
    width: 100%;
    margin-top: 2px;
  }
}

/* ===== Prevent overflow & allow wrap for title + stars ===== */
.entry-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;      /* allow wrapping when space is tight */
  min-width: 0;         /* let children shrink inside flex */
}

.entry-title-row .entry-title {
  flex: 1 1 auto;       /* title uses remaining space */
  min-width: 0;         /* enable ellipsis */
  margin: 0;
}

.entry-title-row .entry-title a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.entry-title-row .entry-rating {
  flex: 0 0 auto;       /* keep stars compact */
}

/* Responsive star size (already used by your stars) */
.entry-title-row .rating-stars {
  font-size: clamp(12px, 1.4vw, 16px);
}

/* On narrow screens: move stars below title automatically */
@media (max-width: 576px) {
  .entry-title-row .entry-rating {
    width: 100%;
    order: 2;           /* force below the title */
    margin-top: 2px;
  }
  .entry-title-row { flex-wrap: wrap; } /* Let the row wrap on small screens */
    
  .entry-title { flex: 1 1 100%; min-width: 0; } /* take the line */
  .entry-title a{
    white-space: normal;        /* allow wrapping */
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;    /* break long words if needed */
  }

  .entry-title.text-truncate { overflow: visible; text-overflow: clip; white-space: normal; }

}

/* Shrink the title a bit on small viewports to avoid overflow */
h3.h3.entry-title {
  font-size: clamp(1.25rem, 4.2vw, 1.45rem); /* ~16.8px–20px */
  line-height: 1.2;
}

/* Pin logo block to the top on narrow screens (prevents vertical centering) */
.entry-media .logo-square,
.entry-media .logo-square.logo--sm,
.entry-media .logo-circle,
.entry-media .listing-logo {
  align-self: flex-start;
}

/* Meta row: make it flexible */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;        /* row-gap / column-gap */
}

.card-meta .meta-address {
  display: inline-flex;
  align-items: center;
  gap: .4rem;               /* icon ↔ text */
  min-width: 0;
}

.card-meta .meta-phone {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* On wider screens: keep phone on same line, with a dot before it */
@media (min-width: 577px) {
  .card-meta .meta-phone::before {
    content: "•";
    margin: 0 .25rem;
    color: currentColor;
    opacity: .7;
  }
}


/* On narrow screens: force phone to its own line, aligned under the address text */
@media (max-width: 576px) {
  .card-meta { align-items: flex-start; }
  .card-meta .meta-phone {
    flex-basis: 100%;        /* newline */
    padding-left: 22px;      /* align under address text: 18px icon + ~4px gap */
  }
  .card-meta .meta-phone::before { content: ""; }
}

/* ===== Listing description: 2-line clamp, strip headings ===== */
.entry-desc {
  font-size: 0.9375rem;
  color: var(--bs-body-color);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;      /* two lines only */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* On narrow screens, show 4 lines of the description */
@media (max-width: 576px) {
  .entry-desc {
    line-clamp: 4;
    -webkit-line-clamp: 4;   /* Safari/iOS */
    display: -webkit-box;    /* required for -webkit-line-clamp to take effect */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* Hide headings and media inside description (drop any <h1>…<h6> text) */
.entry-desc h1,
.entry-desc h2,
.entry-desc h3,
.entry-desc h4,
.entry-desc h5,
.entry-desc h6,
.entry-desc img,
.entry-desc figure,
.entry-desc picture {
  display: none !important;
}

/* Avoid wasting clamp height on margins */
.entry-desc p,
.entry-desc ul,
.entry-desc ol {
  margin: 0;
}

/* Intents: one line on mobile with a 'more…' toggle */
@media (max-width: 576px) {
  .entry-tags .is-extra {
    display: none !important; /* hide extras by default */
  }
  .entry-tags-wrap.is-expanded .entry-tags .is-extra,
  .entry-tags.is-expanded .is-extra {
    /* display: inline-block !important; */
    display: inline-flex !important;     /* pills display nicely inline */
  }
  /* .intents-more-btn {
    font-size: 0.9rem;
  } */
  .entry-tags.is-expanded,
  .entry-tags-wrap.is-expanded .entry-tags {
    max-height: none !important;
    overflow: visible !important;        /* don't clip additional rows */
  }


  .intents-more-btn { font-size: 0.9rem; }
}
/* On sm+ screens, show all tags and hide the toggle button */
@media (min-width: 577px) {
  .intents-more-btn { display: none !important; }
}

/* Ensure mobile toggle shows hidden pills when expanded */
@media (max-width: 576px) {
  .entry-tags .is-extra { display: none !important; }
  .entry-tags-wrap[data-expanded="true"] .entry-tags .is-extra,
  .entry-tags.is-expanded .is-extra {
    display: inline-block !important;
  }
}




/* Monogram */
/* Container matches your existing logo square */
.mono-logo { width: 80px; height: 80px; flex: 0 0 80px; }
@media (max-width: 576px) { .mono-logo { width: 60px; height: 60px; flex: 0 0 60px; } }

.mono-svg { width: 100%; height: 100%; }

/* background */
.mono-bg {
  fill: transparent;           /* or var(--tg-surface) for a tile */
  stroke: none;
}

/* choose a classy serif for the letters (swap to your brand font) */
.mono-letter{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  fill: #1f2937;        /* slate-800 */
  font-size: 66px;      /* tuned for viewBox=100 */
  line-height: 1;       /* avoid extra vertical space */
  pointer-events: none; /* never block clicks */

  font-weight: 700;
  letter-spacing: -0.03em;
}

/* letter sizes & subtle offsets (fine-tune per taste) */

/* gentle layering + optical centering tweak */
.mono-1 { transform: translate(-12px, -4px); }  /* back/left */
.mono-2 { transform: translate( 12px, 4px); }  /* front/right */

/* the horizontal name */
.mono-name {
  font-size: 8px;
  letter-spacing: 4px;
  fill: currentColor;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: .95;
}

/* Dark mode will “just work” because we use currentColor */

/* Container already sized by .logo-square; make a neutral plate */
.logo-fallback-mono {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;           /* grid-centers the stacking context */
  border-radius: 12px;
  background: var(--tg-surface, #fff);
  overflow: hidden;
}

/* Common letter styling */
.logo-fallback-mono .mono {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%); /* slight optical lift */
  line-height: 0.9;                 /* tighter for large glyphs */
  font-weight: 800;
  font-family: ui-serif, "Times New Roman", Georgia, serif; /* elegant serif */
  color: #1f2937;                   /* slate-800 */
  /* Scale letters relative to the box size */
  font-size: clamp(30px, 78%, 72px);  /* good for 56–80px boxes */
  pointer-events: none;
}

/* Back letter (first initial) slightly larger and behind */
.logo-fallback-mono .mono-1 {
  z-index: 1;
  opacity: 0.9;
  transform: translate(-50%, -52%) scale(1.08);
}

/* Front letter (second initial) sits on top, tiny offset to interlock look */
.logo-fallback-mono .mono-2 {
  z-index: 2;
  transform: translate(-50%, -52%) scale(1.02);
}

/* If your smallest avatar is 48px, nudge size a bit there */
@media (max-width: 480px) {
  .logo-square.logo--sm .logo-fallback-mono .mono {
    font-size: clamp(26px, 80%, 60px);
  }
}

/* Ensure the logo block stays top-aligned next to text (you already set this) */
.entry-media .logo-square,
.entry-media .logo-square.logo--sm{ align-self: flex-start; }




/* one knob to move BOTH letters together */
.mono-svg{
  --y-fix: 6px;
  --x-fix: 2px;   /* + moves right, - moves left; try 1–3px */
}

/* Letters */
.mono-letter{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  fill: #1f2937;
  line-height: 1;
  text-anchor: middle;
  dominant-baseline: middle;   /* instead of 'central' */
  pointer-events: none;
}

/* sizes */
.mono-letter-1 { font-size: 88px; }
.mono-letter-2 { font-size: 96px; }



/* relative spacing (keep your interlock) + pair vertical fix */
/* .mono-1 { transform: translate(-12px, calc(-4px + var(--y-fix))); }
.mono-2 { transform: translate( 12px, calc( 4px + var(--y-fix))); } */
.mono-1 { transform: translate(calc(-12px + var(--x-fix)),
                              calc(-4px + var(--y-fix))); }
.mono-2 { transform: translate(calc( 12px + var(--x-fix)),
                              calc( 4px + var(--y-fix))); }

/* Safari/iOS rides high => push the pair DOWN a touch only there */
@supports (-webkit-touch-callout: none) {
  .mono-svg{ --y-fix: 3px; }   /* adjust to taste: 2–4px is typical */
}


.mono-letter{
  filter:
    drop-shadow(-0.5px -0.5px 0 rgba(255,255,255,.60)) /* top-left highlight */
    drop-shadow( 0.6px  0.6px 0 rgba(0,0,0,.22));      /* bottom-right shade */
}

@media (max-width: 576px){
  .entry-title-row{ flex-wrap: wrap; }
  .entry-title{ flex: 1 1 100% !important; min-width: 0; }
  .entry-title a{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    display: block !important;
  }
}

.fs-4-5 { font-size: 1.375rem !important; }  /* halfway between fs-4 and fs-5 */