/* ==========================================================
   FIRMVIA — landing page, styl "Kontrast"

   Klasická sekcová struktura, odvážná sazba. Čistě černá
   a bílá — žádná třetí barva, jen stupně šedi na text druhé
   úrovně a na fotky.

   Znaky pojetí: obří ultratučný displej, inverzní sekce, tlusté
   linky, verzálkové mikropopisky, obrysové číslo a logotyp přes
   celou patičku. Fotky realizací zůstávají barevné, portrét je
   do stupňů šedi.
   ========================================================== */

/* ── Písma ───────────────────────────────────────────────── */
/* Vlastní hosting, žádné volání Googlu (rychlost i GDPR). Dva
   podsety: latin nese á é í ó ú ý, latin-ext č ď ě ň ř š ť ů ž.
   Space Grotesk je variabilní — jeden soubor pokryje 400 až 700.

   Záložní řezy "… Fallback" mají metriky srovnané na originál
   (size-adjust podle šířky vzorku, ascent/descent z tabulek písma),
   aby se při výměně písma layout nepohnul. Změřeno fontkitem:
   Anton ↔ Impact, Space Grotesk ↔ Arial. */

@font-face {
  font-family: "Anton";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton Fallback";
  src: local("Impact");
  size-adjust: 93.4%;
  ascent-override: 125.9%;
  descent-override: 35.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.2%;
  ascent-override: 95.4%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}

:root {
  --w:    #FFFFFF;
  --k:    #000000;
  --g-1:  #F1F1F1;   /* plocha na bílé */
  --g-2:  #DCDCDC;   /* vlasové linky na bílé */
  --g-3:  #666666;   /* text 2. úrovně na bílé — 5,7:1, na --g-1 5,2:1 */
  --g-4:  #A8A8A8;   /* text 2. úrovně na černé — 8,8:1 */
  --g-5:  #2A2A2A;   /* vlasové linky na černé */

  --ff-d: "Anton", "Anton Fallback", "Arial Narrow", Impact, sans-serif;
  --ff-t: "Space Grotesk", "Space Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut:  clamp(18px, 4.5vw, 56px);

  --bar-h: 72px;   /* obsahová výška lišty, bez její spodní linky */
  --ctl-h: 50px;   /* výška ovládacích prvků v liště */

  --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ── Základ ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Odskok kotvy končí tak, aby horní 3px linka cílové sekce zmizela
   pod lištou. Jinak se sečte s její spodní linkou do dvojité čáry —
   a u inverzních sekcí prosvítá mezi nimi bílý proužek. */
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--w);
  color: var(--k);
  font-family: var(--ff-t);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--k); outline-offset: 2px; }
.sec--inv :focus-visible, .foot :focus-visible { outline-color: var(--w); }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 12px 20px; background: var(--k); color: var(--w);
  text-decoration: none; font-weight: 700;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }
/* cíl skip linku dostane fokus programově, rámeček kolem celé stránky nechceme */
main:focus { outline: none; }

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gut); }

/* Fotky realizací zůstávají barevné — na čistě černobílé stránce
   z nich barva udělá jediný živý prvek. Portrét je do stupňů šedi,
   aby medailonek zapadl do inverzní sekce. */
.petr__ph img { filter: grayscale(1) contrast(1.06); }

/* ── Typografie ──────────────────────────────────────────── */

.micro {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.micro span { opacity: .45; }

.big {
  margin: 0 0 0.34em;
  font-family: var(--ff-d);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}
/* pro delší dvouvětné nadpisy, které by v základní velikosti
   přetekly na pět řádků */
.big--sm { font-size: clamp(1.9rem, 3.7vw, 3.1rem); line-height: 1.3; }

h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }

.head { margin-bottom: clamp(40px, 5vw, 72px); }
.head__p { margin: 0; max-width: 54ch; color: var(--g-3); font-size: 1.05rem; }
.sec--inv .head__p { color: var(--g-4); }

.fine { margin-top: clamp(28px, 3.5vw, 44px); max-width: 78ch; font-size: 0.9rem; color: var(--g-3); }

/* odrážky jsou krátké tlusté linky */
.bars { list-style: none; margin: 0; padding: 0; }
p + .bars { margin-top: 1.5em; }
.bars li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.55em;
  font-size: 0.96rem;
  line-height: 1.45;
}
.bars li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 18px; height: 3px;
  background: currentColor;
}

/* ── Sekce ───────────────────────────────────────────────── */

.sec {
  padding-block: clamp(64px, 9vw, 132px);
  border-top: 3px solid var(--k);
}
.sec--inv {
  background: var(--k);
  color: var(--w);
  border-top-color: var(--k);
}

/* ── Tlačítka a odkazy ───────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border: 2px solid var(--k);
  background: var(--k); color: var(--w);
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, color .16s;
}
.btn:hover { background: var(--w); color: var(--k); }
.btn--big { padding: 18px 30px; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--line { background: transparent; color: var(--k); }
.btn--line:hover { background: var(--k); color: var(--w); }

.lnk {
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid var(--k);
  padding-bottom: 2px;
  transition: opacity .16s;
}
.lnk:hover { opacity: .55; }

/* ── Lišta ───────────────────────────────────────────────── */

.wm {
  font-family: var(--ff-d);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Poslední písmeno logotypu se sází jako Ʌ, tedy A bez příčky.

   Není to otočené V. Anton obsahuje U+0245 LATIN CAPITAL LETTER TURNED V
   jako hotový glyf (v subsetu latin-ext, který web kvůli české diakritice
   načítá tak jako tak, takže žádný request navíc). Stojí na účaří a
   dotahuje na přesně stejnou verzálku jako A — 0,8594 em.

   Na tom celý přístup stojí: Ʌ jde do normálního textového toku a projde
   stejnou sazbou i stejným zaokrouhlením na pixelovou mřížku jako jeho
   sousedé. Je proto v rovině z principu, ne díky doladěné konstantě.
   Dřívější pokus otáčel V přes transform; takový obsah se kreslí mimo
   mřížku a při verzálce 21 px v liště ujelo účaří o celý pixel.

   Skutečné „a“ zůstává v DOMu plnou velikostí, jen průhledné a nulově
   široké. Ne font-size: 0 a ne position: absolute — absolutní pozicování
   roztrhne textový běh (innerText vrací „FIRMVI\nA“) a rozbije tím
   Ctrl+F i přístupný název odkazu. Takhle zůstane „Firmvia“ celé pro
   čtečky, vyhledávání, kopírování i vyhledávače.

   Lomítko v content odděluje alternativní text pro čtečky; bez něj
   generovaný obsah přečtou a z loga je „Firmvia Ʌ“. @supports ale není
   kosmetika: prohlížeč bez podpory té syntaxe (Safari pod 17.4, Firefox
   pod 122) zahodí celou deklaraci, ::before nevznikne — a kdyby „a“
   mezitím zmizelo z toku, logo by se četlo „FIRMVI“. Uvnitř podmínky
   se obojí zapne společně, nebo se nestane nic a vykreslí se prosté A.

   nowrap je pojistka: vnořený inline-block zavádí místo, kde se dá
   zalomit, což u jednoho slova dřív neexistovalo. .foot__wm ho už má,
   .wm ne. */
@supports (content: "\0245" / "") {
  .lig::before { content: "\0245" / ""; }
  .lig__a {
    display: inline-block;
    width: 0;
    color: transparent;
  }
  .wm, .foot__wm { white-space: nowrap; }
}

.bar {
  position: sticky; top: 0; z-index: 90;
  background: var(--w);
  border-bottom: 3px solid var(--k);
}
.bar__in { display: flex; align-items: center; gap: 26px; height: var(--bar-h); }
.bar__nav { display: flex; gap: 24px; margin-left: 34px; }
.bar__nav a {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding-block: 3px;
  border-bottom: 2px solid transparent;
}
.bar__nav a:hover { border-bottom-color: var(--k); }
.bar__act { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.bar__tel { display: inline-block; padding-block: 6px; font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.bar__act .btn { min-height: var(--ctl-h); }

.burger {
  display: none;
  width: var(--ctl-h); height: var(--ctl-h); padding: 0; position: relative;
  background: var(--k); border: 0; cursor: pointer;
}
/* proužky se drží středu, aby hamburger seděl s tlačítkem v liště
   na stejnou výšku bez ohledu na metriku písma */
.burger span:not(.vh) { position: absolute; left: 12px; right: 12px; height: 3px; background: var(--w); transition: transform .22s; }
.burger span:not(.vh):nth-child(1) { top: calc(50% - 5.5px); }
.burger span:not(.vh):nth-child(2) { top: calc(50% + 2.5px); }
.burger[aria-expanded="true"] span:not(.vh):nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:not(.vh):nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Překryv, ne prvek v toku — jinak otevření menu odsune obsah
   stránky o svou výšku dolů a vypadá to, že stránka odskočila. */
.mnav {
  display: none;
  position: fixed;
  top: calc(var(--bar-h) + 3px); left: 0; right: 0;
  z-index: 89;
  max-height: calc(100vh - var(--bar-h) - 3px);
  overflow-y: auto;
  background: var(--w);
  border-bottom: 3px solid var(--k);
  padding: 4px var(--gut) 18px;
}
.mnav.is-open { display: block; }
.mnav a {
  display: block; padding: 13px 0;
  border-bottom: 1px solid var(--g-2);
  text-decoration: none;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.86rem;
}

/* ── Hero: sazba na fotce ────────────────────────────────── */

/* Fotka je sama o sobě skoro celá bílá — světlý byt s jedním
   černým obdélníkem krbu. Sazba proto může zůstat černá a ležet
   přímo na ní; potřebuje jen pojistku na místech, kde je snímek
   tmavší (krb vlevo, parkety dole). Tou je bílý přechod, ne tmavý
   závoj — ten by ze světlého bytu udělal šeď a fotku zabil. */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(52px, 7.5vw, 116px) clamp(44px, 5vw, 76px);
}
.hero__ph { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__ph picture { display: block; height: 100%; }
.hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero__ph::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.10) 0%, rgba(255,255,255,.30) 52%, rgba(255,255,255,.50) 100%),
    linear-gradient(to right,  rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.10) 100%);
}

.hero__micro { margin-bottom: clamp(26px, 4vw, 46px); }

.hero__h {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-family: var(--ff-d);
  font-weight: 400;
  /* claim je proti původnímu ("30 dní") o dvě slova delší, takže
     nese menší stupeň — jinak sám zaplní celé okno a odsune CTA */
  font-size: clamp(2.6rem, 10.4vw, 9.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__h .l { display: block; }
/* Obrysové písmo — jediný "trik" na stránce, proto jen jednou.
   Tah se škáluje s šířkou: pevné 3 px byly při mobilní velikosti
   claimu přes 7 % výšky písmene a obrys působil rušivě. */
.hero__h .l--out {
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.28vw, 3px) var(--k);
}

/* Sloupce zůstávají stejně široké. Zúžení pravého na 5/12 ve prospěch
   odrážek vypadá lákavě, ale CTA pak potřebuje víc místa, než dostane,
   a mezi 900 a 1280 px se tlačítko s odkazem zalomí pod sebe. */
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  /* Oba sloupce visí od 3px linky nad sebou. Zarovnání ke spodní hraně
     dávalo smysl, dokud byl vlevo jen třířádkový odstavec a obě strany
     končily společně; s podnadpisem a čtyřmi odrážkami už tlačítko
     vypadalo, že spadlo dolů. */
  align-items: start;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 3px solid var(--k);
}
.hero__p {
  margin: 0 0 1.3em;
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.hero__bars { max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }

/* ── Služby: široké řádky ────────────────────────────────── */

.rows { border-top: 3px solid var(--k); }
.rows__g {
  margin: 0;
  padding-block: clamp(14px, 1.6vw, 20px);
  border-bottom: 3px solid var(--k);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(14px, 4vw, 64px);
  padding-block: clamp(28px, 3.4vw, 52px);
  border-top: 1px solid var(--g-2);
}
.rows__g + .row { border-top: 0; }
/* další skupina uzavírá tu předchozí vlastní linkou nahoře */
.row + .rows__g { border-top: 3px solid var(--k); margin-top: clamp(28px, 3.4vw, 52px); }
.row__t {
  margin: 0;
  font-family: var(--ff-d);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.9vw, 2.6rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.row__lead { font-weight: 700; letter-spacing: -0.015em; }
.row__b > p:not(.row__lead) { color: var(--g-3); max-width: 68ch; }

/* ── Důvěra: mřížka 3 × 3 na černé ───────────────────────── */

/* Buňky nejsou karty — hranice je jedna průběžná mřížka z vlasovek,
   tedy táž linka, která jinde na stránce odděluje řádky, jen vedená
   i svisle. Žádné číslování: devět záruk není posloupnost, jen výčet.

   Okraje mřížky drží selektory 3n, takže počet buněk musí zůstat
   násobkem tří. Při jiném počtu je nutné přepsat i je. */
.grid9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 3px solid var(--w);
}
.grid9 > div {
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 30px);
  border-top: 1px solid var(--g-5);
  border-left: 1px solid var(--g-5);
}
.grid9 > div:nth-child(-n+3) { border-top: 0; }
.grid9 > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.grid9 > div:nth-child(3n)   { padding-right: 0; }

.grid9 dt {
  margin-bottom: 0.55em;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.grid9 dd { margin: 0; color: var(--g-4); font-size: 0.93rem; line-height: 1.5; }

/* ── Průběh spolupráce: dráha ────────────────────────────── */

/* Kroky jako stanice pod průběžnou linkou. Řádková mezera odděluje
   řady, sloupcová je nulová — díky tomu se horní rámečky sousedních
   buněk slijí v jednu nepřerušenou linku přes celou šířku. */

.flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  row-gap: clamp(30px, 3.6vw, 56px);
  margin: 0; padding: 0;
}
.flow li {
  padding-right: clamp(16px, 2.2vw, 34px);
  border-top: 3px solid var(--k);
}
.flow li:nth-child(4n) { padding-right: 0; }

/* kóta: krátká tlustá značka spuštěná z linky */
.flow li::before {
  content: "";
  display: block;
  width: 3px;
  height: clamp(14px, 1.6vw, 22px);
  background: var(--k);
}

/* Dorovnání poslední řady, aby linka běžela přes celou šířku.
   Selektor musí přebít .flow li::before — samotné .flow__end::before
   má nižší specificitu a značka by pod prázdným polem zůstala. */
.flow li.flow__end { padding: 0; }
.flow li.flow__end::before { content: none; }

.flow__n {
  display: block;
  margin: clamp(10px, 1.4vw, 18px) 0 clamp(12px, 1.6vw, 20px);
  font-family: var(--ff-d);
  font-size: clamp(2.3rem, 3.4vw, 3.3rem);
  line-height: 0.92;
  color: transparent;
  -webkit-text-stroke: clamp(1.2px, 0.19vw, 2px) var(--k);
}
.flow h3 { font-size: clamp(1.04rem, 1.35vw, 1.2rem); margin-bottom: 0.5em; }
.flow p { margin: 0; color: var(--g-3); font-size: 0.92rem; line-height: 1.5; }

/* ── Ceník ───────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid var(--k); }
.tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--g-2);
}
.tier:first-child { border-left: 0; }
.tier--top { background: var(--g-1); }
.tier__tag {
  margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--g-3);
}
.tier__lab {
  margin: 0 0 22px;
  font-size: clamp(1.2rem, 1.6vw, 1.42rem); font-weight: 700;
  line-height: 1.2;
}
.tier__price {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 4px;
  font-family: var(--ff-d);
  font-size: clamp(3.2rem, 5.6vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.tier__price span, .tier__price b {
  font-family: var(--ff-t);
  font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--g-3);
}
.tier__note { margin: 6px 0 14px; font-size: 0.8rem; color: var(--g-3); }
.tier__time {
  margin: 0 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--g-2);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--g-3);
}
.tier__lead { color: var(--g-3); font-size: 0.95rem; margin-bottom: 1.5em; }
.tier .bars { margin-bottom: 1.5em; }
.tier__opt { margin: 0 0 2em; font-size: 0.85rem; color: var(--g-3); }
.tier__opt b { color: var(--k); }
.tier .btn { margin-top: auto; }
/* Stejné řádky (štítek, cena, doba, výčet…) stojí ve všech sloupcích
   v jedné výšce, i když se text v jednom z nich zalomí. */
@supports (grid-template-rows: subgrid) {
  .tier { display: grid; grid-row: span 9; grid-template-rows: subgrid; align-content: start; }
  .tier .btn { margin-top: 0; align-self: end; }
}

/* ── Proměny bytů: karty ─────────────────────────────────── */

/* Sloupce dělí mezera, ne vnitřní odsazení s vlasovkou. Kdyby měly
   krajní karty vynulované vnější odsazení jako jinde na stránce,
   byl by prostřední sloupec užší — a fotka s pevným poměrem stran
   v něm nižší, takže by se řádky textu mezi kartami nesrovnaly. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(24px, 2.6vw, 38px);
  border-top: 3px solid var(--k);
}
.case {
  position: relative;
  display: flex; flex-direction: column;
  cursor: pointer;
}

.case__ph { margin: 0 0 clamp(18px, 2vw, 28px); }
.case__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.case__kind {
  margin: 0 0 10px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g-3);
}
.case__id { margin: 0 0 6px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.case__btn {
  padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit;
  text-align: left; cursor: pointer;
}
/* celá karta je klikací plocha, ale přístupné jméno nese jen tlačítko */
.case__btn::after { content: ""; position: absolute; inset: 0; }
.case__meta { margin: 0; font-size: 0.92rem; color: var(--g-3); }
.case__cta {
  margin-top: auto; padding-top: clamp(18px, 2vw, 26px);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.case__cta::after { content: " →"; }
.case:hover .case__cta, .case__btn:focus-visible ~ .case__cta { text-decoration: underline; text-underline-offset: 5px; }
.case:hover .case__ph img { filter: contrast(1.08); }

/* ── Modal s detailem realizace ──────────────────────────── */

.mod {
  width: min(1180px, calc(100vw - 2 * var(--gut)));
  max-height: calc(100vh - 2 * clamp(12px, 4vw, 56px));
  margin: auto;
  padding: 0;
  border: 3px solid var(--k);
  background: var(--w); color: var(--k);
  /* UA stylopis dává dialogu overflow: auto. Bez tohohle vznikne
     druhá rolovací vrstva: po dojetí konce obsahu se objeví bílý
     pruh s vlastním posuvníkem a zůstane tam. Rolovat smí jen
     .mod__body.

     Stačí hidden. clip by byl striktnější, ale modální dialog je
     vnitřně position: fixed a v té kombinaci se v některých
     prohlížečích nevykreslí vůbec. Vlastní ochranou je stejně až
     flexové rozvržení níž — s ním obsah dialog nepřeteče, takže
     není co rolovat. */
  overflow: hidden;
}
/* jen [open] — na samotné .mod by display: flex přebil UA pravidlo
   dialog:not([open]) { display: none } a zavřené modaly by svítily */
.mod[open] { display: flex; flex-direction: column; }
.mod::backdrop { background: rgba(0, 0, 0, .78); }
/* Žádné flex: 1. To je zkratka pro flex: 1 1 0%, a WebKit z nulové
   základní velikosti v kontejneru s výškou auto spočítá výšku 0 —
   z modalu pak zbude jen slitý horní a dolní rámeček. Výchozí
   flex: 0 1 auto vezme za základ výšku obsahu a min-height: 0 mu
   dovolí zmenšit se na max-height dialogu. */
.mod__in { display: flex; flex-direction: column; min-height: 0; }

.mod__hd {
  flex: none;
  display: flex; align-items: flex-start; gap: 20px;
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 36px);
  background: var(--w);
  border-bottom: 3px solid var(--k);
}
.mod__hd .micro { margin-bottom: 12px; }
.mod__hd .big { margin-bottom: 0.18em; }
.mod__meta { margin: 0; font-size: 0.95rem; color: var(--g-3); }
.mod__meta span { opacity: .45; }

.mod__x {
  flex: none; margin-left: auto;
  width: 46px; height: 46px; position: relative;
  padding: 0; border: 0; background: var(--k); cursor: pointer;
}
.mod__x span { position: absolute; left: 11px; right: 11px; top: 21px; height: 3px; background: var(--w); }
.mod__x span:first-child { transform: rotate(45deg); }
.mod__x span:last-child { transform: rotate(-45deg); }
.mod__x:hover { background: var(--g-3); }

.mod__body {
  min-height: 0;
  overflow-y: auto;
  /* po dojetí na konec se rolování nepřenáší na stránku pod modalem */
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 52px);
  padding: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}
.mod__text section + section { margin-top: clamp(22px, 2.4vw, 32px); }
.mod__text h3 {
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--g-2);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.mod__text p { font-size: 0.96rem; color: var(--g-3); }
.mod__text .bars li { color: var(--k); }
.mod__note {
  margin-top: 1.2em; padding-left: 16px;
  border-left: 3px solid var(--g-2);
  font-size: 0.88rem;
}

/* ── Před / po: jeden rám, dva stavy ─────────────────────── */

/* Záběry nejsou slícované pixel na pixel — fotoaparát se mezi
   snímky posunul — takže tu není posuvník s klínem. Ve švu by
   uskočila podlaha i hrana okna. Místo toho se celý snímek
   prohodí naráz a natvrdo; prolínání by mezi neslícovanými
   záběry vyrobilo duchy. */

.ba { margin: 0; }
/* fieldset jen seskupuje přepínače pro čtečku, vizuálně nic nepřidává;
   min-width: 0 ruší výchozí min-content, který by rám roztáhl */
.ba__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.ba + .ba { margin-top: clamp(26px, 3vw, 44px); }

.ba__tabs { display: flex; gap: 3px; margin-bottom: 3px; }
.ba__tabs label {
  padding: 11px 26px;
  background: var(--g-1); color: var(--g-3);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
}
.ba__set > input:first-of-type:checked  ~ .ba__tabs label:first-child,
.ba__set > input:nth-of-type(2):checked ~ .ba__tabs label:last-child {
  background: var(--k); color: var(--w);
}
.ba__set > input:focus-visible ~ .ba__tabs { outline: 3px solid var(--k); outline-offset: 2px; }

.ba__fr { display: grid; border: 3px solid var(--k); }
.ba__fr img { grid-area: 1 / 1; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ba__set > input:first-of-type:checked  ~ .ba__fr .ba__po   { visibility: hidden; }
.ba__set > input:nth-of-type(2):checked ~ .ba__fr .ba__pred { visibility: hidden; }

.ba figcaption {
  padding-top: 12px;
  font-size: 0.88rem; font-weight: 700;
}

/* ── O mně ───────────────────────────────────────────────── */

.petr {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.petr__ph { margin: 0; }
.petr__ph picture { display: block; }
.petr__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% center; }
.petr__name {
  margin: 0 0 1.1em;
  font-family: var(--ff-d);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.quote {
  margin: 1.1em 0;
  font-family: var(--ff-d);
  font-size: clamp(1.3rem, 2.3vw, 2.05rem);
  line-height: 1.38;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.petr__b > p:not(.petr__name) { color: var(--g-4); max-width: 62ch; }

/* ── Pro realizační firmy ────────────────────────────────── */

.hire {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
  padding: clamp(26px, 3.6vw, 56px);
  border: 3px solid var(--k);
}
.hire .big { margin-bottom: 0; }
.hire__b > p { color: var(--g-3); max-width: 62ch; }
.hire__b .btn { margin-top: clamp(14px, 2vw, 24px); }

/* ── Poptávka ────────────────────────────────────────────── */

.ask {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.ask__tel { margin-top: 2em; font-size: 0.95rem; color: var(--g-3); }
.ask__tel a { font-weight: 700; color: var(--k); text-underline-offset: 4px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
/* Globální p:last-child { margin-bottom: 0 } jinak sebere odsazení
   poslednímu poli v řádku. Na dvou sloupcích to není vidět, na jednom
   se další pole nalepí na předchozí. */
.two .f:last-child { margin-bottom: 22px; }
.f { display: flex; flex-direction: column; gap: 4px; margin: 0 0 22px; }
.f label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* pole jsou jen linky — nic navíc */
.f input, .f select, .f textarea {
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--k);
  font-size: 1rem;
  border-radius: 0;
}
/* Safari nectí na nativním <select> padding ani line-height (počítaný
   styl hlásí padding 0 a line-height normal), takže pole bylo o ~28 px
   nižší než ostatní. Vypnutím nativního vzhledu se select chová jako
   běžný input; šipku proto kreslíme sami. */
.f select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: var(--sel-arrow);
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 7px;
}
.f input:focus, .f select:focus, .f textarea:focus {
  outline: none;
  border-bottom-width: 4px;
  padding-bottom: 8px;
}
.f textarea { resize: vertical; min-height: 96px; }

/* povinná pole a chyby — bez barvy, stránka je černobílá: chybné
   pole dostane tlustou linku jako při fokusu a pod sebou text
   s tučnou značkou */
.form__req { margin: 0 0 18px; font-size: 0.82rem; color: var(--g-3); }
.req { margin-left: 0.3em; }
.f input[aria-invalid="true"] { border-bottom-width: 4px; padding-bottom: 8px; }
.f__err {
  display: block;
  position: relative;
  margin-top: 6px; padding-left: 20px;
  font-size: 0.86rem; font-weight: 700; line-height: 1.4;
  letter-spacing: 0; text-transform: none;
}
.f__err::before {
  content: "";
  position: absolute; left: 0; top: 0.3em;
  width: 12px; height: 12px;
  background: var(--k);
}
.f__err[hidden] { display: none; }
.f ::placeholder { color: var(--g-3); }
.f--ck { flex-direction: row; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.f--ck input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--k); padding: 0; border: 0; }
.f--ck > div { display: flex; flex-direction: column; gap: 2px; }
.f--ck label {
  display: block;
  padding-block: 1px;
  font-size: 0.88rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--k); line-height: 1.5;
}
.f__more { font-size: 0.82rem; color: var(--g-3); line-height: 1.5; }
.f__more a { color: var(--k); text-underline-offset: 3px; }

/* past na boty — mimo obrazovku, ne display: none (to boti poznají) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.up { margin-bottom: 26px; border: 3px dashed var(--k); }
.up.is-over { background: var(--g-1); }
.up label { display: block; padding: 26px 20px; text-align: center; cursor: pointer; }
/* vstup je vizuálně skrytý, ale v pořadí tabulátoru — fokus musí být vidět na ploše */
.up input:focus-visible + label { outline: 3px solid var(--k); outline-offset: 3px; }
.up:has(input[aria-invalid="true"]) { border-style: solid; }
.up label b { display: block; font-size: 0.95rem; font-weight: 700; }
.up label span { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--g-3); }
.up ul { list-style: none; margin: 0; padding: 0 20px 18px; }
.up li { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-top: 1px solid var(--g-2); font-size: 0.86rem; }
.up__n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.up__s { flex: none; color: var(--g-3); font-variant-numeric: tabular-nums; }
.up__rm {
  flex: none;
  min-height: 32px; padding: 4px 10px;
  border: 2px solid var(--k); background: transparent;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.up__rm:hover { background: var(--k); color: var(--w); }
.up__msg { margin: 0; padding: 0 20px 16px; font-size: 0.86rem; font-weight: 700; text-align: center; }
.up__msg:empty { padding: 0; }

.note { margin: 14px 0 0; min-height: 1.4em; font-size: 0.88rem; text-align: center; color: var(--g-3); }
.note:focus { outline: none; }

/* Jediné místo na webu s barvou. Po odeslání formuláře musí být na
   první pohled jasné, jestli poptávka odešla, nebo se něco pokazilo —
   na černobílé stránce to samotná typografie nespolehlivě nerozliší.
   Text zůstává černý na světlé ploše, takže kontrast drží i pro
   barvoslepé; význam nese navíc ikona a samotná hláška. */
.note--ok, .note--err {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border: 3px solid;
  color: var(--k); font-weight: 700; font-size: 0.95rem; text-align: left;
}
.note--ok { margin: 14px 0 0; background: #EAF6EC; border-color: #1B7A3D; }
/* Na stránce po odeslání stojí box nad displejovým nadpisem. Anton
   přetéká nad svůj řádkový box, takže bez spodní mezery písmena
   zasahují do rámečku. */
.doc .note--ok { margin: 0 0 clamp(22px, 3vw, 34px); }
.note--err { margin: 0 0 14px; background: #FBEAEA; border-color: #B3261E; }
.note__ico { flex: none; font-size: 1.1rem; line-height: 1.35; }
.note--err[hidden] { display: none; }
.btn:disabled { cursor: progress; opacity: .6; }

/* ── FAQ ─────────────────────────────────────────────────── */

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.head--side { margin-bottom: 0; }
.faq__l { border-top: 3px solid var(--k); }
.qa { border-bottom: 1px solid var(--g-2); }
.qa summary {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 0;
  cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-left: auto; margin-top: 5px;
  background:
    linear-gradient(var(--k), var(--k)) center/16px 3px no-repeat,
    linear-gradient(var(--k), var(--k)) center/3px 16px no-repeat;
  transition: transform .24s;
}
.qa[open] summary::after { transform: rotate(135deg); }
.qa > div { padding: 0 40px 22px 0; color: var(--g-3); font-size: 0.96rem; }
.qa > div p { margin-bottom: 0.8em; }

/* ── Patička ─────────────────────────────────────────────── */

.foot { background: var(--k); color: var(--w); padding-top: clamp(48px, 6vw, 80px); overflow: hidden; }
.foot__in {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.foot h3 {
  margin: 0 0 16px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g-4);
}
.foot__in p { margin: 0 0 4px; font-size: 0.95rem; }
/* větší cíl a zřetelnější stav — odkaz v patičce byl jen text
   s vlasovou linkou v barvě pozadí */
.foot__in a {
  display: inline-block;
  padding-block: 3px;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .45);
  transition: border-color .16s, color .16s;
}
.foot__in a:hover { border-bottom-color: var(--w); }

/* Logotyp přes celou šířku patičky.

   pointer-events: none je nutnost, ne ozdoba. Při line-height 0,78 je
   řádkový box nižší než písmo, takže text přetéká nahoru mimo svůj box
   a sahá až 94 px nad spodek posledního odkazu ve sloupcích. V DOM je
   za nimi, takže při hit-testu vyhrával a spodní odkazy v patičce
   nešlo ani najet, natož kliknout. Je to čistě dekorace (aria-hidden),
   takže ukazatel nemá co odchytávat. */
.foot__wm {
  pointer-events: none;
  margin: 0;
  padding-inline: var(--gut);
  font-family: var(--ff-d);
  font-size: 31vw;
  line-height: 0.78;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px;
  padding-block: 22px 26px;
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--g-5);
  font-size: 0.78rem; color: var(--g-4);
}
.foot__legal p { margin: 0; }
.foot__legal a { color: var(--w); text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.foot__legal a:hover { text-decoration-color: var(--w); }

/* ── Podstránky ──────────────────────────────────────────── */

.bar__cta { margin-left: auto; min-height: var(--ctl-h); }
.doc { padding-block: clamp(48px, 7vw, 110px); border-top: 0; }
.doc__in { max-width: 74ch; }
.doc h2 { margin: 2.2em 0 0.6em; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.3; }
.doc p, .doc li { max-width: 70ch; }
.doc a { text-underline-offset: 3px; }
.doc .bars li { font-size: 1rem; }
.doc__lead { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; }
.doc__act { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 2em; }
.foot--sm { padding-top: 0; }
.foot--sm .foot__legal { margin-top: 0; border-top: 0; }

/* ── Mobilní lišta ───────────────────────────────────────── */

.mbar { display: none; position: fixed; inset: auto 0 0; z-index: 88; gap: 3px; background: var(--k); border-top: 3px solid var(--k); }
.mbar a {
  flex: 1; padding: 15px 10px;
  text-align: center; text-decoration: none;
  background: var(--w); color: var(--k);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mbar .mbar--hi { background: var(--k); color: var(--w); flex: 1.7; }

/* ── Souhlas s měřením ───────────────────────────────────── */
/* Obě tlačítka mají stejnou váhu: odmítnout musí jít stejně snadno
   jako přijmout. Na mobilu lišta stojí nad lištou Zavolat. */

.cc {
  position: fixed; inset: auto 0 0; z-index: 95;
  background: var(--w);
  border-top: 3px solid var(--k);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
}
.cc[hidden] { display: none; }
.cc__in { display: flex; align-items: center; gap: 16px 32px; padding-block: 18px; }
.cc__t { margin: 0; flex: 1; font-size: 0.9rem; color: var(--g-3); max-width: 78ch; }
.cc__t a { color: var(--k); font-weight: 700; }
.cc__act { display: flex; gap: 10px; flex-shrink: 0; margin-left: auto; }
.cc__act .btn { min-width: 9.5em; justify-content: center; }

.foot__btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--w); text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px;
}
.foot__btn:hover { text-decoration-color: var(--w); }

/* ── Zpět nahoru ─────────────────────────────────────────── */

.totop {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 87;
  width: var(--ctl-h); height: var(--ctl-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: var(--k);
  border: 2px solid var(--w);
  cursor: pointer;
  transition: background-color .16s;
}
.totop[hidden] { display: none; }
.totop-mez { position: absolute; top: 0; left: 0; width: 1px; height: 150vh; pointer-events: none; visibility: hidden; }
.totop:hover { background: var(--g-3); }
.totop span[aria-hidden] {
  width: 13px; height: 13px;
  margin-top: 4px;
  border-left: 3px solid var(--w);
  border-top: 3px solid var(--w);
  transform: rotate(45deg);
}

/* ── Responzivita ────────────────────────────────────────── */

/* Tlačítko a odkaz v hero potřebují vedle sebe ~476 px. Na poloviční
   šířku se to pod 1100 px přestane vejít, tak se patička složí do
   jednoho sloupce dřív než zbytek stránky. */
@media (max-width: 1100px) {
  .hero__foot { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
  .tiers { grid-template-columns: 1fr 1fr; }
  .tier:nth-child(3) { border-left: 0; }
  .faq, .ask, .petr, .hire { grid-template-columns: 1fr; }
  .mod__body { grid-template-columns: 1fr; }
  /* fotky jsou důvod, proč lidé detail otevírají — na jednom sloupci jdou první */
  .mod__shots { order: -1; }
  .petr__ph { max-width: 380px; }
  .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li:nth-child(4n) { padding-right: clamp(16px, 2.2vw, 34px); }
  .flow li:nth-child(2n) { padding-right: 0; }
  .grid9 { grid-template-columns: 1fr 1fr; }
  .grid9 > div { border-top: 1px solid var(--g-5); border-left: 1px solid var(--g-5); padding-inline: clamp(18px, 2vw, 30px); }
  .grid9 > div:nth-child(-n+2) { border-top: 0; }
  .grid9 > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .grid9 > div:nth-child(2n)   { padding-right: 0; }
}

@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; gap: 0; }
  .case + .case { margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(26px, 3.4vw, 44px); border-top: 1px solid var(--g-2); }
  .case__ph { max-width: 520px; }
  .bar__nav, .bar__tel { display: none; }
  .burger { display: block; }
  .foot__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { padding-bottom: 56px; }
  .tiers { grid-template-columns: 1fr; }
  .tier { border-left: 0; padding-inline: 0; }
  .tier + .tier { border-top: 1px solid var(--g-2); padding-top: clamp(26px, 4vw, 40px); }
  .tier--top { padding-inline: 20px; }
  .two { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
  /* dvh: na mobilu je 100vh vyšší než viditelná plocha a spodek modalu by zajel pod lištu prohlížeče */
  .mod { width: 100vw; max-width: 100vw; max-height: 100vh; max-height: 100dvh; border-width: 0; }
  .mod__hd { padding-block: 14px; }
  .mod__hd .micro { margin-bottom: 6px; }
  .ba__tabs label { flex: 1; text-align: center; padding-inline: 8px; }
  .mbar { display: flex; }
  .totop { bottom: calc(56px + 14px); }   /* nad mobilní lištou */
  .cc { bottom: 56px; }
  .cc__in { flex-direction: column; align-items: stretch; padding-block: 14px; }
  .cc__act .btn { flex: 1; min-width: 0; }

  /* Spodní lišta přebírá roli trvalého CTA, takže tlačítko v hlavičce
     je od téhle šířky duplicita. Zabíralo 119 z 390 px a nechávalo
     mezi sebou a hamburgerem jen 18 px. Nad 720 px, kde spodní lišta
     není, zůstává — je tam jediné trvale dostupné CTA. */
  .bar__act .btn { display: none; }
  .qa > div { padding-right: 0; }

  /* dvousloupcové řádky se skládají pod sebe */
  .row { grid-template-columns: 1fr; gap: 12px; }
  .flow { grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 36px); }
  .flow li { padding-right: 0; }
  .flow__end { display: none; }
  .grid9 { grid-template-columns: 1fr; }
  .grid9 > div { border-left: 0; border-top: 1px solid var(--g-5); padding-inline: 0; }
  .grid9 > div:first-child { border-top: 0; }
  .flow li { grid-template-columns: 1fr; gap: 10px; }
  .hire { padding: clamp(20px, 5vw, 32px); }

  /* na úzké obrazovce už fotka pod sazbou nepomáhá, jen ubírá
     kontrast — necháme z ní jen světlý závan */
  .hero__ph::after {
    background: linear-gradient(to bottom, rgba(255,255,255,.62) 0%, rgba(255,255,255,.78) 100%);
  }
  .hero__ph img { object-position: 34% 42%; }
}

/* ── Omezený pohyb ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Blog: karty a „Všechny…“ ────────────────────────────── */

.more { margin: clamp(28px, 3.5vw, 44px) 0 0; }

/* stejná mřížka jako karty realizací, ať obě sekce drží rytmus */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
  padding-top: clamp(24px, 2.6vw, 38px);
  border-top: 3px solid var(--k);
}
.post { position: relative; display: flex; flex-direction: column; }
.post__ph { margin: 0 0 clamp(18px, 2vw, 28px); }
.post__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post__date {
  margin: 0 0 10px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g-3);
}
.post__t { margin: 0 0 10px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; }
.post__t a { text-decoration: none; }
/* celá karta je klikací plocha, přístupné jméno nese odkaz v nadpisu */
.post__t a::after { content: ""; position: absolute; inset: 0; }
.post__p { margin: 0; font-size: 0.95rem; color: var(--g-3); }
.post__cta {
  margin-top: auto; padding-top: clamp(18px, 2vw, 26px);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.post__cta::after { content: " →"; }
.post:hover .post__cta, .post:focus-within .post__cta { text-decoration: underline; text-underline-offset: 5px; }
/* karta bez obrázku: typografická, displejové písmo nese kartu samo */
.post--text .post__t { font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.3; text-transform: uppercase; letter-spacing: 0; }

/* s položkou Blog má lišta sedm odkazů — na středních šířkách je stáhnout */
@media (max-width: 1240px) {
  .bar__nav { gap: 16px; margin-left: 18px; }
}

@media (max-width: 900px) {
  .posts { grid-template-columns: 1fr; gap: 0; }
  .post + .post { margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(26px, 3.4vw, 44px); border-top: 1px solid var(--g-2); }
  .post__ph { max-width: 520px; }
}

/* ── Podstránky výpisů a článek ──────────────────────────── */

/* lišta má vlastní spodní linku, první sekce pod ní ji nezdvojuje */
.sec--first { border-top: 0; padding-top: clamp(40px, 6vw, 88px); }

.crumbs {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.crumbs a { text-decoration: none; border-bottom: 2px solid var(--k); }
.crumbs span { opacity: .45; margin-inline: 4px; }

.pager { display: flex; flex-wrap: wrap; gap: 3px; margin-top: clamp(36px, 4vw, 56px); }
.pager a, .pager span:not(.vh) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--k);
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
}
.pager a:hover, .pager [aria-current] { background: var(--k); color: var(--w); }

.article { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 132px); }
.article__in { max-width: 860px; }
.article__date { margin: 0 0 1.4em; font-size: 0.92rem; color: var(--g-3); }
.article__lead { font-size: 1.2rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.015em; }
.article__cover { margin: clamp(28px, 3.5vw, 44px) 0; }
.article__cover img { width: 100%; }

/* text článku z Markdownu — jen prvky, které umí editor */
.prose { max-width: 70ch; }
.prose h2 { margin: 2em 0 0.6em; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.3; letter-spacing: -0.02em; }
.prose h3 { margin: 1.8em 0 0.5em; font-size: 1.15rem; line-height: 1.35; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--k); font-weight: 700; }
.prose figure { margin: 1.8em 0; }
.prose figure img { width: 100%; }
.prose a { text-underline-offset: 3px; }

.author {
  display: flex; align-items: center; gap: 20px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(24px, 3vw, 34px);
  border-top: 3px solid var(--k);
}
.author picture { flex: none; display: block; }
.author img { width: 88px; height: 88px; object-fit: cover; object-position: 60% center; filter: grayscale(1) contrast(1.06); }
.author__name { margin: 0 0 4px; font-family: var(--ff-d); font-size: 1.4rem; line-height: 1.1; text-transform: uppercase; }
.author__p { margin: 0; font-size: 0.92rem; color: var(--g-3); }

/* CTA v článku: inverzní blok, stejný jazyk jako sekce Důvěra */
.ctab { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3.5vw, 48px); background: var(--k); color: var(--w); }
.ctab p:not(.micro) { color: var(--g-4); max-width: 54ch; }
.ctab .btn { background: var(--w); color: var(--k); border-color: var(--w); }
.ctab .btn:hover { background: var(--k); color: var(--w); }
.ctab .lnk { border-bottom-color: var(--w); }
.ctab :focus-visible { outline-color: var(--w); }

.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: clamp(40px, 5vw, 64px); }
.pn a { display: block; padding: 20px 22px; border: 2px solid var(--k); font-weight: 700; text-decoration: none; }
.pn a:hover { background: var(--k); color: var(--w); }
.pn__lab { display: block; margin-bottom: 6px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.pn__newer { grid-column: 1; }
.pn__older { grid-column: 2; text-align: right; }

@media (max-width: 720px) {
  .pn { grid-template-columns: 1fr; }
  .pn__newer, .pn__older { grid-column: auto; text-align: left; }
  .author { align-items: flex-start; }
}