/* ============================================================================
   PETER STAVITELSTVI s.r.o.
   styles.css

   Struktura souboru:
   01. Fonty
   02. Designové tokeny (barvy, typografie, rozestupy)
   03. Reset a základní typografie
   04. Pomocné třídy
   05. Tlačítka
   06. Hlavička a navigace
   07. Hero
   08. Sekce a nadpisy
   09. Služby (karty)
   10. Postup (kroky)
   11. Realizace (filtry, galerie, lightbox)
   12. O nás
   13. Kontakt a formulář
   14. Patička
   15. Animace
   16. Responzivita
   17. Tisk

   Poznámka k metodice: názvy tříd vychází z BEM (blok__prvek--modifikátor),
   aby se dalo v projektu bezpečně přidávat bez kolizí specificity.
   ========================================================================= */


/* ============================================================================
   01. FONTY
   Načítáme lokálně ze složky /fonts. Řezy jsou zúžené jen na znaky,
   které web opravdu používá (latinka + česká diakritika).
   font-display: swap = text je vidět okamžitě, nečeká se na font.
   ========================================================================= */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   02. DESIGNOVÉ TOKENY
   Všechny barvy a rozestupy jsou na jednom místě. Změna značky = změna zde.
   Paleta vychází z loga: grafit + okrová. Podklad je chladně šedý (beton),
   ne krémový - aby web nepůsobil jako obvyklá šablona.
   ========================================================================= */
:root {
  /* Barvy */
  --ink:         #17191b;   /* hlavní text, tmavé plochy */
  --ink-soft:    #3b3f43;
  --slate:       #6a6f69;   /* doplňkový text */
  --paper:       #eaebe7;   /* podklad stránky - beton */
  --paper-2:     #f5f5f2;   /* světlejší plochy, karty */
  --white:       #ffffff;
  --ochre:       #e5a324;   /* akcent z loga */
  --ochre-deep:  #bd851a;   /* hover, kontrastní text na světlé */
  --line:        #d2d4cd;   /* linky a rámečky */
  --line-dark:   #2e3134;   /* linky na tmavém podkladu */

  /* Typografie */
  --font-display: 'Archivo Expanded', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Rozestupy - jedna stupnice pro celý web */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  /* Rozměry */
  --shell:       1600px;   /* max. šířka obsahu - široký, prostorný layout */
  --gutter:      1.25rem;  /* boční okraj na mobilu */
  --header-h:    68px;
  --radius:      2px;      /* téměř ostré rohy - stavařská přesnost */
  --radius-lg:   4px;

  /* Přechody */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.35s;
}


/* ============================================================================
   03. RESET A ZÁKLADNÍ TYPOGRAFIE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }



button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

p { margin: 0 0 var(--space-3); }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Viditelný focus pro klávesnici - povinná dostupnost */
:focus-visible {
  outline: 3px solid var(--ochre);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--white);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}


/* ============================================================================
   04. POMOCNÉ TŘÍDY
   ========================================================================= */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.eyebrow .mono {
  font-size: 0.75rem;
  padding: 2px 7px;
  background: var(--ochre);
  color: var(--ink);
  letter-spacing: 0.06em;
}

.accent { color: var(--ochre-deep); }

/* --- Signature prvek: měřicí linka ----------------------------------------
   Dělič sekcí ve tvaru svinovacího metru. Malé rysky po 12 px,
   každá pátá delší. Je to odkaz na měření na stavbě - a zároveň
   jediný dekorativní prvek na webu, takže zůstává zapamatovatelný. */
.rule {
  position: relative;
  height: 14px;
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
  /* Proměnnou --mx posouvá skript podle polohy kurzoru */
  --mx: 50%;
}
.rule::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px 12px
  );
}
.rule::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink) 0 1px,
    transparent 1px 60px
  );
  opacity: 0.55;
}

/* Jezdec metru: okrová ryska se štítkem, který ukazuje pozici
   kurzoru v procentech šířky - jako posuvné měřítko. Objeví se
   jen při najetí myší, na dotykových zařízeních neexistuje. */
.rule__cursor {
  position: absolute;
  top: -1px;
  left: var(--mx);
  height: 14px;
  width: 2px;
  background: var(--ochre);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.rule__cursor::after {
  content: attr(data-label);
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  background: var(--ink);
  color: var(--ochre);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media (hover: hover) {
  .rule:hover .rule__cursor { opacity: 1; }
}


/* ============================================================================
   05. TLAČÍTKA
   ========================================================================= */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-fill: var(--ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 54px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Inkoustová výplň: tmavá vrstva vyjede zespodu jako stěrka */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
@media (hover: hover) {
  .btn:hover { color: var(--white); border-color: var(--btn-fill); }
  .btn:hover::before { transform: translateY(0); }
}

/* Šipka u primární akce - při najetí se vysune doprava */
.btn--primary .btn__arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .btn--primary:hover .btn__arrow { transform: translateX(5px); }
}

.btn__mono {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.btn--primary {
  --btn-bg: var(--ochre);
  --btn-bd: var(--ochre);
  --btn-fg: var(--ink);
}

.btn--outline {
  --btn-bg: transparent;
}

/* Telefon v hlavičce - bez rámečku, jen číslo.
   Okrové podtržení vyjede zleva při najetí. */
.nav__phone {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.nav__phone::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__phone:hover::after { transform: scaleX(1); }

/* Vlna po číslicích. Skript rozdělí číslo na jednotlivé znaky a každému
   dá pořadové číslo. Zpoždění se počítá z něj, takže číslice vyskočí
   jedna po druhé zleva doprava a zase se srovnají do řádku. */
.nav__phone .vlna {
  display: inline-block;
  will-change: transform;
}
@keyframes vlnaCislice {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-7px); }
  60%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.nav__phone:hover .vlna,
.nav__phone:focus-visible .vlna {
  animation: vlnaCislice 0.46s var(--ease) both;
  animation-delay: calc(var(--i) * 0.035s);
}


/* ============================================================================
   06. HLAVIČKA A NAVIGACE
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(234, 235, 231, 0.88); /* fallback */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(234, 235, 231, 0.96); /* fallback */
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}


/* Logo ze dvou dílů: domek + nápis.
   Mezera mezi nimi je 55 px na původní výšce 230 px, tedy 0.239 výšky.
   Když se logo zvětší nebo zmenší, mezera se přepočítá sama a logo
   vypadá přesně jako jeden obrázek. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.239);
  flex: 0 0 auto;
}
.logo__znak,
.logo__text {
  display: block;
  width: auto;
  height: var(--logo-h);
}

/* Domek při najetí myší poskočí. Otáčí se kolem spodní hrany,
   takže to vypadá, jako by se opřel a nadskočil - ne jako by
   se točil kolem středu. */
.logo__znak {
  transform-origin: 50% 85%;
  will-change: transform;
}
@keyframes domekPoskok {
  0%   { transform: translateY(0)    rotate(0deg)    scale(1); }
  28%  { transform: translateY(-5px) rotate(-5deg)   scale(1.08); }
  52%  { transform: translateY(1px)  rotate(3deg)    scale(0.98); }
  74%  { transform: translateY(-2px) rotate(-1.5deg) scale(1.03); }
  100% { transform: translateY(0)    rotate(0deg)    scale(1); }
}
.logo:hover .logo__znak,
.logo:focus-visible .logo__znak {
  animation: domekPoskok 0.65s var(--ease) both;
}

.header__logo { --logo-h: 34px; }

/* Telefonní ikona - na mobilu nejrychlejší cesta ke konverzi */
.header__call {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.header__call svg { width: 20px; height: 20px; fill: var(--ink); }

.burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobilní menu - výsuvný panel */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter) var(--space-5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.nav__list {
  display: grid;
  gap: 2px;
}
.nav__link {
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line);
}
.nav__link.is-current { color: var(--ochre-deep); }


/* ============================================================================
   06b. UKAZATEL PRŮBĚHU ČTENÍ
   Tenký sloupec u pravého okraje okna. Jak uživatel roluje dolů,
   zalévá se okrovou; při návratu nahoru zase klesá. Výšku řídí
   proměnná --sp, kterou počítá skript.
   ========================================================================= */
/* Systémový posuvník skryjeme - jeho roli přebírá okrový pruh.
   Rolování myší, klávesnicí i dotykem funguje beze změny. */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* starší Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; }

.progress {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  width: 7px;
  height: 100vh;
  background: rgba(23, 25, 27, 0.08);
  border-left: 1px solid rgba(23, 25, 27, 0.06);
  pointer-events: none;
}
.progress__fill {
  display: block;
  width: 100%;
  height: calc(var(--sp, 0) * 100%);
  background: var(--ochre);
  transition: height 0.12s linear;
}

@media (max-width: 599px) {
  .progress { width: 4px; }
}


/* ============================================================================
   07. HERO
   Asymetrie: text vlevo, fotografie vpravo přetéká za okraj mřížky.
   ========================================================================= */
.hero {
  padding-top: var(--space-5);
}

.hero__inner {
  display: grid;
  gap: var(--space-5);
}

.hero__title {
  font-size: clamp(2.4rem, 11vw, 4.6rem);
  line-height: 0.96;
  margin-bottom: var(--space-4);
}

.hero__lead {
  max-width: 42ch;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  font-weight: 600;
  line-height: 1.6;
}
.hero__lead em {
  font-style: normal;
  color: var(--ochre-deep);
}

.hero__actions {
  display: flex;
  justify-content: center;
  margin: var(--space-5) 0 var(--space-5);
}

/* Hlavní akce: kapitálky, širší, výraznější */
.btn--big {
  min-height: 62px;
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Jedna věta pod tlačítky - velký display řez s okrovou linkou.
   Nahrazuje původní výčet: jeden silný argument řekne víc než tři. */
.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__note-rule {
  flex: 0 0 auto;
  width: 46px;
  height: 3px;
  background: var(--ochre);
}

/* --- Štítek nad titulkem ---------------------------------------------------
   Technický štítek místo bledého řádku: rámeček, okrová hrana a bod,
   dvě části oddělené svislou linkou. Působí jako typový štítek na stroji. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 var(--space-4);
  padding: 0.6rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ochre);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.tag__main { color: var(--ink); }
.tag__sep {
  width: 1px;
  height: 14px;
  background: var(--line);
  flex: 0 0 auto;
}
.tag__sub { color: var(--ochre-deep); }

/* --- Triptych v hero -------------------------------------------------------
   Tři svislé snímky vedle sebe, první širší - vzniká rytmus a oko
   jde zleva doprava. Společný šikmý ořez drží celek pohromadě.
   Snímky jsou lehce vybledlé, aby nepřebily titulek.               */
.hero__media {
  position: relative;
  margin: 0;
}

.collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  /* Poměr stran drží celek koláže - obě buňky tak mají vždy
     stejnou výšku a šikmý řez jde skrz fotografie, ne skrz
     prázdné pozadí pod kratší z nich. */
  aspect-ratio: 8 / 5.4;
  /* Jedna šikmá linie zdola: vlevo mělká, vpravo hlubší. */
  clip-path: polygon(0 0, 100% 0, 100% 87%, 0 96%);
}
.collage__cell {
  min-height: 0;
  min-width: 0;
}

.collage__cell {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
}
.collage__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.04) brightness(1.04);
  transform: scale(1.001);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  will-change: transform;
}
/* Najetí myší: snímek ožije - barvy se vrátí, jemný nájezd,
   okrová linka podtrhne spodní hranu buňky. */
.collage__cell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .collage__cell:hover img {
    transform: scale(1.045);
    filter: saturate(0.95) contrast(1.05) brightness(1.02);
  }
  .collage__cell:hover::after { transform: scaleX(1); }
}

/* Jemný závoj v barvě podkladu - fotky se zasadí do stránky
   a přestanou působit jako nalepený cizí obrázek. */
.collage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(234, 235, 231, 0.45) 8%, rgba(234, 235, 231, 0) 26%),
    linear-gradient(to top, rgba(234, 235, 231, 0.5) 0%, rgba(234, 235, 231, 0.25) 10%, rgba(234, 235, 231, 0) 34%),
    linear-gradient(to right, rgba(234, 235, 231, 0.26) 0%, rgba(234, 235, 231, 0) 38%);
}

.hero__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
}


/* ============================================================================
   08. SEKCE A NADPISY
   ========================================================================= */
.section { padding-top: var(--space-7); }

.section__head {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

/* Varianta pro hlavní sekce: předtitulek zůstává vlevo,
   titulek a perex jsou na středu a o řád výraznější. */
.section__head--feature {
  max-width: none;
}
.section__head--feature .section__title,
.section__head--feature .section__lead {
  text-align: center;
  margin-inline: auto;
}

.section__title--xl {
  font-size: clamp(2.3rem, 6.5vw, 4.4rem);
  line-height: 0.98;
  margin-bottom: var(--space-4);
}

.section__lead--strong {
  max-width: 46ch;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.6;
}
.section__lead--strong em {
  font-style: normal;
  color: var(--ochre-deep);
}

.section__title {
  font-size: clamp(1.9rem, 7vw, 3rem);
  margin-bottom: var(--space-3);
}

.section__lead {
  color: var(--slate);
  font-size: 1.02rem;
  max-width: 50ch;
}

/* Tmavá sekce - vizuální předěl uprostřed stránky */
.section--dark {
  margin-top: var(--space-7);
  padding-block: var(--space-7);
  background: var(--ink);
  color: var(--paper);
}
.section--dark .section__lead,
.section--dark .eyebrow { color: #9aa09a; }
.section--dark .eyebrow .mono { color: var(--ink); }


/* ============================================================================
   09. SLUŽBY (KARTY)
   Samostatné plakety na podkladu: každá služba má vlastní ikonovou
   destičku, výrazný titulek a plnokrevný popis. Při najetí destička
   vzplane okrovou, karta se nadzvedne a spodní hranou projede linka.
   ========================================================================= */
.cards {
  display: grid;
  gap: var(--space-3);
}

.card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease),
              border-color 0.4s var(--ease),
              background 0.4s var(--ease);
}
.card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--ochre);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: width 0.45s var(--ease);
}

/* --- Ikonová destička ------------------------------------------------------
   Kovový štítek se zkoseným rohem, uvnitř ikona služby.

   Skladba tří vrstev:
     .card__plaque          grafitový rámeček; ve zkoseném rohu prosvítá
                            okrový klín, jako by byl plech ohnutý
     .card__plaque::before   světlý líc destičky, zkosení rovnoběžné
                            s vnějším - jako u frézované tabulky
     .card__plaque::after    samotná ikona, vykreslená přes CSS masku.
                            Maskou je PNG, barvu určuje background-color,
                            takže ikona jde libovolně přebarvit a nikdy
                            se nerozostří.

   Modifikátory --nazev jen vyměňují soubor masky.
   ------------------------------------------------------------------------ */
.card__plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  background: linear-gradient(225deg, var(--ochre) 0 13px, var(--ink) 13px);
  transition: transform 0.45s var(--ease);
}
.card__plaque::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  background: var(--white);
  transition: background 0.45s var(--ease);
}
.card__plaque svg {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: auto;
  color: var(--ink);
  transition: color 0.45s var(--ease), transform 0.45s var(--ease);
}

.card__title {
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  margin: 0;
}

.card__text {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-5px);
    border-color: var(--ink);
    background: var(--white);
  }
  .card:hover::after { width: 100%; }
  .card:hover .card__plaque {
    transform: rotate(-3deg) scale(1.05);
  }
  .card:hover .card__plaque::before {
    background: var(--ink);
  }
  .card:hover .card__plaque svg {
    color: var(--ochre);
    transform: scale(1.05);
  }
}

/* ============================================================================
   09b. PŮSOBNOST - MAPA KRAJŮ
   Mapa stojí vlevo a mírně přetéká za okraj mřížky. Kraje jsou v klidu
   papírové s grafitovou linkou; jakmile sekce vjede do výřezu, zalévají
   se okrovou vlnou od Pardubického kraje ven (pořadí nese --i, zpoždění
   počítá CSS). Popisky leží přímo v mapě. Čísla v panelu naskakují
   počítadlem ve skriptu.
   ========================================================================= */
.reach {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.reach__map {
  position: relative;
  margin: 0;
  min-width: 0;
}
/* Vybledlá okrová záře za mapou - měkce ji usadí do stránky */
.reach__map::before {
  content: '';
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 58% at 48% 50%,
    rgba(229, 163, 36, 0.20) 0%,
    rgba(229, 163, 36, 0.08) 45%,
    transparent 72%);
  pointer-events: none;
}

.czmap__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.czmap__kraj {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
  /* zalití vlnou má zpoždění podle pořadí; zdvih pod myší je okamžitý */
  transition: fill 0.7s var(--ease) calc(var(--i) * 90ms),
              transform 0.35s var(--ease),
              filter 0.35s var(--ease);
}
.reach.is-live .czmap__kraj {
  fill: var(--ochre);
}

/* Popisky: grafitové, drobné, technické. Po zalití zůstávají čitelné. */
/* Popisky krajů.
   Pozici i velikost počítá skript nad geometrií kraje: hledá bod
   nejdál od hranice a největší kegl, při kterém se celé jméno vejde
   dovnitř polygonu. Proto je font-size v atributu u každého <text>
   a tady se nastavuje jen styl. Velikost se s mapou škáluje sama,
   takže mobil i desktop drží stejný poměr. */
.czmap__label {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
  /* jemný světlý lem oddělí text od hranic pod ním */
  paint-order: stroke;
  stroke: rgba(245, 245, 242, 0.5);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* Odlepení kraje pod myší: posun nahoru-doleva a tvrdý ofsetový
   stín bez rozostření - kraj se zvedne jako papírový výřez. */
@media (hover: hover) {
  .czmap__kraj:hover {
    fill: var(--ochre-deep);
    transform: translate(-5px, -7px);
    filter: drop-shadow(6px 8px 0 rgba(23, 25, 27, 0.22));
  }
}

.reach__lead {
  text-align: left;
  margin-inline: 0;
}

.reach__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-4);
  margin: var(--space-5) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.reach__stat dt {
  color: var(--slate);
  font-size: 0.7rem;
  margin-bottom: 4px;
}
.reach__stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
}
.reach__plus { color: var(--ochre-deep); }
.reach__stat p {
  margin: 6px 0 0;
  color: var(--slate);
  font-size: 0.88rem;
}

@media (min-width: 900px) {
  .reach {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-6);
  }
  /* mapa mírně vyjíždí vlevo za mřížku - zrcadlí koláž v hero */
  .reach__map {
    margin-left: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--gutter)) / 2);
  }
}


/* ============================================================================
   10. POSTUP - HARMONOGRAM
   Sekce je stavební harmonogram: kolejnice s ryskami, na ní čtyři uzly
   se zkoseným rohem (stejný jazyk jako destičky u služeb). Jak uživatel
   sekcí prochází, kolejnice se zalévá okrovou barvou a uzly se jeden po
   druhém rozsvěcují - postup na stránce kopíruje postup na stavbě.

   Průběh drží proměnná --p (0-1), kterou počítá skript podle scrollu.
   Na mobilu je kolejnice svislá, na desktopu vodorovná.
   ========================================================================= */
.track {
  position: relative;
  --p: 0;
  padding-left: 46px;
}

/* --- Kolejnice ------------------------------------------------------------ */
.track__rail {
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.22) 0 1px,
      transparent 1px 9px),
    rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.track__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--p) * 100%);
  background: var(--ochre);
  box-shadow: 0 0 18px rgba(229, 163, 36, 0.45);
  transition: height 0.25s linear;
}

.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: none;
}

.step {
  position: relative;
  padding-top: 0;
  border-top: 0;
}

/* --- Uzel na kolejnici ---------------------------------------------------- */
.step__node {
  position: absolute;
  left: -46px;
  top: 6px;
  width: 27px;
  height: 27px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}
.step__node::before {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  background: var(--ink);
  transition: background 0.45s var(--ease);
}
.step__node::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}

/* Aktivní krok: uzel se rozsvítí okrovou */
.step.is-on .step__node {
  background: var(--ochre);
  transform: scale(1.06);
}
.step.is-on .step__node::after {
  background: var(--ochre);
  transform: scale(1.15);
}

/* --- Velké obrysové číslo ------------------------------------------------- */
.step__ghost {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.30);
  transition: -webkit-text-stroke-color 0.5s var(--ease),
              color 0.5s var(--ease),
              transform 0.5s var(--ease);
}
.step.is-on .step__ghost {
  -webkit-text-stroke-color: var(--ochre);
  transform: translateY(-2px);
}

.step__title {
  font-size: 1.2rem;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
  color: var(--paper);
}

.step__text {
  margin: 0;
  color: #a9aeaa;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Najetí myší: číslo se vybarví plnou okrovou */
@media (hover: hover) {
  .step:hover .step__ghost {
    color: var(--ochre);
    -webkit-text-stroke-color: transparent;
  }
}

/* --- Desktop: kolejnice se překlápí do vodorovné polohy -------------------- */
@media (min-width: 900px) {
  .track {
    padding-left: 0;
    padding-top: 54px;
  }
  .track__rail {
    left: 0;
    right: 0;
    top: 13px;
    bottom: auto;
    width: auto;
    height: 3px;
    background:
      repeating-linear-gradient(to right,
        rgba(255, 255, 255, 0.22) 0 1px,
        transparent 1px 9px),
      rgba(255, 255, 255, 0.12);
  }
  .track__fill {
    width: calc(var(--p) * 100%);
    height: 100%;
    transition: width 0.25s linear;
  }
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .step__node {
    left: 0;
    top: -54px;
  }
}


/* ============================================================================
   11. REALIZACE - GALERIE PRACÍ
   Snímky jsou koláže před/po, takže je NEOŘEZÁVÁME - ořez by u nich
   zabil smysl. Řešíme to zděnou sazbou do sloupců (CSS columns):
   každý snímek si nechá svůj přirozený poměr a sloupce se srovnají samy.

   Rám: tenká linka odsazená dovnitř snímku, která se při najetí
   rozevře do okrové - jako když se dílo orámuje. Popisek najíždí
   zespodu, číslo drží pořadí, lupa napovídá zvětšení.
   ========================================================================= */
.works {
  column-count: 1;
  column-gap: var(--space-3);
}

.work {
  break-inside: avoid;
  min-width: 0;
  margin-bottom: var(--space-3);
}

.work__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.work__btn img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}

/* Rám uvnitř snímku */
.work__frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(245, 245, 242, 0.45);
  border-radius: 2px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              border-color 0.45s var(--ease);
  pointer-events: none;
}

/* Popisek - na mobilu vidět vždy, na desktopu najíždí při hoveru */
.work__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  background: linear-gradient(to top,
    rgba(23, 25, 27, 0.92) 0%,
    rgba(23, 25, 27, 0.72) 55%,
    rgba(23, 25, 27, 0) 100%);
  color: var(--paper);
  text-align: left;
}

.work__num {
  flex: 0 0 auto;
  padding: 3px 7px;
  background: var(--ochre);
  color: var(--ink);
  font-size: 0.68rem;
}

.work__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.work__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
}
.work__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ochre);
}

.work__zoom {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 245, 242, 0.35);
  border-radius: var(--radius);
  color: var(--paper);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.work__zoom svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .work__meta {
    transform: translateY(101%);
    transition: transform 0.45s var(--ease);
  }
  .work__btn:hover img,
  .work__btn:focus-visible img {
    transform: scale(1.05);
  }
  .work__btn:hover .work__meta,
  .work__btn:focus-visible .work__meta {
    transform: translateY(0);
  }
  .work__btn:hover .work__frame,
  .work__btn:focus-visible .work__frame {
    opacity: 1;
    transform: scale(1);
  }
  .work__btn:hover .work__zoom {
    background: var(--ochre);
    border-color: var(--ochre);
    color: var(--ink);
  }
}

/* Poznámka pod galerií */
.works__note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.works__note-rule {
  flex: 0 0 auto;
  width: 46px;
  height: 2px;
  background: var(--ochre);
}

@media (min-width: 700px) {
  .works { column-count: 2; }
}
@media (min-width: 1100px) {
  .works { column-count: 3; column-gap: var(--space-4); }
  .work { margin-bottom: var(--space-4); }
}


/* ============================================================================
   12. O NÁS - TEXT A POLETUJÍCÍ KOLÁŽ
   Fotografie nejsou v mřížce. Leží v ploše volně, mírně pootočené,
   v různých velikostech a hloubkách - a každá se vznáší vlastním
   tempem (jiná délka cyklu i zpoždění, proměnná --d). Vzniká dojem,
   že snímky visí v prostoru, ne že jsou nalepené do tabulky.
   ========================================================================= */
.section--about { padding-top: var(--space-7); }

.story {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.story__title {
  font-size: clamp(2.1rem, 6.4vw, 3.4rem);
  line-height: 0.97;
  margin-bottom: var(--space-4);
}

.story__lead {
  max-width: 46ch;
  margin-bottom: var(--space-3);
  color: var(--ink);
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.6;
}
.story__lead em { font-style: normal; color: var(--ochre-deep); }

.story__text {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.99rem;
  line-height: 1.65;
}

/* Dvě čísla, která nesou hlavní argument */
.story__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.story__facts li {
  display: grid;
  gap: 4px;
}
.story__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  line-height: 1;
  color: var(--ink);
}
.story__cap {
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* --- Poletující koláž ----------------------------------------------------- */
.float {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.float__tile {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 14px 34px rgba(23, 25, 27, 0.13);
  animation: floaty 9s var(--ease) infinite;
  animation-delay: var(--d);
  will-change: transform;
  transition: box-shadow 0.4s var(--ease);
}
/* <picture> je inline prvek - bez tohoto se neroztáhne na výšku
   dlaždice a pod snímkem prosvítá podklad jako bílý pruh. */
/* Snímek vyplňuje dlaždici absolutně - výška dlaždice je dána jen
   jejím aspect-ratio, nikdy velikostí fotografie. */
.float__tile picture {
  position: absolute;
  inset: 0;
}
.float__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.03);
}

/* Rozložení: různé velikosti a pootočení, žádné dvě stejně.
   Vysoká dlaždice vlevo se rozkládá přes dva řádky pravého sloupce -
   výšky si sednou samy z poměrů 3/4 vs. dvou 8/5. */
.float__tile--t1 { grid-column: 1 / 4; grid-row: 1 / 3; aspect-ratio: 3 / 4;  rotate: -1.6deg; }
.float__tile--t2 { grid-column: 4 / 7; grid-row: 1;     aspect-ratio: 8 / 5;  rotate: 1.4deg; animation-duration: 11s; }
.float__tile--t3 { grid-column: 4 / 7; grid-row: 2;     aspect-ratio: 8 / 5;  rotate: -1deg;  animation-duration: 8s; }
.float__tile--t4 { grid-column: 1 / 3; grid-row: 3;     aspect-ratio: 1 / 1.05; rotate: 1.8deg; animation-duration: 10s; }
.float__tile--t5 { grid-column: 3 / 5; grid-row: 3;     aspect-ratio: 1 / 1.05; rotate: -2deg;  animation-duration: 12s; }
.float__tile--t6 { grid-column: 5 / 7; grid-row: 3;     aspect-ratio: 1 / 1.05; rotate: 1.2deg; animation-duration: 9.5s; }
/* přesahující dlaždici poměr vypínáme - výšku jí dají oba řádky */
.float__tile--t1 { aspect-ratio: auto; min-height: 0; }

@keyframes floaty {
  0%   { translate: 0 0; }
  50%  { translate: 0 -11px; }
  100% { translate: 0 0; }
}

/* Najetí: snímek se zvedne, srovná a vystoupí do popředí */
@media (hover: hover) {
  .float__tile:hover {
    animation-play-state: paused;
    rotate: 0deg;
    scale: 1.04;
    z-index: 2;
    box-shadow: 0 22px 48px rgba(23, 25, 27, 0.24);
    transition: rotate 0.5s var(--ease), scale 0.5s var(--ease),
                box-shadow 0.4s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float__tile { animation: none; }
}

/* --- Stavební tabule -------------------------------------------------------
   Deska s údaji o firmě ve stejném jazyce jako destičky u služeb:
   zkosený pravý horní roh s okrovým klínem, drobné nýty a vodoznak
   domku ze značky. Plocha zůstává klidná, vede v ní text.

   Typografie nese hierarchii:
     popisky - mono, drobné, prostrkané (technický formulář)
     název   - display kapitálky (je to značka)
     čísla   - mono, okrová (číslice mají stejnou šířku, sloupec drží linku)
   ------------------------------------------------------------------------ */
.board {
  position: relative;
  margin-top: var(--space-5);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 16px 38px rgba(23, 25, 27, 0.20);
}
.board::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background: var(--ochre);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.board__rivet {
  position: absolute;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.board__rivet--tl { left: 10px; top: 10px; }
.board__rivet--bl { left: 10px; bottom: 10px; }
.board__rivet--br { right: 10px; bottom: 10px; }

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.board__title {
  color: var(--ochre);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}
.board__code {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: #7d827d;
}

.board__body {
  position: relative;
  padding: var(--space-3) var(--space-5) var(--space-4);
}

.board__watermark {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 168px;
  height: auto;
  opacity: 0.06;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.board__rows { position: relative; z-index: 2; margin: 0; display: grid; }

.board__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.board__row:first-child { border-top: 0; }

.board__row dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d938d;
}

.board__val {
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}
.board__val--name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.board__val--num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--ochre);
}

@media (min-width: 520px) {
  .board__row {
    grid-template-columns: 150px 1fr;
    gap: var(--space-3);
    align-items: baseline;
  }
  .board__row dt { padding-top: 2px; }
}

@media (max-width: 899px) {
  /* V jednom sloupci jde koláž POD text: nejdřív nadpis, text a čísla,
     pak deska s údaji o firmě a teprve nakonec fotky. Pořadí je stejné
     jako v HTML, proto se do `order` vůbec nesahá.
     Fotky jsou užší, na středu a bez rotací - na malé ploše by
     pootočení vylézalo z okraje a působilo rozbité.

     POZOR na centrování: koláž je položka mřížky .story. Kdyby se
     vystředila přes `margin-inline: auto`, prohlížeč přestane položku
     roztahovat na šířku sloupce a spočítá jí šířku podle obsahu.
     Dlaždice mají snímky absolutně, takže obsah nic neměří - a celá
     koláž se srazí do malinkého shluku. Proto se centruje přes
     `justify-self` a šířku držíme napevno na 100 %. */
  .float {
    width: 100%;
    max-width: 560px;
    justify-self: center;
    margin-inline: 0;
    gap: 7px;
  }
  .float__tile,
  .float__tile--t1, .float__tile--t2, .float__tile--t3,
  .float__tile--t4, .float__tile--t5, .float__tile--t6 {
    rotate: 0deg;
    box-shadow: 0 8px 22px rgba(23, 25, 27, 0.14);
  }
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-7);
    align-items: start;
  }
  /* Pevné umístění obou sloupců. Text vlevo, koláž vpravo - nikdy
     naopak a nikdy pod sebou. Nespoléháme na automatické skládání. */
  .story > .story__panel { grid-column: 1; grid-row: 1; }
  .story > .float        { grid-column: 2; grid-row: 1; }

  .story__panel { padding-top: var(--space-4); }
  .float { aspect-ratio: 1 / 1.06; }
}

/* POJISTKA: kdyby koláž kdykoli v budoucnu vypadla z mřížky .story
   (např. po zásahu do HTML), nesmí se roztáhnout přes celou šířku
   stránky. Zůstane úzká a na středu, ne přes celou plochu. */
.section--about > .float,
.section--about > .shell > .float:only-child {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}


/* ============================================================================
   12b. TEPLÁ ZÓNA (O nás + Kontakt)
   Spodní třetina stránky leží na okrovém nánosu. Není to obdélník:
   barva je složená z několika velkých rozostřených skvrn různé sytosti,
   takže hrany nikde nekončí ostře a plocha působí jako zaschlý nátěr.
   Horní okraj se prolne do papíru, dolní dobíhá až k tmavé patičce.
   ========================================================================= */
.warmzone {
  position: relative;
  isolation: isolate;
}
.warmzone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* skvrny - každá jinak velká a jinak sytá */
    radial-gradient(58% 34% at 76% 6%,  rgba(229, 163, 36, 0.20) 0%, rgba(229, 163, 36, 0) 70%),
    radial-gradient(70% 30% at 12% 26%, rgba(229, 163, 36, 0.13) 0%, rgba(229, 163, 36, 0) 72%),
    radial-gradient(52% 26% at 88% 52%, rgba(229, 163, 36, 0.12) 0%, rgba(229, 163, 36, 0) 70%),
    radial-gradient(64% 30% at 24% 78%, rgba(229, 163, 36, 0.15) 0%, rgba(229, 163, 36, 0) 74%),
    radial-gradient(46% 22% at 66% 94%, rgba(229, 163, 36, 0.10) 0%, rgba(229, 163, 36, 0) 70%),
    /* základní nános, nahoře průhledný - přechod z papíru je plynulý */
    linear-gradient(to bottom,
      rgba(229, 163, 36, 0) 0,
      rgba(229, 163, 36, 0.05) 190px,
      rgba(229, 163, 36, 0.07) 45%,
      rgba(229, 163, 36, 0.09) 100%);
}


/* ============================================================================
   13. KONTAKT A FORMULÁŘ
   ========================================================================= */
.section--contact {
  margin-top: var(--space-7);
  padding-block: var(--space-7);
  background: transparent;
  border-top: 1px solid rgba(23, 25, 27, 0.06);
}

.contact {
  display: grid;
  gap: var(--space-6);
}

/* Kontakty jsou samostatná položka mřížky .contact. Odstup nahoru
   dělá mezera mřížky, proto tady žádný margin - jinak by se sčítaly. */
.contact__list {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* Řádek kontaktu: vlevo ikona v barevné dlaždici, vpravo popisek
   a hodnota pod sebou. Dlaždice mají pevnou šířku, takže texty
   začínají všechny na stejné svislici. */
.contact__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--space-3);
}

.contact__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(229, 163, 36, 0.16);
  border: 1px solid rgba(229, 163, 36, 0.34);
  color: var(--ochre-deep);
}
.contact__ico svg { width: 20px; height: 20px; display: block; }

/* Vlajka sedí ve stejné dlaždici jako ostatní ikony - stejný rozměr,
   stejný rádius, stejné okrové pozadí. Liší se jen tím, že je barevná.
   Tenká tmavá linka kolem vlajky drží bílý pruh čitelný i na okrovém
   podkladu. Selektor je záměrně přesnější než .contact__ico svg,
   jinak by vlajku srazilo na rozměr ikony. */
.contact__ico--flag .flag-cz {
  width: 25px;
  height: 17px;
  border-radius: 2.5px;
  display: block;
  box-shadow: 0 0 0 1px rgba(23, 25, 27, 0.22);
}

.contact__body { display: grid; gap: 3px; min-width: 0; }

/* Popisek nad hodnotou. Dřív byl světle šedý a v provozu skoro neviditelný -
   teď je tmavší a o stupeň výraznější. */
.contact__label {
  color: #5a5f59;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}

/* Hodnota - telefon, e-mail, adresa i působnost stejně silně.
   Působnost není odkaz, ale vypadá stejně jako ostatní řádky.
   Váhu 600 držíme proto, že Inter má nahraný právě tento řez -
   při 700 by prohlížeč písmo dopočítával a text by se rozmazal. */
.contact__val {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
}
a.contact__val { text-decoration: none; }
a.contact__val:hover { color: var(--ochre-deep); }

/* Uvozovací odstavec v kontaktu byl příliš světlý - ztmavíme a přidáme váhu */
.contact__intro .section__lead {
  color: var(--ink-soft);
  font-weight: 500;
}

/* --- WhatsApp ------------------------------------------------------------- */
/* Ikona je bublina + sluchátko. Bublina má barvu textu, sluchátko je
   vyříznuté v barvě podkladu tlačítka - proto dvě samostatné třídy. */
.wa-ico { width: 22px; height: 22px; flex: none; display: block; }
.wa-ico .wa-bubble { fill: currentColor; }
.wa-ico .wa-phone  { fill: var(--wa-podklad, #25d366); }

/* Tlačítko pod formulářem - objeví se až po úspěšném odeslání.
   Používá stejný mechanismus jako ostatní tlačítka webu, jen v zelené. */
.btn--wa {
  --btn-bg:   #25d366;
  --btn-bd:   #1eb455;
  --btn-fg:   #072e17;
  --btn-fill: #0f8a3e;
  --wa-podklad: #25d366;
}
@media (hover: hover) {
  .btn--wa:hover { --wa-podklad: #0f8a3e; }
}

.form__wa {
  display: inline-flex;
  width: 100%;
}
.form__wa[hidden] { display: none; }

/* Plovoucí tlačítko v rohu obrazovky */
.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  --wa-podklad: #25d366;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(11, 90, 44, 0.34);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              opacity 0.3s var(--ease), visibility 0.3s var(--ease),
              background 0.3s var(--ease);
}
.wa-fab .wa-ico { width: 24px; height: 24px; }
.wa-fab:hover {
  background: #1eb455;
  --wa-podklad: #1eb455;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11, 90, 44, 0.42);
}
/* Na úzkých displejích jen kolečko s ikonou, ať nepřekáží textu */
@media (max-width: 599px) {
  .wa-fab { right: 14px; bottom: 14px; padding: 14px; }
  .wa-fab__text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
}

/* Když je otevřená lišta souhlasu, plovoucí tlačítko schováme -
   jinak by se v rohu překrývaly. Třídu na <body> přepíná script.js. */
body.cookie-open .wa-fab {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.form { display: grid; gap: var(--space-3); }

.form__row { display: grid; gap: var(--space-3); }

.field { display: grid; gap: 6px; }

.field__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.field__label em { color: var(--ochre-deep); font-style: normal; }

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--dur) var(--ease);
}
textarea.field__input {
  min-height: 130px;
  padding: var(--space-3);
  resize: vertical;
}
.field__input:hover { border-color: #b9bcb4; }
.field__input:focus { border-color: var(--ink); }

.field__error {
  display: none;
  font-size: 0.8rem;
  color: #b4231d;
}
.field.has-error .field__input { border-color: #b4231d; }
.field.has-error .field__error,
.check.has-error .field__error { display: block; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ochre);
}
.check .field__error { grid-column: 2; }
.check em { color: var(--ochre-deep); font-style: normal; }

.form__submit { margin-top: var(--space-2); }

.form__status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  font-weight: 600;
}
.form__status.is-ok { color: #1f7a3d; }
.form__status.is-bad { color: #b4231d; }

/* Past na roboty - pro člověka neviditelné pole */
.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ============================================================================
   14. PATIČKA
   ========================================================================= */
.footer {
  padding-top: var(--space-7);
  background: var(--ink);
  color: #b9beb9;
  font-size: 0.92rem;
}

.footer__inner {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.footer__logo {
  --logo-h: 44px;
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: var(--space-3);
}
.footer__claim { color: #8d938d; margin: 0; }

.footer__title {
  margin: 0 0 var(--space-2);
  color: var(--ochre);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.footer__title--gap { margin-top: var(--space-4); }

.footer__list { display: grid; gap: 6px; }
.footer__list a:hover { color: var(--ochre); }

.footer__bottom {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line-dark);
  color: #7d827d;
  font-size: 0.82rem;
}
.footer__bottom p { margin: 0; }


/* ============================================================================
   15. ANIMACE
   Jediný efekt na webu: jemné najetí prvků při scrollu.
   Spouští ho IntersectionObserver v script.js.
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respektujeme systémové nastavení "omezit pohyb" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ============================================================================
   16. RESPONZIVITA
   Psáno mobile-first: výchozí styly jsou pro telefon,
   níže se rozšiřují pro tablet a desktop.
   ========================================================================= */

/* --- Malý tablet: 600 px a výš ------------------------------------------- */
@media (min-width: 600px) {
  :root { --gutter: 2rem; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-4);
  }
  .footer__note { text-align: right; }
}

/* --- Tablet na šířku: 900 px a výš --------------------------------------- */
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--space-6);
  }
  /* Od tabletu je koláž nižší a širší */
  .collage {
    aspect-ratio: 16 / 10;
  }
  .about {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
  /* Vlevo pod sebou úvod a kontakty, vpravo formulář přes obě řady.
     Na mobilu (jeden sloupec) je pořadí dané HTML: úvod, formulář,
     kontakty - tedy poptávka hned, telefon a e-mail pod ní. */
  .contact {
    grid-template-columns: 0.85fr 1.15fr;
    column-gap: var(--space-6);
    row-gap: var(--space-5);
    align-items: start;
  }
  .contact__intro { grid-column: 1; grid-row: 1; }
  .contact__list  { grid-column: 1; grid-row: 2; }
  .contact > .form { grid-column: 2; grid-row: 1 / 3; }
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* --- Desktop: 1024 px a výš ---------------------------------------------- */
@media (min-width: 1024px) {
  :root { --header-h: 84px; }

  .header__logo { --logo-h: 42px; }
  .header__call, .burger { display: none; }

  /* Tři sloupce: logo vlevo, odkazy přesně na střed stránky,
     telefon vpravo. `display: contents` rozpustí obal .nav,
     takže se jeho děti stanou přímo položkami mřížky hlavičky. */
  .header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
  }
  .nav {
    display: contents;
    position: static;
    background: none;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__list {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.4vw, 2.6rem);
  }
  .nav__phone {
    grid-column: 3;
    justify-self: end;
  }
  .nav__link {
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    position: relative;
  }
  .nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--ochre);
    transition: width var(--dur) var(--ease);
  }
  .nav__link:hover::after,
  .nav__link.is-current::after { width: 100%; }

  /* Hero začíná hned pod hlavičkou - žádné hluché místo nahoře */
  .hero { padding-top: var(--space-3); }

  /* Na desktopu je sloupec textu zarovnaný vlevo - tlačítko
     drží stejnou levou hranu, na středu by působilo křivě. */
  .hero__actions { justify-content: flex-start; }
  .hero__inner { align-items: start; }
  .hero__text { padding-top: var(--space-5); }

  /* Koláž přetéká za pravý okraj mřížky až do kraje obrazovky.
     Šikmý ořez se překlápí zleva - řez zajíždí pod text a vzniká
     napětí mezi typografií a fotografií. */
  .hero__media {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--gutter)));
    align-self: stretch;
  }

  .collage {
    height: 100%;
    aspect-ratio: auto;
    min-height: min(72vh, 680px);
    grid-template-columns: 1fr 1fr;
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
    /* Fotky sedí u horní hrany bloku a dole se rozpouštějí do podkladu */
    align-self: start;
  }

  /* Okrová vlasová linka podél šikmého řezu */
  .collage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--ochre);
    clip-path: polygon(11% 0, 11.5% 0, 0.5% 100%, 0 100%);
  }

  .collage::after {
    background:
      linear-gradient(to bottom, var(--paper) 0%, rgba(234, 235, 231, 0.5) 7%, rgba(234, 235, 231, 0) 24%),
      linear-gradient(to right, rgba(234, 235, 231, 0.42) 0%, rgba(234, 235, 231, 0) 34%),
      linear-gradient(to top, var(--paper) 0%, rgba(234, 235, 231, 0.6) 12%, rgba(234, 235, 231, 0) 44%);
  }

  .hero__caption {
    left: 11%;
  }

  .cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* --- Velký desktop ------------------------------------------------------- */
@media (min-width: 1400px) {
  :root { --gutter: 2.5rem; }
}


/* ============================================================================
   16b. LIŠTA SOUHLASU S COOKIES
   Malé okno vpravo dole. Stejný jazyk jako štítky na stránce:
   zkosený roh, nýty, okrový akcent. Nepřekrývá obsah, dá se
   odbýt dvěma kliky.
   ========================================================================= */
.cookie {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 150;
  width: min(360px, calc(100vw - 2 * var(--space-3)));
  padding: var(--space-4);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ochre);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(23, 25, 27, 0.22);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.cookie.is-open { transform: translateY(0); opacity: 1; }
.cookie[hidden] { display: none; }

.cookie__rivet {
  position: absolute;
  left: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(23, 25, 27, 0.18);
}
.cookie__rivet--tl { top: 8px; }
.cookie__rivet--bl { bottom: 8px; }

.cookie__head {
  margin: 0 0 var(--space-2);
  color: var(--ochre-deep);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}
.cookie__text {
  margin: 0 0 var(--space-3);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.cookie__prefs {
  display: grid;
  gap: 1px;
  margin-bottom: var(--space-3);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cookie__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 9px 11px;
  background: var(--white);
  font-size: 0.8rem;
}
.cookie__row strong { display: block; font-size: 0.83rem; }
.cookie__row em {
  display: block;
  font-style: normal;
  color: var(--slate);
  font-size: 0.74rem;
}
.cookie__row input {
  width: 18px;
  height: 18px;
  accent-color: var(--ochre);
  flex: 0 0 auto;
}
.cookie__always {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: var(--slate);
}

.cookie__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.cookie__btn {
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: 0.82rem;
}
.cookie__save { width: 100%; margin-top: var(--space-1); }

.cookie__link {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 4px;
  border: 0;
  background: none;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookie__link:hover { color: var(--ink); }

@media (max-width: 480px) {
  .cookie { right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* Na úzkých displejích sedí plovoucí tlačítko WhatsApp přes spodní okraj
   stránky. Přidáme dole vzduch, aby nepřekrývalo copyright a odkaz
   na nastavení cookies. */
@media (max-width: 599px) {
  .footer__bottom { padding-bottom: 76px; }
}


/* ============================================================================
   17. TISK
   ========================================================================= */
@media print {
  .header, .nav, .lightbox, .form, .rule, .cookie, .progress,
  .wa-fab { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .hero { padding: 0; margin: 0 0 1cm; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}