.workers-page{padding-top:6px;padding-bottom:40px}
.workers-hero{position:relative;isolation:isolate;z-index:20;padding:34px 0 8px}
.workers-hero--searched{padding-top:18px}
.workers-hero:before{position:absolute;z-index:-1;top:-320px;right:-200px;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.11) 0%,transparent 64%);content:"";pointer-events:none}
/* The title on the left, the orbit of the trades on the right (the «Vitrin» variant, 2026-10-08). */
.workers-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;margin-bottom:34px}
.workers-lede{max-width:520px;margin:16px 0 0;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.workers-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:13.5px;font-weight:600}
.workers-trust li{display:inline-flex;align-items:center;gap:7px}
.workers-trust i{color:var(--ok);font-size:17px}
/* The orbit: the door in the middle, two thin rings, the tools of the trades drifting on them. */
.workers-orbit{position:relative;width:100%;max-width:470px;height:330px;margin-left:auto}
.workers-orbit-paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.workers-orbit-line{fill:none;stroke:rgba(var(--ink-rgb),.16);stroke-width:1.2;stroke-dasharray:3 8}
.workers-orbit-line--inner{stroke:rgba(var(--accent-rgb),.32)}
.workers-orbit-dot{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.85))}
.workers-orbit-core{position:absolute;z-index:1;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%)}
/* The tile: the app icon's rose, lit from the top edge. Its perspective is what the door swings in. */
.workers-core-tile{position:absolute;inset:0;overflow:hidden;border-radius:26px;background:linear-gradient(150deg,#EF5A8D 0%,var(--accent) 50%,#A0144A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 22px 42px -18px rgba(var(--accent-rgb),.7),0 0 0 8px rgba(var(--accent-rgb),.06);perspective:200px}
/* The door and the doorway are the logo's own drawing (its path as a mask), so the mark stays the mark. */
.workers-core-frame,.workers-core-door{position:absolute;left:50%;top:50%;width:24px;height:67px;margin:-33.5px 0 0 -12px}
.workers-core-door{-webkit-mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain}
/* The frame: the door's outline, white, a little wider than the door so it shows round it when shut; the doorway
   inside it dark while the door is closed and lit while it is open. */
.workers-core-frame{overflow:visible}
.workers-core-jamb{fill:none;stroke:#fff;stroke-width:9;stroke-linejoin:round;opacity:.92}
.workers-core-doorway{fill:url(#workersDoorway);opacity:.25;animation:workers-core-lit 7s ease-in-out infinite}
@keyframes workers-core-lit{0%,32%{opacity:.25}46%,70%{opacity:1}84%,100%{opacity:.25}}
/* The light that spills out of the opened door onto the tile. */
.workers-core-spill{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.55) 0%,rgba(255,226,150,0) 62%);opacity:0;animation:workers-core-spill 7s ease-in-out infinite}
.workers-core-tool{position:absolute;left:50%;top:50%;z-index:1;margin:-5px 0 0 -11px;color:#9A3412;font-size:14px;opacity:0;transform:scale(.4);animation:workers-core-tool 7s ease-in-out infinite}
.workers-core-door{z-index:2;background:#fff;transform-origin:100% 50%;animation:workers-door 7s cubic-bezier(.6,0,.3,1) infinite}
@keyframes workers-door{0%,30%{transform:rotateY(0)}44%,72%{transform:rotateY(68deg)}86%,100%{transform:rotateY(0)}}
@keyframes workers-core-spill{0%,32%{opacity:0}46%,70%{opacity:1}84%,100%{opacity:0}}
@keyframes workers-core-tool{0%,38%{opacity:0;transform:scale(.4) rotate(-20deg)}50%,68%{opacity:1;transform:scale(1) rotate(0)}80%,100%{opacity:0;transform:scale(.4) rotate(-20deg)}}
@media (prefers-reduced-motion:reduce){.workers-core-door,.workers-core-spill,.workers-core-tool,.workers-core-doorway{animation:none}.workers-orbit-dot{display:none}}
.workers-orbit-tool{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:var(--s,58px);height:var(--s,58px);border:1px solid var(--line-soft);border-radius:calc(var(--s,58px) * .31);background:var(--white);box-shadow:0 14px 28px -16px color-mix(in srgb,var(--card-accent) 60%,transparent),var(--rest-shadow);color:var(--card-accent);font-size:calc(var(--s,58px) * .44);transform:translate(-50%,-50%) rotate(var(--r,0deg));isolation:isolate}
.workers-orbit-tool::before{position:absolute;inset:calc(var(--s,58px) * .12);z-index:-1;border-radius:calc(var(--s,58px) * .2);background:color-mix(in srgb,var(--card-accent) 12%,transparent);content:""}
/* The four groups as tiles, each in its own colour — on the icon only: a glow of it behind the arrow was «слишком»
   (the owner, 2026-10-08). The one being looked at is outlined in it. */
.workers-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.workers-group{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:16px 18px;overflow:hidden;border:1px solid var(--line-soft);border-radius:18px;background:var(--white);box-shadow:var(--rest-shadow);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .3s ease,border-color .2s}
.workers-group.is-on{border-color:var(--card-accent);box-shadow:0 0 0 1px var(--card-accent)}
/* The way back from a group: a small soft disc in the group's colour round the «×», solid when pointed at (the owner,
   2026-10-08: a bare «×» was «не слишком заметен», a filled tile and button «слишком»). */
.workers-group-reset{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:28px;height:28px;margin-left:auto;border-radius:50%;background:color-mix(in srgb,var(--card-accent) 14%,var(--white));color:var(--card-accent);font-size:14px;transition:background .2s,color .2s}
.workers-group-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--card-accent) 14%,var(--white));color:var(--card-accent);font-size:23px}
.workers-group-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.workers-group-txt b{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.workers-group-txt small{color:var(--ink-3);font-size:12.5px;font-weight:500}
.workers-group-go{position:relative;z-index:1;margin-left:auto;flex:none;color:var(--ink-3);font-size:17px;transition:transform .2s,color .2s}
@media (hover:hover) and (pointer:fine){
  .workers-group:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px color-mix(in srgb,var(--card-accent) 45%,transparent),var(--rest-shadow)}
  .workers-group:hover .workers-group-go{color:var(--card-accent);transform:translateX(3px)}
  .workers-group.is-on:hover .workers-group-reset{background:var(--card-accent);color:#fff}
}
/* «Siz də ustasınız?» — the list's last word: the house colour, the door standing in it. */
.workers-join{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:32px 36px;overflow:hidden;border-radius:24px;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#1B1916));color:#fff}
.workers-join::after{position:absolute;z-index:-1;right:150px;top:-50px;width:96px;height:270px;background:rgba(255,255,255,.08);-webkit-mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;content:"";transform:rotate(12deg)}
.workers-join h2{margin:0;color:#fff;font-size:28px;letter-spacing:-.02em}
.workers-join p{margin:6px 0 0;color:rgba(255,255,255,.86);font-size:15px}
.workers-join-btn{display:inline-flex;align-items:center;flex:none;gap:8px;height:50px;padding:0 24px;border-radius:13px;background:#fff;color:var(--accent);font-weight:800;text-decoration:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);transition:transform .2s}
.workers-join-btn i{font-size:18px}
@media (hover:hover) and (pointer:fine){.workers-join-btn:hover{transform:translateY(-2px)}}
/* The door is the «1» the owner means (2026-10-02: «спусти 1 ещё чуть чуть вниз»): its top was under the header, its foot behind the search card; 45% shows the whole top and leaves the foot behind the card. */
.workers-watermark{position:absolute;z-index:-1;right:64px;top:30%;width:76px;height:auto;opacity:.07;transform:translateY(-50%);pointer-events:none}
.workers-masthead{max-width:760px;margin:0 0 0 4px}
.workers-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.14em}.workers-kicker i{font-size:15px}
.workers-kicker a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.workers-kicker a:hover{text-decoration:underline;text-underline-offset:3px}}
.workers-hero h1,.workers-hero .hero-title{margin:16px 0 0;color:var(--ink);font-size:clamp(38px,4.6vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.03em}
/* The turning word on a line of its own, its caret glued to it (the owner, 2026-10-08: «когда слово длинное курсор
   падает»): beside «olan» a long word filled the line and the caret wrapped alone under it, and a word that did not
   fit went down and came back up with every turn, moving the whole page. */
.workers-hero h1 em,.workers-hero .hero-title em{display:block;white-space:nowrap}

/* The search is the home page's bar, drawn for two fields (the owner, 2026-10-02:
   «сделай как тут» — the bar of /, with «Alış / Kirayə | Qiymət | Rayon» and
   «Axtar»): ONE line in each field while it is empty — its mark and what it
   stands for, in the ink the home's placeholders use — with the small name above
   the value only once there IS a value; a hairline the full height of the card
   between the fields, a plain chevron where the home's sits, and the same rose
   button. Not the stacked caption and the oversized chip the first two goes at
   this had. */
.workers-search{display:flex;align-items:stretch;margin:0;padding:0;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.09);border-radius:22px;background:var(--white);box-shadow:0 12px 24px -20px rgba(27,25,22,.28),0 2px 6px -3px rgba(27,25,22,.08)}
.workers-seg{position:relative;flex:1;min-width:0}
.workers-seg+.workers-seg:before{position:absolute;z-index:2;left:0;top:0;bottom:0;width:1px;background:rgba(var(--ink-rgb),.07);content:""}


.workers-search .rm-picker-trigger{display:flex;align-items:center;gap:10px;height:64px;padding:0 20px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink);font-size:14px;font-weight:600;transition:background .15s}
.workers-search .rm-picker-trigger>.ph:first-child{display:inline-block;flex:none;font-size:16px;color:var(--ink-3)}
/* Empty: one centred line — the field's mark, then what it stands for. */


.workers-search .rm-picker-label{color:var(--ink);font-weight:600}.workers-search .rm-picker.is-empty .rm-picker-label{color:var(--ink-2);font-weight:500}
/* The one-field line (trade · town, or the question) is a phone's — the search below; wider, the two fields say their own. */
.workers-seg-phone{display:none}
/* The chevron, as plain and as small as the home's. */
.workers-search .rm-picker-caret{display:block;flex:none;margin-bottom:0;font-size:12px;color:var(--ink-3)}

/* The clear mark: only when there is something to clear (the shared rule that
   hides it when the field is empty lost to a `display` of this block's, and two
   × stood on an empty search — which the first screenshot showed). */
.workers-search .rm-picker-clear{display:none;place-items:center;flex:none;width:22px;height:22px;margin-bottom:0;padding:0;border-radius:50%;background:var(--accent-deep-tint);color:var(--accent);font-size:11px}
/* The shared sheet shows the clear mark on a field that holds something (.rm-picker:not(.is-empty) .rm-picker-clear); here there is none — «Sıfırla» and «Bütün şəhərlər» are in the picker (the owner, 2026-10-02: «убери label и X»). Written with the same :not() so it outranks it. */
.workers-search .rm-picker:not(.is-empty) .rm-picker-clear{display:none}

.workers-search .rm-picker-panel{display:none}.workers-filter-modal .loc-main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.workers-filter-modal .loc-top .loc-eyebrow{display:block}
/* The group's head stays in sight while its list scrolls past — «Təmir və
   tikinti» is 31 trades, «Bağ» is 8. It needs a normal block flow (the columns
   are built in the script, not by CSS multicol) and no overflow:hidden over it,
   so the box's rounded corners move to the head and the last row. */
/* The scroller's top padding moves inside it, so nothing shows through the
   band above a stuck head. */
.workers-filter-modal .loc-scroll{padding-top:0}
.workers-filter-modal .loc-group-cols{display:flex;align-items:flex-start;gap:10px;columns:auto;padding:10px 0 12px}
.workers-filter-modal .loc-group-col{display:flex;flex:1;min-width:0;flex-direction:column;gap:8px}
.workers-filter-modal .loc-group{margin:0;overflow:visible}
.workers-filter-modal .loc-group-head{position:sticky;top:0;z-index:2;border-radius:11px 11px 0 0}
.workers-filter-modal .loc-gitem:last-child{border-radius:0 0 11px 11px}
.workers-search-go{display:flex;align-items:center;flex:none;padding:0 12px 0 10px}.workers-search-go .btn{height:46px;gap:8px;padding:0 26px;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 8px 16px rgba(var(--accent-rgb),.16)}.workers-search-go .btn i{font-size:17px}
@media (hover:hover) and (pointer:fine){.workers-search .rm-picker-trigger:hover{background:var(--line-soft)}.workers-search .rm-picker-trigger:hover .rm-picker-caret{color:var(--ink-2)}}
.workers-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:40px 0 18px}.workers-results-count{margin-left:6px;color:var(--ink-3);font-size:16px;font-weight:600;letter-spacing:0}.workers-results-kicker{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.15em}.workers-results-head h2{margin:0;color:var(--ink);font-size:23px;letter-spacing:-.02em}.workers-premium{margin-bottom:34px}
/* The list's head is the catalogue's (.results-head--latest: the hairline, the title, the «N elan» pill, the order). */
.workers-list-head{margin:34px 0 18px}
/* Air between the last row of cards (or the pager) and the hairline that opens the text: the grid has no bottom margin of its own, and the section's rule sat right under the cards. */
.workers-page .landing-seo{margin-top:56px}
@media(max-width:700px){.workers-page .landing-seo{margin-top:40px}}
/* Stretch, so the cards of a row are ONE height whatever is in them (the owner,
   2026-10-02: «пусть всегда одинаковой высоты будут»). The card is a column
   that fills its cell and pins its footer — date and «Əlaqə» — to the bottom
   (.property-card__footer-wrap, margin-top:auto), so a card without a
   photograph or with a short text keeps its footer on the line of its
   neighbours' instead of floating up under its own last row. */
.workers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* The pages the list loads as the reader scrolls (components/home/MoreFeed) stand one row gap under it. */
.workers-grid.grid--more:not(:empty){margin-top:18px}
/* The card is the site's own (.card in style.css: the ground, the shadow, the glare); the rest is this one's. */
.worker-card{display:flex;flex-direction:column;min-width:0}
.worker-card .card{position:relative;flex:1;cursor:pointer;border:1px solid var(--line-soft);border-radius:18px;transition:transform .2s ease,box-shadow .3s ease}
.worker-card .card::after{border-radius:18px}
/* The trade's colour, once, as a thread along the top edge. */
.worker-card .card::before{position:absolute;z-index:2;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--card-accent),color-mix(in srgb,var(--card-accent) 0%,transparent) 85%);content:"";pointer-events:none}
/* The card's own link, under everything: the text lets clicks through to it, the contact and the seal do not. */
.worker-card-link{position:absolute;inset:0;z-index:0;border-radius:inherit}
.worker-card .property-card__body{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;padding:20px 20px 18px;pointer-events:none}
.worker-card .worker-card-link:focus-visible{outline:none}
.worker-card .card:has(.worker-card-link:focus-visible){box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}

/* Who: the picture (or the initials in the trade's colour), the name, the place; stars and crown at the far end. */
.worker-card .worker-who{position:relative;display:flex;align-items:center;gap:12px;min-width:0;margin:0}
/* Written under .worker-card: the catalogue's rule for the row's <span>s (.property-card__location span — the name:
   flex:1, the grey, the ellipsis) reaches every span in it, and stretched the picture into a pill. */
.worker-card .worker-who>span{flex:none;overflow:visible}
.worker-card .worker-who>.worker-who-text{flex:1;min-width:0;overflow:hidden}
.worker-card .worker-who-text>span{flex:none}
.worker-card .worker-avatar,.worker-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--card-accent) 16%,var(--white));color:var(--card-accent);font-size:15px;font-weight:800;letter-spacing:.02em}
.worker-avatar img{width:100%;height:100%;object-fit:cover}
.worker-who-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.worker-card .worker-name{display:block;overflow:hidden;color:var(--ink);font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.worker-card .worker-place{display:flex;align-items:center;gap:4px;overflow:hidden;margin-top:2px;color:var(--ink-3);font-size:12.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.worker-place i{flex:none;color:var(--card-accent);font-size:13px}
/* The seal of a confirmed account, on the picture's corner — and hoverable, which the card's body is not. */
.worker-card .worker-verified{position:absolute;left:30px;top:28px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--white);color:var(--ok);pointer-events:auto;cursor:help;overflow:visible}
.worker-card .worker-verified i{color:var(--ok);font-size:17px}
/* The bubble hangs to the RIGHT of the seal: centred on it, half of it would hang outside a card that clips. */
.worker-card .worker-verified.tooltip::after{left:-2px;transform:none}
.worker-card .worker-verified.tooltip::before{left:7px;transform:none}
@media (hover:hover) and (pointer:fine){
  .worker-card .worker-verified.tooltip:hover::after,
  .worker-card .worker-verified.tooltip:hover::before{transform:translateY(-2px)}
}
.worker-card .worker-rating{display:inline-flex;flex:none;align-items:center;gap:4px;color:var(--ink-2);font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.worker-card .worker-rating i{font-size:14px;color:#E8A317}
.worker-card .worker-rating small{color:var(--ink-3);font-size:12px;font-weight:500}
/* The site's own Premium sign — the black tile with the gold crown, as everywhere. */
.worker-card .worker-crown{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;border-radius:9px;color:#d4af37;background:rgba(27,25,22,.82);border:1px solid rgba(212,175,55,.32);box-shadow:0 2px 6px -2px rgba(0,0,0,.22)}
.worker-card .worker-crown i{font-size:14px;color:inherit}

/* What: the trade in large type, the others under it, then what it pays. */
.worker-card-title{margin:16px 0 0;min-width:0;color:var(--ink);font-size:21px;font-weight:750;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.worker-also{margin-top:3px;overflow:hidden;color:var(--ink-3);font-size:13px;font-weight:500;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
/* The pay (2026-10-08, after a rose figure «портит глаза», a marker «тупо» and a plate «нет, давай без фона»): no
   ground, a greyish tone, the figure large and the sign and «-dan» smaller beside it. */
.worker-pay{display:flex;align-items:baseline;gap:5px;margin-top:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.worker-pay-figure{font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.worker-pay-unit{font-size:14px;font-weight:700;opacity:.85}
.worker-pay.is-agreed{color:var(--ink-2);font-size:15px;font-weight:650}

/* The chips the ad's own page lists the other trades with (.worker-show-also): in a soft tint of the card's colour,
   no border. The card itself says them as a line of text now (.worker-also). */
.worker-chip{display:inline-flex;align-items:center;padding:6px 11px;border-radius:9px;background:color-mix(in srgb,var(--card-accent,var(--accent)) 9%,var(--white));color:color-mix(in srgb,var(--card-accent,var(--accent)) 62%,var(--ink));font-size:11px;font-weight:650;line-height:1.2;white-space:nowrap}

/* The facts as small plates: the experience and the photographs. */
.worker-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.worker-fact{display:inline-flex;align-items:center;flex:none;gap:6px;height:28px;padding:0 10px;border-radius:9px;background:rgba(var(--ink-rgb),.05);color:var(--ink-2);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.worker-fact i{color:var(--card-accent);font-size:14px}

/* The foot, pinned to the bottom so the cards of a row end on one line: when, and the way to reach them. */
.worker-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.worker-date{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.worker-date i{font-size:14px}
.worker-contact{display:flex;align-items:center;gap:8px;min-width:0;pointer-events:auto}
/* «Əlaqə» is a button of its own, quiet at rest: a light plate in the text's colour. No rose standing on the card
   (the owner, 2026-10-08: «розовый цвет как то портит глаза») — it comes only when the button is pointed at. */
.worker-call{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--line-soft);border-radius:11px;background:rgba(var(--ink-rgb),.05);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:750;line-height:1;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.worker-call i{font-size:16px}
.worker-call[disabled]{opacity:.6;cursor:default}
/* Waiting for the number: the phone gives way to the site's own spinner (btn-spin, style.css), at full strength. */
.worker-call .btn-spinner{display:none}
.worker-call.is-loading>i{display:none}
.worker-call.is-loading .btn-spinner{display:inline-block;flex:none;width:14px;height:14px;border:2.5px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;animation:btn-spin .6s linear infinite}
.worker-call[disabled].is-loading{opacity:1}
@media (prefers-reduced-motion:reduce){.worker-call.is-loading .btn-spinner{animation-duration:1.6s}}
.worker-contact a{color:var(--ink);font-size:13px;font-weight:750;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  /* One lift, on the card: everything inside it — the contact included — comes along. */
  .worker-card:hover .card{transform:translateY(-4px)}
  /* The button answers its own pointer only (the owner, 2026-10-08: «hover на elaqe должен только при hover на
     него, так как hover карточки отдельный»). */
  /* Quiet at rest, the house rose when pointed at (the owner, 2026-10-08: «цвет hover на elaqe верни»). */
  .worker-call:hover{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.6)}
}

/* The contact's ground: a soft glow of the trade's colour from the top corner and a fainter one from the bottom,
   and the house's door, cut out of the same colour, standing low in the corner. */
.worker-reveal{position:absolute;inset:0;z-index:3;isolation:isolate;overflow:hidden;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px;border-radius:inherit;background:radial-gradient(130% 90% at 100% 0%,color-mix(in srgb,var(--card-accent,var(--accent)) 17%,transparent) 0%,transparent 62%),radial-gradient(110% 80% at 0% 100%,color-mix(in srgb,var(--card-accent,var(--accent)) 9%,transparent) 0%,transparent 60%),var(--white);box-shadow:var(--rest-shadow)}
.worker-reveal:before{position:absolute;z-index:-1;right:-12px;bottom:-22px;width:92px;height:128px;background:color-mix(in srgb,var(--card-accent,var(--accent)) 10%,transparent);-webkit-mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;mask:url('/assets/front/logo/birev-door-pink.svg?v=74ddddfdbf') no-repeat center/contain;content:"";pointer-events:none;transform:rotate(-8deg)}
.worker-reveal[hidden]{display:none}
.worker-reveal-premium{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid rgba(212,175,55,.4);border-radius:9px;background:rgba(27,25,22,.9);color:#d4af37;line-height:1}
.worker-reveal-premium i{font-size:13px}
/* A close mark a thumb finds (the owner, 2026-10-25, a screenshot of the open contact card: «Увеличь Х»): 40px on a
   soft tint, the mark 20px and darker — it was 26px, transparent and grey. */
.worker-reveal-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:11px;background:rgba(var(--ink-rgb),.06);color:var(--ink-2);font-size:20px;cursor:pointer;transition:background .15s,color .15s}
.worker-reveal-kicker{color:var(--card-accent,var(--accent));font-size:9.5px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.worker-reveal-who{overflow:hidden;max-width:100%;margin:1px 0 12px;color:var(--ink);font-size:14.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.worker-reveal-body{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:230px}
.worker-reveal-line{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:11px;font-size:15.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;text-decoration:none}
.worker-reveal-line i{font-size:18px}
.worker-reveal-line--tel{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 14px -8px rgba(var(--accent-rgb),.6)}
.worker-reveal-line--wa{background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.26);color:#0E9F53;font-size:14px}
:root[data-theme="dark"] .worker-reveal-line--wa{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.3);color:#4ADE80}
/* On the dark ground what a trade's colour draws — the avatar's letter, the place pin, the facts' icons, the reveal's
   kicker — is that colour lightened (2026-10-24, the owner: «как будто для глаз очень трудно»): the trades' colours are
   picked for the light card, and «Fəhlə»'s #7C3AED stood at 2.6–2.9:1 on the dark one. */
:root[data-theme="dark"] .worker-avatar,:root[data-theme="dark"] .worker-place i,:root[data-theme="dark"] .worker-fact i,:root[data-theme="dark"] .worker-reveal-kicker{color:color-mix(in srgb,var(--card-accent,var(--accent)) 55%,#fff)}
.worker-reveal-none{margin:0;color:var(--ink-3);font-size:14px;text-align:center}
@media (hover:hover) and (pointer:fine){
  .worker-reveal-x:hover{background:rgba(var(--ink-rgb),.07);color:var(--ink)}
  .worker-reveal-line--tel:hover{filter:brightness(1.06)}
  .worker-reveal-line--wa:hover{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.44)}
}
/* Five stars filled to a fraction (the ad's page): a grey row, and a gold one laid over it and clipped to --fill. */
.stars{position:relative;display:inline-block;line-height:1;vertical-align:middle;white-space:nowrap}
.stars i{font-size:15px;letter-spacing:1px}
.stars__base{color:var(--line)}
.stars__fill{position:absolute;top:0;left:0;width:var(--fill,0%);overflow:hidden;color:#E8A317;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.worker-card .card,.worker-call{transition:none}}

.workers-empty{position:relative;isolation:isolate;display:flex;min-height:390px;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:40px 22px;border:1px solid var(--line-soft);border-radius:24px;background:radial-gradient(ellipse at 50% 45%,var(--white) 0%,var(--white) 37%,color-mix(in srgb,var(--accent) 3%,var(--white)) 100%);text-align:center;box-shadow:var(--rest-shadow)}
.workers-empty:before,.workers-empty:after{position:absolute;z-index:-1;width:260px;height:260px;border:1px solid rgba(var(--accent-rgb),.06);border-radius:50%;content:""}.workers-empty:before{top:-190px;left:-90px;box-shadow:0 0 0 30px rgba(var(--accent-rgb),.025),0 0 0 65px rgba(var(--accent-rgb),.018)}.workers-empty:after{right:-130px;bottom:-200px;box-shadow:0 0 0 32px rgba(135,100,184,.03),0 0 0 70px rgba(135,100,184,.02)}
.workers-empty-art{position:relative;display:grid;place-items:center;width:140px;height:115px;margin:0 auto 12px}.workers-empty-orbit{position:absolute;border:1px solid rgba(var(--accent-rgb),.12);border-radius:50%;transform:rotate(-23deg)}.workers-empty-orbit--one{width:132px;height:77px}.workers-empty-orbit--two{width:106px;height:105px;transform:rotate(28deg)}
.workers-empty-case{display:grid;place-items:center;width:66px;height:66px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:22px;background:linear-gradient(145deg,var(--white),var(--accent-deep-tint));box-shadow:0 10px 23px rgba(var(--accent-rgb),.1);color:var(--accent);font-size:31px}
.workers-empty-tool{position:absolute;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-soft);border-radius:12px;background:var(--white);color:#8168a4;font-size:17px;box-shadow:0 6px 13px rgba(43,30,52,.07)}.workers-empty-tool--one{top:4px;right:11px;transform:rotate(10deg)}.workers-empty-tool--two{bottom:10px;left:4px;transform:rotate(-12deg)}
.workers-empty-kicker{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.workers-empty h2{max-width:520px;margin:7px 0 8px;color:var(--ink);font-size:clamp(22px,3vw,30px);letter-spacing:-.03em}.workers-empty p{max-width:490px;margin:0 0 19px;color:var(--ink-2);font-size:14px;line-height:1.65}.workers-empty>.btn{min-height:45px;padding:0 20px;border-radius:12px;box-shadow:0 8px 18px rgba(var(--accent-rgb),.14)}
.workers-empty-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}.workers-empty-tags span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid var(--line-soft);border-radius:9px;background:var(--white);color:var(--ink-3);font-size:11px;font-weight:700}.workers-empty-tags i{color:#168363;font-size:13px}
@media(max-width:1100px){.workers-hero-grid{grid-template-columns:1fr}.workers-orbit{display:none}.workers-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.workers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workers-watermark{right:24px}}
/* A phone: the two segments stacked, the button across the foot of the card. */
@media(max-width:700px){.worker-card .property-card__body{padding:16px 16px 15px}.worker-card-title{margin-top:14px;font-size:19px}.worker-facts{margin-top:12px}.worker-foot{padding-top:14px}.workers-lede{font-size:15px}.workers-trust{display:none}.workers-groups{gap:10px}.workers-group{gap:10px;padding:12px}.workers-group-ic{width:38px;height:38px;border-radius:11px;font-size:19px}.workers-group-txt b{font-size:13.5px}.workers-group-go{display:none}.workers-group-reset{width:26px;height:26px;font-size:13px}.workers-join{flex-direction:column;align-items:flex-start;padding:26px 22px}.workers-join h2{font-size:24px}.workers-join-btn{width:100%;justify-content:center}}
/* On a phone the search is one field and a button (the owner, 2026-10-25: «Фильтр в моб версии занимает много места.
   И нижние табы убери в моб версии», then «соедини их и добавь кнопку поиска», «просто объедени как нибудь… не нужно 2
   текста»): one line for the trade and the town — «Hansı usta lazımdır?» until one is chosen — both changed in the
   sheet, whose city tab is there, and a square search button; the town's own field is hidden. The four group cards
   under it are gone (the trade sheet has every group), and so is the trust line under the lede («Может это тоже
   уберем?»). */
@media(max-width:700px){.workers-page{padding-top:0;padding-bottom:28px}.workers-hero{padding:18px 0 26px}.workers-hero:before{top:-300px;right:-300px}.workers-watermark{display:none}.workers-masthead{margin:0 0 0 2px}.workers-hero-grid{margin-bottom:22px}.workers-hero h1,.workers-hero .hero-title{margin-top:12px;font-size:clamp(36px,10vw,50px)}.workers-hero h1 em,.workers-hero .hero-title em{display:block}.workers-search{border-radius:18px}.workers-seg+.workers-seg{display:none}.workers-search .rm-picker-trigger{height:58px;gap:12px;padding:0 6px 0 16px}.workers-search .rm-picker-caret{display:none}.workers-seg-wide{display:none}.workers-seg-phone{display:block}.workers-search .rm-picker.is-empty .workers-seg-phone.is-set{color:var(--ink);font-weight:600}.workers-search-go{padding:0 6px 0 4px}.workers-search-go .btn{width:46px;height:46px;padding:0;justify-content:center}.workers-search-go .btn span{display:none}.workers-groups{display:none}.workers-grid{grid-template-columns:1fr;gap:12px}.workers-grid.grid--more:not(:empty){margin-top:12px}.workers-results-head{align-items:center;margin:4px 0 12px}.workers-list-head{margin:10px 0 12px}.workers-results-head h2{font-size:20px}.workers-empty{min-height:350px;padding:32px 17px;border-radius:20px}.workers-empty-tags{gap:6px;margin-top:20px}}
@media(prefers-reduced-motion:reduce){.worker-card .card,.worker-call,.workers-search .rm-picker-trigger{transition:none}}