/* ============ Directory Categories hub (/catalogue) ============ */
/* White ground; the unified hero band (.site-band, style.css) supplies the top
   visual. Old white-card intro removed 2026-07-31. */
.cat-page { background:#fff; padding:0 0 72px; }

/* Company / Professional switch — sits inside the intro card, left-aligned. */
.cat-switch { display:inline-flex; gap:5px; background:#f1edfa; padding:6px; border-radius:14px; border:1px solid var(--line,#e6e9f2); margin:16px 0 0; }
.cat-switch button { font:inherit; font-size:1rem; font-weight:700; padding:11px 24px; border:0; background:transparent; color:var(--muted,#656d80); border-radius:9px; cursor:pointer; transition:background .18s, color .18s; display:inline-flex; align-items:center; gap:9px; }
.cat-switch button .n { font-size:.82rem; font-weight:700; padding:2px 9px; border-radius:20px; background:#e6e2f7; color:#6865e7; }
.cat-switch button[aria-pressed="true"] { background:#fff; color:#150d15; box-shadow:var(--shadow-sm,0 8px 24px rgba(30,38,109,.08)); }
.cat-switch button[aria-pressed="true"] .n { background:#6865e7; color:#fff; }
.cat-switch button:hover:not([aria-pressed="true"]) { color:#150d15; }

/* Grid of category cards. Each card is a link to /catalogue/{category}. */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
@media (max-width:960px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }

/* border-radius 12; the WHOLE card is the hover target and it fills on hover
   (not just an inset rectangle with gutters). */
.cat-card {
  display:flex; flex-direction:column; align-items:stretch;
  background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:12px;
  padding:18px 18px 16px; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(30,38,109,.04);
  transition:background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.cat-card:hover {
  background:#f5f3fe; border-color:#c9c0f2;
  box-shadow:0 14px 36px rgba(104,101,231,.14);
  transform:translateY(-2px);
}
.cat-card:focus-visible { outline:2px solid #6865e7; outline-offset:2px; }

.cat-h { display:flex; align-items:center; justify-content:flex-start; gap:13px; width:100%; }
.cat-ico { width:44px; height:44px; flex:none; border-radius:11px; background:#f1edfa; display:grid; place-items:center; transition:background .18s; }
.cat-card:hover .cat-ico { background:#fff; }
.cat-ico svg { width:25px; height:25px; color:#1c1730; display:block; }
/* Name left-aligned, takes the free space; chevron sits far right. */
.cat-name { flex:1; min-width:0; text-align:left; font-weight:800; font-size:1.06rem; color:#150d15; letter-spacing:-.005em; line-height:1.25; }
.cat-chev { color:#c3bfe0; flex:none; transition:transform .2s, color .18s; }
.cat-card:hover .cat-chev { transform:translateX(3px); color:#6865e7; }

/* Preview specialisms — a few tags so the card says what is inside. 26px gap
   from the category name row above. */
.cat-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:26px; }
.cat-tag { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; padding:4px 10px; border-radius:8px; background:#f6f5fb; border:1px solid var(--line,#e6e9f2); color:var(--text,#5a6478); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cat-tag__ico { flex:none; display:inline-flex; }
.cat-tag__ico svg { width:14px; height:14px; color:#8f8bd8; }
.cat-tag--more { background:transparent; border-style:dashed; color:var(--muted,#656d80); }

/* Services hub: the card is a STATIC container (not a link) - the service chips
   inside are the links. No hover-lift on the card itself, so chip hovers read. */
.cat-card--svc { cursor:default; }
.cat-card--svc:hover {
  background:#fff; border-color:var(--line,#e6e9f2);
  box-shadow:0 1px 2px rgba(30,38,109,.04); transform:none;
}
.cat-card--svc:hover .cat-ico { background:#f1edfa; }
/* Keyword-count pill sitting where the chevron would be. */
.svc-count { flex:none; font-size:.72rem; font-weight:700; color:#8a7fe0; background:#f1edfa; padding:3px 9px; border-radius:999px; }
/* Clickable service chip. */
.cat-tag--link { text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.cat-tag--link:hover { background:#efe9ff; border-color:#c9c0f2; color:#4b3fd6; }
.cat-tag--link:focus-visible { outline:2px solid #6865e7; outline-offset:2px; }

/* ============ Single category page (/catalogue/{category}) ============ */
.catx { background:#fff; padding:8px 0 64px; }
.catx-lead { max-width:820px; margin:0 0 40px; }
.catx-lead p { font-size:1.08rem; line-height:1.75; color:var(--text,#5a6478); margin:0; }

/* Hero stat strip (sits in the lavender hero band via the hero slot). */
.cat-stats { display:flex; flex-wrap:wrap; gap:0; margin-top:22px; }
.cat-stat { padding-right:26px; margin-right:26px; border-right:1px solid #d9d5ef; }
.cat-stat:last-child { border-right:0; margin-right:0; padding-right:0; }
.cat-stat b { display:block; font-size:1.5rem; font-weight:800; color:#150d15; line-height:1.15; letter-spacing:-.01em; }
.cat-stat span { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:#8a86a8; font-weight:700; }

/* Two-column body: main content + static (non-floating) interlinking rail. */
.catx-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; align-items:start; padding-top:14px; }
@media (max-width:960px){ .catx-grid{ grid-template-columns:1fr; gap:8px; } }
.catx-main { min-width:0; }
.catx-side { display:flex; flex-direction:column; gap:18px; }
@media (max-width:960px){ .catx-side{ margin-top:20px; } }

/* Specialisms as bordered tile links (data-honest: no fake per-item icons). */
.catx-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:520px){ .catx-tiles{ grid-template-columns:1fr; } }
.catx-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border:1px solid var(--line,#e6e9f2); border-radius:11px; background:#fff; color:var(--text-dark,#2b3245); font-weight:700; font-size:.92rem; text-decoration:none; transition:border-color .14s, background .14s, transform .14s; }
.catx-tile:hover { border-color:#c9c0f2; background:#f7f5fe; transform:translateY(-1px); }
.catx-tile__l { display:flex; align-items:center; gap:11px; min-width:0; }
.catx-tile__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catx-tile__ico { flex:none; display:inline-flex; }
.catx-tile__ico svg { width:22px; height:22px; color:#6865e7; flex:none; }
.catx-tile__chev { width:15px; height:15px; color:#c3bfe0; flex:none; transition:color .14s, transform .18s; }
.catx-tile:hover .catx-tile__chev { color:#6865e7; transform:translateX(2px); }

/* "See all N" link under the listing grid. */
.catx-more { display:inline-block; margin-top:16px; color:#6865e7; font-weight:800; font-size:.92rem; text-decoration:none; }
.catx-more:hover { text-decoration:underline; }

/* About: the longer indexable prose block. */
.catx-about .catx-prose p { font-size:1rem; line-height:1.75; color:var(--text,#5a6478); margin:0 0 14px; }
.catx-about .catx-prose p:last-child { margin-bottom:0; }
.catx-prose a { color:#6865e7; font-weight:700; text-decoration:none; }
.catx-prose a:hover { text-decoration:underline; }

/* Sidebar widgets. */
.side-wid { border:1px solid var(--line,#e6e9f2); border-radius:12px; background:#fff; padding:15px 18px; box-shadow:0 1px 2px rgba(30,38,109,.04); }
.side-wid__h { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a86a8; margin:0 0 8px; }
.side-wid__list { list-style:none; margin:0; padding:0; }
.side-wid__list li { border-bottom:1px solid #f0eff7; }
.side-wid__list li:last-child { border-bottom:0; }
.side-wid__list a { display:flex; justify-content:space-between; gap:8px; padding:7px 0; color:var(--text-dark,#2b3245); text-decoration:none; font-weight:600; font-size:.9rem; }
.side-wid__list a:hover { color:#6865e7; }
.side-wid__c { color:var(--muted,#656d80); font-weight:700; font-size:.8rem; }

/* Get-quotes card in the rail: broadcast a job to this category's businesses.
   Branded accent so it reads as an action, not another link list. */
.side-quote { border:1px solid #d9d4f7; border-radius:14px; background:linear-gradient(180deg,#f6f4ff,#fff); padding:16px 18px 18px; box-shadow:0 8px 22px rgba(104,101,231,.08); }
.side-quote__eyebrow { display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#6865e7; background:#ece9fb; padding:3px 9px; border-radius:20px; margin-bottom:9px; }
.side-quote__h { font-size:1.02rem; font-weight:800; color:#150d15; line-height:1.25; margin:0 0 6px; }
.side-quote__p { font-size:.83rem; line-height:1.5; color:var(--text,#5a6478); margin:0 0 11px; }
.side-quote__ta { width:100%; box-sizing:border-box; resize:vertical; min-height:64px; border:1px solid #d7dbe8; border-radius:10px; padding:9px 11px; font:inherit; font-size:.86rem; color:#2b3245; background:#fff; transition:border-color .14s, box-shadow .14s; }
.side-quote__ta::placeholder { color:#9aa2b5; }
.side-quote__ta:focus { outline:none; border-color:#6865e7; box-shadow:0 0 0 3px rgba(104,101,231,.14); }
.side-quote__cta { display:block; width:100%; margin-top:10px; padding:11px 14px; border:0; border-radius:10px; background:#6865e7; color:#fff; font:inherit; font-weight:800; font-size:.92rem; cursor:pointer; transition:background .15s, transform .15s; }
.side-quote__cta:hover { background:#5451d6; transform:translateY(-1px); }
.side-quote__fine { font-size:.72rem; color:var(--muted,#656d80); text-align:center; margin:9px 0 0; }

/* Latest-reviews rail card: compact one-per-row inside the sidebar. */
.side-reviews__list { display:flex; flex-direction:column; gap:12px; }
.srvw { border:1px solid #f0eff7; border-radius:10px; background:#fbfaff; padding:12px 13px; display:flex; flex-direction:column; gap:6px; }
.srvw__stars { letter-spacing:1px; font-size:.8rem; color:#d8d5e6; line-height:1; }
.srvw__stars .on { color:#f2b01e; }
.srvw__body { margin:0; font-size:.85rem; line-height:1.5; color:#2b3245; }
.srvw__foot { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.srvw__who { font-weight:800; font-size:.82rem; color:#150d15; display:flex; align-items:center; gap:6px; }
.srvw__on { font-size:.76rem; color:#8a86a8; text-decoration:none; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srvw__on:hover { color:#6865e7; }
.srvw__on-pre { color:#b3b2c2; font-weight:600; }

/* ============================================================
   Sidebar cards - shared design language with the listing-page
   rail (Popular searches / City Listings / Cost guide): white
   card, brand icon-chip heading, hoverable rows with leading
   icons. Used for Popular services, By city, Related categories,
   People also look for, Chains.
   ============================================================ */
.side-card { background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:12px; padding:16px 18px; box-shadow:0 1px 2px rgba(30,38,109,.04); }
.side-card__title { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:1rem; font-weight:800; color:#150d15; }
.side-card__ic { display:inline-flex; width:20px; height:20px; color:#6865e7; flex:none; }
.side-card__ic svg { width:20px; height:20px; }

/* Search-style rows (Popular services) - magnifier + reveal arrow on hover. */
.side-search { list-style:none; margin:0; padding:0; }
.side-search__row { display:flex; align-items:center; gap:9px; padding:7px 8px; margin:0 -8px; border-radius:9px; text-decoration:none; color:#2b3245; font-size:.9rem; transition:background .14s; }
.side-search__row:hover { background:#f1edfa; }
.side-search__ic { display:inline-flex; width:15px; height:15px; color:#a6a5b8; flex:none; }
.side-search__ic svg { width:15px; height:15px; }
.side-search__q { flex:1; font-weight:600; line-height:1.3; }
.side-search__go { display:inline-flex; width:14px; height:14px; color:#6865e7; flex:none; opacity:0; transform:translateX(-3px); transition:opacity .14s, transform .14s; }
.side-search__go svg { width:14px; height:14px; }
.side-search__row:hover .side-search__go { opacity:1; transform:none; }

/* Icon link rows (By city, Related categories, Chains). */
.side-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.side-links__row { display:flex; align-items:center; gap:9px; padding:8px; margin:0 -8px; border-radius:9px; text-decoration:none; color:#2b3245; font-size:.9rem; font-weight:600; transition:background .14s, color .14s; }
.side-links__row:hover { background:#f1edfa; color:#524fd4; }
/* Row icons: small + muted grey (like .side-search__ic), so they read as list
   markers and do not compete with the brand-coloured heading icon. */
.side-links__ic { display:inline-flex; width:15px; height:15px; color:#a6a5b8; flex:none; }
.side-links__ic svg { width:15px; height:15px; }
.side-links__ic--cat svg { stroke:currentColor; fill:none; }
.side-links__t { flex:1; line-height:1.3; overflow:hidden; text-overflow:ellipsis; }
.side-links__n { font-size:.74rem; font-weight:800; color:#656d80; background:#f1edfa; border-radius:20px; padding:1px 8px; }

/* Keyword×city interlink MATRIX (subcategory hub): service rows, each a wrap of
   "{Service} in {City}" links to live keyword landings - the page's SEO engine. */
.catx-matrix { display:flex; flex-direction:column; border:1px solid var(--line,#e6e9f2); border-radius:14px; overflow:hidden; background:#fff; }
.catx-mrow { display:grid; grid-template-columns:210px 1fr; gap:16px; align-items:baseline; padding:14px 18px; border-top:1px solid var(--line,#e6e9f2); }
.catx-mrow:first-child { border-top:0; }
.catx-mrow:nth-child(even) { background:#faf9ff; }
@media (max-width:620px){ .catx-mrow { grid-template-columns:1fr; gap:7px; } }
.catx-mrow__svc { font-weight:800; color:#150d15; text-decoration:none; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; }
.catx-mrow__svc .catx-mrow__ico { width:16px; height:16px; color:#6865e7; flex:none; }
.catx-mrow__svc .catx-mrow__ico svg { width:16px; height:16px; }
.catx-mrow__svc:hover { color:#6865e7; }
.catx-mrow__cities { display:flex; flex-wrap:wrap; gap:7px 8px; align-items:baseline; }
.catx-mcity { font-size:.85rem; color:#524fd4; text-decoration:none; font-weight:600; white-space:nowrap; padding:2px 9px; border-radius:7px; background:#f1edfa; }
.catx-mcity:hover { background:#e2ddfb; color:#3f3ca8; }
.catx-mcity__in { color:#656d80; font-weight:600; }

/* Parent "up one level" card (subcategory -> its category). */
.side-up { display:flex; align-items:center; gap:12px; text-decoration:none; padding:2px; }
.side-up__box { width:40px; height:40px; border-radius:11px; background:#f1edfa; color:#6865e7; display:grid; place-items:center; flex:none; }
.side-up__box svg { width:22px; height:22px; }
.side-up__l { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#656d80; font-weight:800; }
.side-up__m { font-weight:800; color:#150d15; font-size:1rem; }
.side-up:hover .side-up__m { color:#6865e7; }

/* Chip pills (People also look for) - a lighter cross-link treatment. */
.side-chips { display:flex; flex-wrap:wrap; gap:7px; }
.side-chip { font-size:.82rem; padding:6px 11px; border-radius:8px; background:#f6f5fb; border:1px solid var(--line,#e6e9f2); color:#2b3245; font-weight:600; text-decoration:none; transition:background .14s, border-color .14s, color .14s; }
.side-chip:hover { background:#ece9fb; border-color:#6865e7; color:#524fd4; }

.catx-block { margin:0 0 46px; }
.catx-h2 { display:flex; align-items:center; gap:12px; font-size:1.4rem; font-weight:800; color:#150d15; margin:0 0 18px; }
.catx-h2__n { font-size:.85rem; font-weight:700; color:#6865e7; background:#f1edfa; padding:3px 11px; border-radius:20px; }

/* Specialisms as tag links. */
.catx-subs { display:flex; flex-wrap:wrap; gap:9px; }
.catx-sub { font-size:.92rem; padding:9px 15px; border-radius:10px; background:#f6f5fb; border:1px solid var(--line,#e6e9f2); color:var(--text-dark,#2b3245); font-weight:600; text-decoration:none; transition:background .14s, border-color .14s, color .14s, transform .14s; }
.catx-sub:hover { background:#ece9fb; border-color:#6865e7; color:#524fd4; transform:translateY(-1px); }

/* Listing cards for this category. */
.catx-list { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:760px){ .catx-list{ grid-template-columns:1fr; } }
.lc { display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--line,#e6e9f2); border-radius:12px; padding:18px 20px; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(30,38,109,.04); transition:background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.lc:hover { background:#f5f3fe; border-color:#c9c0f2; box-shadow:0 14px 36px rgba(104,101,231,.14); transform:translateY(-2px); }
.lc__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lc__name { font-weight:800; font-size:1.1rem; color:#150d15; line-height:1.25; }
.lc__grade { flex:none; font-size:.82rem; font-weight:800; color:#0a7d46; background:#e6f6ed; border:1px solid #b8e6cc; padding:3px 10px; border-radius:8px; }
.lc__desc { font-size:.92rem; line-height:1.55; color:var(--text,#5a6478); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; }
.lc__chip { font-size:.78rem; padding:3px 9px; border-radius:7px; background:#f1edfa; color:#6865e7; font-weight:700; }
.lc__loc { font-size:.82rem; color:var(--muted,#656d80); font-weight:600; }

.catx-empty { text-align:center; padding:44px 20px; background:#faf9ff; border:1px dashed var(--line,#e6e9f2); border-radius:14px; }
.catx-empty p { color:var(--text,#5a6478); font-size:1.02rem; margin:0 0 18px; }

[hidden]{ display:none !important; }

/* ---- Cost guides (/costs, /costs/{tag}) — approved mockup 2026-09-02 ---- */
.costx-answer { display:flex; align-items:center; gap:26px; flex-wrap:wrap; border:2px solid var(--primary,#6865e7); border-radius:14px; padding:18px 20px; background:linear-gradient(135deg, rgba(104,101,231,.06), transparent); }
.costx-answer__big { font-size:1.9rem; font-weight:800; color:var(--ink,#1e266d); font-variant-numeric:tabular-nums; line-height:1.15; }
.costx-answer__big small { display:block; font-size:.78rem; color:var(--muted,#656d80); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.costx-answer__txt { flex:1; min-width:220px; font-size:.92rem; color:#3c4257; line-height:1.55; }
.costx-answer__upd { font-size:.7rem; color:var(--muted,#656d80); background:#f7f6fb; border-radius:999px; padding:4px 10px; font-weight:700; white-space:nowrap; }
.costx-tblwrap { overflow-x:auto; }
.costx-tbl { width:100%; border-collapse:collapse; font-size:.9rem; }
.costx-tbl th { text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#656d80); padding:8px 10px; border-bottom:2px solid var(--line,#eceaf3); }
.costx-tbl td { padding:10px; border-bottom:1px solid var(--line,#eceaf3); color:#3c4257; }
.costx-tbl td:last-child { font-weight:800; color:var(--ink,#1e266d); white-space:nowrap; font-variant-numeric:tabular-nums; }
.costx-fine { font-size:.78rem; color:var(--muted,#656d80); margin:8px 0 0; line-height:1.5; }
.costx-faq { border:1px solid var(--line,#eceaf3); border-radius:12px; padding:12px 16px; margin-bottom:8px; font-size:.9rem; }
.costx-faq b { color:var(--head,#150d15); }
.costx-faq p { margin:6px 0 0; color:#3c4257; line-height:1.55; }
.costx-fact { display:flex; justify-content:space-between; gap:10px; font-size:.82rem; padding:7px 0; border-bottom:1px dashed var(--line,#eceaf3); }
.costx-fact:last-child { border-bottom:none; }
.costx-fact span { color:var(--muted,#656d80); }
.costx-fact b { color:var(--ink,#1e266d); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- Keyword geo-landing (/{iso2}/{city}/{kw}) — redesign 2026-09-02 ---- */
.klx-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; border:1px solid var(--line,#eceaf3); background:#f7f6fb; border-radius:12px; padding:10px 12px; margin-bottom:18px; }
.klx-bar select { border:1px solid var(--line,#eceaf3); background:#fff; border-radius:9px; padding:7px 10px; font:inherit; font-size:.85rem; font-weight:700; color:var(--ink,#1e266d); }
.klx-bar__check { display:flex; align-items:center; gap:6px; font-size:.85rem; font-weight:700; color:var(--ink,#1e266d); }
.klx-bar__count { margin-left:auto; font-size:.82rem; font-weight:700; color:var(--muted,#656d80); white-space:nowrap; }
.klx-pager { margin-top:26px; }
.klx-pager nav { display:flex; justify-content:center; }
.klx-pager .pagination { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; align-items:center; }
.klx-pager .page-item .page-link, .klx-pager .page-item span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border-radius:10px; border:1px solid var(--line,#eceaf3); background:#fff; color:#2b3245; font-weight:700; font-size:.9rem; text-decoration:none; transition:background .14s, border-color .14s, color .14s; }
.klx-pager .page-item.active span { background:var(--primary,#6865e7); border-color:var(--primary,#6865e7); color:#fff; }
.klx-pager .page-item .page-link:hover { border-color:var(--primary,#6865e7); color:var(--primary,#6865e7); }
.klx-pager .page-item.disabled span { opacity:.45; }