/* ==========================================================================
   RECEPT (tokeny). Nic níž nesmí být hodnota, která tu není.
   Archetyp: Vládce (prestiž, řád). Web je reprezentace, ne prodejní stroj.
   Nadpisy a všechny drobné popisky jedou v Montserratu, ať drží k logu.
   Source Sans 3 je jen na běžný text ke čtení.
   ========================================================================== */
:root{
  --font-display:"Montserrat",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;

  --ink:#231F20;
  --ink-deep:#141112;
  --yellow:#FFCB04;
  --bg:#FFFFFF;
  --sand:#F4F3F1;
  --muted:#6B6764;
  --muted-dark:#9E9995;
  --line:rgba(35,31,32,.16);
  --line-dark:rgba(255,255,255,.18);

  --t-mikro:.8125rem;
  --t-small:.9375rem;
  --t-body:clamp(1.0625rem,1rem + .22vw,1.1875rem);
  --t-lead:clamp(1.1875rem,1.05rem + .55vw,1.45rem);
  --t-h3:clamp(1.3rem,1.05rem + 1vw,1.8rem);
  --t-h2:clamp(2rem,1.4rem + 2.2vw,3.5rem);
  --t-h1:clamp(1.75rem,1.15rem + 1.9vw,2.85rem);
  --t-cislo:clamp(2rem,1.4rem + 2.4vw,3.25rem);

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s6:1.5rem;
  --s8:2rem; --s12:3rem; --s16:4rem; --s24:6rem; --s32:8rem;

  --navbar:76px;
  --shell:min(1360px,100% - 3rem);

  /* Ostré rohy. Těžká technika má hrany, ne obliny. */
  --radius:0px;

  /* --- POHYB ---
     Jedna křivka na všechno, aby se web hýbal jako jedna věc.
     Křivka má pomalý rozjezd a dlouhé měkké dojetí, takže nic nesekne.
     Tři délky: dotek prstem, změna stavu, velká proměna sekce. */
  --ease:cubic-bezier(.32,.72,0,1);
  --t-dotek:.26s;
  --t-stav:.42s;
  --t-velky:.7s;
}
@media (min-width:1700px){ :root{ --shell:min(1520px,100% - 4rem) } }
@media (max-width:900px){ :root{ --shell:min(1360px,100% - 2rem); --navbar:64px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:900;line-height:1.05;letter-spacing:-.035em;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.03em}
p{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
::selection{background:var(--yellow);color:var(--ink)}
.shell{width:var(--shell);margin-inline:auto}
section[id]{scroll-margin-top:var(--navbar)}

/* Popisek nad nadpisem. Místo malého znaku je krátká žlutá linka.
   Znak u každého popisku působil jako logo nalepené do textu, což velká
   firma nedělá, ta si vystačí se samotným slovem. */
.znacka{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.znacka img{display:none}
/* Linka je i za slovem a je dvakrát delší. Krátká uvozuje, dlouhá odvádí
   oko dál do stránky, takže popisek nestojí na místě jako nálepka. */
.znacka::before{content:"";width:34px;height:2px;background:var(--yellow);flex:none}
.znacka::after{content:"";width:68px;height:2px;background:var(--yellow);flex:none}
.znacka span{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.znacka--tmava span{color:var(--muted-dark)}

.preskocit{
  position:fixed;top:0;left:50%;transform:translate(-50%,-160%);
  background:var(--yellow);color:var(--ink);padding:var(--s3) var(--s6);
  font-family:var(--font-display);font-weight:700;z-index:120;transition:transform var(--t-dotek) var(--ease)
}
.preskocit:focus{transform:translate(-50%,var(--s3))}

/* Odkaz s dokreslovanou šipkou (náš poznávací prvek, vzor Stripe) */
.dal{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-small);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding-bottom:var(--s2);border-bottom:1px solid currentColor
}
/* Hlavní tlačítko: plná plocha. Vedlejší: jen podtržený text. Šipka patří
   jen do hlavního, aby bylo jasné, která akce je ta hlavní. */
.btn{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-small);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:var(--s4) var(--s6);border-radius:var(--radius);border:0;
  background:var(--yellow);color:var(--ink);
  transition:background var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)
}
.btn:hover{background:#fff}
.odkaz{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-small);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding-bottom:var(--s2);border-bottom:1px solid currentColor;transition:color var(--t-dotek) var(--ease)
}

.sipka{overflow:visible;flex:none}
.sipka path:first-child{stroke-dasharray:8;stroke-dashoffset:8;transition:stroke-dashoffset var(--t-stav) var(--ease) .04s}
.sipka path:last-child{transition:transform var(--t-stav) var(--ease) .04s}
a:hover .sipka path:first-child,a:focus-visible .sipka path:first-child{stroke-dashoffset:0}
a:hover .sipka path:last-child,a:focus-visible .sipka path:last-child{transform:translateX(2px)}

/* ==========================================================================
   NAVIGACE, připnutá nahoře, jen vodorovné logo
   ========================================================================== */
.hlavicka{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:transparent;
  transition:background var(--t-stav) var(--ease),border-color var(--t-stav) var(--ease);
  border-bottom:1px solid transparent
}
.hlavicka[data-prilepena="true"]{
  background:rgba(20,17,18,.96);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom-color:var(--line-dark)
}
.hlavicka__radek{display:flex;align-items:center;gap:var(--s8);height:var(--navbar);overflow:visible}
/* Logo visí od horní hrany, ne na střed řádku, aby šlo odsazení shora
   nastavit přímo. Nahoře na stránce je větší a má 20 px shora.
   Po odscrollování je 30 px vysoké a 23 px shora, což je přesně střed
   řádku, tedy stav, který tu byl původně. Na ten nesahat.
   Řádek hlavičky logo neořezává, takže smí přesáhnout i pod navbar.
   Výška navbaru se tím nemění ani na mobilu. */
.hlavicka__logo{
  margin-right:auto;display:flex;align-items:flex-start;align-self:stretch;
  padding-top:20px
}
/* Zmenšení se dělá měřítkem, ne výškou. Výška by při každém snímku
   přepočítávala rozložení stránky a je z toho to trhnutí. Měřítko
   a posun jedou mimo rozložení, takže přechod je plynulý.
   0.5172 je 30 z 58 px, posun 3 px sedí na 23 px od horní hrany. */
.hlavicka__logo img{
  height:58px;width:auto;transform-origin:left top;
  transition:transform var(--t-stav) var(--ease)
}
.hlavicka[data-prilepena="true"] .hlavicka__logo img{transform:translateY(3px) scale(.5172)}
/* Na telefonu menší, jinak by logo bylo přes půl obrazovky.
   Odscrollované je 30 px, tedy na středu 64px řádku, jako dřív. */
@media (max-width:900px){
  .hlavicka__logo{padding-top:12px}
  .hlavicka__logo img{height:40px}
  .hlavicka[data-prilepena="true"] .hlavicka__logo img{transform:translateY(5px) scale(.75)}
}
.menu{display:flex;align-items:center;gap:var(--s6);list-style:none;margin:0;padding:0}
.menu > li{position:relative}
/* V klidu ztlumené, při najetí naplno. Žádné podtržení. */
.menu a,.menu button{
  font-family:var(--font-display);font-weight:600;font-size:.875rem;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;
  background:none;border:0;cursor:pointer;padding:var(--s2) 0;
  display:inline-flex;align-items:center;gap:var(--s2);
  opacity:.7;transition:opacity var(--t-dotek) var(--ease)
}
.menu a:hover,.menu button:hover,
.menu li[data-otevreno="true"] > button{opacity:1}
/* Rozbalovací šipka podle Stripe. Nepřejíždí nahoru: překlopí se kolem
   vlastní vodorovné osy (y = 8.3 v souřadnicích ikony), takže zůstane na místě
   a při přechodu projde plochou čárou. */
.chevron{
  width:16px;height:16px;flex:none;
  transform-box:view-box;transform-origin:8px 8.3px;
  transition:transform var(--t-stav) var(--ease)
}
.menu li:hover > button .chevron,
.menu li[data-otevreno="true"] > button .chevron{transform:scaleY(-1)}

.podmenu{
  position:absolute;top:calc(100% + var(--s3));left:calc(var(--s6) * -1);
  min-width:17rem;background:var(--ink-deep);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:var(--s3);margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-dotek) var(--ease),transform var(--t-dotek) var(--ease),visibility var(--t-dotek)
}
.menu li:hover > .podmenu,.menu li[data-otevreno="true"] > .podmenu{opacity:1;visibility:visible;transform:none}
.podmenu a{
  display:block;padding:var(--s3) var(--s4);border:0;border-radius:var(--radius);
  letter-spacing:.04em;font-weight:600;font-size:.8125rem;transition:background var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)
}
.podmenu a{opacity:1}
.podmenu a:hover{background:rgba(255,255,255,.08);color:var(--yellow)}

.hlavicka__tel{
  font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  color:#fff;text-decoration:none;transition:color var(--t-dotek) var(--ease)
}
.hlavicka__tel:hover{color:var(--yellow)}

.hamburger{display:none;background:none;border:0;padding:var(--s2);cursor:pointer}
.hamburger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:transform var(--t-dotek) var(--ease),opacity var(--t-dotek) var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu jede odshora, ne na střed. Vycentrovaný obsah vyšší než displej
   přetékal nad horní hranu a první odkazy nešly doscrollovat. */
.mobil{
  position:fixed;inset:0;background:var(--ink-deep);z-index:85;
  display:flex;flex-direction:column;
  padding:calc(var(--navbar) + var(--s6)) var(--s6) var(--s8);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-stav) var(--ease),transform var(--t-stav) var(--ease),visibility var(--t-stav)
}
.mobil[data-otevreno="true"]{opacity:1;visibility:visible;transform:none}
/* Hierarchii drží jen váha a barva písma, linky pod každou položkou dělaly chaos. */
.mobil a{
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:#fff;
  text-decoration:none;padding:var(--s3) 0;letter-spacing:-.03em
}
.mobil a.mobil__pod{font-size:1rem;font-weight:500;letter-spacing:.02em;color:#DCD8D5;padding-left:var(--s4)}
.mobil__kontakt{margin-top:var(--s8)}
/* Jediný kontakt v menu: mail jako žluté hranaté tlačítko. */
.mobil__kontakt a{
  display:inline-flex;background:var(--yellow);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:var(--s3) var(--s6);letter-spacing:0
}
@media (max-width:1100px){ .menu,.hlavicka__tel{display:none} .hamburger{display:block} }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--ink-deep);color:#fff;overflow:hidden;
  min-height:92svh;display:flex;align-items:stretch
}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 55%}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(20,17,18,.92) 0%,rgba(20,17,18,.72) 38%,rgba(20,17,18,.12) 72%,rgba(20,17,18,.35) 100%),
    linear-gradient(to bottom,rgba(20,17,18,.85) 0%,rgba(20,17,18,.1) 45%,rgba(20,17,18,.55) 100%)
}
.hero__znak{
  position:absolute;right:-6%;top:12%;width:min(34vw,470px);z-index:1;
  opacity:.055;pointer-events:none;user-select:none
}
.hero__obsah{
  position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;gap:var(--s12);
  padding-block:calc(var(--navbar) + var(--s24)) var(--s16)
}
.hero__telo{max-width:none}
/* Verzálky: potřebují menší záporné prostrkání než minusky, jinak se slepí */
.hero h1{
  color:#fff;max-width:18ch;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.14
}
.hero__lead{margin-top:var(--s6);color:#C9C5C2;font-size:var(--t-body);max-width:50ch;line-height:1.55}
.hero__akce{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6) var(--s8)}
.hero__akce .odkaz{color:#fff}
.hero__akce .odkaz:hover{color:var(--yellow)}
@media (max-width:900px){
  .hero{min-height:auto;padding-block:calc(var(--navbar) + var(--s16)) var(--s16)}
  .hero__foto::after{background:linear-gradient(to top,rgba(20,17,18,.95) 12%,rgba(20,17,18,.72) 60%,rgba(20,17,18,.62) 100%)}
}

/* ==========================================================================
   ČINNOSTI. Dvě hlavní nahoře (zemní práce, nadrozměrná doprava), tři pod nimi.
   ========================================================================== */
.cinnosti{padding-block:var(--s32) var(--s24)}
.sekce__hlava{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s16);align-items:end;margin-bottom:var(--s16)}
.sekce__hlava p{max-width:52ch;color:var(--muted);font-size:var(--t-lead);line-height:1.5}

.karty{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s6)}
.karta{
  position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  background:var(--ink-deep);border-radius:var(--radius);isolation:isolate
}
/* Dlaždice na sraz kreslí sousedka přes pravou část obtažení fokusu.
   Fokusovaná karta jde nad sousedky, ať je obtažení vidět celé. */
.karta:focus-visible{z-index:4}
.karta--velka{grid-column:span 3;aspect-ratio:16/11}
.karta--mala{grid-column:span 2;aspect-ratio:4/3}
.karta img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform var(--t-velky) var(--ease)
}
.karta:hover img,.karta:focus-visible img{transform:scale(1.05)}
.karta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(20,17,18,.88) 0%,rgba(20,17,18,.32) 44%,rgba(20,17,18,0) 72%)
}
/* Text je ukotvený u spodní hrany. Popis roste nahoru a štítek vytlačí,
   takže se nikdy nepřekryjí. */
.karta__telo{position:absolute;left:0;right:0;bottom:var(--s6)}
.karta__stitek{
  display:inline-block;background:var(--ink-deep);border-radius:var(--radius);
  padding:var(--s3) var(--s6);margin-left:var(--s6);
  transition:background var(--t-stav) var(--ease),color var(--t-stav) var(--ease)
}
.karta:hover .karta__stitek,.karta:focus-visible .karta__stitek{background:var(--yellow);color:var(--ink)}
.karta__stitek h3{margin:0}
.karta__popis{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--t-stav) var(--ease),opacity var(--t-stav) var(--ease)
}
.karta__popis > span{overflow:hidden;display:block}
.karta__popis span span{display:block;padding:var(--s4) var(--s6) 0;color:#DCD8D5;font-size:var(--t-small)}
.karta:hover .karta__popis,.karta:focus-visible .karta__popis{grid-template-rows:1fr;opacity:1}
.karta--velka .karta__popis span span{font-size:var(--t-body)}

@media (max-width:980px){
  .sekce__hlava{grid-template-columns:1fr;gap:var(--s6);margin-bottom:var(--s12)}
  .karty{grid-template-columns:repeat(2,1fr)}
  /* Na dotyku hover neexistuje: fotka nahoře, text pod ní na tmavé ploše. */
  .karta--velka,.karta--mala,.karta--mala:last-child{grid-column:span 1;aspect-ratio:auto}
  .karta{aspect-ratio:auto;display:block}
  .karta img{position:static;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transform:none}
  .karta:hover img{transform:none}
  .karta::after{display:none}
  .karta__telo{position:static;padding:var(--s6) 0}
  .karta__stitek{margin-left:0;padding-left:var(--s6);background:transparent}
  .karta:hover .karta__stitek{background:transparent;color:#fff}
  .karta__popis{grid-template-rows:1fr;opacity:1}
  .karta__popis span span{padding-top:var(--s3)}
}
@media (max-width:620px){
  .cinnosti{padding-block:var(--s24) var(--s16)}
  .karty{grid-template-columns:1fr;gap:var(--s6)}
}

/* ==========================================================================
   ČINNOSTI, VARIANTA C (vzor Metrostav)
   Bez nadpisu sekce. Dlaždice vyjedou nahoru a lehce přesáhnou do hera,
   takže na sebe hero a činnosti navazují jedním blokem.
   V klidu ztmavená šedá fotka a bílý text, při najetí žlutá a text černý.
   Bílá na téhle žluté má kontrast 1.7:1 a nedá se přečíst, proto ten překlop.
   Dlaždice jsou na sraz, dělí je bílá vlasová linka.
   ========================================================================== */
/* Nadpis sekce zmizí z obrazu, ale zůstane v kódu pro čtečky a vyhledávače.
   Kdyby se smazal úplně, stránka by skočila z H1 rovnou na H3. */
[data-varianta="c"] .sekce__hlava{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0
}
[data-varianta="c"] .hero__obsah{padding-bottom:calc(var(--s16) + 104px)}
[data-varianta="c"] .cinnosti{padding-top:0}
[data-varianta="c"] .karty{
  position:relative;z-index:3;margin-top:-88px;
  grid-template-columns:repeat(5,1fr);gap:1px;background:var(--bg)
}
[data-varianta="c"] .karta--velka,
[data-varianta="c"] .karta--mala{grid-column:span 1;aspect-ratio:3/4;background:var(--ink-deep);color:#fff}

/* ---- CHOREOGRAFIE NAJETÍ ----
   Když se všechno rozjede naráz a stejně rychle, vypadá to jako přepnutí
   vypínače. Proto má každá vrstva jinou délku a jiný start, stejně jako
   naše šipka v tlačítku, kde se nejdřív dokreslí čára a až pak popojede
   hrot. Pořadí je: barva plochy, text, popis, šipka. Fotka se pod tím
   celou dobu pomalu přibližuje, o dost déle než zbytek.
   Odjetí je vždy rychlejší než najetí, jinak by karta působila lepkavě. */

/* 1. plocha, vede a je nejrychlejší */
[data-varianta="c"] .karta::after{
  background:rgba(20,17,18,.32);transition:background .34s var(--ease)
}
[data-varianta="c"] .karta:hover::after,
[data-varianta="c"] .karta:focus-visible::after{
  background:rgba(255,203,4,.8);transition:background .24s var(--ease)
}
/* spodní ztmavení pod textem, o chlup pozadu za plochou */
[data-varianta="c"] .karta::before{
  content:"";position:absolute;inset:0;z-index:-1;transition:opacity .34s var(--ease);
  background:linear-gradient(to top,
    rgba(20,17,18,.9) 0%,rgba(20,17,18,.55) 32%,rgba(20,17,18,0) 64%)
}
[data-varianta="c"] .karta:hover::before,
[data-varianta="c"] .karta:focus-visible::before{opacity:0;transition:opacity .3s var(--ease) .05s}

/* 2. fotka, nejpomalejší vrstva. Přiblížení je sotva znát, ale drží
      pod rychlou barvou klidný spodní tón. */
[data-varianta="c"] .karta img{
  filter:grayscale(1) brightness(.88) contrast(1.02);
  transition:transform .9s var(--ease)
}
[data-varianta="c"] .karta:hover img,
[data-varianta="c"] .karta:focus-visible img{transform:scale(1.05);transition:transform 1.6s var(--ease)}

/* 3. text se překlopí až když je pod ním barva, aby nebyl ani chvíli nečitelný */
[data-varianta="c"] .karta__stitek{
  display:block;background:transparent;margin-left:0;padding:0 var(--s6);color:#fff;
  transition:color .26s var(--ease)
}
[data-varianta="c"] .karta:hover .karta__stitek,
[data-varianta="c"] .karta:focus-visible .karta__stitek{
  background:transparent;color:var(--ink);transition:color .2s var(--ease) .07s
}
[data-varianta="c"] .karta__popis span span{font-size:var(--t-small);padding-top:var(--s3)}
[data-varianta="c"] .karta:hover .karta__popis span span,
[data-varianta="c"] .karta:focus-visible .karta__popis span span{color:var(--ink)}

/* 4. popis se rozbaluje nejdéle a startuje poslední z textů */
[data-varianta="c"] .karta__popis{transition:grid-template-rows .3s var(--ease),opacity .22s var(--ease)}
[data-varianta="c"] .karta:hover .karta__popis,
[data-varianta="c"] .karta:focus-visible .karta__popis{
  transition:grid-template-rows .5s var(--ease) .1s,opacity .34s var(--ease) .12s
}

/* Zjistit více, s naší šipkou z hero tlačítka. */
[data-varianta="c"] .karta__vic{
  display:inline-flex;align-items:center;gap:var(--s3);
  margin:var(--s4) var(--s6) 0;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-mikro);
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  transition:color .26s var(--ease)
}
[data-varianta="c"] .karta:hover .karta__vic,
[data-varianta="c"] .karta:focus-visible .karta__vic{color:var(--ink);transition:color .2s var(--ease) .07s}
/* 5. šipka se dokresluje úplně na konec, je to tečka za celým pohybem */
[data-varianta="c"] .karta:hover .karta__vic .sipka path,
[data-varianta="c"] .karta:focus-visible .karta__vic .sipka path{transition-delay:.2s}

@media (max-width:1240px){
  [data-varianta="c"] .karta__stitek h3{font-size:1.15rem}
}
/* Na telefonu vypadají dlaždice stejně jako na počítači, jen ve dvou
   sloupcích. Hover na dotyku neexistuje, takže popis vidět nebude,
   ale dlaždice je celá odkaz, takže se prostě proklikne. */
@media (max-width:980px){
  [data-varianta="c"] .karty{
    margin-top:-56px;grid-template-columns:repeat(2,1fr);gap:1px
  }
  [data-varianta="c"] .hero__obsah{padding-bottom:calc(var(--s16) + 64px)}
  [data-varianta="c"] .karta--velka,
  [data-varianta="c"] .karta--mala{grid-column:span 1;aspect-ratio:3/4}
  /* text zpátky dovnitř dlaždice, obecné mobilní pravidlo ho vyhazuje ven */
  [data-varianta="c"] .karta{display:block}
  [data-varianta="c"] .karta img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover
  }
  [data-varianta="c"] .karta::after,
  [data-varianta="c"] .karta::before{display:block}
  [data-varianta="c"] .karta__telo{position:absolute;left:0;right:0;bottom:var(--s6)}
  [data-varianta="c"] .karta__stitek{padding:0 var(--s4);background:transparent}
  [data-varianta="c"] .karta__vic{margin-inline:var(--s4)}
  /* popis se na dotyku stejně neukáže, tak ať nezabírá místo */
  [data-varianta="c"] .karta__popis{display:none}
}
@media (max-width:620px){
  [data-varianta="c"] .karta__stitek h3{font-size:1rem}
  [data-varianta="c"] .karta__vic{font-size:.6875rem}
}

/* ---- Varianta C, sekce O společnosti ----
   Bílá plocha jako u služeb, žádná fotka na pozadí. Tmavá sekce hned pod
   pásem tmavých dlaždic dělala z celé stránky jednu hmotu bez místa
   k nadechnutí. Velký nadpis zmizí z obrazu, v kódu zůstane kvůli osnově
   a vyhledávačům. Text běží jedním souvislým odstavcem, takže je sekce
   nižší a fotka vedle něj širší. */
.profil__pozadi{display:none}
.profil__text-c{display:none}
[data-varianta="c"] .profil{background:var(--bg);color:var(--ink)}
[data-varianta="c"] .profil__znak{display:none}
[data-varianta="c"] .profil h2{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0
}
[data-varianta="c"] .profil .znacka span{color:var(--muted)}
/* Ve variantě C běží text jako jeden odstavec, ne jako tři. */
[data-varianta="c"] .profil__text p:not(.profil__text-c){display:none}
[data-varianta="c"] .profil__text-c{display:block;color:var(--muted);max-width:56ch}
[data-varianta="c"] .profil__text p:last-child{color:var(--muted)}
[data-varianta="c"] .profil__dal{color:var(--ink)}
[data-varianta="c"] .profil__mrizka{gap:var(--s16)}
/* vpravo jedna širší fotka místo koláže */
[data-varianta="c"] .kolaz{aspect-ratio:16/9}
[data-varianta="c"] .kolaz__a{grid-column:1 / -1;grid-row:1 / -1}
[data-varianta="c"] .kolaz__b{display:none}

/* Odkaz Zjistit více patří jen do varianty C. */
.karta__vic{display:none}

/* ==========================================================================
   PROFIL SPOLEČNOSTI
   ========================================================================== */
.profil{background:var(--ink);color:#fff;padding-block:var(--s32);position:relative;overflow:hidden}
.profil__znak{position:absolute;right:-6%;top:-14%;width:min(32vw,430px);opacity:.05;pointer-events:none}
.profil__mrizka{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s24);align-items:center}
.profil h2{color:#fff}
.profil__text{margin-top:var(--s8);display:grid;gap:var(--s6);color:#DCD8D5;max-width:54ch}
/* Zvýrazněná slova v běžném textu. Ne celé věty, jen to, co má člověku
   zůstat v hlavě, když text jen přelétne: čím firma disponuje a co postavila.
   Tučné je tmavší než okolní text, takže se to při čtení nepere. */
.profil__text strong{font-weight:600;color:#fff}
[data-varianta="c"] .profil__text strong{color:var(--ink)}
.profil__cisla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--line-dark)}
.profil__cisla dt{font-family:var(--font-display);font-weight:900;font-size:var(--t-cislo);letter-spacing:-.04em;color:var(--yellow);line-height:1}
.profil__cisla dd{margin:var(--s2) 0 0;font-size:var(--t-small);color:var(--muted-dark);line-height:1.4}
.profil__dal{margin-top:var(--s12);color:#fff}
.profil__text p:last-child{color:#fff}
.profil__dal:hover{color:var(--yellow)}
.kolaz{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);aspect-ratio:1/1}
.kolaz__a{grid-column:1 / 6;grid-row:1 / 5;overflow:hidden;border-radius:var(--radius)}
.kolaz__b{grid-column:3 / 7;grid-row:3 / 7;overflow:hidden;border-radius:var(--radius);border-left:8px solid var(--ink);border-top:8px solid var(--ink)}
.kolaz img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){
  .profil{padding-block:var(--s24)}
  .profil__mrizka{grid-template-columns:1fr;gap:var(--s16)}
  .kolaz{order:-1}
}
@media (max-width:560px){ .profil__cisla{grid-template-columns:1fr 1fr} }

/* ==========================================================================
   REFERENCE
   Tmavá sekce s vlastní fotkou na pozadí, odbarvenou do šedé jako ostatní
   tmavé plochy. Stavby jsou skutečné, převzaté ze starého webu.
   ========================================================================== */
.reference{background:var(--sand);padding-block:var(--s32)}
.reference__hlava{
  display:flex;align-items:end;justify-content:space-between;
  gap:var(--s8);margin-bottom:var(--s16)
}
/* Tři dlaždice místo pěti, jinak přesně stejné jako u služeb. Zápis přes
   .reference .karty přebíjí pravidla varianty C, která platí pro pás služeb
   (pět sloupců, přesah do hera, bílé linky). Sem nic z toho nepatří. */
.reference .karty{
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand);
  margin-top:0;position:static
}
.reference .karta--mala{grid-column:span 1;aspect-ratio:4/3}
@media (max-width:980px){
  .reference{padding-block:var(--s24)}
  .reference__hlava{flex-direction:column;align-items:start;gap:var(--s6);margin-bottom:var(--s12)}
  .reference .karty{grid-template-columns:repeat(2,1fr);margin-top:0}
  .reference .karta--mala{aspect-ratio:3/4}
}

/* ==========================================================================
   KDE NÁS NAJDETE
   ========================================================================== */
.mista{background:var(--sand);padding-top:var(--s24);padding-bottom:0}

/* Popisek sekce vlevo nahoře, stejný zápis jako ostatní popisky. */
.mista__stitek{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s12)}
.mista__stitek img{display:none}
.mista__stitek::before{content:"";width:34px;height:2px;background:var(--yellow);flex:none}
.mista__stitek::after{content:"";width:68px;height:2px;background:var(--yellow);flex:none}
.mista__stitek span{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}

/* Pracoviště: skupina oddělená linkou, tlačítko napravo od adresy. */
.mista__mrizka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);padding-bottom:var(--s16)}
.misto h3{margin:0}
.misto__poznamka{margin-top:var(--s3);color:var(--muted);font-size:var(--t-small);max-width:38ch}
.misto__radek{
  margin-top:var(--s6);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap
}
.misto address{font-style:normal;font-size:var(--t-lead);line-height:1.4}
.navigace{
  display:inline-flex;align-items:center;gap:var(--s3);flex:none;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:var(--s3) var(--s6);background:var(--ink-deep);color:#fff;
  transition:background var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)
}
.navigace:hover{background:var(--yellow);color:var(--ink)}
.navigace svg{width:15px;height:15px;fill:currentColor;flex:none}

/* Mapy přes celou šířku obrazovky, barevné, oddělené vlasovou linkou. */
.mapy{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-deep)}
.mapy iframe{width:100%;height:400px;border:0;display:block}

@media (max-width:900px){
  .mista{padding-top:var(--s16)}
  .mista__stitek{margin-bottom:var(--s12)}
  .mista__stitek img{height:58px}
  .mista__hlava{margin-bottom:var(--s12)}
  .mista__mrizka{grid-template-columns:1fr;gap:var(--s8);padding-bottom:var(--s12)}
  /* Adresy jsou pod sebou, tlačítko navigace patří pod adresu, ne vedle ní. */
  .misto__radek{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  /* Na telefonu mapy schované: bez popisků nejde poznat, která patří ke které
     adrese, kradou scroll a tlačítko Otevřít navigaci tu práci odvede líp. */
  .mapy{display:none}
}

/* ==========================================================================
   PATIČKA
   ========================================================================== */
.paticka{position:relative;background:var(--ink-deep);color:#fff;padding-top:var(--s16);overflow:hidden}
.paticka__znak{position:absolute;right:2%;top:var(--s8);width:min(24vw,320px);opacity:.16;pointer-events:none}
.paticka .shell{position:relative;z-index:1}
.paticka__mrizka{display:grid;grid-template-columns:1.15fr 2.1fr .85fr;gap:var(--s12);padding-bottom:var(--s12);border-bottom:1px solid var(--line-dark)}
.paticka__logo{height:34px;width:auto;margin-bottom:var(--s4)}
.paticka__uvod p{color:var(--muted-dark);font-size:var(--t-small);max-width:32ch;line-height:1.6}
.paticka h4{font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 var(--s4)}
.udaje{margin-top:var(--s8);display:grid;gap:var(--s2)}
.udaje dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);font-size:var(--t-mikro)}
.udaje dt{color:var(--muted-dark)}
.udaje dd{margin:0;color:#DCD8D5}
.udaje__zapis{margin-top:var(--s3);color:var(--muted-dark);font-size:var(--t-mikro);line-height:1.55;max-width:34ch}
.kontakty{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s12)}
.kontakt__role{font-family:var(--font-display);font-weight:600;font-size:var(--t-mikro);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--line-dark)}
.kontakt__jmeno{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.02em;color:#fff}
.kontakt__radek{display:block;color:#DCD8D5;font-size:var(--t-small);text-decoration:none;transition:color var(--t-dotek) var(--ease);margin-top:var(--s1)}
.kontakt__radek:hover{color:var(--yellow)}
.kontakt__radek--tel{font-weight:600;color:#fff}
.odkazy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.odkazy a{color:#DCD8D5;font-size:var(--t-small);text-decoration:none;display:inline-block;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)}
.odkazy a:hover{color:#fff;border-bottom-color:var(--yellow)}
.paticka__spodek{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2) var(--s8);padding-block:var(--s6);color:var(--muted-dark);font-size:var(--t-mikro)}
.paticka__spodek a{color:#DCD8D5;text-decoration:none;border-bottom:1px solid var(--line-dark);transition:border-color var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)}
.paticka__spodek a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.autor{display:inline-flex;align-items:center;gap:var(--s3)}
.autor a{border:0;display:inline-flex;align-items:center;opacity:.85;transition:opacity var(--t-dotek) var(--ease)}
.autor a:hover{opacity:1}
.autor img{height:20px;width:auto}
@media (max-width:1100px){
  .paticka__mrizka{grid-template-columns:1fr 1.6fr;gap:var(--s8) var(--s12)}
  .paticka__odkazy-sloupec{grid-column:1 / -1}
  .odkazy{flex-direction:row;flex-wrap:wrap;gap:var(--s3) var(--s8)}
}
@media (max-width:760px){ .paticka__mrizka{grid-template-columns:1fr;gap:var(--s8)} .kontakty{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .kontakty{grid-template-columns:1fr} .paticka__spodek{flex-direction:column;align-items:flex-start} }

@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} }

/* ==========================================================================
   REFERENČNÍ DLAŽDICE
   V klidu jen jméno stavby a Zjistit více. Po najetí přibude jediná věc,
   období, protože to je to, co u reference rozhoduje. Zbytek údajů patří
   do detailu, ne na dlaždici, jinak je z toho tabulka a ne fotka.
   Fotky staveb zůstávají barevné, na rozdíl od dlaždic služeb. Služby jsou
   sjednocený systém, stavby jsou konkrétní místa a barva je dělá skutečné.
   ========================================================================== */
[data-varianta="c"] .reference .karta img{filter:none}
.reference .karta__popis span span{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.12em;text-transform:uppercase;padding-top:var(--s2)
}

/* ==========================================================================
   MODÁLNÍ OKNO = FOTOGALERIE STAVBY
   Žádný text, jen fotka. Křížek vpravo nahoře, šipky po stranách.
   Údaje o stavbě si člověk přečetl na dlaždici, tady chce vidět práci.
   Bez JavaScriptu odkaz normálně odejde na stránku referencí.
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--s12) var(--s16);
  opacity:0;visibility:hidden;transition:opacity var(--t-stav) var(--ease),visibility var(--t-stav)
}
.modal[data-otevreno="true"]{opacity:1;visibility:visible}
.modal__stin{position:absolute;inset:0;background:rgba(12,10,11,.94);border:0;padding:0;cursor:pointer}
.modal__okno{
  position:relative;width:min(1280px,100%);
  transform:scale(.985);transition:transform var(--t-stav) var(--ease)
}
.modal[data-otevreno="true"] .modal__okno{transform:none}
.modal__foto{
  width:100%;max-height:calc(100vh - 8rem);object-fit:contain;display:block;
  background:var(--ink-deep)
}
/* Ovládání musí být vidět i v klidu. Na černém pozadí by tmavé tlačítko
   splynulo s podkladem, proto je v klidu světlé průsvitné a žluté až
   při najetí. */
.modal__zavrit{
  position:absolute;top:0;right:0;z-index:2;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)
}
.modal__zavrit:hover{background:var(--yellow);color:var(--ink)}
.modal__zavrit svg{width:18px;height:18px;stroke:currentColor;stroke-width:2}
/* Šipky sedí vně fotky, aby nepřekrývaly práci na ní. */
.modal__sip{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background var(--t-dotek) var(--ease),color var(--t-dotek) var(--ease)
}
.modal__sip:hover{background:var(--yellow);color:var(--ink)}
.modal__sip svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.modal__sip--vlevo{left:calc(var(--s16) * -1)}
.modal__sip--vpravo{right:calc(var(--s16) * -1)}
@media (max-width:1100px){
  .modal{padding:var(--s6)}
  .modal__sip--vlevo{left:0}
  .modal__sip--vpravo{right:0}
  .modal__sip{background:rgba(255,255,255,.2)}
}
/* Kolikátá fotka z kolika. Pod fotkou na střed, ať nepřekáží obrazu. */
.modal__pocitadlo{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--s8) * -1);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.72;
  margin:0;white-space:nowrap
}
@media (max-width:620px){
  .modal__sip,.modal__zavrit{width:46px;height:46px}
  .modal__pocitadlo{bottom:calc(var(--s6) * -1)}
}

/* ==========================================================================
   PODSTRÁNKY (reference, kontakty)
   Hlava podstránky používá přesně stejné díly jako hlava sekce na úvodní
   stránce: popisek se žlutými linkami vlevo, nadpis pod ním, doprovodný
   text vpravo. Nic vlastního, aby web nedrhl sám o sebe.
   ========================================================================== */
/* Hlavička je tu tmavá od začátku, pod ní není fotka. A logo je rovnou
   v malé velikosti, protože přes neprůhlednou lištu nemá kam přesahovat. */
.podstranka .hlavicka{
  background:rgba(20,17,18,.96);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom-color:var(--line-dark)
}
.podstranka .hlavicka__logo img{transform:translateY(3px) scale(.5172)}
@media (max-width:900px){ .podstranka .hlavicka__logo img{transform:translateY(5px) scale(.75)} }

.drobecky{padding-top:calc(var(--navbar) + var(--s8));font-size:var(--t-small);color:var(--muted)}
.drobecky a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.drobecky a:hover{color:var(--ink);border-bottom-color:var(--yellow)}
.drobecky span{margin-inline:var(--s3)}
.drobecky span[aria-current]{margin-left:0;color:var(--ink);font-weight:600}

.hlava-stranky{padding-block:var(--s12) var(--s8)}
/* stejná mřížka i stejné poměry jako .sekce__hlava na úvodní stránce */
.hlava-stranky__mrizka{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s16);align-items:start}
.hlava-stranky h1{font-size:var(--t-h1);text-transform:uppercase;letter-spacing:-.01em;line-height:1.14}
.hlava-stranky__lead{margin-top:var(--s6);color:var(--muted);max-width:52ch;font-size:var(--t-lead);line-height:1.5}
@media (max-width:900px){
  .hlava-stranky__mrizka{grid-template-columns:1fr;gap:var(--s6)}
  .hlava-stranky{padding-block:var(--s8) var(--s12)}
}

/* Pruh čísel a rychlých kontaktů pod hlavou stránky, přes celou šířku. */
.pruh{padding-bottom:var(--s16)}
.cisla{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);
  padding-top:var(--s8);border-top:1px solid var(--line)}
.cisla dt{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)
}
.cisla dd{
  margin:0;font-family:var(--font-display);font-weight:900;
  font-size:var(--t-cislo);letter-spacing:-.04em;line-height:1
}
@media (max-width:620px){ .cisla{grid-template-columns:1fr 1fr;gap:var(--s6)} .cisla div:last-child{grid-column:1 / -1} }

.reference--vsechny{padding-top:0}
.reference .karty--ctyri{grid-template-columns:repeat(4,1fr)}
.reference .karty--ctyri .karta--mala{aspect-ratio:4/5}
@media (max-width:1200px){ .reference .karty--ctyri{grid-template-columns:repeat(3,1fr)} }
@media (max-width:980px){ .reference .karty--ctyri{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .reference .karty--ctyri{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------
   BLOKY V HLAVĚ KONTAKTŮ
   Místo úvodního odstavce rovnou to, kvůli čemu na kontakty někdo jde:
   tři telefony podle důvodu volání, fakturační údaje a sítě. Bloky jsou
   na sraz jako dlaždice služeb, dělí je jen vlasová linka.
   -------------------------------------------------------------------------- */
.bloky{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.blok{background:var(--sand);padding:var(--s6);display:flex;flex-direction:column}
.blok--siroky{grid-column:span 2}
.blok__stitek{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)
}
.blok__pozn{margin-top:auto;padding-top:var(--s4);font-size:var(--t-small);color:var(--muted)}

/* Telefonní bloky jsou tmavé, protože jsou to jediné tři věci na stránce,
   na které se má kliknout hned. */
.blok--tel{
  background:var(--ink-deep);color:#fff;text-decoration:none;
  transition:background var(--t-stav) var(--ease),color var(--t-stav) var(--ease)
}
.blok--tel .blok__stitek{color:var(--yellow);transition:color var(--t-stav) var(--ease)}
.blok--tel .blok__pozn{color:var(--muted-dark);transition:color var(--t-stav) var(--ease)}
.blok__cislo{
  font-family:var(--font-display);font-weight:900;font-size:var(--t-h3);
  letter-spacing:-.04em;line-height:1
}
.blok--tel:hover{background:var(--yellow);color:var(--ink)}
.blok--tel:hover .blok__stitek,.blok--tel:hover .blok__pozn{color:var(--ink)}

@media (max-width:980px){
  .bloky{grid-template-columns:repeat(2,1fr)}
  .blok--siroky{grid-column:span 2}
}
@media (max-width:620px){ .bloky{grid-template-columns:1fr} .blok--siroky{grid-column:span 1} }

/* Tři sloupce podle členění, které má firma na stávajícím webu.
   Bez oddělovacích linek. Skupiny drží pohromadě samy, protože nadpis
   nese žlutou linku a jména jsou vysázená tučně. Linka mezi každými
   dvěma lidmi jen dělala mřížku tam, kde stačí mezera. */
.lide{padding-block:var(--s16) var(--s24)}
.lide__mrizka{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s12)}
.skupina h2{
  font-size:var(--t-h3);text-transform:uppercase;letter-spacing:-.01em;
  padding-bottom:var(--s4);margin-bottom:var(--s6);border-bottom:3px solid var(--yellow);
  min-height:5.5rem;display:flex;align-items:flex-end
}
.skupina__lide{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.osoba{
  padding:var(--s3) var(--s4);margin-inline:calc(var(--s4) * -1);
  transition:background var(--t-stav) var(--ease)
}
.osoba:hover{background:var(--sand)}
.osoba__role{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.osoba__jmeno{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.025em;margin:2px 0 var(--s2)
}
/* Telefon i mail jsou odkazy, tak ať tak i vypadají: podtržení se při
   najetí dokreslí zleva doprava, stejný pohyb jako u šipky v tlačítku. */
/* Každý odkaz na vlastním řádku pod sebou. width:fit-content je tu proto,
   aby se žluté podtržení kreslilo jen pod textem, ne přes celý sloupec. */
.osoba__radek{
  display:block;width:fit-content;color:var(--muted);font-size:var(--t-small);
  text-decoration:none;position:relative;transition:color var(--t-dotek) var(--ease)
}
.osoba__radek::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-stav) var(--ease)
}
.osoba__radek:hover::after{transform:scaleX(1)}
.osoba__radek:hover{color:var(--ink)}
/* Telefon má stejnou váhu jako mail, jen tmavší. Když měl váhu jména,
   pral se s ním o pozornost a v každé buňce byly dva stejně silné texty. */
.osoba__radek--tel{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .lide__mrizka{grid-template-columns:1fr;gap:var(--s8)}
  .skupina h2{min-height:0}
}

/* Firemní údaje v hlavě kontaktů: jeden tichý blok na písku se žlutou
   hranou, stejný jazyk jako sdělení pro partnery níž. Sítě sedí pod
   nadpisem vlevo, ať pravý sloupec nese jen fakta. */
.firma{
  margin:0;border-left:2px solid var(--yellow);
  padding:var(--s2) 0 var(--s2) var(--s6);align-self:center;max-width:44ch
}
.firma__nazev{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.firma__adresa{margin-top:var(--s2);font-size:var(--t-small);color:var(--muted);font-style:normal}
.firma__ic{margin-top:var(--s3);font-size:var(--t-small)}
.firma__ic b{font-weight:600}
.firma__ic span+span{margin-left:var(--s6)}
.firma__zapis{margin-top:var(--s3);font-size:var(--t-mikro);color:var(--muted);line-height:1.5}

.socky__nadpis{
  margin-top:var(--s8);font-family:var(--font-display);font-weight:700;
  font-size:var(--t-mikro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.socky{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;gap:var(--s3)}
.socky a{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);color:var(--ink);
  transition:background var(--t-dotek) var(--ease),border-color var(--t-dotek) var(--ease)
}
.socky a:hover{background:var(--yellow);border-color:var(--yellow)}
.socky svg{width:20px;height:20px}

/* Sdělení pro obchodní partnery. Žlutý pruh vlevo, ať to nezapadne
   mezi kontakty, ale zároveň to nekřičí přes celou obrazovku. */
.oznameni{padding-bottom:var(--s24)}
.oznameni__box{background:var(--sand);border-left:4px solid var(--yellow);padding:var(--s8)}
.oznameni__stitek{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)
}
.oznameni h2{font-size:var(--t-h3);margin-bottom:var(--s4)}
.oznameni__text{max-width:76ch;color:var(--muted);line-height:1.6}
.oznameni__text strong{font-weight:600;color:var(--ink)}
.oznameni__text a{
  color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--yellow);
  transition:border-color var(--t-dotek) var(--ease)
}
/* Stejná řeč jako zbytek webu: při najetí se přebarví jen linka, žádný zvýrazňovač. */
.oznameni__text a:hover{border-bottom-color:var(--ink)}
@media (max-width:620px){ .oznameni__box{padding:var(--s6)} }

.firemni-udaje{
  margin:var(--s16) 0 0;padding-top:var(--s8);border-top:2px solid var(--yellow);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s8);max-width:62ch
}
.firemni-udaje dt{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-mikro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)
}
.firemni-udaje dd{margin:0;font-size:var(--t-small)}
.mista .firemni-udaje{padding-bottom:var(--s16)}
@media (max-width:620px){ .firemni-udaje{grid-template-columns:1fr;gap:var(--s1)} .firemni-udaje dd{margin-bottom:var(--s3)} }

/* Fakturační adresa v patičce musí být klikatelná a vidět. */
.udaje dd a{color:#DCD8D5;text-decoration:none;border-bottom:1px solid var(--line-dark);transition:color var(--t-dotek) var(--ease),border-color var(--t-dotek) var(--ease)}
.udaje dd a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}

/* ==========================================================================
   TOAST — ROZPRACOVANÉ SEKCE. Před spuštěním webu smazat spolu s JS.
   Vpravo nahoře pod hlavičkou, bílý se žlutým pruhem. Vjede zprava
   s přestřelem, aby si ho člověk všiml.
   ========================================================================== */
.toast{
  position:fixed;right:var(--s6);top:calc(var(--navbar) + var(--s4));z-index:250;
  max-width:min(92vw,440px);padding:var(--s4) var(--s6);
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-small);line-height:1.5;
  border-left:4px solid var(--yellow);border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(20,17,18,.28);
  opacity:0;transform:translateX(calc(100% + var(--s8)));pointer-events:none;
  transition:opacity var(--t-stav) var(--ease),transform var(--t-stav) var(--ease)
}
.toast[data-viditelny="true"]{
  opacity:1;transform:translateX(0);
  animation:toast-vjezd .55s cubic-bezier(.2,1.35,.4,1) both
}
@keyframes toast-vjezd{
  from{opacity:0;transform:translateX(calc(100% + var(--s8)))}
  to{opacity:1;transform:translateX(0)}
}
@media (max-width:620px){ .toast{right:var(--s4);top:calc(var(--navbar) + var(--s2))} }
@media (prefers-reduced-motion:reduce){
  .toast{transform:none;transition:opacity var(--t-stav) var(--ease)}
  .toast[data-viditelny="true"]{animation:none}
}