/* 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; }