/* ============================================================================
   sjp-modern.css — SJP modern visual polish (ADDITIVE, public/marketing pages).
   Loaded AFTER the existing theme CSS so it gently overrides visual properties only.
   STRICT RULE: no layout/position/size changes — only typography smoothing, rounded
   corners, subtle shadows, smooth transitions, input focus, and accessibility focus
   rings. Nothing here moves, removes, adds, or repositions any element. Fully
   reversible (delete this file or remove its <link>). Search-box JS & lawyer-list
   loading are untouched (this is CSS only).
   ============================================================================ */

/* --- 1. Crisper typography (pure rendering; zero layout impact) --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- 2. Smooth, modern micro-interactions (polish; no layout impact) --- */
a,
button,
.btn,
.button,
input,
select,
textarea,
.form-control,
.lawyer-card,
.card {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

/* --- 3. Rounded inputs & buttons (border-radius only — does not reflow) --- */
.form-control,
.form-control-lg,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
.chosen-select,
.chosen-container .chosen-single,
.btn,
button,
.button {
  border-radius: 10px;
}

/* --- 4. Pleasant input focus state (visual only; replaces harsh default outline) --- */
.form-control:focus,
.form-control-lg:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #2A8A42;            /* SJP brand green (unchanged palette) */
  box-shadow: 0 0 0 3px rgba(42, 138, 66, .18);
}

/* --- 5. Subtle button hover lift (visual only) --- */
.btn:hover,
button:hover,
.button:hover {
  filter: brightness(1.04);
}

/* --- 6. Cards: gentle depth + rounding for a modern, minimal feel (no reflow) --- */
.card,
.lawyer-card,
.entry,
.widget {
  border-radius: 14px;
}
.lawyer-card,
.card {
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 2px 10px rgba(16, 24, 40, .05);
}
.lawyer-card:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, .10);
}

/* --- 7. Softer image corners on avatars/thumbnails (radius only) --- */
.lawyer-avatar img,
.-avatar,
.entry__img {
  border-radius: 12px;
}

/* --- 8. Accessibility: visible keyboard focus ring (no impact for mouse users) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #2A8A42;
  outline-offset: 2px;
}

/* --- 9. Small modern niceties (pure polish; zero layout impact) --- */
/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }
/* Branded text selection */
::selection { background: rgba(42, 138, 66, .18); }
::-moz-selection { background: rgba(42, 138, 66, .18); }
/* Crisper images */
img { image-rendering: auto; }
/* Pressed-button feedback (visual only) */
.btn:active, button:active, .button:active { filter: brightness(.97); }
/* Gentle link hover (color transition already set above; keep underline tidy) */
a { text-decoration-thickness: from-font; }

/* --- 10. Brand accent for native form controls (checkboxes/radios/range) --- */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: #2A8A42;
}

/* --- 11. Modern thin scrollbar (WebKit) + Firefox; cosmetic only --- */
* { scrollbar-width: thin; scrollbar-color: #b9c2cc transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c2cad3; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aab4bf; }

/* --- 12. Subtle mobile tap highlight in brand colour --- */
a, button, .btn, .button { -webkit-tap-highlight-color: rgba(42, 138, 66, .15); }

/* --- 13. Respect reduced-motion preference (accessibility) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================================
   PILOT (homepage only, scoped to body.frontpage): controlled modern spacing &
   typography for a stronger minimal feel. Owner-approved relaxation of the
   "don't move" rule. Review on the homepage; if good, the body.frontpage scope is
   removed to apply site-wide. box-sizing:border-box guards against any overflow.
   ============================================================================ */
body.frontpage { line-height: 1.65; }
body.frontpage h1, body.frontpage h2, body.frontpage h3, body.frontpage h4 {
  line-height: 1.25;
  letter-spacing: -.01em;
}
body.frontpage h1, body.frontpage h2 { font-weight: 700; }
body.frontpage p { margin-bottom: 1rem; }
body.frontpage .lawyer-card, body.frontpage .card {
  box-sizing: border-box;
  padding: 18px;
}

/* ============================================================================
   PILOT (homepage only, body.frontpage): PREMIUM TOP BAR — a decent, trustworthy,
   world-class legal-directory header. Visual only; structure/links/positions unchanged.
   Review on the homepage; if approved, the body.frontpage scope is removed to globalize.
   ============================================================================ */
/* Subtle depth under the header (keeps the theme's existing background/colours) */
body.frontpage #header {
  box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
}
body.frontpage #header::before {
  content: "";
  display: block;
  height: 2px;           /* same weight as the white divider -> consistent lines */
  background: #2A8A42;   /* solid brand green — one consistent shade (no gradient) */
}
/* Premium wordmark — "SJP Lawyers Directory ®2018". Bolder, refined spacing, with the
   ®2018 as a subtle muted suffix instead of a jarring superscript. */
body.frontpage #header .logo h3,
body.frontpage #header .logo1 h4 {
  font-weight: 800 !important;
  letter-spacing: -.2px;
  color: #fff !important;
  font-size: 1.12rem !important;    /* keeps the original WIDTH */
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
  transform: scaleY(1.7);           /* stretch HEIGHT only to match the logo (no extra width) */
  transform-origin: left center;
}
body.frontpage #header .logo h3 small {
  display: inline-block;
  transform: scaleY(.588);          /* undo the parent stretch so ®2018 keeps normal proportions */
  font-weight: 600;
  font-size: .5em;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .55);
  margin-left: 4px;
}
body.frontpage #header .logo h3 small sup {
  vertical-align: baseline;
  top: 0;
  font-size: inherit;
}
@media (max-width: 600px) {
  body.frontpage #header .logo h3,
  body.frontpage #header .logo1 h4 { font-size: .82rem !important; line-height: 1 !important; transform: scaleY(1.5); }
  /* show the FULL "SJP Lawyers Directory ®2018" on mobile too */
  body.frontpage #header .logo h3 .-hidemobile { display: inline !important; }
  body.frontpage #header .logo h3 small { font-size: .5em; margin-left: 2px; }
}

/* Navigation links: the theme adds padding:6px ON HOVER (which pushes the next item).
   We cancel that hover padding so NOTHING moves, and replace the grey hover box with a
   clean brand-green underline. Keeps the links' original green colour + bold weight. */
body.frontpage #subnavigation ul li a {
  letter-spacing: .2px;
  transition: color .2s ease;
}

/* DESKTOP horizontal menu ONLY — min-width:60.9375em is the theme's breakpoint where
   #subnavigation switches from the mobile burger OVERLAY to the horizontal bar. The
   translucency, boxless links, and hover-underline below are desktop-only so they
   never touch the mobile overlay (which stays pure black with native padding). */
@media screen and (min-width: 60.9375em) {
  /* White divider line under the logo row — DESKTOP ONLY. On mobile the menu opens
     as a vertical overlay where a white line would clash with the green item
     separators, so the white line is kept off mobile (the mobile divider is green,
     matching the separators — see the mobile block below). One clean uniform 2px
     line, even thickness full-width, with a soft dark shadow for depth. */
  body.frontpage #header-nav {
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, .9),
                0 6px 8px -2px rgba(0, 0, 0, .55);
  }
  /* Translucent "glass" strip below the divider line. */
  body.frontpage #subnavigation {
    background: rgba(0, 0, 0, .70);
    background-color: rgba(0, 0, 0, .70);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /* Boxless links so the strip reads as one translucent surface, not black blocks. */
  body.frontpage #subnavigation ul li a {
    background-color: transparent;
  }
  /* Clean brand-green underline on hover; padding:0 cancels the theme's hover
     padding:6px so neighbouring items never shift. Desktop links are display:inline
     with padding:0, so removing padding costs no size here — no jump. */
  body.frontpage #subnavigation ul li:hover a,
  body.frontpage #subnavigation ul li a:hover {
    padding: 0;
    background-color: transparent;
    color: #2A8A42;
    text-decoration: underline;
    text-decoration-color: #2A8A42;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* MOBILE / burger overlay (below the desktop breakpoint): keep the menu PURE BLACK
   and fully opaque (no translucency, no blur), and leave link padding untouched so
   tapping a menu item never makes the list jump. */
@media screen and (max-width: 60.875em) {
  body.frontpage #subnavigation {
    background: #000;
    background-color: #000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* No white line on mobile (it's desktop-only). The theme draws the menu wrapper's
     top border in white (#fff); repaint it brand green so EVERY line in the open
     mobile menu is the same thin green — consistent thickness, colour, and position. */
  body.frontpage #subnavigation .subnavigation-wrapper {
    border-top-color: #2A8A42;
  }
  body.frontpage #header-nav {
    box-shadow: none;
  }
  /* CRISP, UNIFORM separators: the theme rows were 55.4px tall (padding 28 +
     line-height 26.4 + border 1), a fractional height. On hi-DPI phones each 1px
     green border then landed on a different sub-pixel boundary and drifted row to
     row (some bright, some dim). Forcing line-height:27px makes every row exactly
     56px (28 + 27 + 1). 56 × DPR is an integer for the common phone ratios
     (2, 2.625, 2.75, 3), so all separators snap to the SAME sub-pixel phase and
     render identically. */
  body.frontpage #subnavigation ul li a {
    line-height: 27px;
  }
}

/* CONSISTENT GREEN LINES: the theme draws the menu's divider lines in a lighter
   green (#4e9b28) while the menu link text + accents use the brand green (#2A8A42),
   so the green lines looked mismatched (some dark, some light). Unify every green
   line in the menu to the single brand green #2A8A42. (On desktop these borders are
   0, so this only repaints the mobile burger-menu dividers — and any other place the
   theme shows them — to match.) Colour-only override; no size/layout change. */
body.frontpage #subnavigation ul {
  border-top-color: #2A8A42;
}
body.frontpage #subnavigation ul li {
  border-bottom-color: #2A8A42;
}
/* Same unification for the green lines around the Login / Sign-up area and its
   dropdown, so every green line in the whole top bar is the one brand green. */
body.frontpage #sticky-nav #header-nav .login-buttons a {
  border-bottom-color: #2A8A42;
}
body.frontpage #sticky-nav #header-nav .login-buttons .login-buttons-wrapper {
  border-top-color: #2A8A42;
}

/* Premium Login / Sign Up buttons (header): Login = ghost pill, Sign Up = green CTA. */
body.frontpage #sticky-nav #header-nav #login-buttons-wrapper { width: auto !important; background: transparent !important; }
body.frontpage #sticky-nav #header-nav .login-buttons .login,
body.frontpage #sticky-nav #header-nav .login-buttons .sign-up {
  width: auto !important; height: 34px; line-height: 32px; padding: 0 16px !important; border-radius: 999px;
  font-weight: 700; letter-spacing: .2px; text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease; }
body.frontpage #sticky-nav #header-nav .login-buttons .login {
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5) !important; }
body.frontpage #sticky-nav #header-nav .login-buttons .login:hover {
  background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.85) !important; }
body.frontpage #sticky-nav #header-nav .login-buttons .sign-up {
  background: linear-gradient(135deg,#34a857,#1f6e34) !important; color: #fff !important;
  border: 0 !important; border-left: 0 !important; margin-left: 8px; box-shadow: 0 4px 12px rgba(31,110,52,.4); }
body.frontpage #sticky-nav #header-nav .login-buttons .sign-up:hover { filter: brightness(1.08); color: #fff !important; }

/* ============================================================================
   PREMIUM HERO (homepage, body.frontpage). Visual only — the SAME background image
   (jld/images/homepage/main-image.jpg), the SAME hero height (background-size:cover),
   and the SAME search markup + JS (chosen selects, fetch_select, populateCountries)
   are untouched. We only layer depth, glass, and typography on top so the banner
   feels high-end on both desktop and mobile. Nothing here is a flat solid fill — the
   image stays clearly visible through a soft gradient.
   ============================================================================ */

/* 1) Establish a stacking context on the hero so a gradient vignette can sit BEHIND
   the content without a solid block. Content (search card, headings) stays on top.
   No overflow:hidden — the chosen dropdowns must be free to extend below the hero. */
body.frontpage section.classiera-static-slider-v2 {
  position: relative;
  z-index: 5;   /* keep the hero (and its open search dropdowns) above the sections below */
}
/* Soft cinematic vignette: dark at top (so the white heading pops) and bottom (so the
   gold badge pops), but light/transparent through the middle so the photo shows. */
body.frontpage section.classiera-static-slider-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(6, 10, 15, .58) 0%,
      rgba(6, 10, 15, .18) 24%,
      rgba(6, 10, 15, .08) 46%,
      rgba(6, 10, 15, .30) 74%,
      rgba(6, 10, 15, .66) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Keep all hero content above the vignette. */
body.frontpage section.classiera-static-slider-v2 > .container,
body.frontpage section.classiera-static-slider-v2 > .search-section {
  position: relative;
  z-index: 1;
}

/* 2) Premium headline. */
body.frontpage .find-a-lawyer {
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .65);
}
/* Refined, READABLE verified-by subtitle. The two apps use DIFFERENT markup:
   search.just.pk = span.-hidemobile > h3 > font (weak inline shadow 2px 0 5px);
   sjp.com.pk (root) = p.subtitle (only inline color:white). Both sat over the light
   middle of the hero photo and were hard to read, so give BOTH a tight dark
   outline-style shadow + glow + bold white. Scoped precisely so it NEVER touches the
   root's conditional green "Order Confirmed!" h3.subtitle. (!important beats inline.) */
body.frontpage .classiera-static-slider-content span.-hidemobile h3,
body.frontpage .classiera-static-slider-content span.-hidemobile font,
body.frontpage .classiera-static-slider-content p.subtitle {
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: .3px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 1),
               0 1px 4px rgba(0, 0, 0, .98),
               0 0 18px rgba(0, 0, 0, .85) !important;
}
/* Owner wants the line on phones too (theme hides it via .-hidemobile below
   37.4375em). Reveal ONLY this subtitle (not the logo's "Directory"), compact. */
@media screen and (max-width: 37.4375em) {
  body.frontpage .classiera-static-slider-content span.-hidemobile {
    display: block !important;
  }
  body.frontpage .classiera-static-slider-content span.-hidemobile h3 {
    margin: 6px 14px 2px;
    font-size: 13px;
  }
  body.frontpage .classiera-static-slider-content span.-hidemobile font {
    line-height: 1.45 !important;
    letter-spacing: .2px;
  }
}

/* 3) Frosted-glass search card — the centrepiece. Wraps the existing inputs/JS. */
body.frontpage .search-section-v6 .form-v6-bg {
  background: rgba(15, 22, 30, .42);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42),
              inset 0 1px 0 rgba(255, 255, 255, .18);
  padding: 14px;
  position: relative;
  z-index: 30;            /* keep the open city/practice dropdowns above the Excellence badge */
}
/* the dropdown options themselves sit above everything in the card */
body.frontpage .search-section-v6 .chosen-container .chosen-drop { z-index: 60; }
body.frontpage .search-section-v6 .chosen-container.chosen-with-drop { z-index: 60; }
/* Excellence badge stays below the dropdown */
body.frontpage .search-section-v6 .form-group.text-center { position: relative; z-index: 1; }

/* 4) Brand-green gradient CTA (was flat black). Keeps the theme's size/radius. */
body.frontpage .search-section-v6 .form-v6-bg .form-group button {
  background: linear-gradient(135deg, #34a857 0%, #2A8A42 45%, #1f6e34 100%);
  color: #fff;
  border: none;
  letter-spacing: .6px;
  box-shadow: 0 10px 22px rgba(31, 110, 52, .45);
}
body.frontpage .search-section-v6 .form-v6-bg .form-group button:hover {
  filter: brightness(1.06);
}

/* 5) "X Years of Excellence" → elegant gold glass pill (keeps the inline gold text). */
body.frontpage .search-section-v6 .form-group.text-center h2 {
  display: inline-block;
  margin: 10px auto 0;
  padding: 9px 24px;
  border: 1px solid rgba(255, 204, 0, .55);
  border-radius: 999px;
  background: rgba(0, 0, 0, .30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30), inset 0 0 20px rgba(255, 204, 0, .12);
  letter-spacing: 1.1px;
  font-size: 20px;
}
/* Mobile: keep the pill tidy and readable when the label wraps. */
@media (max-width: 600px) {
  body.frontpage .search-section-v6 .form-group.text-center h2 {
    font-size: 15px;
    padding: 8px 16px;
    letter-spacing: .6px;
    line-height: 1.4;
  }
  /* Keep the headline on a single line (no added height): drop the extra weight/
     tracking that pushed it to wrap on narrow screens. */
  body.frontpage .find-a-lawyer {
    font-weight: 700;
    letter-spacing: 0;
  }
}

/* Divider below the logo row. Placed on #header-nav (the element proven to render a
   visible line here). A crisp WHITE hairline with a soft dark shadow spreading
   downward, so the line looks like it sinks / "goes into the ground". */
body.frontpage #header-nav {
  position: relative;
}

/* --- 14. Mobile refinements (small screens ONLY — desktop layout untouched) --- */
@media (max-width: 600px) {
  /* Comfortable reading on phones */
  body { line-height: 1.6; }
  /* 16px form fields prevent iOS auto-zoom on focus + are easier to read/tap */
  input,
  select,
  textarea,
  .form-control,
  .form-control-lg,
  .chosen-select {
    font-size: 16px;
  }
  /* Finger-friendly tap targets (Google mobile-usability best practice) */
  .btn,
  button,
  .button,
  a.button {
    min-height: 44px;
  }
  /* Images never overflow their container on small screens */
  img { max-width: 100%; height: auto; }
}

/* ============================================================================
   PREMIUM HOMEPAGE DIRECTORY (.sjp-dir-*) — "Find by Legal Issue" + "Find by City".
   Rendered by include/homepage_directory.php (both apps). Click-first, grouped,
   popular-first, with lawyer-count badges. Pure presentation; all links/URLs are the
   legacy SEO ones. Self-contained class namespace (sjp-) so it can't clash.
   ============================================================================ */
.sjp-dir { --sjp-green:#2A8A42; --sjp-green-d:#1f6e34; --sjp-ink:#1f2937; --sjp-muted:#6b7280;
  --sjp-line:#e6e9ee; --sjp-bg:#f6f8f7; max-width:1200px; margin:0 auto; padding:0 16px 8px; }
.sjp-dir-wrap { padding:34px 4px; }
.sjp-dir-wrap--alt { border-top:1px solid var(--sjp-line); }
/* "Find a Lawyer for Your Legal Problem" full-width section — SAME light-green bg as
   the SaaS section. Vars redefined here since the cards are now outside .sjp-dir. */
.sjp-cat-section { --sjp-green:#2A8A42; --sjp-green-d:#1f6e34; --sjp-ink:#1f2937; --sjp-muted:#6b7280; --sjp-line:#e6e9ee;
  background:linear-gradient(180deg,#f6f8f7 0%,#eef3ef 100%); border-top:1px solid #e6e9ee; }
.sjp-cat-section .sjp-dir-wrap { max-width:1200px; margin:0 auto; padding:38px 20px; }
.sjp-dir-head { text-align:center; max-width:760px; margin:0 auto 22px; }
.sjp-dir-title { font-size:1.85rem; line-height:1.2; font-weight:800; letter-spacing:-.01em;
  color:var(--sjp-ink); margin:0 0 8px; }
.sjp-dir-sub { font-size:1rem; color:var(--sjp-muted); margin:0; }

/* category cards */
.sjp-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }
.sjp-cat-card { background:#fff; border:1px solid var(--sjp-line); border-radius:16px; padding:18px 18px 14px;
  box-shadow:0 1px 3px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sjp-cat-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(16,24,40,.12);
  border-color:#d7ded8; }
.sjp-cat-card__head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.sjp-cat-ico { flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; border-radius:12px;
  background:linear-gradient(135deg,rgba(42,138,66,.14),rgba(31,110,52,.10)); }
.sjp-cat-name { font-size:1.12rem; font-weight:700; color:var(--sjp-ink); margin:2px 0 2px; }
.sjp-cat-help { font-size:.84rem; color:var(--sjp-muted); margin:0; line-height:1.4; }

/* chips (links) */
.sjp-chip-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sjp-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  background:var(--sjp-bg); border:1px solid var(--sjp-line); color:var(--sjp-ink);
  font-size:.86rem; font-weight:600; text-decoration:none; line-height:1.1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease; }
.sjp-chip:hover { background:var(--sjp-green); border-color:var(--sjp-green); color:#fff; transform:translateY(-1px); }
.sjp-chip__n { font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:999px;
  background:rgba(42,138,66,.12); color:var(--sjp-green-d); }
.sjp-chip:hover .sjp-chip__n { background:rgba(255,255,255,.25); color:#fff; }

/* popular cities row */
.sjp-pop { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:center;
  max-width:980px; margin:0 auto 16px; }
.sjp-pop__label { font-size:.85rem; font-weight:700; color:var(--sjp-muted); margin-right:2px; }
.sjp-chip--hot { background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d)); border-color:var(--sjp-green-d); color:#fff; }
.sjp-chip--hot .sjp-chip__n { background:rgba(255,255,255,.22); color:#fff; }
.sjp-chip--hot:hover { filter:brightness(1.06); color:#fff; }

/* optional city search */
.sjp-citysearch { display:block; width:100%; max-width:460px; margin:0 auto 22px; padding:12px 16px;
  font-size:.95rem; border:1px solid var(--sjp-line); border-radius:999px; outline:none; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .2s ease, box-shadow .2s ease; }
.sjp-citysearch:focus { border-color:var(--sjp-green); box-shadow:0 0 0 3px rgba(42,138,66,.16); }

/* province sections (native <details> accordions) */
.sjp-prov-grid { display:flex; flex-direction:column; gap:14px; max-width:1080px; margin:0 auto; }
.sjp-prov { background:#fff; border:1px solid var(--sjp-line); border-radius:14px; padding:4px 16px 14px;
  box-shadow:0 1px 3px rgba(16,24,40,.04); }
.sjp-prov__head { display:flex; align-items:center; gap:10px; padding:12px 2px; cursor:pointer;
  font-weight:700; color:var(--sjp-ink); list-style:none; }
.sjp-prov__head::-webkit-details-marker { display:none; }
.sjp-prov__head::after { content:"⌄"; margin-left:auto; font-size:1.1rem; color:var(--sjp-muted);
  transition:transform .2s ease; }
.sjp-prov[open] .sjp-prov__head::after { transform:rotate(180deg); }
.sjp-prov__ico { font-size:1.05rem; }
.sjp-prov__name { font-size:1.05rem; }
.sjp-prov__n { font-size:.74rem; font-weight:700; color:var(--sjp-green-d); background:rgba(42,138,66,.12);
  padding:2px 9px; border-radius:999px; }
.sjp-noresult { text-align:center; color:var(--sjp-muted); }

/* "First 15 cities, then Show all" clamp. All cities remain in the HTML (SEO); these
   rules only control what the USER sees. Filtering or expanding a province reveals all. */
.sjp-extra { display:none; }
.sjp-prov.is-open .sjp-extra { display:revert; }
.sjp-prov-grid.sjp-filtering .sjp-extra { display:revert; }
.sjp-showmore-li { list-style:none; }
.sjp-showmore { display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 14px;
  border:1px dashed #c7d0c9; background:#fff; color:var(--sjp-green-d); font-weight:700; font-size:.82rem;
  border-radius:999px; cursor:pointer; line-height:1.1; transition:background-color .18s ease, border-color .18s ease; }
.sjp-showmore:hover { border-color:var(--sjp-green); background:rgba(42,138,66,.06); }
.sjp-prov-grid.sjp-filtering .sjp-showmore-li { display:none; }

/* A–Z city index — premium letter buttons (filter the list; one row on desktop) */
.sjp-az-block { max-width:1140px; margin:6px auto 20px; text-align:center; }
.sjp-az-title { font-size:.9rem; font-weight:700; color:var(--sjp-muted); margin:0 0 12px;
  text-transform:uppercase; letter-spacing:.09em; }
.sjp-az { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.sjp-az__btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:#fff; border:1px solid var(--sjp-line); color:var(--sjp-ink);
  font-weight:800; font-size:1rem; text-decoration:none; box-shadow:0 1px 2px rgba(16,24,40,.05); cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease; }
.sjp-az__btn:hover { background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d));
  border-color:var(--sjp-green-d); color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px rgba(31,110,52,.30); }
.sjp-az__btn.is-active { background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d));
  border-color:var(--sjp-green-d); color:#fff; }
.sjp-az__all { width:auto; padding:0 14px; }

/* ENTERPRISE SaaS PLATFORM CARDS (Salesforce/HubSpot-grade) */
.sjp-saas { background:linear-gradient(180deg,#f6f8f7 0%,#eef3ef 100%); border-top:1px solid var(--sjp-line); }
.sjp-saas .sjp-dir-wrap { max-width:1200px; margin:0 auto; padding:38px 20px; } /* match the directory cards' gutters */
.sjp-saas-kicker { display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sjp-green-d); background:rgba(42,138,66,.12);
  padding:5px 14px; border-radius:999px; margin-bottom:12px; }
.sjp-saas-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; align-items:stretch; }
.sjp-saas-card { position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--sjp-line); border-radius:18px; padding:26px 24px;
  box-shadow:0 1px 3px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.sjp-saas-card:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(16,24,40,.16); border-color:#cfe0d4; }
.sjp-saas-card--featured { border-color:rgba(42,138,66,.45); box-shadow:0 18px 44px rgba(31,110,52,.16);
  background:linear-gradient(180deg,#ffffff 0%,#f6fbf7 100%); }
.sjp-saas-card--featured::before { content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg,rgba(42,138,66,.5),rgba(42,138,66,0)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.sjp-saas-badge { position:absolute; top:18px; right:18px; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d));
  padding:4px 11px; border-radius:999px; }
.sjp-saas-ico { width:58px; height:58px; display:flex; align-items:center; justify-content:center; font-size:30px;
  border-radius:16px; background:linear-gradient(135deg,rgba(42,138,66,.16),rgba(31,110,52,.10)); margin-bottom:16px; }
.sjp-saas-name { font-size:1.18rem; font-weight:800; color:var(--sjp-ink); line-height:1.25; margin:0 0 10px; }
.sjp-saas-desc { font-size:.9rem; color:var(--sjp-muted); line-height:1.55; margin:0 0 16px; }
.sjp-saas-feats { list-style:none; margin:0 0 20px; padding:0; }
.sjp-saas-feats li { position:relative; padding-left:26px; margin-bottom:9px; font-size:.88rem; color:var(--sjp-ink); font-weight:500; }
.sjp-saas-feats li::before { content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; line-height:18px;
  text-align:center; font-size:.7rem; font-weight:800; color:#fff; border-radius:50%;
  background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d)); }
.sjp-saas-cta { margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:11px 22px; border-radius:999px; font-weight:700; font-size:.9rem; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#34a857,#1f6e34); box-shadow:0 8px 18px rgba(31,110,52,.30);
  transition:filter .18s ease, transform .12s ease, gap .18s ease; }
.sjp-saas-cta:hover { filter:brightness(1.06); transform:translateY(-1px); gap:12px; color:#fff; }

/* SOLVED CASES / recent client reviews (homepage) */
.sjp-cases { background:#fff; }
.sjp-cases .sjp-dir-wrap { max-width:1200px; margin:0 auto; padding:42px 20px; }
.sjp-cases-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.sjp-case-card { background:#fff; border:1px solid var(--sjp-line,#e6e9ee); border-radius:16px; padding:20px;
  box-shadow:0 1px 3px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sjp-case-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(16,24,40,.12); border-color:#d7ded8; }
.sjp-case-head { display:flex; align-items:flex-start; gap:12px; }
.sjp-case-ico { flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  font-size:22px; border-radius:12px; background:linear-gradient(135deg,rgba(42,138,66,.15),rgba(31,110,52,.10)); }
.sjp-case-meta { flex:1 1 auto; min-width:0; }
.sjp-case-area { font-size:1.02rem; font-weight:800; color:var(--sjp-ink,#1f2937); margin:0 0 2px; }
.sjp-case-city { font-size:.8rem; color:var(--sjp-muted,#6b7280); margin:0; }
.sjp-case-badge { flex:0 0 auto; font-size:.68rem; font-weight:800; color:#fff; padding:4px 10px; border-radius:999px;
  background:linear-gradient(135deg,#34a857,#1f6e34); white-space:nowrap; }
.sjp-case-msg { margin:14px 0 10px; color:var(--sjp-ink,#1f2937); font-size:.9rem; line-height:1.55; font-style:italic;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sjp-case-by { margin:10px 0 0; font-size:.78rem; color:var(--sjp-muted,#6b7280); }
.sjp-cases-more { text-align:center; margin-top:24px; }
.sjp-cases-more a { display:inline-flex; align-items:center; gap:6px; padding:11px 24px; border-radius:999px;
  font-weight:700; font-size:.9rem; text-decoration:none; color:var(--sjp-green-d,#1f6e34); border:1px solid var(--sjp-green,#2A8A42);
  transition:background-color .18s ease,color .18s ease; }
.sjp-cases-more a:hover { background:var(--sjp-green,#2A8A42); color:#fff; }
@media (max-width:600px){ .sjp-cases-grid { grid-template-columns:1fr; } }

/* Premium "SJP: Pakistan's First Classified Lawyers Directory" SEO block (full-width
   light-green band, content in a clean white card). */
.sjp-seo { max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important;
  background:linear-gradient(180deg,#f6f8f7 0%,#eef3ef 100%); border-top:1px solid #e6e9ee; padding:46px 16px; }
.sjp-seo #lawyer-name-directory { max-width:1000px; margin:0 auto; }
.sjp-seo .wrapper { background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:8px 6px !important; }
.sjp-seo .heading-1 { display:inline-block; position:relative; font-size:2.35rem; font-weight:800; color:#14321f;
  letter-spacing:-.015em; line-height:1.18; padding-bottom:18px; margin-bottom:8px; }
.sjp-seo .heading-1::after { content:""; position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:96px;
  height:4px; border-radius:999px; background:linear-gradient(90deg,#34a857,#1f6e34); }
.sjp-seo p { color:#4b5563; line-height:1.75; }
.sjp-seo p strong { display:inline-block; position:relative; color:#14321f; font-size:1.14rem; font-weight:800;
  letter-spacing:-.01em; padding-left:16px; margin-top:12px; }
.sjp-seo p strong::before { content:""; position:absolute; left:0; top:.16em; width:5px; height:.84em;
  border-radius:3px; background:linear-gradient(180deg,#34a857,#1f6e34); }
.sjp-seo ul { list-style:none; padding-left:2px; }
.sjp-seo ul li { position:relative; padding-left:28px; color:#4b5563; line-height:1.95; }
.sjp-seo ul li::before { content:"\2713"; position:absolute; left:0; top:.2em; width:19px; height:19px; line-height:19px;
  text-align:center; font-size:.72rem; font-weight:800; color:#fff; border-radius:50%;
  background:linear-gradient(135deg,#34a857,#1f6e34); }
.sjp-seo a { color:#1f6e34; font-weight:700; }
@media (max-width:600px){ .sjp-seo .heading-1 { font-size:1.55rem; } .sjp-seo p strong { font-size:1.04rem; } }

/* ============================================================================
   LEGAL-TECH PLATFORM PAGE (.sjp-pf-*)
   ============================================================================ */
.sjp-pf { --sjp-green:#2A8A42; --sjp-green-d:#1f6e34; --sjp-ink:#1f2937; --sjp-muted:#6b7280;
  --sjp-line:#e6e9ee; color:var(--sjp-ink); }
.sjp-pf-wrap { max-width:1160px; margin:0 auto; padding:0 18px; }
.sjp-pf-section { padding:46px 18px; }
.sjp-pf-prices-top { padding-top:120px; } /* clear the fixed header on the Pricing page */
@media (max-width:600px){ .sjp-pf-prices-top { padding-top:92px; } }

/* hero */
/* Platform/Pricing pages opt out of the theme's centered #main-content (max-width
   1300 + overflow-x:hidden) so the hero can sit edge-to-edge; inner content still
   centers via .sjp-pf-wrap. */
#main-content.sjp-page-full { max-width:none !important; margin-left:0 !important; margin-right:0 !important; width:auto !important; }
.sjp-pf-hero { text-align:center; padding:130px 18px 56px;
  background:radial-gradient(1200px 420px at 50% -60px, rgba(42,138,66,.14), rgba(255,255,255,0) 70%),
             linear-gradient(180deg,#0e1c14 0%, #14321f 100%); color:#fff; }
.sjp-pf-hero .sjp-saas-kicker { background:rgba(255,255,255,.12); color:#d6f3df; }
.sjp-pf-h1 { font-size:2.6rem; line-height:1.12; font-weight:800; letter-spacing:-.02em; margin:8px auto 14px; max-width:900px; color:#fff; }
.sjp-pf-lead { font-size:1.12rem; line-height:1.6; color:#cfe7d7; max-width:760px; margin:0 auto 26px; }
.sjp-pf-hero-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.sjp-pf-ghost { display:inline-flex; align-items:center; padding:11px 22px; border-radius:999px; font-weight:700;
  font-size:.9rem; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.5); transition:background-color .18s ease; }
.sjp-pf-ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.sjp-pf-stats { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin:34px 0 0; padding:0; }
.sjp-pf-stats li { display:flex; flex-direction:column; align-items:center; }
.sjp-pf-stats strong { font-size:1.5rem; font-weight:800; color:#fff; }
.sjp-pf-stats span { font-size:.8rem; color:#a9c9b4; }

/* ecosystem */
.sjp-pf-eco { display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:14px; }
.sjp-pf-eco-node { flex:1 1 220px; max-width:300px; background:#fff; border:1px solid var(--sjp-line); border-radius:16px;
  padding:22px 18px; text-align:center; font-size:30px; box-shadow:0 6px 18px rgba(16,24,40,.06); }
.sjp-pf-eco-node strong { display:block; font-size:1.02rem; color:var(--sjp-ink); margin:8px 0 4px; }
.sjp-pf-eco-node span { display:block; font-size:.84rem; color:var(--sjp-muted); font-weight:400; line-height:1.45; }
.sjp-pf-eco-core { background:linear-gradient(180deg,#f6fbf7,#eef6f0); border-color:rgba(42,138,66,.4); }
.sjp-pf-eco-arrow { display:flex; align-items:center; font-size:1.6rem; color:var(--sjp-green); font-weight:800; }
.sjp-pf-eco-foot { text-align:center; max-width:760px; margin:20px auto 0; color:var(--sjp-muted); font-size:.95rem; }
.sjp-pf-eco-foot strong { color:var(--sjp-ink); }

/* modules */
.sjp-pf-module { padding:44px 18px; border-top:1px solid var(--sjp-line); }
.sjp-pf-module--alt { background:#f6f8f7; }
.sjp-pf-mod-head { display:flex; gap:16px; align-items:flex-start; max-width:820px; margin:0 auto 26px; }
.sjp-pf-mod-head .sjp-dir-title, .sjp-pf-mod-head .sjp-dir-sub { text-align:left; margin-left:0; margin-right:0; }
.sjp-pf-mod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:22px; }
.sjp-pf-col h4 { font-size:1rem; font-weight:800; color:var(--sjp-ink); margin:0 0 12px; }
.sjp-pf-module .sjp-saas-cta { margin-top:4px; }

/* packages */
.sjp-pf-price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; align-items:stretch; }
.sjp-pf-plan { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--sjp-line);
  border-radius:18px; padding:26px 22px; box-shadow:0 6px 18px rgba(16,24,40,.05); transition:transform .2s ease, box-shadow .2s ease; }
.sjp-pf-plan:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(16,24,40,.12); }
.sjp-pf-plan h3 { font-size:1.05rem; font-weight:800; color:var(--sjp-ink); margin:0 0 6px; }
.sjp-pf-plan--featured { border-color:rgba(42,138,66,.5); box-shadow:0 18px 44px rgba(31,110,52,.18); }
.sjp-pf-plan--enterprise { background:linear-gradient(180deg,#0e1c14,#14321f); border-color:#14321f; }
.sjp-pf-plan--enterprise h3, .sjp-pf-plan--enterprise .sjp-pf-price { color:#fff; }
.sjp-pf-plan--enterprise .sjp-pf-plan-note { color:#a9c9b4; }
.sjp-pf-plan--enterprise .sjp-saas-feats li { color:#dbeee2; }
.sjp-pf-pop { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:1.05rem; color:#ffd54a; box-shadow:0 4px 12px rgba(31,110,52,.4); }
.sjp-pf-price { font-size:1.9rem; font-weight:800; color:var(--sjp-green-d); line-height:1; margin:4px 0 2px; }
.sjp-pf-price span { font-size:.8rem; font-weight:600; color:var(--sjp-muted); }
.sjp-pf-plan-note { font-size:.78rem; color:var(--sjp-muted); margin:0 0 16px; }
.sjp-pf-plan-cta { margin-top:auto; text-align:center; padding:11px 18px; border-radius:999px; font-weight:700; font-size:.88rem;
  text-decoration:none; color:var(--sjp-green-d); border:1px solid var(--sjp-green); transition:all .18s ease; }
.sjp-pf-plan-cta:hover { background:var(--sjp-green); color:#fff; }
.sjp-pf-plan-cta--solid { background:linear-gradient(135deg,#34a857,#1f6e34); color:#fff; border-color:var(--sjp-green-d); }
.sjp-pf-plan--enterprise .sjp-pf-plan-cta { color:#fff; border-color:rgba(255,255,255,.6); }
.sjp-pf-price-foot { text-align:center; color:var(--sjp-muted); font-size:.85rem; margin:22px auto 0; max-width:680px; }
.sjp-pf-price-foot a { color:var(--sjp-green-d); font-weight:700; }

/* why-choose */
.sjp-pf-why-card { background:#fff; border:1px solid var(--sjp-line); border-radius:16px; padding:22px 20px;
  box-shadow:0 4px 14px rgba(16,24,40,.05); transition:transform .2s ease, box-shadow .2s ease; }
.sjp-pf-why-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,24,40,.12); }
.sjp-pf-why-card span { font-size:26px; }
.sjp-pf-why-card h4 { font-size:1.02rem; font-weight:800; color:var(--sjp-ink); margin:10px 0 6px; }
.sjp-pf-why-card p { font-size:.86rem; color:var(--sjp-muted); line-height:1.5; margin:0; }

/* faq */
.sjp-pf-faq { max-width:820px; margin:0 auto; }
.sjp-pf-faq-item { background:#fff; border:1px solid var(--sjp-line); border-radius:12px; padding:2px 18px; margin-bottom:10px; }
.sjp-pf-faq-item summary { cursor:pointer; font-weight:700; color:var(--sjp-ink); padding:14px 0; list-style:none; position:relative; padding-right:28px; }
.sjp-pf-faq-item summary::-webkit-details-marker { display:none; }
.sjp-pf-faq-item summary::after { content:"+"; position:absolute; right:2px; top:12px; font-size:1.3rem; color:var(--sjp-green); }
.sjp-pf-faq-item[open] summary::after { content:"–"; }
.sjp-pf-faq-item p { margin:0 0 16px; color:var(--sjp-muted); font-size:.92rem; line-height:1.6; }

/* DETAILED package cards (.sjp-pk-*) — 4 equal-height cards */
.sjp-pk { --sjp-green:#2A8A42; --sjp-green-d:#1f6e34; --sjp-ink:#1f2937; --sjp-muted:#6b7280; --sjp-line:#e6e9ee;
  max-width:1180px; margin:0 auto; padding:0 16px; }
.sjp-pk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.sjp-pk-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--sjp-line);
  border-radius:18px; padding:24px 20px; box-shadow:0 6px 18px rgba(16,24,40,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sjp-pk-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(16,24,40,.14); }
.sjp-pk-card--featured { border-color:rgba(42,138,66,.5); box-shadow:0 18px 44px rgba(31,110,52,.18); }
.sjp-pk-card--enterprise { background:linear-gradient(180deg,#0e1c14,#14321f); border-color:#14321f; }
.sjp-pk-card--enterprise .sjp-pk-name, .sjp-pk-card--enterprise .sjp-pk-price { color:#fff; }
.sjp-pk-card--enterprise .sjp-pk-note { color:#a9c9b4; }
.sjp-pk-card--enterprise .sjp-pk-k { color:#a9c9b4; }
.sjp-pk-card--enterprise .sjp-pk-v { color:#fff; }
.sjp-pk-card--enterprise .sjp-pk-feats li { border-color:rgba(255,255,255,.12); }
.sjp-pk-card--enterprise .sjp-pk-cta { color:#fff; border-color:rgba(255,255,255,.55); }
.sjp-pk-badge { position:absolute; top:-12px; right:18px; width:34px; height:34px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; font-size:1.1rem; color:#ffd54a;
  background:linear-gradient(135deg,var(--sjp-green),var(--sjp-green-d)); box-shadow:0 6px 14px rgba(31,110,52,.4); }
.sjp-pk-name { font-size:1.05rem; font-weight:800; color:var(--sjp-ink); margin:0 0 6px; }
.sjp-pk-price { font-size:1.7rem; font-weight:800; color:var(--sjp-green-d); line-height:1; margin:2px 0; }
.sjp-pk-price span { font-size:.74rem; font-weight:600; color:var(--sjp-muted); }
.sjp-pk-note { font-size:.76rem; color:var(--sjp-muted); margin:2px 0 14px; min-height:32px; }
.sjp-pk-feats { list-style:none; margin:0 0 16px; padding:0; }
.sjp-pk-feats li { display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--sjp-line); font-size:.82rem; }
.sjp-pk-feats li:last-child { border-bottom:0; }
.sjp-pk-k { color:var(--sjp-muted); }
.sjp-pk-v { color:var(--sjp-ink); font-weight:700; text-align:right; white-space:nowrap; }
.sjp-pk-cta { margin-top:auto; text-align:center; padding:11px 16px; border-radius:999px; font-weight:700; font-size:.86rem;
  text-decoration:none; color:var(--sjp-green-d); border:1px solid var(--sjp-green); transition:all .18s ease; }
.sjp-pk-cta:hover { background:var(--sjp-green); color:#fff; }
.sjp-pk-cta--solid { background:linear-gradient(135deg,#34a857,#1f6e34); color:#fff; border-color:var(--sjp-green-d); }
.sjp-pk-cta--solid:hover { filter:brightness(1.06); color:#fff; }
.sjp-pk-foot { text-align:center; color:var(--sjp-muted); font-size:.84rem; margin:22px auto 0; max-width:720px; }
.sjp-pk-foot a { color:var(--sjp-green-d); font-weight:700; }
@media (max-width:980px){ .sjp-pk-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sjp-pk-grid { grid-template-columns:1fr; } }

/* cta band */
.sjp-pf-cta-band { text-align:center; margin-top:40px; padding:44px 24px; border-radius:22px;
  background:linear-gradient(135deg,#14321f,#0e1c14); color:#fff; }
.sjp-pf-cta-band h2 { font-size:1.7rem; font-weight:800; color:#fff; margin:0 0 8px; }
.sjp-pf-cta-band p { color:#cfe7d7; margin:0 0 22px; }

/* mobile */
@media (max-width:600px){
  .sjp-dir-title { font-size:1.45rem; }
  .sjp-cat-grid { grid-template-columns:1fr; gap:14px; }
  .sjp-dir-wrap { padding:26px 2px; }
  .sjp-az__btn { width:34px; height:34px; font-size:.9rem; }
  .sjp-az { gap:5px; }
  /* City chips in a tidy 2-column grid on mobile (clear alphabetical sequence, no ragged rows) */
  .sjp-prov .sjp-chip-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sjp-prov .sjp-chip-list li { margin:0; }
  .sjp-prov .sjp-chip--city { width:100%; justify-content:center; text-align:center; }
  .sjp-prov .sjp-showmore-li { grid-column:1 / -1; }
  .sjp-prov .sjp-showmore { width:100%; justify-content:center; }
  /* Popular cities: same tidy 2-column grid on mobile */
  .sjp-pop { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sjp-pop__label { grid-column:1 / -1; text-align:center; margin:0 0 2px; }
  .sjp-pop .sjp-chip--city { width:100%; justify-content:center; }
  /* Vertically center the hamburger lines + the top-right icon in the black bar */
  body.frontpage #sticky-nav #hamburger { padding-top: 20px !important; padding-bottom: 20px !important; } /* center the ≡ lines in the 65px bar */
  body.frontpage #sticky-nav #header-nav .buttons-wrapper { transform: translateY(7px); }
  .sjp-saas-grid { grid-template-columns:1fr; gap:16px; }
  .sjp-saas-card { padding:22px 20px; }
  .sjp-pf-h1 { font-size:1.8rem; }
  .sjp-pf-hero { padding:110px 16px 40px; }
  .sjp-pf-eco-arrow { transform:rotate(90deg); }
  .sjp-pf-mod-head { flex-direction:column; }
  .sjp-pf-cta-band h2 { font-size:1.35rem; }
}