/* FOX&fellows — sdílený základ. Tokeny, reset, header, footer, tým. */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:wght@300;400;500;800&family=Zalando+Sans+SemiExpanded:wght@300;400;500&family=Barlow+Semi+Condensed:wght@500&display=swap');

:root {
  --orange: #e96738;
  --ink: #3b3c42;
  --blue: #0066bb;
  --lightblue: #7ea0b7;
  --gray: #c6c6c6;
  --line: #d9d9d9;
  --bg: #ffffff;
  --font-x: 'Zalando Sans Expanded', sans-serif;
  --font-sx: 'Zalando Sans SemiExpanded', sans-serif;
  --font-bc: 'Barlow Semi Condensed', sans-serif;
  --pad: 50px;
  /* 2026-08-24 (Kristian: „stránka je moc malá, vlevo i vpravo je pruh, kde nic
     není"): osnova už není napevno 1194 px z Figmy. Do 1280 px se nemění vůbec
     nic (100% − 86px vyjde přesně 1194), nad tím pruh roste s oknem a nad
     1680 px se zastaví, aby řádky textu nebyly nekonečné. Na monitoru 1920 px
     tak zbývá po stranách 120 px místo původních 363 px. */
  --band: clamp(1194px, 100% - 86px, 1680px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  overflow-x: clip;
  font-family: var(--font-sx);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }

/* Osnova: procenta místo 100vw — 100vw v Safari zahrnuje posuvník a pravý
   okraj pak plave; % se počítá z šířky body a drží. */
.wrap {
  max-width: var(--band);
  /* 2026-08-18: blok byl posunutý 64 px vlevo od středu (margin-left … - 64px).
     Kvůli tomu menu nesedělo na šířku okna (vpravo zůstávala díra) a full-bleed
     karusely s calc(50% - 50vw) se rozjížděly doleva, takže je overflow-x: clip
     ořezával. Symetrické auto/auto to řeší na obou místech naráz. */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

h1, h2, h3 { font-family: var(--font-x); font-weight: 300; }
.section-title { font-size: 40px; line-height: 1.1; font-weight: 300; }
.section-title--orange { color: var(--orange); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
}
.site-header__in {
  max-width: var(--band);
  margin-left: auto;
  margin-right: auto;
  padding: 24px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* logo se nesmí nikdy zmenšovat ani menu lámat do řádků */
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { height: 28px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 4.3vw, 52px); white-space: nowrap; }
.site-nav a {
  font-family: var(--font-x); font-weight: 500; font-size: 16px; color: var(--ink);
  transition: color .2s;
}
@media (min-width: 701px) and (max-width: 900px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 14px; }
}
.site-nav a:hover { color: var(--orange); }
.site-nav__media {
  background: var(--orange); color: #fff !important; border-radius: 8px;
  padding: 4px 8px; font-weight: 500;
}
.site-nav__media b { color: #fff; font-weight: 800; }
.site-nav__media:hover { opacity: .85; }
.site-nav__flag img { height: 20px; width: 30px; object-fit: cover; display: block; }
.site-header__burger { display: none; flex-direction: column; gap: 6px; padding: 4px; }
.site-header__burger span { width: 28px; height: 2px; background: var(--ink); display: block; }

/* ---------- Mobilní menu overlay ----------
   Dle nahrávky prototypu (mobile view fox.mov): mražený poloprůhledný panel
   jen přes horní část stránky, obsah pod ním zůstává vidět. Malé položky
   uprostřed, velké mezery. */
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: none; flex-direction: column; align-items: center;
  padding: 24px 20px 92px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__links {
  display: flex; flex-direction: column; align-items: center; gap: 46px;
  padding-top: 34px;
}
.mobile-menu__links a { font-family: var(--font-x); font-weight: 500; font-size: 17px; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; overflow: hidden; }
/* Ticker = dva pruhy v jednom SVG (horní 63 px, spodní 109 px z 172 px).
   Každý pruh má vlastní dráhu: spodní jede o 20 % rychleji (40 s vs. 33 s). */
.site-footer__ticker { --tickerH: 172px; overflow: hidden; }
.site-footer__ticker-row { overflow: hidden; }
.site-footer__ticker-row--a { height: calc(var(--tickerH) * .3663); }
.site-footer__ticker-row--b { height: calc(var(--tickerH) * .6337); }
.site-footer__ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.site-footer__ticker-track img { height: var(--tickerH); width: auto; max-width: none; }
.site-footer__ticker-row--b .site-footer__ticker-track { animation-duration: 33s; animation-delay: -11s; }
.site-footer__ticker-row--b img { margin-top: calc(var(--tickerH) * -.3663); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.site-footer__bar {
  max-width: var(--band);
  margin-left: auto;
  margin-right: auto;
  padding: 28px var(--pad) 40px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.site-footer__bar span { font-family: var(--font-sx); font-size: 16px; line-height: 1.5; color: #fff; }
.site-footer__claim { font-family: var(--font-x); font-weight: 800; font-size: 16px; }

/* ---------- Tým (HOME + O NÁS) ---------- */
.team-section { padding-top: 20px; padding-bottom: 80px; }
.team-section .section-title { margin-bottom: 40px; }
.team-title { font-family: var(--font-x); font-weight: 500; font-size: 64px; line-height: .94; color: var(--orange); margin-bottom: 28px; }
.team-scroll {
  /* jedno cislo pro VSECHNY mezery mezi kartami tymu: uvnitr role i mezi
     rolemi. Kdyz se zmeni tady, zmeni se vsude stejne.
     28. 8. (Kristian: „mezera tam ma byt, ale mala"): 20 -> 10 px. */
  --team-gap: 10px;
  display: flex; gap: var(--team-gap); overflow-x: auto;
  /* svisle NIKDY nerolovat: fotky přesahují pod karty (ořezané clip-pathem)
     a auto by dovolilo odrolovat jména a hlavy uvnitř karuselu */
  overflow-y: hidden;
  scrollbar-width: none; padding-bottom: 8px;
}
.team-scroll::-webkit-scrollbar { display: none; }
/* 2026-08-30 (Kristian: „mezery pořád nejsou stejné", Safari): karta měla
   jen `flex: 0 0 566px`. WebKit ale při počítání šířky obalu role nebere
   flex-basis, nýbrž nejširší možný obsah karty, takže obal role vyšel o
   377 až 764 px širší než karty v něm. Ten přebytek zůstal viset za poslední
   kartou role a vypadal jako obří mezera mezi Core Teamem a AI & Digital,
   zatímco jinde mezera zmizela. Chrome to počítá správně, proto se to
   neprojevovalo v testech. Explicitní `width` WebKitu tu úvahu vezme.
   Ověřeno v obou prohlížečích: 10 px mezi všemi kartami. */
.team-cell { flex: none; width: 566px; }

/* Nadpisy sekcí týmu se drží levého okraje (zadání od Jarka 27. 8.).
   Karty jedné sekce jsou v jednom obalu a nadpis je v něm jediný a přilepený,
   takže jede s okrajem, dokud po něm neprojede celá sekce. */
.team-group { flex: 0 0 auto; display: flex; flex-direction: column; }
.team-group__cells { display: flex; gap: var(--team-gap); }
.team-label {
  font-family: var(--font-x); font-weight: 800; font-size: 21px; line-height: 25px;
  /* 28. 8.: hlavy prectahuji az 26 px nad vrsek karty (clip-path), pri 14 px
     zajizdely do nazvu role. 34 px = nejvyssi hlava + 8 px vzduchu. */
  min-height: 25px; margin-bottom: 34px; white-space: nowrap;
  /* 2026-08-30 (Kristian: „mezi Core Teamem a AI & Digital je neskutečně
     velká mezera"): nadpis se dřív lepil jen doleva. Sekce Core Team je přes
     3400 px široká, takže mezi jejím nadpisem a nadpisem AI & Digital zůstával
     přes 3000 px prázdný pruh. S `right: 0` čeká nadpis, který je teprve před
     námi, u pravého okraje a přijede až se svou sekcí. V okně jsou tak vždy
     dva nadpisy u obou krajů, nikdy obří prázdno mezi nimi. */
  position: sticky; left: 0; right: 0; align-self: flex-start;
  width: max-content; max-width: 100%;
}
.team-card {
  display: flex; justify-content: space-between; background: var(--gray);
  height: 499px;
}
.team-card__img { flex: 0 0 270px; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.team-card__body { flex: 0 0 280px; padding: 16px 16px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.team-card__name { font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px; }
.team-card__bio { font-size: 14px; line-height: 21px; white-space: pre-line; }

/* nad 1440 px roste nadpis týmu spolu s pruhem (HOME i O NÁS stejně) */
@media (min-width: 1441px) {
  .team-title { font-size: clamp(64px, 4.4vw, 76px); line-height: 1.02; }
}

/* ---------- Šipky karuselů ---------- */
.row-arrows { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.row-arrows button { pointer-events: auto; opacity: .55; transition: opacity .2s; line-height: 0; }
.row-arrows button svg circle { fill: rgba(255, 255, 255, .72); }
.row-arrows button:hover { opacity: .9; }
.row-arrows svg { width: 47px; height: 47px; }

/* ---------- Karusely ----------
   2026-08-24 (Kristian: „to rolování ať nejede, ať to nevidíš strašně daleko
   vpravo, musí to být zarovnaný a při scrollování se to schová"): karusely
   dřív jely přes celou šířku okna (width: 100vw + margin: calc(50% - 50vw)).
   Na velkém monitoru to vypadalo, že karty pokračují do nekonečna, zatímco
   text vedle nich seděl v úzkém pruhu. Nově drží stejný pruh jako zbytek
   stránky a karta, která z pruhu vyjede, se schová za jeho okrajem.
   Přes celou šířku zůstává jen mobil (tak je to ve Figmě Mobile 6) a spodní
   lišta s rolující grafikou. */
.team-scroll, .spec-scroll, .media-scroll {
  scroll-snap-type: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.team-scroll.is-dragging, .spec-scroll.is-dragging, .media-scroll.is-dragging {
  cursor: grabbing; scroll-behavior: auto; user-select: none;
}

/* ---------- Jemné odhalení při scrollu ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Kruhové koláže (Figma vzhled: písmena + modrá) ---------- */
.collage-circle {
  position: relative; border-radius: 50%; overflow: hidden; isolation: isolate;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
}

/* šipky: skryté, když není kam rolovat */
.row-arrows button.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Mikrointerakce ---------- */
.team-card__img img { transition: filter .45s ease; }
.team-card:hover .team-card__img img { filter: grayscale(0); }
.collage-circle img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.spec-card:hover .collage-circle img, .servis:hover .collage-circle img { transform: scale(1.05); }
.media-card img { transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .2s; }
.media-card:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .site-footer__ticker-track { animation: none; }
  html { scroll-behavior: auto; }
  .team-scroll, .spec-scroll, .media-scroll { scroll-behavior: auto; }
}

/* ---------- Zpět Home odkaz ---------- */
.back-home {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-x); font-weight: 500; font-size: 16px; color: var(--ink);
  padding: 30px 0;
}
.back-home svg { stroke: var(--orange); }
.back-home:hover { color: var(--orange); }

/* ---------- Aktivní položka menu ---------- */
.site-nav a.is-active, .mobile-menu__links a.is-active { color: var(--orange); }

/* ---------- Kotvy: odsazení pod sticky headerem ---------- */
[id] { scroll-margin-top: 90px; }

/* ---------- Tým: pozice fotek 1:1 podle Figmy, vázané na soubor fotky (přežije skrytí i přeskupení lidí) ---------- */
/* Fotky jsou sirsi nez svuj ram a jsou orezane clip-pathem. Vodorovne se ale
   pri nekterych vyrezech dostaly az za levy okraj karty a prekryly bilou
   mezeru mezi kartami, takze dve karty vypadaly slepene (Kristian 2026-08-30:
   „Radim Ochvat a Jitka Havrdova mate spojene"). Vodorovne se proto rezou o
   ram, svisle prectahuji dal, aby hlavy smely nad sedou kartu. */
.team-card__img { position: relative; overflow-x: clip; overflow-y: visible; }
.team-card__img img { position: absolute; object-fit: fill; max-width: none; }
.team-card__img img[src*="person-01"] { width: 154.81%; height: 125.64%; left: -28.12%; top: -21.41%; }
.team-card__img img[src*="person-02"] { width: 155.93%; height: 126.54%; left: -31.09%; top: -26.6%; }
.team-card__img img[src*="person-03"] { width: 101.85%; height: 111.21%; left: -2.65%; top: -6.47%; }
.team-card__img img[src*="person-04"] { width: 171.3%; height: 139.01%; left: -43.7%; top: -27.83%; }
.team-card__img img[src*="person-05"] { width: 101.85%; height: 111.46%; left: 0.49%; top: -6.12%; }
.team-card__img img[src*="person-06"] { width: 101.36%; height: 110.92%; left: 0.49%; top: -5.58%; }
.team-card__img img[src*="person-07"] { width: 158.54%; height: 128.66%; left: -37.04%; top: -25.79%; }
.team-card__img img[src*="person-08"] { width: 158.54%; height: 128.66%; left: -29.86%; top: -24.84%; }
.team-card__img img[src*="person-09"] { width: 150.23%; height: 121.91%; left: -27.22%; top: -18.1%; }
.team-card__img img[src*="person-10"] { width: 99.27%; height: 106.01%; left: -0.19%; top: -6.01%; }
/* AI & Digital (11-13): ořezané průhledné PNG, jen vycentrovat a nechat hlavu nad kartou */
.team-card__img img[src*="person-11"] { width: 106.6%; height: 102%; left: -3.3%; top: -2%; }
.team-card__img img[src*="person-12"] { width: 94.63%; height: 104.5%; left: 2.69%; top: -4.51%; }
.team-card__img img[src*="person-13"] { width: 96.57%; height: 104.5%; left: 1.71%; top: -4.51%; }
/* Petr Zháňal (15. 9. 2026, AI & Advisory): fotka od Jarky měla bílé pozadí
   a jiný poměr stran, proto se karta rozjela. Nová fotka je vyříznutá na
   průhledné pozadí a do rámu karty posazená už v souboru, takže tu stačí
   jedno pravidlo a žádný clip-path. */
.team-card__img img[src*="person-14"] { width: 100%; height: 102%; left: 0; top: -2%; }
/* ořez fotky přesně na figma výřez (hlavy smí nad šedou kartu) */
.team-card__img img[src*="person-01"] { clip-path: inset(12.89% 17.24% 3.37% 16.97%); }
.team-card__img img[src*="person-02"] { clip-path: inset(16.9% 15.93% 0% 18.75%); }
.team-card__img img[src*="person-03"] { clip-path: inset(1.13% 0% 4.26% 0.79%); }
.team-card__img img[src*="person-04"] { clip-path: inset(16.27% 16.11% 8.04% 24.43%); }
.team-card__img img[src*="person-05"] { clip-path: inset(0.81% 2.3% 4.79% 0%); }
.team-card__img img[src*="person-06"] { clip-path: inset(0.34% 1.83% 4.81% 0%); }
.team-card__img img[src*="person-07"] { clip-path: inset(16% 13.56% 2.23% 22.19%); }
.team-card__img img[src*="person-08"] { clip-path: inset(15.26% 18.09% 2.96% 17.67%); }
.team-card__img img[src*="person-09"] { clip-path: inset(10.57% 15.31% 3.13% 16.89%); }
.team-card__img img[src*="person-10"] { clip-path: inset(0.76% 0% 0% 0%); }
.team-card__img img[src*="person-11"] { clip-path: inset(0% 3.09% 0% 3.09%); }
.team-card__list { font-size: 14px; line-height: 21px; padding-left: 14px; list-style: disc; }
.team-card__list li { margin-bottom: 2px; }

/* ---------- Kruhy služeb (živá Figma kompozice) ----------
   Ověřeno pixelově proti renderu z Figmy: fotka s modrým filtrem (SCREEN
   80 %, jako hero) vyplňuje celý kruh a BÍLÁ PÍSMENA leží navrchu. Fotka
   stojí, hýbe se jen vrstva písmen (mask-position bílé vrstvy).
   Fotku každé karty nastavují proměnné --card-img/--card-size/--card-pos. */
/* Kristian 30/7: fotka s filtrem přes celý kruh (ať obrázek vynikne),
   navrchu jen decentní bílá písmena (dva řádky), která jedou; fotka stojí. */
.collage-mask { background: #fff; }

/* 2026-08-30 (Kristian: „ať se ta barva v kolečkách nemění na bledou, ať je
   modrá; Magda to vidí bíle").

   Vývoj toho místa a proč to teď vypadá takhle:
   1. Původně tu ležela bílá deska s dírami ve tvaru písmen, jeden SVG obrázek,
      uvnitř kterého ty díry vyřezávala SVG maska. Chrome i Safari takovou
      masku občas při překreslení zahodí a nakreslí jen ten bílý obdélník.
      Celé kolečko pak zbělalo na 85 %. Naměřená barva ze screenshotu
      (236, 241, 246) na to sedla přesně.
   2. Pak jsem to zkusil obráceně: spodní vrstva fotka zesvětlená bílou, horní
      ta samá fotka v plné síle oříznutá maskou z písmen. Vypadalo to správně,
      ale kdyby se ta maska nenačetla, zbyla by zase bledá vrstva.
   3. Teď je deska obyčejný PNG obrázek: bílý, s průhlednými dírami po
      písmenech. Žádná maska, žádné SVG, není co zahodit. A hlavně: když se ten
      obrázek nenačte, nezobrazí se nic navíc a kolečko zůstane sytě modré.
      Bílý flek už nemá jak vzniknout. */
.collage-mask__photo {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 102, 187, .8), rgba(0, 102, 187, .8)),
    var(--card-img, url(../assets/img/service-photo.jpg));
  background-blend-mode: screen, normal;
  background-size: var(--card-size, 211.1% 209.6%);
  background-position: var(--card-pos, 53.4% 26.1%);
  background-repeat: no-repeat;
}
.collage-mask__letters {
  position: absolute; inset: 0;
  opacity: .85;
  background-image: url(../assets/svg/servicePlate.png?v=2);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 50% 0;
  animation: plate-drift 18s ease-in-out infinite alternate;   /* odsouhlaseno: pomaleji, klidneji */
}
@keyframes plate-drift {
  from { background-position-x: 44%; }
  to { background-position-x: 56%; }
}
}

/* Hero kruh: živá verze Figma kompozice.
   hero-team.jpg = celá týmová fotka BEZ filtru; modrá se míchá až v CSS
   (viz .hero-live__photo). Fotka jede ze strany na stranu, takže postupně
   ukáže celý tým vč. pravé části. Písmena jsou vlastní vrstva a houpou se
   v protipohybu jako ve Figma prototypu. */
.hero-live { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.hero-live__photo {
  position: absolute; inset: 0;
  /* 2026-08-30 (Kristian: „vyměň tu fotku za tu bez černé čmouhy, barvy nech"):
     dřív tu byl soubor hero-wide.jpg, do kterého byl modrý filtr zapečený.
     Tmavá trička se tím vytáhla do modré a při druhém uložení do JPEGu v nich
     vznikly skvrny, ta „čmouha" na pánovi v černém. Nová fotka je proto bez
     filtru a modrá se míchá až tady, přesně stejným způsobem jako v kolečkách
     (vrstva #0066bb, blend screen, krytí 80 %). Výsledná barva vyjde na
     setiny stejně: R'=R, G'=81,6+0,68G, B'=149,6+0,413B. */
  background-image:
    linear-gradient(rgba(0, 102, 187, .8), rgba(0, 102, 187, .8)),
    url(../assets/img/hero-team.jpg?v=3);
  background-blend-mode: screen, normal;
  background-repeat: no-repeat;
  background-size: auto 143%;   /* výřez odpovídá schválenému kruhu (okno 70 % výšky fotky) */
  background-position: 0% 25%;
  /* Dráha jede od kraje ke kraji (0 % a 100 %), aby se postupně ukázal celý
     tým vč. krajních lidí. Výřez fotky je na tým těsný, takže se nezajíždí do
     prázdna vedle skupinky.
     2026-08-30 (Kristian: „zrychli ten hero, ať to není tak pomalý"): 40 -> 20 s. */
  animation: hero-pan-x 20s ease-in-out infinite alternate;
}
@keyframes hero-pan-x {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}
/* Bílá deska s dírami písmen: písmena vykresluje fotka projíždějící pod ní.
   Deska má široké bílé okraje (viewBox -300..931), takže její houpání
   nikdy neodkryje kraj. */
/* Řady písmen se hýbou uvnitř SVG samy: horní dvě doprava (rychleji),
   dolní dvě doleva (pomaleji). Deska sama proto stojí. */
.hero-live__letters {
  position: absolute; left: -47.5%; top: -15.9%; width: 195.1%; height: 131.7%;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .collage-mask__photo, .collage-mask__letters { animation: none; }
  .hero-live__photo { animation: none; background-position-x: 30%; }
  .hero-live__letters { animation: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  /* Figma Mobile 6 = plátno 440 px s okrajem 10 px; texty se pod 440 px
     zmenšují úměrně šířce okna (na iPhonu byly proti Figmě moc velké). */
  :root { --pad: 12px; }
  body { font-size: clamp(15px, 4.09vw, 18px); }
  /* dle Figmy zůstává v hlavičce chip FXFMEDIA vedle burgeru */
  .site-header__in { gap: 10px; }
  .site-header__logo img { height: clamp(20px, 6.4vw, 28px); }
  .site-nav { display: flex; margin-left: auto; margin-right: 6px; }
  .site-nav a { display: none; }
  .site-nav a.site-nav__media { display: inline-block; }
  .site-header__burger { display: flex; }
  .site-footer__ticker { --tickerH: 90px; }
  .site-footer__bar {
    flex-direction: column; align-items: flex-start; gap: 15px;
    padding-top: 30px; padding-bottom: 38px;
  }
  /* Na mobilu karusely zůstávají přes celou šířku okna (tak je to ve Figmě
     Mobile 6): karty začínají na okraji pruhu a rolují až k hraně displeje. */
  .team-scroll, .spec-scroll, .media-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }
  /* Tým na mobilu, 2026-08-24 (Kristian: „ať se ten text dá dolů a člověk si
     tam může jít dolů"). Dřív byla karta širší než displej (120vw) a dlouhý
     text se dočítal posunem doprava. Figma Mobile 6, komponenta PERSON 1 MOB,
     chtěla něco jiného: karta 361 z 440 px se na displej vejde celá, uvnitř je
     vlevo fotka a vpravo textový sloupec pojmenovaný SCROLL1 s šedým
     přechodem dole. Text se tedy roluje SVISLE uvnitř svého sloupce.
     Fotka drží desktopový poměr 270:499, aby figmové výřezy platily 1:1 a
     všichni lidé měli stejné měřítko; z toho se počítá výška karty.
     Sdíleno HOME + O NÁS. */
  .team-section { padding-top: 48px; padding-bottom: 40px; }
  .team-title { font-size: clamp(40px, 10.9vw, 48px); line-height: 1; margin-bottom: 40px; }
  .team-scroll { padding-left: var(--pad); gap: var(--team-gap); }
  /* 82vw = poměr 361/440 z Figmy, vedle vždy kouká kus další karty */
  .team-cell {
    /* explicitní šířka kvůli WebKitu, viz komentář u desktopové verze */
    flex: none; width: 82vw; max-width: 82vw;
    display: flex; flex-direction: column;
  }
  /* na mobilu hlavy prectahuji 17 px, staci 24 px */
  .team-label { font-size: clamp(18px, 4.77vw, 21px); margin-bottom: 24px; left: var(--pad); }
  /* fotka = 55,7 % karty (201/361 z Figmy), výška karty z poměru fotky 270:499 */
  .team-card { flex: 0 0 auto; height: calc(82vw * .557 * 499 / 270); min-height: 0; }
  .team-card__img { flex: 0 0 55.7%; }
  .team-card__body {
    flex: 1 1 0; min-width: 0; padding: 10px 10px 14px 10px; gap: 8px;
    /* SCROLL1 z Figmy: dlouhý životopis se dočte posunem dolů uvnitř sloupce */
    overflow-y: auto; overscroll-behavior-y: contain;
    scrollbar-width: none;
    /* Rectangle 7 z Figmy: přechod dole říká, že text pokračuje níž */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  }
  .team-card__body::-webkit-scrollbar { display: none; }
  .team-card__name { font-size: clamp(19px, 4.9vw, 24px); line-height: 1.1; }
  .team-card__bio { font-size: clamp(12px, 2.95vw, 13px); line-height: 1.38; }
  .team-card__list { font-size: clamp(12px, 2.95vw, 13px); line-height: 1.38; padding-left: 15px; }
  .row-arrows--team { display: none; }
}

/* ---------- Kruhy: fotky jednotlivych karet (generovano z Figmy) ---------- */
/* hodnoty nafitovane pixelove proti renderum z Figmy (fit.json) */
.collage-mask--spec-p1 { --card-img: url(../assets/img/spec-reputation-management.jpg); --card-size: 142.86% 142.86%; --card-pos: 46.67% 26.67%; }
.collage-mask--spec-p2 { --card-img: url(../assets/img/spec-audit-komunikace.jpg); --card-size: 314.43% 209.64%; --card-pos: 51.63% 26.06%; }
.collage-mask--spec-p3 { --card-img: url(../assets/img/spec-krizova-komunikace.jpg); --card-size: 314.43% 209.64%; --card-pos: 74.95% 69.06%; }
.collage-mask--spec-p4 { --card-img: url(../assets/img/spec-video-foto.jpg); --card-size: 114.29% 171.41%; --card-pos: 60.0% 40.01%; }
.collage-mask--spec-p5 { --card-img: url(../assets/img/spec-korporatni-identita.jpg); --card-size: 179.68% 101.07%; --card-pos: 49.3% -0.0%; }
.collage-mask--spec-s1 { --card-img: url(../assets/img/prod-medialni-trenink.jpg); --card-size: 118.57% 177.84%; --card-pos: 100.0% 49.56%; }
.collage-mask--spec-s2 { --card-img: url(../assets/img/prod-medialni-akademie.jpg); --card-size: 116.07% 206.35%; --card-pos: 97.78% 45.67%; }
.collage-mask--spec-s3 { --card-img: url(../assets/img/prod-akce-na-miru.jpg); --card-size: 189.2% 126.07%; --card-pos: 61.66% 82.19%; }
.collage-mask--spec-s4 { --card-img: url(../assets/img/prod-workshopy-pro-start-upy.jpg); --card-size: 183.75% 122.5%; --card-pos: 60.55% 3.17%; }
.collage-mask--spec-s5 { --card-img: url(../assets/img/prod-csr.jpg); --card-size: 197.65% 131.79%; --card-pos: 65.1% 42.7%; }
.collage-mask--spec-s6 { --card-img: url(../assets/img/prod-workshop-obchodnich-dovednosti.jpg); --card-size: 205.15% 136.79%; --card-pos: 64.53% 71.84%; }
.collage-mask--svc-1 { --card-img: url(../assets/img/svc-1.jpg); --card-size: 180.36% 101.47%; --card-pos: 8.89% 48.44%; }
.collage-mask--svc-2 { --card-img: url(../assets/img/svc-2.jpg); --card-size: 106.07% 188.6%; --card-pos: 47.06% 49.18%; }
.collage-mask--svc-3 { --card-img: url(../assets/img/svc-3.jpg); --card-size: 150.31% 100.0%; --card-pos: 51.11% 50.0%; }
.collage-mask--svc-4 { --card-img: url(../assets/img/svc-4.jpg); --card-size: 156.95% 104.64%; --card-pos: 81.53% 30.77%; }
.collage-mask--svc-5 { --card-img: url(../assets/img/svc-5.jpg); --card-size: 178.21% 100.25%; --card-pos: 73.06% 50.0%; }

/* ---------- Kruhy karuselu: fotky z Figmy (frame Page HOME 2491:19290, 26. 8. 2026) ----------
   Jarek doplnil chybějící fotky na začátek obou karuselů. Hodnoty výřezu jsou
   spočítané přímo z Figma fills (scaleMode FILL = cover uvnitř obdélníku,
   STRETCH = crop podle imageTransform), ne odhadem. Postup ověřen proti dřívějším
   ručně nafitovaným kruhům, sedí na setiny procenta. */
.collage-mask--spec-socialni-site { --card-img: url(../assets/img/spec-socialni-site.jpg); --card-size: 135.0% 180.8%; --card-pos: 34.89% 12.92%; }
.collage-mask--spec-ai-online { --card-img: url(../assets/img/spec-ai-online.jpg); --card-size: 135.0% 180.8%; --card-pos: 43.36% 41.15%; }
.collage-mask--spec-media-na-miru { --card-img: url(../assets/img/spec-media-na-miru.jpg); --card-size: 135.0% 180.8%; --card-pos: 46.7% 46.36%; }
.collage-mask--spec-advertising-a-kampane { --card-img: url(../assets/img/spec-advertising-a-kampane.jpg); --card-size: 152.25% 203.9%; --card-pos: 52.37% 36.02%; }
.collage-mask--spec-networking-a-event-management { --card-img: url(../assets/img/spec-networking-a-event-management.jpg); --card-size: 105.71% 141.99%; --card-pos: 25.0% 42.79%; }
.collage-mask--spec-poradenstvi { --card-img: url(../assets/img/spec-poradenstvi.jpg); --card-size: 153.51% 205.6%; --card-pos: 46.13% 46.0%; }
.collage-mask--spec-reputation-management { --card-img: url(../assets/img/spec-reputation-management.jpg); --card-size: 142.86% 142.86%; --card-pos: 46.67% 26.25%; }
.collage-mask--spec-audit-komunikace { --card-img: url(../assets/img/spec-audit-komunikace.jpg); --card-size: 314.43% 209.64%; --card-pos: 51.75% 26.06%; }
.collage-mask--spec-krizova-komunikace { --card-img: url(../assets/img/spec-krizova-komunikace.jpg); --card-size: 314.43% 209.64%; --card-pos: 75.07% 69.38%; }
.collage-mask--spec-video-foto { --card-img: url(../assets/img/spec-video-foto.jpg); --card-size: 114.29% 171.41%; --card-pos: 62.5% 40.25%; }
.collage-mask--spec-korporatni-identita { --card-img: url(../assets/img/spec-korporatni-identita.jpg); --card-size: 179.68% 101.07%; --card-pos: 48.88% -0.0%; }
.collage-mask--prod-vykonnostni-kampane { --card-img: url(../assets/img/prod-vykonnostni-kampane.jpg); --card-size: 103.14% 138.81%; --card-pos: 88.64% 50.0%; }
.collage-mask--prod-geo-seo { --card-img: url(../assets/img/prod-geo-seo.jpg); --card-size: 101.69% 136.19%; --card-pos: 89.58% 3.76%; }
.collage-mask--prod-medialni-trenink { --card-img: url(../assets/img/prod-medialni-trenink.jpg); --card-size: 118.57% 177.84%; --card-pos: 98.08% 50.0%; }
.collage-mask--prod-medialni-akademie { --card-img: url(../assets/img/prod-medialni-akademie.jpg); --card-size: 116.07% 206.35%; --card-pos: 95.56% 45.47%; }
.collage-mask--prod-akce-na-miru { --card-img: url(../assets/img/prod-akce-na-miru.jpg); --card-size: 189.2% 126.07%; --card-pos: 61.81% 82.19%; }
.collage-mask--prod-csr { --card-img: url(../assets/img/prod-csr.jpg); --card-size: 197.65% 131.79%; --card-pos: 64.99% 42.7%; }
.collage-mask--prod-workshopy-pro-start-upy { --card-img: url(../assets/img/prod-workshopy-pro-start-upy.jpg); --card-size: 183.75% 122.5%; --card-pos: 60.45% 3.17%; }
.collage-mask--prod-workshop-obchodnich-dovednosti { --card-img: url(../assets/img/prod-workshop-obchodnich-dovednosti.jpg); --card-size: 205.15% 136.79%; --card-pos: 64.43% 71.84%; }

/* Kristian 26. 8.: „ty obrázky jsou moc bledé, ať vypadají jako minule."
   Tři kolečka měla ve Figmě široký výřez, takže do nich lezlo hodně nebe
   a oken. Přes modrý filtr to vyšlo vybledle. Výřez je proto přiblížený
   na hlavní motiv, kompozice zůstává. Grafický design má vlastní třídu,
   aby se nezměnil stejný kruh na stránce Služby. */

/* --- Výzva k akci (tlačítka) --------------------------------------------
   Do 5. 9. 2026 web neměl jediné tlačítko a kontakt byl jen výpis údajů.
   Magdaléna 5. 9.: obchodníkovi na úvodní stránce chybí „Pojďme se potkat".
   Tvar je pilulka v oranžové, ghost varianta jen s obrysem pro druhou akci. */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-x); font-weight: 500; font-size: 16px; line-height: 1;
  padding: 17px 28px; border-radius: 999px;
  background: var(--orange); color: #fff;
  transition: background .2s ease;
}
.cta:hover { background: #d4552a; }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta svg { flex: none; }
.cta--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.cta--ghost:hover { background: #f4f4f4; box-shadow: inset 0 0 0 2px var(--gray); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Kontakt v horním menu jako tlačítko, aby výzva zůstala na očích celý scroll. */
.site-nav a.site-nav__cta,
.intro__links a.site-nav__cta {
  background: var(--orange); color: #fff;
  padding: 11px 22px; border-radius: 999px;
  transition: background .2s ease;
}
.site-nav a.site-nav__cta:hover,
.intro__links a.site-nav__cta:hover { background: #d4552a; color: #fff; }

@media (max-width: 700px) {
  .cta { font-size: 15px; padding: 15px 24px; }
  /* Ostatní položky menu na mobilu schovává burger, tlačítko zůstává. */
  .site-nav a.site-nav__cta { display: inline-flex; font-size: 13px; padding: 9px 16px; }
}

/* ---------- Cookies: lišta a odkazy v patičce ----------
   23. 9. 2026 (Magda a Jarek): web má mít lištu se souhlasem a stránku
   s informacemi o cookies. Lištu i odkazy v patičce staví main.js, aby se
   nemusely vkládat do každé stránky zvlášť. Souhlas se pamatuje v prohlížeči
   (localStorage), takže žádná cookie nevzniká, dokud ji člověk nepovolí. */
.cookie-bar {
  /* výš než intro opona (z-index 200) i mobilní menu (100) */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  padding: 0 16px 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.cookie-bar__in {
  pointer-events: auto;
  width: 100%; max-width: 980px;
  background: var(--ink); color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 26px;
}
.cookie-bar__text { font-size: 16px; line-height: 1.55; }
.cookie-bar__text b { font-family: var(--font-x); font-weight: 500; display: block; margin-bottom: 4px; }
.cookie-bar__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__text a:hover { color: var(--orange); }
.cookie-bar__akce { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cookie-bar__btn {
  font-family: var(--font-x); font-weight: 500; font-size: 15px;
  border-radius: 8px; padding: 11px 22px; white-space: nowrap;
  transition: background .2s, color .2s, opacity .2s;
}
.cookie-bar__btn--ano { background: var(--orange); color: #fff; }
.cookie-bar__btn--ano:hover { opacity: .85; }
.cookie-bar__btn--ne { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.cookie-bar__btn--ne:hover { background: rgba(255, 255, 255, .12); }
/* Lišta najede zespodu, ale jen když si to člověk nevypnul v systému. */
.cookie-bar__in { animation: cookie-bar-in .35s ease-out both; }
@keyframes cookie-bar-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cookie-bar__in { animation: none; } }

@media (max-width: 760px) {
  .cookie-bar { padding: 0 12px 12px; }
  .cookie-bar__in { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .cookie-bar__akce { justify-content: stretch; }
  .cookie-bar__btn { flex: 1; text-align: center; }
}

/* Odkazy pod patičkou: informace o cookies a změna souhlasu. Statement slibuje
   odkaz „Souhlas s použitím cookies" vpravo dole na každé stránce. */
.site-footer__legal {
  max-width: var(--band);
  margin-left: auto; margin-right: auto;
  padding: 0 var(--pad) 32px;
  display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
}
.site-footer__legal a, .site-footer__legal button {
  font-family: var(--font-sx); font-size: 15px; color: rgba(255, 255, 255, .8);
  text-decoration: underline; text-underline-offset: 3px;
}
.site-footer__legal a:hover, .site-footer__legal button:hover { color: var(--orange); }
@media (max-width: 700px) {
  .site-footer__legal { justify-content: flex-start; padding-bottom: 28px; gap: 16px; }
}