.svc-providers,
.svc-provider-portfolio-host {
    --providers-primary: var(--colors-primary-500, #6a5d8b);
    --providers-primary-strong: var(--colors-primary-600, #372a58);
    --providers-primary-soft: var(--colors-primary-50, #f3f2f6);
    --providers-primary-muted: var(--colors-primary-100, #e1dfe8);
    --providers-border: var(--colors-primary-100, #e1dfe8);
    --providers-muted: #6b7280;
    --providers-ink: #1f2937;
}

.svc-provider-portfolio-host *, .svc-provider-portfolio-host *::before, .svc-provider-portfolio-host *::after { box-sizing: border-box; }
.svc-provider-portfolio-host [hidden] { display: none !important; }

.svc-providers {
    min-height: calc(100vh - 80px);
    padding: 28px 18px 56px;
    color: var(--providers-ink);
    background: #fff;
}

.svc-providers *, .svc-providers *::before, .svc-providers *::after { box-sizing: border-box; }
.svc-providers [hidden] { display: none !important; }
.svc-providers__sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.svc-providers__shell { width: min(1240px, 100%); margin-inline: auto; }
.svc-providers__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--providers-primary); font-size: .82rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.svc-providers__back:hover { text-decoration: underline; }
.svc-providers__header { max-width: 700px; margin-bottom: 18px; }
/* Override the site-wide hero typography: this is a compact informational page. */
#svc-providers-root.svc-providers .svc-providers__header h1 { margin: 0 !important; font-size: clamp(1.75rem, 2.35vw, 2rem) !important; font-weight: 800 !important; letter-spacing: -.025em !important; line-height: 1.14 !important; }
#svc-providers-root.svc-providers .svc-providers__header > p:last-child { max-width: 660px; margin: 8px 0 0 !important; color: var(--providers-muted); font-size: .94rem !important; line-height: 1.55 !important; }
.svc-providers__filters { display: grid; grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(160px, 1fr)); gap: 14px; padding: 18px; border: 1px solid var(--providers-border); border-radius: 14px; background: #fff; box-shadow: 0 12px 38px rgba(55, 42, 88, .06); }
.svc-providers__secondary-filters { display: contents; }
.svc-providers__mobile-filter-actions { display: none; }
.svc-providers__field { display: grid; gap: 7px; min-width: 0; margin: 0; color: var(--providers-ink); font-size: .82rem; font-weight: 700; }
.svc-providers__field input, .svc-providers__field select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #cfc6cf; border-radius: var(--radius-control); color: var(--providers-ink); background: #fff; font: inherit; font-weight: 500; outline: none; }
.svc-providers__field input:focus, .svc-providers__field select:focus { border-color: var(--providers-primary); box-shadow: 0 0 0 3px rgba(106, 93, 139, .16); }
.svc-providers__search-wrap { position: relative; display: block; }
.svc-providers__search-wrap > span { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--providers-muted); font-size: 1.2rem; }
.svc-providers__search-wrap input { padding-inline-start: 40px; }
.svc-providers__summary { min-height: 24px; margin: 22px 2px 10px; color: var(--providers-muted); font-size: .9rem; font-weight: 700; }
.svc-providers__results, .svc-providers__table-wrap { width: 100%; }
.svc-providers__table-wrap { overflow: hidden; border: 1px solid var(--providers-border); border-radius: 14px; background: #fff; }
.svc-providers__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.svc-providers__table th { padding: 14px 16px; border-bottom: 1px solid var(--providers-border); color: var(--providers-muted); background: #fbf9fb; font-size: .75rem; font-weight: 800; text-align: start; text-transform: uppercase; }
.svc-providers__table td { padding: 17px 16px; border-bottom: 1px solid #eee9ee; vertical-align: middle; font-size: .9rem; overflow-wrap: anywhere; }
.svc-providers__table tbody tr:last-child td { border-bottom: 0; }
.svc-providers__table th:nth-child(1) { width: 19%; }
.svc-providers__table th:nth-child(2) { width: 16%; }
.svc-providers__table th:nth-child(3) { width: 21%; }
.svc-providers__table th:nth-child(4) { width: 15%; }
.svc-providers__table th:nth-child(5) { width: 13%; }
.svc-providers__table th:nth-child(6) { width: 16%; }
.svc-providers__media { display: flex; align-items: center; gap: 10px; min-width: 0; }
.svc-providers__media strong { min-width: 0; overflow-wrap: anywhere; }
.svc-providers__avatar-wrap, .svc-providers__portfolio-image-wrap { position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: var(--providers-primary-soft); color: var(--providers-primary); }
.svc-providers__avatar-wrap { width: 42px; height: 42px; border-radius: 50%; }
.svc-providers__portfolio-image-wrap { width: 52px; height: 42px; border-radius: var(--radius-control); }
.svc-providers__avatar, .svc-providers__portfolio-image { width: 100%; height: 100%; object-fit: cover; }
.svc-providers__avatar-fallback, .svc-providers__portfolio-fallback { font-weight: 800; }
.svc-providers__rating { display: block; color: var(--providers-primary-strong); font-weight: 800; }
.svc-providers__rating > span { color: #c78c16; }
.svc-providers td small, .svc-providers__card small { display: block; margin-top: 3px; color: var(--providers-muted); }
.svc-providers__button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--providers-primary); border-radius: 9px; color: #fff; background: var(--providers-primary); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.svc-providers__button:hover, .svc-providers__button:focus-visible { border-color: var(--providers-primary-strong); color: #fff; background: var(--providers-primary-strong); box-shadow: 0 0 0 3px rgba(106, 93, 139, .16); outline: none; text-decoration: none; }
.svc-providers__button--compact { min-height: 40px; padding: 8px 13px; white-space: nowrap; }
.svc-providers__button--secondary { color: var(--providers-primary); background: #fff; }
.svc-providers__button--secondary:hover { color: #fff; }
.svc-providers__state { display: grid; place-items: center; gap: 8px; min-height: 270px; padding: 36px 18px; border: 1px dashed #d8ced8; border-radius: 14px; text-align: center; }
.svc-providers__state h2, .svc-providers__state p { margin: 0; }
.svc-providers__state h2 { font-size: 1.25rem; }
.svc-providers__state p { max-width: 520px; color: var(--providers-muted); line-height: 1.6; }
.svc-providers__state-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--providers-primary); background: var(--providers-primary-soft); font-size: 1.4rem; font-weight: 800; }
.svc-providers__state--loading { min-height: 180px; border-style: solid; color: var(--providers-muted); }
.svc-providers__spinner { width: 30px; height: 30px; border: 3px solid var(--providers-primary-soft); border-top-color: var(--providers-primary); border-radius: 50%; animation: svc-providers-spin .8s linear infinite; }
.svc-providers__cards { display: none; }

body.svc-providers-dialog-open { overflow: hidden; }
.svc-providers__dialog { position: fixed; inset: 0; width: min(840px, calc(100% - 32px)); max-width: 840px; max-height: 84dvh; margin: auto; padding: 0; border: 0; border-radius: var(--radius-surface); color: var(--providers-ink); background: #fff; box-shadow: 0 28px 80px rgba(31, 41, 55, .28); }
.svc-providers__dialog::backdrop { background: rgba(17, 24, 39, .58); }
.svc-providers__dialog-surface { position: relative; min-height: 260px; max-height: 84dvh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--providers-primary-muted) #f7f6f8; }
.svc-providers__dialog-surface::-webkit-scrollbar { width: 8px; }
.svc-providers__dialog-surface::-webkit-scrollbar-track { background: #f7f6f8; }
.svc-providers__dialog-surface::-webkit-scrollbar-thumb { border: 2px solid #f7f6f8; border-radius: var(--radius-pill); background: var(--providers-primary-muted); }
/* 44, not 42 (measured 2026-09-01 by opening the dialog at 390px: 42x42). The button floats and
   pulls the content up under itself with a negative block-end margin, so the pull has to move with
   the height or the portfolio shifts 2px: 42+12 = -54 becomes 44+12 = -56, and 42+10 = -52 becomes
   44+10 = -54 in the narrow block below. Nothing else about the control changes. */
.svc-providers__dialog-close { position: sticky; z-index: 3; top: 12px; float: inline-end; display: grid; width: 44px; height: 44px; margin: 12px 12px -56px; border: 1px solid var(--providers-primary-muted); border-radius: 50%; place-items: center; color: var(--providers-primary-strong); background: #fff; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.svc-providers__dialog-close:hover, .svc-providers__dialog-close:focus-visible { background: var(--providers-primary-soft); outline: 3px solid rgba(106, 93, 139, .2); outline-offset: 2px; }
.svc-providers__dialog-loading, .svc-providers__dialog-error { display: grid; min-height: 260px; padding: 72px 24px; place-items: center; align-content: center; gap: 12px; text-align: center; }
.svc-providers__dialog-error h2, .svc-providers__dialog-error p { margin: 0; }
.svc-providers__dialog-error p { max-width: 480px; color: var(--providers-muted); }
.svc-providers__portfolio-detail { min-width: 0; }
.svc-providers__detail-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 24px 64px 20px 24px; border-bottom: 1px solid var(--providers-border); background: var(--providers-primary-soft); }
[dir="rtl"] .svc-providers__detail-header { padding-right: 24px; padding-left: 64px; }
.svc-providers__detail-avatar-wrap { display: grid; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--providers-primary-muted); border-radius: 50%; place-items: center; color: var(--providers-primary-strong); background: #fff; font-size: 1.05rem; font-weight: 900; }
.svc-providers__detail-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.svc-providers__detail-header p, .svc-providers__detail-header h2, .svc-providers__detail-header span { margin: 0; }
.svc-providers__detail-header p { color: var(--providers-primary-strong); font-size: .84rem; font-weight: 800; }
.svc-providers__detail-header h2 { margin-top: 3px; color: var(--providers-primary-strong); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.svc-providers__detail-header > div:nth-child(2) > span { display: block; margin-top: 5px; color: var(--providers-muted); font-size: .88rem; }
.svc-providers__detail-rating { display: inline-flex; min-width: 90px; align-items: center; justify-content: end; gap: 5px; color: var(--providers-primary-strong); font-size: .95rem; text-align: end; }
.svc-providers__detail-rating span { color: #c78c16; }
.svc-providers__detail-section { padding: 22px 28px; border-bottom: 1px solid #edf0f3; }
.svc-providers__detail-section h3, .svc-providers__detail-section h4, .svc-providers__detail-section p { margin: 0; }
.svc-providers__detail-section h3 { margin-bottom: 14px; color: var(--providers-primary-strong); font-size: 1.05rem; font-weight: 900; }
.svc-providers__detail-section h4 { margin-bottom: 6px; color: var(--providers-muted); font-size: .78rem; font-weight: 800; }
.svc-providers__detail-section p { color: var(--providers-ink); line-height: 1.7; overflow-wrap: anywhere; }
.svc-providers__coverage-summary { margin-bottom: 10px !important; color: var(--providers-muted) !important; font-size: .9rem; }
.svc-providers__coverage-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-providers__coverage-badges[hidden] { display: none; }
.svc-providers__coverage-badges + .svc-providers__coverage-badges { margin-top: 8px; }
.svc-providers__coverage-badge { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 10px; border: 1px solid var(--providers-primary-muted); border-radius: var(--radius-pill); color: var(--providers-primary-strong); background: var(--providers-primary-soft); font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }
.svc-providers__coverage-toggle { margin-top: 10px; padding: 4px 0; border: 0; color: var(--providers-primary); background: transparent; font: inherit; font-size: .86rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.svc-providers__coverage-toggle:hover, .svc-providers__coverage-toggle:focus-visible { color: var(--providers-primary-strong); outline: 3px solid rgba(106, 93, 139, .2); outline-offset: 2px; }
.svc-providers__work-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.svc-providers__work-sample { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--providers-border); border-radius: 11px; background: #fff; cursor: zoom-in; }
.svc-providers__work-sample:focus-visible { outline: 3px solid rgba(106, 93, 139, .28); outline-offset: 3px; }
.svc-providers__work-sample img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--providers-primary-soft); }
.svc-providers__image-viewer { position: absolute; z-index: 5; inset: 0; display: grid; min-height: 0; place-items: center; padding: 64px 76px; background: rgba(17, 24, 39, .94); }
.svc-providers__image-viewer[hidden] { display: none; }
.svc-providers__image-viewer-stage { display: grid; width: min(100%, 700px); height: min(100%, 590px); place-items: center; }
.svc-providers__image-viewer-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-control); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); user-select: none; -webkit-user-drag: none; }
.svc-providers__image-viewer-close, .svc-providers__image-viewer-nav { position: absolute; z-index: 1; display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.svc-providers__image-viewer-close { top: 14px; inset-inline-end: 14px; }
.svc-providers__image-viewer-nav { top: 50%; transform: translateY(-50%); }
.svc-providers__image-viewer-nav--previous { inset-inline-start: 14px; }
.svc-providers__image-viewer-nav--next { inset-inline-end: 14px; }
.svc-providers__image-viewer-close:hover, .svc-providers__image-viewer-close:focus-visible, .svc-providers__image-viewer-nav:hover, .svc-providers__image-viewer-nav:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .28); outline: 3px solid rgba(255, 255, 255, .28); outline-offset: 2px; }
.svc-providers__image-viewer-position { position: absolute; bottom: 14px; inset-inline: 0; color: #fff; direction: ltr; font-size: .82rem; font-weight: 800; text-align: center; opacity: .9; }
.svc-providers__feature-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.svc-providers__feature-list li { min-width: min(260px, 100%); padding: 11px 13px; border: 1px solid var(--providers-primary-muted); border-radius: 10px; color: var(--providers-primary-strong); background: var(--providers-primary-soft); }
.svc-providers__feature-list li::before { content: "✓"; margin-inline-end: 7px; color: var(--providers-primary); font-weight: 900; }
.svc-providers__feature-list li small { display: block; margin: 4px 20px 0; color: var(--providers-muted); }
.svc-providers__detail-empty { color: var(--providers-muted) !important; }

@keyframes svc-providers-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .svc-providers__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-providers__field--search { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .svc-providers { padding: 14px 14px 40px; }
    /* 109x13 — the smallest control on the client journey (Phase 07 D3). The base rule is already
       `inline-flex; align-items: center`, so the box grows around the same text without moving it.
       The 8px margin comes off: the 44px box carries its own clear space now, and keeping both would
       push the heading below it further down than it sits today. */
    .svc-providers__back { min-height: 44px; margin-bottom: 0; font-size: .78rem; }
    .svc-providers__header { margin-bottom: 12px; }
    #svc-providers-root.svc-providers .svc-providers__header h1 { font-size: 24px !important; line-height: 1.15 !important; }
    #svc-providers-root.svc-providers .svc-providers__header > p:last-child { margin-top: 6px !important; font-size: .86rem !important; line-height: 1.45 !important; }
    .svc-providers__filters { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
    .svc-providers__field--search { grid-column: auto; }
    .svc-providers__field { gap: 5px; }
    .svc-providers__field input, .svc-providers__field select { min-height: 44px; }
    .svc-providers__mobile-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    /* 42px was two pixels short of a target (Phase 07 D3, measured 2026-08-31 at 390px:
       `.svc-providers__filter-toggle` 91x42). 44px is the number this same media block already
       gives every field on the screen four rules up — `input, select { min-height: 44px }` — so the
       toggle now matches the boxes it opens instead of sitting just under them. `.svc-providers__
       clear` moves with it: the two sit on ONE flex row (`__mobile-filter-actions`) and leaving one
       at 42 would make the row uneven for no reason a reader could see. */
    .svc-providers__filter-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #cfc6cf; border-radius: 9px; color: var(--providers-ink); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
    .svc-providers__filter-toggle:hover { border-color: var(--providers-primary); }
    .svc-providers__filter-toggle:focus-visible, .svc-providers__clear:focus-visible { outline: 3px solid rgba(106, 93, 139, .2); outline-offset: 2px; }
    .svc-providers__filter-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--radius-pill); color: #fff; background: var(--providers-primary); font-size: .72rem; line-height: 1; }
    .svc-providers__filter-chevron { margin-inline-start: 2px; font-size: 1rem; transition: transform .18s ease; }
    .svc-providers__filter-toggle[aria-expanded="true"] .svc-providers__filter-chevron { transform: rotate(180deg); }
    .svc-providers__clear { min-height: 44px; padding: 8px 4px; border: 0; color: var(--providers-primary); background: transparent; font: inherit; font-size: .82rem; font-weight: 800; text-align: end; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    .svc-providers__secondary-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 2px; }
    .svc-providers__secondary-filters[data-mobile-expanded="false"] { display: none; }
    .svc-providers__summary { min-height: 20px; margin: 12px 2px 6px; font-size: .84rem; }
    .svc-providers__table-wrap { display: none; }
    .svc-providers__cards { display: grid; gap: 14px; }
    .svc-providers__card { min-width: 0; padding: 18px; border: 1px solid var(--providers-border); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px rgba(55, 42, 88, .05); }
    .svc-providers__card-provider { padding-bottom: 15px; border-bottom: 1px solid #eee9ee; }
    .svc-providers__card dl { display: grid; gap: 0; margin: 4px 0 16px; }
    .svc-providers__card-field { display: grid; grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0ebf0; }
    .svc-providers__card-field dt { color: var(--providers-muted); font-size: .78rem; font-weight: 800; }
    .svc-providers__card-field dd { min-width: 0; margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
    /* THE ONE BUTTON ON THE CARD, AND IT WAS 4px SHORT (Phase 07 D3: 324x40, x16 on this page).
       On the wide view the provider rows are a table and `--compact` (min-height: 40px) is the right
       size for a button inside a table cell. On a phone the table is hidden (`__table-wrap { display:
       none }` above) and the very same button becomes the card's primary action — the control that
       opens a provider's portfolio, and the only way to choose who to hire. It takes the full width
       here already; it now takes the full 44px too. Overriding on THIS selector rather than on
       `--compact` keeps the compact modifier compact everywhere it is still genuinely compact. */
    .svc-providers__card .svc-providers__button { width: 100%; min-height: 44px; }
    .svc-providers__dialog { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
    .svc-providers__dialog-surface { min-height: 100dvh; max-height: 100dvh; }
    .svc-providers__dialog-close { top: 10px; margin: 10px 10px -54px; }
    .svc-providers__detail-header { grid-template-columns: auto minmax(0, 1fr); padding: 24px 58px 18px 16px; }
    [dir="rtl"] .svc-providers__detail-header { padding-right: 16px; padding-left: 58px; }
    .svc-providers__detail-avatar-wrap { width: 52px; height: 52px; }
    .svc-providers__detail-header h2 { font-size: 1.25rem; }
    .svc-providers__detail-rating { grid-column: 1 / -1; justify-content: start; padding-inline-start: 66px; text-align: start; }
    .svc-providers__detail-section { padding: 18px 16px; }
    .svc-providers__work-samples { grid-template-columns: minmax(0, 1fr); }
    .svc-providers__work-sample img { aspect-ratio: 16 / 10; }
    .svc-providers__image-viewer { padding: 58px 52px; }
    .svc-providers__image-viewer-stage { height: min(100%, 690px); }
    .svc-providers__image-viewer-close, .svc-providers__image-viewer-nav { width: 38px; height: 38px; font-size: 1.4rem; }
    .svc-providers__image-viewer-close { top: 10px; inset-inline-end: 10px; }
    .svc-providers__image-viewer-nav--previous { inset-inline-start: 7px; }
    .svc-providers__image-viewer-nav--next { inset-inline-end: 7px; }
    .svc-providers__image-viewer-position { bottom: 10px; }
    .svc-providers__feature-list { display: grid; grid-template-columns: minmax(0, 1fr); }
    .svc-providers__feature-list li { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-providers__spinner { animation: none; }
    .svc-providers__filter-chevron { transition: none; }
}