/* Адмінка біля знімка: стрічка нових заявок. Тема кожної панелі — з кольорів і шрифтів самого сайту клієнта. */
.fd {
  --bg: #fff; --card: #fff; --ink: #0C171B; --mut: rgba(12, 23, 27, .58); --line: rgba(12, 23, 27, .14); --acc: #FF4D1A; --new: rgba(255, 77, 26, .12);
  --ff: 'Geologica', 'Arial', sans-serif; --ft: 'Commissioner', 'Segoe UI', sans-serif; --r: 6px;
  position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(12, 23, 27, .16);
}
.fd__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px 4px; }
.fd__brand { font: 700 15px/1.2 var(--ff); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.fd__tag { font: 400 11px/1 var(--ft); color: var(--mut); white-space: nowrap; }
.fd__stats { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 2px 14px 10px; border-bottom: 1px solid var(--line); font: 400 13px/1.2 var(--ft); color: var(--mut); }
.fd__stats b { display: inline-block; font: 800 22px/1 var(--ff); color: var(--ink); margin-right: 4px; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.fd__stats b.is-pop { transform: scale(1.2); }
.fd__stats [data-sum] { font: 700 15px/1 var(--ff); color: var(--acc); white-space: nowrap; }
.fd__list { position: relative; list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.fd__card { flex: none; position: relative; padding: 8px 11px; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * .7); transition: background-color 1.6s, border-color 1.6s; }
.fd__card.is-new { background: var(--new); border-color: var(--acc); }
.fd__card.is-new::after { content: 'нова'; position: absolute; top: -1px; right: -1px; padding: 3px 7px; font: 700 10px/1 var(--ff); color: #fff; background: var(--acc); border-radius: 0 calc(var(--r) * .7) 0 calc(var(--r) * .7); }
.fd__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fd__who { font: 700 14px/1.25 var(--ff); color: var(--ink); min-width: 0; }
.fd__top time { font: 400 12px/1 var(--ft); color: var(--mut); white-space: nowrap; }
.fd__card.is-new .fd__top time { visibility: hidden; }
.fd__tel { margin-top: 2px; font: 400 12px/1.3 var(--ft); color: var(--mut); letter-spacing: .02em; }
.fd__dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 5px 0 0; font: 400 12.5px/1.3 var(--ft); }
.fd__dl dt { color: var(--mut); }
.fd__dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.fd__sum { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 3px; }
.fd__sum span { font: 400 12px/1 var(--ft); color: var(--mut); }
.fd__sum b { font: 800 16px/1 var(--ff); color: var(--acc); white-space: nowrap; }
.fd__d { margin: 4px 0 0; font: 400 13px/1.4 var(--ft); color: var(--mut); }
.fd__q { margin: 5px 0 0; font: 400 13px/1.35 var(--ft); color: var(--ink); }
.fd__qtag { font: 700 11px/1 var(--ff); font-style: normal; padding: 3px 7px; color: var(--ink); border: 1px solid var(--line); border-radius: calc(var(--r) * .5); white-space: nowrap; }
.fd__save { display: inline-block; margin-top: 7px; padding: 3px 8px; font: 700 12px/1.2 var(--ff); color: var(--acc); border: 1px solid var(--acc); border-radius: calc(var(--r) * .5); }

/* ---------- теми сайтів ---------- */
.fd--lawspectr { --bg: #0f1a30; --card: #15233f; --ink: #F3EBDD; --mut: rgba(243, 235, 221, .6); --line: rgba(201, 162, 74, .28); --acc: #D4AF5A; --new: rgba(212, 175, 90, .14); --ff: Georgia, 'Times New Roman', serif; --r: 2px; }
.fd--spartans { --bg: #121212; --card: #1b1b1b; --ink: #F1ECE6; --mut: rgba(241, 236, 230, .55); --line: rgba(217, 119, 43, .3); --acc: #E07A2E; --new: rgba(224, 122, 46, .16); --r: 4px; }
.fd--alexdent { --bg: #fff; --card: #F6F8FB; --ink: #1D2A44; --mut: rgba(29, 42, 68, .68); --line: rgba(29, 42, 68, .12); --acc: #2A62D2; --new: rgba(59, 111, 216, .1); --ff: Georgia, serif; --r: 10px; }
.fd--kolos { --bg: #141938; --card: #1C2350; --ink: #F4F1FF; --mut: rgba(244, 241, 255, .6); --line: rgba(232, 184, 74, .25); --acc: #E8B84A; --new: rgba(232, 184, 74, .16); --r: 14px; }
.fd--glynar { --bg: #2A1D16; --card: #34251C; --ink: #F3E6D8; --mut: rgba(243, 230, 216, .63); --line: rgba(192, 139, 92, .3); --acc: #D39D6D; --new: rgba(210, 154, 105, .16); --ff: Georgia, serif; --r: 2px; }
.fd--skoryk { --bg: #111214; --card: #1A1B1E; --ink: #F2EEE6; --mut: rgba(242, 238, 230, .55); --line: rgba(216, 177, 106, .26); --acc: #D8B16A; --new: rgba(216, 177, 106, .15); --r: 12px; }
.fd--horseclub { --bg: #18241D; --card: #203027; --ink: #EFE8D8; --mut: rgba(239, 232, 216, .65); --line: rgba(201, 164, 92, .28); --acc: #CCA864; --new: rgba(201, 164, 92, .16); --ff: Georgia, serif; --r: 20px; }
.fd--moresolnca { --bg: #fff; --card: #F2F7F5; --ink: #12302A; --mut: rgba(18, 48, 42, .69); --line: rgba(13, 92, 74, .16); --acc: #0D6B55; --new: rgba(13, 107, 85, .1); --ff: Georgia, serif; --r: 8px; }
.fd--king { --bg: #0B0B0C; --card: #151517; --ink: #F5F0E1; --mut: rgba(245, 240, 225, .55); --line: rgba(224, 184, 79, .24); --acc: #E9C25C; --new: rgba(233, 194, 92, .15); --r: 16px; }
.fd--ohmyzigi { --bg: #fff; --card: #FAF8F5; --ink: #1A1A1A; --mut: rgba(26, 26, 26, .63); --line: rgba(26, 26, 26, .12); --acc: #816540; --new: rgba(156, 122, 78, .1); --ff: Georgia, 'Times New Roman', serif; --r: 0; }
.fd--arena { --bg: #0A0A0A; --card: #141414; --ink: #F5F5F5; --mut: rgba(245, 245, 245, .55); --line: rgba(245, 197, 24, .24); --acc: #F5C518; --new: rgba(245, 197, 24, .14); --r: 0; }
.fd--terma { --bg: #F6F1E8; --card: #fff; --ink: #1C2433; --mut: rgba(28, 36, 51, .65); --line: rgba(28, 36, 51, .12); --acc: #2B6CB0; --new: rgba(43, 108, 176, .1); --ff: Georgia, serif; --r: 14px; }
.fd--aerodium { --bg: #0B2A6B; --card: #12357F; --ink: #F2F6FF; --mut: rgba(242, 246, 255, .62); --line: rgba(232, 62, 140, .3); --acc: #F68EC1; --new: rgba(240, 71, 155, .16); --r: 4px; }
.fd--carservice { --bg: #0E0E0E; --card: #181818; --ink: #F3F3F3; --mut: rgba(243, 243, 243, .55); --line: rgba(247, 181, 0, .25); --acc: #F7B500; --new: rgba(247, 181, 0, .14); --r: 0; }
.fd--izium { --bg: #fff; --card: #F7F6F3; --ink: #1E1E1E; --mut: rgba(30, 30, 30, .64); --line: rgba(30, 30, 30, .12); --acc: #A0531D; --new: rgba(217, 115, 43, .1); --ff: Georgia, serif; --r: 12px; }
/* інструменти */
.fd--leadfinder { --bg: #F7F8FC; --card: #fff; --ink: #1E2240; --mut: rgba(30, 34, 64, .65); --line: rgba(79, 70, 229, .14); --acc: #4F46E5; --new: rgba(79, 70, 229, .08); --r: 12px; }
.fd--leadbot { --bg: #17212B; --card: #1F2C39; --ink: #E9EEF3; --mut: rgba(233, 238, 243, .60); --line: rgba(95, 160, 230, .22); --acc: #71AAE9; --new: rgba(95, 160, 230, .14); --r: 12px; }
.fd--mockup { --bg: #F3EFE8; --card: #fff; --ink: #1F1B16; --mut: rgba(31, 27, 22, .63); --line: rgba(31, 27, 22, .12); --acc: #B5492E; --new: rgba(181, 73, 46, .08); --r: 4px; }
.fd--bpmn { --bg: #fff; --card: #FBFBFB; --ink: #222; --mut: rgba(34, 34, 34, .65); --line: rgba(34, 34, 34, .14); --acc: #C5381E; --new: rgba(225, 84, 58, .08); --r: 6px; }
.fd--pulse { --bg: #fff; --card: #F4F8F8; --ink: #13383D; --mut: rgba(19, 56, 61, .71); --line: rgba(13, 92, 99, .14); --acc: #0D5C63; --new: rgba(13, 92, 99, .08); --r: 16px; }
.fd--soccer { --bg: #000; --card: #050505; --ink: #39FF14; --mut: rgba(57, 255, 20, .6); --line: rgba(0, 220, 230, .45); --acc: #F5E400; --new: rgba(245, 228, 0, .12); --ff: 'Courier New', monospace; --ft: 'Courier New', monospace; --r: 0; }
.fd--ozvuchka { --bg: #fff; --card: #FFF8F3; --ink: #1E1E1E; --mut: rgba(30, 30, 30, .63); --line: rgba(232, 89, 12, .16); --acc: #B84609; --new: rgba(232, 89, 12, .08); --r: 8px; }
.fd--soccer .fd__card.is-new::after { color: #000; }
.fd--arena .fd__card.is-new::after, .fd--carservice .fd__card.is-new::after, .fd--king .fd__card.is-new::after, .fd--kolos .fd__card.is-new::after,
.fd--skoryk .fd__card.is-new::after, .fd--lawspectr .fd__card.is-new::after, .fd--horseclub .fd__card.is-new::after,
.fd--spartans .fd__card.is-new::after, .fd--glynar .fd__card.is-new::after, .fd--leadbot .fd__card.is-new::after, .fd--aerodium .fd__card.is-new::after { color: #111; }

/* ---------- розкладка: текст НАД знімком на всю ширину; нижче знімок і поруч адмінка ---------- */
.shot { align-items: start; row-gap: 20px; }
.shot .shot__text { grid-row: 1; grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; padding: 0; text-align: left; justify-self: stretch; }
.shot__head { grid-column: 1 / 6; }
.shot__head .shot__title { margin: 0; }
.shot__body { grid-column: 6 / 13; }
.shot__body .shot__sum { max-width: 68ch; margin: 0 0 10px; }
.shot__body .shot__metric { max-width: none; margin: 0 0 12px; }
.shot--b .shot__metric { margin-left: 0; }
.shot--b .shot__links, .shot--b .film__mark { justify-content: flex-start; }
.shot .fd { margin-top: 0; align-self: stretch; contain: size; }   /* номер·ніша·рік тепер над назвою, не над знімком */

/* ---------- групи робіт і межі між роботами (19.10: «між сайтами немає розділення, все в кашу») ---------- */
.films__list { display: block; }
.grp-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(8px, 2vh, 20px); }
.grp-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; font: 500 14px/1 var(--f-mark); color: var(--ink); text-decoration: none; border: 1px solid var(--ink); border-radius: 999px; transition: background-color .2s, color .2s; }
.grp-nav a:hover { background: var(--ink); color: var(--light); }
.grp { margin-top: clamp(64px, 10vh, 120px); }
.grp__hd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding-top: 20px; border-top: 3px solid var(--ink); margin-bottom: clamp(28px, 5vh, 52px); }
.grp__h { grid-column: 1 / 7; margin: 0; font: 700 clamp(28px, 3.4vw, 48px)/1.05 var(--f-disp); text-wrap: balance; }
.grp__p { grid-column: 7 / 13; margin: 0; color: var(--ink-2); text-wrap: pretty; }
/* кожна робота — окремий блок: тонка лінія зверху, номер·ніша·місто·рік над назвою, під ними опис, нижче знімок і адмінка */
.grp .shot { border-top: 1px solid var(--line); padding-top: clamp(24px, 4vh, 40px); }
.grp .shot + .shot { margin-top: clamp(56px, 9vh, 110px); }
.grp__hd + .shot { border-top: 0; padding-top: 0; }
.shot__meta { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0 0 8px; font: 400 13px/1.6 var(--f-mark); color: var(--ink-2); }
.shot__meta span + span::before { content: '·'; margin-right: 12px; }
.shot .shot__text { margin-bottom: 4px; }
.shot--a .film, .shot--c .film { grid-column: 1 / 9; grid-row: 2; }
.shot--a .fd, .shot--c .fd { grid-column: 9 / 13; grid-row: 2; }
.shot--b .fd { grid-column: 1 / 5; grid-row: 2; }
.shot--b .film { grid-column: 5 / 13; grid-row: 2; }

/* перший екран: адмінка KOLOS — окреме вікно поруч зі знімком, висота = знімок */
.fd--hero { grid-column: 9 / 13; grid-row: 2; margin-top: calc(clamp(28px, 5vh, 48px) + 31px); align-self: stretch; contain: size; }

@media (max-width: 1100px) {
  .film--hero { grid-column: 1 / 8; }
  .fd--hero { grid-column: 8 / 13; }
  .shot--a .film, .shot--c .film { grid-column: 1 / 8; }
  .shot--a .fd, .shot--c .fd { grid-column: 8 / 13; }
  .shot--b .fd { grid-column: 1 / 6; }
  .shot--b .film { grid-column: 6 / 13; }
  .shot__head { grid-column: 1 / 6; }
  .shot__body { grid-column: 6 / 13; }
}
@media (max-width: 860px) {
  .shot { align-items: stretch; }   /* інакше знімок стискався до ~2/3 ширини */
  .grp__hd { display: block; }
  .grp__p { margin-top: 8px; }
  .grp-nav a { min-height: 40px; padding: 0 13px; font-size: 13px; }
  /* відкрита заявка на телефоні розсуває панель — кнопка дії завжди видна без прокрутки всередині */
  .shot .fd.is-open, .fd--hero.is-open { height: auto; }
  .fd.is-open .fd__list { display: none; }
  .fd.is-open .fd__open { position: relative; top: auto !important; overflow: visible; }
  .shot .shot__text { order: 0; display: block; }
  .shot .film, .shot--b .film { order: 1; }
  .shot .fd { order: 2; margin-top: 0; height: 360px; align-self: auto; contain: none; }
  .shot__body { margin-top: 10px; }
  .fd--hero { height: 360px; margin-top: 16px; contain: none; }
}
@media (prefers-reduced-motion: reduce) { .fd__card { transition: none; } }

/* ---------- заявку можна відкрити ---------- */
.fd__card { cursor: pointer; }
.fd__card:hover { border-color: var(--acc); }
.fd__card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fd__card.is-work { border-color: var(--acc); }
.fd__card.is-done { opacity: .62; }
.fd__state { margin-left: 8px; font: 700 10px/1 var(--ff); font-style: normal; padding: 3px 6px; color: var(--bg); background: var(--acc); border-radius: calc(var(--r) * .5); white-space: nowrap; }
.fd__state:empty { display: none; }
/* список під відкритою заявкою не видно і не читається */
.fd.is-open .fd__list { visibility: hidden; }
.fd__open { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: auto; padding: 12px 14px 16px; background: var(--bg); border-top: 1px solid var(--line); }
.fd__back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; margin: 0 0 10px -4px; font: 600 13px/1 var(--ft); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); cursor: pointer; }
.fd__back:hover { border-color: var(--acc); }
.fd__ohead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fd__oname { margin: 0; font: 700 18px/1.2 var(--ff); color: var(--ink); }
.fd__otel { margin: 3px 0 0; font: 400 13px/1.3 var(--ft); color: var(--mut); }
.fd__oq { margin: 12px 0 0; padding: 10px 12px; font: 400 15px/1.4 var(--ft); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * .7); }
.fd__open .fd__dl { margin-top: 12px; font-size: 14px; gap: 4px 12px; }
.fd__osum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font: 400 13px/1.2 var(--ft); color: var(--mut); }
.fd__osum b { font: 800 22px/1 var(--ff); color: var(--acc); }
.fd__tl { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.fd__tl li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font: 400 13px/1.35 var(--ft); color: var(--ink); }
.fd__tl time { color: var(--mut); }
.fd__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fd__btn { min-height: 42px; padding: 0 16px; font: 700 14px/1 var(--ff); color: var(--bg); background: var(--acc); border: 0; border-radius: calc(var(--r) * .6); cursor: pointer; }
.fd__btn:hover { filter: brightness(1.08); }
.fd__chip { min-height: 38px; padding: 0 12px; font: 500 13px/1.2 var(--ft); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); cursor: pointer; text-align: left; }
.fd__chip:hover { border-color: var(--acc); }
.fd__done { margin: 14px 0 0; font: 700 15px/1.3 var(--ff); color: var(--acc); }
.fd__plus { display: inline-block; margin-left: 8px; font: 800 18px/1 var(--ff); color: var(--acc); }
.fd--soccer .fd__btn, .fd--arena .fd__btn, .fd--carservice .fd__btn, .fd--king .fd__btn, .fd--kolos .fd__btn, .fd--skoryk .fd__btn,
.fd--lawspectr .fd__btn, .fd--horseclub .fd__btn { color: #111; }
@media (prefers-reduced-motion: reduce) { .fd__open { scroll-behavior: auto; } }