/* Services portal (Services subtree, /search pages). Deep-teal hero + white search
   card + CTA pair + browse-by-service pills. Browse mode only: body.svcportal hides
   the standard sidebar; search-result pages keep the normal marketplace layout. */

body.svcportal .sp-crumb { display: none; }
body.svcportal .sp-side { display: none; }
body.svcportal .sp-grid { display: block; }

.svc-hero { position: relative; z-index: 5; background: #0c2f55; padding: 44px 0 34px; }
.svc-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(135deg, #081f3a 0%, #0c2f55 55%, #123f6f 100%);
  background-size: cover; background-position: center bottom; z-index: 0; }
.svc-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.svc-hero h1 { color: #fff; font-size: 34px; font-weight: 800; margin: 0 0 6px; }
.svc-sub { color: #bdd4ef; font-size: 16px; margin: 0 0 22px; }

.svc-card { background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-end; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.svc-fld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 160px; position: relative; }
.svc-fld label { font-size: 11.5px; font-weight: 700; color: #66707a; text-transform: uppercase; letter-spacing: .4px; }
.svc-fld-what { flex: 2.2 1 260px; }
.svc-fld-loc { flex: 1.6 1 200px; }
.svc-fld-rad { flex: 0 0 150px; }
.svc-fld-btn { flex: 0 0 auto; }
.svc-inp { height: 44px; border: 1px solid #d6dbe3; border-radius: 8px; padding: 0 12px; font-size: 15px;
  background-color: #fff; color: #222; width: 100%; box-sizing: border-box; }
.svc-inp:disabled { background-color: #f3f5f8; color: #99a; }
.svc-inp:focus { outline: none; border-color: #2f6df6; box-shadow: 0 0 0 2px rgba(47, 109, 246, .18); }
.svc-search { height: 44px; padding: 0 26px; background: #2f6df6; border: none; border-radius: 8px;
  color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap; }
.svc-search:hover { background: #245ce0; }

.svc-ctas { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.svc-cta { display: inline-block; padding: 11px 22px; border-radius: 8px; font-weight: 800; font-size: 15px;
  text-decoration: none; }
.svc-cta-quote { background: #f7a600; color: #14264c; }
.svc-cta-quote:hover { background: #e79a00; }
.svc-cta-offer { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); }
.svc-cta-offer:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 820px) {
  .svc-hero h1 { font-size: 26px; }
  .svc-fld, .svc-fld-what, .svc-fld-loc, .svc-fld-rad { flex: 1 1 100%; }
  .svc-fld-btn { flex: 1 1 100%; }
  .svc-search { width: 100%; }
}

/* suggestion panels must float above everything below the hero */
.svc-fld .loc-sugg-panel { z-index: 80; }

/* Jobs-posted-for-quotes page: indigo hero + orange Search jobs button (distinct from services teal). */
.svc-hero-quotes { background: #171a3c; }
.svc-hero-quotes::before { background-image: linear-gradient(135deg, #12142e 0%, #171a3c 55%, #1f2450 100%); }
.svc-hero-quotes .svc-search { background: #f7a600; color: #14264c; }
.svc-hero-quotes .svc-search:hover { background: #e79a00; }
.svc-hero-quotes .svc-inp:focus { border-color: #f7a600; box-shadow: 0 0 0 2px rgba(247, 166, 0, .22); }
.svc-hero-quotes .svc-sub { color: #c7cdf0; }

/* light services hero (no photo, user 2026-09-15): white block, dark text, readable buttons */

.svc-hero::before { background-image: none; }
.svc-hero h1 { color: #14264c; }
.svc-sub { color: #4b5563; }
.svc-card { border: 1px solid #e3e7ef; box-shadow: 0 6px 18px rgba(20, 38, 76, .08); }

.svc-cta-offer:hover { background: #eef3ff; }
/* the quote-jobs hero stays indigo (photo gone too) */
.svc-hero-quotes { background: #171a3c; border-bottom: 0; }
.svc-hero-quotes::before { background-image: linear-gradient(135deg, #12142e 0%, #171a3c 55%, #1f2450 100%); }
.svc-hero-quotes h1 { color: #fff; }
.svc-hero-quotes .svc-card { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.svc-hero-quotes .svc-cta-offer { color: #fff; border-color: rgba(255, 255, 255, .75); }
.svc-hero-quotes .svc-cta-offer:hover { background: rgba(255, 255, 255, .12); }

/* light services hero (no photo, user 2026-09-15): white block, dark text, readable buttons */

.svc-hero::before { background-image: none; }
.svc-hero h1 { color: #14264c; }
.svc-sub { color: #4b5563; }
.svc-card { border: 1px solid #e3e7ef; box-shadow: 0 6px 18px rgba(20, 38, 76, .08); }

.svc-cta-offer:hover { background: #eef3ff; }
.svc-inp:disabled { color: #5f6b7a; }   /* the distance list waits for a place but must stay readable */
/* the quote-jobs hero stays indigo (photo gone too) */
.svc-hero-quotes { background: #171a3c; border-bottom: 0; }
.svc-hero-quotes::before { background-image: linear-gradient(135deg, #12142e 0%, #171a3c 55%, #1f2450 100%); }
.svc-hero-quotes h1 { color: #fff; }
.svc-hero-quotes .svc-card { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.svc-hero-quotes .svc-cta-offer { color: #fff; border-color: rgba(255, 255, 255, .75); }
.svc-hero-quotes .svc-cta-offer:hover { background: rgba(255, 255, 255, .12); }

/* light services hero (no photo, user 2026-09-15): white block, dark text, readable buttons */
.svc-hero { background: #f7f8fa; border-bottom: 0; padding: 36px 0 30px; }   /* same colour as the Search results area */
.svc-hero::before { background-image: none; }
.svc-hero h1 { color: #14264c; }
.svc-sub { color: #4b5563; }
.svc-card { border: 1px solid #e3e7ef; box-shadow: 0 6px 18px rgba(20, 38, 76, .06); background: #fff; }

.svc-cta-offer:hover { background: #eef3ff; }
.svc-inp:disabled { color: #5f6b7a; }   /* the distance list waits for a place but must stay readable */
/* the quote-jobs hero stays indigo (photo gone too) */
.svc-hero-quotes { background: #171a3c; border-bottom: 0; }
.svc-hero-quotes::before { background-image: linear-gradient(135deg, #12142e 0%, #171a3c 55%, #1f2450 100%); }
.svc-hero-quotes h1 { color: #fff; }
.svc-hero-quotes .svc-card { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.svc-hero-quotes .svc-cta-offer { color: #fff; border-color: rgba(255, 255, 255, .75); }
.svc-hero-quotes .svc-cta-offer:hover { background: rgba(255, 255, 255, .12); }

/* light services hero (no photo, user 2026-09-15): white block, dark text, readable buttons */
.svc-hero { background: #f7f8fa; border-bottom: 0; padding: 36px 0 30px; }   /* same colour as the Search results area */
.svc-hero::before { background-image: none; }
.svc-hero h1 { color: #14264c; }
.svc-sub { color: #4b5563; }
.svc-card { border: 1px solid #e3e7ef; box-shadow: 0 6px 18px rgba(20, 38, 76, .06); background: #fff; }
.svc-cta-offer { color: #1f56d6; border-color: #1f56d6; }
.svc-cta-offer:hover { background: #eef3ff; }
.svc-inp:disabled { color: #5f6b7a; }   /* the distance list waits for a place but must stay readable */
/* the quote-jobs hero stays indigo (photo gone too) */
.svc-hero-quotes { background: #171a3c; border-bottom: 0; }
.svc-hero-quotes::before { background-image: linear-gradient(135deg, #12142e 0%, #171a3c 55%, #1f2450 100%); }
.svc-hero-quotes h1 { color: #fff; }
.svc-hero-quotes .svc-card { border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.svc-hero-quotes .svc-cta-offer { color: #fff; border-color: rgba(255, 255, 255, .75); }
.svc-hero-quotes .svc-cta-offer:hover { background: rgba(255, 255, 255, .12); }
/* 5.png: section buttons left, action buttons right */
.svc-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.svc-bar .svc-ctas { margin-top: 0; }
.svc-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.svc-tab { display: inline-block; padding: 11px 22px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid #1f56d6; color: #1f56d6; background: #fff; }
.svc-tab:hover { background: #eef3ff; }
.svc-tab.on { background: #1f56d6; color: #fff; }
@media (max-width: 820px) {
  .svc-bar { flex-direction: column; align-items: stretch; }
  .svc-tabs, .svc-bar .svc-ctas { display: flex; }
  .svc-tab, .svc-bar .svc-cta { flex: 1 1 0; text-align: center; }
}
/* 1.png: text links only, above the search card, less space */
.svc-hero { padding: 14px 0 26px; }
.svc-bar { margin: 0 0 10px; gap: 8px 16px; }
.svc-tabs, .svc-bar .svc-ctas { gap: 18px; }
.svc-tab, .svc-bar .svc-cta, .svc-bar .svc-cta-quote, .svc-bar .svc-cta-offer { background: none; border: 0; border-radius: 0; padding: 4px 0; color: #1f56d6; font-weight: 600; font-size: 14px; }
.svc-tab:hover, .svc-bar .svc-cta:hover, .svc-bar .svc-cta-quote:hover, .svc-bar .svc-cta-offer:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.svc-tab.on { background: none; color: #1f56d6; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (max-width: 820px) {
  .svc-bar { flex-direction: row; justify-content: space-between; }
  .svc-tabs, .svc-bar .svc-ctas { display: flex; flex-direction: column; gap: 6px; }
  .svc-tab, .svc-bar .svc-cta { flex: 0 0 auto; text-align: left; }
  .svc-bar .svc-cta { text-align: right; }
}

/* kiwiservices.co.nz photo hero (2026-10-01): daytime photo under a navy tint, white heading and links, white search card */
.svc-hero.svc-hero-photo { background: #1e293b; padding: 56px 0 52px; }
.svc-hero.svc-hero-photo::before { background-size: cover; background-position: center; }
.svc-hero-photo .svc-photo-h1 { color: #fff; font-size: 36px; font-weight: 800; margin: 0 0 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.svc-hero-photo .svc-bar .svc-tab, .svc-hero-photo .svc-bar .svc-tab.on,
.svc-hero-photo .svc-bar .svc-cta, .svc-hero-photo .svc-bar .svc-cta-quote, .svc-hero-photo .svc-bar .svc-cta-offer { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.svc-hero-photo .svc-card { border: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
@media (max-width: 640px) {
  .svc-hero.svc-hero-photo { padding: 30px 0 30px; }
  .svc-hero-photo .svc-photo-h1 { font-size: 24px; margin-bottom: 12px; }
}

/* Filters in the services / jobs for quotes search (2026-10-02) */
.svc-more { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.svc-more-btn { background: none; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 14px 7px 12px; font-size: 14px; font-weight: 600; color: #1f2937; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.svc-more-btn::before { content: ''; width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.svc-more-btn[aria-expanded="true"] { border-color: #1f56d6; color: #1f56d6; background: #f5f8ff; }
.svc-more-clear { font-size: 13px; color: #1f56d6; text-decoration: underline; text-underline-offset: 3px; }
.svc-more-panel { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 14px 18px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.svc-more-panel[hidden] { display: none; }
.svc-more-grp { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 0 1 260px; border: 0; padding: 0; margin: 0; }
.svc-more-grp > label, .svc-more-grp > legend { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #4b5563; padding: 0; }
.svc-more-checks { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.svc-more-checks > legend { flex-basis: 100%; margin-bottom: 6px; }
.svc-more-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #1f2937; cursor: pointer; }
.svc-more-check input { width: 16px; height: 16px; }
.svc-more-check { text-transform: none; font-weight: 400; letter-spacing: 0; }   /* the field labels above are small capitals; the tick labels read as normal text */

/* Filters beside Search on one line (2026-10-02, 16.png) */
.svc-btn-row { display: flex; gap: 10px; align-items: stretch; }
.svc-btn-row .svc-more-btn { height: 44px; background: #fff; }
.svc-btn-row .svc-search { white-space: nowrap; }
.svc-more:empty { display: none; }
@media (max-width: 640px) { .svc-btn-row .svc-search { flex: 1 1 auto; } }
.svc-more-grp > label.svc-more-check { text-transform: none; font-size: 14px; font-weight: 400; letter-spacing: 0; color: #1f2937; }   /* tick labels read as normal text, not small capitals */