/* LocalWork website: green-and-lime design aligned with the Android app.
   Loaded only for browser pages, never the Android app shell or admin. */
:root {
  --bg: #f7faf8;
  --surface: #fff;
  --ink: #173927;
  --ink-2: #52675a;
  --line: #e1ede5;
  --line-2: #c7decf;
  --brand: #15803d;
  --brand-2: #166534;
  --brand-tint: #ecfdf3;
  --accent: #15803d;
  --accent-2: #166534;
  --accent-ink: #fff;
  --accent-tint: #ecfdf3;
  --work: #15803d;
  --work-2: #166534;
  --work-tint: #ecfdf3;
  --call: #15803d;
  --focus: 3px solid #16a34a;
  --lime: #84cc16;
  --lime-2: #65a30d;
  --lime-ink: #1a2e05;
  --shadow: 0 2px 10px rgb(23 57 39 / .045);
  --shadow-lg: 0 12px 32px rgb(23 57 39 / .08);
}
body { background: var(--bg); color: var(--ink); }
a, .btn-link, .more-filters > summary { color: var(--brand); }
a:hover { color: var(--brand-2); }
:focus-visible { outline-color: #16a34a; }
.top {
  z-index: 60;
  background: rgb(255 255 255 / .97);
  border-bottom: 1px solid #e1ede5;
  box-shadow: 0 2px 12px rgb(18 55 32 / .04);
}
.top-in { min-height: 66px; gap: 12px; }
.brand, .brand:hover { color: #173927; font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  background: #15803d;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgb(21 128 61 / .18);
}
.brand-ic { color: #fff; }
.top .lang-link {
  color: #345745;
  background: #fff;
  border: 1px solid #dcebe1;
  border-radius: 12px;
}
.top .lang-link:hover { color: #166534; background: #ecfdf3; border-color: #b7dfc4; }
.primary-nav { border-color: #edf3ee; gap: 8px; padding-block: 8px 10px; }
.header-action {
  border-radius: 12px;
  font-weight: 650;
  color: #52675a;
}
.header-action .ic { color: #6c8a78; }
.header-action:hover { color: #166534; background: #f1faf4; }
.header-action.is-on { color: #166534; background: #ecfdf3; }
.header-action.is-on .ic { color: #15803d; }
.header-action-primary, .header-action-primary:hover {
  color: #1a2e05;
  background: #84cc16;
  border-color: #84cc16;
  box-shadow: none;
}
.header-action-primary .ic { color: #1a2e05; }
.header-action-primary:hover { background: #65a30d; border-color: #65a30d; }
html:not(.app-mode) .header-action-list,
html:not(.app-mode) .header-action-list:hover {
  color: #166534; background: #ecfdf3; border-color: #b7dfc4; box-shadow: none;
}
html:not(.app-mode) .header-action-list .ic { color: #15803d; }
.btn-primary, .btn-accent, .btn-call {
  color: #fff; background: #15803d; border-color: #15803d;
  box-shadow: 0 4px 13px rgb(21 128 61 / .11);
}
.btn-primary:hover, .btn-accent:hover, .btn-call:hover {
  color: #fff; background: #166534; border-color: #166534;
}
.btn-secondary { background: #15803d; border-color: #15803d; color: #fff; }
.btn-secondary:hover { background: #166534; border-color: #166534; color: #fff; }
.btn-work, html:not(.app-mode) .btn-work,
html:not(.app-mode) .btn-work:hover { background: #84cc16; border-color: #84cc16; color: #1a2e05; box-shadow: none; }
.btn-work:hover, html:not(.app-mode) .btn-work:hover { background: #65a30d; border-color: #65a30d; }
.btn-ghost { color: #166534; border-color: #c7decf; background: #fff; }
.btn-ghost:hover { color: #166534; background: #ecfdf3; border-color: #87cba0; }
input:focus, select:focus, textarea:focus {
  border-color: #16a34a;
  outline: 3px solid rgb(22 163 74 / .18);
  outline-offset: 0;
}
.check input, .check input[type=checkbox], .check input[type=radio] { accent-color: #15803d; }
.alert-info { color: #173927; background: #ecfdf3; border-color: #b7dfc4; }
.badge-src, .badge-area, .count-pill { background: #ecfdf3; color: #166534; }
.count, .bell-link .count { background: #15803d; color: #fff; }
.panel, .card, .prose, .refine, .empty { border-color: #e1ede5; }
.card:hover, .rq-item a:hover, .jn-card:hover { border-color: #abd7b9; }
.seg a[aria-current="page"] { background: #15803d; color: #fff; }
.app-share-box .btn { color: #166534; border-color: #c7decf; }
.app-share-box .btn:hover { color: #166534; background: #ecfdf3; }

/* The website home now belongs to the same brand as the app. */
.hero {
  padding-block: 44px 46px;
  background: radial-gradient(circle at 50% -15%, #dff8e7 0%, transparent 53%),
              linear-gradient(135deg, #f5faf6, #fff 56%, #f5fce9);
  box-shadow: 0 0 0 100vmax #f7faf8;
  color: #173927;
}
.hero-pill {
  color: #166534; background: #ecfdf3; border: 1px solid #b7dfc4;
  letter-spacing: .09em; box-shadow: none;
}
.hero h1 { max-width: 23ch; color: #173927; letter-spacing: -.035em; }
.hero-hl { color: #15803d; }
.hero .lead { color: #52675a; }
.hero-search {
  border: 1px solid #dcebe1; background: #fff;
  box-shadow: 0 12px 32px rgb(23 57 39 / .08);
  border-radius: 22px;
}
.journey-choice {
  border-color: #e1ede5; background: #fff; color: #173927;
  border-radius: 20px; box-shadow: 0 4px 16px rgb(20 60 35 / .045);
}
.journey-choice:hover { background: #f6fcf8; border-color: #abd7b9; color: #173927; }
.journey-choice .ic { color: #15803d; }
.journey-choice-work { background: #f6fcf8; border-color: #c7e6d0; }
.journey-list-first .journey-choice-main,
.journey-list-first .journey-choice-main:hover {
  background: #eefbd7; border-color: #a3d85b;
  box-shadow: 0 0 0 2px rgb(132 204 22 / .11);
}
.journey-list-first .journey-choice-main .ic { color: #4d7c0f; }
.journey-list-first .journey-choice-main strong { color: #365314; }
.feat { border-color: #e1ede5; }
.feat .ic-feat { color: #15803d; background: #ecfdf3; }
.post-band { border-color: #d1e9d7; background: #fff; }
.post-band::before { background: linear-gradient(90deg, #15803d, #84cc16); }
.cat-tile:hover, .services-grid a:hover { border-color: #a3d6b5; background: #f5fcf6; }
.ic-cat, .services-grid .ic { color: #15803d; }
.role-card { border-color: #e1ede5; }
.role-hire { border-color: #c7e6d0; }
.role-work { border-color: #bee4a6; }
.app-band { border-color: #cce5d4; }
.foot { color: #52675a; background: #f0f7f1; border-top: 1px solid #dcebe1; }
.foot h2, .foot .brand { color: #173927; }

/* The website-only mobile drawer: mirrors the Android navigation. */
.site-menu { display: none; }
@media (max-width: 759px) {
  .top { overflow: visible; }
  .top-in, .top-in:has(.acct-signup), .top-in:not(:has(.acct-signup)) {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: center; min-height: 66px; gap: 8px;
  }
  .top-in .brand, .top-in:has(.acct-signup) .brand {
    flex: 1 1 auto; align-self: center; min-width: 0;
  }
  .top-in .brand-name { display: inline; font-size: 1.06rem; white-space: nowrap; }
  .top-in .top-actions, .top-in:has(.acct-signup) .top-actions {
    width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 5px;
  }
  .top-in .top-actions > :not(.bell-link) { display: none !important; }
  .primary-nav, .primary-nav:has(a:nth-child(5)) { display: none !important; }
  .site-menu { display: block; flex: none; order: -1; }
  .site-menu > summary.site-menu-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; padding: 8px;
    border-radius: 12px; color: #166534;
    background: #ecfdf3; list-style: none; cursor: pointer;
  }
  .site-menu > summary::-webkit-details-marker { display: none; }
  .site-menu > summary .ic { width: 24px; height: 24px; }
  .site-menu[open] > summary { background: #d9f9e4; }
  .site-menu > .site-menu-scrim { display: none; }
  .site-menu[open] > .site-menu-scrim {
    display: block; position: fixed; inset: 0; z-index: 110;
    width: 100vw; height: 100dvh; padding: 0;
    border: 0; border-radius: 0; background: rgb(10 39 23 / .55);
    cursor: pointer;
  }
  .site-menu:not([open]) > .site-menu-panel { display: none !important; }
  .site-menu[open] > nav.site-menu-panel {
    display: flex; flex-direction: column; position: fixed;
    inset-block: 0; inset-inline-start: 0; inset-inline-end: auto;
    z-index: 111; overflow: hidden; overscroll-behavior: contain;
    width: min(355px, 90vw); height: 100dvh; max-height: 100dvh;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    margin: 0; background: #fff; border: 0;
    border-radius: 0 20px 20px 0;
    box-shadow: 18px 0 50px rgb(10 39 23 / .2);
  }
  html[dir=rtl] .site-menu[open] > nav.site-menu-panel {
    border-radius: 20px 0 0 20px; box-shadow: -18px 0 50px rgb(10 39 23 / .2);
  }
  html.site-menu-open { overflow: hidden; }
  .site-menu-brand {
    display: flex; align-items: center; gap: 10px; min-height: 70px;
    padding: 12px 16px; border-bottom: 1px solid #e1ede5;
    flex: none; color: #173927; font-size: 1.15rem;
  }
  .site-menu-brand-mark {
    display: grid; place-items: center; width: 36px; height: 36px;
    color: #fff; background: #15803d; border-radius: 11px;
  }
  .site-menu .site-menu-close {
    display: grid; place-items: center; margin-inline-start: auto;
    border: 0; background: #f0f7f1; color: #53685a;
    width: 40px; height: 40px; min-height: 40px; min-width: 40px;
    padding: 0; border-radius: 50%; font-size: 1.7rem; line-height: 1;
    cursor: pointer;
  }
  .site-menu-profile {
    display: flex; align-items: center; gap: 12px;
    min-height: 94px; padding: 14px 16px; background: #f5faf6;
    border-bottom: 1px solid #e1ede5; text-decoration: none; flex: none;
  }
  .site-menu-profile:hover { color: #166534; background: #ecfdf3; }
  .site-menu-avatar {
    display: grid; place-items: center; flex: none;
    width: 52px; height: 52px; border-radius: 50%;
    background: #d8f4e2; color: #15803d;
  }
  .site-menu-avatar .ic { width: 30px; height: 30px; }
  .site-menu-profile-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .site-menu-profile-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; color: #173927; }
  .site-menu-profile-text small { color: #65796b; font-size: .77rem; line-height: 1.4; }
  .site-menu-chevron { width: 18px; height: 18px; color: #82988b; }
  html[dir=rtl] .site-menu-chevron { transform: scaleX(-1); }
  .site-menu-links {
    display: block; overflow-y: auto; overscroll-behavior: contain;
    flex: 1 1 auto; min-height: 0; padding: 8px 10px;
    scrollbar-width: thin;
  }
  .site-menu-link {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 49px; padding: 9px 12px;
    background: transparent; border: 0; border-radius: 12px;
    color: #293d32; font-size: .95rem; font-weight: 600;
    text-decoration: none;
  }
  .site-menu-link .ic { flex: none; width: 22px; height: 22px; color: #6c8475; }
  .site-menu-link:hover, .site-menu-link:focus-visible { background: #ecfdf3; color: #166534; }
  .site-menu-badge {
    margin-inline-start: auto; min-width: 22px; height: 22px; padding: 1px 6px;
    text-align: center; font-size: .72rem; border-radius: 99px; color: #166534; background: #dcfce7;
  }
  .site-menu-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    flex: none; margin: 8px 14px; min-height: 52px;
    padding: 10px 12px; border-radius: 13px; font-weight: 800;
    text-align: center; text-decoration: none;
    background: #84cc16; color: #1a2e05;
  }
  .site-menu-cta:hover { color: #1a2e05; background: #65a30d; }
  .site-menu-footer { padding: 7px 12px; border-top: 1px solid #e1ede5; flex: none; }
  .site-menu-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 5px 10px; }
  .site-menu-langs > span { flex: 1; font-weight: 700; color: #173927; }
  .site-menu-langs .ic { color: #6c8475; }
  .site-menu-langs a { color: #166534; background: #ecfdf3; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
  .site-menu-footer .site-menu-link { min-height: 40px; font-size: .84rem; padding: 5px 10px; }
  .site-menu-footer .site-menu-link .ic { width: 19px; height: 19px; }
  .site-menu-terms { display: inline-block; padding: 5px 10px; font-size: .78rem; color: #6c8475; }
  .hero { padding-block: 30px 36px; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.3rem); }
  .journey-choice { border-radius: 16px; }
  .hero-search { border-radius: 18px; padding: 16px; }
}
@media (max-width: 380px) {
  .site-menu[open] > nav.site-menu-panel { width: min(334px, 93vw); }
  .top-in .brand-mark { width: 32px; height: 32px; }
  .top-in .brand-name { font-size: 1rem; }
}

/* The native <details> close control remains reachable without JavaScript.
   With JS enabled the drawer's X button is used instead. */
@media (max-width: 759px) {
  html:not(.js) .site-menu .site-menu-close { display: none; }
  html:not(.js) .site-menu[open] > summary.site-menu-trigger {
    position: fixed;
    z-index: 112;
    top: calc(env(safe-area-inset-top) + 15px);
    inset-inline-start: calc(min(355px, 90vw) - 57px);
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #f0f7f1;
    color: #53685a;
  }
  html:not(.js) .site-menu[open] > summary.site-menu-trigger .ic { display: none; }
  html:not(.js) .site-menu[open] > summary.site-menu-trigger::before {
    content: '×';
    font-size: 1.7rem;
    line-height: 1;
  }
}
@media (max-width: 380px) {
  html:not(.js) .site-menu[open] > summary.site-menu-trigger {
    inset-inline-start: calc(min(334px, 93vw) - 57px);
  }
}