html {
    scroll-padding-top: 88px;
    scroll-behavior: smooth;
}

body {
    color: var(--ui-ink);
    background: var(--ui-canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-selection); color: var(--color-selection-text); }

/* Working actions retain a visible control even at secondary importance.
   Inline reading links and record titles keep their normal link treatment. */
body :is(.discovery-actions, .directory-actions, .task-actions, .approval-actions, .approval-links, .support-tools, .home-section-heading) > a:not(:where(.primary-button, .onboarding-primary, .action-color, .situation-primary, .directory-request)),
body :is(.task-nav, .pro-job-nav, .customer-job-nav) > a,
body :is(.home-utility, .task-nav, .calendar-header, .pro-job-nav, .customer-job-nav) .feedback-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--action-control-border, var(--color-border-strong));
    border-radius: 8px;
    background: var(--action-control-bg, var(--color-surface));
    color: var(--action-control-ink, var(--color-text));
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    box-sizing: border-box;
}
body :is(.home-utility, .task-nav, .calendar-header, .pro-job-nav, .customer-job-nav) .feedback-button {
    font-size: 13px;
    padding-inline: 12px;
    font-weight: 500;
}
body :is(.discovery-actions, .directory-actions, .task-actions, .approval-actions, .approval-links, .support-tools, .home-section-heading) > a:not(:where(.primary-button, .onboarding-primary, .action-color, .situation-primary, .directory-request)):hover,
body :is(.task-nav, .pro-job-nav, .customer-job-nav) > a:hover,
body :is(.home-utility, .task-nav, .calendar-header, .pro-job-nav, .customer-job-nav) .feedback-button:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-brand);
    text-decoration: none;
}

/* The remaining compact workspaces use the same outlined secondary controls.
   Target actions and utility disclosures, rather than prose or record titles. */
body :is(
    .list-heading > a, .list-shortcuts a, .list-section-heading > a,
    .list-open, .list-card-actions > a, .list-row-options > a,
    .list-housekeeping > a, .list-empty > a, .saved-view,
    .list-record-details > a, .saved-switch a,
    .work-list-page .wb-view, .wb-back, .wb-reset, .wb-filter-toggle,
    .terms-actions > a, .terms-propose-action > a, .comparison-quote-actions > a,
    .quote-entry-recovery a, .profile-edit-heading > a,
    .profile-section-heading > a, .directory-request,
    .customer-job-actions > a, .customer-job-problem, .pro-job-quiet-action,
    .customer-quote-actions > a, .customer-job-detail-body > a, .pro-job-detail-body > a,
    .profile-proof > a, .profile-actions > a, .support-thread .task-nav > span > a,
    .quote-entry-page .task-meta > a, .quote-entry-details > a,
    .profile-saved-notice > a, .identity-secondary, .identity-account-links > a,
    .identity-more-help > summary,
    .company-edit-page > a, .company-edit-card[aria-labelledby="profile-conflict-heading"] > a,
    :where(.company-edit-card[aria-labelledby="profile-conflict-heading"] > details) > summary,
    .privacy-workspace a[href^="/Security/Verify"],
    .customer-job-detail-body a[href^="tel:"], .customer-job-professional > div > a,
    .customer-job-workspace a[href*="/QuoteTerms/Details/"],
    .pro-job-contact a, .profile-contact dd a, .settings-action,
    .calendar-browse-jobs, .calendar-change-choice, .calendar-text-button,
    .calendar-day-off button, .company-service-expand,
    .feedback-home, .site-footer a[data-feedback-open],
    .task-context > summary, .list-row-options > summary, .list-housekeeping > summary,
    .directory-extra > summary, .profile-more-services > summary,
    .discovery-details > summary, .review-more-label, .review-less-label,
    .company-form-help > summary, .company-private-documents > summary,
    .profile-evidence-help > summary, .privacy-help > summary,
    .privacy-handling > summary, .privacy-archive > summary,
    .terms-full-proposal > summary, .terms-profile-context > summary,
    .terms-professional-record > summary, .customer-job-arrival summary,
    .quote-entry-details:not(.quote-entry-agreement) > summary,
    .comparison-card-details > summary, .calendar-settings summary,
    .quote-safety-options > summary,
    .customer-job-workspace .job-address-correction summary,
    .job-situation-progress summary
):not(:where(.primary-button, .situation-primary, .action-color, .onboarding-primary, .pro-job-danger-action)) {
    align-items: center;
    gap: 8px;
    min-height: 44px;
    max-width: 100%;
    padding: 9px 14px;
    margin-block: 4px;
    border: 1px solid var(--action-control-border, var(--color-border-strong));
    border-radius: 8px;
    background: var(--action-control-bg, var(--color-surface));
    color: var(--action-control-ink, var(--color-text));
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    overflow-wrap: anywhere;
}
body :is(
    .list-heading > a, .list-shortcuts a, .list-section-heading > a,
    .list-open, .list-card-actions > a, .list-row-options > a,
    .list-housekeeping > a, .list-empty > a, .saved-view,
    .list-record-details > a, .saved-switch a,
    .work-list-page .wb-view, .wb-back, .wb-reset, .wb-filter-toggle,
    .terms-actions > a, .terms-propose-action > a, .comparison-quote-actions > a,
    .quote-entry-recovery a, .profile-edit-heading > a, .profile-section-heading > a,
    .directory-request, .customer-job-actions > a, .customer-job-problem,
    .customer-quote-actions > a, .customer-job-detail-body > a, .pro-job-detail-body > a,
    .profile-proof > a, .profile-actions > a, .support-thread .task-nav > span > a,
    .quote-entry-page .task-meta > a, .quote-entry-details > a,
    .profile-saved-notice > a, .identity-secondary, .identity-account-links > a,
    .company-edit-page > a, .company-edit-card[aria-labelledby="profile-conflict-heading"] > a,
    .privacy-workspace a[href^="/Security/Verify"],
    .customer-job-detail-body a[href^="tel:"], .customer-job-professional > div > a,
    .pro-job-quiet-action, .customer-job-workspace a[href*="/QuoteTerms/Details/"],
    .pro-job-contact a, .profile-contact dd a, .settings-action,
    .calendar-browse-jobs, .calendar-change-choice, .calendar-text-button,
    .calendar-day-off button, .company-service-expand,
    .feedback-home, .site-footer a[data-feedback-open]
):not(:where(.primary-button, .situation-primary, .action-color, .onboarding-primary, .pro-job-danger-action)) { display: inline-flex; justify-content: center; }

/* Native summary markers continue to communicate open/closed state. */
body :is(.task-context, .list-row-options, .list-housekeeping, .directory-extra,
    .profile-more-services, .discovery-details, .company-form-help,
    .company-private-documents, .profile-evidence-help, .privacy-help,
    .privacy-handling, .privacy-archive, .terms-full-proposal,
    .terms-profile-context, .terms-professional-record) > summary { width: fit-content; }
body :is(.comparison-card-details, .identity-more-help) > summary { width: fit-content; }
body .directory-extra > summary { margin-left: 0; }
body .review-more-label { display: inline-flex; }
body .review-less-label { display: none; }
body .review-more[open] .review-more-label { display: none; }
body .review-more[open] .review-less-label { display: inline-flex; }
body .saved-switch a[aria-current="page"] {
    --action-control-bg: var(--color-brand-solid);
    --action-control-border: var(--color-brand-solid);
    --action-control-ink: var(--color-on-accent);
}
body :is(.quote-safety-options, .customer-professional-safety, .profile-safety, .customer-job-danger-link) {
    --action-control-ink: var(--color-danger);
    --action-control-border: var(--color-danger-border);
}
/* Explicitly hidden controls must remain hidden after their visual treatment. */
body [hidden]:not([hidden="until-found"]) { display: none !important; }

body :is(.customer-job-danger-link, .customer-professional-safety a, .profile-safety a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 9px 14px;
    margin-block: 4px;
    border: 1px solid var(--color-danger-border);
    border-radius: 8px;
    color: var(--color-danger);
    background: var(--color-surface);
    text-decoration: none;
    font-size: 14px;
}
body :is(.list-card-actions, .list-shortcuts, .customer-job-actions, .terms-actions,
    .comparison-quote-actions, .approval-actions, .approval-links, .support-tools) { gap: 8px; }
body .task-situation .situation-primary:not(.action-color) {
    border-color: var(--color-brand-solid);
    background: var(--color-brand-solid);
    color: var(--color-on-accent);
    border-radius: 8px;
    text-decoration: none;
}
body .comparison-accept > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--color-brand-solid);
    border-radius: 8px;
    background: var(--color-brand-solid);
    color: var(--color-on-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
body .customer-quote-actions .action-message.action-color {
    --action-bg: var(--color-surface);
    --action-hover: var(--color-surface-hover);
    --action-ink: var(--color-text);
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    box-shadow: none;
    font-weight: 500;
    text-decoration: none;
}
body .customer-quote-actions .action-message.action-color:hover { box-shadow: none; transform: none; }
body .work-list-page .wb-filter-toggle { box-shadow: none; transform: none; }
body .work-list-page .saved-card h2 a { color: var(--color-text); text-decoration: none; }
body .list-record-section > summary { padding-inline: 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); margin-bottom: 8px; }
body :is(.customer-job-milestones, .pro-job-milestones, .job-situation-progress ol) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 8px;
    padding: 0;
    margin-block: 16px;
    list-style: none;
}
body :is(.customer-job-milestones, .pro-job-milestones, .job-situation-progress ol) > li {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 13px;
}
body :is(.customer-job-milestones, .pro-job-milestones, .job-situation-progress ol) > :is([aria-current="step"], .is-current) {
    border-color: var(--color-brand);
    background: var(--color-brand-surface);
    color: var(--color-text);
    font-weight: 600;
}

.site-navbar {
    border-bottom-color: var(--ui-line);
    background: rgba(var(--color-surface-rgb), .97);
    box-shadow: 0 2px 12px rgba(var(--color-shadow-rgb), .045);
}

.logo { color: var(--color-brand); letter-spacing: -.035em; }
.logo:hover { color: var(--color-brand); }
.navbar-left .beta-badge { border-color: var(--color-green-border); background: var(--color-surface-subtle); color: var(--color-green); }

.site-nav a {
    border-radius: 999px;
    padding: .48rem .7rem;
    transition: background-color .16s ease, color .16s ease;
}

.site-nav a:hover { background: var(--ui-brand-soft); color: var(--color-brand); }

.post-job-button {
    border: 1px solid var(--action-post);
    border-radius: 11px;
    background: var(--action-post);
    box-shadow: 0 2px 5px rgba(var(--color-shadow-rgb), .16);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.post-job-button:hover {
    border-color: var(--action-post-hover);
    background: var(--action-post-hover);
    box-shadow: 0 5px 12px rgba(var(--color-shadow-rgb), .2);
    transform: translateY(-1px);
}

.navbar-mode-switch,
.navbar-menu-button {
    border-color: var(--ui-line);
    border-radius: 11px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.navbar-mode-switch:hover,
.navbar-menu-button:hover { border-color: var(--color-border-strong); background: var(--ui-brand-soft); }

.navbar-dropdown {
    border-color: var(--ui-line);
    border-radius: 15px;
    box-shadow: var(--ui-shadow-raised);
}

body .primary-button,
body .wb-primary {
    min-height: 44px;
    border-radius: 11px;
}

body .primary-button:not(.action-color),
body .wb-primary {
    border: 1px solid var(--ui-brand);
    background: var(--ui-brand);
    box-shadow: 0 2px 5px rgba(var(--color-shadow-rgb), .14);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body .primary-button:not(.action-color):hover:not(:disabled),
body .wb-primary:hover:not(:disabled) {
    border-color: var(--ui-brand-deep);
    background: var(--ui-brand-deep);
    box-shadow: 0 5px 12px rgba(var(--color-shadow-rgb), .2);
    transform: translateY(-1px);
}

body .secondary-button,
body .wb-secondary {
    border: 1px solid var(--color-border);
    border-radius: 11px;
    background: var(--color-surface);
    color: var(--color-brand);
    min-height: 44px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body .secondary-button:hover:not(:disabled),
body .wb-secondary:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
    box-shadow: 0 3px 9px rgba(var(--color-shadow-rgb), .07);
    transform: translateY(-1px);
}

body .primary-button:active:not(:disabled),
body .secondary-button:active:not(:disabled),
body .wb-primary:active:not(:disabled),
body .wb-secondary:active:not(:disabled),
.post-job-button:active { transform: translateY(0) scale(.985); }

body .primary-button:focus-visible,
body .secondary-button:focus-visible,
body .wb-primary:focus-visible,
body .wb-secondary:focus-visible,
.post-job-button:focus-visible,
.navbar-mode-switch:focus-visible,
.navbar-menu-button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: radial-gradient(ellipse at 86% 22%, rgba(var(--color-brand-rgb), .14), transparent 34%),
        linear-gradient(118deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 58%, var(--color-surface-subtle) 100%);
}

.hero .eyebrow {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-brand);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.hero .eyebrow::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--ui-warm);
    content: "";
}

.hero h1 {
    color: var(--color-text);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.hero-description { color: var(--color-text-muted); }
.hero-buttons { gap: .85rem; }
body .hero-buttons .primary-button,
body .hero-buttons .secondary-button { min-height: 50px; padding: .72rem 1.35rem; }

.services,
.how-it-works {
    width: min(100%, 1280px);
    padding-right: clamp(1rem, 4vw, 3rem);
    padding-left: clamp(1rem, 4vw, 3rem);
}

.services-heading-row { margin-bottom: 2rem; }
.services {
    width: min(100%, 1680px);
    padding-right: clamp(1rem, 3vw, 3.5rem);
    padding-left: clamp(1rem, 3vw, 3.5rem);
}
.section-heading h2 { color: var(--ui-ink); font-weight: 650; letter-spacing: -.035em; }
.service-carousel { gap: 1rem; }

.service-card,
.step,
.wb-job,
.company-main-info,
.company-info-card,
.identity-card {
    border-color: var(--ui-line);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
}

.service-card {
    padding: 1.5rem;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.service-card:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--ui-shadow-raised);
    transform: translateY(-3px);
}

.service-icon {
    width: 54px;
    min-height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--ui-brand-soft);
    font-size: 1.8rem;
}

.service-card h3,
.step-content h3 { color: var(--color-text); font-weight: 700; letter-spacing: -.015em; }
.service-card p,
.step-content p { color: var(--ui-muted); }

.step {
    min-height: 220px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.step:hover { border-color: var(--color-border); box-shadow: var(--ui-shadow-raised); transform: translateY(-2px); }
.step-number { border-radius: 14px; background: var(--ui-brand); box-shadow: 0 5px 12px rgba(var(--color-shadow-rgb), .18); }
.how-it-works { border-top-color: var(--color-border); }

.wb-filter-toggle {
    border-color: var(--ui-brand);
    border-radius: 11px;
    background: var(--ui-brand);
    box-shadow: 0 2px 5px rgba(var(--color-shadow-rgb), .14);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.wb-filter-toggle:hover { border-color: var(--ui-brand-deep); background: var(--ui-brand-deep); box-shadow: 0 5px 12px rgba(var(--color-shadow-rgb), .2); transform: translateY(-1px); }
.wb-filter-panel[open] .wb-filter-toggle { margin-bottom: 14px; }
.wb-filters { border-color: var(--ui-line); border-radius: 16px; background: var(--color-surface); box-shadow: var(--ui-shadow); }
.wb-timeframe-options input:checked + label { border-color: var(--ui-brand); background: var(--ui-brand); }
.wb-job { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.wb-job:hover { border-color: var(--color-border); box-shadow: var(--ui-shadow-raised); transform: translateY(-2px); }
.wb-category,
.wb-view { color: var(--color-brand); }
.wb-preview { border-radius: 10px; }
.wb-empty { border-color: var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--ui-shadow); }

.company-trust-summary { border-color: var(--color-border); border-radius: 16px; background: var(--color-surface-subtle); }
.company-service { border-color: var(--color-border); background: var(--color-surface-subtle); color: var(--color-brand); }
.company-info-label { color: var(--color-text-subtle); }

main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
main select,
main textarea {
    border-color: var(--color-border);
    border-radius: 10px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

main input:focus-visible:not(.field-state-invalid):not(.field-state-valid),
main select:focus-visible:not(.field-state-invalid):not(.field-state-valid),
main textarea:focus-visible:not(.field-state-invalid):not(.field-state-valid) {
    border-color: var(--color-brand-border);
    outline: 3px solid rgba(var(--color-shadow-rgb), .15);
    outline-offset: 1px;
    box-shadow: none;
}

main a:focus-visible { outline-color: var(--color-focus); }
.site-footer { border-top-color: var(--ui-line); background: var(--color-surface); }

@media (max-width: 650px) {
    .hero { padding: 3rem 1.25rem; }
    .services,
    .how-it-works { padding-right: 1rem; padding-left: 1rem; }
    .service-card { padding: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}