/* =========================================================
   Petra Puschnerová — úvodní stránka
   Podle Figmy: file EnESp9fSjeJK2rvIVqoBtu, node 224:3 (1440 px)

   Responzivita je plynulá (clamp), ne skoková.
   Písmo, odsazení, šířka obsahu i výška hero se interpolují
   spojitě mezi 360 px a 2560 px šířky okna. Křivka je zakotvená
   na 360 px (mobil) a 1440 px (schválený desktop) — na těchto
   dvou šířkách vychází přesně původní hodnoty, mezi nimi a nad
   nimi roste vše plynule. Breakpointy už řeší jen rozvržení
   (počet sloupců, co se skrývá), ne velikosti.
   ========================================================= */

:root{
  /* ---------- barvy (Figma) ---------- */
  --ink:#000000;
  --ink-90:#1c1c1c;
  --body:#55534f;
  --body-2:#414141;
  --line:#dedcd6;
  --grey-bg:#f2f2f2;
  --grey-line:#b8b8b8;
  --grey-txt:#828080;
  --dark:#1c1c1b;                       /* tmavá deska: CTA + patička (jediný tmavý blok na stránce) */
  --dark-line:rgba(255,255,255,.18);    /* jediná linka v tmavé ploše */
  --dark-muted:rgba(255,255,255,.62);   /* sekundární text na tmavé */
  --gold:#e0c58e;
  --gold-dark:#d2b375;
  --white:#ffffff;

  /* ---------- písma (Figma) ---------- */
  --display:'Clash Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --georgia:Georgia,'Times New Roman',serif;

  /* ---------- typografická škála ---------- */
  --t-micro: clamp(9.5px, 0.1389vw + 9px, 12.5px);
  --t-xs:    clamp(10.5px, 0.1389vw + 10px, 13.5px);
  --t-sm:    clamp(12.5px, 0.1852vw + 11.83px, 16.5px);
  --t-base:  clamp(13.5px, 0.2315vw + 12.67px, 18.5px);
  --t-md:    clamp(14.5px, 0.2778vw + 13.5px, 20.5px);
  --t-lg:    clamp(16px, 0.3704vw + 14.67px, 24px);
  --t-h3:    clamp(17px, 0.4167vw + 15.5px, 26px);
  --t-h2:    clamp(22px, 0.7407vw + 19.33px, 38.5px);
  --t-h1:    clamp(26px, min(7.8cqi, 3.4vw + 13px), 64px);   /* cqi = podle šířky textového bloku → vždy dva řádky */
  --t-hero-lead: clamp(14.5px, 0.3241vw + 13.33px, 21.5px);
  --t-num:   clamp(22px, 0.9259vw + 18.67px, 42.5px);
  --t-num-lg:clamp(25px, 1.019vw + 21.33px, 47.5px);
  --t-faze:  clamp(42px, 2.963vw + 31.33px, 107px);

  /* ---------- odstupy ---------- */
  --sp-1:  clamp(4px, 0.16vw + 3.4px, 7.5px);
  --sp-2:  clamp(8px, 0.32vw + 6.8px, 15px);
  --sp-3:  clamp(12px, 0.48vw + 10.3px, 22.5px);
  --sp-4:  clamp(16px, 0.64vw + 13.7px, 30px);
  --sp-5:  clamp(20px, 0.96vw + 16.5px, 41px);
  --sp-6:  clamp(26px, 1.28vw + 21.4px, 54px);
  --sp-7:  clamp(34px, 1.92vw + 27.1px, 76.5px);
  --sp-8:  clamp(44px, 2.56vw + 34.8px, 100.5px);

  /* mezera mezi sekcemi — hlavní „nadechnutí" */
  /* mezera mezi sekcemi roste se šířkou, ale nízké okno ji plynule zkrátí
     (dřív to dělal skokový @media podle výšky — viz poznámka u hero) */
  --gap:   clamp(56px, min(5.6vw + 43.8px, 22svh), 187px);
  --gap-sm:clamp(40px, 3.2vw + 28.5px, 110.5px);
  /* jednotný VELKÝ předěl mezi hlavními sekcemi */
  --gap-lg:clamp(92px, 8vw + 63.4px, 268px);

  /* ---------- rozvržení ---------- */
  --gutter: clamp(20px, 4.4vw + 4.2px, 117px);
  --wrap:   min(87.5vw, clamp(320px, 32.14vw + 797px, 1800px));
  --content: min(100% - 2*var(--gutter), var(--wrap));

  /* ---------- hlavička stránky (hero) ----------
     Jedno místo pro všechny vnitřní stránky. Kdo staví novou hlavičku,
     použije --hero-top a nic si nevymýšlí.
       --hero-top   odsazení hlavního nadpisu od horní hrany stránky.
                    Nadtitulek (.eyebrow) visí nad ním mimo tok, takže se
                    počítá od nadpisu, ne od nadtitulku.
       --hero-plus  přídavek pro tablety. Na tabletu je navigace poměrově
                    velká a nadpis se na ni lepil; přídavek plynule nabíhá
                    od 640 px, drží se na 48 px a do 1300 px zase klesne
                    k nule, takže na desktopu ani na mobilu nic nemění
                    a nikde není skok. Na nízkém okně se sám scvrkne. */
  --hero-top: clamp(120px, 12.5vw + 100px, 300px);
  --hero-plus: clamp(0px, min(
                 calc((100vw - 640px) * .28),
                 calc((1300px - 100vw) * .28),
                 8svh), 48px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* velmi široké monitory — obsah roste po stupních, ať se neztratí uprostřed plochy */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  display:flex;flex-direction:column;min-height:100dvh;   /* patička dole i na krátké stránce */
  font-family:var(--sans);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}

h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.98;letter-spacing:-.01em;text-wrap:nowrap}
h1 span{display:block}
h2{font-size:var(--t-h2);line-height:1.22;letter-spacing:.04em}
h3{font-size:var(--t-h3);line-height:1.3}

/* jednotný kontejner */
.wrap{width:var(--content);margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-90);color:#fff;padding:12px 20px;font-size:13px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--ink-90);outline-offset:3px}

/* ---------- tlačítko ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--gold);color:var(--ink);
  font-family:var(--display);font-weight:500;font-size:var(--t-base);
  padding:clamp(11px, 0.3704vw + 9.667px, 19px) clamp(18px, 0.9259vw + 14.67px, 38.5px);
  white-space:nowrap;line-height:1.2;
  transition:background-color .26s var(--ease);
}
.btn:hover{background:var(--gold-dark)}
.btn i{font-style:normal}

/* ---------- zlatě podtržený odkaz ---------- */
.link-gold{
  align-self:flex-start;margin-top:auto;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-90);
  border-bottom:1px solid var(--gold);padding-bottom:5px;
  transition:border-color .26s var(--ease);
}
.link-gold:hover{border-color:var(--ink-90)}

/* ---------- logo placeholder ---------- */
.logo{
  --logo:clamp(56px, 4.6vw + 40px, 158px);
  display:grid;place-items:center;flex:0 0 auto;
  width:var(--logo);height:var(--logo);
  background:var(--grey-bg);border:.5px solid var(--grey-line);
  position:relative;overflow:hidden;
}
.logo::before,.logo::after{
  content:"";position:absolute;inset:0;
  border-top:.5px solid var(--grey-line);transform-origin:top left;
}
.logo::before{transform:rotate(45deg) scaleX(1.415)}
.logo::after{transform:translateY(100%) rotate(-45deg) scaleX(1.415)}
.logo span{
  position:relative;z-index:1;background:var(--grey-bg);padding:0 6px;
  font-family:var(--sans);font-size:var(--t-micro);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.nav{position:absolute;inset:clamp(8px, 0.95vw + 4px, 28.5px) 0 auto;z-index:40}
.nav__inner{
  width:var(--content);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
}
.nav__right{display:flex;align-items:center}
.nav__panel{display:flex;align-items:center;gap:clamp(18px, 1.9vw + 5px, 53.5px)}
.nav__menu{display:flex;gap:clamp(14px, 1.15vw + 7px, 36.5px)}
.nav__menu a{
  font-family:var(--display);font-weight:500;font-size:var(--t-md);color:var(--white);
  text-shadow:0 1px 12px rgba(0,0,0,.4);
  white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .26s var(--ease);
}
.nav__menu a:hover{border-bottom-color:var(--gold)}
.nav .logo{background:rgba(255,255,255,.9)}
.nav__right .btn{font-size:var(--t-md)}
.burger{display:none}
.burger__box{
  position:relative;display:block;width:30px;height:16px;
}
.burger__box i{
  position:absolute;right:0;height:2px;background:var(--white);border-radius:2px;
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:width .34s var(--ease), transform .42s var(--ease),
             opacity .2s var(--ease), background-color .3s var(--ease);
}
.burger__box i:nth-child(1){top:0;width:30px}
.burger__box i:nth-child(2){top:7px;width:30px}
.burger__box i:nth-child(3){top:14px;width:18px}
@media (hover:hover){
  .burger:hover .burger__box i:nth-child(3){width:30px}
}

.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){width:30px;transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   1 · HERO   (video na celé ploše, text vlevo)
   ========================================================= */
.hero{
  position:relative;display:flex;align-items:stretch;isolation:isolate;
  min-height:min(90svh, clamp(560px, 41vw + 310px, 1240px));
  background:radial-gradient(120% 90% at 62% 34%, #edecee 0%, #e4e3e6 46%, #dbdadd 100%), #e2e1e4;
}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* jemné ztmavení zleva — video zůstává vidět, bílý text drží kontrast */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,14,20,.62) 0%, rgba(12,14,20,.42) 34%, rgba(12,14,20,.12) 60%, transparent 78%),
    linear-gradient(to top, rgba(12,14,20,.42) 0%, transparent 24%);
}
.hero__bg video{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center center;
}
.hero__video--tall,
.hero__video--tablet{display:none}

.hero__inner{
  position:relative;z-index:1;width:var(--content);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  /* Odsazení textu se řídí výškou okna spojitě, přes svh — žádný @media
     podle výšky. Dva prohlížeče se stejně velkým oknem, ale různě vysokými
     lištami, tak ukážou hero prakticky stejně. Dolní meze jsou nízko
     schválně: na nízkém okně se odsazení musí umět scvrknout. */
  padding-block:clamp(84px, 18svh, 200px) clamp(96px, 32svh, 320px);
}
.hero__text{container-type:inline-size;width:min(clamp(320px, 22.9vw + 330px, 800px), 62%)}
.hero h1{color:var(--white);text-shadow:0 1px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3)}
.hero__text p{
  margin-top:clamp(10px, 0.7407vw + 7.333px, 26.5px);max-width:100%;
  font-size:var(--t-hero-lead);line-height:1.4;color:var(--white);text-wrap:pretty;
  text-shadow:0 1px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}

/* =========================================================
   PÁS ČÍSEL — na širokých oknech statický řádek v hero,
   na úzkých nekonečný pás, do kterého jde sáhnout prstem
   ========================================================= */
.statsbar{
  --stats-gap:clamp(46px, 4.63vw + 29.33px, 148px);
  position:relative;z-index:3;
  background:transparent;
  /* na širokých oknech leží ve spodku hero */
  margin-top:calc(-1 * clamp(52px, 12svh, 152px));
  padding-block:0 clamp(18px, 5svh, 62px);
}

/* obal: vodorovné scrollování prstem, scrollbar skrytý.
   Výchozí stav je posuvný — kdyby JS nedoběhl, stránka se nerozjede do šířky. */
.statsbar__viewport{
  width:var(--content);margin-inline:auto;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;              /* skok o jednu sadu musí být okamžitý */
  scrollbar-width:none;-ms-overflow-style:none;
}
.statsbar__viewport::-webkit-scrollbar{display:none}

/* vejde se to celé → statický řádek, kopie se schová */
.statsbar__viewport.is-static{overflow:visible}
.statsbar__viewport.is-static .stats[aria-hidden]{display:none}
.statsbar__viewport.is-static .stats{padding-right:0}

/* stopa nese animaci a žádnou vlastní mezeru — jinak by nesedělo -50 % */
.statsbar__track{display:flex;width:max-content}

@keyframes statsMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.statsbar__viewport.is-live .statsbar__track{
  animation:statsMarquee var(--marquee-t, 30s) linear infinite;
  will-change:transform;
}
/* prst na pásu → animace stojí a drží si pozici */
.statsbar__viewport.is-held .statsbar__track{animation-play-state:paused}

/* na krajích průhledný přechod, ať pás nekončí useknutě */
.statsbar__viewport.is-live{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* mezeru nese seznam sám (gap uvnitř + stejný padding vpravo),
   proto mají obě sady na pixel stejnou šířku */
.stats{
  display:flex;align-items:center;flex:0 0 auto;
  gap:var(--stats-gap);
  list-style:none;margin:0;padding:0 var(--stats-gap) 0 0;
}

@media (prefers-reduced-motion:reduce){
  .statsbar__viewport.is-live .statsbar__track{animation:none}
}

.stats li{display:flex;align-items:center;gap:clamp(9px, 0.463vw + 7.333px, 19px);position:relative;flex:0 0 auto}
.stats li + li::before{
  content:"";position:absolute;left:calc(-1 * var(--stats-gap) / 2);
  top:50%;transform:translateY(-50%);
  width:1px;height:2.1em;background:var(--white);opacity:.4;
}

.stats__num{
  font-family:var(--serif);font-weight:600;font-size:var(--t-num);
  line-height:1.17;color:var(--white);white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}
/* všechna čísla v pásu mají stejnou velikost i tloušťku — žádné se nevytahuje
   dopředu. Jediný rozdíl je „+", které je schválně potlačené, aby vedlo oko
   na číslo; platí pro všechna stejně. */
.stats__num em{font-style:normal;color:rgba(255,255,255,.6)}
.stats__lbl{
  font-size:var(--t-sm);line-height:1.1;color:var(--white);opacity:.85;white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}

/* pod 900 px je pás samostatný, pod hero, s černým textem */
@media (max-width:899.98px){
  .statsbar{
    margin-top:0;background:var(--white);
    padding-block:clamp(26px, 4vw + 12px, 44px);
  }
  .statsbar__viewport{width:100%;padding-inline:var(--gutter)}
  .stats__num{color:var(--ink);text-shadow:none}
  .stats li + li::before{background:var(--ink);opacity:.2}
  .stats__num em{color:var(--grey-txt)}
  .stats__lbl{color:var(--body);opacity:1;text-shadow:none}
}

/* =========================================================
   2 · V JAKÉ SITUACI
   ========================================================= */
.sit{padding-top:var(--gap)}

/* hlavička · asymetrický dvousloupec — nadpis vlevo nahoře,
   doplňkový text vpravo u kraje, zarovnaný ke spodní lince nadpisu */
.sit__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,58ch);
  gap:clamp(28px, 3.2vw, 64px);align-items:end;
}
.sit__head h2{color:var(--ink-90);max-width:22ch}
.sit__head p{
  font-size:var(--t-base);line-height:1.6;color:var(--body);
  text-wrap:pretty;
}

/* tři situace · jeden společný rámeček dělený svislými hairline linkami,
   ne tři samostatné karty — celá buňka je proklik */
.sit__cards{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:var(--sp-7);
  border:1px solid var(--line);background:var(--white);
}
.sit__cell + .sit__cell{border-left:1px solid var(--line)}

.sit__link{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(30px, 2.2vw + 16px, 72.5px) clamp(24px, 1.6vw + 14px, 55px);
  color:inherit;text-decoration:none;
  transition:background-color .26s var(--ease);
}
.sit__link:hover,.sit__link:focus-visible{background:var(--grey-bg)}

.sit__cell h3{
  font-weight:500;font-size:clamp(19px, 0.6481vw + 16.67px, 33.5px);
  line-height:1.22;letter-spacing:.01em;color:var(--ink);
  max-width:15ch;
}
.sit__cell p{
  margin-top:clamp(12px, 0.8vw + 8px, 28.5px);
  font-size:var(--t-sm);line-height:1.65;color:var(--body);max-width:34ch;
}

/* odkaz sedí u všech tří buněk na stejné lince, ať je text jakkoli dlouhý */
.sit__cta{
  margin-top:auto;padding-top:clamp(26px, 2.2vw + 14px, 70.5px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);
}
.sit__cta .link-gold{margin-top:0;align-self:auto}
.sit__arrow{
  font-size:clamp(15px, 0.3704vw + 13.67px, 23px);line-height:1;color:var(--ink-90);opacity:.32;
  transition:transform .28s var(--ease),opacity .28s var(--ease);
}
.sit__link:hover .sit__arrow,
.sit__link:focus-visible .sit__arrow{opacity:1;transform:translateX(7px)}
.sit__link:hover .link-gold{border-color:var(--ink-90)}

@media (prefers-reduced-motion:reduce){
  .sit__arrow{transition:none}
  .sit__link:hover .sit__arrow{transform:none}
}

/* =========================================================
   3 · O MNĚ
   ========================================================= */
/* nahoře o kus víc prostoru, dole o 20 px navíc, ať sekce nekončí natěsno */
.omne{padding-top:calc(var(--gap) + 32px);padding-bottom:20px}
/* od výběru situací si medailonek drží větší odstup — na mobilu ne, tam je
   sloupec dost vzdušný sám o sobě */
@media (min-width:641px){
  .omne{padding-top:calc(var(--gap) + clamp(52px, 2.2vw + 20px, 88px))}
}
.omne__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.omne__top h2{max-width:18ch}
.omne__copy p{font-weight:300;font-size:var(--t-lg);line-height:1.4;color:var(--ink);text-wrap:pretty}
.omne__copy .btn{margin-top:var(--sp-5)}
.omne__media{
  display:grid;grid-template-columns:31.83% 41.59%;justify-content:start;
  gap:9.68%;align-items:end;
  /* fotky vytažené blíž k textu — pod nadpisem zůstávalo přes 160 px prázdna */
  margin-top:calc(-1 * clamp(12px, 1.8vw + 1.5px, 47.5px));
}
.omne__media img{width:100%;object-fit:cover}
.omne__media picture:first-child img{aspect-ratio:401/464}
.omne__media picture:last-child img{aspect-ratio:524/342}

/* =========================================================
   šedý pás (5 fází + aktivní prodej)
   ========================================================= */
.band-grey{background:var(--grey-bg);margin-top:var(--gap);padding-block:var(--gap-sm) var(--gap)}

/* --- 4 · 5 FÁZÍ --- */
.faze h2{margin-bottom:var(--sp-7)}
.faze__card{
  --num:var(--t-faze);                 /* velikost čísla — na mobilu se zmenší */
  background:var(--white);padding:var(--sp-6);position:relative;
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.faze__num{
  /* vršek číslice v jedné lince s vrškem nadpisu — dopočet z metriky písma */
  position:absolute;top:calc(var(--sp-6) + var(--t-h3) * .1877 - var(--num) * .0728);
  right:var(--sp-6);
  font-family:var(--display);font-weight:600;font-size:var(--num);
  line-height:.87;color:var(--ink);opacity:.06;pointer-events:none;
}
/* nadpis si drží roh volný vodorovně (šířka číslice) i svisle (její výška),
   takže číslo nikdy nesáhne ani na nadpis, ani na popisek pod ním */
.faze__card h3{
  font-size:var(--t-h3);line-height:1.1;position:relative;z-index:1;
  padding-right:calc(var(--num) * 1.52 + var(--sp-2));
}
.faze__card p{font-size:var(--t-md);line-height:1.25;color:var(--body-2)}
/* od tabletu nahoru sahá číslice pod nadpis — popisek se zúží, neodsouvá se dolů */
@media (min-width:641px){
  .faze__card p{padding-right:calc(var(--num) * 1.52 + var(--sp-2))}
}
/* na mobilu je karta úzká, zúžený popisek by se rozlámal na moc řádků —
   místo toho si nadpis podrží výšku číslice a popisek začne až pod ní */
@media (max-width:640px){
  .faze__card h3{min-height:calc(var(--t-h3) * .188 + var(--num) * .68)}
}
.faze__card img{width:100%;aspect-ratio:464/281;object-fit:cover;margin-top:var(--sp-2)}

/* --- 5 · AKTIVNÍ PRODEJ --- */
.upsell{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-7);align-items:start;margin-top:var(--gap-lg);
}
.upsell__left h2{color:var(--ink-90);max-width:20ch}
.upsell__lead{margin-top:var(--sp-4);font-size:var(--t-base);line-height:1.6;color:var(--body);max-width:46ch}
.upsell__quote{margin-top:var(--sp-4);font-family:var(--georgia);font-size:var(--t-base);line-height:1.6;color:var(--ink-90)}
/* jakmile se sloupce složí pod sebe, není důvod držet texty úzké */
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .upsell__left h2{max-width:none}
  .upsell__lead,.upsell__quote{max-width:62ch}
}
.deflist{border-top:1px solid var(--line)}
.deflist li{
  border-bottom:1px solid var(--line);padding:var(--sp-3) 0;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);
}
.deflist b{color:var(--ink-90)}

.fullbleed{margin:0}
.fullbleed img{width:100%;object-fit:cover;max-height:clamp(230px, 30vw, 440px)}

/* =========================================================
   6 · PŘÍPADOVÁ STUDIE
   ========================================================= */
.studie{
  display:grid;grid-template-columns:minmax(0,553fr) minmax(0,635fr);
  gap:var(--sp-8);align-items:start;padding-top:var(--gap);
}
.studie h2{max-width:20ch}
.studie > div > p{margin-top:var(--sp-5);max-width:52ch;font-size:var(--t-base);line-height:1.6;text-wrap:pretty}
.studie .btn{margin-top:var(--sp-5)}
.table{margin:0;border-top:1px solid var(--line)}
.table > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);
}
.table dt{
  font-size:var(--t-xs);letter-spacing:.125em;text-transform:uppercase;
  color:#8d8a84;line-height:1.6;
}
.table dd{
  margin:0;font-size:var(--t-sm);font-weight:700;color:var(--ink-90);
  text-align:right;line-height:1.6;
}
.table > div:last-child{border-bottom:0}
.table s{color:#8d8a84;font-weight:400;margin-right:.7em}

/* =========================================================
   7 · VIDEO    8 · KONKURENCE
   ========================================================= */
.video{padding-top:var(--gap-lg)}
.video h2{margin-bottom:var(--sp-6)}
.video__frame{
  margin:0;width:100%;
  aspect-ratio:16/9;background:var(--ink);position:relative;
}
.video__play{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:pointer;position:relative;
}
.video__play img{width:100%;height:100%;object-fit:cover;display:block}
.video__play::after{
  content:"";position:absolute;inset:0;
  background:rgba(12,14,20,.20);transition:background-color .3s var(--ease);
}
.video__play:hover::after,
.video__play:focus-visible::after{background:rgba(12,14,20,.34)}
.video__btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:clamp(54px, 3.7vw + 40px, 104px);aspect-ratio:1;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ink);
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.video__btn svg{width:38%;height:38%}
.video__play:hover .video__btn,
.video__play:focus-visible .video__btn{background:var(--gold);transform:translate(-50%,-50%) scale(1.06)}
.video__frame iframe{width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion:reduce){
  .video__play:hover .video__btn{transform:translate(-50%,-50%)}
}
/* fotky jsou vizuálně těžké (na mobilu navíc jdou až k okrajům),
   proto sekce dostane nad i pod sebe o kus víc než běžný předěl */
.konk{padding-block:calc(var(--gap-lg) + clamp(18px, 1.6vw + 12px, 26px)) clamp(18px, 1.6vw + 12px, 26px)}
.konk__lead{margin-top:var(--sp-3);max-width:58ch;font-size:var(--t-base);line-height:1.6}
.konk__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--sp-5);margin-top:var(--sp-7);
}

.ph{
  background:var(--grey-bg);border:.5px solid var(--grey-line);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.ph::before,.ph::after{content:"";position:absolute;inset:0;border-top:1px solid var(--grey-line);transform-origin:top left}
.ph::before{transform:rotate(30deg) scaleX(2.4)}
.ph::after{transform:translateY(100%) rotate(-30deg) scaleX(2.4)}
.ph span{
  position:relative;z-index:1;background:var(--grey-bg);padding:6px 12px;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-align:center;
}
.ph--wide{aspect-ratio:1257/600}
.ph--sq{aspect-ratio:1/1}

/* fotky offline materiálů — čtvercové, ostré rohy, bez rámečku */
.konk__grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}

/* Na mobilu by tři čtverce pod sebou zabraly přes tisíc pixelů výšky.
   Místo toho z nich uděláme pás, kterým se projíždí prstem — zabere výšku
   jedné fotky a další vykukuje zprava, takže je jasné, že se dá posunout. */
@media (max-width:640px){
  .konk__grid{
    display:flex;gap:var(--sp-3);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:auto;
    /* bez tohohle si pás sám odscrolluje odsazení a první fotka se nalepí na kraj */
    scroll-padding-inline:var(--gutter);
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* pás jde až k okrajům displeje, ať výkuk nevypadá jako chyba */
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
  }
  .konk__grid::-webkit-scrollbar{display:none}
  .konk__grid > li{flex:0 0 76%;scroll-snap-align:start}
}

/* =========================================================
   9 · NEMOVITOSTI
   Figma: fotka přes celou šířku + tmavý překryv, veškerý text bílý
   ========================================================= */
.nemo{padding-top:var(--gap-lg)}
.nemo > h2{margin-bottom:var(--sp-7)}

.nemo__row{
  position:relative;display:flex;align-items:center;
  min-height:clamp(380px, 34.9vw, 502px);
  padding-block:var(--sp-7);margin-bottom:var(--sp-5);
  isolation:isolate;
}
.nemo__bg{position:absolute;inset:0;z-index:0}
.nemo__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.nemo__row::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.4)}

.nemo__body{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nadpis adresa" "chipy adresa" "cena tlacitko";
  gap:var(--sp-5) var(--sp-7);align-items:start;
}
.nemo__body h3{
  grid-area:nadpis;
  font-size:var(--t-h2);line-height:1.06;color:var(--white);max-width:26ch;
}
.nemo__addr{
  grid-area:adresa;justify-self:end;text-align:right;max-width:38ch;
  font-weight:300;font-size:var(--t-lg);line-height:1.1;color:var(--white);
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.chips{grid-area:chipy;display:flex;gap:var(--sp-2);flex-wrap:wrap;align-self:center}
.chips li{
  display:flex;align-items:center;gap:.4em;
  background:var(--white);height:clamp(30px, 0.463vw + 28.33px, 40px);
  padding-inline:5px clamp(8px, 0.2778vw + 7px, 14px);
  font-family:var(--display);font-weight:400;font-size:var(--t-base);
  color:var(--ink);white-space:nowrap;line-height:1;
}
.chips img{width:clamp(24px, 0.5556vw + 22px, 36px);height:auto;flex:0 0 auto}
.nemo__price{grid-area:cena;align-self:end;display:flex;align-items:baseline;gap:5px;color:var(--white)}
.nemo__price span{font-family:var(--display);font-weight:400;font-size:var(--t-lg)}
.nemo__price b{font-family:var(--display);font-weight:500;font-size:var(--t-h2)}
.nemo__cta{grid-area:tlacitko;justify-self:end;align-self:end}

/* Rozvržení se dvěma sloupci se drží, dokud se nadpis a adresa vejdou vedle sebe.
   Jakmile ne, layout se zjednoduší: bílé obdélníčky s parametry zmizí a dole
   zůstane jen cena s tlačítkem na jednom řádku. */
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .nemo__body{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nadpis nadpis" "adresa adresa" "cena tlacitko";
    gap:var(--sp-4) var(--sp-5);
  }
  .nemo__body .chips{display:none}
  .nemo__body h3{max-width:24ch}
  .nemo__addr{text-align:left;justify-self:start;max-width:46ch}
  .nemo__price{align-self:center;margin-top:var(--sp-3)}
  .nemo__cta{justify-self:end;align-self:center;margin-top:var(--sp-3)}
}
/* na nejužších displejích se cena a tlačítko vedle sebe nevejdou */
@media (max-width:480px){
  .nemo__body{grid-template-columns:1fr;grid-template-areas:"nadpis" "adresa" "cena" "tlacitko"}
  .nemo__cta{justify-self:start;margin-top:0}
}

.nemo__more{
  width:var(--content);margin-inline:auto;
  /* nahoře blízko k nemovitostem, ke kterým patří; dole plný předěl */
  padding-block:calc(var(--gap-lg) * .48 - var(--sp-5)) calc(var(--gap-lg) * .8);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center;
}
.nemo__more p{
  font-family:var(--display);font-weight:500;font-size:var(--t-h2);
  line-height:1.14;color:var(--ink);
}
.nemo__more p span{display:block}
/* pod závěrečnou výzvou je na menších displejích potřeba víc klidu
   (musí stát až za základním pravidlem výš, jinak ho základ přebije) */
@media (max-width:640px){
  .nemo__more{padding-bottom:calc(var(--gap-lg) * 1.15)}
}
@media (min-width:641px) and (max-width:1100px){
  .nemo__more{padding-bottom:calc(var(--gap-lg) * .95)}
}

/* =========================================================
   10 · REFERENCE
   Figma: pás #ebeaeb, vlevo nadpis + tlačítko, vpravo karusel karet #e1e1e1
   ========================================================= */
.ref{background:#ebeaeb}
/* dole víc než nahoře — sekce se tím oddělí od tmavé desky pod sebou */
.ref.band-grey{margin-top:0;padding-block:var(--gap-sm) calc(var(--gap-sm) * 1.3)}
.ref__layout{
  display:grid;grid-template-columns:57.5% minmax(0,1fr);
  gap:0;align-items:start;
}
.ref__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-6)}
.ref__head h2{max-width:20ch}
/* Bílá deska na šedém pásu místo tmavšího šedého obdélníku — karta se tím
   nadzvedne z podkladu. Dole jméno oddělené krátkou vlasovou linkou.
   Ostré rohy, žádný stín, žádná ozdoba. */
.ref__card{
  position:relative;margin:0;background:var(--white);
  border:1px solid var(--line);
  padding:clamp(24px, 1.1vw + 19px, 38px) clamp(22px, 1.2vw + 17px, 38px) clamp(20px, .9vw + 17px, 32px);
  display:flex;flex-direction:column;
  min-height:clamp(186px, 11vw, 232px);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.ref__card:hover{border-color:var(--grey-line);transform:translateY(-3px)}

.ref .carousel__track > *{flex:0 0 80%;min-width:250px}

/* Karta se při najetí zvedne, ale stopa karuselu je scrollovací kontejner
   a horní okraj by uřízla — proto uvnitř trochu místa navíc.
   Zároveň se kraje prolnou, aby další recenze nebyla useknutá natvrdo. */
.ref .carousel__track{
  --fade:clamp(14px, 1.5vw, 30px);
  --maskL:var(--fade);--maskR:var(--fade);
  padding-block:6px 8px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--maskL), #000 calc(100% - var(--maskR)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--maskL), #000 calc(100% - var(--maskR)), transparent 100%);
}
.ref .carousel.je-zacatek .carousel__track{--maskL:0px}
.ref .carousel.je-konec   .carousel__track{--maskR:0px}
.ref__card blockquote{
  position:relative;margin:0;flex:1;
  font-size:var(--t-base);line-height:1.6;color:var(--ink-90);
  text-wrap:pretty;
}
.ref__card figcaption{margin-top:clamp(16px, .9vw + 11px, 24px)}
/* krátká linka nad jménem — jediný oddělovač na kartě */
.ref__kdo{
  display:inline-block;padding-top:clamp(10px, .5vw + 8px, 15px);
  border-top:1px solid var(--line);
  font-family:var(--display);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--body);
}
.flag{
  align-self:flex-start;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);border:1px dashed var(--grey-line);padding:4px 8px;
}

/* =========================================================
   11 · CTA  +  12 · PATIČKA — jedna tmavá deska
   Dva sourozenci se stejným pozadím a bez švu mezi sebou. Oko je rozdělí
   podle mezery, ne podle čáry. Poměry jsou proti původnímu vzoru stažené
   (Ondřej 3. 9. 2026): nahoře 0,55×, dole 0,68×, patička nahoru 0,40×.
   Nesymetrie zůstává — dole je pořád víc než nahoře — jen je celek sevřenější.
   Jediná linka v celé ploše je až nad spodním řádkem, takže něco znamená.
   Tři úrovně bez tří pozadí: akce → mezera → odkazy → linka → drobný tisk.
   Jen padding, nikdy margin (sousední marginy by se slily).
   ========================================================= */
.cta,
.footer{background:var(--dark);color:var(--white)}

/* nahoře míň, aby se CTA drželo světlé sekce nad sebou; dole víc, aby se
   odrazilo od patičky — v téhle nesymetrii je celý předěl */
.cta{padding-block:calc(var(--gap-lg) * .55) calc(var(--gap-lg) * .68)}
/* Výchozí je sloupec — text přes celou šířku, tlačítko pod ním.
   Vedle sebe se to postaví od 780 px, kde na to je místo. */
.cta__inner{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(26px, 2.6vw + 12px, 48px);
}
.cta__text{width:100%}
/* první řádek je nadpis sekce jako každý jiný, druhý je podtext pod ním */
.cta h2{color:var(--white);line-height:1.14}
.cta h2 span{display:block}
.cta h2 span:first-child{font-size:var(--t-h2);letter-spacing:.04em}
.cta h2 span + span{
  margin-top:clamp(5px, .35vw + 3.4px, 9px);
  font-family:var(--sans);font-weight:300;letter-spacing:0;
  font-size:var(--t-md);line-height:1.5;color:var(--dark-muted);
  max-width:46ch;
}
/* tlačítka se nikdy nesmáčknou; zalomí se pod nadpis až když na ně není místo */
.cta__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);flex-shrink:0}

@media (min-width:780px){
  .cta__inner{flex-direction:row;align-items:center;justify-content:space-between}
  .cta__text{width:auto;flex:1 1 0;min-width:0}   /* šířku dá zbylé místo, ne obsah */
}

/* obrysová varianta tlačítka pro tmavou plochu — na úvodní stránce se
   nepoužívá (v desce je záměrně jediné plné tlačítko), zůstává pro další stránky */
.btn--ghost{
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.32);
  padding:calc(clamp(11px, 0.3704vw + 9.667px, 19px) - 1px) calc(clamp(18px, 0.9259vw + 14.67px, 38.5px) - 1px);
  transition:background-color .26s var(--ease), border-color .26s var(--ease);
}
.btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.6)}

.footer{
  margin-top:auto;                      /* deska se natáhne i na krátké stránce */
  padding-block:calc(var(--gap-lg) * .40) clamp(20px, 1vw + 12px, 32px);
}

/* značka sama na řádku — druhý začátek bez jakéhokoli oddělovače */
.logo--footer{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);
  margin-bottom:clamp(28px, 2.8vw, 50px);
}
.logo--footer::before,.logo--footer::after{border-color:rgba(255,255,255,.2)}
.logo--footer span{background:var(--dark);color:var(--white)}

/* čtyři sloupce nestejné šířky — první drží kontakt, který je nejdelší */
.footer__grid{display:grid;gap:var(--sp-6) clamp(28px, 3.6vw, 92px)}
.footer__h{
  font-family:var(--display);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dark-muted);
  margin:0 0 clamp(16px, 1.4vw, 26px);line-height:1.2;
}
.footer__col ul li,
.footer__contact li{
  margin-bottom:clamp(10px, .6vw + 7px, 15px);
  line-height:1.35;font-weight:300;font-size:var(--t-base);color:var(--white);
}
.footer__contact li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.footer__contact span{color:var(--dark-muted);font-weight:400}
/* v patičce jsou jen textové odkazy — podtrhnou se až při najetí */
.footer__col a{color:var(--white);border-bottom:1px solid transparent;transition:border-color .26s var(--ease)}
.footer__col a:hover{border-bottom-color:rgba(255,255,255,.5)}

/* jediná linka v celé tmavé ploše */
.footer__bottom{
  display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;
  gap:var(--sp-2) var(--sp-5);
  margin-top:clamp(46px, 4vw, 60px);padding-top:clamp(14px, 1.2vw, 22px);
  border-top:1px solid var(--dark-line);
  font-weight:300;font-size:var(--t-xs);color:var(--dark-muted);line-height:1.35;
}
.footer__bottom p{margin:0}
.footer__bottom a{color:var(--white);border-bottom:1px solid var(--dark-line);transition:border-color .26s var(--ease)}
.footer__bottom a:hover{border-bottom-color:rgba(255,255,255,.6)}

/* =========================================================
   KARUSEL
   ========================================================= */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track > *{scroll-snap-align:start;flex:0 0 41.59%;min-width:260px}
.carousel__nav{display:flex;gap:10px;margin-top:var(--sp-6)}
.carousel__btn{
  --btn:clamp(38px, 0.7407vw + 35.33px, 54.5px);
  width:var(--btn);height:var(--btn);display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.34);color:var(--ink);border-radius:0;
  background:rgba(255,255,255,.55);
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
/* procenta se uvnitř vycentrované mřížky nepočítají z tlačítka — proto přímo z jeho velikosti */
.carousel__btn svg{width:calc(var(--btn) * .46);height:calc(var(--btn) * .46)}
.carousel__btn:hover:not([disabled]){background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
.carousel__btn[disabled]{opacity:.28;cursor:default}
.carousel__btn[disabled]:hover{background:rgba(255,255,255,.55);color:var(--ink);transform:none}

/* =========================================================
   ANIMACE
   ========================================================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   NÍZKÉ A ŠIROKÉ OKNO (např. notebook na šířku, 13″)

   Dřív tu byly dva zlomy podle výšky okna (760 a 560 px). Každý
   prohlížeč si ale ukrajuje jinak vysoké lišty, takže při stejně
   velkém okně spadl každý na jinou stranu zlomu — a stránka vypadala
   pokaždé jinak. Dvoupixelová změna okna posouvala nadpis o 105 px.

   Teď se výška okna řeší spojitě přes svh přímo v základních
   pravidlech (--gap, .hero__inner, .statsbar). Zlomy podle šířky
   okna zůstávají, ty jsou v pořádku — problém dělá jen výška.
   ========================================================= */

/* =========================================================
   ÚZKÉ A VYSOKÉ OKNO (tablet na výšku, rozdělená obrazovka)
   ========================================================= */
/* každé okno na výšku: fotka se zmenší a uhne pod text */
@media (orientation:portrait){
  .hero__bg img{
    right:-12%;bottom:14%;height:auto;width:min(118%, 780px);
    -webkit-mask-image:linear-gradient(100deg, transparent 0, #000 32%, #000 100%);
    mask-image:linear-gradient(100deg, transparent 0, #000 32%, #000 100%);
  }
  /* na výšku běží svislá verze videa, široká se skryje */
  .hero__video--wide{display:none}
  .hero__video--tall{
    display:block;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 22%;
    -webkit-mask-image:none;mask-image:none;
  }
  /* na výšku je text nahoře, závoj proto shora dolů */
  .hero__bg::before{
    background:linear-gradient(to bottom, rgba(12,14,20,.66) 0%, rgba(12,14,20,.4) 34%, rgba(12,14,20,.1) 58%, transparent 76%);
  }
}

@media (orientation:portrait) and (min-width:641px) and (max-width:1100px){
  .hero{min-height:min(90svh, 900px)}
  .hero__bg img{right:-6%;bottom:15%;width:min(96%, 700px)}
  /* tablet má vlastní výřez 3:4 — svislá mobilní verze by se roztáhla */
  .hero__video--tall{display:none}
  .hero__video--tablet{
    display:block;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 42%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__text{width:min(clamp(320px, 22.9vw + 330px, 800px), 74%)}
  /* text končí 30 % nad spodkem hero sekce */
  .hero__inner{padding-block:clamp(110px, 18svh, 200px) min(27svh, 270px)}
  .omne__top,.upsell,.studie{grid-template-columns:1fr;gap:var(--sp-6)}
  /* stohovaný sloupec na tabletu na výšku — záporný odstup by najel na tlačítko */
  .omne__media{
    grid-template-columns:1fr;gap:var(--sp-5);max-width:560px;justify-content:stretch;
    margin-top:var(--sp-5);
  }
}

/* menší tablety (768–900 px) mají oba texty ještě níž — 22 % nad spodkem */
@media (orientation:portrait) and (min-width:768px) and (max-width:899.98px){
  .hero__inner{padding-block:clamp(110px, 18svh, 200px) min(19.8svh, 198px)}
}

/* =========================================================
   TABLET A MENŠÍ
   ========================================================= */
@media (max-width:1100px){
  .hero__text{width:min(clamp(320px, 22.9vw + 330px, 800px), 72%)}
  .nav__panel{gap:var(--sp-5)}
  .ref__layout{grid-template-columns:minmax(0,1fr);gap:clamp(30px, 3vw + 16px, 48px)}
  .ref__head{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4)}
  .ref__head h2{max-width:100%;flex:1 1 260px}
  .ref .carousel__track > *{flex:0 0 min(76%,430px)}
  .studie{grid-template-columns:1fr;gap:var(--sp-6)}
}

@media (max-width:899.98px){
  .hero__text{width:min(clamp(320px, 22.9vw + 330px, 800px), 76%)}
  .omne__top{grid-template-columns:1fr;gap:var(--sp-5)}
  .omne__media{
    grid-template-columns:1fr;gap:var(--sp-5);max-width:520px;justify-content:stretch;
    margin-top:clamp(48px, 5.4vw + 24px, 72px);   /* na úzkém okně naopak níž, ať text dýchá */
  }
  /* druhá fotka se na úzkém okně neukazuje — svislý portrét sám unese celou sekci */
  .omne__media picture:last-child{display:none}
  .upsell{grid-template-columns:1fr;gap:var(--sp-6)}
  .sit__head{grid-template-columns:1fr;gap:var(--sp-4)}
  .sit__head p{border-left:0;padding-left:0}
  .sit__cards{grid-template-columns:1fr}
  .sit__cell + .sit__cell{border-left:0;border-top:1px solid var(--line)}
  .carousel__track > *{flex:0 0 min(72%,420px)}
  .ref .carousel__track > *{flex:0 0 min(82%,490px)}
  .omne__media{grid-template-columns:1fr;gap:var(--sp-5)}
}

/* =========================================================
   NAVIGACE SE SBALÍ DO HAMBURGERU (nevejde se od ~900 px)
   ========================================================= */
@media (max-width:899.98px){
  /* ---------- celoobrazovkové menu ---------- */
  .nav__right{
    position:fixed;inset:0;z-index:44;
    display:flex;align-items:center;justify-content:flex-start;
    background:#1C1C1B;
    padding:calc(var(--gutter) + 74px) var(--gutter) var(--gutter);
    /* zavřeno: „odliv" — plocha stažená k hornímu okraji */
    clip-path:inset(0 0 100% 0);
    pointer-events:none;
    transition:clip-path .42s cubic-bezier(.65,0,.35,1);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .burger[aria-expanded="true"] .burger__box i{background:var(--white);box-shadow:none}
  .nav__right.is-open{
    /* otevřeno: „vlna" — plocha se rozjede shora dolů */
    clip-path:inset(0 0 0 0);
    pointer-events:auto;
    transition:clip-path .58s cubic-bezier(.22,.61,.36,1);
  }

  .nav__panel{
    width:100%;max-width:560px;
    display:flex;flex-direction:column;
  }

  .nav__menu{flex-direction:column;gap:clamp(6px, 1.4svh, 16px);width:100%}
  .nav__menu a{
    display:flex;align-items:center;justify-content:space-between;
    color:var(--white);text-shadow:none;
    padding:clamp(4px, .8svh, 10px) 2px;
    font-size:clamp(23px, 6.4vw, 34px);line-height:1.1;
    border-bottom:0;
  }
  .nav__menu a::after{
    content:"→";font-size:.62em;color:var(--gold);
    opacity:0;transform:translateX(-10px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__menu a:hover::after,.nav__menu a:focus-visible::after{opacity:1;transform:none}

  .nav__right .btn{
    margin-top:clamp(22px, 4svh, 40px);
    align-self:flex-start;
    font-size:var(--t-base);
    padding:clamp(14px,1.8svh,18px) clamp(26px,7vw,38px);
  }

  /* položky nabíhají postupně — „vlna" ------------------- */
  .nav__panel > * > li,
  .nav__panel > .btn{
    opacity:0;transform:translateY(22px);
    transition:opacity .1s linear, transform .1s linear;
  }
  .nav__right.is-open .nav__panel > * > li,
  .nav__right.is-open .nav__panel > .btn{
    opacity:1;transform:none;
    transition:opacity .5s var(--ease), transform .62s var(--ease);
  }
  .nav__right.is-open .nav__menu li:nth-child(1){transition-delay:.14s}
  .nav__right.is-open .nav__menu li:nth-child(2){transition-delay:.2s}
  .nav__right.is-open .nav__menu li:nth-child(3){transition-delay:.26s}
  .nav__right.is-open .nav__menu li:nth-child(4){transition-delay:.32s}
  .nav__right.is-open .nav__menu li:nth-child(5){transition-delay:.38s}
  .nav__right.is-open .nav__panel > .btn{transition-delay:.46s}

  /* ---------- ikona ---------- */
  .burger{
    display:grid;place-items:center;
    width:46px;height:46px;position:relative;z-index:46;
  }
  /* logo zůstává nad otevřeným menu */
  .nav__inner > .logo{position:relative;z-index:46}

  /* zamčené rolování stránky pod otevřeným menu */
  html.nav-open,body.nav-open{overflow:hidden;touch-action:none}
}

@media (max-width:899.98px) and (prefers-reduced-motion:reduce){
  .nav__right,.burger[aria-expanded="true"] .burger__box i{background:var(--ink);box-shadow:none}
  .nav__right.is-open{transition:none}
  .nav__panel > * > li,.nav__panel > .btn{opacity:1;transform:none;transition:none}
}


/* =========================================================
   MOBIL
   ========================================================= */
@media (max-width:640px){
  .hero{min-height:min(100svh, 860px)}   /* na úzkém vysokém okně hero nesmí sežrat celou obrazovku */
  .hero__bg img{
    right:-16%;bottom:17%;height:auto;width:112%;
    -webkit-mask-image:linear-gradient(100deg, transparent 0, #000 30%, #000 100%);
    mask-image:linear-gradient(100deg, transparent 0, #000 30%, #000 100%);
  }
  .hero__video--tall{object-position:center center}
  .hero__inner{justify-content:flex-end;padding-block:clamp(110px, 22svh, 180px) 15svh}
  .hero__text{width:100%}

  .nemo__row{min-height:0;padding-block:var(--sp-6)}
  .nemo__body h3{max-width:100%}
  .nemo__addr{max-width:100%}
  .table > div{flex-direction:column;gap:2px}
  .table dd{text-align:left}
  .carousel__track > *{flex:0 0 86%}
  /* na úzké kartě by číslice v plné velikosti ukrojila nadpisu půlku šířky */
  .faze__card{--num:calc(var(--t-faze) * .74)}
  /* víc prostoru nad nadpisem sekce — jen na mobilu */
  .faze{margin-top:clamp(22px, 6.5vw, 40px)}
  /* studie sedí hned pod celoplošnou fotkou — na mobilu potřebuje víc vzduchu */
  .studie{padding-top:calc(var(--gap) + clamp(10px, 3.5vw, 22px))}
  .studie .btn{margin-bottom:clamp(10px, 4vw, 26px)}
  .ref .carousel__track > *{flex:0 0 84%}
  /* pod tlačítkem „Další příběhy" potřebuje karusel na mobilu odstup */
  .ref__layout{gap:clamp(38px, 8vw, 56px)}
  .cta__btns{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   VELMI VELKÉ MONITORY — hero musí růst s plochou,
   jinak zůstane text jako známka uprostřed obrazovky
   (bloky patří na konec, aby přebily šířkové varianty výš)
   ========================================================= */

/* =========================================================
   PATIČKA — dva zlomy, oba jen v mřížce sloupců.
   CTA se nezalamuje na příkaz, ale samo přes flex-wrap.
   ========================================================= */
/* =========================================================
   REFERENCE — na užších oknech potřebuje sekce víc vzduchu,
   hlavně pod sebou, než začne tmavá deska
   ========================================================= */
@media (max-width:1100px){
  .ref.band-grey{padding-block:calc(var(--gap-sm) * 1.18) calc(var(--gap-sm) * 1.75)}
}
@media (max-width:640px){
  .ref.band-grey{padding-block:calc(var(--gap-sm) * 1.25) calc(var(--gap-sm) * 2.1)}
}

@media (min-width:641px){
  .footer__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width:1025px){
  .footer__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr)}
}

/* =========================================================
   TMAVÁ DESKA — čím širší okno, tím blíž k sobě CTA a patička
   a tím víc prostoru nad vlasovou linkou nad copyrightem
   ========================================================= */
@media (min-width:641px){
  .cta{padding-bottom:calc(var(--gap-lg) * .62)}
  .footer{padding-top:calc(var(--gap-lg) * .35)}
  .footer__bottom{margin-top:clamp(58px, 5vw, 76px)}
}
@media (min-width:1101px){
  .cta{padding-bottom:calc(var(--gap-lg) * .56)}
  .footer{padding-top:calc(var(--gap-lg) * .30)}
  .footer__bottom{margin-top:clamp(76px, 6vw, 118px)}
}

/* =========================================================
   STRÁNKA NEMOVITOSTI
   Všechno sdílené (navigace, řádky nemovitostí, studie, tmavá deska)
   přebírá pravidla výš. Tady je jen hlavička stránky, šedý pás Prodáno,
   štítky a drobné varianty řádku.
   ========================================================= */

/* --- hlavička stránky · vzor A: nadpis vlevo nahoře, podtext vpravo dole
       u svislé linky. Navigace leží absolutně nad obsahem, proto velké
       horní odsazení. --- */
.pagehead{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  /* editorial posun: podtext začíná tam, kde nadpis končí — druhý řádek mřížky */
  grid-template-areas:"nadpis ." ". podtext";
  column-gap:clamp(28px, 3.2vw, 64px);row-gap:0;align-items:start;
  padding-top:var(--hero-top);
}
/* Tabletový přídavek dostává jen nadpis vlevo; podtext vpravo si ho vzápětí
   odečte, aby zůstal přesně tam, kde byl. */
.pagehead__title{grid-area:nadpis;position:relative;margin-top:var(--hero-plus)}
.pagehead__lead{grid-area:podtext}
/* nadtitulek visí nad nadpisem mimo tok — horní odsazení stránky se tak
   počítá od nadpisu, ne od něj */
.eyebrow{
  position:absolute;left:0;bottom:calc(100% + clamp(14px, 1vw + 8px, 24px));margin:0;
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.27em;
  text-transform:uppercase;color:#8d8a84;line-height:1.6;white-space:nowrap;
}
.pagehead h1{
  font-size:clamp(28px, 1.9vw + 22px, 50px);line-height:1.06;letter-spacing:.01em;
  color:var(--ink-90);max-width:26ch;text-wrap:balance;
}
.pagehead__lead{
  margin:calc(-1 * var(--hero-plus)) 0 0;
  padding-left:clamp(20px, 2vw, 30px);border-left:1px solid var(--line);
  font-size:var(--t-md);line-height:1.5;color:var(--body);text-wrap:pretty;
}

/* --- stránky bez videa v hero: navigace tmavě, otevřené menu zůstává bílé --- */
.page-light .nav__menu a{color:var(--ink-90);text-shadow:none}
.page-light .burger__box i{background:var(--ink-90);box-shadow:none}
.page-light .nav__right.is-open .nav__menu a{color:var(--white)}

/* studie, po které následuje tmavá deska, potřebuje pod sebou vzduch */
.studie--before-cta{padding-bottom:var(--gap-lg)}

/* --- úvod sekce se seznamem --- */
.nemo__intro{margin-bottom:var(--sp-7)}
.nemo__intro--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40ch);
  gap:clamp(28px, 3.2vw, 64px);align-items:end;
}
.nemo__intro--split p{margin:0;font-size:var(--t-base);line-height:1.6;color:var(--body);text-wrap:pretty}

/* --- Prodáno · šedý pás jako reference na úvodce --- */
.nemo--band{background:#ebeaeb;padding-top:var(--gap-sm)}

/* --- štítek · obrysový rámeček, verzálky (reference-lock „Štítek") --- */
.tag{
  display:inline-block;padding:5px 10px;border:1px solid currentColor;border-radius:4px;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.2;color:var(--white);
}
.tag--solid{background:var(--white);color:var(--ink);border-color:var(--white)}

/* --- řádek na stránce Nemovitosti má navíc štítek nad nadpisem --- */
.nemo--list .nemo__body{
  grid-template-areas:"stitek stitek" "nadpis adresa" "chipy adresa" "cena tlacitko";
}
.nemo__tag{grid-area:stitek;justify-self:start;margin-bottom:calc(var(--sp-3) - var(--sp-5))}

/* parametr bez ikony (např. pozemek) */
.chips__lbl{
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--body);margin:0 .35em 0 .4em;
}

/* --- prodané: místo ceny doba, místo tlačítka štítek + odkaz na studii --- */
.nemo__price--doba{flex-direction:column;align-items:flex-start;gap:3px}
.nemo__price--doba span{
  font-family:var(--sans);font-weight:300;font-size:var(--t-sm);line-height:1.3;
  color:rgba(255,255,255,.74);
}
.nemo__cta--sold{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3)}
.nemo__cta--sold .link-gold{margin-top:0;align-self:auto;color:var(--white)}
.nemo__cta--sold .link-gold:hover{border-color:var(--white)}

/* --- skládání --- */
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .pagehead{grid-template-columns:1fr;grid-template-areas:"nadpis" "podtext";row-gap:var(--sp-5);align-items:start}
  .pagehead__lead{margin-top:0;border-left:0;padding-left:0;max-width:46ch}
  .nemo__intro--split{grid-template-columns:1fr;gap:var(--sp-3);align-items:start}
  .nemo--list .nemo__body{
    grid-template-areas:"stitek stitek" "nadpis nadpis" "adresa adresa" "cena tlacitko";
  }
  .nemo__cta--sold{align-items:flex-end}
}
@media (max-width:480px){
  .nemo--list .nemo__body{grid-template-areas:"stitek" "nadpis" "adresa" "cena" "tlacitko"}
  .nemo__cta--sold{align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* =========================================================
   DETAIL NEMOVITOSTI
   Nic vlastního navíc: hlavička přebírá .pagehead ze stránky
   Nemovitosti, parametry .table z případové studie, tmavá deska
   a patička zůstávají beze změny. Tady je jen galerie a sazba
   popisu — ve stejném rytmu a se stejnými odstupy.
   ========================================================= */
.detail__galerie{padding-top:var(--gap-sm)}
.detail__hlavni{margin:0;aspect-ratio:16/9;background:var(--grey-bg);overflow:hidden}
.detail__hlavni img{width:100%;height:100%;object-fit:cover;display:block}
.detail__mrizka{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3);
}
.detail__mrizka li{aspect-ratio:4/3;background:var(--grey-bg);overflow:hidden}
.detail__mrizka img{width:100%;height:100%;object-fit:cover;display:block}

/* popis vlevo, parametry vpravo — stejné poměry sloupců i mezera jako u studie */
.detail__telo{
  display:grid;grid-template-columns:minmax(0,553fr) minmax(0,635fr);
  gap:var(--sp-8);align-items:start;padding-top:var(--gap);
}
.detail__popis h2{max-width:20ch}
.detail__popis p{
  margin-top:var(--sp-4);max-width:52ch;
  font-size:var(--t-base);line-height:1.6;color:var(--body);text-wrap:pretty;
}
.detail__cena{
  display:flex;align-items:baseline;gap:5px;color:var(--ink-90);
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.detail__cena span{font-family:var(--display);font-weight:400;font-size:var(--t-lg);color:var(--body)}
.detail__cena b{font-family:var(--display);font-weight:500;font-size:var(--t-h2)}
.detail__popis .btn{margin-top:var(--sp-5)}

/* před tmavou deskou stejný vzduch jako pod studií */
.detail__zpet{padding-top:var(--gap-sm);padding-bottom:var(--gap-lg)}

@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .detail__telo{grid-template-columns:1fr;gap:var(--sp-6);padding-top:var(--gap-sm)}
  .detail__mrizka{gap:var(--sp-2)}
}
@media (max-width:480px){
  .detail__mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   STRÁNKA CITLIVÉ SITUACE
   Stavba podle Figmy, velikosti a odstupy z našich tokenů.
   Sdílené prvky (navigace, tmavá deska, patička) beze změny.
   ========================================================= */

/* --- hlavička · text vlevo, Petra vpravo -------------------------------
   Pozadí sekce je svislý pruh vyříznutý přímo z fotky a roztažený přes celou
   šířku. Fotka i pozadí se tak škálují na stejnou výšku a jejich odstíny na
   sebe navazují v každém bodě — spoj není vidět na žádné velikosti okna.
   Šířka fotky vychází z výšky sekce, takže poměr snímku zůstává nedotčený
   a citace se podle téhož čísla umí postavit přesně vedle Petry. */
.shero{
  /* ---- co o snímku víme; jiná stránka si je přepíše a zbytek dopočítá sám ----
     --shero-pozadi   pruh pozadí vyříznutý z téhož snímku
     --shero-pomer    šířka snímku ku výšce
     --shero-hlava    v jaké části výšky snímku začíná hlava
     --shero-podlaha  kolik podlahy je pod nohama (schová se pod spodní hranu)
     --shero-schov    kolik snímku zajede za pravý okraj obsahu
     --shero-sloupec  šířka textového sloupce vlevo                        */
  --shero-pozadi: url(../img/citlive-pozadi-b.webp);
  /* tón posledního řádku pruhu — dokreslí plochu, když je sekce vyšší než fotka */
  --shero-pozadi-dole: #dedcda;
  --shero-pomer: .6773;
  --shero-hlava: .204;
  --shero-podlaha: .027;
  --shero-schov: .15;
  --shero-sloupec: min(55%, 760px);
  /* Výška fotky. Druhý člen je pojistka: fotka musí být vždycky aspoň tak
     vysoká, aby hlavě zbylo dost místa pod navigací — i na nízkém okně. */
  --sh: min(1400px, max(
          min(96svh, clamp(560px, 44vw + 330px, 1280px)),
          calc((clamp(56px, 4.6vw + 40px, 158px) + 63px) / var(--shero-hlava))
        ));
  /* Spodní hrana tlačítka v navigaci — jediné, co Petře nad hlavou reálně
     překáží (logo je vlevo, daleko od fotky). Vychází z odsazení .nav,
     poloviny výšky loga a půlky tlačítka, zaokrouhleno nahoru. */
  --navspod: calc(clamp(8px, 0.95vw + 4px, 28.5px)
                  + clamp(56px, 4.6vw + 40px, 158px) / 2 + 34px);
  /* O kolik se fotka vysune nad horní hranu sekce: nohy zůstanou na spodku,
     takže se o stejné číslo zkrátí celá sekce a texty se nehnou. Nikdy ale
     tolik, aby hlavě zbylo pod tlačítkem míň než 24 px. */
  --shero-posun-max: clamp(40px, 4vw, 110px);
  --shero-maska: linear-gradient(90deg, transparent 0, #000 30%, #000 90%, transparent 100%);
  --posun: max(0px, min(
             var(--shero-posun-max),
             calc(var(--sh) * var(--shero-hlava) - var(--navspod) - 24px)
           ));
  /* Pod podrážkami je na snímku ještě 2,7 % podlahy. Ta se schová pod spodní
     hranu sekce — hlavička se o ni zkrátí, ale Petra se nehne. */
  --podlaha: calc(var(--sh) * var(--shero-podlaha));
  --sh-foto: calc(var(--sh) * var(--shero-pomer));
  /* kde končí obsah stránky (u širokých oken je to víc než okraj) */
  --okraj: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  position:relative;display:grid;align-content:start;isolation:isolate;
  min-height:calc(var(--sh) - var(--posun) - var(--podlaha));padding-bottom:clamp(40px, 3vw + 10px, 80px);
  /* Pruh pozadí musí ležet přesně na stejných řádcích jako fotka, jinak
     se jejich přechody rozejdou a na hraně snímku je vidět šev. Proto
     stejná výška i stejné vysunutí jako má fotka. */
  background:var(--shero-pozadi) 0 calc(-1 * var(--posun)) / 100% var(--sh) no-repeat, var(--shero-pozadi-dole);
  overflow:hidden;
}
/* Špička boty sedí na stejné svislici, kde končí obsah stránky — proto ten
   posun: bota je na 85 % šířky snímku, zbylých 15 % je pozadí, které se
   schová za okraj okna. */
.shero__foto{
  position:absolute;top:calc(-1 * var(--posun));bottom:auto;z-index:0;
  right:calc(var(--okraj) - var(--sh-foto) * var(--shero-schov));
  width:var(--sh-foto);height:var(--sh);pointer-events:none;
}
.shero__foto picture{display:contents}
.shero__foto img{
  width:100%;height:100%;object-fit:cover;object-position:center bottom;
  /* měkké obě svislé hrany — vlevo dlouhý přechod do pozadí sekce,
     vpravo krátký, aby špička boty (85 % šířky) zůstala ostrá */
  -webkit-mask-image:var(--shero-maska);
  mask-image:var(--shero-maska);
}
/* odsazení od navigace stejné jako na ostatních vnitřních stránkách.
   Pozor: sekce musí mít align-content:start, jinak ji vyšší fotka
   odcentruje a text spadne níž než .pagehead na ostatních stránkách. */
.shero__inner{
  position:relative;z-index:1;
  padding-block:calc(var(--hero-top) + var(--hero-plus)) 0;
}
.shero__sloupec{width:var(--shero-sloupec)}
.shero__text{position:relative}
.shero h1{max-width:21ch;font-size:clamp(28px, 1.9vw + 22px, 50px);line-height:1.06;letter-spacing:.01em;text-wrap:balance}
.shero__lead{
  margin-top:clamp(16px, 1.1vw + 9px, 30px);
  font-size:var(--t-hero-lead);line-height:1.42;color:var(--body);text-wrap:pretty;
}
.shero .btn{margin-top:clamp(22px, 1.6vw + 12px, 42px)}

/* citace stojí samostatně vpravo dole, těsně vedle Petry — odsazení zprava
   je odvozené ze šířky fotky, takže na ni nikdy nenajede */
.shero__cit{
  position:relative;z-index:1;
  width:min(38%, 560px);
  margin-top:clamp(36px, 3.6vw + 12px, 96px);margin-left:auto;
  /* pravý okraj se odvíjí od šířky fotky, takže citace stojí vždy těsně
     vedle Petry — ať je okno jakkoli velké */
  margin-right:calc(var(--okraj) + var(--sh-foto) * .64 + clamp(20px, 1.6vw, 40px));
  padding-left:clamp(18px, 1.4vw + 9px, 30px);border-left:1px solid var(--grey-line);
}
.shero__cit p{font:italic var(--t-sm)/1.65 var(--georgia);color:var(--body);text-wrap:pretty}

/* --- rozvod · fotka vlevo, obsah vpravo --- */
.situ{
  padding-top:var(--gap);
  /* Textu je dopřáno víc místa než v návrhu — kratší odstavec o třech
     řádcích lidé přečtou, pětiřádkový přeskočí. */
  display:grid;grid-template-columns:minmax(0,480fr) minmax(0,700fr);
  gap:clamp(24px, 3.4vw + 8px, 110px);align-items:start;
}
.situ__foto img{width:100%;aspect-ratio:511/419;object-fit:cover}
/* Odstavec jde přes celý sloupec. Kratší řádky vypadají vzdušně, ale text
   pak má víc řádků a lidé ho přeskočí — radši širší a nižší blok. */
.situ__lead{
  margin-top:var(--sp-4);
  font-size:var(--t-base);line-height:1.6;color:var(--body);text-wrap:pretty;
}
/* nadtitulek nad seznamem — stejný rukopis jako popisky v tabulce studie */
.situ__lbl{
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:#8d8a84;
}
.situ__seznam{margin-top:var(--sp-3);list-style:none;padding:0}
.situ__seznam li{
  display:flex;align-items:baseline;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-sm);line-height:1.5;color:var(--ink-90);text-wrap:pretty;
}
.situ__cislo{
  flex:0 0 auto;font-family:var(--georgia);font-size:var(--t-xs);color:#8d8a84;
}

/* --- dědictví --- */
.dedictvi{padding-top:var(--gap)}
.dedictvi__lead{
  margin-top:var(--sp-4);max-width:min(100%, 104ch);
  font-size:var(--t-base);line-height:1.6;color:var(--body);text-wrap:pretty;
}
.dedictvi__pod{
  margin-top:var(--sp-6);max-width:min(100%, 112ch);
  font-size:var(--t-sm);line-height:1.65;color:var(--body);text-wrap:pretty;
}

/* --- společný rámeček dělený hairline linkami (stejný prvek jako na úvodce) --- */
.ramec{
  margin-top:var(--sp-7);list-style:none;margin-bottom:0;padding:0;
  display:grid;border:1px solid var(--line);background:var(--white);
}
.ramec--4{grid-template-columns:repeat(4, minmax(0,1fr))}
.ramec--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.ramec__cell{padding:clamp(24px, 1.5vw + 12px, 48px) clamp(20px, 1.2vw + 12px, 40px)}
.ramec__cell + .ramec__cell{border-left:1px solid var(--line)}
.ramec__cell h3{font-size:var(--t-lg);line-height:1.3}
.ramec__cell p{
  margin-top:var(--sp-2);
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}

/* --- reframe · jediný tmavý pás uvnitř stránky --- */
.reframe{
  margin-top:var(--gap);background:var(--dark);color:var(--white);
  padding-block:clamp(52px, 4.4vw + 30px, 130px);text-align:center;
}
.reframe__veta{
  margin-inline:auto;max-width:34ch;
  font-family:var(--display);font-weight:500;font-size:var(--t-h2);
  line-height:1.24;letter-spacing:.01em;color:var(--white);text-wrap:balance;
}
.reframe__pod{
  margin:clamp(16px, 1.2vw + 9px, 32px) auto 0;max-width:62ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--dark-muted);text-wrap:pretty;
}

/* --- jak vypadá první krok --- */
.krok{padding-top:var(--gap);padding-bottom:var(--gap-lg)}
.krok__num{
  display:grid;place-items:center;
  width:clamp(30px, 1.1vw + 18px, 46px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);
  font-family:var(--display);font-size:var(--t-sm);color:#8d8a84;line-height:1;
}
.krok .ramec__cell h3{margin-top:var(--sp-3)}

/* --- skládání --- */
/* Nad 900 px stojí fotka vlevo vedle textu a jede s ním dolů: drží se
   pod horní hranou okna, dokud neskončí pátý bod vpravo. Tam ji zarazí
   konec jejího políčka v mřížce. Ve složeném stavu nemá kam jet. */
@media (min-width:900px){
  .situ__foto{position:sticky;top:clamp(20px, 5svh, 64px)}
}

@media (max-width:1100px){
  .ramec--4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ramec--4 .ramec__cell:nth-child(2n+1){border-left:0}
  .ramec--4 .ramec__cell:nth-child(n+3){border-top:1px solid var(--line)}
}

/* pod 1180 px citace pryč — vedle Petry na ni není dost místa a pod textem
   by splynula s hlavním odstavcem. Platí pro tablet i mobil. */
@media (max-width:1180px){
  .shero__sloupec{width:var(--shero-sloupec-tablet, min(100%, 54%))}
  .shero__cit{display:none}
}

/* pod 900 px fotka mizí — v úzkém sloupci by se jen tísnila.
   Citace zůstává skrytá i tady; je jen pro desktop. */
@media (max-width:899.98px){
  .situ{grid-template-columns:1fr;gap:var(--sp-6)}
  .situ__foto img{aspect-ratio:16/9}
  .shero{background:var(--white);min-height:0}
  .shero__foto{display:none}
  .shero__sloupec{width:100%}
  .shero__inner{padding-block:calc(var(--hero-top) + var(--hero-plus)) 0}
  .ramec--3{grid-template-columns:1fr}
  .ramec--3 .ramec__cell + .ramec__cell{border-left:0;border-top:1px solid var(--line)}
}

@media (max-width:640px){
  /* Na mobilu jsou sekce nad sebou a bez bočních opor, takže potřebují
     víc místa nad i pod, jinak na sebe vizuálně nalézají. */
  .dedictvi{padding-top:calc(var(--gap) * 1.5)}
  .reframe{
    margin-top:calc(var(--gap) * 1.5);
    padding-block:clamp(72px, 14vw + 20px, 110px);
  }
  .ramec--4{grid-template-columns:1fr}
  .ramec--4 .ramec__cell + .ramec__cell{border-left:0;border-top:1px solid var(--line)}
  .ramec--4 .ramec__cell:nth-child(n+3){border-top:1px solid var(--line)}
  .shero__lead{max-width:100%}
}

/* =========================================================
   PRO KUPUJÍCÍ
   Hlavička je stejná jako na Nemovitostech (.pagehead), jen přibyl
   třetí řádek s tlačítkem. Tmavý pás přebírá .reframe z Citlivých
   situací, karty přebírají .ramec.ramec--3. Nic vlastního navíc,
   jen seznam pěti kroků, který zatím nikde nebyl.
   ========================================================= */

/* --- hlavička s tlačítkem pod nadpisem --- */
/* Nadpis je delší než na Nemovitostech, tak dostane širší sloupec —
   na desktopu se pak vejde na tři řádky jako v návrhu. */
.pagehead--kup{
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  grid-template-areas:"nadpis ." ". podtext" "tlacitko .";
}
.pagehead__cta{grid-area:tlacitko;margin-top:clamp(30px, 2.4vw + 12px, 58px)}
/* Nadpis téhle stránky má 89 znaků — proti 37 na Citlivých situacích
   a 66 na Nemovitostech. Na úzkém okně se proto láme na pět řádků a čte
   se jako odstavec, ne jako nadpis. Startuje tedy o kousek níž (25 px
   místo 28) a k desktopu dojde na stejných 50 px jako všude jinde,
   takže se nikde nic nerozjede. Delší nadpis = nižší start, nic jiného. */
.pagehead--kup h1{font-size:clamp(25px, 2.52vw + 15.2px, 50px)}

/* --- společná hlavička sekce: nadpis vlevo, drobná poznámka vpravo --- */
.sekhlava{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40ch);
  gap:clamp(28px, 3.2vw, 64px);align-items:end;margin-bottom:var(--sp-7);
}
.sekhlava p{
  margin:0;font-size:var(--t-sm);line-height:1.6;color:#8d8a84;text-wrap:pretty;
}

/* --- pět kroků · číslo, název, popis, mezi nimi vlasové linky --- */
/* Nad seznamem víc vzduchu než mezi ostatními sekcemi — hlavička stránky
   nad ním nemá spodní odsazení, tak si ho sekce vezme sama.
   Pod ním naopak míň, tmavý pás si oddělí sám svou plochou. */
.pece{padding-top:var(--gap-lg)}
.pece__seznam{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--line);
}
.pece__seznam li{
  display:grid;
  grid-template-columns:minmax(0,3ch) minmax(0,26ch) minmax(0,1fr);
  grid-template-areas:"cislo nazev popis";
  gap:clamp(18px, 2.6vw, 56px);align-items:start;
  padding-block:clamp(20px, 1.4vw + 12px, 34px);
  border-bottom:1px solid var(--line);
}
.pece__num{
  grid-area:cislo;
  font-family:var(--georgia);font-size:var(--t-base);color:#8d8a84;line-height:1.45;
}
.pece__seznam h3{grid-area:nazev;font-size:var(--t-base);line-height:1.45}
.pece__seznam p{
  grid-area:popis;margin:0;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}

/* --- tmavý pás · věta je delší než na Citlivých situacích, dostane víc místa --- */
.reframe--kup .reframe__veta{max-width:46ch}
.reframe__odkaz{
  display:inline-block;margin-top:clamp(24px, 1.8vw + 12px, 42px);
  font-family:var(--sans);font-size:var(--t-xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:5px;
  transition:border-color .26s var(--ease);
}
.reframe__odkaz:hover{border-color:var(--white)}

/* --- pro koho je služba --- */
.prokoho{padding-top:var(--gap);padding-bottom:var(--gap-lg)}

/* ve složeném stavu musí i tahle hlavička spadnout do jednoho sloupce —
   stejná podmínka jako u základního .pagehead o pár set řádků výš */
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .pagehead--kup{
    grid-template-columns:1fr;
    grid-template-areas:"nadpis" "podtext" "tlacitko";
  }
}

@media (max-width:899.98px){
  .sekhlava{grid-template-columns:1fr;gap:var(--sp-3);align-items:start}
  /* v úzkém sloupci popis sklouzne pod název, číslo zůstává vlevo */
  .pece__seznam li{
    grid-template-columns:minmax(0,3ch) minmax(0,1fr);
    grid-template-areas:"cislo nazev" "cislo popis";
    gap:var(--sp-2) clamp(14px, 3vw, 28px);
  }
  .pece__seznam p{margin-top:var(--sp-2)}
}

/* =========================================================
   O MNĚ
   Hlavička je týž prvek jako na Citlivých situacích — jen jiný snímek,
   takže stačí přepsat šest čísel o fotce. Karty přebírají .ramec--3,
   šedý pás .band-grey. Vlastní je jen časová osa, tmavý pás se školením
   a fotopás z Austrálie.
   ========================================================= */

/* Tady už není fotka s vlastním pozadím, ale Petra vyříznutá do průhledna.
   Ateliérovou plochu si proto kreslí sekce sama — jedním přechodem přes
   celou šířku. Nejsou tu žádné hrany snímku, takže se nemá co rozejít,
   ať je obrazovka jakkoli velká. */
.shero--omne{
  /* plocha jen tam, kde je vidět Petra; pod 900 px se stránka vrací
     na bílou úplně stejně jako Citlivé situace */
  background:var(--white);
  /* Snímek končí v půli stehen — tvrdý řez by vypadal jako useknutá noha,
     tak se spodek postavy měkce rozplyne do plochy sekce. */
  --shero-maska: linear-gradient(180deg, #000 0, #000 84%, transparent 99%);
  --shero-pomer: .6372;      /* 1400 : 2197 */
  --shero-hlava: .280;       /* okraj klobouku */
  --shero-podlaha: 0;        /* postava je uříznutá spodní hranou sekce */
  --shero-schov: .1475;      /* loket sedí na okraji obsahu */
  --shero-sloupec: min(66%, 900px);
  --shero-sloupec-tablet: min(100%, 58%);
  /* Nad hlavou je na snímku víc místa než u Citlivých situací, takže se
     fotka smí vysunout výš — jinak by nad kloboukem zbyl zbytečný pás. */
  --shero-posun-max: clamp(60px, 8vw, 220px);
}
.shero--omne h1{max-width:28ch}

/* --- časová osa · vlevo etapa, vpravo co se v ní stalo --- */
.cesta{padding-top:var(--gap)}
.cesta__seznam{
  list-style:none;margin:var(--sp-7) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.cesta__seznam li{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(18px, 3vw, 64px);align-items:start;
  padding-block:clamp(22px, 1.5vw + 12px, 38px);
  border-bottom:1px solid var(--line);
}
.cesta__seznam h3{font-size:var(--t-lg);line-height:1.3}
/* Podtitulek musí být zřetelně menší než název etapy nad ním, jinak splynou
   do jednoho bloku. Proto vlastní, menší stupeň než --t-micro. */
.cesta__role{
  margin-top:6px;font-family:var(--sans);
  font-size:clamp(9px, 0.12vw + 8.4px, 11.5px);
  letter-spacing:.16em;text-transform:uppercase;color:#8d8a84;line-height:1.5;
}
/* jen popis vpravo — podtitulek etapy je o úroveň hlouběji a má vlastní stupeň */
.cesta__seznam li > p{
  margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}

/* --- australský trh --- */
.austr{padding-top:calc(var(--gap-sm) * 1.45)}
.austr__lead{
  margin-top:var(--sp-4);max-width:min(100%, 104ch);
  font-size:var(--t-base);line-height:1.6;color:var(--body);text-wrap:pretty;
}
.austr .ramec{background:var(--white)}

/* --- fotka patří ke své kategorii, ne do samostatného pásu ---
   Karty jsou sloupce stejné výšky, fotka se proto přisaje ke spodku,
   aby všechny tři začínaly na jedné lince i při různě dlouhém textu. */
.austr .ramec__cell{display:flex;flex-direction:column}
.austr__foto{margin:0;padding-top:clamp(20px, 1.6vw + 12px, 34px);margin-top:auto}
.austr__misto{
  aspect-ratio:404/180;display:grid;place-items:center;padding:var(--sp-3);
  background:var(--grey-bg);border:1px solid var(--grey-line);
  font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:#8d8a84;text-align:center;line-height:1.6;
}
.austr__foto figcaption{
  margin-top:var(--sp-2);font-size:var(--t-xs);line-height:1.5;color:#8d8a84;
}

/* --- školení · jediný tmavý pás na stránce, drží se australské sekce --- */
.skoleni{
  margin-top:var(--gap);
  background:var(--dark);color:var(--white);
  padding-block:clamp(56px, 4.4vw + 32px, 120px);
}
.skoleni__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px, 3vw, 64px);align-items:center;
}
.skoleni h2{color:var(--white);font-size:var(--t-h2);line-height:1.2}
.skoleni p{
  margin-top:var(--sp-3);max-width:46ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--dark-muted);text-wrap:pretty;
}
/* šedý pás australské sekce navazuje bez mezery, jak je v návrhu */
.skoleni + .austr{margin-top:0}


/* Fotka pod texty — jen tam, kde není vidět vyříznutá Petra vpravo.
   Roste se šířkou okna, ale nikdy nepřeroste výšku obrazovky, takže
   je vždycky celá a nic se neořezává. */
.shero__mobil{display:none}
@media (max-width:899.98px){
  .shero__mobil{
    display:block;margin:clamp(34px, 5vw + 12px, 64px) 0 0;
    width:min(100%, 66svh);
  }
  .shero__mobil img{display:block;width:100%;height:auto}
}

@media (min-width:900px){
  .shero--omne{
    background:radial-gradient(118% 82% at 56% 36%,
                #eef0f3 0%, #e6e9ec 36%, #dbdfe4 68%, #cfd4da 100%);
  }
}

@media (max-width:899.98px){
  .cesta__seznam li{grid-template-columns:1fr;gap:var(--sp-3)}
  .skoleni__inner{grid-template-columns:1fr;align-items:start;gap:var(--sp-5)}
}

@media (max-width:640px){
  .skoleni{margin-top:calc(var(--gap) * 1.4)}
}

/* =========================================================
   TRENÉR A MENTOR (školení)
   Hlavička = .pagehead z Nemovitostí. Nadtitulek je tady odkaz zpátky
   na O mně, protože stránka není v navigaci. Šedý pás = .band-grey,
   tmavý pás navazuje bez mezery stejně jako na O mně.
   ========================================================= */

/* nadpis na desktopu na dva řádky jako v návrhu — stejný trik jako Pro kupující */
.pagehead--skoleni{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .pagehead--skoleni{grid-template-columns:1fr}
}
.eyebrow a{color:inherit;border-bottom:1px solid transparent;transition:border-color .26s var(--ease)}
.eyebrow a:hover{border-bottom-color:currentColor}

/* --- programy · číslo, název s parametry, popis --- */
.programy{padding-top:var(--gap-lg)}
.programy__seznam{
  list-style:none;margin:var(--sp-7) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.programy__seznam li{
  display:grid;
  grid-template-columns:minmax(0,70fr) minmax(0,444fr) minmax(0,646fr);
  grid-template-areas:"cislo nazev popis";
  gap:clamp(18px, 2.8vw, 64px);align-items:center;
  padding-block:clamp(26px, 2vw + 14px, 52px);
  border-bottom:1px solid var(--line);
}
.programy__num{
  grid-area:cislo;
  font-family:var(--display);font-weight:400;font-size:var(--t-h2);
  line-height:1;color:#8d8a84;
}
.programy__nazev{grid-area:nazev}
.programy__nazev h3{font-size:var(--t-h3);line-height:1.3}
.programy__meta{
  margin-top:8px;font-family:var(--sans);
  font-size:clamp(9px, 0.12vw + 8.4px, 11.5px);
  letter-spacing:.16em;text-transform:uppercase;color:#8d8a84;line-height:1.6;
}
.programy__seznam li > p{
  grid-area:popis;margin:0;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}

/* --- dále školí · šedý pás se štítky --- */
.skoli{padding-block:calc(var(--gap-sm) * 1.45)}
.skoli p{
  margin-top:var(--sp-3);max-width:62ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}
/* Bez rámečků — obrysové krabičky působily levně. Položky stojí vedle sebe
   pod vlasovou linkou, stejným rukopisem jako hodnoty u Chelsea. */
.stitky{
  list-style:none;margin:var(--sp-7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:var(--sp-5) clamp(20px, 2.4vw, 48px);
}
.stitky li{
  padding-top:var(--sp-3);border-top:1px solid var(--grey-line);
  font-family:var(--display);font-weight:500;
  font-size:var(--t-base);line-height:1.4;color:var(--ink-90);text-wrap:balance;
}

/* --- Chelsea · jediný tmavý pás, navazuje na šedý --- */
.chelsea{
  background:var(--dark);color:var(--white);
  padding-block:clamp(56px, 4.4vw + 32px, 120px);
}
.chelsea__inner{
  display:grid;grid-template-columns:minmax(0,557fr) minmax(0,584fr);
  gap:clamp(32px, 7.5vw, 120px);align-items:center;
}
.chelsea__foto{margin:0}
.chelsea__foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.chelsea h2{color:var(--white)}
.chelsea__text > p{
  margin-top:var(--sp-4);max-width:56ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--dark-muted);text-wrap:pretty;
}
.hodnoty{
  list-style:none;margin:var(--sp-6) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(12px, 2.8vw, 40px);
}
.hodnoty li{
  padding-top:var(--sp-3);border-top:1px solid var(--dark-line);
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);line-height:1.5;
}

/* --- mostík pro klienty · cesta zpátky do prodejní větve --- */
.mostik-klient{
  padding-block:var(--gap);   /* nahoře i dole stejně */
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px, 3vw, 64px);align-items:center;
}
.mostik-klient h2{max-width:24ch}
.mostik-klient p{
  margin-top:var(--sp-4);max-width:78ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}

@media (max-width:1100px){
  .programy__seznam li{
    grid-template-columns:minmax(0,56px) minmax(0,1fr);
    grid-template-areas:"cislo nazev" "cislo popis";
    align-items:start;row-gap:var(--sp-3);
  }
}
@media (max-width:899.98px){
  .chelsea__inner{grid-template-columns:1fr;gap:var(--sp-6)}
  .mostik-klient{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
}
@media (max-width:640px){
  /* na mobilu víc vzduchu nad programy i pod nimi */
  .programy{padding-top:calc(var(--gap-lg) * 1.2);padding-bottom:calc(var(--gap) * .3)}
  .programy__seznam li{
    grid-template-columns:1fr;grid-template-areas:"cislo" "nazev" "popis";
    row-gap:var(--sp-2);
  }
  .hodnoty{grid-template-columns:repeat(2, minmax(0,1fr));row-gap:var(--sp-4)}
  .chelsea{margin-top:0}
}

/* =========================================================
   KONTAKT — Figma 244:1683
   Hlavička = .pagehead, jen podtext leží pod nadpisem jako v návrhu.
   Žádná CTA deska — stránka sama je cíl všech tlačítek.
   ========================================================= */

.pagehead--kontakt{grid-template-columns:minmax(0,1fr);grid-template-areas:"nadpis" "podtext";row-gap:var(--sp-4)}
.pagehead--kontakt h1{max-width:none}
.pagehead--kontakt .pagehead__lead{margin-top:0;border-left:0;padding-left:0;max-width:37em}

/* --- kontakty vlevo, formulář vpravo; spodek levého sloupce lícuje s formulářem --- */
.kontakt{
  display:grid;grid-template-columns:minmax(0,498fr) minmax(0,672fr);
  column-gap:clamp(32px, 6.25vw, 150px);align-items:stretch;
  padding-top:calc(var(--gap) * 1.3);
}
.kontakt__info{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-7)}
/* na menším notebooku je formulář vyšší než sloupec vlevo — kontakty pak
   zůstanou u fotky, jinak by mezi nimi zela díra */
@media (max-width:1279.98px){ .kontakt__info{justify-content:flex-start} }
.kontakt__foto img{width:100%;aspect-ratio:498/280;object-fit:cover;object-position:60% 40%}

.kontakt__radky > li{border-top:1px solid var(--line);padding-block:clamp(16px, 1.1vw + 5px, 34px)}
.kontakt__radky > li:last-child{padding-bottom:0}
.kontakt__stitek{
  margin:0 0 4px;font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:#8d8a84;line-height:1.6;
}
.kontakt__hodnota{
  display:inline-block;font-family:var(--georgia);font-size:clamp(19px, 0.4167vw + 16px, 31px);
  line-height:1.5;color:var(--ink-90);border-bottom:1px solid transparent;
  transition:border-color .26s var(--ease);overflow-wrap:anywhere;
}
.kontakt__hodnota:hover{border-bottom-color:currentColor}
.kontakt__pozn{margin:2px 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty}
.kontakt__site{display:flex;flex-wrap:wrap;gap:var(--sp-2) clamp(18px, 1.53vw, 34px)}
.kontakt__site a{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--body);
  border-bottom:1px solid transparent;transition:border-color .26s var(--ease);
}
.kontakt__site a:hover{border-bottom-color:currentColor}

/* --- formulář: karta s tenkým rámečkem, pole jen se spodní linkou --- */
.formular{
  position:relative;border:1px solid var(--line);background:var(--white);
  container-type:inline-size;display:flex;flex-direction:column;
  padding:clamp(22px, 3.05vw, 72px);
}
.formular h2{margin:0}
.formular__pole{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(20px, 1.53vw, 36px)}
.pole--cela{grid-column:1 / -1}
/* úzká karta (mobil, nízký notebook) = pole pod sebou, ať se popisky nelámou */
@container (max-width:440px){ .formular__pole{grid-template-columns:minmax(0,1fr)} }
.pole label{
  display:block;margin-bottom:6px;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);line-height:1.6;
}
/* písmo pod 16 px by na iPhonu po klepnutí přiblížilo stránku */
.pole input,.pole select,.pole textarea{
  display:block;width:100%;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:var(--white);color:var(--ink-90);
  font:inherit;font-size:max(16px, var(--t-base));line-height:1.4;
  padding:10px 0;min-height:clamp(44px, 0.9vw + 31px, 58px);
  transition:border-color .26s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.pole select{
  padding-right:28px;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--body) 50%),linear-gradient(135deg, var(--body) 50%, transparent 50%);
  background-position:calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size:5px 5px;background-repeat:no-repeat;
}
.pole select:invalid{color:#8d8a84}
.pole select option{color:var(--ink-90)}
.pole textarea{min-height:clamp(96px, 7.6vw, 170px);resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;border-bottom-color:var(--ink-90)}
.pole input:focus-visible,.pole select:focus-visible,.pole textarea:focus-visible{box-shadow:0 1px 0 var(--ink-90)}
.pole input:user-invalid,.pole select:user-invalid{border-bottom-color:var(--ink-90)}
.pole__pozn{margin:8px 0 0;font-size:var(--t-xs);line-height:1.6;color:#8d8a84;text-wrap:pretty}

.formular__souhlas{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:var(--t-sm);line-height:1.6;color:var(--body);text-wrap:pretty;
}
.formular__souhlas input{flex:0 0 auto;width:16px;height:16px;margin:.3em 0 0;accent-color:var(--ink-90);cursor:pointer}
.formular__souhlas a{text-decoration:underline;text-underline-offset:3px}
.formular__souhlas a:hover{color:var(--ink-90)}
.formular__odeslat{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- co se stane po odeslání · jediný tmavý blok, tři kroky vedle sebe --- */
.postup{
  margin-top:calc(var(--gap) * 1.25);
  background:var(--dark);color:var(--white);
  padding-block:clamp(60px, 5vw + 34px, 150px);
}
.postup h2{color:var(--white)}
.postup__kroky{
  list-style:none;margin:var(--sp-7) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(28px, 4.2vw, 110px);
}
.postup__kroky li{
  display:flex;flex-direction:column;
  padding-top:var(--sp-5);border-top:1px solid var(--dark-line);
}
.postup__num{   /* stejné číslo jako u programů na Trenérovi */
  font-family:var(--display);font-weight:400;font-size:var(--t-h2);line-height:1;color:#8d8a84;
}
.postup h3{
  margin-top:var(--sp-5);color:var(--white);
  font-size:var(--t-h3);line-height:1.25;letter-spacing:.01em;
}
.postup p{
  margin:var(--sp-3) 0 0;max-width:34ch;
  font-size:var(--t-sm);line-height:1.6;color:var(--dark-muted);text-wrap:pretty;
}

/* --- mapa a působnost --- */
.mapa{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;
  padding-block:calc(var(--gap) * 1.25) calc(var(--gap-lg) * 1.1);
}
.mapa__plocha{
  position:relative;aspect-ratio:2 / 1;overflow:hidden;background:var(--grey-bg);
  display:flex;align-items:center;justify-content:center;
}
/* prázdné místo jako v návrhu: dvě úhlopříčky */
.mapa__plocha::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--line) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--line) 50%, transparent calc(50% + .6px));
}
.mapa__plocha span{
  position:relative;background:var(--grey-bg);padding:4px 10px;
  font-size:var(--t-micro);letter-spacing:.25em;text-transform:uppercase;color:#8d8a84;
}
.mapa__text{padding-inline:clamp(24px, 3.33vw, 80px)}
.mapa__adresa{margin:var(--sp-4) 0 0;font-size:var(--t-base);line-height:1.7;color:var(--body)}
.mapa__pusobnost{margin:var(--sp-4) 0 0;font-size:var(--t-sm);line-height:1.6;color:#8d8a84;text-wrap:pretty}

/* --- po odeslání: obsah karty zmizí, karta se plynule srovná na výšku
   poděkování a to vyjede s kreslenou fajfkou --- */
.formular__obsah{display:flex;flex-direction:column;gap:var(--sp-6);transition:opacity .32s var(--ease)}
.formular.is-odesila .formular__odeslat{opacity:.6;cursor:progress}
.formular.is-meni{overflow:hidden;transition:height .55s var(--ease)}
.formular.is-meni .formular__obsah{opacity:0}
.formular__chyba{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-90)}
.formular__chyba a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.formular__hotovo{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);
  padding-block:var(--sp-5);margin-block:auto;outline:none;   /* na desktopu uprostřed vysoké karty */
}
.formular__obsah[hidden],.formular__hotovo[hidden]{display:none}
.formular__hotovo > *{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.formular__hotovo.is-in > *{opacity:1;transform:none}
.formular__hotovo.is-in > :nth-child(2){transition-delay:.12s}
.formular__hotovo.is-in > :nth-child(3){transition-delay:.22s}
.formular__hotovo.is-in > :nth-child(4){transition-delay:.32s}
.formular__znovu{margin-top:var(--sp-3)}
.formular__znovu:hover{border-bottom-color:var(--ink-90)}
.formular__hotovo h2{margin:0}
.formular__hotovo p{margin:0;max-width:40ch;font-size:var(--t-md);line-height:1.6;color:var(--body);text-wrap:pretty}
.formular__hotovo a{color:var(--ink-90);white-space:nowrap}
.formular__znak{width:clamp(44px, 1.6vw + 30px, 68px);height:auto;fill:none;stroke:var(--ink-90);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.formular__znak circle{stroke:var(--gold);stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .9s var(--ease) .1s}
.formular__znak path{stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .5s var(--ease) .75s}
.formular__hotovo.is-in .formular__znak circle,
.formular__hotovo.is-in .formular__znak path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .formular__obsah,.formular.is-meni,.formular__hotovo > *,.formular__znak circle,.formular__znak path{transition:none}
}

/* --- skládání: stejná hranice jako u hlavičky --- */
@media (orientation:portrait) and (min-width:641px) and (max-width:1100px), (max-width:899.98px){
  .kontakt{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-7)}
  .mapa{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-5)}
  /* kroky pod sebe: číslo vlevo, text vedle */
  .postup__kroky{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-5)}
  .postup__kroky li{display:grid;grid-template-columns:clamp(44px, 8vw, 72px) minmax(0,1fr);grid-template-areas:"num nadpis" "num popis";column-gap:var(--sp-4)}
  .postup__num{grid-area:num}
  .postup h3{grid-area:nadpis;margin-top:0}
  .postup p{grid-area:popis;max-width:52ch}
  .mapa__text{padding-inline:0}
  .mapa__pusobnost{max-width:52ch}
}
/* tablet na výšku: fotka a kontakty vedle sebe, ať formulář nespadne moc hluboko */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait), (min-width:641px) and (max-width:899.98px){
  .kontakt__info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px, 4vw, 48px)}
}
@media (max-width:640px){
  .kontakt{padding-top:calc(var(--gap-lg) * 1.2)}   /* stejně jako Programy na Trenérovi */
  .postup{margin-top:calc(var(--gap-lg) * 1.2)}
  .mapa{padding-top:calc(var(--gap-lg) * 1.2)}
  .mapa__plocha span{letter-spacing:.16em;text-align:center}
  .mapa__plocha{aspect-ratio:4 / 3}
}