/* Alternativa G (260930): F1 „Dvě scény“ s přestavěnou horní částí, vývojová verze úvodní stránky.
   Načítá se po spolecne.css a e-spolecne.css. Vznikla kopií f-spolecne.css; F1 a F2 zůstávají beze
   změny k porovnání, proto G nesdílí jejich styl.
   Změny proti F1 (DF 260930):
   - jedna šířka sloupce (--sloupec) pro úvod, pruh pod titulkem i oba bloky nabídky; asymetrii nese
     strana, ne velikost: oblast 1 vlevo přes portrét, oblast 2 zrcadlově vpravo přes sál;
   - pruh pod titulkem nese mapu nabídky „X přes lidi“ místo faktů z životopisu;
   - oba bloky nabídky mají stejné ouško s číslem 1 a 2 a stejnou stavbu (dva směry vedle sebe);
   - pruh a blok oblasti 1 mají hlubokou šeď ze stínu na zdi za portrétem (#303644, změřeno na fotce),
     ne inkoust; stejná šeď nese pás „Součást vašeho týmu“ u spolupráce;
   - kontakt v úvodu jen jako ikony. */
:root {
  --papir: #ECEEF0;             /* základ mezi jevišti: neutrální světlá šeď */
  --plocha: #DDE1E5;
  --bila: #F8F9FA;              /* světlé bloky */
  --inkoust: #15161A;
  --text2: #34373E;
  --tlumene: #5C6069;
  --vlasec: #D2D6DB;
  --tma: #15161A;               /* inkoustové plochy: pás workshopů, blok referencí */
  --tma-text: #F2F2EF;
  --tma-text2: #CFD1D8;
  --tma-tlumene: #9A9EA9;
  --tma-vlasec: rgb(242 242 239 / 0.16);
  --stin: #303644;              /* hluboká šeď: tmavé jádro stínu na zdi za portrétem (df-zed.jpg) */
  --stin-tlumene: #A7ABB5;      /* tlumený text na šedi; #9A9EA9 by tu měl jen 4,5 : 1 */
  --modra-pera: #2743C8;        /* modrá pera jako pevná barva (--linka se na tmavých plochách přepíná na světlou) */
  --linka-svetla: #B9C6FF;      /* linka gest na tmavé a šedé ploše a na tmavé fotce */
  --text: 'Instrument Sans', system-ui, sans-serif;
  --okraj: clamp(48px, 5vw, 76px);
  --hlavicka: 60px;
  --sloupec: min(700px, 50vw);  /* jedna šířka pro úvod, pruh a oba bloky nabídky */
  --pohyb: cubic-bezier(0.2, 0.7, 0.2, 1);
  --otevreni: cubic-bezier(0.72, 0, 0.18, 1);
  --dojezd: cubic-bezier(0.16, 1, 0.3, 1);
  --mobil: 0;                   /* 1 v mobilním bloku na konci souboru; čte ho g.js (jediné místo hranice) */
}
body { font-size: 18px; line-height: 1.55; }
main { position: relative; z-index: 1; background: var(--papir); box-shadow: 0 30px 60px -24px rgb(8 10 20 / 0.5); }
.h2 { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 72; font-weight: 600; font-size: clamp(40px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.034em; }
/* Tučné z web-copy.md: pero ho podtrhne a podtržení se nezalamuje (kreslí se jen pod posledním řádkem). */
.podtrzeni { white-space: nowrap; }
/* Rám instance linky: vrstva svg.linka-vrstva v něm leží absolutně od levého horního rohu. */
[data-ramec] { position: relative; }
.blok { position: relative; background: var(--bila); }
.na-tme { background: var(--tma); color: var(--tma-text); --linka: var(--linka-svetla); --sv-a: #FFFFFF; --sv-b: rgb(255 255 255 / 0.36); }
.na-stinu { background: var(--stin); color: var(--tma-text); --linka: var(--linka-svetla); --sv-a: #FFFFFF; --sv-b: rgb(255 255 255 / 0.4); }

/* Hlavička: nad úvodní fotkou průhledná, po odjezdu plný pruh; při čtení dolů ustoupí. */
.hlavicka { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--hlavicka); display: flex; align-items: center; gap: 32px; padding: 0 var(--okraj); transition: transform 560ms var(--dojezd), background-color 260ms ease; }
.posunuto .hlavicka { background: var(--bila); }
.hlavicka.skryta { transform: translate3d(0, -101%, 0); }
.jmeno { font-family: var(--nadpis); font-size: 19px; font-weight: 640; letter-spacing: -0.015em; }
.hlavicka nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 520; color: var(--inkoust); }
.hlavicka nav a { position: relative; padding-bottom: 3px; }
.hlavicka nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--pohyb); }
.hlavicka nav a:hover::after { transform: scaleX(1); }
.napiste { font-size: 15px; font-weight: 600; padding: 9px 17px 10px; background: var(--inkoust); color: #F6F7F9; transition: background-color 200ms ease; }
.napiste:hover { background: var(--modra-pera); }
/* Přepínač jazyka, poslední prvek <nav> (mezi Reference a „Napište mi“). Aktuální jazyk (aria-current) je
   podtržený jako odkaz menu pod kurzorem, druhý utlumený. Odkaz vlaječky je vysoký jako odkazy menu (26 px),
   aby se menu nezvětšilo a podtržení textových odkazů zůstalo na místě. Lem vlaječky drží bílý pruh české
   vlajky na bílé hlavičce. */
.jazyk { display: flex; align-items: center; gap: 10px; align-self: center; }
.hlavicka nav .jazyk a { display: block; padding: 6px 1px; }
.jazyk svg { display: block; width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(8 10 20 / 0.18); }
.jazyk a:not([aria-current]) { opacity: 0.5; transition: opacity 200ms ease; }
.jazyk a:not([aria-current]):hover, .jazyk a:not([aria-current]):focus-visible { opacity: 1; }
.hlavicka nav .jazyk a[aria-current]::after { transform: scaleX(1); }
/* Mezery hlavičky těsně nad hranicí mobilního rozvržení: s vlaječkami a posuvníkem (15 až 17 px) zbývá v okně
   961 px pro hlavičku kolem 944 px, česká hlavička potřebuje s dnešními mezerami 952 px a anglická 999 px
   (anglické menu je o 57 px delší; měřeno nastroje/en-posuvnik.mjs), jinak se jméno zalomí na dva řádky.
   Česky se proto pod 985 px plynule zúží mezery menu (26 až 24 px), anglicky pod 1 024 px mezery menu (26 až
   17 px) i mezery hlavičky (32 až 24 px). Od 1 024 px jsou v obou jazycích jako dřív. */
@media screen and (min-width: 961px) {
  .hlavicka nav { gap: clamp(24px, calc(8.333vw - 56.08px), 26px); }
  html[lang="en"] .hlavicka { gap: clamp(24px, calc(12.6984vw - 98.03px), 32px); }
  html[lang="en"] .hlavicka nav { gap: clamp(17px, calc(14.2857vw - 120.29px), 26px); }
}
/* Tablet na šířku má desktopovou hlavičku a dotyk: plocha vlaječky 33 × 44 px záporným okrajem, rozvržení se
   nezmění (odkaz dál zabírá 23 × 26 px). */
@media screen and (hover: none) and (min-width: 961px) {
  .hlavicka nav .jazyk a { padding: 15px 6px; margin: -9px -5px; }
  .hlavicka nav .jazyk a::after { left: 5px; right: 5px; bottom: 9px; }
}

/* Jeviště: fotka přes celé okno stojí (sticky), obsah sekce jede přes ni. */
.jeviste { position: relative; }
.j-pozadi { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0E0F14; }
.j-pozadi .okno { position: absolute; inset: 0; background: transparent; }
.j-obsah { position: relative; z-index: 1; margin-top: -100vh; }
/* Jeviště, které vyjede přes předchozí stojící fotku (sál přes portrét, reference přes O mně). */
.vrstva-pres { margin-top: -100vh; z-index: 2; box-shadow: 0 -18px 44px -18px rgb(8 10 20 / 0.42); }

/* Jeviště 1: portrét. Fotka je širší než okno a zarovnaná vlevo, takže Daniel stojí v pravé části
   a levá polovina (zeď) zůstává blokům. První obrazovka: bílý blok s titulkem a pod ním šedý pruh
   s mapou nabídky. Pak přes portrét vyjede šedý blok oblasti 1, stejně široký. */
.j-uvod .j-pozadi { background: #D9DADB; }
.j-uvod .j-pozadi img { position: absolute; left: 0; top: 0; width: 125%; max-width: none; height: auto; min-height: 100%; object-position: 0 0; }
.j-prvni { min-height: max(620px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: calc(var(--hlavicka) + 20px) var(--okraj) clamp(26px, 4.6vh, 46px); }
.blok-uvod, .pruh { width: var(--sloupec); }
.blok-uvod { padding: clamp(26px, 4.2vh, 42px) clamp(28px, 3vw, 46px) clamp(20px, 3.2vh, 30px); }
.h1 { font-family: var(--nadpis); font-variation-settings: "wdth" 92, "opsz" 96; font-weight: 640; font-size: clamp(66px, min(7.4vw, 12.2vh), 112px); line-height: 0.92; letter-spacing: -0.045em; margin-left: -0.04em; }
.h1 .radek { display: block; }
.blok-uvod .perex { margin-top: clamp(16px, 2.8vh, 26px); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.42; color: var(--text2); max-width: 26em; }
/* Formy spolupráce na jednom řádku přes celou šířku bloku (DF 260930: „Nabidky musi byt na jedinem
   radku“); mezery a písmo se zmenšují s oknem, aby se pět odkazů vešlo i v 1280. Kontakt jako dvě ikony
   v pravém horním rohu bloku, naproti titulku. */
.nabidka { margin-top: clamp(14px, 2.2vh, 20px); display: flex; flex-wrap: wrap; gap: 6px clamp(14px, 1.5vw, 22px); font-size: clamp(14.5px, 1.08vw, 15.5px); font-weight: 560; }
.nabidka a { white-space: nowrap; border-bottom: 1.5px solid var(--vlasec); padding-bottom: 1px; transition: border-color 200ms ease; }
.nabidka a:hover { border-color: var(--inkoust); }
/* Obě ikony mají stejnou výšku (22 px); obálka je širší (poměr 30 : 24), ne nižší. Odsazení od rohu
   odečítá vnitřní okraj odkazu (7 px), aby značky lícovaly s vnitřním okrajem bloku. */
.ikony { position: absolute; top: calc(clamp(26px, 4.2vh, 42px) - 7px); right: calc(clamp(28px, 3vw, 46px) - 7px); display: flex; gap: 0; }
.ikona { display: grid; place-items: center; height: 36px; padding: 0 7px; color: var(--inkoust); transition: color 200ms ease; }
.ikona svg { width: 22px; height: 22px; }
.ikona svg.obalka { width: 27.5px; }
.ikona:hover { color: var(--modra-pera); }

/* Pruh pod titulkem: mapa nabídky v soustavě „X přes lidi“. Proměnné slovo skoro bílé, „přes lidi“
   v šedi popisků a na vlastním řádku, stejně jako v titulku („Změna / přes lidi.“). Každá položka
   vede na blok své oblasti. */
.pruh { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 30px); padding: clamp(16px, 2.6vh, 22px) clamp(28px, 3vw, 46px) clamp(16px, 2.8vh, 24px); }
.pruh a { display: block; font-size: 13.5px; line-height: 1.4; color: var(--tma-text2); }
/* Odsazení pod názvem nese i kroužek pera kolem první položky: elipsa musí být o čtvrtinu větší než
   obdélník dvouřádkového názvu, jinak ořízne rohy písmen, a pod názvem proto potřebuje místo. */
.pruh b { display: block; width: max-content; max-width: 100%; margin-bottom: 14px; font-family: var(--nadpis); font-weight: 620; font-size: 16.5px; line-height: 1.16; letter-spacing: -0.01em; color: var(--tma-text); transition: color 200ms ease; }
.pruh .pres { display: block; color: var(--stin-tlumene); }
.pruh a:hover b { color: var(--linka-svetla); }
/* Portrét stojí ještě jednu obrazovku po bloku oblasti 1: přes něj vyjede fotka sálu (další jeviště). */
.j-uvod .j-obsah { padding-bottom: 108vh; }

/* Jeviště 2: sál. Fotka přijede přiblížená na Daniela na pódiu a oddálí se na celý sál; blok oblasti 2
   přes ni vyjede zrcadlově u pravého okraje, jakmile fotka zakryje portrét. */
.j-sal .j-pozadi img { object-position: 38% 45%; }
.anim .j-sal .j-pozadi img { scale: calc(1 + (1 - var(--p, 1)) * 0.5); transform-origin: 40% 57%; }
.j-sal .j-obsah { display: flex; justify-content: flex-end; padding: 52vh var(--okraj) 26vh; }

/* Bloky nabídky: oblast 1 vlevo přes portrét, oblast 2 vpravo přes sál, stejná šířka a stavba.
   Ouško („S čím pomáhám 1“, „… 2“) vystupuje z horní hrany na straně, kde blok stojí, takže oba čtou
   jako dvě karty jedné sady, i když každý leží na jiné fotce. Číslo stojí za textem: vpředu by se četlo
   jako číslo kapitoly; název oblasti v oušku by opakoval nadpis bloku hned pod ním. */
.blok-oblast { width: var(--sloupec); padding: clamp(34px, 5.6vh, 52px) clamp(28px, 3vw, 46px) clamp(36px, 6vh, 54px); }
.blok-temata { margin: calc(12vh + 36px) 0 0 var(--okraj); }
.ousko { position: absolute; left: 0; bottom: 100%; display: flex; align-items: baseline; gap: 9px; padding: 8px 14px 8px 16px; background: var(--modra-pera); color: #F4F6FF; font-size: 14.5px; font-weight: 560; line-height: 1.2; letter-spacing: 0.005em; }
.ousko b { font-family: var(--nadpis); font-size: 20px; font-weight: 680; line-height: 1; }
.blok-sal .ousko { left: auto; right: 0; }
.oblast-nazev { font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 72; font-weight: 600; font-size: clamp(32px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -0.032em; }
.slib { margin-top: clamp(16px, 2.8vh, 22px); font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.42; font-weight: 480; max-width: 30em; }
.odliseni { margin-top: 12px; font-size: 16.5px; line-height: 1.52; color: var(--text2); max-width: 36em; }
.na-stinu .odliseni { color: var(--tma-text2); }
.klic { margin-top: clamp(22px, 3.8vh, 30px); font-family: var(--nadpis); font-variation-settings: "wdth" 92, "opsz" 72; font-weight: 600; font-size: clamp(23px, 2.1vw, 29px); line-height: 1.12; letter-spacing: -0.03em; }
/* Dva směry vedle sebe v jedné mřížce, aby popisy začínaly na stejné výšce i při různě dlouhém názvu. */
.smery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(24px, 2.8vw, 40px); margin: clamp(18px, 3vh, 24px) 0 0; }
.smer { display: contents; }
.smer dt { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 6px; }
.smer dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text2); }
.na-stinu .smer dd { color: var(--tma-text2); }
.pro-koho { margin-top: clamp(20px, 3.4vh, 28px); padding-top: 14px; border-top: 1px solid var(--vlasec); font-size: 15px; line-height: 1.5; color: var(--tlumene); }
.pro-koho b { font-weight: 600; color: var(--inkoust); }
.na-stinu .pro-koho { border-top-color: var(--tma-vlasec); color: var(--stin-tlumene); }
.na-stinu .pro-koho b { color: var(--tma-text); }
.vedlejsi { margin-top: 16px; font-size: 15.5px; line-height: 1.52; color: var(--tlumene); }
.vedlejsi b { font-family: var(--nadpis); font-weight: 620; color: var(--inkoust); }

/* Spolupráce: světlý základ, běžný tok. Nadpis, hned pod ním bílý blok se čtyřmi formami (nabídka
   je vidět celá naráz), pod ním připojený šedý pás „Součást vašeho týmu“ ve stejné mřížce jako formy
   (název pod první formou, text pod druhou až čtvrtou), a teprve po textu kresba rozhovoru vedle
   věty o přístupu a výzvy. */
.spoluprace { position: relative; padding: clamp(64px, 11vh, 108px) var(--okraj) clamp(40px, 7vh, 72px); }
.spoluprace > .h2 { margin-bottom: clamp(26px, 4.4vh, 40px); }
.spol-formy, .spol-tym { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 40px); padding-left: clamp(26px, 2.6vw, 40px); padding-right: clamp(26px, 2.6vw, 40px); }
.spol-formy { padding-top: clamp(30px, 5vh, 46px); padding-bottom: clamp(32px, 5.4vh, 50px); }
.forma { padding-left: 38px; }
.forma h3 { display: inline-block; font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(21px, 1.75vw, 25px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 6px; }
.forma p { font-size: clamp(14.5px, 1.08vw, 15.5px); line-height: 1.5; color: var(--text2); }
.spol-tym { align-items: baseline; padding-top: clamp(24px, 4vh, 34px); padding-bottom: clamp(26px, 4.4vh, 36px); }
.spol-tym h3 { padding-left: 38px; font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(21px, 1.75vw, 25px); line-height: 1.15; letter-spacing: -0.02em; }
.spol-tym p { grid-column: 2 / -1; padding-left: 38px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--tma-text2); max-width: 40em; }
.spol-scena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(36px, 4vw, 64px); align-items: center; margin-top: clamp(20px, 3.6vh, 36px); }
.pristup { font-size: clamp(19px, 1.55vw, 22.5px); line-height: 1.46; font-weight: 480; max-width: 27em; }
.cta { position: relative; width: max-content; max-width: 100%; margin-top: clamp(22px, 4vh, 38px); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-weight: 640; font-size: clamp(19px, 1.72vw, 25px); line-height: 1.3; letter-spacing: -0.02em; }
/* Výzva je odkaz v modré pera, bez podtržení (DF 260930: „nepodtrhuj, ale rovnou to dej odkazovou modrou“). */
.cta a { color: var(--modra-pera); transition: color 200ms ease; }
.cta a:hover { color: var(--inkoust); }
.spol-kresba { position: relative; pointer-events: none; margin: -9% 0 -11%; }
.spol-kresba .kresba { width: 100%; }

/* Workshopy: inkoustový pás, nahoře nadpis (kresbu workshopu DF 260930 vyřadil), pod ním šest karet
   ve dvou řadách po třech s fotkou v nízkém okně, aby nabídka zůstala kompaktní. */
.workshopy { position: relative; padding: clamp(56px, 9.6vh, 96px) var(--okraj) clamp(60px, 10vh, 100px); }
.ws-hlava-rada { position: relative; }
.ws-rada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 6.4vh, 60px) clamp(24px, 2.8vw, 44px); margin-top: clamp(26px, 4.4vh, 40px); }
.workshop { display: flex; flex-direction: column; align-items: flex-start; }
.ws-okno { width: 100%; aspect-ratio: 16 / 9; background: #23252C; margin-bottom: 16px; }
.workshop h3 { font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 36; font-weight: 620; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.14; letter-spacing: -0.02em; }
.workshop .stitek { margin-top: 5px; font-size: 13.5px; line-height: 1.38; font-weight: 540; color: var(--tma-tlumene); }
.workshop .stitek + p { margin-top: 9px; font-size: clamp(14.5px, 1.08vw, 15.5px); line-height: 1.5; color: var(--tma-text2); }
.workshop > a { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; transition: color 200ms ease; }
.workshop > a span { border-bottom: 2px solid var(--akcent); padding-bottom: 1px; }
.workshop > a:hover { color: var(--linka-svetla); }

/* O mně: dělená obrazovka, portrét připnutý vlevo přes celou výšku, medailonek na bílé ploše. */
.o-mne { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--bila); }
/* Druhý řádek mřížky (výška okna) drží portrét připnutý, dokud přes něj nevyjede fotka referencí. */
.o-mne::after { content: ""; grid-column: 2; grid-row: 2; height: 100vh; }
.o-mne-foto { position: sticky; top: 0; height: 100vh; min-height: 560px; align-self: start; grid-row: 1 / span 2; }
.o-mne-text { grid-column: 2; grid-row: 1; }
.o-mne-foto .okno { position: absolute; inset: 0; }
.o-mne-foto img { object-position: 50% 17%; }
.anim .o-mne-foto img { scale: 1.1; translate: 0 calc((var(--p, 0.5) - 0.5) * -7%); }
.o-mne-text { position: relative; align-self: center; padding: clamp(80px, 14vh, 140px) var(--okraj) clamp(80px, 14vh, 140px) clamp(44px, 6vw, 96px); }
.o-mne .lead { margin: clamp(20px, 3.2vh, 30px) 0 clamp(18px, 3vh, 26px); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.42; max-width: 32em; }
.o-mne .lead ~ p { font-size: 17px; line-height: 1.62; color: var(--text2); max-width: 36em; }
.o-mne .lead ~ p + p { margin-top: 14px; }

/* Jeviště 3: reference. Fotka z přednášky (publikum) stojí, přes ni vyjede inkoustový blok s hlavním
   ohlasem. Čtyři hlasy a klienti pak na světlém základu. */
.j-ref .j-pozadi img { object-position: 50% 58%; }
.anim .j-ref .j-pozadi img { scale: 1.08; translate: 0 calc((var(--p, 0.5) - 0.5) * -5%); }
.j-ref .j-obsah { padding: 84vh var(--okraj) 30vh; }
.blok-hlas { width: min(920px, 68%); padding: clamp(36px, 6vh, 54px) clamp(32px, 3.6vw, 54px) clamp(40px, 6.6vh, 58px); }
.blok-hlas .h2 { font-size: 15px; font-family: var(--text); font-variation-settings: normal; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--tma-tlumene); margin-bottom: clamp(18px, 3vh, 26px); }
.hlavni-hlas { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: clamp(24px, 2.6vw, 38px); align-items: start; }
.hlavni-hlas img { width: 96px; height: 96px; object-fit: cover; }
.hlavni-hlas blockquote { margin: 0; font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 48; font-weight: 500; font-size: clamp(25px, 2.25vw, 33px); line-height: 1.26; letter-spacing: -0.024em; }
.kdo { display: block; margin-top: 16px; font-family: var(--text); font-variation-settings: normal; font-size: 15px; font-weight: 560; letter-spacing: 0; color: var(--tlumene); -webkit-text-fill-color: currentColor; }
.hlavni-hlas .kdo { color: var(--tma-tlumene); }
.ohlasy { padding: clamp(60px, 10vh, 100px) var(--okraj) 0; }
.hlasy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); }
.hlas { margin: 0; }
.hlas img { width: 60px; height: 60px; object-fit: cover; margin-bottom: 16px; }
.hlas blockquote { margin: 0; font-size: 16px; line-height: 1.56; color: var(--text2); }
.hlas .kdo { font-size: 14px; margin-top: 12px; }
.klienti { margin: clamp(56px, 9vh, 92px) calc(-1 * var(--okraj)) 0; padding: clamp(48px, 8vh, 78px) var(--okraj) clamp(60px, 10vh, 96px); background: var(--bila); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(44px, 5vw, 88px); align-items: start; }
.klienti-text { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }
.klienti-pozn { margin-top: 20px; font-size: 16px; color: var(--tlumene); }
.loga { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 36px; align-items: center; }
.loga img { height: 38px; width: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 0.86; }

/* Kontakt: jeviště pod stránkou. Fotka z pódia přes celé okno, text stojí na její tmavé pravé části;
   stránka nad ní na konci odjede nahoru jako opona. */
.opona { position: sticky; bottom: 0; z-index: 0; min-height: 100vh; display: flex; flex-direction: column; background: #0D0B1E; color: var(--tma-text); --linka: var(--linka-svetla); overflow: hidden; }
.opona-foto { position: absolute; inset: 0 0 0 -14%; background: transparent; }   /* posunutá vlevo: Daniel v levé polovině, tmavá část fotky pod textem */
.opona-foto img { object-position: 0% 30%; }
.anim .opona-foto img { scale: calc(1.14 - 0.14 * var(--p, 1)); transform-origin: 36% 40%; }
.opona-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(13 11 30 / 0) 52%, rgb(13 11 30 / 0.9) 68%, rgb(13 11 30 / 0.95)); }
/* Kroužek kolem e-mailu (E.krouzekEmailu) sahá kolem 22 px vlevo od textu a kolem 45 px nad něj i pod něj:
   rám začíná 48 px vlevo od textu (vnitřní odsazení místo části vnějšího, text zůstává na místě; engine drží
   řídicí body křivky nejméně 14 px uvnitř rámu, za hranou se tah zubí) a mezery nad e-mailem a pod ním jsou
   stejné jako na podstránkách. */
.kontakt { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; margin-left: calc(58% - 48px); padding: 10vh var(--okraj) 6vh 48px; }
.kontakt .h2 { max-width: 11em; font-size: clamp(36px, 3.4vw, 50px); line-height: 1.06; }
.kontakt-mail { align-self: flex-start; margin-top: clamp(34px, 6vh, 54px); font-family: var(--nadpis); font-variation-settings: "wdth" 96, "opsz" 48; font-weight: 540; font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.025em; color: #FFFFFF; }
.kontakt-dalsi { margin-top: 48px; font-size: 17px; font-weight: 560; color: var(--tma-text2); }
.kontakt-dalsi a:hover, .paticka a:hover { color: #FFFFFF; }
.paticka { position: relative; z-index: 1; display: flex; gap: 26px; padding: 22px var(--okraj) 26px; font-size: 14px; color: var(--tma-text2); background: rgb(13 11 30 / 0.72); }
.paticka .vpravo { margin-left: auto; display: flex; gap: 24px; }

/* ---------- pohyb (jen s třídou anim; bez ní je všechno vidět hned) ---------- */

/* Úvod po načtení: první snímek je celý vidět; portrét se oddálí a bloky dosednou (jen transform).
   Při scrollu portrét pomalu ujíždí nahoru, takže bloky jedou rychleji než fotka. */
.anim .j-uvod .j-pozadi img { translate: 0 calc(var(--p, 0) * -5%); transition: scale 2600ms var(--dojezd) 80ms; transform-origin: 72% 28%; }
.anim:not(.nacteno) .j-uvod .j-pozadi img { scale: 1.1; }
.anim .blok-uvod { transition: translate 1000ms var(--dojezd) 140ms; }
.anim .pruh { transition: translate 1000ms var(--dojezd) 300ms; }
.anim:not(.nacteno) .blok-uvod, .anim:not(.nacteno) .pruh { translate: 0 46px; }

@media screen and (max-height: 800px) {
  .pruh b { font-size: 15.5px; }
  .workshop .stitek + p { font-size: 14.5px; line-height: 1.44; }
  .smer dd { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hlavicka { transition: none; }
}

/* Prvky mobilního rozvržení, na desktopu skryté: tlačítko menu (vzniká v E.menu) a fotka karty 6 místo
   komponenty Imaginace. html.interakce-vypnute zapisuje g.js, když při načtení platilo mobilní rozvržení bez
   ?interakce=1: flipchart a hra zůstanou skryté i po otočení telefonu na šířku, protože se nespustily. */
.menu-tlacitko, .im-foto { display: none; }
.interakce-vypnute #flipchart, .interakce-vypnute #im-okno { display: none; }
.interakce-vypnute .im-foto { display: block; }

/* Zařízení bez kurzoru (telefon, tablet i v desktopovém rozvržení): pero stojí u pravého okraje okna (odstavné
   místo v linka2.js) a stínem okno přesahuje o pár px, takže by stránka šla posouvat do strany a telefon by ji
   oddálil (390 px: okno 410 px; tablet 1024 px: dokument 1046 px). Vrstvy pera jsou absolutně v body
   (position: relative), proto je ořízne body; clip na rozdíl od hidden nedělá z body posuvný kontejner, takže
   připnuté fotky (sticky) dál stojí. Hodnota na html brání přenesení přetečení body na okno (ořez jen na html
   oddálení nezastavil). S myší beze změny. */
@media screen and (hover: none) {
  html { overflow-x: hidden; }
  body { overflow-x: clip; }
}

/* ---------- mobilní rozvržení (M1 261001) ----------
   Jediná hranice mobilního rozvržení stránky G; g.js ji nezná, čte proměnnou --mobil. Hlavní cíl je telefon
   na výšku; tablet na výšku (768 px) dostane totéž rozvržení v širším sloupci, protože desktop tam nefungoval
   (bloky 384 px, formy ve čtyřech sloupcích, gesta nenakreslená). 960 px proto, že užší okno nepojme
   desktopovou hlavičku (kolem 870 px, s vlaječkami jazyka kolem 940 px).
   Jazyk G zůstává: fotky stojí přes celé okno a bloky jedou přes ně. Blok na telefonu leží u jednoho okraje
   okna (úvod, oblast 1, O mně a reference vlevo, oblast 2 vpravo) a na druhé straně nechá pruh fotky, takže
   asymetrii dál nese strana. Mřížky jdou pod sebe, od 600 px ve dvou sloupcích. Písmo textu nejméně 16 px,
   klikací plochy 44 px. Výšky: fotky jevišť 100vh (na telefonu největší okno: fotka zůstane pokrytá i po
   schování adresního řádku a neposkočí), co má být vidět hned (první obrazovka, opona) 100svh (nejmenší okno).
   dvh se nepoužívá: mění se při scrollu a každá změna rozměru přestaví trasy pera. Šířky nejsou vázané na
   česká slova (přibude angličtina); dlouhé slovo se v nejhorším zalomí (overflow-wrap). */
@media screen and (max-width: 960px) {
  :root { --mobil: 1; --okraj: clamp(20px, 5.4vw, 40px); --sloupec: min(640px, 100% - 26px); --blok-l: 24px; --blok-p: 22px; }
  body { font-size: 17px; }
  .h2 { font-size: clamp(32px, 8.6vw, 46px); line-height: 1.04; }
  h1, h2, h3, p, dt, dd, blockquote { overflow-wrap: break-word; }
  /* Tučné spojení se na telefonu smí zalomit, i v titulku; pero pak podtrhne každý řádek zvlášť (g.js,
     podtrzeni). Nejdelší spojení má česky 372 px, anglicky 479 px a anglický titulek „through people“
     337 px při sloupci 283 px (telefon 360 px). */
  .podtrzeni { white-space: normal; }
  .alternativy { display: none; }   /* přepínač alternativ (jen prototyp) by na telefonu ležel přes text */

  /* Hlavička na telefonu: jméno, „Napište mi“ a tlačítko menu (E.menu v e-spolecne.js). Menu je tentýž <nav>
     jako na desktopu, tady panel pod lištou; bez skriptu (bez .s-menu) je skryté a odkazy nese patička.
     Přepínač jazyka bude posledním prvkem <nav>, tedy posledním řádkem panelu. */
  .hlavicka { gap: 8px; }
  .jmeno { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font-size: 18px; }
  .hlavicka nav { display: none; }
  .napiste { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; font-size: 16px; }
  .menu-tlacitko { display: block; position: relative; flex: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--inkoust); cursor: pointer; }
  .menu-tlacitko i { position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: currentColor; transition: transform 320ms var(--pohyb), top 320ms var(--pohyb); }
  .menu-tlacitko i + i { top: 25px; }
  .menu-otevreno .menu-tlacitko i { top: 21px; transform: rotate(45deg); }
  .menu-otevreno .menu-tlacitko i + i { transform: rotate(-45deg); }
  .hlavicka.menu-otevreno { background: var(--bila); }
  .hlavicka.s-menu nav { position: fixed; left: 0; right: 0; top: var(--hlavicka); flex-direction: column; gap: 0; margin: 0; max-height: calc(100svh - var(--hlavicka)); overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--okraj) 18px; background: var(--bila); box-shadow: 0 22px 30px -20px rgb(8 10 20 / 0.4); font-family: var(--nadpis); font-variation-settings: "wdth" 94, "opsz" 48; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
  .hlavicka.menu-otevreno nav { display: flex; }
  .hlavicka.s-menu nav a { display: flex; align-items: center; min-height: 54px; padding: 0; border-top: 1px solid var(--vlasec); }
  .hlavicka.s-menu nav a:first-child { border-top: 0; }
  .hlavicka.s-menu nav a::after { content: none; }
  /* Přepínač jazyka: poslední řádek panelu, dvě plochy 52 × 48 px s vlaječkami 33 × 22 px, první zarovnaná
     s textem odkazů nad ní; aktuální jazyk podtržený čárou pod vlaječkou. */
  .hlavicka.s-menu nav .jazyk { align-self: stretch; gap: 4px; min-height: 60px; border-top: 1px solid var(--vlasec); }
  .hlavicka.s-menu nav .jazyk a { display: flex; align-items: center; justify-content: center; width: 52px; min-height: 48px; padding: 0; border-top: 0; }
  .hlavicka.s-menu nav .jazyk a:first-child { margin-left: -10px; }
  .hlavicka.s-menu nav .jazyk svg { width: 33px; height: 22px; }
  .hlavicka.s-menu nav .jazyk a[aria-current]::after { content: ""; left: 10px; right: 10px; bottom: 5px; height: 2px; transform: none; }
  html.menu-otevreno { overflow: hidden; }
  html.menu-otevreno body::after { content: ""; position: fixed; inset: 0; z-index: 19; background: rgb(8 10 20 / 0.42); }

  /* Jeviště 1: portrét přes celé okno oříznutý na Daniela (stojí v pravé polovině fotky; fotka je o 8 % vyšší
     než okno, aby posun při scrollu neodkryl spodní hranu). Blok úvodu u levého okraje od 44 % výšky okna,
     pod ním pruh, který na telefonu leží pod první obrazovkou a vykukuje. */
  .j-uvod .j-pozadi img { width: 100%; height: 108%; min-height: 0; object-fit: cover; object-position: 55% 30%; }
  .anim .j-uvod .j-pozadi img { transform-origin: 55% 24%; }
  .j-prvni { min-height: 0; justify-content: flex-start; padding: max(44svh, var(--hlavicka) + 150px) 0 0; }
  .blok-uvod { padding: 26px var(--blok-p) 14px 32px; }
  .h1 { font-size: clamp(54px, min(17.5vw, 13svh), 92px); }
  .blok-uvod .perex { margin-top: 16px; font-size: 19px; line-height: 1.42; }
  .nabidka { margin-top: 10px; gap: 0 18px; font-size: 16px; }
  .nabidka a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--vlasec); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
  .ikony { top: 14px; right: calc(var(--blok-p) - 11px); }
  .ikona { height: 44px; padding: 0 11px; }
  /* Pruh: tři položky pod sebou, v každé název vlevo (dva řádky jako na desktopu; kolem prvního kroužek pera,
     vlevo od textu proto 32 px) a popis vpravo; celá položka je odkaz. */
  .pruh { grid-template-columns: minmax(0, 1fr); padding: 4px var(--blok-p) 6px 32px; }
  .pruh a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 18px; align-items: start; padding: 15px 0; font-size: 16px; line-height: 1.42; }
  .pruh a + a { border-top: 1px solid var(--tma-vlasec); }
  .pruh b { margin-bottom: 0; font-size: 17px; }
  .blok-temata { margin: calc(22vh + 40px) 0 0 0; }

  /* Bloky nabídky: stejná šířka a stavba, oblast 1 u levého okraje, oblast 2 u pravého; směry pod sebou. */
  .blok-oblast { padding: 28px var(--blok-p) 30px var(--blok-l); }
  .ousko { padding: 9px 14px 9px 16px; font-size: 16px; }
  .oblast-nazev { font-size: clamp(29px, 7.8vw, 38px); line-height: 1.08; }
  .slib { margin-top: 14px; font-size: 19px; line-height: 1.42; }
  .odliseni { font-size: 17px; }
  .klic { margin-top: 22px; font-size: 24px; }
  .smery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; margin-top: 18px; }
  .smer + .smer dt { margin-top: 20px; }
  .smer dt { font-size: 19px; }
  .smer dd { font-size: 16.5px; }
  .pro-koho { font-size: 16px; }
  .vedlejsi { font-size: 16.5px; }
  /* Sál: Daniel na pódiu uprostřed okna, oddálení z něj. */
  .j-sal .j-pozadi img { object-position: 37% 45%; }
  .anim .j-sal .j-pozadi img { transform-origin: 50% 57%; }
  .j-sal .j-obsah { padding: 52vh 0 26vh; }

  /* Spolupráce: formy pod sebou (odškrtnutí 56 px od levé hrany rámu, gesto sahá 32 px vlevo od textu),
     pás týmu, kresba přes celou šířku okna a pod ní věta o přístupu s výzvou. Kresba je nad větou (na desktopu
     vedle ní), aby ji pero nakreslilo při nájezdu a podtržení ve větě pod ní přišlo na řadu po ní, v pořadí
     čtení: pod větou ji pero v jedné pauze čtenáře s podtržením nestihlo (průjezd 390 px, konec nad oknem)
     a když dostala přednost, věta mezitím odjela nenakreslená. */
  .spoluprace { padding: 64px var(--okraj) 44px; }
  .spoluprace > .h2 { margin-bottom: 26px; }
  .spol-formy, .spol-tym { grid-template-columns: minmax(0, 1fr); padding-left: 18px; padding-right: var(--blok-p); }
  .spol-formy { row-gap: 26px; padding-top: 28px; padding-bottom: 30px; }
  .forma h3 { font-size: 22px; }
  .forma p { font-size: 16.5px; }
  .spol-tym { row-gap: 8px; padding-top: 22px; padding-bottom: 24px; }
  .spol-tym h3 { font-size: 22px; }
  .spol-tym p { grid-column: auto; font-size: 17px; }
  .spol-scena { grid-template-columns: minmax(0, 1fr); margin-top: 34px; }
  .pristup { font-size: 19.5px; }
  .cta { width: auto; font-size: 22px; }
  .spol-kresba { order: -1; width: min(100% + 2 * var(--okraj), 500px); margin: -9% calc(-1 * var(--okraj)) -9%; }

  /* Workshopy: karty pod sebou; karta 6 má místo hry fotku z F1 (bez ?interakce=1). */
  .workshopy { padding: 56px var(--okraj) 64px; }
  .ws-rada { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 28px; }
  .workshop h3 { font-size: 23px; }
  .workshop .stitek { font-size: 16px; }
  .workshop .stitek + p { font-size: 16.5px; line-height: 1.5; }
  .workshop > a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 6px; font-size: 16px; }
  html:not(.interakce) #im-okno { display: none; }
  html:not(.interakce) .im-foto { display: block; }
  /* Flipchart na telefonu není; reference pak najíždějí přes konec O mně (::after výšky okna). */
  html:not(.interakce) #flipchart { display: none; }

  /* O mně: portrét stojí přes celé okno a přes něj vyjede bílý blok s medailonkem u levého okraje; po něm
     portrét ještě výšku okna stojí, než přes něj najedou reference. */
  .o-mne { display: block; }
  .o-mne-foto { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .o-mne-text { position: relative; z-index: 1; width: var(--sloupec); margin-top: -36vh; padding: 30px var(--blok-p) 34px var(--blok-l); background: var(--bila); }
  .o-mne::after { display: block; }
  .o-mne .lead { margin: 18px 0 16px; font-size: 19.5px; }
  .o-mne .lead ~ p { font-size: 17px; }

  /* Reference: inkoustový blok s hlavním ohlasem u levého okraje, fotka hlasu nad citací; hlasy pod sebou
     (fotka vlevo od citace), loga po třech. */
  .j-ref .j-pozadi img { object-position: 29% 58%; }   /* Daniel u plátna (32 % šířky fotky) vlevo, publikum vpravo */
  .j-ref .j-obsah { padding: 84vh 0 30vh; }
  .blok-hlas { width: var(--sloupec); padding: 28px var(--blok-p) 32px var(--blok-l); }
  .blok-hlas .h2 { font-size: 16px; }
  .hlavni-hlas { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .hlavni-hlas img { width: 72px; height: 72px; }
  .hlavni-hlas blockquote { font-size: clamp(22px, 6vw, 28px); }
  .kdo { font-size: 16px; }
  .ohlasy { padding: 56px var(--okraj) 0; }
  .hlasy { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .hlas { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .hlas img { width: 56px; height: 56px; margin: 4px 0 0; }
  .hlas blockquote { font-size: 16.5px; }
  .hlas .kdo { font-size: 16px; }
  .klienti { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 52px; padding: 40px var(--okraj) 52px; }
  .klienti-text { font-size: 19px; }
  .klienti-pozn { font-size: 16px; }
  .loga { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 22px; }
  .loga img { height: 34px; }

  /* Kontakt: fotka z pódia přes celé okno, text dole na ztmavené spodní části. Rám kontaktu má vlevo 48 px
     a vpravo 40 px: kroužek kolem e-mailu sahá 22 px za text a řídicí body tahu musí zůstat 14 px uvnitř rámu. */
  .opona { min-height: 100svh; }
  .opona-foto { inset: 0; }
  .opona-foto img { object-position: 22% 30%; }
  .anim .opona-foto img { transform-origin: 30% 30%; }
  .opona-foto::after { background: linear-gradient(to bottom, rgb(13 11 30 / 0) 26%, rgb(13 11 30 / 0.86) 56%, rgb(13 11 30 / 0.95)); }
  .kontakt { justify-content: flex-end; margin-left: 0; padding: 34svh 40px 36px 48px; }
  .kontakt .h2 { max-width: 12em; font-size: clamp(29px, 8vw, 40px); }
  .kontakt-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 48px; font-size: clamp(22px, 6.2vw, 30px); }
  .kontakt-dalsi { margin-top: 40px; }
  .kontakt-dalsi a { display: inline-flex; align-items: center; min-height: 44px; }
  .paticka { flex-wrap: wrap; gap: 0 20px; padding: 12px var(--okraj) 16px; font-size: 16px; }
  .paticka a { display: inline-flex; align-items: center; min-height: 44px; }
  .paticka .vpravo { flex-wrap: wrap; gap: 0 20px; width: 100%; margin-left: 0; }

  /* Tablet na výšku a telefon na šířku: dva sloupce tam, kde se vejdou. Formy zůstávají pod sebou: čtyři
     odškrtnutí ve dvou řadách se do rozpočtu pera nevejdou (tablet 768 px: čtvrté vzniklo 3 px od horní hrany;
     learnings/frontend.md, záznam o šesti odškrtnutích v mřížce), text forem má proto omezenou délku řádku. */
  @media screen and (min-width: 600px) {
    .smery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 28px; }
    .smer + .smer dt { margin-top: 0; }
    .forma p { max-width: 36em; }
    .ws-rada { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .hlasy { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .loga { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}